/*******************************************************************/ /************************ WP TLP TEAM PRO **************************/ /************************* www.techlabpro.com **********************/ /************************* info@techlabpro.com *********************/ /***** Copyright (c) 2015, TechLabPro.com. All right Reserved ******/ /*******************************************************************/ /*********************** Smart PopUp *************************/ html.rt-smart-modal-on { overflow: hidden; } html.rt-smart-modal-on body { overflow: auto; } #rt-smart-modal-container { position: fixed; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; z-index: 99999; overflow: hidden; opacity: 0; background: rgba(33, 33, 33, 0.7); visibility: hidden; -webkit-backface-visibility: hidden; transition: opacity .5s .4s, visibility .5s .4s; -webkit-transition: opacity .5s .4s, visibility .5s .4s; -moz-transition: opacity .5s .4s, visibility .5s .4s; } #rt-smart-modal-container.open { opacity: 1; visibility: visible; transition: opacity .4s, visibility .5s; -webkit-transition: opacity .4s, visibility .5s; } #rt-smart-modal-container.open .rt-smart-modal-main .rt-smart-modal { font-size: initial !important; } #rt-smart-modal-container.open.ready .rt-smart-modal-main { transform: translateX(0) !important; -webkit-transform: translateX(0) !important; -moz-transform: translateX(0) !important; } #rt-smart-modal-container.loading .rt-spinner { position: absolute; display: inline-block; border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #fb4c35; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: rt_spin 2s linear infinite; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; } #rt-smart-modal-container.loading .rt-smart-modal-header .rt-smart-modal-nav { display: none; } #rt-smart-modal-container .rt-smart-modal-main { max-width: 500px; margin-left: auto; height: 100%; position: absolute; width: 100%; right: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform .6s; -moz-transition: -moz-transform .6s; transition: transform .6s; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); } #rt-smart-modal-container .rt-smart-modal-main.is-rtl { direction: rtl; margin-right: auto; } #rt-smart-modal-container .rt-smart-modal-main.is-rtl .rt-smart-modal .rt-smart-modal-main-content-wrapper { padding-right: 30px !important; padding-left: 0; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal-header { background: #990028; position: relative; padding: 0 30px; height: 50px; overflow: hidden; z-index: 999999; opacity: 1 !important; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal-header span.rt-smart-modal-nav { float: left; height: 100%; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal-header .rt-smart-nav-item { width: 25px; display: flex; cursor: pointer; font-size: 35px; z-index: 999; float: left; align-items: center; height: 100%; -webkit-text-stroke: 1px #990028; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal-header a { color: white; text-decoration: none; outline: none; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal-header a.rt-smart-modal-close { float: right; width: 35px; font-size: 35px; font-weight: normal; height: 100%; display: flex; align-items: center; border: 0; -webkit-text-stroke: 6px #990028; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal { height: 100%; position: absolute; right: 0; top: 0; left: 0; z-index: 2; font-size: 0; width: 100%; background: #313131; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper { position: relative; padding: 50px 0 18px 30px; max-height: 100%; height: 100%; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content { position: relative; bottom: 0; margin: 0 auto; vertical-align: middle; display: inline-block; width: 100%; overflow: auto; max-height: 100%; height: 100%; color: #ffffff; opacity: 0; -webkit-transition: opacity .4s; -moz-transition: opacity .4s; transition: opacity .4s; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content .rt-team-container { padding: 15px 20px; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content .rt-team-container h3 { margin-bottom: 10px !important; color: #fff; } div#rt-smart-modal-container h3 { font-size: 30px; } div#rt-smart-modal-container .tlp-team-skill{ margin-top: 20px; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content .rt-team-container .tlp-position { margin-bottom: 20px; line-height: 1.2; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content .rt-team-container .contact-info ul li { line-height: 30px; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content .rt-team-container .tlp-team-skill .skill_name { font-size: 18px; margin-bottom: 5px; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content .rt-team-container .tlp-team-skill skill-prog { height: 10px; margin-bottom: 10px; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content .rt-team-container .rt-team-latest-post-wrap ul.author-latest-post { margin: 0; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content .rt-team-container .rt-team-latest-post-wrap ul.author-latest-post li { padding: 5px; } #rt-smart-modal-container .mCSB_scrollTools { margin-top: 15px !important; } @keyframes rt_spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 767px) { .rt-smart-modal-container .rt-smart-modal-main.is-rtl .rt-smart-modal-main-content-wrapper { padding-left: 30px !important; } .rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal-main-content-wrapper { padding-right: 30px !important; } } @media (max-width: 500px) { .rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content { padding: 10px 10px 0; } } .rt-smart-modal-main-content-wrapper .team-images { margin-bottom: 20px; } /*********************** Grid System **************************/ .rt-team-container * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .rt-team-container *:before, .rt-team-container *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .rt-container, .rt-container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .rt-container:before, .rt-container:after, .rt-container-fluid:before, .rt-container-fluid:after, .rt-row:before, .rt-row:after { content: " "; display: table; } .clearfix:after, .rt-container:after, .rt-container-fluid:after, .rt-row:after { clear: both; } .rt-row { margin-left: -15px; margin-right: -15px; } .rt-team-container > .rt-row > .rt-special-wrapper, .rt-row.special-items-wrapper, .rt-team-container[data-layout*="layout"] .rt-row.ttp-even { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .rt-col-xs-1, .rt-col-sm-1, .rt-col-md-1, .rt-col-lg-1, .rt-col-xs-2, .rt-col-sm-2, .rt-col-md-2, .rt-col-lg-2, .rt-col-xs-3, .rt-col-sm-3, .rt-col-md-3, .rt-col-lg-3, .rt-col-xs-4, .rt-col-sm-4, .rt-col-md-4, .rt-col-lg-4, .rt-col-xs-5, .rt-col-sm-5, .rt-col-md-5, .rt-col-lg-5, .rt-col-xs-6, .rt-col-sm-6, .rt-col-md-6, .rt-col-lg-6, .rt-col-xs-7, .rt-col-sm-7, .rt-col-md-7, .rt-col-lg-7, .rt-col-xs-8, .rt-col-sm-8, .rt-col-md-8, .rt-col-lg-8, .rt-col-xs-9, .rt-col-sm-9, .rt-col-md-9, .rt-col-lg-9, .rt-col-xs-10, .rt-col-sm-10, .rt-col-md-10, .rt-col-lg-10, .rt-col-xs-11, .rt-col-sm-11, .rt-col-md-11, .rt-col-lg-11, .rt-col-xs-12, .rt-col-sm-12, .rt-col-md-12, .rt-col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .rt-col-xs-1, .rt-col-xs-2, .rt-col-xs-3, .rt-col-xs-4, .rt-col-xs-5, .rt-col-xs-6, .rt-col-xs-7, .rt-col-xs-8, .rt-col-xs-9, .rt-col-xs-10, .rt-col-xs-11, .rt-col-xs-12 { float: left; } .rt-col-xs-12 { width: 100%; } .rt-col-xs-11 { width: 91.66666667%; } .rt-col-xs-10 { width: 83.33333333%; } .rt-col-xs-9 { width: 75%; } .rt-col-xs-8 { width: 66.66666667%; } .rt-col-xs-7 { width: 58.33333333%; } .rt-col-xs-6 { width: 50%; } .rt-col-xs-5 { width: 41.66666667%; } .rt-col-xs-4 { width: 33.33333333%; } .rt-col-xs-3 { width: 25%; } .rt-col-xs-2 { width: 16.66666667%; } .rt-col-xs-1 { width: 8.33333333%; } /************************ End Grid System *********************/ /*! * animate.css -http://daneden.me/animate * Version - 3.5.2 */ .animated { animation-duration: 1s; animation-fill-mode: both; } .animated.infinite { animation-iteration-count: infinite; } .animated.hinge { animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { animation-duration: 0.75s; } @keyframes bounce { 0%, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateZ(0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); } 70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } .bounce { animation-name: bounce; transform-origin: center bottom; } @keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { animation-name: flash; } @keyframes pulse { 0% { transform: scaleX(1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scaleX(1); } } .pulse { animation-name: pulse; } @keyframes rubberBand { 0% { transform: scaleX(1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scaleX(1); } } .rubberBand { animation-name: rubberBand; } @keyframes shake { 0%, to { transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } .shake { animation-name: shake; } @keyframes headShake { 0% { transform: translateX(0); } 6.5% { transform: translateX(-6px) rotateY(-9deg); } 18.5% { transform: translateX(5px) rotateY(7deg); } 31.5% { transform: translateX(-3px) rotateY(-5deg); } 43.5% { transform: translateX(2px) rotateY(3deg); } 50% { transform: translateX(0); } } .headShake { animation-timing-function: ease-in-out; animation-name: headShake; } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } to { transform: rotate(0deg); } } .swing { transform-origin: top center; animation-name: swing; } @keyframes tada { 0% { transform: scaleX(1); } 10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { transform: scaleX(1); } } .tada { animation-name: tada; } @keyframes wobble { 0% { transform: none; } 15% { transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { transform: none; } } .wobble { animation-name: wobble; } @keyframes jello { 0%, 11.1%, to { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { animation-name: jello; transform-origin: center; } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; transform: scaleX(1); } } .bounceIn { animation-name: bounceIn; } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform: none; } } .bounceInDown { animation-name: bounceInDown; } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { transform: none; } } .bounceInLeft { animation-name: bounceInLeft; } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { transform: none; } } .bounceInRight { animation-name: bounceInRight; } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translateZ(0); } } .bounceInUp { animation-name: bounceInUp; } @keyframes bounceOut { 20% { transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { animation-name: bounceOut; } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .bounceOutDown { animation-name: bounceOutDown; } @keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { animation-name: bounceOutLeft; } @keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } .bounceOutRight { animation-name: bounceOutRight; } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } .bounceOutUp { animation-name: bounceOutUp; } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } .fadeInDown { animation-name: fadeInDown; } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translate3d(0, -2000px, 0); } to { opacity: 1; transform: none; } } .fadeInDownBig { animation-name: fadeInDownBig; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } } .fadeInLeft { animation-name: fadeInLeft; } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translate3d(-2000px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInLeftBig { animation-name: fadeInLeftBig; } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } } .fadeInRight { animation-name: fadeInRight; } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translate3d(2000px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInRightBig { animation-name: fadeInRightBig; } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } .fadeInUp { animation-name: fadeInUp; } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translate3d(0, 2000px, 0); } to { opacity: 1; transform: none; } } .fadeInUpBig { animation-name: fadeInUpBig; } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } } .fadeOutDown { animation-name: fadeOutDown; } @keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { animation-name: fadeOutDownBig; } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { animation-name: fadeOutLeft; } @keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { animation-name: fadeOutLeftBig; } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0); } } .fadeOutRight { animation-name: fadeOutRight; } @keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { animation-name: fadeOutRightBig; } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); } } .fadeOutUp { animation-name: fadeOutUp; } @keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { animation-name: fadeOutUpBig; } @keyframes flip { 0% { transform: perspective(400px) rotateY(-1turn); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(-190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(-170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95); animation-timing-function: ease-in; } to { transform: perspective(400px); animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flip; } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotateX(-20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { transform: perspective(400px) rotateX(-5deg); } to { transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInX; } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotateY(-20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { transform: perspective(400px) rotateY(-5deg); } to { transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInY; } @keyframes flipOutX { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @keyframes flipOutY { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipOutY; } @keyframes lightSpeedIn { 0% { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); opacity: 1; } to { transform: none; opacity: 1; } } .lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out; } @keyframes lightSpeedOut { 0% { opacity: 1; } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in; } @keyframes rotateIn { 0% { transform-origin: center; transform: rotate(-200deg); opacity: 0; } to { transform-origin: center; transform: none; opacity: 1; } } .rotateIn { animation-name: rotateIn; } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } } .rotateInDownLeft { animation-name: rotateInDownLeft; } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(45deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } } .rotateInDownRight { animation-name: rotateInDownRight; } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } } .rotateInUpLeft { animation-name: rotateInUpLeft; } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } } .rotateInUpRight { animation-name: rotateInUpRight; } @keyframes rotateOut { 0% { transform-origin: center; opacity: 1; } to { transform-origin: center; transform: rotate(200deg); opacity: 0; } } .rotateOut { animation-name: rotateOut; } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate(45deg); opacity: 0; } } .rotateOutDownLeft { animation-name: rotateOutDownLeft; } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate(-45deg); opacity: 0; } } .rotateOutDownRight { animation-name: rotateOutDownRight; } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate(-45deg); opacity: 0; } } .rotateOutUpLeft { animation-name: rotateOutUpLeft; } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { animation-name: rotateOutUpRight; } @keyframes hinge { 0% { transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40%, 80% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } to { transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { animation-name: hinge; } @keyframes jackInTheBox { 0% { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } } .jackInTheBox { animation-name: jackInTheBox; } @keyframes rollIn { 0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; transform: none; } } .rollIn { animation-name: rollIn; } @keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate(120deg); } } .rollOut { animation-name: rollOut; } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { animation-name: zoomIn; } @keyframes zoomInDown { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { animation-name: zoomInDown; } @keyframes zoomInLeft { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { animation-name: zoomInLeft; } @keyframes zoomInRight { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { animation-name: zoomInRight; } @keyframes zoomInUp { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { animation-name: zoomInUp; } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { animation-name: zoomOut; } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { animation-name: zoomOutDown; } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } .zoomOutLeft { animation-name: zoomOutLeft; } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } .zoomOutRight { animation-name: zoomOutRight; } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { animation-name: zoomOutUp; } @keyframes slideInDown { 0% { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translateZ(0); } } .slideInDown { animation-name: slideInDown; } @keyframes slideInLeft { 0% { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translateZ(0); } } .slideInLeft { animation-name: slideInLeft; } @keyframes slideInRight { 0% { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translateZ(0); } } .slideInRight { animation-name: slideInRight; } @keyframes slideInUp { 0% { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translateZ(0); } } .slideInUp { animation-name: slideInUp; } @keyframes slideOutDown { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(0, 100%, 0); } } .slideOutDown { animation-name: slideOutDown; } @keyframes slideOutLeft { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(-100%, 0, 0); } } .slideOutLeft { animation-name: slideOutLeft; } @keyframes slideOutRight { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(100%, 0, 0); } } .slideOutRight { animation-name: slideOutRight; } @keyframes slideOutUp { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(0, -100%, 0); } } .slideOutUp { animation-name: slideOutUp; } /********************** Filter *************************/ /* loader */ .rt-clear:after { clear: both; content: ""; display: block; } .rt-team-container .ttp-pre-loader { position: relative; overflow: hidden; } .rt-team-container .rt-loading-overlay { opacity: 0; visibility: hidden; position: absolute; -webkit-transition: all 0.5s; transition: all 0.5s; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #fff; } .rt-team-container .rt-loading { color: #fb4c35; position: absolute; top: 60px; left: 50%; margin-left: -16px; z-index: 2; opacity: 0; visibility: hidden; } .rt-team-container[data-layout*="carousel"] .rt-loading { /* top: 50%; margin-top: -16px; */ z-index: 100; } .rt-team-container[data-layout*="carousel"] .rt-loading-overlay { z-index: 99; } /***************************** Grayscale ******************/ .rt-team-container.rt-grayscale img.rt-team-img , .rt-team-container.rt-grayscale img.rt-profile-img { -webkit-filter: grayscale(100%); /* For Webkit browsers */ -moz-filter: grayscale(100%); /* For Firefox */ -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: grayscale(100%); /* IE8-9 */ } .rt-team-container.rt-grayscale img.rt-team-img:hover, .rt-team-container.rt-grayscale img.rt-profile-img:hover, .rt-team-container.rt-grayscale .rt-grid-item:hover img.rt-profile-img { -webkit-filter: grayscale(0); /* For Webkit browsers */ -moz-filter: grayscale(0); /* For Firefox */ -o-filter: grayscale(0); filter: none; filter: grayscale(0); /* IE8-9 */ } /**************** END grayscale **************************/ .rt-team-container .ttp-pre-loader .rt-loading-overlay { opacity: 0.8; visibility: visible; } .rt-team-container[data-layout*="carousel"] .ttp-pre-loader .rt-loading-overlay { opacity: 1; } .rt-team-container .ttp-pre-loader .rt-loading { opacity: 1; visibility: visible; } .single-team .rt-team-container .social-icons a { color: inherit; } .rt-ball-clip-rotate { width: 32px; height: 32px; } .rt-ball-clip-rotate { display: block; font-size: 0; color: #fff; } .rt-ball-clip-rotate, .rt-ball-clip-rotate > div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .rt-ball-clip-rotate > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .rt-ball-clip-rotate > div { width: 32px; height: 32px; background: transparent; border-width: 2px; border-bottom-color: transparent; border-radius: 100%; -webkit-animation: ball-clip-rotate 0.75s linear infinite; -moz-animation: ball-clip-rotate 0.75s linear infinite; -o-animation: ball-clip-rotate 0.75s linear infinite; animation: ball-clip-rotate 0.75s linear infinite; } /* `.rt-clear` is a shared float utility, not part of the toolbar. */ .rt-clear::after, .rt-clear::-ms-ticks-after { clear: both; display: block; content: ""; } /* ========================================================================== Filter toolbar — pills + search + sort Redesigned from `Team Filter Toolbar.html`. ONE body serves BOTH render paths and is duplicated verbatim into tlp-team/assets/css/tlpteam.css and tlp-team-pro/src/scss/frontend/components/_cp-filter-buttons.scss. Both stylesheets load on every page, so every rule names BOTH container classes (`.rt-layout-filter-container` = shortcode, `.rt-el-layout-filter-container` = Elementor) and the two copies must stay identical — otherwise which one wins depends on load order. MARKUP DIFFERS BETWEEN THE PATHS. Elementor wraps the items in `.filter-left` / `.filter-right`; the shortcode drops `.rt-filter-item-wrap` siblings straight into `.rt-filter-wrap`. So the row is `justify-content: flex-end` with `margin-right: auto` on the taxonomy filter: the pills sit left and everything after them is pushed right, on both paths, and with no taxonomy filter the tools still right-align. SPECIFICITY: the Button colour controls (Fns::layoutStyleGenerator and templates/sc-css.php) paint `.rt-filter-button-item`, the dropdown items and the dropdown/sort borders. Those arms are ID-scoped on Elementor and carry `$selector` plus the full chain on the shortcode, so they out-rank everything here by construction — keep these rules class-only and do not add `!important`, or every Button control dies. ========================================================================== */ .rt-layout-filter-container, .rt-el-layout-filter-container { --rt-flt-primary: var(--l1-primary, #143ee5); --rt-flt-primary-dark: #0e2aa3; --rt-flt-primary-dark: color-mix(in srgb, var(--rt-flt-primary) 72%, #000); --rt-flt-soft: #eef1ff; --rt-flt-soft: color-mix(in srgb, var(--rt-flt-primary) 8%, #fff); --rt-flt-ink: #0f1535; --rt-flt-ink-2: #3a3f5c; --rt-flt-muted: #6b7088; --rt-flt-line: #e7eaf3; --rt-flt-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); --rt-flt-shadow-md: 0 16px 40px rgba(20, 62, 229, .12), 0 4px 12px rgba(20, 30, 75, .06); --rt-flt-ease: cubic-bezier(.4, 0, .2, 1); /* the old rules used `font-size: 0` to kill inline-block whitespace; the row is flex now, so a real size is safe and the CSS-drawn icons need one */ font-size: 14px; line-height: 1.6; padding: 0; margin: 0 0 30px; } /* ---------- the toolbar row ---------- */ .rt-layout-filter-container .rt-filter-wrap, .rt-el-layout-filter-container .rt-filter-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 12px; /* NOWRAP on desktop, deliberately. With `wrap`, the line is broken using each item's BASE size, so as soon as the pill tray's natural width plus the tools exceeded the row the tools jumped to a second line — which is what the count badges triggered. `nowrap` lets the tray shrink and wrap its pills inside itself, keeping the toolbar on one row. The media query below restores wrapping on small screens. */ flex-wrap: nowrap; } .rt-layout-filter-container .rt-filter-wrap .filter-left, .rt-el-layout-filter-container .rt-filter-wrap .filter-left { /* shrink, never grow: growing stretched this to the full row width and pushed `.filter-right` onto a second line even when both would have fitted */ flex: 0 1 auto; min-width: 0; margin: 0; } .rt-layout-filter-container .rt-filter-wrap .filter-right, .rt-el-layout-filter-container .rt-filter-wrap .filter-right { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: 0; flex-wrap: wrap; } /* pills left, tools right — works with or without the Elementor wrappers */ .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-tax-filter, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-tax-filter { margin-right: auto; /* on the shortcode the tray is a direct flex item (no `.filter-left`), so it needs to be shrinkable itself or it would overflow under `nowrap` */ min-width: 0; } /* the old layout floated the tools; floats are inert in a flex row, but clear them so nothing inherits a stale float from the legacy rules */ .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-order-by-action, .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-sort-order-action, .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-search-filter-wrap, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-order-by-action, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-sort-order-action, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-search-filter-wrap { float: none; } /* `.rt-filter-wrap` also carries `.rt-clear`, whose `::after { display: block }` becomes a stray anonymous flex item in this row. It existed to clear the old floats and has no job now. */ .rt-layout-filter-container .rt-filter-wrap.rt-clear:after, .rt-el-layout-filter-container .rt-filter-wrap.rt-clear:after { display: none; } /* ---------- the pill group ---------- The reference groups the pills inside one white rounded tray. */ .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-tax-filter.rt-filter-button-wrap, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-tax-filter.rt-filter-button-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 5px; margin: 0; background: #fff; border: 1px solid var(--rt-flt-line); border-radius: 14px; box-shadow: var(--rt-flt-shadow); line-height: 1.55; font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--rt-flt-ink-2); cursor: default; } /* ---------- a pill ---------- `.rt-filter-button-item` stays the paint target: the Button Text / Hover / Active Background / Border controls all key on it. */ .rt-layout-filter-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 18px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--rt-flt-ink-2); font-size: 13.5px; font-weight: 500; line-height: 1.35; letter-spacing: .2px; text-transform: none; white-space: nowrap; cursor: pointer; transition: color .25s var(--rt-flt-ease), background .3s var(--rt-flt-ease), box-shadow .3s var(--rt-flt-ease), border-color .25s var(--rt-flt-ease); } .rt-layout-filter-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item:hover, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item:hover { background: transparent; border-color: transparent; color: var(--rt-flt-primary); } .rt-layout-filter-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item.selected, .rt-layout-filter-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item.selected:hover, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item.selected, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item.selected:hover { background: linear-gradient(160deg, var(--rt-flt-primary) 0%, var(--rt-flt-primary-dark) 100%); border-color: transparent; color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--rt-flt-primary) 32%, transparent); } /* ---------- pill count badge ---------- SETTINGS MUST WIN. The badge takes no colour of its own beyond a weak default: its background is mixed from `currentColor`, so whatever paints the pill — the Filter Button Color / Hover / Selected controls on Elementor, the Button text arms in sc-css.php, or the defaults below — carries straight into the badge. The `color` defaults are class-only (no `!important`), and the badge selector was added to those same control arms, so a value set in Settings or in the Elementor style tab overrides it every time. */ .rt-layout-filter-container .rt-filter-button-wrap .rt-filter-button-item .rt-filter-count, .rt-el-layout-filter-container .rt-filter-button-wrap .rt-filter-button-item .rt-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); color: var(--rt-flt-primary); font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; transition: background .25s var(--rt-flt-ease), color .25s var(--rt-flt-ease); } /* on the active pill the label is white, so the badge follows it — the tint is mixed from that same white and needs no separate value */ .rt-layout-filter-container .rt-filter-button-wrap .rt-filter-button-item.selected .rt-filter-count, .rt-el-layout-filter-container .rt-filter-button-wrap .rt-filter-button-item.selected .rt-filter-count { background: color-mix(in srgb, currentColor 22%, transparent); color: inherit; } /* hovering a resting pill tints its label; the badge rides along */ .rt-layout-filter-container .rt-filter-button-wrap .rt-filter-button-item:hover .rt-filter-count, .rt-el-layout-filter-container .rt-filter-button-wrap .rt-filter-button-item:hover .rt-filter-count { color: inherit; } /* ---------- search ---------- */ .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-search-filter-wrap, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-search-filter-wrap { position: relative; display: inline-flex; align-items: center; padding: 0; margin: 0; /* `transparent`, not `0`. This wrapper is only a positioning box now — the visible field is the input. A Border control that sets style + width but no colour (Elementor's border group does exactly that) would otherwise fall back to `currentColor` here and draw a BLACK rectangle around the rounded field. */ border: 0 solid transparent; line-height: 1.55; text-transform: none; letter-spacing: normal; } .rt-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap input.rt-search-input, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap input.rt-search-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 250px; max-width: 100%; min-width: 0; height: auto; margin: 0; padding: 12px 38px 12px 42px; background: #fff; border: 1px solid var(--rt-flt-line); border-radius: 12px; box-shadow: var(--rt-flt-shadow); font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--rt-flt-ink); outline: none !important; transition: border-color .2s var(--rt-flt-ease), box-shadow .2s var(--rt-flt-ease); } .rt-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap input.rt-search-input:focus, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap input.rt-search-input:focus { border-color: var(--rt-flt-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-flt-primary) 12%, transparent); } .rt-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap .rt-search-input::placeholder, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap .rt-search-input::placeholder { color: var(--rt-flt-muted); font-family: inherit; font-size: 14px; font-weight: 400; opacity: 1; } /* the magnifier moves to the leading edge, as in the reference. It stays clickable — the runtime binds the search submit to `.rt-action`. */ .rt-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap span.rt-action, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap span.rt-action { position: absolute; left: 15px; right: auto; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; font-size: 13px; line-height: 1; color: var(--rt-flt-muted); cursor: pointer; transition: color .2s var(--rt-flt-ease); } .rt-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap span.rt-action:hover, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap span.rt-action:hover { color: var(--rt-flt-primary); } /* The PHP used to print the literal U+1F50D character, which WordPress's emoji script swaps for a colour from s.w.org — it read as a sticker, not an icon. The markup now prints `` and the glass is drawn here, so it inherits currentColor and needs no icon font. The `img` rule stays as a guard for any cached markup still carrying the emoji. */ .rt-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap span.rt-action img.emoji, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap span.rt-action img.emoji { display: none; } .rt-layout-filter-container .rt-search-filter-wrap .rt-search-ico, .rt-el-layout-filter-container .rt-search-filter-wrap .rt-search-ico { position: relative; display: block; width: 15px; height: 15px; } .rt-layout-filter-container .rt-search-filter-wrap .rt-search-ico:before, .rt-el-layout-filter-container .rt-search-filter-wrap .rt-search-ico:before { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border: 1.7px solid currentColor; border-radius: 50%; } .rt-layout-filter-container .rt-search-filter-wrap .rt-search-ico:after, .rt-el-layout-filter-container .rt-search-filter-wrap .rt-search-ico:after { content: ""; position: absolute; top: 10.5px; left: 10.5px; width: 6px; height: 1.7px; background: currentColor; border-radius: 2px; transform: rotate(45deg); transform-origin: 0 50%; } /* the AJAX spinner shares the field with the icon */ .rt-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap .rt-loading, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap .rt-loading { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; } /* ---------- sort dropdown ---------- */ .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0; /* fixed height so the sort button lines up with the search field and the direction toggle — padding alone left it 6px shorter than both */ height: 46px; padding: 0 16px; background: #fff; border: 1px solid var(--rt-flt-line); border-radius: 12px; box-shadow: var(--rt-flt-shadow); font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: .4px; text-transform: uppercase; color: var(--rt-flt-ink); cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color .2s var(--rt-flt-ease), box-shadow .2s var(--rt-flt-ease); } .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap:hover, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap:hover { border-color: var(--rt-flt-primary); color: var(--rt-flt-ink); } .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap > .rt-filter-dropdown-default, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap > .rt-filter-dropdown-default { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; text-align: left; white-space: nowrap; } .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap .rt-arrow-angle, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap .rt-arrow-angle { color: var(--rt-flt-muted); font-size: 11px; letter-spacing: 0; backface-visibility: hidden; transition: transform .25s var(--rt-flt-ease); } .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap.active-dropdown .rt-arrow-angle, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap.active-dropdown .rt-arrow-angle { transform: rotate(180deg); } /* the menu */ .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap .rt-filter-dropdown, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap .rt-filter-dropdown { display: block; position: absolute; top: calc(100% + 8px); left: auto; right: 0; min-width: 100%; width: max-content; max-width: 260px; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--rt-flt-line); border-radius: 12px; box-shadow: var(--rt-flt-shadow-md); z-index: 10; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--rt-flt-ease), transform .2s var(--rt-flt-ease), visibility .2s; } .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap.active-dropdown .rt-filter-dropdown, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap.active-dropdown .rt-filter-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap .rt-filter-dropdown .rt-filter-dropdown-item, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap .rt-filter-dropdown .rt-filter-dropdown-item { display: block; padding: 10px 12px; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--rt-flt-ink-2); font-size: 13.5px; font-weight: 500; line-height: 1.35; letter-spacing: normal; text-transform: none; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; transition: background .15s var(--rt-flt-ease), color .15s var(--rt-flt-ease); } .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap .rt-filter-dropdown .rt-filter-dropdown-item:hover, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap .rt-filter-dropdown .rt-filter-dropdown-item:hover { background: var(--rt-flt-soft); color: var(--rt-flt-primary); } /* ---------- sort direction toggle ---------- The chevron is drawn from two rotated bars inside an absolutely centred span. That geometry lived in the legacy block this body replaced, so it is restated here in full — keeping only the colour rules left the button visibly empty. */ .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-sort-order-action, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-sort-order-action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-width: 46px; margin: 0; padding: 0; background: #fff; border: 1px solid var(--rt-flt-line); border-radius: 12px; box-shadow: var(--rt-flt-shadow); cursor: pointer; transition: border-color .2s var(--rt-flt-ease); } .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-sort-order-action:hover, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-sort-order-action:hover { border-color: var(--rt-flt-primary); } .rt-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow { position: static; } .rt-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span { display: block; position: absolute; width: 14px; height: 9px; top: 50%; left: 50%; margin-top: -4.5px; margin-left: -7px; backface-visibility: hidden; transition: transform .25s var(--rt-flt-ease); } .rt-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow[data-sort-order="ASC"] > span, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow[data-sort-order="ASC"] > span { transform: rotate(180deg); } .rt-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span:before, .rt-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span:after, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span:before, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span:after { content: ""; display: block; position: absolute; top: 0; width: 2px; height: 9px; border-radius: 2px; background-color: var(--rt-flt-muted); transition: background-color .2s var(--rt-flt-ease); } .rt-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span:before, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span:before { left: 3px; transform: rotate(-45deg); } .rt-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span:after, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action .rt-sort-order-action-arrow > span:after { left: 9px; transform: rotate(45deg); } .rt-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action:hover .rt-sort-order-action-arrow > span:before, .rt-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action:hover .rt-sort-order-action-arrow > span:after, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action:hover .rt-sort-order-action-arrow > span:before, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-sort-order-action:hover .rt-sort-order-action-arrow > span:after { background-color: var(--rt-flt-primary); } /* ---------- narrow screens ---------- */ @media (max-width: 767px) { .rt-layout-filter-container .rt-filter-wrap, .rt-el-layout-filter-container .rt-filter-wrap { justify-content: flex-start; flex-wrap: wrap; } .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-tax-filter, .rt-el-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-tax-filter { margin-right: 0; } .rt-layout-filter-container .rt-filter-wrap .filter-right, .rt-el-layout-filter-container .rt-filter-wrap .filter-right { width: 100%; } .rt-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap { flex: 1 1 180px; } .rt-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap input.rt-search-input, .rt-el-layout-filter-container .rt-filter-item-wrap.rt-search-filter-wrap input.rt-search-input { width: 100%; } } /* ========================================================================== Special Layout 01 - profile spotlight Feature panel (photo + gradient name plate + bio/contact/social) beside a grid of clickable thumbnails; the active thumbnail is ringed and ticked. ONE block serves BOTH render paths: the Elementor widget puts .rt-elementor-container and .rt-team-container on the same element, so `.rt-team-container .special01` matches the shortcode markup and the Elementor markup alike. An identical copy lives in tlp-team-pro/src/scss/frontend/layouts/_lo-special-1.scss because the Elementor path loads only the pro stylesheet. Keep the two in step. Thumbnail spacing mirrors the plugin's own gutter shape (horizontal padding on the cells + margin-bottom, negative margin on the row) at a specificity the Gutter control beats, so that control retunes the grid as it does elsewhere. ========================================================================== */ .rt-team-container .special01 { --rt-sp1-primary: #143ee5; /* derived, so Primary Color only has to set --rt-sp1-primary */ --rt-sp1-primary-dark: #0e2aa3; --rt-sp1-primary-dark: color-mix(in srgb, var(--rt-sp1-primary) 72%, #000); --rt-sp1-primary-soft: #eef1ff; --rt-sp1-body: #3a3f5c; --rt-sp1-line: #e7eaf3; --rt-sp1-radius: 14px; --rt-sp1-gap: 7px; --rt-sp1-ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ---------- stage: feature panel + thumbnail grid ---------- */ .rt-team-container .rt-row.special01 { margin-left: 0 !important; margin-right: 0 !important; } .rt-team-container .special01 .rt-sp1-stage { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; width: 100%; margin: 0; } .rt-team-container .special01 .rt-sp1-stage > .rt-sp1-aside, .rt-team-container .special01 .rt-sp1-stage > .rt-sp1-main { width: auto; max-width: none; min-width: 0; flex: none; float: none; padding: 0; margin: 0; } /* ---------- feature panel ---------- */ .rt-team-container .special01 #special-selected-wrapper { position: sticky; top: 32px; display: block; margin: 0 !important; } .rt-team-container .special01 .special-selected-top-wrap { display: flex; align-items: stretch; margin: 0; } .rt-team-container .special01 .special-selected-top-wrap:after { content: none; } .rt-team-container .special01 .special-selected-top-wrap > .img { position: relative; flex: 0 0 160px; width: 160px; max-width: 160px; /* stretch with the plate so the two always end level, however many lines the name / role / department run to */ align-self: stretch; height: auto; min-height: 160px; padding: 0; margin: 0; overflow: hidden; background: #dfe3ee; border-radius: var(--rt-sp1-radius) 0 0 var(--rt-sp1-radius); } /* the legacy translucent wash over the feature photo is gone */ .rt-team-container .special01 .special-selected-top-wrap > .img:after { content: none; } .rt-team-container .special01 .special-selected-top-wrap > .img img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0; } /* The box stretches with the plate, so a plain photo has to fill it rather than fall back to its own aspect ratio. Direct child only, so Pro's image-flip wrapper (which brings its own positioning) is left alone. */ .rt-team-container .special01 .special-selected-top-wrap > .img > img { position: absolute; top: 0; left: 0; } /* name plate - background is the Primary Color hook, so user colour wins */ .rt-team-container .special01 .special-selected-top-wrap > .ttp-label { position: relative; flex: 1 1 auto; width: auto; max-width: none; min-width: 0; height: auto; padding: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; color: #fff; background: #143ee5; background: linear-gradient(160deg, var(--rt-sp1-primary) 0%, var(--rt-sp1-primary-dark) 100%); border-radius: 0 var(--rt-sp1-radius) var(--rt-sp1-radius) 0; box-shadow: 0 16px 40px color-mix(in srgb, var(--rt-sp1-primary, #143ee5) 12%, transparent), 0 4px 12px rgba(20, 30, 75, 0.06); } /* folded notch pointing back at the photo; inherits whatever the plate uses */ .rt-team-container .special01 .special-selected-top-wrap > .ttp-label:before { content: ""; position: absolute; left: 0; bottom: 18px; width: 16px; height: 16px; background: inherit; filter: brightness(0.86); border-radius: 2px; transform: translateX(-50%) rotate(45deg); z-index: 1; } .rt-team-container .special01 .ttp-label .ttp-label-inner { position: relative; z-index: 2; padding: 22px 20px; box-sizing: border-box; } .rt-team-container .special01 .ttp-label-inner h3 { margin: 0 0 6px; } .rt-team-container .special01 .ttp-label-inner .tlp-position, .rt-team-container .special01 .ttp-label-inner .tlp-department { margin: 0; padding: 0; } /* ---------- feature body ---------- */ .rt-team-container .special01 #special-selected-wrapper > .rt-col-sm-12 { width: 100%; max-width: none; float: none; padding: 0; margin: 26px 0 0; } .rt-team-container .special01 .special-selected-short-bio { position: relative; padding: 0; margin: 0 0 20px; } /* the old white arrow that pointed at the plate is gone */ .rt-team-container .special01 .special-selected-short-bio:after { content: none; } .rt-team-container .special01 .special-selected-short-bio p { margin: 0 0 10px; } .rt-team-container .special01 .special-selected-short-bio p:last-child { margin-bottom: 0; } .rt-team-container .special01 .contact-info { padding: 0; margin: 0 0 18px; } .rt-team-container .special01 .contact-info ul { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; } .rt-team-container .special01 .contact-info ul li { display: flex; align-items: center; gap: 13px; list-style: none; padding: 0; margin: 0; border: 0; } .rt-team-container .special01 .contact-info ul li > a { display: flex; align-items: center; gap: 13px; min-width: 0; transition: color 0.2s var(--rt-sp1-ease); } /* icon chip - tint follows the icon colour, which the Primary Color control sets */ .rt-team-container .special01 .contact-info ul li > i, .rt-team-container .special01 .contact-info ul li > a > i { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin: 0; font-size: 13px; line-height: 1; background: var(--rt-sp1-primary-soft); background: color-mix(in srgb, currentColor 11%, #fff); border-radius: 9px; } .rt-team-container .special01 .contact-info ul li span { min-width: 0; word-break: break-word; } .rt-team-container .special01 .social-icons { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 18px; } .rt-team-container .special01 .social-icons a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1; border: 1px solid var(--rt-sp1-line); border-radius: 10px; transition: background 0.2s var(--rt-sp1-ease), color 0.2s var(--rt-sp1-ease), border-color 0.2s var(--rt-sp1-ease), transform 0.2s var(--rt-sp1-ease); } .rt-team-container .special01 .social-icons a:hover, .rt-team-container .special01 .social-icons a:focus { transform: translateY(-2px); } /* The shared social CSS paints the GLYPH with a brand-coloured 30x30 box on hover (facebook blue, x black, ...). This layout makes the itself the chip, so that box reads as a square sitting inside it. Keep the glyph a plain glyph and let the chip carry the colour. */ .rt-team-container .special01 .social-icons a i { width: auto; height: auto; line-height: 1; background-color: transparent; color: inherit; } /* The pro stylesheet forces those brand colours with !important, so matching it is the only way to stay off the glyph. Still one step below the Elementor Social hover controls, which are {{WRAPPER}}-prefixed - they keep winning. */ .rt-team-container .special01 .social-icons a:hover i, .rt-team-container .special01 .social-icons a:focus i { width: auto; height: auto; background-color: transparent !important; color: inherit !important; } .rt-team-container .special01 .rt-sp1-aside .readmore-btn { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; } .rt-team-container .special01 .rt-sp1-aside .readmore-btn a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.2; transition: background 0.2s var(--rt-sp1-ease), transform 0.2s var(--rt-sp1-ease); } .rt-team-container .special01 .rt-sp1-aside .readmore-btn a:hover { transform: translateY(-1px); } /* replayed every time a new member is loaded into the panel */ @keyframes rtSp1FadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .rt-team-container .special01 #special-selected-wrapper > .special-selected-top-wrap, .rt-team-container .special01 #special-selected-wrapper > .rt-col-sm-12 { animation: rtSp1FadeUp 0.45s var(--rt-sp1-ease); } /* ---------- thumbnail grid ---------- */ /* * `.rt-row` carries a bootstrap clearfix (`content:" "; display:table`) on its * ::before/::after. Both of this layout's rows are flex/grid containers, where * those pseudo-elements become real ITEMS - the leading one pushes the first * thumbnail into the second column and leaves an empty cell. */ .rt-team-container .special01 #special-selected-wrapper::before, .rt-team-container .special01 #special-selected-wrapper::after, .rt-team-container .special01 .special-items-wrapper::before, .rt-team-container .special01 .special-items-wrapper::after { content: none; display: none; } .rt-team-container .special01 .special-items-wrapper { display: flex; flex-wrap: wrap; width: auto; } .rt-team-container .special01 .special-items-wrapper > .rt-sp1-cell { float: none; min-width: 0; } .rt-team-container .special01 .rt-sp1-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; background: #dfe3ee; border: 3px solid transparent; border-radius: 12px; transition: transform 0.3s var(--rt-sp1-ease), box-shadow 0.3s var(--rt-sp1-ease), border-color 0.3s var(--rt-sp1-ease); } .rt-team-container .special01 .rt-sp1-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0; transition: transform 0.6s var(--rt-sp1-ease); } .rt-team-container .special01 .rt-sp1-thumb:hover { transform: translateY(-3px); box-shadow: 0 16px 40px color-mix(in srgb, var(--rt-sp1-primary, #143ee5) 16%, transparent), 0 4px 12px rgba(20, 30, 75, 0.08); } .rt-team-container .special01 .rt-sp1-thumb:hover img { transform: scale(1.07); } .rt-team-container .special01 .rt-sp1-thumb-label { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 26px 12px 10px; text-align: left; color: #fff; background: linear-gradient(to top, rgba(15, 21, 53, 0.82), rgba(15, 21, 53, 0)); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.3s var(--rt-sp1-ease), transform 0.3s var(--rt-sp1-ease); } .rt-team-container .special01 .rt-sp1-thumb:hover .rt-sp1-thumb-label { opacity: 1; transform: translateY(0); } .rt-team-container .special01 .rt-sp1-tn { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; margin-bottom: 5px; color: #fff; } .rt-team-container .special01 .rt-sp1-tr { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.3; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); } /* ---------- active thumbnail ---------- */ .rt-team-container .special01 .rt-sp1-cell.selected .rt-sp1-thumb { border-color: var(--rt-sp1-primary); box-shadow: 0 10px 26px color-mix(in srgb, var(--rt-sp1-primary, #143ee5) 32%, transparent); } .rt-team-container .special01 .rt-sp1-cell.selected .rt-sp1-thumb:after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 8px; right: 8px; z-index: 3; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: #fff; background: var(--rt-sp1-primary); border-radius: 50%; box-shadow: 0 4px 10px color-mix(in srgb, var(--rt-sp1-primary, #143ee5) 40%, transparent); } /* Pagination needs nothing here - the container-level pagination styling in this same stylesheet already uses the pill/44px/12px language of this design. */ /* ---------- responsive ---------- */ /* Narrow desktops: give the thumbnails room before anything has to stack. */ @media (max-width: 1199px) { .rt-team-container .special01 .rt-sp1-stage { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; } } /* * Tablet and below the stage stacks, and the order flips: the thumbnail grid * comes FIRST and the selected member's details sit underneath it, so the page * reads "pick a face, read about them". DOM order is unchanged - only the * visual order - and the thumbnails keep using the column classes, so the * tablet/mobile Columns settings still govern how many fit per row. */ @media (max-width: 991px) { .rt-team-container .special01 .rt-sp1-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; } .rt-team-container .special01 .rt-sp1-stage > .rt-sp1-main { order: 1; } .rt-team-container .special01 .rt-sp1-stage > .rt-sp1-aside { order: 2; } .rt-team-container .special01 #special-selected-wrapper { position: static; max-width: 620px; } .rt-team-container .special01 .special-selected-top-wrap { max-width: 460px; } } @media (max-width: 767px) { .rt-team-container .special01 .rt-sp1-stage { gap: 24px; } .rt-team-container .special01 #special-selected-wrapper > .rt-col-sm-12 { margin-top: 20px; } } @media (max-width: 575px) { .rt-team-container .special01 .special-selected-top-wrap > .img { flex-basis: 116px; width: 116px; max-width: 116px; min-height: 116px; } .rt-team-container .special01 .ttp-label .ttp-label-inner { padding: 14px 14px; } .rt-team-container .special01 .special-selected-top-wrap > .ttp-label:before { bottom: 14px; } .rt-team-container .special01 .contact-info ul { gap: 10px; } .rt-team-container .special01 .rt-sp1-aside .readmore-btn a { min-height: 38px; padding: 0 16px; } } .padding-0{ padding:0 ; } /********************** Common Css *************************/ .rt-team-container figure { margin: 0; } .rt-team-container .round-img img { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /* A circular portrait has to be clipped by a CIRCULAR box. The rule above only rounds the IMAGE; the figure around it still clips as a rectangle, so layout 1 / layout 3's hover zoom (`:hover img { transform: scale(1.06) }`) pushed the circle's four extreme points past the figure's straight edges and they came back flattened - the circle rendered with a flat top, bottom, left and right while its neighbours stayed round. Rounding the figure means the OUTLINE stays a perfect circle while the photo zooms inside it, which is what the zoom was for. Scoped to these two layouts because several others (5, 8, 9, 10, 12, isotope5/6, carousel10) already do their own `.round-img` clipping on a different element, and a blanket `.round-img figure` would fight those. */ .rt-team-container .layout1 .round-img figure, .rt-team-container .layout3 .round-img figure { border-radius: 50%; overflow: hidden; } .rt-team-container .margin-bottom { margin-bottom: 30px; } .rt-team-container h3 { margin-bottom: 5px !important; padding: 0px !important; line-height: 1.3; font-weight: 400; } .rt-team-container h3 a { text-decoration: none !important; } .rt-team-container .tlp-position { font-weight: 400; line-height: 1.3; margin-bottom: 5px; transition: all 0.3s; -webkit-transition: all 0.3s; } .rt-team-container .layout1 .tlp-position a { color: white; } .rt-team-container .tlp-position a:hover, .rt-team-container h3 a:hover, .rt-team-container .short-bio a:hover { text-decoration: none !important; } .rt-team-container .rt-paddingl0{ padding-left: 0px; } .rt-team-container .rt-paddingr0 { padding-right: 0; } /* `.masonry-grid-item` gets the same 30px default as `.even-grid-item`. It was missing, so choosing Grid Style = Masonry dropped the vertical gap to zero and the cards butted together — most visible on isotope layouts, whose items are always one of these two classes. Pro's Elementor stylesheet already pairs the two (_cp-gutter.scss), so this brings the shortcode path in line. The Gutter control still overrides both: its arm is (0,4,0) in the later-loaded team-sc.css. */ .rt-team-container .even-grid-item, .rt-team-container .masonry-grid-item { margin-bottom: 30px; } .rt-team-container .no-margin { margin: 0 !important; padding: 0 !important; } /* "No Margin" is applied to the grid ITEM, but layouts 17 and 18 also carry a bottom margin on the CARD inside it -- `.no-margin` never reaches a different element, so a 30px band survived between rows even though the setting says there should be none. Cancel it here rather than in each layout: (0,4,0) beats their own (0,3,0) card rules from anywhere in the file, including the media-query twins that drop the margin to 20px. Every layout redesigned since keeps `margin: 0` on the card and lets the grid item own the spacing -- 16/17/18 predate that convention, which is also why their default vertical gap is 30px (item) + 30px (card) against a 30px horizontal gutter. Carousel slides are excluded: they pick up `.no-margin` as well, and carousel10's card relies on `margin: 30px auto` to centre itself. The Margin option is shortcode-only -- the Elementor widgets never emit this class. */ .rt-team-container .rt-grid-item.no-margin:not(.swiper-slide) .single-team-area { margin: 0; } .rt-team-container a { text-decoration: none; box-shadow: none; border: none; } .rt-team-container-item-count { display: none; } .rt-team-container .tlp-detail h3 { font-size: 35px; line-height: 1.2; } .rt-team-container .tlp-detail h3.member-name, .rt-team-container .tlp-detail .team-images { margin: 15px 0 5px; } .rt-team-container .tlp-detail .experience { padding-left: 3px; } /* progress bar */ .rt-team-container .rt-team-container-skill { margin-bottom: 15px; } .rt-team-container .skill-prog { height: 4px; margin-bottom: 10px; background: #fff; border: 1px solid #edeaea; border-radius: 4px; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } .rt-team-container .skill-prog .fill { height: 100%; -webkit-animation: 400ms; background-color: #00afd1; border-radius: 4px; position: relative; } .rt-team-container .skill-prog .fill .rt-percent { position: absolute; top: -26px; right: 0; font-weight: 600; } .tooltip + .tooltip > .tooltip-inner { background-color: #00afd1; font-size: 80%; } .tooltip.top .tooltip-arrow { border-top-color: #00afd1; } .rt-team-container-skrill { font-size: 90%; padding: 0px 0px 15px 0px; } .rt-team-container .equal-height { margin-bottom: 30px; } .tlp-equal-height .rt-paddingl0{ padding-left: 0px; } .tlp-equal-height .rt-paddingr0 { padding-right: 0px; } /*********** Tooltip ***************/ .tooltip { position: absolute; z-index: 1070; display: block; font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.42857143; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal; filter: alpha(opacity=0); opacity: 0; line-break: auto; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; background-color: #000; border-radius: 4px; } .tooltip.top { padding: 5px 0; margin-top: -3px; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } #rt-smart-modal-container .tooltip.in, #tlp-modal .tooltip.in, .tlp-popup-wrap .tooltip.in, .tlp-single-detail .tooltip.in , .tooltip.in { filter: alpha(opacity=90); opacity: .9; } .single-team-content-area{ margin-top: 50px; } /*********** Social Icon ***************/ .rt-team-container .social-icons { margin: 10px 0px 0px; padding: 0px; display: block; } .rt-team-container .layout10 .social-icons, .rt-team-container .isotope7 .social-icons { margin-top: 3px; } /* Layout 5's link colour moved to the low-specificity block at the end of this file — at (0,3,1) it here outranked the Email/Phone/Social Styling controls. */ .rt-team-container .layout13 .social-icons, .rt-team-container .isotope8 .social-icons { margin: 0px 0px; } .rt-team-container .layout13 .social-icons { margin-bottom: -3px; } .rt-team-container .social-icons a:before { content: none; } .rt-team-container .social-icons a { text-align: center; color: #fff; text-decoration: none; display: inline-block; margin-right: 4px; margin-bottom: 3px; font-size: 20px; padding: 0px; text-decoration: none !important; width: 30px; transition: all 0.3s; height: 30px; } .rt-team-container .layout1 .social-icons a{ color: #1e73be; } .rt-team-container .social-icons a i { /*padding: 7px 0px 0px;*/ line-height: 30px; transition: all 0.3s; display: block; } .rt-team-container .social-icons a .fa-Bandcamp { background: url("https://s1.bcbits.com/img/buttons/bandcamp_22x22_blue.png"); width: 22px; height: 22px; margin-top: 12px; } .rt-team-container .social-icons a:hover .fa-facebook-f, .rt-team-container .social-icons a:focus .fa-facebook-f { background: #3b5999; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-x-twitter, .rt-team-container .social-icons a:focus .fa-x-twitter { background: #222; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-pinterest-p, .rt-team-container .social-icons a:focus .fa-pinterest-p { background: #E60023; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-bandcamp, .rt-team-container .social-icons a:focus .fa-bandcamp { background: #3A95A5; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-globe, .rt-team-container .social-icons a:focus .fa-globe { background: #0e90b8; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-github, .rt-team-container .social-icons a:focus .fa-github { background: #1A1E22; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-linkedin, .rt-team-container .social-icons a:focus .fa-linkedin { background: #0080b1; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a .fa-bluesky{ width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-bluesky{ background: #0085FF; color: #fff; } .rt-team-container .social-icons a:hover .fa-xing, .rt-team-container .social-icons a:focus .fa-xing { background: #1C5D5B; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-skype, .rt-team-container .social-icons a:focus .fa-skype { background: #06bcff; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-whatsapp, .rt-team-container .social-icons a:focus .fa-whatsapp { background: #25D366; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-telegram, .rt-team-container .social-icons a:focus .fa-telegram { background: #29b6f6; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .far.fa-envelope , .rt-team-container .social-icons a:hover .fa-google-plus { background: #d04333; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-youtube { background: #cd322d; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-soundcloud { background: #ff5500; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-vimeo { background: #44bbff; color: #fff; width: 30px; height: 30px; } .rt-team-container .social-icons a:hover .fa-instagram { background: #3e729a; color: #fff; width: 30px; height: 30px; } .rt-team-container .round-img .social-icons a { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rt-team-container .round-img .social-icons a:hover .fa-facebook-f { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rt-team-container .round-img .social-icons a:hover .fa-twitter { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rt-team-container .round-img .social-icons a:hover .fa-linkedin { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rt-team-container .round-img .social-icons a:hover .fa-google-plus { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rt-team-container .round-img .social-icons a:hover .fa-youtube { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rt-team-container .round-img .social-icons a:hover .fa-soundcloud { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rt-team-container .round-img .social-icons a:hover .fa-vimeo { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rt-team-container .round-img .social-icons a:hover .fa-instagram { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rt-team-container .tlp-detail .social-icons a { background-color: #00afd1; } /***************** Contact info *******************/ .rt-team-container .contact-info { margin: 0px; padding: 0px 0px 10px 0px; } .rt-team-container .contact-info ul { margin: 0px; padding: 0px; list-style: none; } .rt-team-container .contact-info ul li { margin: 0px; padding: 0px; line-height: 22px; list-style: none !important; border: none; background: no-repeat; } .rt-team-container .contact-info ul li a { color: inherit; } .md-modal .rt-team-container .contact-info ul li, .md-modal .rt-team-container .contact-info ul li a { color: #fff; } .rt-team-container .contact-info ul li + li { margin-top: 10px; } .rt-team-container .contact-info i { width: 20px; margin-right: 4px; text-align: center; } .tlp-single-container .rt-extra-curriculum { margin-bottom: 15px } /******************** Layout 1 ***********************/ .rt-team-container .layout1 { position: relative; } .rt-team-container .short-bio p { -webkit-transition: all 0.3s; transition: all 0.3s; } .rt-team-container .layout1 .tlp-content-layout1, .rt-team-container .tlp-content { background: #007acc; color: #ffffff; padding: 10px; } .rt-team-container .layout1 .tlp-content-layout1, .rt-team-container .short-bio p { margin-bottom: 5px; margin-top: 5px; } .rt-team-container .layout1 .single-team-area h3 { padding: 0; margin: 0 0 10px 0; font-size: 22px; } .rt-team-container .layout1 .single-team-area h3, .rt-team-container .layout1 .single-team-area h3 a, .rt-team-container .layout1 .tlp-position { color: #fff; } .rt-team-container .layout1 .single-team-area img { max-width: 100%; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-transform: scale(1.01); transform: scale(1.01); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .rt-team-container .layout1 .single-team-area:hover img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .rt-team-container .layout1 .single-team { position: relative; overflow: hidden; } .rt-team-container .layout1 .overlay { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; color: #fff; background-color: rgba(217, 35, 45, 0.85); -webkit-transition: all 0.5s ease-out 0.15s; -moz-transition: all 0.5s ease-out 0.15s; -ms-transition: all 0.5s ease-out 0.15s; -o-transition: all 0.5s ease-out 0.15s; transition: all 0.5s ease-out 0.15s; } .rt-team-container .layout1 .single-team-area .overlay, .rt-team-container .layout1 .single-team-area .overlay-element h3, .rt-team-container .layout1 .single-team-area .detile-popup { opacity: 0; } .rt-team-container .layout1 .single-team-area:hover .overlay, .rt-team-container .layout1 .single-team-area:hover .overlay-element h3, .rt-team-container .layout1 .single-team-area:hover .detile-popup, .rt-team-container .single-team-area:hover .overlay { opacity: 1; -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .rt-team-container .layout1 .short-bio p { padding: 2px 0px 0px; margin-bottom: 10px; } .rt-team-container .layout1 .overlay .social-icons { text-align: center; padding: 20% 0; } .rt-team-container .layout1 .single-team:hover .overlay { top: 0; } .rt-team-container .layout1 .single-team-area:hover > .single-team:before { display: none; } .rt-team-container .layout1 .overlay-element { text-align: center; color: #ffffff; } .rt-team-container .layout1 .overlay-element .detail-link i.fa { color: #ffffff; font-size: 20px; margin-top: 45%; z-index: 9999; padding: 4px 6px; } .rt-team-container .layout1 .overlay-element .detail-link:hover i.fa { background: #fff; color: #ed344a; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /************************ Start Layout 2 ******************/ /* List Layout 2 is fully restyled in the "LIST LAYOUT 2 — horizontal card redesign" block near the END of this file (search "LIST LAYOUT 2"). */ /************************ End Layout 2 ********************/ /* Layout 3 is fully restyled as an ~80%-Layout-1 card — see the "GRID LAYOUT 3 — card redesign" block near the end of this file. */ /************************ Start Layout 4 ******************/ /* ========================================================================== GRID LAYOUT 4 — dark-scrim reveal (Layout 3 sibling) -------------------------------------------------------------------------- Same interaction model as Layout 3 (templates/layouts/layout4.php mirrors layout3.php): a persistent name/role CAPTION over the photo at rest, giving way on hover to a full overlay carrying every enabled field. Where Layout 3 floods the card in the brand colour, Layout 4 is a DARK GLASS card — the photo dims under a near-opaque ink veil and the brand colour appears only as an ACCENT (role text, divider, primary button, social/contact hovers). Layout 4 owns the `.rt-l4-tag` / `.rt-l4-reveal` hooks, so nothing here touches Layout 3. The two hard rules from Layout 3 hold: (1) the card's box never changes between rest and hover — every hover change is opacity / transform / colour ONLY, so no jitter and no reflow; (2) the reveal wrapper is in-flow and defines the card height, with `figure` filling 100% behind it. Scope `[data-layout="layout4"]` (container) + `.layout4` (row) are exact — no leak. Colour = `--l4-primary` (shortcode Styling Primary Color via --l1-primary; Elementor control feeds the same var). Applies to BOTH paths since both render this template and carry `.rt-team-container .layout4`. ========================================================================== */ .rt-team-container[data-layout="layout4"] { --l4-primary: #143ee5; --l4-primary: var(--l1-primary, #143ee5); --l4-primary-700: color-mix(in srgb, var(--l4-primary) 66%, #000); --l4-accent: color-mix(in srgb, var(--l4-primary) 60%, #fff); --l4-scrim: #0b0f24; --l4-ink: #0f1535; --l4-radius: 16px; --l4-shadow-sm: 0 1px 2px rgba(20, 30, 75, .05), 0 8px 20px rgba(20, 30, 75, .06); --l4-shadow-lg: 0 26px 60px color-mix(in srgb, var(--l4-primary, #143ee5) 28%, transparent), 0 6px 16px rgba(20, 30, 75, .10); --l4-ease: cubic-bezier(.2, .7, .2, 1); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---------- Grid gutter (yields to a per-shortcode gutter from sc-css) ---------- */ .rt-team-container .rt-row.layout4 { margin-left: -14px; margin-right: -14px; } .rt-team-container .rt-row.layout4 > [class*="rt-col-"] { padding-left: 14px; padding-right: 14px; margin-bottom: 28px; } /* ---------- Card (auto height; box is identical at rest and on hover) ---------- */ .rt-team-container .layout4 .single-team-area { position: relative; width: 100%; overflow: hidden; border-radius: var(--l4-radius); background: #dfe3ee; box-shadow: var(--l4-shadow-sm); text-align: left; isolation: isolate; -webkit-transition: -webkit-transform .35s var(--l4-ease), box-shadow .35s var(--l4-ease); transition: transform .35s var(--l4-ease), box-shadow .35s var(--l4-ease); } .rt-team-container .layout4 .single-team-area:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--l4-shadow-lg); } /* ---------- Media: fills 100% of the card ---------- */ .rt-team-container .layout4 figure { position: absolute; inset: 0; margin: 0; display: block; z-index: 0; line-height: 0; background: #dfe3ee; } .rt-team-container .layout4 figure a { display: block; width: 100%; height: 100%; } .rt-team-container .layout4 .single-team-area img, .rt-team-container .layout4 .round-img img { width: 100%; height: 100%; max-width: 100%; display: block; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform .8s var(--l4-ease), filter .45s var(--l4-ease); transition: transform .8s var(--l4-ease), filter .45s var(--l4-ease); } /* border-radius default at near-zero specificity so the Elementor Image control wins. */ :where(.rt-team-container .layout4 .single-team-area) img { border-radius: 0; } .rt-team-container .layout4 .single-team-area:hover img { -webkit-transform: scale(1.08); transform: scale(1.08); -webkit-filter: blur(2px); filter: blur(2px); } /* ---------- Brand-colour flood (fades in on hover) — reference `.team-overlay` --- */ .rt-team-container .layout4 .single-team-area::before { content: ""; position: absolute; inset: 0; z-index: 1; background: -webkit-gradient(linear, left top, right bottom, from(var(--l4-primary)), to(var(--l4-primary-700))); background: linear-gradient(160deg, var(--l4-primary) 0%, var(--l4-primary-700) 100%); opacity: 0; -webkit-transition: opacity .4s var(--l4-ease); transition: opacity .4s var(--l4-ease); pointer-events: none; } .rt-team-container .layout4 .single-team-area:hover::before { opacity: 1; } /* ---------- Persistent caption pill (name + role) — shown at REST ---------- Floating white pill, bottom-left — matches the "Team — Grid Layout 3" reference `.team-tag` (same as free layout3's `.rt-l3-tag`). */ .rt-team-container .layout4 .rt-l4-tag { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2px; max-width: calc(100% - 28px); padding: 10px 14px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 12px; box-shadow: 0 8px 18px rgba(15, 21, 53, .18); -webkit-transition: opacity .25s var(--l4-ease), -webkit-transform .35s var(--l4-ease); transition: opacity .25s var(--l4-ease), transform .35s var(--l4-ease); } .rt-team-container .layout4 .single-team-area:hover .rt-l4-tag { opacity: 0; pointer-events: none; -webkit-transform: translateY(8px); transform: translateY(8px); } .rt-team-container .layout4 .rt-l4-tag-name { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.1px; color: var(--l4-ink); } .rt-team-container .layout4 .rt-l4-tag-role { font-size: 12.5px; font-weight: 500; letter-spacing: .2px; color: var(--l4-primary); } /* ---------- Reveal layer — in-flow, defines card height, holds every field --- */ .rt-team-container .layout4 .rt-l4-reveal { position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 24px 22px; } /* Not interactive until revealed, so hidden links can't be clicked. */ .rt-team-container .layout4 .single-team-area:not(:hover) .rt-l4-reveal { pointer-events: none; } /* Every direct child fades + slides in on hover — opacity/transform ONLY, so the card's height never changes. Sizing/spacing below is set once (rest = hover). */ .rt-team-container .layout4 .rt-l4-reveal > * { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-transition: opacity .4s var(--l4-ease), -webkit-transform .4s var(--l4-ease); transition: opacity .4s var(--l4-ease), transform .4s var(--l4-ease); } .rt-team-container .layout4 .single-team-area:hover .rt-l4-reveal > * { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* Stagger (~40ms steps), reference `.ov-*` delays. */ .rt-team-container .layout4 .single-team-area:hover .tlp-content { -webkit-transition-delay: .06s; transition-delay: .06s; } .rt-team-container .layout4 .single-team-area:hover .short-bio { -webkit-transition-delay: .12s; transition-delay: .12s; } .rt-team-container .layout4 .single-team-area:hover .contact-info { -webkit-transition-delay: .16s; transition-delay: .16s; } .rt-team-container .layout4 .single-team-area:hover .tlp-team-skill { -webkit-transition-delay: .20s; transition-delay: .20s; } .rt-team-container .layout4 .single-team-area:hover .social-icons { -webkit-transition-delay: .24s; transition-delay: .24s; } .rt-team-container .layout4 .single-team-area:hover .readmore-btn:not(.hirme-resume) { -webkit-transition-delay: .28s; transition-delay: .28s; } .rt-team-container .layout4 .single-team-area:hover .readmore-btn.hirme-resume { -webkit-transition-delay: .32s; transition-delay: .32s; } /* ---------- Overlay text: white DEFAULTS at LOW specificity ---------- Colour + alignment live on the WRAPPER and inherit down (0 specificity on the fields), so BOTH the shortcode Styling tab AND the Elementor Style controls override them per-field, while unset fields stay readable white. */ .rt-team-container .layout4 .rt-l4-reveal { color: #fff; text-align: left; } .rt-team-container .layout4 .rt-l4-reveal a { color: inherit; text-decoration: none; } /* ---------- Reveal header (name / role / department) — SIZE via :where(); colour direct ---------- */ /* `background: none` kills the generic `.rt-team-container .tlp-content{background:#007acc}` (0,2,0, tlpteam.css:2102) that would otherwise paint a blue block behind the name; Layout 3 does the same via its legacy `.layout3 .tlp-content` reset. */ .rt-team-container .layout4 .rt-l4-reveal .tlp-content { margin: 0; padding: 0; background: none; } .rt-team-container .layout4 .tlp-content h3, .rt-team-container .layout4 .tlp-content h3 a { color: #fff; text-decoration: none; } :where(.rt-team-container .layout4) .tlp-content h3 { margin: 0; padding: 0; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.2px; } .rt-team-container .layout4 .tlp-position, .rt-team-container .layout4 .tlp-position a { color: rgba(255, 255, 255, .85); text-decoration: none; } :where(.rt-team-container .layout4) .tlp-position { margin: 3px 0 0; font-size: 13px; font-weight: 500; line-height: 1.3; } .rt-team-container .layout4 .tlp-department { margin: 3px 0 0; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .7); } /* Divider (reference `.ov-divider`) — white on the flood; only scaleX/opacity move. */ .rt-team-container .layout4 .rt-l4-reveal .tlp-content::after { content: ""; display: block; width: 34px; height: 2px; margin: 12px 0 0; background: rgba(255, 255, 255, .45); border-radius: 2px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform .5s var(--l4-ease) .16s; transition: transform .5s var(--l4-ease) .16s; } .rt-team-container .layout4 .single-team-area:hover .rt-l4-reveal .tlp-content::after { -webkit-transform: scaleX(1); transform: scaleX(1); } /* ---------- Bio ---------- */ .rt-team-container .layout4 .rt-l4-reveal .short-bio { margin: 12px 0 0; padding: 0; } :where(.rt-team-container .layout4) .short-bio { font-size: 13.5px; line-height: 1.55; } .rt-team-container .layout4 .short-bio p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Contact list ---------- */ .rt-team-container .layout4 .rt-l4-reveal .contact-info { margin: 14px 0 0; padding: 0; } .rt-team-container .layout4 .rt-l4-reveal .contact-info ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; } .rt-team-container .layout4 .rt-l4-reveal .contact-info li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 9px; margin: 0; padding: 0; list-style: none; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* font-size at near-zero specificity (:where) so the shortcode "Email" style control (`.tlp-email{font-size}`, 0,2,0) can override the email row's size. */ :where(.rt-team-container .layout4) .contact-info li { font-size: 13px; } .rt-team-container .layout4 .rt-l4-reveal .contact-info li i { width: 26px; height: 26px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 7px; font-size: 11px; -ms-flex-negative: 0; color: inherit; flex-shrink: 0; background: rgba(255, 255, 255, .12); } /* ---------- Skills (Pro) ---------- */ .rt-team-container .layout4 .rt-l4-reveal .tlp-team-skill { margin: 14px 0 0; padding: 0; } .rt-team-container .layout4 .tlp-team-skill .skill-prog { background: rgba(255, 255, 255, .18); } /* ---------- Social chips ---------- */ .rt-team-container .layout4 .rt-l4-reveal .social-icons { margin: 16px 0 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .rt-team-container .layout4 .social-icons a { width: 34px; height: 34px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; font-size: 13px; line-height: 1; text-decoration: none; -webkit-transition: background .2s var(--l4-ease), color .2s var(--l4-ease), -webkit-transform .2s var(--l4-ease); transition: background .2s var(--l4-ease), color .2s var(--l4-ease), transform .2s var(--l4-ease); } /* Pro's Elementor social controls target the glyph ; Layout 4's chip is the . Strip the glyph's own box so it can't paint a square inside the chip (mirrors Layout 3). Icon colour + font-size stay on the . */ .rt-team-container[data-layout="layout4"] .single-team-area .rt-l4-reveal .social-icons a i { width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; } /* Social colour inherits from the wrapper; bg default is :where() (near-zero specificity) so the Elementor Social colour + background controls win. */ :where(.rt-team-container .layout4) .social-icons a { background: rgba(255, 255, 255, .14); } :where(.rt-team-container .layout4) .social-icons a:hover { background: #fff; color: var(--l4-primary); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .rt-team-container .layout4 .social-icons a:hover i, .rt-team-container .layout4 .social-icons a:focus i { background: transparent !important; background-color: transparent !important; color: inherit; width: auto; height: auto; } /* ---------- Buttons (Read More primary + Resume/Hire secondary) ---------- */ .rt-team-container .layout4 .rt-l4-reveal .readmore-btn { margin: 14px 0 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .rt-team-container .layout4 .rt-l4-reveal .readmore-btn.hirme-resume { margin-top: 10px; } .rt-team-container[data-layout="layout4"] .rt-l4-reveal .readmore-btn a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; text-decoration: none; border-style: solid; } /* Padding / border-width / radius / typography at near-zero specificity so the Elementor button controls (0,3,0) AND the shortcode button styles (0,4,0) override them. Reference `.ov-btn`. */ :where(.rt-team-container .layout4) .readmore-btn a { padding: 11px 18px; border-width: 0; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.2; } /* Primary = white fill with brand text on the brand flood (reference `.ov-btn`). */ .rt-team-container .layout4 .readmore-btn .rt-ream-me-btn { background: #fff; color: var(--l4-primary); -webkit-transition: background .2s var(--l4-ease), color .2s var(--l4-ease), box-shadow .2s var(--l4-ease); transition: background .2s var(--l4-ease), color .2s var(--l4-ease), box-shadow .2s var(--l4-ease); } .rt-team-container .layout4 .rt-l4-reveal .readmore-btn .rt-ream-me-btn::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; -webkit-transition: -webkit-transform .25s var(--l4-ease); transition: transform .25s var(--l4-ease); } .rt-team-container .layout4 .readmore-btn .rt-ream-me-btn:hover { background: var(--l4-ink); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); } .rt-team-container .layout4 .rt-l4-reveal .readmore-btn .rt-ream-me-btn:hover::after { -webkit-transform: translateX(4px); transform: translateX(4px); } .rt-team-container .layout4 .readmore-btn .rt-resume-btn, .rt-team-container .layout4 .readmore-btn .rt-hire-btn { background: rgba(255, 255, 255, .14); color: #fff; -webkit-transition: background .2s var(--l4-ease), color .2s var(--l4-ease); transition: background .2s var(--l4-ease), color .2s var(--l4-ease); } .rt-team-container .layout4 .readmore-btn .rt-resume-btn:hover, .rt-team-container .layout4 .readmore-btn .rt-hire-btn:hover { background: #fff; color: var(--l4-primary); } /* ---------- Reduced motion: reveal instantly, no transforms ---------- */ @media (prefers-reduced-motion: reduce) { .rt-team-container .layout4 .single-team-area, .rt-team-container .layout4 .single-team-area img, .rt-team-container .layout4 .single-team-area::before, .rt-team-container .layout4 .rt-l4-tag, .rt-team-container .layout4 .rt-l4-reveal > *, .rt-team-container .layout4 .rt-l4-reveal .tlp-content::after { -webkit-transition-duration: .01ms; transition-duration: .01ms; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: none; transform: none; } .rt-team-container .layout4 .single-team-area:hover img { -webkit-transform: none; transform: none; } } /* Pagination for Layout 4 (and every layout) is handled by the GLOBAL PAGINATION block above — no per-layout copy needed. */ /* ---------- Grid Style = "Even": equal card heights ---------- `[data-layout*="layout"] .rt-row.ttp-even` already makes the ROW a flex container, so the columns stretch to the tallest. The card did not follow -- measured 276 / 338 / 317 in a 338px row -- and because this card IS the photo, the ragged bottoms are very visible. `figure` is absolutely positioned here, so the card's height comes from `.rt-l4-reveal`, the in-flow hover panel. Stretching the card alone therefore leaves the panel short and the hover overlay stops 62px above the card's bottom edge -- hence the third rule, which grows the panel to fill. The photo needs nothing: it is already `height:100%` + `object-fit:cover`, so it fills the taller card without distorting. JS is not an option: HeightResize() -> equalHeight4Layout4() in tlpteam.js is unreachable, because HeightResize() returns early for every `[data-layout*='layout']` container -- which includes layout4 itself. Scoped to `.ttp-even` so Masonry, where the card is meant to keep its natural height, is untouched. Row spacing is unchanged: a stretched flex item's height is the line height minus its own margins. */ .rt-team-container .rt-row.layout4.ttp-even > [class*="rt-col-"] { display: -webkit-box; display: -ms-flexbox; display: flex; } .rt-team-container .rt-row.layout4.ttp-even .single-team-area { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .rt-team-container .rt-row.layout4.ttp-even .single-team-area > .rt-l4-reveal { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } /* Same fix for the Elementor twin. `layout-el-4` is a SEPARATE key and template whose card styles live in tlp-team-pro (_lo-* / tlp-el-team-pro.css), so the pro sheet would be the natural home -- but this is grid behaviour rather than card design, the rule that stretches the columns in the first place is the `[data-layout*="layout"] .rt-row.ttp-even` rule in THIS file, and tlpteam.css loads on Elementor pages too (`.rt-team-container` sits on the same element as `.rt-elementor-container`). Keeping both paths side by side here means they cannot drift apart. The only difference from `.layout4` above is the in-flow child that has to grow: this template wraps everything in `.single-team` instead of `.rt-l4-reveal`. Measured before the fix: a 312px row holding 312 / 291 / 291 / 312 / 291 / 312 / 265 cards. */ .rt-team-container .rt-row.layout-el-4.ttp-even > [class*="rt-col-"] { display: -webkit-box; display: -ms-flexbox; display: flex; } .rt-team-container .rt-row.layout-el-4.ttp-even .single-team-area { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* One level deeper than layout4: this template nests `figure` (absolute), the name pill (absolute) and `.overlay` (in flow) inside `.single-team`, so BOTH wrappers have to pass the height down. Stopping at `.single-team` leaves `.overlay` at its content height and the blue hover panel ends partway down the card with the photo showing below it. */ .rt-team-container .rt-row.layout-el-4.ttp-even .single-team-area > .single-team { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .rt-team-container .rt-row.layout-el-4.ttp-even .single-team-area > .single-team > .overlay { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } /************************ End Layout 4 ********************/ /************************ Start Layout 5 ******************/ /* Layout 5 — "Team Table Layout": the one table layout, a card-wrapped member directory. Photo + name + role + contact columns + social chips, one per enabled field, under a header row built by Fns::layout5TableHead(). THE CARD IS `.rt-content-loader.layout5` ITSELF, not an inner wrapper. The shortcode path puts `table-responsive` on the (bootstrap wants it on a parent) and has no wrapper div, and the AJAX load-more handler appends whole further
s straight into the row — so the row element is the only thing every table ends up inside. It carries the border, radius and h-scroll. Paintable defaults (colour / size / weight) live in the low-specificity block at the very END of this file so every Styling control still overrides them. Accent comes from --l5-primary, which the Primary Color control sets. The card rule is fenced off from the Elementor path. This stylesheet loads on Elementor pages too, and `.rt-team-container` + `.rt-elementor-container` sit on the SAME element there — so without the guard the row AND pro's `.table-responsive` would each draw a card, one nested in the other. `:where()` keeps the guard free, so specificity stays (0,4,0) and still beats the `.rt-row.ttp-even` flex rule above by source order. */ .rt-team-container:where(:not(.rt-elementor-container)) .rt-row.rt-content-loader.layout5 { display: block; /* undo the .ttp-even flex row — one table child */ margin-left: 0; margin-right: 0; background-color: #fff; border: 1px solid #e7eaf3; border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); overflow-x: auto; overflow-y: hidden; } .rt-team-container .layout5 .table { width: 100%; max-width: none; margin: 0; background: none; border: 0; border-collapse: collapse; border-spacing: 0; overflow: visible; /* neutralise the misplaced .table-responsive */ } /* Header row. Nothing but this layout styles
, so no control to lose to. */ .rt-team-container .layout5 .table > thead > tr > th { padding: 16px 20px; background-color: #fff; border: 0; border-bottom: 1px solid #e7eaf3; font-size: 11.5px; font-weight: 600; line-height: 1.4; letter-spacing: .6px; text-transform: uppercase; text-align: left; white-space: nowrap; vertical-align: middle; } .rt-team-container .layout5 .table > thead > tr > th.rt-l5-th-avatar { width: 1%; padding-right: 0; } /* Body rows. Cells stay on one line and the card scrolls instead of wrapping, which is what keeps every row the same height. */ .rt-team-container .layout5 .table > tbody > tr > td { padding: 14px 20px; border: 0; border-bottom: 1px solid #e7eaf3; vertical-align: middle; white-space: nowrap; } .rt-team-container .layout5 .table > tbody > tr:last-child > td { border-bottom: 0; } /* Striped rows shade the even ones, per the design. The Elementor "Display Striped Rows" switch and the shortcode generator both add .table-striped. Hover must come after this to win the specificity tie. */ .rt-team-container .layout5 .table-striped > tbody > tr:nth-of-type(even) { background-color: #f7f9fd; } .rt-team-container .layout5 .table > tbody > tr { transition: background-color .18s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout5 .table > tbody > tr:hover { background-color: #eef1ff; } /* Photo cell — square, and sized by width alone so the Elementor "Image Column Width" control (which sets `width` on the figure) keeps it square. */ .rt-team-container .layout5 .table .rt-l5-avatar { width: 1%; padding-right: 0; } .rt-team-container .layout5 .table figure { width: 60px; margin: 0; padding: 0; aspect-ratio: 1; overflow: hidden; background-color: #dfe3ee; border: 1px solid #e7eaf3; border-radius: 6px; } .rt-team-container .layout5 .table.round-img figure { border-radius: 50%; } .rt-team-container .layout5 .table figure > a, .rt-team-container .layout5 .table figure img { display: block; width: 100%; height: 100%; } .rt-team-container .layout5 .table figure img { object-fit: cover; } /* Name sits tight against the photo, the way the design groups them. */ .rt-team-container .layout5 .table .rt-l5-name { padding-left: 14px; } .rt-team-container .layout5 .table h3 { margin: 0; padding: 0; line-height: 1.25; } .rt-team-container .layout5 .table .tlp-position { line-height: 1.4; } /* Themes underline in-content links; the design has none. No Styling control touches text-decoration, so this can sit at full specificity. */ .rt-team-container .layout5 .table h3 a, .rt-team-container .layout5 .table .tlp-position a, .rt-team-container .layout5 .table .rt-l5-contact a { text-decoration: none; } /* Contact cell — icon chip + text. The stays an immediate sibling of the , which is what the Elementor contact controls select on. */ .rt-team-container .layout5 .table .rt-l5-contact { display: -webkit-box; display: -ms-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 9px; } .rt-team-container .layout5 .table .rt-l5-contact i { -ms-flex: 0 0 28px; flex: 0 0 28px; width: 28px; height: 28px; display: -webkit-box; display: -ms-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; border-radius: 8px; } .rt-team-container .layout5 .table .rt-l5-contact a { display: inline-block; text-decoration: none; transition: color .2s cubic-bezier(.2, .7, .2, 1); } /* Social chips. Sized here because the legacy global `.rt-team-container .social-icons a` (0,2,1) pins them to 30x30. */ .rt-team-container .layout5 .table .social-icons { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; margin: 0; padding: 0; } .rt-team-container .layout5 .table .social-icons a { width: 32px; height: 32px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 8px; /* Clips the glyph to the chip, so a large Social Icon Size never spills out of the rounded shape — cheaper than an !important fight with the control. */ overflow: hidden; transition: background-color .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } /* Centre the glyph inside its OWN box, rather than relying on the box being natural-sized. The shared social CSS gives the glyph a 30x30 box in places (and on the Elementor path the Social Icon Width/Height controls size it), which left a 12px line sitting at the top of a 28px box — the glyph rode high, then snapped down on hover. Centring here is size-agnostic and keeps those controls working. */ .rt-team-container .layout5 .table .social-icons a i { line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex: 0 0 auto; flex: 0 0 auto; background: transparent; border: 0; } /* Hover fill is the layout's own behaviour, so it deliberately outranks the Social Icon Background control — that control owns the resting state. */ .rt-team-container .layout5 .table .social-icons a:hover, .rt-team-container .layout5 .table .social-icons a:focus { background-color: var(--l5-primary, #143ee5); color: #fff; -webkit-transform: translateY(-2px); transform: translateY(-2px); } /* The shared social CSS paints per-network BRAND colours on the INSIDE the anchor on hover/focus (~48 rules, e.g. `.social-icons a:hover .fa-facebook-f{background:#3b5999;width:30px;height:30px}`). Those target the glyph while the rule above tints the chip, so both render and a brand-coloured square sits inside the chip. The design tints only the chip, so neutralise the glyph — !important because Pro re-ships the same brand rules WITH !important, and its stylesheet loads after this one on Elementor pages. */ .rt-team-container .layout5 .table .social-icons a:hover i, .rt-team-container .layout5 .table .social-icons a:focus i { color: #fff; background: transparent !important; background-color: transparent !important; width: auto; height: auto; } /* Phones: drop the card's radius/border flush to the screen edge is wrong here — keep the card, just tighten the cells so more columns stay reachable. */ @media (max-width: 767px) { .rt-team-container .layout5 .table > thead > tr > th, .rt-team-container .layout5 .table > tbody > tr > td { padding: 12px 14px; } .rt-team-container .layout5 .table .rt-l5-name { padding-left: 10px; } } /************************ End Layout 5 ********************/ /*********************** Start Layout 6 ********************/ /* Grid Layout 6 — "Team Grid Layout 4": a horizontal split card (photo + brand-colour content panel) with a notch pointing at the photo, a role pill above the name, contact chips, an image hover-social overlay, and a footer social row + Read More button. Alternates image side per row (the .tlp-left-arrow / .tlp-right-arrow class from $check). Accent is 100% control-driven: the shortcode "Primary Color" (sc-css) paints .layout6 .tlp-info-block{background} + both arrow border-colours (default #143ee5); Name/Designation/Email/Social colour controls paint their fields. Paintable colour defaults below stay low-specificity so every control still wins; structural rules use normal specificity. */ /* Its own accent variable, like every sibling layout. It chains off --l1-primary, which "Primary Color" writes once on the container, so the panel, the social hover chip, the button text and the card's hover glow all recolour together. Before this the whole card was hardcoded #143ee5 and the glow could not follow the control at all. */ .rt-team-container .layout6 { --l6-primary: var(--l1-primary, #143ee5); } /* ---- card frame ---- */ .rt-team-container .layout6 .rt-inner-content { display: flex; align-items: stretch; height: 100%; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); transition: box-shadow .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout6 .rt-inner-content:hover { box-shadow: 0 26px 66px color-mix(in srgb, var(--l6-primary, #143ee5) 20%, transparent), 0 6px 18px rgba(20, 30, 75, .08); transform: translateY(-4px); } .rt-team-container .layout6 .tlp-img-block, .rt-team-container .layout6 .tlp-info-block { margin: 0; float: none; flex: 0 0 50%; max-width: 50%; } /* ---- image side ---- */ .rt-team-container .layout6 .tlp-img-block { padding: 0; position: relative; z-index: 1; overflow: hidden; background: #dfe3ee; } .rt-team-container .layout6 .tlp-img.tlp-single-team { position: relative; width: 100%; height: 100%; overflow: hidden; } .rt-team-container .layout6 .tlp-img.tlp-single-team figure, .rt-team-container .layout6 .tlp-img.tlp-single-team figure a { display: block; height: 100%; margin: 0; } .rt-team-container .layout6 .tlp-img.tlp-single-team img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout6 .rt-inner-content:hover .tlp-img.tlp-single-team img { transform: scale(1.06); } /* image hover-social overlay (round chips) */ .rt-team-container .layout6 .rt-l6-media-social { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 16px 14px; display: flex; background: linear-gradient(to top, rgba(15, 21, 53, .55), rgba(15, 21, 53, 0)); transform: translateY(115%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout6 .rt-inner-content:hover .rt-l6-media-social { transform: translateY(0); } .rt-team-container .layout6 .rt-l6-media-social .social-icons { margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; } .rt-team-container .layout6 .rt-l6-media-social .social-icons a { width: 36px; height: 36px; margin: 0; display: inline-flex; align-items: center; justify-content: center; /* Follow the accent, don't hardcode it: with a Primary Color set, the chips sat at the default blue while the rest of the card had recoloured. The Elementor twin already uses the variable (tlp-el-team-pro.css, `.layout-el-6 … .social-icons a i`). */ color: var(--l6-primary, #143ee5); border-radius: 50%; line-height: 1; transition: background .2s, color .2s, transform .2s; } /* chip bg + glyph size defaults at zero specificity so the Social Background and Social Size controls win */ :where(.rt-team-container .layout6 .rt-l6-media-social) .social-icons a { background: rgba(255, 255, 255, .95); font-size: 13px; } .rt-team-container .layout6 .rt-l6-media-social .social-icons a i { width: auto; height: auto; line-height: 1; color: inherit; } .rt-team-container .layout6 .rt-l6-media-social .social-icons a:hover { background: var(--l6-primary, #143ee5); color: #fff; transform: translateY(-2px); } /* Kill the legacy per-network brand block on the glyph. The old flat design painted the `` itself (`.rt-team-container .social-icons a:hover .fa-facebook-f{background:#3b5999; width:30px;height:30px}` and ~18 siblings, from line ~2736) — inside this layout's round chip that surfaces as a square patch appearing behind the icon on hover, over the chip colour the user actually picked. The chip (`a`) carries the hover colour here, so the glyph must stay transparent. (0,5,2) beats the legacy arm's (0,4,1). */ .rt-team-container .layout6 .rt-l6-media-social .social-icons a:hover i, .rt-team-container .layout6 .rt-l6-media-social .social-icons a:focus i { background: transparent; /* Geometry has to be restated, not just the background. The envelope arm is the one double-class selector in that whole block (`a:hover .far.fa-envelope`, 0,5,1) so it alone outranks this layout's base `… .social-icons a i` rule (0,4,2) and re-imposed `width/height:30px` on hover only — the glyph snapped 20x20 -> 30x30 and the icon appeared to jump. These three values just repeat the resting rule above, so hover changes colour and nothing else. */ width: auto; height: auto; line-height: 1; } /* ---- content panel (brand colour) ---- */ .rt-team-container .layout6 .tlp-info-block { position: relative; z-index: 2; padding: 28px 26px; background: var(--l6-primary, #143ee5); color: #fff; display: flex; flex-direction: column; gap: 13px; overflow: visible; border: 0; } /* gradient sheen + decorative orb (translucent, works over any base colour) */ .rt-team-container .layout6 .tlp-info-block::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(160px 160px at 100% 0, rgba(255, 255, 255, .18), transparent 70%), linear-gradient(155deg, rgba(255, 255, 255, .05) 0%, rgba(0, 0, 0, .18) 100%); } .rt-team-container .layout6 .tlp-info-block > * { position: relative; z-index: 1; } /* notch — a clean triangle flush with the panel edge, pointing at the photo. background:inherit makes it follow the panel colour (so the Primary Color control recolours it too); clip-path leaves only the outward-facing half, so there's no diamond artifact overlapping the panel. Borders zeroed → the sc-css arrow border-colour is a harmless no-op. */ .rt-team-container .layout6 .tlp-right-arrow::after, .rt-team-container .layout6 .tlp-left-arrow::after { content: ""; position: absolute; top: 50%; width: 12px; height: 24px; background: inherit; border: 0; z-index: 1; } .rt-team-container .layout6 .tlp-right-arrow::after { left: 0; transform: translate(-100%, -50%); clip-path: polygon(100% 0, 0 50%, 100% 100%); } .rt-team-container .layout6 .tlp-left-arrow::after { left: auto; right: 0; transform: translate(100%, -50%); clip-path: polygon(0 0, 100% 50%, 0 100%); } /* role pill (moved above the name via flex order) */ .rt-team-container .layout6 .tlp-position { order: -1; align-self: flex-start; margin: 0; padding: 4px 11px; text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .5px; line-height: 1.4; text-transform: uppercase; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; } .rt-team-container .layout6 .tlp-position a { text-decoration: none; } :where(.rt-team-container .layout6) .tlp-position, :where(.rt-team-container .layout6) .tlp-position a { color: #fff; } /* name */ .rt-team-container .layout6 .tlp-info-block h3 { margin: 0; padding: 0; font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -.3px; } :where(.rt-team-container .layout6 .tlp-info-block) h3, :where(.rt-team-container .layout6 .tlp-info-block) h3 a { color: #fff; } /* department (present on the Elementor template; harmless here) */ .rt-team-container .layout6 .tlp-department { margin: 0; font-size: 13px; } :where(.rt-team-container .layout6) .tlp-department { color: rgba(255, 255, 255, .85); } /* short bio */ .rt-team-container .layout6 .short-bio { margin: 0; padding: 0; } .rt-team-container .layout6 .short-bio a, .rt-team-container .layout6 .short-bio p { margin: 0; padding: 0; font-size: 14.5px; line-height: 1.6; } :where(.rt-team-container .layout6 .short-bio) p, :where(.rt-team-container .layout6 .short-bio) a { color: rgba(255, 255, 255, .92); } /* contact list with icon chips */ .rt-team-container .layout6 .contact-info { margin: 0; padding: 0; } .rt-team-container .layout6 .contact-info ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .rt-team-container .layout6 .contact-info ul li { margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; min-width: 0; } .rt-team-container .layout6 .contact-info ul li a, .rt-team-container .layout6 .contact-info ul li span { min-width: 0; overflow-wrap: break-word; word-break: break-word; } .rt-team-container .layout6 .contact-info ul li i { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; font-size: 11px; } :where(.rt-team-container .layout6) .contact-info { color: rgba(255, 255, 255, .95); font-size: 14px; } /* The contact chips sit ON the brand panel, whose background IS the accent, so they must stay white -- otherwise they vanish into it. Primary Color paints every `.contact-info ul li i` in the shortcode (templates/sc-css.php, the `… .overlay a.detail-popup, … .contact-info ul li i` arm), which is right on the white-card layouts but turned these icons the same colour as the panel behind them. (0,4,3) on purpose: that arm is (0,3,3), so this wins, while any future per-field control scoped tighter still would not. The Elementor twin already renders them white -- it has no equivalent arm -- so this brings the two paths back in line. */ .rt-team-container .layout6 .tlp-info-block .contact-info ul li i, .rt-team-container .layout-el-6 .tlp-info-block .contact-info ul li i { color: #fff; } .rt-team-container .layout6 .contact-info ul li a { color: inherit; text-decoration: none; transition: color .2s; } .rt-team-container .layout6 .contact-info ul li a:hover { color: #fff; text-decoration: none; } /* ---- footer: social row + read-more button ---- */ .rt-team-container .layout6 .rt-l6-foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-top: 4px; } .rt-team-container .layout6 .rt-l6-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } /* `.rt-l6-btns` above spaces the two ROWS 8px apart, but Resume and Hire Me live inside one `.readmore-btn` and the template writes them back to back with no separator, so the two buttons touched. Matching gap here so the spacing reads the same in both directions. (The anchors are already `inline-flex`, so unlike layout16 their padding was never the problem -- only the missing gap.) `layout-el-6` is listed too: it is a separate key and template, but it emits the same `.rt-l6-btns > .readmore-btn` markup and had the same zero gap. Its own rule in tlp-team-pro sets only margin and padding, so there is nothing here to out-rank -- load order between the two stylesheets does not matter. */ .rt-team-container .layout6 .rt-l6-btns .readmore-btn, .rt-team-container .layout-el-6 .rt-l6-btns .readmore-btn { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .rt-team-container .layout6 .readmore-btn a, .rt-team-container .layout6 .hirme-resume a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; background: #fff; color: var(--l6-primary, #143ee5); border: 0 solid transparent; border-radius: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.2; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transition: background .2s, color .2s, transform .2s, box-shadow .2s; } .rt-team-container .layout6 .readmore-btn a:hover, .rt-team-container .layout6 .hirme-resume a:hover { background: #0f1535; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); } /* ---- responsive: stack on phones, hide the notch ---- */ @media (max-width: 767px) { .rt-team-container .layout6 .rt-inner-content { flex-direction: column; } .rt-team-container .layout6 .tlp-img-block, .rt-team-container .layout6 .tlp-info-block { flex-basis: auto; max-width: 100%; } .rt-team-container .layout6 .tlp-img-block { order: -1; } .rt-team-container .layout6 .tlp-img.tlp-single-team { height: auto; } .rt-team-container .layout6 .tlp-img.tlp-single-team img { height: auto; object-fit: unset; } .rt-team-container .layout6 .tlp-right-arrow::after, .rt-team-container .layout6 .tlp-left-arrow::after { display: none; } } /*********************** End Layout 6 ********************/ /*********************** Start Layout 7 ********************/ /* Layout 7 — hover-reveal brand overlay ("Team Grid Layout 5"): a square greyscale portrait that colourises on hover while a brand-colour overlay with a thin inner frame fades in, revealing name / role / divider / bio / round social chips / a white pill button. The overlay colour is driven by the Overlay Background control (.layout7 figcaption:hover); everything else defaults to the reference blue #143ee5 and is overridable per-field. */ /* flex chain so every card fills its (flex-stretched) column while the overlay content still defines the intrinsic height — even rows, full overlay coverage */ .rt-team-container .layout7 .rt-grid-item, .rt-team-container .isotope4 .rt-grid-item { display: flex; flex-direction: column; } /* The card's accent reads var(--l7-primary, #143ee5). The variable is deliberately NOT declared here: sc-css.php sets it on the container from Primary Color, and a default declaration on this (deeper) element would shadow that inherited value and kill the control. The var() fallback supplies the reference blue instead. */ .rt-team-container .layout7 .single-team-area, .rt-team-container .layout7 .single-team, .rt-team-container .isotope4 .single-team-area, .rt-team-container .isotope4 .single-team { position: relative; margin: 0; width: 100%; display: flex; flex-direction: column; flex: 1 1 auto; } /* card frame — height grows with the overlay content (see figcaption min-height) */ .rt-team-container .layout7 .tlp-team-item, .rt-team-container .isotope4 .tlp-team-item { position: relative; margin: 0; padding: 0; overflow: hidden; border-radius: 6px; background: #dfe3ee; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 6px 18px rgba(20, 30, 75, .05); transition: box-shadow .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); text-align: center; /* No `cursor: pointer` here. `cursor` inherits, so putting it on the card frame made every dead area -- the bio paragraph, the gaps in the caption, the figcaption itself -- claim to be clickable. It is not: on hover the figcaption covers the whole card, so the image anchor underneath is unreachable and only the name, role, social and button links navigate. The pointer now appears over those and nothing else, which is what every other layout does -- layout7 and isotope4 were the only two setting it card-wide. */ display: flex; flex-direction: column; flex: 1 1 auto; } .rt-team-container .layout7 .tlp-team-item:hover, .rt-team-container .isotope4 .tlp-team-item:hover { box-shadow: 0 24px 60px color-mix(in srgb, var(--l7-primary, #143ee5) 22%, transparent), 0 4px 12px rgba(20, 30, 75, .06); transform: translateY(-3px); z-index: 2; } /* image (greyscale by default, colour on hover) */ .rt-team-container .layout7 .tlp-team-item > figure, .rt-team-container .isotope4 .tlp-team-item > figure { position: absolute; inset: 0; z-index: 1; margin: 0; height: 100%; width: 100%; } .rt-team-container .layout7 .tlp-team-item > figure a, .rt-team-container .isotope4 .tlp-team-item > figure a { display: block; height: 100%; } .rt-team-container .layout7 .tlp-team-item img, .rt-team-container .isotope4 .tlp-team-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%) contrast(1.02); transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout7 .tlp-team-item:hover img, .rt-team-container .isotope4 .tlp-team-item:hover img { transform: scale(1.06); filter: grayscale(0%) brightness(.85); } /* overlay (in normal flow so its content defines the card height; fades in on hover). min-height gives a portrait floor for the image; taller content grows the card instead of clipping. */ .rt-team-container .layout7 .tlp-team-item figcaption, .rt-team-container .isotope4 .tlp-team-item figcaption { position: relative; width: 100%; min-height: 300px; flex: 1 1 auto; z-index: 3; display: flex; align-items: center; justify-content: center; color: #fff; background-color: var(--l7-primary, #143ee5); background-image: linear-gradient(160deg, rgba(255, 255, 255, .08) 0%, rgba(0, 0, 0, .12) 100%); opacity: 0; transition: opacity .4s cubic-bezier(.2, .7, .2, 1); backface-visibility: hidden; } .rt-team-container .layout7 .tlp-team-item:hover figcaption, .rt-team-container .isotope4 .tlp-team-item:hover figcaption { opacity: 1; } /* signature thin inner frame */ .rt-team-container .layout7 .tlp-team-item figcaption::before, .rt-team-container .isotope4 .tlp-team-item figcaption::before { content: ""; position: absolute; top: 14px; right: 14px; bottom: 14px; left: 14px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 2px; transform: scale(.9); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1) .1s, opacity .4s cubic-bezier(.2, .7, .2, 1) .1s; } .rt-team-container .layout7 .tlp-team-item:hover figcaption::before, .rt-team-container .isotope4 .tlp-team-item:hover figcaption::before { transform: scale(1); opacity: 1; } .rt-team-container .layout7 .tlp-team-item figcaption::after, .rt-team-container .isotope4 .tlp-team-item figcaption::after { content: none; } /* inner content (slides up + fades on hover) */ .rt-team-container .layout7 .caption-inner-content, .rt-team-container .isotope4 .caption-inner-content { position: relative; top: auto; left: auto; right: auto; transform: translateY(12px); opacity: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 18px 16px; transition: transform .5s cubic-bezier(.2, .7, .2, 1) .18s, opacity .5s cubic-bezier(.2, .7, .2, 1) .18s; } .rt-team-container .layout7 .tlp-team-item:hover .caption-inner-content, .rt-team-container .isotope4 .tlp-team-item:hover .caption-inner-content { transform: translateY(0); opacity: 1; } /* name */ .rt-team-container .layout7 .caption-inner-content h3, .rt-team-container .isotope4 .caption-inner-content h3 { margin: 0; padding: 0; line-height: 1.2; letter-spacing: -.2px; } /* Name size / weight / colour are pinned at 0-1-1 — deliberately BELOW the Name Styling control ($selector h3 = 0-2-1) so a user value wins, but still ABOVE the theme's bare `h3` so the card keeps its own defaults. Putting them on the 0-3-1 rule above killed the control; dropping them to :where()'s zero let Astra's h3 (24px) take over. */ :where(.rt-team-container) .layout7 h3, :where(.rt-team-container) .layout7 h3 a, :where(.rt-team-container) .isotope4 h3, :where(.rt-team-container) .isotope4 h3 a { color: #fff; font-size: 20px; font-weight: 600; } /* role + centred divider (::after) */ .rt-team-container .layout7 .tlp-position, .rt-team-container .isotope4 .tlp-position { margin: 0; padding: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; line-height: 1.4; } /* Designation — 0,3,0, so it clears the later generic `.rt-team-container .tlp-position { color: initial }` (0,2,0) at line ~9022. A `:where()` wrapper here dropped this to 0,1,0 and lost that fight: the linked label still looked right (the anchor was painted too), but an UNLINKED designation — and the `.experience` span, which sits inside .tlp-position but outside the anchor — rendered BLACK on the blue overlay. Ties the Designation control, which loads later in team-sc.css and so still wins. */ .rt-team-container .layout7 .tlp-position, .rt-team-container .isotope4 .tlp-position { color: rgba(255, 255, 255, .85); } /* the anchor INHERITS — a hard colour here (0,3,1) would out-rank the Designation control's parent-only arm and the visible label would ignore the control. */ .rt-team-container .layout7 .tlp-position a, .rt-team-container .isotope4 .tlp-position a { color: inherit; text-decoration: none; } .rt-team-container .layout7 .tlp-position::after, .rt-team-container .isotope4 .tlp-position::after { content: ""; display: block; width: 28px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .5); margin: 8px auto 2px; } /* department */ .rt-team-container .layout7 .tlp-department, .rt-team-container .isotope4 .tlp-department { margin: 0; font-size: 12px; } :where(.rt-team-container .layout7) .tlp-department, :where(.rt-team-container .isotope4) .tlp-department { color: rgba(255, 255, 255, .8); } /* bio (clamped to 3 lines) */ .rt-team-container .layout7 .short-bio, .rt-team-container .isotope4 .short-bio { margin: 0; padding: 0; max-width: 92%; font-size: 13px; line-height: 1.55; } .rt-team-container .layout7 .short-bio p, .rt-team-container .isotope4 .short-bio p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; text-align: center; } :where(.rt-team-container .layout7 .short-bio) p, :where(.rt-team-container .layout7 .short-bio) a, :where(.rt-team-container .isotope4 .short-bio) p, :where(.rt-team-container .isotope4 .short-bio) a { color: rgba(255, 255, 255, .92); } /* round social chips */ .rt-team-container .layout7 .social-icons, .rt-team-container .isotope4 .social-icons { margin: 6px 0 0; padding: 0; display: flex; justify-content: center; gap: 8px; text-align: center; } .rt-team-container .layout7 .social-icons a, .rt-team-container .isotope4 .social-icons a { width: 34px; height: 34px; margin: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; color: #fff; font-size: 12px; line-height: 1; transition: background .2s, color .2s, transform .2s; } .rt-team-container .layout7 .social-icons a i, .rt-team-container .isotope4 .social-icons a i { font-size: inherit; line-height: 1; } /* chip bg default at zero specificity so the Social Background control wins */ :where(.rt-team-container .layout7 .social-icons) a, :where(.rt-team-container .isotope4 .social-icons) a { background: rgba(255, 255, 255, .15); } .rt-team-container .layout7 .social-icons a:hover, .rt-team-container .isotope4 .social-icons a:hover { background: #fff; color: var(--l7-primary, #143ee5); transform: translateY(-2px); } /* the chip is the ; keep the glyph a clean primary mark on hover. Higher specificity (0,4,2) beats the global brand-colour hover rules (0,4,1, no !important on the shortcode path) that put a coloured box + white glyph on the — no !important, so the Social colour control's dynamic CSS still applies. Also reset the width/height:30px those rules add (which, with the global display:block, shove the glyph to the chip's top-left) so it stays centred. */ .rt-team-container .layout7 .social-icons a:hover i, .rt-team-container .isotope4 .social-icons a:hover i { background: transparent; color: var(--l7-primary, #143ee5); width: auto; height: auto; } /* white pill button(s) */ .rt-team-container .layout7 .readmore-btn, .rt-team-container .isotope4 .readmore-btn { margin: 4px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } .rt-team-container .layout7 .readmore-btn a, .rt-team-container .isotope4 .readmore-btn a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; background: #fff; color: var(--l7-primary, #143ee5); border: 0 solid transparent; border-radius: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.2; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); transition: background .2s, color .2s, transform .2s, box-shadow .2s; } .rt-team-container .layout7 .readmore-btn a:hover, .rt-team-container .isotope4 .readmore-btn a:hover { background: #0f1535; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, .25); } /* responsive: tighten spacing on small screens (no content hidden) */ @media (max-width: 767px) { .rt-team-container .layout7 .caption-inner-content, .rt-team-container .isotope4 .caption-inner-content { padding: 16px 12px; gap: 8px; } } /* Carousel 2 shares this card: its slides carry the `layout7` class (tlp-team-pro/templates/layouts/carousel2.php), so every rule above already reaches them. The one exception is the flex-chain starter `.layout7 .rt-grid-item` — in a grid the ROW carries `.layout7` and the item is a descendant, but in a carousel the item IS the `.layout7` element. Restated as a compound selector so the card still stretches to the tallest slide and the overlay covers it fully. */ .rt-team-container .carousel2 .swiper-wrapper { align-items: stretch; } .rt-team-container .layout7.rt-grid-item, .rt-team-container .isotope4.rt-grid-item { display: flex; flex-direction: column; height: auto; } /*********************** End Layout 7 ********************/ /*********************** Start Layout 8 ********************/ /* Isotope 5 SHARES this card (tlp-team-pro/templates/layouts/isotope5.php is Layout 8's markup plus `team-member` + the iso_ filter classes), so every rule below carries an `.isotope5` twin. Edit the two together — never split one off. Mirrored in pro's _lo-layout-8.scss for the Elementor path. */ /* Layout 8 — "Team Grid Layout 9": a square portrait with a floating gradient name label overlapping its lower edge. On hover the portrait darkens/zooms and round white social chips + pill button(s) reveal with a staggered rise. Independent of the Elementor twin (.layout-el-8); every per-field Style control still overrides these defaults. */ /* card — equal-height via a flex chain; NOT clipped so the label shadow shows (the media clips the portrait itself) */ .rt-team-container .layout8 .rt-grid-item, .rt-team-container .isotope5 .rt-grid-item { display: flex; flex-direction: column; } .rt-team-container .layout8 .single-team-area, .rt-team-container .isotope5 .single-team-area { position: relative; margin: 0; width: 100%; display: flex; flex-direction: column; flex: 1 1 auto; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 6px 18px rgba(20, 30, 75, .05); transition: box-shadow .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout8 .single-team-area:hover, .rt-team-container .isotope5 .single-team-area:hover { box-shadow: 0 24px 60px color-mix(in srgb, var(--l8-primary, #143ee5) 22%, transparent), 0 4px 12px rgba(20, 30, 75, .06); transform: translateY(-5px); z-index: 2; } /* media (square portrait) */ .rt-team-container .layout8 .tlp-portfolio-thum, .rt-team-container .isotope5 .tlp-portfolio-thum { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px 14px 0 0; background: #dfe3ee; } .rt-team-container .layout8 .tlp-portfolio-thum figure, .rt-team-container .isotope5 .tlp-portfolio-thum figure { margin: 0; width: 100%; height: 100%; } .rt-team-container .layout8 .tlp-portfolio-thum figure a, .rt-team-container .isotope5 .tlp-portfolio-thum figure a { display: block; height: 100%; } .rt-team-container .layout8 .single-team-area img, .rt-team-container .isotope5 .single-team-area img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout8 .single-team-area:hover img, .rt-team-container .isotope5 .single-team-area:hover img { transform: scale(1.07); filter: brightness(.85); } /* hover-reveal overlay (social + buttons) */ .rt-team-container .layout8 .tlp-overlay, .rt-team-container .isotope5 .tlp-overlay { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 18px 16px 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to top, rgba(15, 21, 53, .5) 0%, rgba(15, 21, 53, .14) 46%, rgba(15, 21, 53, 0) 100%); opacity: 0; pointer-events: none; transition: opacity .3s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout8 .single-team-area:hover .tlp-overlay, .rt-team-container .isotope5 .single-team-area:hover .tlp-overlay { opacity: 1; pointer-events: auto; } .rt-team-container .layout8 .rttm-l8-reveal, .rt-team-container .isotope5 .rttm-l8-reveal { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; } /* social chips (staggered rise on hover). text-align (not flex) so the Social Alignment control, which emits `text-align` on `.social-icons`, actually works */ .rt-team-container .layout8 .social-icons, .rt-team-container .isotope5 .social-icons { width: 100%; margin: 0; padding: 0; text-align: center; line-height: 1; } .rt-team-container .layout8 .social-icons a, .rt-team-container .isotope5 .social-icons a { width: 44px; height: 44px; margin: 0 5px; display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; border-radius: 50%; color: var(--l8-primary, #143ee5); font-size: 15px; line-height: 1; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(16px) scale(.85); transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .4s cubic-bezier(.2, .7, .2, 1), background .2s, color .2s, box-shadow .2s; } .rt-team-container .layout8 .social-icons a i, .rt-team-container .isotope5 .social-icons a i { font-size: inherit; line-height: 1; display: inline-flex; } /* chip bg default at zero specificity so the Social Background control wins */ :where(.rt-team-container .layout8 .social-icons) a, :where(.rt-team-container .isotope5 .social-icons) a { background: rgba(255, 255, 255, .96); } .rt-team-container .layout8 .single-team-area:hover .social-icons a, .rt-team-container .isotope5 .single-team-area:hover .social-icons a { opacity: 1; transform: translateY(0) scale(1); } .rt-team-container .layout8 .single-team-area:hover .social-icons a:nth-child(1), .rt-team-container .isotope5 .single-team-area:hover .social-icons a:nth-child(1) { transition-delay: .05s; } .rt-team-container .layout8 .single-team-area:hover .social-icons a:nth-child(2), .rt-team-container .isotope5 .single-team-area:hover .social-icons a:nth-child(2) { transition-delay: .12s; } .rt-team-container .layout8 .single-team-area:hover .social-icons a:nth-child(3), .rt-team-container .isotope5 .single-team-area:hover .social-icons a:nth-child(3) { transition-delay: .19s; } .rt-team-container .layout8 .single-team-area:hover .social-icons a:nth-child(4), .rt-team-container .isotope5 .single-team-area:hover .social-icons a:nth-child(4) { transition-delay: .26s; } .rt-team-container .layout8 .single-team-area:hover .social-icons a:nth-child(5), .rt-team-container .isotope5 .single-team-area:hover .social-icons a:nth-child(5) { transition-delay: .33s; } .rt-team-container .layout8 .social-icons a:hover, .rt-team-container .isotope5 .social-icons a:hover { background: #0f1535; color: #fff; box-shadow: 0 12px 24px rgba(0, 0, 0, .28); } /* keep the glyph a clean mark that follows the chip on hover — beat the global brand-colour hover rules (0,4,1, no !important) and reset the 30x30 they add */ .rt-team-container .layout8 .social-icons a:hover i, .rt-team-container .isotope5 .social-icons a:hover i { background: transparent; color: inherit; width: auto; height: auto; } /* pill button(s), revealed after the icons */ .rt-team-container .layout8 .tlp-btn-wrapper, .rt-team-container .isotope5 .tlp-btn-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .rt-team-container .layout8 .readmore-btn, .rt-team-container .isotope5 .readmore-btn { margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } .rt-team-container .layout8 .readmore-btn:empty, .rt-team-container .isotope5 .readmore-btn:empty { display: none; } .rt-team-container .layout8 .readmore-btn a, .rt-team-container .isotope5 .readmore-btn a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: #fff; color: var(--l8-primary, #143ee5); border: 0 solid transparent; border-radius: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.2; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(16px) scale(.92); transition: transform .4s cubic-bezier(.2, .7, .2, 1) .34s, opacity .4s cubic-bezier(.2, .7, .2, 1) .34s, background .2s, color .2s, box-shadow .2s; } .rt-team-container .layout8 .single-team-area:hover .readmore-btn a, .rt-team-container .isotope5 .single-team-area:hover .readmore-btn a { opacity: 1; transform: translateY(0) scale(1); } .rt-team-container .layout8 .readmore-btn a:hover, .rt-team-container .isotope5 .readmore-btn a:hover { background: #0f1535; color: #fff; box-shadow: 0 12px 24px rgba(0, 0, 0, .28); } /* floating gradient name label */ .rt-team-container .layout8 .tlp-title, .rt-team-container .isotope5 .tlp-title { position: relative; z-index: 3; margin: -30px 16px 0; padding: 14px 18px; background-color: var(--l8-primary, #143ee5); /* colour-agnostic sheen so any Primary Color keeps the light-to-dark feel of the reference gradient (#143ee5 -> #0e2aa3) */ background-image: linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(0, 0, 0, .20) 100%); border-radius: 12px; text-align: center; box-shadow: 0 12px 24px color-mix(in srgb, var(--l8-primary, #143ee5) 28%, transparent); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout8 .single-team-area:hover .tlp-title, .rt-team-container .isotope5 .single-team-area:hover .tlp-title { transform: translateY(-2px); } .rt-team-container .layout8 .tlp-title h3, .rt-team-container .isotope5 .tlp-title h3 { margin: 0; padding: 0; } /* Typography + colour pinned at 0-1-1: BELOW the Name Style controls (`$selector h3` = 0-2-1) so a user value wins, but ABOVE the plugin's own `.rt-team-container h3` (0-1-1, declared earlier in this file) and the theme's bare `h3`. At full :where() zero — as this was — Astra's h3 won and the label rendered 24px/400 instead of the designed 17px/600. */ :where(.rt-team-container .layout8) .tlp-title h3, :where(.rt-team-container .isotope5) .tlp-title h3 { font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: -.1px; } :where(.rt-team-container .layout8) .tlp-title h3, :where(.rt-team-container .isotope5) .tlp-title h3, :where(.rt-team-container .layout8) .tlp-title h3 a, :where(.rt-team-container .isotope5) .tlp-title h3 a { color: #fff; } .rt-team-container .layout8 .tlp-title h3 a, .rt-team-container .isotope5 .tlp-title h3 a { text-decoration: none; } .rt-team-container .layout8 .tlp-position, .rt-team-container .isotope5 .tlp-position { margin: 3px 0 0; padding: 0; font-size: 12px; font-weight: 400; letter-spacing: .3px; line-height: 1.4; } /* Designation — 0,3,0, so it clears the later generic `.rt-team-container .tlp-position { color: initial }` (0,2,0) at line ~9022. A `:where()` wrapper here dropped this to 0,1,0 and lost that fight: a LINKED label still looked right (the anchor arm was painted too), but an UNLINKED designation rendered BLACK on the blue name label. Ties the Designation control (`$selector` is `.rt-team-container.rt-team-container-`, so its arm is 0,3,0 too), which loads later in team-sc.css and so still wins. Same fix as layout 7. */ .rt-team-container .layout8 .tlp-position, .rt-team-container .isotope5 .tlp-position { color: rgba(255, 255, 255, .85); } /* the anchor INHERITS — a hard colour here (0,3,1) would out-rank the Designation control's parent-only arm and the visible label would ignore the control. */ .rt-team-container .layout8 .tlp-position a, .rt-team-container .isotope5 .tlp-position a { color: inherit; text-decoration: none; } .rt-team-container .layout8 .tlp-department, .rt-team-container .isotope5 .tlp-department { margin: 4px 0 0; padding: 0; font-size: 11.5px; line-height: 1.4; } :where(.rt-team-container .layout8) .tlp-department, :where(.rt-team-container .isotope5) .tlp-department { color: rgba(255, 255, 255, .8); } /* footer spacer so the label floats above the card's lower edge; also grows to equalise card heights across a row */ .rt-team-container .layout8 .rttm-l8-foot, .rt-team-container .isotope5 .rttm-l8-foot { flex: 1 1 auto; min-height: 18px; } /* round-image variant */ .rt-team-container .layout8 .round-img .tlp-portfolio-thum, .rt-team-container .isotope5 .round-img .tlp-portfolio-thum, .rt-team-container .layout8 .round-img .single-team-area img, .rt-team-container .isotope5 .round-img .single-team-area img { border-radius: 50%; } /* Carousel 3 shares this card: its slides carry the `layout8` class (tlp-team-pro/templates/layouts/carousel3.php), so every rule above already reaches them. The exception is the flex-chain starter `.layout8 .rt-grid-item` — in a grid the ROW carries `.layout8` and the item is a descendant, but in a carousel the item IS the `.layout8` element. Restated as a compound selector so cards still stretch to the tallest slide. */ .rt-team-container .carousel3 .swiper-wrapper { align-items: stretch; } .rt-team-container .layout8.rt-grid-item { display: flex; flex-direction: column; height: auto; } /* Carousel 3 only. Two things the grid twin doesn't need: - no hover box-shadow: the loud blue glow read as a smudge against the slider edge, so hover keeps the resting shadow unchanged; - no hover LIFT: the slider viewport (.rt-carousel-holder.swiper) is overflow:hidden and sits flush with the slide, so translateY(-5px) pushed the card's top 5px outside the clip box and it was visibly cut off. Padding the holder to make room was tried first, but it re-anchors the absolutely-positioned nav arrows, so the lift is simply dropped here. Grid layout 8 has no clipping container and keeps both. Mirrored in pro's _lo-layout-8.scss for the Elementor path. */ .rt-team-container .carousel3 .single-team-area:hover { box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 6px 18px rgba(20, 30, 75, .05); transform: none; } /*********************** End Layout 8 ********************/ /*********************** Layout 9 ************************/ /* Isotope 6 SHARES this card on the SHORTCODE path (tlp-team-pro/templates/layouts/ isotope6.php is Layout 9's markup plus `team-member` + the iso_ filter classes), so every rule below carries an `.isotope6` twin. The ELEMENTOR path uses the separate `isotope-el-6` key and is handled in pro's _lo-layout-9.scss — edit the two together. Redesign Layout 9 and both follow; never split one off. */ /* Layout 9 — "Team Grid Layout 10": a square portrait tagged with twin pill labels (name + role) at rest; on hover the labels fade out and a blue overlay reveals name / role / divider / bio / round social chips / pill button(s). SHARED key `.layout9` for both paths (no layout-el-9), so these rules also reach the Elementor page — the Elementor twin in _lo-layout-9.scss matches. Paintable/typographic defaults are low-spec so every Style control still wins. */ /* preserved layout10 rules (they lived inside the old layout9 block) — isotope7 shares layout10's card, so it needs the same two arms */ .rt-team-container .layout10 .short-bio, .rt-team-container .isotope7 .short-bio { margin: 0 0 15px; } .rt-team-container .layout10 .short-bio a, .rt-team-container .isotope7 .short-bio a { color: #fff; } /* card — content-driven auto-height (min-height floor keeps a square-ish base; grows taller when more fields/buttons are enabled). The flex chain equalises card heights across a row. */ .rt-team-container .layout9 .rt-grid-item, .rt-team-container .isotope6 .rt-grid-item { display: flex; flex-direction: column; } /* Carousel 4 shares this card: its slides carry the `layout9` class (tlp-team-pro/templates/layouts/carousel4.php), so every rule below already reaches them. The exception is the flex-chain starter above — in a grid the ROW carries `.layout9` and the item is a descendant, but in a carousel the item IS the `.layout9` element. Restated as a compound selector so cards still stretch to the tallest slide. */ .rt-team-container .carousel4 .swiper-wrapper { align-items: stretch; } .rt-team-container .layout9.rt-grid-item { display: flex; flex-direction: column; height: auto; } .rt-team-container .layout9 .single-team-area, .rt-team-container .isotope6 .single-team-area { position: relative; overflow: hidden; margin: 0; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; border-radius: 14px; background: #dfe3ee; text-align: center; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 6px 18px rgba(20, 30, 75, .05); transition: box-shadow .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout9 .single-team-area:hover, .rt-team-container .isotope6 .single-team-area:hover { box-shadow: 0 24px 60px color-mix(in srgb, var(--l9-primary, #143ee5) 22%, transparent), 0 4px 12px rgba(20, 30, 75, .06); transform: translateY(-4px); z-index: 2; } /* portrait */ .rt-team-container .layout9 .single-team-area figure, .rt-team-container .isotope6 .single-team-area figure { margin: 0; position: absolute; inset: 0; } .rt-team-container .layout9 .single-team-area figure a, .rt-team-container .isotope6 .single-team-area figure a { display: block; height: 100%; } .rt-team-container .layout9 .single-team-area img, .rt-team-container .isotope6 .single-team-area img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout9 .single-team-area:hover img, .rt-team-container .isotope6 .single-team-area:hover img { transform: scale(1.08); filter: brightness(.78); } /* twin pill labels (visible at rest) */ /* Labels sit on the BOTTOM EDGE of the portrait — `justify-content: flex-end` anchors them and the 12px bottom padding is all the breathing room they get, so the pills read as resting on the edge rather than floating over the chin (they were 26px up). It stays above the card's own 14px border-radius, so a centred pill never fouls a corner. This block also replaced a stray `margin-top: 50px` that existed only here and not in pro's _lo-layout-9.scss, so the pills used to sit lower on the shortcode path than on Elementor. Keep the two files in step — and note carousel4 hardcodes the `layout9` class, so it rides on these rules too. */ .rt-team-container .layout9 .tlp-labels, .rt-team-container .isotope6 .tlp-labels { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 20px 20px 12px; text-align: center; pointer-events: none; transition: opacity .3s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout9 .single-team-area:hover .tlp-labels, .rt-team-container .isotope6 .single-team-area:hover .tlp-labels { opacity: 0; transform: translateY(-6px); } .rt-team-container .layout9 .tlp-label-name, .rt-team-container .isotope6 .tlp-label-name { display: inline-block; margin: 0; padding: 8px 16px; background: var(--l9-primary, #143ee5); color: #fff; border-radius: 8px; font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: -.1px; box-shadow: 0 8px 20px color-mix(in srgb, var(--l9-primary, #143ee5) 35%, transparent); } .rt-team-container .layout9 .tlp-label-role, .rt-team-container .isotope6 .tlp-label-role { display: inline-block; padding: 5px 12px; background: rgba(15, 21, 53, .85); color: #fff; border-radius: 8px; font-size: 12.5px; line-height: 1.2; font-weight: 400; letter-spacing: .2px; } /* hover overlay — IN FLOW so its content defines the card height (min-height gives a portrait floor; taller content grows the card instead of clipping) */ .rt-team-container .layout9 .tlp-overlay, .rt-team-container .isotope6 .tlp-overlay { position: relative; z-index: 3; flex: 1 1 auto; min-height: 260px; overflow: hidden; padding: 18px 18px; color: #fff; /* Colour and sheen split — see the note in pro's _lo-layout-9.scss. A shorthand gradient here sets background-image, which paints over the Overlay Color control's background-color and made the control look dead. */ background-color: var(--l9-primary, rgba(20, 62, 229, .88)); background-image: linear-gradient(160deg, rgba(255, 255, 255, .05) 0%, rgba(0, 0, 0, .10) 100%); display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.2, .7, .2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .rt-team-container .layout9 .single-team-area:hover .tlp-overlay, .rt-team-container .isotope6 .single-team-area:hover .tlp-overlay { opacity: 1; pointer-events: auto; } /* signature thin inner frame */ .rt-team-container .layout9 .tlp-overlay::before, .rt-team-container .isotope6 .tlp-overlay::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; transform: scale(.95); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1) .1s, opacity .4s cubic-bezier(.2, .7, .2, 1) .1s; } .rt-team-container .layout9 .single-team-area:hover .tlp-overlay::before, .rt-team-container .isotope6 .single-team-area:hover .tlp-overlay::before { transform: scale(1); opacity: 1; } /* inner content (slides up + fades on hover) */ .rt-team-container .layout9 .tlp-overlay-inner, .rt-team-container .isotope6 .tlp-overlay-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; transform: translateY(14px); opacity: 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1) .18s, opacity .5s cubic-bezier(.2, .7, .2, 1) .18s; } .rt-team-container .layout9 .single-team-area:hover .tlp-overlay-inner, .rt-team-container .isotope6 .single-team-area:hover .tlp-overlay-inner { transform: translateY(0); opacity: 1; } /* name */ .rt-team-container .layout9 .tlp-overlay-inner h3, .rt-team-container .isotope6 .tlp-overlay-inner h3 { margin: 0; padding: 0; } /* Pinned at 0-1-1 (NOT full :where() zero): below the Name Style controls (`$selector h3` = 0-2-1) so a user value wins, but above the theme's bare `h3`. At zero, Astra's h3 won and the overlay name rendered 24px/400 instead of the designed 20px/600 — while the Elementor twin, which already uses this form, rendered it correctly. */ :where(.rt-team-container .layout9) .tlp-overlay-inner h3, :where(.rt-team-container .isotope6) .tlp-overlay-inner h3 { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.2px; } /* white by default at (0,2,1) — beats the theme's h3 colour (~0,1,0); ties the Name Colour control (0,2,1), which wins by load order */ .rt-team-container .layout9 h3, .rt-team-container .isotope6 h3 { color: #fff; } .rt-team-container .layout9 h3 a, .rt-team-container .isotope6 h3 a { color: inherit; } /* role + centred divider */ .rt-team-container .layout9 .tlp-position, .rt-team-container .isotope6 .tlp-position { margin: 0; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; line-height: 1.4; /* colour at (0,3,0) so it beats the theme; ties the Designation control which wins by order */ color: rgba(255, 255, 255, .85); } :where(.rt-team-container .layout9) .tlp-position a, :where(.rt-team-container .isotope6) .tlp-position a { color: rgba(255, 255, 255, .85); } .rt-team-container .layout9 .tlp-position a, .rt-team-container .isotope6 .tlp-position a { text-decoration: none; } .rt-team-container .layout9 .tlp-overlay-inner .tlp-position::after, .rt-team-container .isotope6 .tlp-overlay-inner .tlp-position::after { content: ""; display: block; width: 30px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .5); margin: 8px auto 2px; } /* designation shows at rest (the role pill); on hover the overlay shows the DEPARTMENT instead, so hide the overlay's designation line */ .rt-team-container .layout9 .tlp-overlay-inner .tlp-position, .rt-team-container .isotope6 .tlp-overlay-inner .tlp-position { display: none; } /* department — styled like the role line (it replaces it in the overlay) */ .rt-team-container .layout9 .tlp-department, .rt-team-container .isotope6 .tlp-department { margin: 0; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; line-height: 1.4; } :where(.rt-team-container .layout9) .tlp-department, :where(.rt-team-container .isotope6) .tlp-department { color: rgba(255, 255, 255, .85); } .rt-team-container .layout9 .tlp-overlay-inner .tlp-department::after, .rt-team-container .isotope6 .tlp-overlay-inner .tlp-department::after { content: ""; display: block; width: 30px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .5); margin: 8px auto 2px; } /* bio (clamped to fit the square) */ .rt-team-container .layout9 .short-bio, .rt-team-container .isotope6 .short-bio { margin: 0; padding: 0; max-width: 92%; font-size: 13px; line-height: 1.55; } .rt-team-container .layout9 .short-bio p, .rt-team-container .isotope6 .short-bio p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; } :where(.rt-team-container .layout9 .short-bio) p, :where(.rt-team-container .isotope6 .short-bio) p, :where(.rt-team-container .layout9 .short-bio) a, :where(.rt-team-container .isotope6 .short-bio) a { color: rgba(255, 255, 255, .95); } /* round social chips. text-align (not flex) so the Social Alignment control works */ .rt-team-container .layout9 .social-icons, .rt-team-container .isotope6 .social-icons { width: 100%; margin: 6px 0 0; padding: 0; text-align: center; line-height: 1; } .rt-team-container .layout9 .social-icons a, .rt-team-container .isotope6 .social-icons a { width: 34px; height: 34px; margin: 0 4px; display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; color: #fff; font-size: 12px; line-height: 1; transition: background .2s, color .2s, transform .2s; } .rt-team-container .layout9 .social-icons a i, .rt-team-container .isotope6 .social-icons a i { font-size: inherit; line-height: 1; } /* chip bg default at zero specificity so the Social Background control wins */ :where(.rt-team-container .layout9 .social-icons) a, :where(.rt-team-container .isotope6 .social-icons) a { background: rgba(255, 255, 255, .15); } .rt-team-container .layout9 .social-icons a:hover, .rt-team-container .isotope6 .social-icons a:hover { background: #fff; color: var(--l9-primary, #143ee5); transform: translateY(-2px); } /* keep the glyph a clean mark on hover — beat the global brand hover rules (0,4,1, no !important) and reset the 30x30 they add */ .rt-team-container .layout9 .social-icons a:hover i, .rt-team-container .isotope6 .social-icons a:hover i { background: transparent; color: inherit; width: auto; height: auto; } /* pill button(s) */ .rt-team-container .layout9 .readmore-btn, .rt-team-container .isotope6 .readmore-btn { margin: 8px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } .rt-team-container .layout9 .readmore-btn:empty, .rt-team-container .isotope6 .readmore-btn:empty { display: none; } .rt-team-container .layout9 .readmore-btn a, .rt-team-container .isotope6 .readmore-btn a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: #fff; color: var(--l9-primary, #143ee5); border: 0 solid transparent; border-radius: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.2; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); transition: background .2s, color .2s, transform .2s, box-shadow .2s; } .rt-team-container .layout9 .readmore-btn a:hover, .rt-team-container .isotope6 .readmore-btn a:hover { background: #0f1535; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, .25); } /* round-image variant */ .rt-team-container .layout9 .round-img .single-team-area, .rt-team-container .isotope6 .round-img .single-team-area, .rt-team-container .layout9 .round-img .tlp-overlay, .rt-team-container .isotope6 .round-img .tlp-overlay, .rt-team-container .layout9 .round-img .single-team-area img, .rt-team-container .isotope6 .round-img .single-team-area img { border-radius: 50%; } /************************* Layout 10 - "Team Grid Layout 8" split card *********/ /* Isotope 7 SHARES this card (tlp-team-pro/templates/layouts/isotope7.php is Layout 10's markup plus `team-member` + the iso_ filter classes, with the overlay body wearing BOTH `tlp-overlay-inner` and `inner-content`), so every rule below carries an `.isotope7` twin. Its arms are UNGUARDED unlike `.layout10`'s: isotope7 is one key for both paths. Pro's _lo-layout-10.scss carries the Elementor twin — edit the two together; redesign Layout 10 and isotope7 follows. */ /* ---------- Accent colour ---------- Same plumbing as layouts 12 / 13: --l10-primary is fed from --l1-primary (sc-css.php writes it from the Styling tab's "Primary Color"), and the Elementor Primary Color control writes --l10-primary directly (ElementorFilters::colorControls). Deliberately NOT chained off --rttm-primary-color, which Pro pins to #007acc on :root. carousel5 shares this card, so it is listed here too. Mirrored in _lo-layout-10.scss. */ /* The `.layout10` arm is SHORTCODE-ONLY, hence the `:where(:not(...))` guard (zero specificity, so the selector still counts 0,2,0). `.rt-team-container` and `.rt-elementor-container` sit on the SAME element, so an unguarded `.rt-team-container .layout10` also matches on the Elementor path — where `.layout10` is only carousel5's SLIDE. The Primary Color control writes --l10-primary on the ROW (`.carousel5`); re-declaring it on the slide shadows the inherited value and pins the card to the fallback blue. Layout 10's own Elementor key is `layout-el-10`, which the pro stylesheet handles. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout10, .rt-team-container .isotope7, .rt-elementor-container .isotope7, .rt-team-container .carousel5, .rt-elementor-container .carousel5 { --l10-primary: var(--l1-primary, #143ee5); --l10-primary-600: #1133c2; --l10-primary-600: color-mix(in srgb, var(--l10-primary) 82%, #000); --l10-primary-50: #eef1ff; --l10-primary-50: color-mix(in srgb, var(--l10-primary) 8%, #fff); --l10-primary-100: #dde3ff; --l10-primary-100: color-mix(in srgb, var(--l10-primary) 16%, #fff); /* Overlay wash. Kept as its own variable so the Elementor "Overlay Background Color" control (which writes background-color, not the shorthand) can override it — see the .tlp-overlay rule below, whose gradient is a neutral sheen rather than an opaque colour, so the background-color underneath stays visible. */ --l10-overlay: rgba(20, 62, 229, .82); --l10-overlay: color-mix(in srgb, var(--l10-primary) 84%, transparent); } /* Card ------------------------------------------------------------------ */ .rt-team-container .layout10 .rt-grid-item, .rt-team-container .isotope7 .rt-grid-item { display: flex; } .rt-team-container .layout10 .single-team-area, .rt-team-container .isotope7 .single-team-area { width: 100%; display: flex; flex-direction: column; } .rt-team-container .layout10 .tlp-team-item, .rt-team-container .isotope7 .tlp-team-item { display: flex; flex-direction: column; flex: 1 1 auto; background: #fff; border: 1px solid #e7eaf3; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); transition: box-shadow .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s cubic-bezier(.2, .7, .2, 1); text-align: center; margin: 0; } .rt-team-container .layout10 .single-team-area:hover .tlp-team-item, .rt-team-container .isotope7 .single-team-area:hover .tlp-team-item { box-shadow: 0 28px 70px color-mix(in srgb, var(--l10-primary, #143ee5) 20%, transparent), 0 6px 18px rgba(20, 30, 75, .06); transform: translateY(-6px); border-color: transparent; } /* Media (square portrait) ----------------------------------------------- */ .rt-team-container .layout10 .image-container, .rt-team-container .isotope7 .image-container { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; margin: 0; padding: 0; line-height: 0; background: #dfe3ee; } .rt-team-container .layout10 .image-container figure, .rt-team-container .isotope7 .image-container figure { margin: 0; height: 100%; } .rt-team-container .layout10 .image-container figure a, .rt-team-container .isotope7 .image-container figure a { display: block; height: 100%; } .rt-team-container .layout10 .image-container img, .rt-team-container .isotope7 .image-container img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%; transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout10 .single-team-area:hover .image-container img, .rt-team-container .isotope7 .single-team-area:hover .image-container img { transform: scale(1.07); filter: brightness(.85); } /* Hover overlay (over the media only) ----------------------------------- */ .rt-team-container .layout10 .tlp-overlay, .rt-team-container .isotope7 .tlp-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 24px 22px; color: #fff; /* Base colour and sheen are SEPARATE longhands on purpose: the Elementor "Overlay Background Color" control writes background-color only, so an opaque gradient here would hide it entirely. The image is a neutral light/dark wash that reads the same over any hue. The shortcode control writes the `background` shorthand and simply replaces both. */ background-color: var(--l10-overlay); background-image: linear-gradient(160deg, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .13) 100%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .35s cubic-bezier(.2, .7, .2, 1); pointer-events: none; text-align: center; } .rt-team-container .layout10 .single-team-area:hover .tlp-overlay, .rt-team-container .isotope7 .single-team-area:hover .tlp-overlay { opacity: 1; pointer-events: auto; } .rt-team-container .layout10 .tlp-overlay::before, .rt-team-container .isotope7 .tlp-overlay::before { content: ""; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, transparent 70%); pointer-events: none; } .rt-team-container .layout10 .tlp-overlay-inner, .rt-team-container .isotope7 .tlp-overlay-inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateY(14px); opacity: 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1) .1s, opacity .5s cubic-bezier(.2, .7, .2, 1) .1s; } .rt-team-container .layout10 .single-team-area:hover .tlp-overlay-inner, .rt-team-container .isotope7 .single-team-area:hover .tlp-overlay-inner { transform: translateY(0); opacity: 1; } /* Overlay name pill (fixed design element, not a control target) */ .rt-team-container .layout10 .ov-name, .rt-team-container .isotope7 .ov-name { font-size: 18px; line-height: 1.2; font-weight: 600; padding: 6px 14px; border-radius: 8px; background: rgba(15, 21, 53, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, .18); color: #fff; max-width: 100%; } /* Overlay role pill (fixed design element, not a control target) */ .rt-team-container .layout10 .ov-role, .rt-team-container .isotope7 .ov-role { font-size: 12px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; line-height: 1.6; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28); color: #fff; max-width: 100%; } /* Overlay bio (Style control targets `.short-bio p`, ties this by load order) */ /* Style the `.short-bio` wrapper itself (WP's the_content sometimes returns bare text with no

, and the wrapper otherwise inherits line-height:0 → collapses). */ .rt-team-container .layout10 .tlp-overlay .short-bio, .rt-team-container .isotope7 .tlp-overlay .short-bio { margin: 0; max-width: 92%; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .95); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rt-team-container .layout10 .short-bio p, .rt-team-container .isotope7 .short-bio p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } /* Overlay social - round chips */ .rt-team-container .layout10 .tlp-overlay .social-icons, .rt-team-container .isotope7 .tlp-overlay .social-icons { display: flex; justify-content: center; gap: 8px; margin: 4px 0 0; } .rt-team-container .layout10 .tlp-overlay .social-icons a, .rt-team-container .isotope7 .tlp-overlay .social-icons a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; font-size: 13px; transition: background .2s, color .2s, transform .2s; } :where(.rt-team-container .layout10 .tlp-overlay .social-icons a), :where(.rt-team-container .isotope7 .tlp-overlay .social-icons a) { color: #fff; } .rt-team-container .layout10 .tlp-overlay .social-icons a:hover, .rt-team-container .isotope7 .tlp-overlay .social-icons a:hover { background: #fff; color: var(--l10-primary); transform: translateY(-2px); } /* Beat the generic per-brand hover rules (`.social-icons a:hover .fa-facebook-f{color;background}`): ON HOVER keep the glyph un-boxed (no brand square) and primary-blue, like the demo. Scoped to :hover so the rest-state Social Background control still works. */ .rt-team-container .layout10 .tlp-overlay .social-icons a:hover i, .rt-team-container .isotope7 .tlp-overlay .social-icons a:hover i, .rt-team-container .layout10 .tlp-overlay .social-icons a:hover i[class*="fa"], .rt-team-container .isotope7 .tlp-overlay .social-icons a:hover i[class*="fa"] { color: var(--l10-primary) !important; background: transparent !important; } /* Resume / Hire buttons revealed inside the overlay - translucent-white pills on blue */ .rt-team-container .layout10 .tlp-overlay .ov-actions, .rt-team-container .isotope7 .tlp-overlay .ov-actions { gap: 8px; margin-top: 6px; } .rt-team-container .layout10 .tlp-overlay .rt-resume-btn, .rt-team-container .isotope7 .tlp-overlay .rt-resume-btn, .rt-team-container .layout10 .tlp-overlay .rt-hire-btn, .rt-team-container .isotope7 .tlp-overlay .rt-hire-btn { background: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .35); padding: 8px 16px; font-size: 13px; box-shadow: none; } .rt-team-container .layout10 .tlp-overlay .rt-resume-btn:hover, .rt-team-container .isotope7 .tlp-overlay .rt-resume-btn:hover, .rt-team-container .layout10 .tlp-overlay .rt-hire-btn:hover, .rt-team-container .isotope7 .tlp-overlay .rt-hire-btn:hover { background: #fff; color: var(--l10-primary); border-color: #fff; transform: translateY(-2px); } /* Footer (always visible) ----------------------------------------------- */ .rt-team-container .layout10 .tlp-content, .rt-team-container .isotope7 .tlp-content { background: transparent; padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; text-align: center; } .rt-team-container .layout10 .tlp-content .tlp-title, .rt-team-container .isotope7 .tlp-content .tlp-title { padding: 0; margin: 0; } /* Footer name - defaults at (0,2,1) so the Name control (ties, loads later) wins */ .rt-team-container .layout10 h3, .rt-team-container .isotope7 h3 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 600; color: #0f1535; } .rt-team-container .layout10 h3 a, .rt-team-container .isotope7 h3 a { color: inherit; text-decoration: none; } /* Footer role - primary colour, defaults at (0,3,0)/(0,3,1) so the control wins */ .rt-team-container .layout10 .tlp-position, .rt-team-container .isotope7 .tlp-position { margin: 0; padding: 0; font-size: 13px; font-weight: 500; letter-spacing: .2px; color: var(--l10-primary); } .rt-team-container .layout10 .tlp-position a, .rt-team-container .isotope7 .tlp-position a { color: var(--l10-primary); text-decoration: none; } .rt-team-container .layout10 .tlp-content .tlp-department, .rt-team-container .isotope7 .tlp-content .tlp-department { font-size: 12px; color: #6b7088; } /* Footer buttons -------------------------------------------------------- */ .rt-team-container .layout10 .tlp-btn-wrapper, .rt-team-container .isotope7 .tlp-btn-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; } .rt-team-container .layout10 .tlp-btn-wrapper a, .rt-team-container .isotope7 .tlp-btn-wrapper a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; border: 1px solid transparent; transition: background .2s, color .2s, box-shadow .2s, transform .2s, border-color .2s; } /* Read More = primary filled (with sliding arrow); resume/hire = soft outline. Painted at (0,3,0) to beat the generic `.readmore-btn a{background:#007acc}` (0,2,1) yet lose to the button controls (0,4,0). */ .rt-team-container .layout10 .rt-ream-me-btn, .rt-team-container .isotope7 .rt-ream-me-btn { background: var(--l10-primary); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--l10-primary, #143ee5) 25%, transparent); } .rt-team-container .layout10 .rt-ream-me-btn::after, .rt-team-container .isotope7 .rt-ream-me-btn::after { content: "\2192"; font-size: 13px; line-height: 1; display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout10 .rt-ream-me-btn:hover, .rt-team-container .isotope7 .rt-ream-me-btn:hover { background: var(--l10-primary-600); transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--l10-primary, #143ee5) 35%, transparent); } .rt-team-container .layout10 .rt-ream-me-btn:hover::after, .rt-team-container .isotope7 .rt-ream-me-btn:hover::after { transform: translateX(4px); } .rt-team-container .layout10 .rt-resume-btn, .rt-team-container .isotope7 .rt-resume-btn, .rt-team-container .layout10 .rt-hire-btn, .rt-team-container .isotope7 .rt-hire-btn { background: var(--l10-primary-50); color: var(--l10-primary); border-color: var(--l10-primary-100); } .rt-team-container .layout10 .rt-resume-btn:hover, .rt-team-container .isotope7 .rt-resume-btn:hover, .rt-team-container .layout10 .rt-hire-btn:hover, .rt-team-container .isotope7 .rt-hire-btn:hover { background: var(--l10-primary); color: #fff; transform: translateY(-2px); } /* Carousel 5 shares this card: its slides carry the `layout10` class (tlp-team-pro/templates/layouts/carousel5.php), so every rule above already reaches them. The exception is the flex-chain starter `.layout10 .rt-grid-item` — in a grid the ROW carries `.layout10` and the item is a descendant, but in a carousel the item IS the `.layout10` element. Restated as a compound selector so cards still stretch to the tallest slide. */ .rt-team-container .carousel5 .swiper-wrapper { align-items: stretch; } .rt-team-container .layout10.rt-grid-item { display: flex; flex-direction: column; height: auto; } /* Carousel 5 only: no hover LIFT. The slider viewport (.rt-carousel-holder.swiper) is overflow:hidden and sits flush with the slide, so translateY(-6px) pushes the card's top outside the clip box and it is visibly cut off. Padding the holder to make room re-anchors the absolutely-positioned nav arrows, so the lift is simply dropped here and the resting shadow is kept. Grid layout 10 has no clipping container and keeps both. Mirrored in pro's _lo-layout-10.scss for Elementor. */ .rt-team-container .carousel5 .single-team-area:hover .tlp-team-item { transform: none; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); } /* ---------- Accent colour ---------- Same plumbing as layouts 10 / 12 / 13: --l11-primary is fed from --l1-primary (sc-css.php writes it from the Styling tab's "Primary Color") and the Elementor Primary Color control writes --l11-primary directly (ElementorFilters::colorControls). `layout11` is a SHARED key, so one block serves both paths — and carousel6, whose slides carry `.layout11`. */ .rt-team-container .layout11, .rt-elementor-container .layout11 { --l11-primary: var(--l1-primary, #143ee5); --l11-primary-600: #1133c2; --l11-primary-600: color-mix(in srgb, var(--l11-primary) 82%, #000); --l11-role: #bcd0ff; --l11-role: color-mix(in srgb, var(--l11-primary) 35%, #fff); } /*********************** Start Layout 11 - "Portrait spotlight" ********************/ /* Neutralise the grid's negative row margins (the Elementor container doesn't offset them, so they cause a few px of horizontal overflow at mobile). Col padding keeps the gaps. */ .rt-team-container .rt-row.layout11 { margin-left: 0; margin-right: 0; } .rt-team-container .layout11 .rt-grid-item { display: flex; } .rt-team-container .layout11 .single-team-area { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #dfe3ee; box-shadow: 0 1px 2px rgba(20, 30, 75, .05), 0 12px 30px rgba(20, 30, 75, .10); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout11 .single-team-area:hover { transform: translateY(-6px); box-shadow: 0 30px 60px color-mix(in srgb, var(--l11-primary, #143ee5) 22%, transparent); } .rt-team-container .layout11 .single-team-area figure { margin: 0; height: 100%; } .rt-team-container .layout11 .single-team-area figure a { display: block; height: 100%; } .rt-team-container .layout11 .single-team-area img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%; transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s ease; } .rt-team-container .layout11 .single-team-area:hover img { transform: scale(1.06); filter: brightness(.72); } /* Scrim (always) + accent wash (hover) */ .rt-team-container .layout11 .single-team-area::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(8, 12, 30, .82) 100%); } .rt-team-container .layout11 .single-team-area::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(20, 62, 229, 0) 35%, rgba(14, 42, 163, .55) 100%); transition: opacity .45s ease; } .rt-team-container .layout11 .single-team-area:hover::after { opacity: 1; } /* Info block (slides up on hover) */ .rt-team-container .layout11 .single-team-area .tlp-title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 22px 24px; margin: 0; color: #fff; background: none; text-align: left; display: block; transform: translateY(calc(100% - 82px)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout11 .single-team-area:hover .tlp-title { transform: translateY(0); } /* Name - defaults low enough that the Name control wins */ .rt-team-container .layout11 h3 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 600; color: #fff; } .rt-team-container .layout11 h3 a { color: inherit; text-decoration: none; } /* Role */ .rt-team-container .layout11 .tlp-position { margin: 6px 0 0; padding: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; line-height: 1.4; color: var(--l11-role); } .rt-team-container .layout11 .tlp-position a { color: var(--l11-role); text-decoration: none; } /* Reveal (bio / social / buttons) */ .rt-team-container .layout11 .tlp-reveal { opacity: 0; transition: opacity .4s cubic-bezier(.2, .7, .2, 1) .05s; } .rt-team-container .layout11 .single-team-area:hover .tlp-reveal { opacity: 1; } .rt-team-container .layout11 .short-bio { margin: 12px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Controllable bio props low-spec (:where) so the Short Bio Style control wins */ :where(.rt-team-container .layout11 .short-bio), :where(.rt-team-container .layout11 .short-bio p) { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .9); } .rt-team-container .layout11 .short-bio p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } /* Social - round chips */ .rt-team-container .layout11 .social-icons { display: flex; gap: 8px; margin: 14px 0 0; text-align: left; opacity: 1; } .rt-team-container .layout11 .social-icons a { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); font-size: 12.5px; transition: background .2s, color .2s, transform .2s; } :where(.rt-team-container .layout11 .social-icons a) { color: #fff; } .rt-team-container .layout11 .social-icons a:hover { background: #fff; color: var(--l11-primary); transform: translateY(-2px); } .rt-team-container .layout11 .social-icons a:hover i, .rt-team-container .layout11 .social-icons a:hover i[class*="fa"] { color: var(--l11-primary) !important; background: transparent !important; } /* Buttons */ .rt-team-container .layout11 .tlp-btn-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; } .rt-team-container .layout11 .tlp-btn-wrapper a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; border: 1px solid transparent; transition: background .2s, color .2s, transform .2s, border-color .2s; } .rt-team-container .layout11 .rt-ream-me-btn { background: #fff; color: var(--l11-primary); } .rt-team-container .layout11 .rt-ream-me-btn::after { content: "\2192"; font-size: 12px; display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout11 .rt-ream-me-btn:hover { background: var(--l11-primary); color: #fff; } .rt-team-container .layout11 .rt-ream-me-btn:hover::after { transform: translateX(3px); } .rt-team-container .layout11 .rt-resume-btn, .rt-team-container .layout11 .rt-hire-btn { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .3); } .rt-team-container .layout11 .rt-resume-btn:hover, .rt-team-container .layout11 .rt-hire-btn:hover { background: #fff; color: var(--l11-primary); border-color: #fff; } /* Carousel 6 shares this card: its slides carry the `layout11` class (tlp-team-pro/templates/layouts/carousel6.php), so every rule above already reaches them. The exception is the flex-chain starter `.layout11 .rt-grid-item` — in a grid the ROW carries `.layout11` and the item is a descendant, but in a carousel the item IS the `.layout11` element. Restated as a compound selector so the card still fills the slide. */ .rt-team-container .carousel6 .swiper-wrapper { align-items: stretch; } .rt-team-container .layout11.rt-grid-item { display: flex; flex-direction: column; height: auto; } /* Carousel 6 only: no hover LIFT. The slider viewport (.rt-carousel-holder.swiper) is overflow:hidden and sits flush with the slide, so translateY(-6px) pushes the card's top outside the clip box and it is visibly cut off. Padding the holder to make room re-anchors the absolutely-positioned nav arrows, so the lift is dropped and the resting shadow is kept. Grid layout 11 has no clipping container and keeps both. Mirrored in pro's _lo-layout-11.scss for the Elementor path. */ .rt-team-container .carousel6 .single-team-area:hover { transform: none; box-shadow: 0 1px 2px rgba(20, 30, 75, .05), 0 12px 30px rgba(20, 30, 75, .10); } /*********************** Layout 12 - "Flip card" ************************/ /* ---------- Accent colour ---------- Every accent in this layout reads --l12-primary, so ONE control repaints the whole card. It is fed from --l1-primary, which sc-css.php writes on the shortcode container from the Styling tab's "Primary Color". The Elementor path writes --l12-primary directly from its own Primary Color control (ElementorFilters::colorControls), which is why this chain deliberately does NOT read --rttm-primary-color: Pro's stylesheet sets `:root{--rttm-primary-color:#007acc}` and BOTH stylesheets load on every page, so chaining off it would turn the default card teal. The identical declaration is mirrored in _lo-layout-12.scss, so it does not matter which sheet wins the tie. */ .rt-team-container .layout12, .rt-elementor-container .layout12 { --l12-primary: var(--l1-primary, #143ee5); --l12-primary-700: #0e2aa3; --l12-primary-700: color-mix(in srgb, var(--l12-primary) 68%, #000); --l12-glow: rgba(20, 62, 229, .35); --l12-glow: color-mix(in srgb, var(--l12-primary) 35%, transparent); } /* Neutralise the grid's negative row margins (they cause a few px of horizontal overflow at mobile). Column padding still supplies the gaps. */ .rt-team-container .rt-row.layout12 { margin-left: 0; margin-right: 0; } .rt-team-container .layout12 .rt-grid-item { display: flex; } .rt-team-container .layout12 .single-team-area { position: relative; width: 100%; margin: 0; height: auto; overflow: visible; text-align: center; perspective: 1400px; } /* The rotating element. Both faces sit in the same 1x1 grid cell, so the card height is content-driven: max(3:4 portrait, whatever the back needs). */ .rt-team-container .layout12 .rt-l12-flip { position: relative; display: grid; width: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout12 .single-team-area:hover .rt-l12-flip, .rt-team-container .layout12 .single-team-area:focus-within .rt-l12-flip { transform: rotateY(180deg); } .rt-team-container .layout12 .rt-l12-face { grid-area: 1 / 1; position: relative; overflow: hidden; border-radius: 18px; background: #dfe3ee; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 1px 2px rgba(20, 30, 75, .05), 0 14px 34px rgba(20, 30, 75, .14); } /* ---------- Front ---------- */ .rt-team-container .layout12 .rt-l12-front { display: flex; flex-direction: column; } .rt-team-container .layout12 .rt-l12-front figure { margin: 0; flex: 1 1 auto; min-height: 0; aspect-ratio: 3 / 4; } .rt-team-container .layout12 .rt-l12-front figure a { display: block; width: 100%; height: 100%; } .rt-team-container .layout12 .rt-l12-front img { position: relative; width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; } .rt-team-container .layout12 .rt-l12-front::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(8, 12, 30, .35) 100%); } /* Flip affordance */ .rt-team-container .layout12 .rt-l12-hint { position: absolute; top: 14px; right: 14px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .9); color: var(--l12-primary); font-size: 11px; line-height: 1; box-shadow: 0 4px 12px rgba(20, 30, 75, .2); } .rt-team-container .layout12 .rt-l12-hint::before { content: "\f2f1"; font-family: "Font Awesome 6 Free"; font-weight: 900; } /* Solid name box. THREE independent background layers, outermost first: 1. `.rt-l12-namebox` -> Primary Color (the solid accent box) 2. `h3` / `.tlp-position` -> "Background Color" controls (row band) 3. `.team-name` / `span` -> "Inner Background Color" controls (text chip) 2 and 3 are transparent by default so the box colour shows through; setting either control paints a visible layer on top of the box. */ .rt-team-container .layout12 .rt-l12-namebox { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; border-radius: 10px; overflow: hidden; text-align: center; background: var(--l12-primary); box-shadow: 0 10px 24px var(--l12-glow); } /* `.rt-team-container h3` sets margin/padding with !important, hence the !important here. The Elementor Name Padding / Margin controls are !important too and carry a higher specificity, so they still win. */ .rt-team-container .layout12 .rt-l12-namebox h3 { margin: 0 !important; padding: 0 !important; line-height: 1.2; overflow: hidden; } .rt-team-container .layout12 .rt-l12-namebox h3 .team-name { display: block; padding: 11px 14px 0; } .rt-team-container .layout12 .rt-l12-namebox .tlp-position { margin: 0; padding: 0; } /* No font-size / weight / transform here — they live in the low-specificity block at the end of this file so the Name / Designation size + weight controls can win. */ .rt-team-container .layout12 .rt-l12-namebox .tlp-position span { display: block; padding: 3px 14px 11px; } /* Transparent by default so the box's Primary Color shows through — the two "Inner Background Color" controls paint these. :where() keeps them at zero specificity. */ :where(.rt-team-container .layout12 .rt-l12-namebox h3 .team-name), :where(.rt-team-container .layout12 .rt-l12-namebox .tlp-position span) { background: transparent; } /* ---------- Back ---------- */ .rt-team-container .layout12 .rt-l12-back { transform: rotateY(180deg); color: #fff; background-color: var(--l12-primary); background-image: linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(0, 0, 0, .28) 100%); } .rt-team-container .layout12 .rt-l12-back::before { content: ""; position: absolute; top: -40px; right: -40px; width: 150px; height: 150px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%); } .rt-team-container .layout12 .rt-l12-back .tlp-overlay-inner { position: relative; z-index: 1; height: 100%; padding: 26px 22px; display: flex; align-items: center; justify-content: center; } .rt-team-container .layout12 .rt-l12-back .tlp-inner { width: 100%; } /* No chip on the back - the accent panel already carries the colour. */ .rt-team-container .layout12 .rt-l12-back h3 { margin: 0 !important; padding: 0 !important; line-height: 1.25; overflow: visible; } .rt-team-container .layout12 .rt-l12-back h3 .team-name { display: inline; padding: 0; background: none !important; } .rt-team-container .layout12 .rt-l12-back .tlp-position { margin: 7px 0 0; padding: 0; } .rt-team-container .layout12 .rt-l12-back .tlp-position span { display: inline; padding: 0; background: none !important; } /* Layout 12 text colours live at the very END of this file — see the note there. (`.rt-team-container .tlp-position { color: initial }` at line ~6034 would otherwise beat them on source order.) */ .rt-team-container .layout12 .rt-l12-divider { display: block; width: 34px; height: 2px; margin: 14px auto 0; border-radius: 2px; background: rgba(255, 255, 255, .55); } .rt-team-container .layout12 .rt-l12-back .short-bio { margin: 14px 0 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } :where(.rt-team-container .layout12 .rt-l12-back .short-bio) { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .92); } /* `inherit`, not literal values: the Elementor Short Biography controls only target the `.short-bio` wrapper, so the

has to follow it. The shortcode controls target `.short-bio p` directly and beat this zero-specificity rule. */ :where(.rt-team-container .layout12 .rt-l12-back .short-bio p) { font-size: inherit; line-height: inherit; color: inherit; } /* Only structural props — the Short Bio control writes to `.short-bio p`, so font and colour defaults for the

live in the :where() rule above. */ .rt-team-container .layout12 .rt-l12-back .short-bio p { margin: 0; padding: 0; } /* Social - round chips */ .rt-team-container .layout12 .rt-l12-back .social-icons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 0; padding: 0; opacity: 1; visibility: visible; text-align: center; transform: none; } .rt-team-container .layout12 .rt-l12-back .social-icons a { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32); font-size: 12.5px; line-height: 1; text-decoration: none; transition: background .2s, color .2s, transform .2s, border-color .2s; } /* Normal specificity — it has to beat the generic `.social-icons a { color: primary }` rules. The Social Icon Color control writes `color: … !important`, so it still wins. */ .rt-team-container .layout12 .rt-l12-back .social-icons a { color: #fff; } .rt-team-container .layout12 .rt-l12-back .social-icons a i { color: inherit; background: transparent; } .rt-team-container .layout12 .rt-l12-back .social-icons a:hover { background: #fff; color: var(--l12-primary); border-color: #fff; transform: translateY(-2px); } .rt-team-container .layout12 .rt-l12-back .social-icons a:hover i, .rt-team-container .layout12 .rt-l12-back .social-icons a:hover i[class*="fa"] { color: var(--l12-primary) !important; background: transparent !important; } /* Buttons */ .rt-team-container .layout12 .rt-l12-back .tlp-btn-wrapper { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 0; opacity: 1; visibility: visible; } .rt-team-container .layout12 .rt-l12-back .tlp-btn-wrapper a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; border: 1px solid transparent; transition: background .2s, color .2s, transform .2s, border-color .2s; } .rt-team-container .layout12 .rt-l12-back .rt-ream-me-btn { background: #fff; color: var(--l12-primary); } .rt-team-container .layout12 .rt-l12-back .rt-ream-me-btn::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout12 .rt-l12-back .rt-ream-me-btn:hover { background: var(--l12-primary-700); color: #fff; } .rt-team-container .layout12 .rt-l12-back .rt-ream-me-btn:hover::after { transform: translateX(3px); } .rt-team-container .layout12 .rt-l12-back .rt-resume-btn, .rt-team-container .layout12 .rt-l12-back .rt-hire-btn { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .32); } .rt-team-container .layout12 .rt-l12-back .rt-resume-btn:hover, .rt-team-container .layout12 .rt-l12-back .rt-hire-btn:hover { background: #fff; color: var(--l12-primary); border-color: #fff; } /* Round-image option - soften the card instead of clipping the portrait to a circle. */ .rt-team-container .layout12 .round-img .rt-l12-face { border-radius: 26px; } .rt-team-container .layout10 .tlp-team-item .tlp-info { overflow: hidden; } .rt-team-container .layout10 .tlp-team-item .tlp-info h3 { margin-top: 10px; } /*********************** Layout 13 - "Team card" ************************/ /* isotope8 shares this card and has no CSS of its own — every selector below covers both. Keep _lo-layout-13.scss (the Elementor twin) in step. */ /* ---------- Accent colour ---------- Same plumbing as layout 12: --l13-primary is fed from --l1-primary (sc-css.php writes it from the Styling tab's "Primary Color"), and the Elementor Primary Color control writes --l13-primary directly (ElementorFilters::colorControls). Deliberately NOT chained off --rttm-primary-color, which Pro pins to #007acc on :root. Mirrored verbatim in _lo-layout-13.scss so the specificity tie is harmless. */ .rt-team-container .layout13, .rt-elementor-container .layout13, .rt-team-container .isotope8, .rt-elementor-container .isotope8 { --l13-primary: var(--l1-primary, #143ee5); --l13-primary-600: #1133c2; --l13-primary-600: color-mix(in srgb, var(--l13-primary) 82%, #000); --l13-primary-50: #eef1ff; --l13-primary-50: color-mix(in srgb, var(--l13-primary) 8%, #fff); --l13-line: #e7eaf3; --l13-ink: #0f1535; --l13-ink-2: #3a3f5c; --l13-muted: #6b7088; } /* Neutralise the grid's negative row margins; column padding supplies the gaps. */ .rt-team-container .rt-row.layout13, .rt-team-container .rt-row.isotope8 { margin-left: 0; margin-right: 0; } .rt-team-container .layout13 .rt-grid-item, .rt-team-container .isotope8 .rt-grid-item { display: flex; } /* ---------- Card ---------- */ .rt-team-container .layout13 .single-team-area, .rt-team-container .isotope8 .single-team-area { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; overflow: hidden; text-align: left; line-height: 1.6; background: #fff; border: 1px solid var(--l13-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s cubic-bezier(.2, .7, .2, 1), border-color .35s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout13 .single-team-area:hover, .rt-team-container .isotope8 .single-team-area:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 28px 70px color-mix(in srgb, var(--l13-primary, #143ee5) 18%, transparent), 0 6px 18px rgba(20, 30, 75, .06); } .rt-team-container .layout13 .single-team-area:hover:after, .rt-team-container .isotope8 .single-team-area:hover:after { content: initial; } /* ---------- Media ---------- */ /* No fixed ratio and no object-fit: the image keeps its natural proportions, so the shortcode's own "Image Size" setting decides the crop. The media box just sizes to the image and gives the social strip something to anchor to. */ .rt-team-container .layout13 .rt-l13-media, .rt-team-container .isotope8 .rt-l13-media { position: relative; overflow: hidden; background: #dfe3ee; line-height: 0; } .rt-team-container .layout13 .rt-l13-media figure, .rt-team-container .isotope8 .rt-l13-media figure { margin: 0; } .rt-team-container .layout13 .rt-l13-media figure a, .rt-team-container .isotope8 .rt-l13-media figure a { display: block; } .rt-team-container .layout13 .rt-l13-media img, .rt-team-container .isotope8 .rt-l13-media img { width: 100%; max-width: 100%; height: auto; display: block; transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout13 .single-team-area:hover .rt-l13-media img, .rt-team-container .isotope8 .single-team-area:hover .rt-l13-media img { transform: scale(1.06); } /* Social strip - slides up over the photo on hover */ .rt-team-container .layout13 .rt-l13-media .social-icons, .rt-team-container .isotope8 .rt-l13-media .social-icons { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 14px; display: flex; /* wrap, don't squash: once the Social Width/Height controls make the chips too wide for the strip, flex would shrink them and a 50% radius would render as ovals. */ flex-wrap: wrap; justify-content: center; gap: 8px; opacity: 1; visibility: visible; background: linear-gradient(to top, rgba(15, 21, 53, .6), transparent); transform: translateY(110%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout13 .single-team-area:hover .rt-l13-media .social-icons, .rt-team-container .isotope8 .single-team-area:hover .rt-l13-media .social-icons { transform: translateY(0); } /* min-* not fixed width/height: the Social Icon Width / Height controls size the inner , so a hard-sized chip would shrink the icon back down and make those controls look broken. The chip now grows with its icon and 34px is just the floor. */ .rt-team-container .layout13 .rt-l13-media .social-icons a, .rt-team-container .isotope8 .rt-l13-media .social-icons a { min-width: 34px; min-height: 34px; /* max-content on BOTH axes, not auto: as a flex item the chip's base size ignores the icon's explicit width, and `align-self: stretch` would pin its height to the row — so it would stay 34px however large the Width / Height controls are set. */ width: -webkit-max-content; width: max-content; height: -webkit-max-content; height: max-content; align-self: center; flex: 0 0 auto; border-radius: 50%; /* Elementor's Social Background Color also paints the inner , which is a square. Clipping to the chip means that square can never poke out of the circle, whatever the Border Radius control is set to. Cheaper and far more robust than fighting the control's specificity with !important. */ overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .96); font-size: 12.5px; line-height: 1; text-decoration: none; transition: background .2s, color .2s, transform .2s; } .rt-team-container .layout13 .rt-l13-media .social-icons a i, .rt-team-container .isotope8 .rt-l13-media .social-icons a i { flex: 0 0 auto; } .rt-team-container .layout13 .rt-l13-media .social-icons a, .rt-team-container .isotope8 .rt-l13-media .social-icons a { color: var(--l13-primary); } /* The chip () is the visible shape, so the Social Border control must draw on it and NOT on the glyph box too — otherwise you get a ring inside a ring. The control's first selector is unscoped (`.rt-elementor-container .social-icons a i`, no {{WRAPPER}}), so a plain 0,4,2 rule is enough to clear it here; no !important needed. */ .rt-team-container .layout13 .rt-l13-media .social-icons a i, .rt-team-container .isotope8 .rt-l13-media .social-icons a i { color: inherit; background: transparent; border: 0; } .rt-team-container .layout13 .rt-l13-media .social-icons a:hover, .rt-team-container .isotope8 .rt-l13-media .social-icons a:hover { background: var(--l13-primary); color: #fff; transform: translateY(-2px); } .rt-team-container .layout13 .rt-l13-media .social-icons a:hover i, .rt-team-container .isotope8 .rt-l13-media .social-icons a:hover i { color: #fff !important; background: transparent !important; } /* ---------- Body (`.tlp-overlay` = Overlay Background + Content Padding hooks) ---------- */ .rt-team-container .layout13 .tlp-overlay, .rt-team-container .isotope8 .tlp-overlay { position: static; width: auto; left: auto; bottom: auto; z-index: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; text-align: left; background: #fff; } .rt-team-container .layout13 .tlp-overlay h3, .rt-team-container .isotope8 .tlp-overlay h3 { margin: 0 !important; padding: 0 !important; line-height: 1.25; letter-spacing: -.2px; } .rt-team-container .layout13 .tlp-overlay h3 .team-name, .rt-team-container .isotope8 .tlp-overlay h3 .team-name { background: none; padding: 0; } /* The role pill IS `.tlp-position`, so the Designation Background Color control paints it. */ .rt-team-container .layout13 .tlp-overlay .tlp-position, .rt-team-container .isotope8 .tlp-overlay .tlp-position { align-self: flex-start; max-width: 100%; margin: -8px 0 0; padding: 4px 11px; border-radius: 999px; line-height: 1.5; } .rt-team-container .layout13 .tlp-overlay .tlp-position span, .rt-team-container .isotope8 .tlp-overlay .tlp-position span { background: none; padding: 0; } .rt-team-container .layout13 .tlp-overlay .short-bio, .rt-team-container .isotope8 .tlp-overlay .short-bio { margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rt-team-container .layout13 .tlp-overlay .short-bio p, .rt-team-container .isotope8 .tlp-overlay .short-bio p { margin: 0; padding: 0; } /* ---------- Buttons: Read More full width, Resume + Hire on row 2 ---------- */ .rt-team-container .layout13 .tlp-btn-wrapper, .rt-team-container .isotope8 .tlp-btn-wrapper { margin-top: auto; padding-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; opacity: 1; visibility: visible; } .rt-team-container .layout13 .tlp-btn-wrapper a, .rt-team-container .isotope8 .tlp-btn-wrapper a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 10px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; } .rt-team-container .layout13 .tlp-btn-wrapper .rt-ream-me-btn, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-ream-me-btn { grid-column: 1 / -1; background: var(--l13-primary); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--l13-primary, #143ee5) 25%, transparent); } .rt-team-container .layout13 .tlp-btn-wrapper .rt-ream-me-btn::after, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-ream-me-btn::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout13 .tlp-btn-wrapper .rt-ream-me-btn:hover, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-ream-me-btn:hover { background: var(--l13-primary-600); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--l13-primary, #143ee5) 35%, transparent); } .rt-team-container .layout13 .tlp-btn-wrapper .rt-ream-me-btn:hover::after, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-ream-me-btn:hover::after { transform: translateX(3px); } .rt-team-container .layout13 .tlp-btn-wrapper .rt-resume-btn, .rt-team-container .layout13 .tlp-btn-wrapper .rt-hire-btn, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-resume-btn, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-hire-btn { background: #fff; color: var(--l13-ink-2); border-color: var(--l13-line); } .rt-team-container .layout13 .tlp-btn-wrapper .rt-resume-btn::before, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-resume-btn::before { content: "\f15c"; } .rt-team-container .layout13 .tlp-btn-wrapper .rt-hire-btn::before, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-hire-btn::before { content: "\f0e0"; } .rt-team-container .layout13 .tlp-btn-wrapper .rt-resume-btn::before, .rt-team-container .layout13 .tlp-btn-wrapper .rt-hire-btn::before, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-resume-btn::before, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-hire-btn::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; display: inline-block; } .rt-team-container .layout13 .tlp-btn-wrapper .rt-resume-btn:hover, .rt-team-container .layout13 .tlp-btn-wrapper .rt-hire-btn:hover, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-resume-btn:hover, .rt-team-container .isotope8 .tlp-btn-wrapper .rt-hire-btn:hover { background: var(--l13-primary-50); color: var(--l13-primary); border-color: var(--l13-primary); } /*********************** Isotope 1 — "Iris reveal" *****************************/ /* isotope1 has no grid twin and no `isotope-el-1`, so ONE key serves both paths and these rules are its own. Keep _lo-isotope-1.scss (the Elementor twin) in step. Paint and type live in the "paintable defaults (LAST)" block at the end of this file so every Styling control out-ranks them. The card is drawn on `figure`, NOT on `.team-member`: Isotope positions each item with an inline `transform: translate3d(...)`, so a hover transform on the item would either be ignored or fight the layout animation. `figure` is untouched by Isotope. */ /* ---------- Accent colour ---------- --iso1-primary is fed from --l1-primary (sc-css.php writes it from the Styling tab's "Primary Color"); the Elementor Primary Color control writes --iso1-primary directly. */ .rt-team-container .isotope1, .rt-elementor-container .isotope1 { --iso1-primary: var(--l1-primary, #143ee5); --iso1-primary-700: #0e2aa3; --iso1-primary-700: color-mix(in srgb, var(--iso1-primary) 72%, #000); --iso1-line: #e7eaf3; } .rt-team-container .isotope1 .team-member { position: relative; overflow: visible; } .rt-team-container .isotope1 .team-member figure { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 18px; background: #dfe3ee; border: 1px solid var(--iso1-line); box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); /* Chrome drops a rounded overflow clip when the element is transformed unless it is promoted — without this the corners flash square during the hover lift. */ will-change: transform; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s cubic-bezier(.2, .7, .2, 1), border-color .45s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .team-member:hover figure { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(15, 21, 53, .18); border-color: transparent; } .rt-team-container .isotope1 .team-member figure > a { display: block; height: 100%; } .rt-team-container .isotope1 .team-member figure img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center 18%; display: block; filter: grayscale(.25); transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .team-member:hover figure img { transform: scale(1.06); filter: none; } /* "Image flip on hover" wraps the photo in .rt-flip-container > .rt-flip-inner > .rt-flip-front > img, and pro's _cp-flip.scss leaves the front face auto-height — inside this fixed 3:4 frame that left the image at its natural height with the frame's background showing beneath it. Same fix carousel10 needed. (The flip itself plays behind the iris overlay on this layout, so it is invisible either way — but the REST state must be right.) */ .rt-team-container .isotope1 .team-member figure .rt-flip-container, .rt-team-container .isotope1 .team-member figure .rt-flip-inner, .rt-team-container .isotope1 .team-member figure .rt-flip-front { height: 100%; } .rt-team-container .isotope1 .team-member figure .rt-flip-front img, .rt-team-container .isotope1 .team-member figure .rt-flip-back img { height: 100%; object-fit: cover; } /* scrim behind the resting plate */ .rt-team-container .isotope1 .team-member figure::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(9, 17, 60, .82), rgba(9, 17, 60, .35) 45%, transparent); transition: opacity .45s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .team-member:hover figure::before { opacity: 0; } /* the badge the iris opens from */ .rt-team-container .isotope1 .team-member figure::after { content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 13px; position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; z-index: 3; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--iso1-primary), var(--iso1-primary-700)); box-shadow: 0 10px 22px color-mix(in srgb, var(--iso1-primary, #143ee5) 34%, transparent); box-shadow: 0 10px 22px color-mix(in srgb, var(--iso1-primary) 34%, transparent); transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .team-member:hover figure::after { transform: rotate(135deg) scale(.85); opacity: 0; } /* ---------- Resting name plate ---------- */ .rt-team-container .isotope1 .team-member .rest-plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 18px 20px; text-align: center; transition: opacity .35s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .team-member:hover .rest-plate { opacity: 0; transform: translateY(10px); } .rt-team-container .isotope1 .rest-plate h3 { margin: 0; padding: 0; } .rt-team-container .isotope1 .rest-plate .tlp-position { margin: 3px 0 0; } /* ---------- The overlay: a circular iris opening from the badge ---------- */ .rt-team-container .isotope1 .team-member .overlay { position: absolute; inset: 0; z-index: 2; height: 100%; width: 100%; padding: 22px; text-align: center; /* Base colour and sheen are SEPARATE longhands on purpose: the Overlay Background Color control writes background-color only, so an opaque gradient here would swallow it. The sheen is a neutral wash that reads correctly over any hue. */ background-color: rgba(20, 62, 229, .93); background-color: color-mix(in srgb, var(--iso1-primary) 93%, transparent); background-image: linear-gradient(150deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .18)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-clip-path: circle(0% at calc(100% - 38px) 38px); clip-path: circle(0% at calc(100% - 38px) 38px); transition: -webkit-clip-path .55s cubic-bezier(.2, .7, .2, 1), clip-path .55s cubic-bezier(.2, .7, .2, 1); display: flex; align-items: center; justify-content: center; } .rt-team-container .isotope1 .team-member:hover .overlay { -webkit-clip-path: circle(142% at calc(100% - 38px) 38px); clip-path: circle(142% at calc(100% - 38px) 38px); } .rt-team-container .isotope1 .team-member .overlay .overlay-element { width: 100%; } /* contents ride in behind the iris */ .rt-team-container .isotope1 .team-member .overlay .overlay-element > * { opacity: 0; transform: translateY(14px); transition: opacity .4s cubic-bezier(.2, .7, .2, 1), transform .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .team-member:hover .overlay .overlay-element > * { opacity: 1; transform: none; } .rt-team-container .isotope1 .team-member:hover .overlay-element > *:nth-child(1) { transition-delay: .16s; } .rt-team-container .isotope1 .team-member:hover .overlay-element > *:nth-child(2) { transition-delay: .21s; } .rt-team-container .isotope1 .team-member:hover .overlay-element > *:nth-child(3) { transition-delay: .26s; } .rt-team-container .isotope1 .team-member:hover .overlay-element > *:nth-child(4) { transition-delay: .31s; } .rt-team-container .isotope1 .team-member:hover .overlay-element > *:nth-child(5) { transition-delay: .36s; } .rt-team-container .isotope1 .team-member:hover .overlay-element > *:nth-child(6) { transition-delay: .41s; } /* ---------- Overlay content ---------- */ .rt-team-container .isotope1 .team-member .overlay h3 { margin: 0; padding: 0; } .rt-team-container .isotope1 .team-member .overlay .tlp-position { position: relative; margin: 7px 0 0; } .rt-team-container .isotope1 .team-member .overlay .tlp-position::after { content: ""; display: block; width: 30px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .42); margin: 12px auto 0; } .rt-team-container .isotope1 .overlay .short-bio { margin: 12px 0 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rt-team-container .isotope1 .overlay .short-bio p { margin: 0; } .rt-team-container .isotope1 .social-icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; } .rt-team-container .isotope1 .social-icons a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); margin: 0; transition: background .25s cubic-bezier(.2, .7, .2, 1), color .25s cubic-bezier(.2, .7, .2, 1), transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .social-icons a:hover { transform: translateY(-3px); } .rt-team-container .isotope1 .social-icons a i { color: inherit; width: auto; height: auto; line-height: 1; } /* !important is required, not decoration: the plugin's per-network brand rules paint the GLYPH's background on hover with !important (`.social-icons a:hover .fa-linkedin { background: #0080b1 !important }` and ~20 siblings), which renders as a coloured square inside the round chip. On this card the chip is the , so the glyph box stays blank. */ .rt-team-container .isotope1 .social-icons a i, .rt-team-container .isotope1 .social-icons a:hover i { background: transparent !important; background-color: transparent !important; /* the same brand rules also force `color: #fff !important`, which left the glyph invisible on the white hover chip. `inherit` follows the anchor, so the Social Color / Hover Color controls (which paint the anchor, and carry !important at a higher specificity) win. */ color: inherit !important; /* …and they also set `width/height: 30px` on the GLYPH. `a:hover .fa-facebook-f` is (0,4,1) — the pseudo-class counts in the class column — so it out-ranks a plain glyph rule and the character was rendering at the TOP of a 30px box (line-height stays 13px), i.e. the icon jumped upward inside the chip the moment you hovered it. */ width: auto !important; height: auto !important; } /* This template emits `.readmore-btn` (Resume + Hire Me) FIRST and `.readmore-btn.hirme-resume` (Read More) second — the reverse of most layouts. */ .rt-team-container .isotope1 .readmore-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } .rt-team-container .isotope1 .readmore-btn.hirme-resume { display: block; margin-top: 8px; } .rt-team-container .isotope1 .readmore-btn .rt-resume-btn, .rt-team-container .isotope1 .readmore-btn .rt-hire-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .34); white-space: nowrap; transition: background .25s cubic-bezier(.2, .7, .2, 1), border-color .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .readmore-btn .rt-ream-me-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 14px; /* a declared border-style so the Read More Border Width / Color controls have something to paint — `border-width` computes to 0 while the style is `none`. */ border: 0 solid transparent; border-radius: 9px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .readmore-btn .rt-ream-me-btn::after { content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .isotope1 .readmore-btn .rt-ream-me-btn:hover::after { transform: translateX(3px); } @media (max-width: 560px) { .rt-team-container .isotope1 .readmore-btn { grid-template-columns: 1fr; } } /*********************** End Isotope 1 *****************************************/ /* isotope3's four stray rules used to live here (button-wrapper reveal, white role link, the absolutely-centred `.overlay-element`). They moved into the Isotope 3 block further down with the redesign, so the layout is defined in one place. */ /* The old isotope1 reveal (`transform: scale(.5)` + `opacity: 0` on the overlay, scaling to 1 on hover) is gone — the redesign opens the same overlay as a clip-path iris instead. The `.detile-popup` arm went with it; that element is not emitted by this template. */ /* NOTE: the old `.isotope1 .button-group` filter-bar rules (black pills, #26aae1 active, font-weight:400 !important) were removed — the global `.ttp-isotope-buttons` nav style (pill group + glider + counts, further down this file) now styles the filter bar for EVERY isotope layout uniformly. Their high specificity + !important would otherwise beat it. */ /*********************** End Isotope 1 ********************/ /*********************** Start Isotope 2 — "Dossier" card redesign ********************/ /* Isotope 2 is a SHARED key: there is no `isotope-el-2.php`, so this one template serves both the shortcode and the Elementor path. The Elementor twin of this block lives in tlp-team-pro/src/scss/frontend/layouts/_lo-isotope-2.scss — keep the two in step. Removed with the redesign, all three of which were DEAD: - `.isotope2 .tlp-content` — the template emits `.tlp-content11`, not `.tlp-content`. - `.isotope2 .team-item` — the item is `.team-member`. - the `h3 { padding-top: 10px !important }` / `.social-icons a { color:#1e73be }` pair, which were the only rules doing anything and are superseded below. SPECIFICITY BUDGET (this is the whole game — see the notes on Layout 12 / special01): the shortcode Styling controls are generated into uploads/tlp-team/team-sc.css, which is enqueued AFTER this file, so an EQUAL-specificity rule there wins on source order. Every declaration below that a control can also set is therefore pinned at or below the control's specificity, where `$selector` = `.rt-team-container.rt-team-container-{ID}` (0,2,0): Name `$selector h3` / `h3 a` (0,2,1) -> ours (0,2,1) Designation `$selector .tlp-position` (0,3,0) -> ours (0,3,0) Short bio `$selector .short-bio p` (0,3,1) -> ours (0,3,1) Contact `$selector .tlp-email` etc. (0,3,0) -> ours colours the WRAPPER Social `$selector .social-icons a` (0,3,1) -> ours (0,3,1) Skill fill `$selector .skill-prog .fill` (0,4,0) -> ours (0,4,0) Buttons `$selector .readmore-btn .rt-*-btn` (0,4,0) -> ours (0,3,1), control wins */ .rt-team-container .isotope2 { /* Its OWN variable, like every other redesigned layout — NOT `--l1-primary` (that is only ever written on the shortcode path, so borrowing it made Primary Color work here and do nothing at all under Elementor) and NOT `--rttm-primary-color` (pro's stylesheet declares `:root{--rttm-primary-color:#007acc}`, so chaining off it would default the card to teal). Written by templates/sc-css.php, Fns::layoutStyleGenerator() and pro's ElementorFilters::colorControls() — all three must carry an `.isotope2` arm or the control is silently dead on that path. Everything accented on this card derives from it. */ --iso2-accent: var(--iso2-primary, #143ee5); --iso2-accent-700: color-mix(in srgb, var(--iso2-accent) 68%, #000); --iso2-accent-50: color-mix(in srgb, var(--iso2-accent) 7%, #fff); --iso2-accent-100: color-mix(in srgb, var(--iso2-accent) 14%, #fff); --iso2-ink: #141833; --iso2-ink-2: #5b6180; --iso2-line: #e7eaf3; --iso2-ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- the card surface ---------- */ /* `.team-member` is the grid COLUMN (it carries .rt-col-* and their 15px gutters), so the card has to be the inner `.rt-iso2-card` or the border would sit on the gutter edge. */ .rt-team-container .isotope2 .team-member { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; } .rt-team-container .isotope2 .rt-iso2-card { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #fff; border: 1px solid var(--iso2-line); border-radius: 20px; padding: 14px 14px 18px; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 10px 26px rgba(20, 30, 75, .05); -webkit-transition: -webkit-transform .4s var(--iso2-ease), box-shadow .4s var(--iso2-ease), border-color .4s var(--iso2-ease); transition: transform .4s var(--iso2-ease), box-shadow .4s var(--iso2-ease), border-color .4s var(--iso2-ease); } .rt-team-container .isotope2 .team-member:hover .rt-iso2-card { -webkit-transform: translateY(-6px); transform: translateY(-6px); border-color: color-mix(in srgb, var(--iso2-accent) 26%, #fff); box-shadow: 0 1px 2px rgba(20, 30, 75, .05), 0 24px 48px rgba(20, 30, 75, .13); } /* ---------- portrait + the signature corner bracket ---------- */ .rt-team-container .isotope2 figure { position: relative; margin: 0; border-radius: 15px; overflow: hidden; background: #eef0f7; } /* The gap under the photo is a margin on the NEXT block, not margin-bottom on the figure: Elementor ships `.elementor .elementor-widget:not(…):not(…) figure{margin:0}` at (0,4,1), which beats anything sensible we can write here, so a figure margin is silently dropped on the Elementor path and the two paths disagree. The adjacent-sibling form also self-cancels when the member has no image — no figure, no gap. */ .rt-team-container .isotope2 figure + .tlp-content11 { margin-top: 24px; } .rt-team-container .isotope2 figure a { display: block; line-height: 0; } /* No aspect-ratio and no object-fit on purpose: the photo keeps its own proportions and is never cropped, so the frame height follows whatever image size the shortcode is set to. */ .rt-team-container .isotope2 figure img { width: 100%; height: auto; display: block; -webkit-transition: -webkit-transform .7s var(--iso2-ease); transition: transform .7s var(--iso2-ease); } .rt-team-container .isotope2 .team-member:hover figure img { -webkit-transform: scale(1.06); transform: scale(1.06); } /* z-index keeps the bracket above the flip container, which opens a 3D context */ .rt-team-container .isotope2 figure:after { content: ""; position: absolute; z-index: 2; left: 11px; top: 11px; width: 34px; height: 34px; border-left: 3px solid #fff; border-top: 3px solid #fff; border-radius: 8px 0 0 0; opacity: .9; pointer-events: none; -webkit-transition: width .45s var(--iso2-ease), height .45s var(--iso2-ease), opacity .45s var(--iso2-ease); transition: width .45s var(--iso2-ease), height .45s var(--iso2-ease), opacity .45s var(--iso2-ease); } .rt-team-container .isotope2 .team-member:hover figure:after { width: calc(100% - 22px); height: calc(100% - 22px); opacity: .75; } /* Image flip: the shared feature CSS un-clips the figure (`figure:has(.rt-flip-container){overflow:visible}`), which would square off the rounded frame and let the back face escape it. Re-clip it. Nothing else is needed here — the flip's own CSS is already content-height driven, which is exactly what this frame is now that the photo runs at its natural proportions. */ .rt-team-container .isotope2 figure:has(.rt-flip-container) { overflow: hidden; } /* ---------- name / role / bio ---------- */ .rt-team-container .isotope2 .tlp-content11 { padding: 0 4px; } .rt-team-container .isotope2 h3 { margin: 0 0 5px; padding: 0; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; } .rt-team-container .isotope2 h3 a, .rt-team-container .isotope2 h3 .team-name { color: var(--iso2-ink); text-decoration: none; } .rt-team-container .isotope2 .team-member:hover h3 a { color: var(--iso2-accent); } /* The accent dash is INLINE, so the Designation Alignment control moves it with the role: it used to be an absolute ::before pinned at left:0 inside a 25px padding gutter, which only ever lined up for left-aligned text - set the control to centre (or right) and the dash stayed stranded at the far left while the role floated away from it. The gutter is gone; the dash's own margin-right is the gap now. `.tlp-position a` is forced back to inline because pro's blanket `.rt-elementor-container a { display: block }` (0,1,1) would otherwise drop the role onto its own line under the dash - that blanket rule is the reason the dash was made absolute in the first place. This selector is (0,3,1), so it wins on both paths. It still takes currentColor, so the Designation colour control repaints it for free. */ .rt-team-container .isotope2 .tlp-position { position: relative; margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--iso2-accent); } .rt-team-container .isotope2 .tlp-position:before { content: ""; display: inline-block; vertical-align: middle; margin-right: 9px; width: 16px; height: 2px; border-radius: 2px; background: currentColor; } .rt-team-container .isotope2 .tlp-position a { display: inline; color: inherit; text-decoration: none; } .rt-team-container .isotope2 .short-bio { padding: 0; } .rt-team-container .isotope2 .short-bio p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--iso2-ink-2); } /* ---------- contact rows ---------- */ /* The colour is set on the WRAPPER, never on the

  • or its : every per-field control (Email, Telephone, Mobile, Fax, Location, Web URL) targets `$selector .tlp-email` &c at (0,3,0), and a direct match beats inheritance, so each field stays independently colourable. The
  • also stays a block — making it a flex container would blockify the and kill the per-field text-align controls. */ /* font-size / line-height sit on the WRAPPER, not the
  • . Every per-field control targets `$selector .tlp-email` &c at (0,3,0); `… .contact-info li` is (0,3,1) and would out-specify all six of them, so putting type on the
  • silently kills Email/Telephone/Mobile/Fax/ Location/Web-URL font-size, weight and align. On the wrapper it is (0,3,0) — the control ties and wins on source order (team-sc.css is enqueued after this file). */ .rt-team-container .isotope2 .contact-info { margin: 16px 4px 0; padding-top: 15px; border-top: 1px solid var(--iso2-line); color: var(--iso2-ink-2); font-size: 13.5px; line-height: 1.6; } .rt-team-container .isotope2 .contact-info ul { list-style: none; margin: 0; padding: 0; } /* The icon tile is ABSOLUTE in a padding gutter rather than inline, for the same reason the role dash is: an inline icon shares the line box with the text, and a long unbreakable address (michael.anderson@example.com) then jumps to the next line WHOLE — `overflow-wrap` only breaks a word that cannot fit a line of its own, and on a fresh full-width line it fits. Taking the icon out of the flow narrows the text column so the break actually happens, and it keeps the tile aligned to the first line on rows that do wrap. The
  • stays a block, so the per-field text-align controls still work. */ .rt-team-container .isotope2 .contact-info li { position: relative; margin: 0 0 9px; padding: 3px 0 3px 38px; min-height: 28px; overflow-wrap: anywhere; } .rt-team-container .isotope2 .contact-info li:last-child { margin-bottom: 0; } .rt-team-container .isotope2 .contact-info li i { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 9px; background: var(--iso2-accent-50); color: var(--iso2-accent); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 12px; -webkit-transition: background .3s var(--iso2-ease), color .3s var(--iso2-ease); transition: background .3s var(--iso2-ease), color .3s var(--iso2-ease); } .rt-team-container .isotope2 .contact-info li:hover i { background: var(--iso2-accent); color: #fff; } .rt-team-container .isotope2 .contact-info a { color: inherit; text-decoration: none; } /* the shared Elementor CSS leaves these anchors/spans inline-BLOCK, which makes each one an atomic box: a long address cannot break inside it, so it jumps to the next line whole and strands the icon on a line of its own. Only `display` is set here — no per-field control touches it, so Email/Telephone/… colour, size and align are untouched. */ .rt-team-container .isotope2 .contact-info li a, .rt-team-container .isotope2 .contact-info li span { display: inline; } /* ---------- skills ---------- */ .rt-team-container .isotope2 .tlp-team-skill { margin: 16px 4px 0; padding-top: 15px; border-top: 1px solid var(--iso2-line); } .rt-team-container .isotope2 .skill_name { font-size: 12.5px; font-weight: 600; color: var(--iso2-ink); margin: 0 0 6px; } /* the base track (`.rt-team-container .skill-prog`) is content-box with a 1px #edeaea border, which makes a nominal 6px bar render 8px tall with a grey hairline round it */ .rt-team-container .isotope2 .skill-prog { position: relative; height: 6px; border: 0; box-sizing: border-box; border-radius: 999px; margin-bottom: 12px; background: var(--iso2-accent-100); } .rt-team-container .isotope2 .skill-prog:last-child { margin-bottom: 0; } /* position:static on purpose — the base rule makes .fill relative, which anchors the percent label to the END OF THE BAR, so it slides about and collides with the skill name at low percentages. Static hands the anchor back to the track and pins the label to its right edge. */ .rt-team-container .isotope2 .skill-prog .fill { position: static; height: 100%; border-radius: 999px; background: var(--iso2-accent); } /* parked ABOVE the bar, on the same line as the skill name — so no overflow:hidden on the track, which would clip it away */ .rt-team-container .isotope2 .skill-prog .fill .percent-text { position: absolute; right: 0; top: -22px; padding: 0; background: none; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--iso2-accent); } /* the base .percent-text carries a tooltip caret (8px border triangle). This card shows the number as plain text on the label line, where a caret pointing at nothing reads as a glitch. */ .rt-team-container .isotope2 .skill-prog .fill .percent-text:before { content: none; } /* ---------- footer: socials + buttons ---------- */ /* margin-top:auto pins the footer to the bottom edge so button rows line up across a row of cards whose content lengths differ */ .rt-team-container .isotope2 .social-icons { margin: auto 4px 0; padding-top: 18px; border-top: 1px solid var(--iso2-line); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .rt-team-container .isotope2 .social-icons a { width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--iso2-line); color: var(--iso2-ink-2); background: transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 13px; text-decoration: none; -webkit-transition: background .28s var(--iso2-ease), color .28s var(--iso2-ease), border-color .28s var(--iso2-ease), -webkit-transform .28s var(--iso2-ease); transition: background .28s var(--iso2-ease), color .28s var(--iso2-ease), border-color .28s var(--iso2-ease), transform .28s var(--iso2-ease); } .rt-team-container .isotope2 .social-icons a:hover { background: var(--iso2-accent); border-color: var(--iso2-accent); color: #fff; -webkit-transform: translateY(-3px); transform: translateY(-3px); } /* Kill the legacy per-network brand colours. `.rt-team-container .social-icons a:hover .fa-facebook-f{background:#3b5999}` and its ~17 siblings paint the GLYPH on hover, which lands as a Facebook-blue / Twitter-blue box sitting inside this card's accent chip — the chip's own background is correct underneath, so computed-style checks on the pass while the rendered chip is plainly the wrong colour. Every other redesigned layout (layout11, layout13, isotope1, layout18 …) carries this same neutraliser; isotope2 was missing it. `i[class*="fa"]` is needed to out-specify `a:hover .far.fa-envelope` (0,5,1). */ .rt-team-container .isotope2 .social-icons a:hover i, .rt-team-container .isotope2 .social-icons a:hover i[class*="fa"] { background: transparent !important; background-color: transparent !important; } .rt-team-container .isotope2 .readmore-btn { margin: 14px 4px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 9px; } /* Resume + Hire Me split the row 50/50 and fill the column. `flex: 1 1 0` (basis 0, not auto) is what makes them EQUAL rather than proportional to their label lengths, and nowrap keeps them on one line; min-width:0 lets a long label shrink instead of forcing an overflow. If only one of the two buttons is enabled it simply takes the full width. */ .rt-team-container .isotope2 .readmore-btn.hirme-resume { margin-top: 16px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .rt-team-container .isotope2 .readmore-btn.hirme-resume a { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; } .rt-team-container .isotope2 .readmore-btn.hirme-resume + .readmore-btn { margin-top: 9px; } .rt-team-container .isotope2 .readmore-btn:empty { display: none; } .rt-team-container .isotope2 .readmore-btn a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 18px; border-radius: 11px; font-size: 13px; font-weight: 600; letter-spacing: .2px; text-decoration: none; -webkit-transition: background .28s var(--iso2-ease), color .28s var(--iso2-ease), border-color .28s var(--iso2-ease); transition: background .28s var(--iso2-ease), color .28s var(--iso2-ease), border-color .28s var(--iso2-ease); } .rt-team-container .isotope2 .rt-resume-btn, .rt-team-container .isotope2 .rt-hire-btn { border: 1px solid var(--iso2-line); color: var(--iso2-ink); background: #fff; } .rt-team-container .isotope2 .rt-resume-btn:hover, .rt-team-container .isotope2 .rt-hire-btn:hover { border-color: var(--iso2-accent); color: var(--iso2-accent); background: var(--iso2-accent-50); } /* `border: 0 solid transparent` and not simply "no border": the Read More Button's Border Width / Border Color controls only emit `border-width` + `border-color`, never `border-style`, so on an element that has no border-style of its own the computed width stays 0 and both controls are silently dead. Resume/Hire Me already carry `1px solid`. */ .rt-team-container .isotope2 .rt-ream-me-btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: 0 solid transparent; background: var(--iso2-accent); color: #fff; /* derived from the accent, not a hardcoded blue — Primary Color has to carry the glow with it or a recoloured button keeps a blue halo */ box-shadow: 0 6px 16px color-mix(in srgb, var(--iso2-accent) 26%, transparent); } .rt-team-container .isotope2 .rt-ream-me-btn:hover { background: var(--iso2-accent-700); color: #fff; } @media only screen and (max-width: 600px) { .rt-team-container .isotope2 .rt-iso2-card { padding: 12px 12px 16px; } } /*********************** End Isotope 2 ********************/ /******************************** Isotope 3 — "Blur focus" ****************************/ /* Isotope 3 (shortcode `.isotope3`). Its Elementor twin is `isotope-el-3`, which has a SEPARATE template AND a separate stylesheet — tlp-team-pro/src/scss/frontend/layouts/ _lo-isotope-3.scss. Keep the two in step by hand. The card: a 3:4 portrait. At rest only the name and a white role pill sit over a soft gradient at the foot, so a filtered grid is readable at a glance rather than a wall of anonymous photos. On hover the PHOTO ITSELF blurs and darkens and the bio, outline social chips and buttons fade up centred over it. There is no panel and no colour wash — the photo stays the background the whole time. Replaces the legacy card (teal box, photo zoomed to 1.15, flat rgba(217,35,45,.85) wash on hover, name jumping from margin-top 60% to 15%) and absorbs the four stray rules that used to sit up in the Isotope 1 area. SPECIFICITY: the shortcode Styling controls land in uploads/tlp-team/team-sc.css, which is enqueued AFTER this file, so an equal-specificity rule there wins on source order. Where `$selector` = `.rt-team-container.rt-team-container-{ID}` (0,2,0): Name `$selector h3` / `h3 a` (0,2,1) -> ours (0,2,1) Designation `$selector .tlp-position` (0,3,0) -> ours (0,3,0) Short bio `$selector .short-bio p` (0,3,1) -> ours (0,3,1) Social `$selector .social-icons a` (0,3,1) -> ours (0,3,1) Buttons `$selector .readmore-btn .rt-*` (0,4,0) -> ours (0,3,1), control wins */ .rt-team-container .isotope3 { /* Its OWN variable, written by templates/sc-css.php, Fns::layoutStyleGenerator() and pro's ElementorFilters::colorControls(). NOT `var(--l1-primary)` — only the shortcode path ever writes that one, so borrowing it makes Primary Color work here and do nothing at all under Elementor. The role pill, the Read More button, the social chip hover and the glyph all derive from it. */ --iso3-primary: #143ee5; --iso3-ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- card frame ---------- */ .rt-team-container .isotope3 .single-team-area { position: relative; width: 100%; height: auto; margin: 0; overflow: hidden; border-radius: 16px; background: #0d1230; text-align: center; box-shadow: 0 1px 2px rgba(20, 30, 75, .05), 0 12px 30px rgba(20, 30, 75, .10); -webkit-transition: -webkit-transform .4s var(--iso3-ease), box-shadow .4s var(--iso3-ease); transition: transform .4s var(--iso3-ease), box-shadow .4s var(--iso3-ease); } .rt-team-container .isotope3 .team-member:hover .single-team-area { -webkit-transform: translateY(-6px); transform: translateY(-6px); box-shadow: 0 1px 2px rgba(20, 30, 75, .06), 0 26px 54px rgba(20, 30, 75, .16); } .rt-team-container .isotope3 figure { margin: 0; line-height: 0; } .rt-team-container .isotope3 figure a { display: block; line-height: 0; } .rt-team-container .isotope3 img { position: relative; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; -webkit-transition: filter .55s var(--iso3-ease), -webkit-transform .8s var(--iso3-ease); transition: filter .55s var(--iso3-ease), transform .8s var(--iso3-ease); } /* ---------- image flip: cross-fade + blur, no 3D rotate ---------- */ /* With "Image flip on hover" enabled the member's GALLERY image is the one that ends up blurred behind the content. The shared feature CSS rotates `.rt-flip-inner` in 3D and un-clips the figure (`figure:has(.rt-flip-container){overflow:visible}`); behind centred text a rotation reads as a glitch and the back face escapes the rounded frame, so this card cross-fades the two faces instead and blurs both. */ .rt-team-container .isotope3 figure:has(.rt-flip-container) { overflow: hidden; } .rt-team-container .isotope3 .rt-flip-container, .rt-team-container .isotope3 .rt-flip-inner, .rt-team-container .isotope3 .rt-flip-front { height: 100%; -webkit-transform: none !important; transform: none !important; -webkit-transform-style: flat; transform-style: flat; -webkit-perspective: none; perspective: none; } .rt-team-container .isotope3 .rt-flip-front, .rt-team-container .isotope3 .rt-flip-back { -webkit-backface-visibility: visible; backface-visibility: visible; } .rt-team-container .isotope3 .rt-flip-back { opacity: 0; -webkit-transition: opacity .5s var(--iso3-ease); transition: opacity .5s var(--iso3-ease); } .rt-team-container .isotope3 .team-member:hover .rt-flip-back { opacity: 1; } .rt-team-container .isotope3 .rt-flip-front img, .rt-team-container .isotope3 .rt-flip-back img { height: 100%; object-fit: cover; } /* the shared rule pins `.rt-flip-container img{transform:none!important}`, so the hover scale below is applied to the flip faces from here instead */ .rt-team-container .isotope3 .team-member:hover .rt-flip-container img { filter: blur(7px) brightness(.55); } /* ---------- the plate ---------- */ .rt-team-container .isotope3 .tlp-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; pointer-events: none; } /* absorbed from the old stray rule — no longer absolutely centred, the plate sits at the foot */ .rt-team-container .isotope3 .overlay-element { pointer-events: auto; position: relative; width: 100%; padding: 20px; text-align: center; background: -webkit-gradient(linear, left top, left bottom, from(rgba(13, 18, 48, 0)), color-stop(70%, rgba(13, 18, 48, .72))); background: linear-gradient(180deg, rgba(13, 18, 48, 0) 0%, rgba(13, 18, 48, .72) 70%); -webkit-transition: background .45s var(--iso3-ease), -webkit-transform .45s var(--iso3-ease); transition: background .45s var(--iso3-ease), transform .45s var(--iso3-ease); } /* the lift is what creates the gap under the buttons, so it is deliberately small and the bottom padding is trimmed with it — together they leave ~20px under Read More, not 34px */ .rt-team-container .isotope3 .team-member:hover .overlay-element { background: transparent; padding-bottom: 12px; -webkit-transform: translateY(-8px); transform: translateY(-8px); } .rt-team-container .isotope3 .team-member:hover img { filter: blur(7px) brightness(.55); -webkit-transform: scale(1.08); transform: scale(1.08); } /* ---------- name / role ---------- */ .rt-team-container .isotope3 h3 { margin: 0 0 4px; padding: 0; font-size: 18.5px; font-weight: 700; line-height: 1.3; } .rt-team-container .isotope3 h3 a, .rt-team-container .isotope3 h3 .team-name { color: #fff; text-decoration: none; } .rt-team-container .isotope3 .tlp-position { display: inline-block; margin-top: 2px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--iso3-primary); font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; opacity: 1; } .rt-team-container .isotope3 .tlp-position a { color: inherit; text-decoration: none; } /* ---------- department ---------- */ /* The "Show Department?" toggle was always offered but neither isotope3 template printed the field. It renders now, as a second pill beside the role so the two read as one meta line. */ .rt-team-container .isotope3 .tlp-department { display: inline-block; margin-top: 6px; margin-left: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; } .rt-team-container .isotope3 .tlp-department a { color: inherit; text-decoration: none; } /* ---------- revealed on hover ---------- */ .rt-team-container .isotope3 .short-bio, .rt-team-container .isotope3 .social-icons, .rt-team-container .isotope3 .tlp-btn-wrapper { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; visibility: visible; -webkit-transition: max-height .45s var(--iso3-ease), opacity .3s var(--iso3-ease), margin-top .45s var(--iso3-ease); transition: max-height .45s var(--iso3-ease), opacity .3s var(--iso3-ease), margin-top .45s var(--iso3-ease); } .rt-team-container .isotope3 .team-member:hover .short-bio { max-height: 120px; opacity: 1; margin-top: 11px; } .rt-team-container .isotope3 .team-member:hover .social-icons { max-height: 70px; opacity: 1; margin-top: 9px; } .rt-team-container .isotope3 .team-member:hover .tlp-btn-wrapper { max-height: 150px; opacity: 1; margin-top: 14px; } .rt-team-container .isotope3 .short-bio p { margin: 0; padding: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .94); opacity: 1; } /* ---------- socials ---------- */ /* `overflow:hidden` is required by the max-height reveal, which means the chips' 3px hover lift is clipped off at the top. The padding gives the lift room INSIDE the clipped box — the negative margin keeps the visual gap unchanged. */ .rt-team-container .isotope3 .social-icons { margin: 0; padding: 5px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .rt-team-container .isotope3 .social-icons a { width: 31px; height: 31px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); color: #fff; background: transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 12px; text-decoration: none; -webkit-transition: background .28s var(--iso3-ease), color .28s var(--iso3-ease), border-color .28s var(--iso3-ease), -webkit-transform .28s var(--iso3-ease); transition: background .28s var(--iso3-ease), color .28s var(--iso3-ease), border-color .28s var(--iso3-ease), transform .28s var(--iso3-ease); } .rt-team-container .isotope3 .social-icons a:hover { background: #fff; color: var(--iso3-primary); border-color: #fff; -webkit-transform: translateY(-3px); transform: translateY(-3px); } /* the legacy per-network brand rules paint the GLYPH, which lands as a Facebook-blue box inside this card's chip — every redesigned layout carries this neutraliser */ .rt-team-container .isotope3 .social-icons a:hover i, .rt-team-container .isotope3 .social-icons a:hover i[class*="fa"] { background: transparent !important; background-color: transparent !important; /* the same brand rules also force `color:#fff !important`; the chip fills white on hover, so without this the glyph is white-on-white and disappears */ color: var(--iso3-primary) !important; } /* ---------- buttons ---------- */ .rt-team-container .isotope3 .tlp-btn-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } /* margin-top:0 is load-bearing — pro ships a generic `.rt-team-container .readmore-btn {margin-top:20px}`, which pushed the Read More row 28px below Resume/Hire Me instead of the 8px the wrapper's own `gap` intends. */ .rt-team-container .isotope3 .readmore-btn { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; margin-top: 0; } .rt-team-container .isotope3 .readmore-btn:empty { display: none; } .rt-team-container .isotope3 .readmore-btn a { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 9px 14px; border-radius: 8px; border: 0 solid transparent; font-size: 12.5px; font-weight: 600; text-decoration: none; -webkit-transition: background .28s var(--iso3-ease), color .28s var(--iso3-ease), border-color .28s var(--iso3-ease); transition: background .28s var(--iso3-ease), color .28s var(--iso3-ease), border-color .28s var(--iso3-ease); } .rt-team-container .isotope3 .rt-resume-btn, .rt-team-container .isotope3 .rt-hire-btn { background: rgba(255, 255, 255, .16); color: #fff; } .rt-team-container .isotope3 .rt-resume-btn:hover, .rt-team-container .isotope3 .rt-hire-btn:hover { background: rgba(255, 255, 255, .3); color: #fff; } .rt-team-container .isotope3 .rt-ream-me-btn { background: #fff; color: var(--iso3-primary); } .rt-team-container .isotope3 .rt-ream-me-btn:hover { background: rgba(255, 255, 255, .88); color: var(--iso3-primary); } @media only screen and (max-width: 600px) { .rt-team-container .isotope3 .overlay-element { padding: 16px; } } /*********************** Isotope 4 ********************/ /* Isotope 4 now SHARES Grid Layout 7's card — the two templates already emit the same `figure.tlp-team-item > figcaption > .caption-inner-content` structure, so every rule in the Layout 7 block above carries an `.isotope4` twin. Do not add rules here: redesign Layout 7 and isotope4 follows automatically. Its own old figcaption double-border reveal has been removed. */ /*********************** Isotope 5 ********************/ /* Isotope 5 now SHARES Grid Layout 8's card — its old slide-up `.tlp-overlay .tlp-title` panel and `.tlp-content-inner-is5` box are gone, and every rule in the Layout 8 block above carries an `.isotope5` twin. Do not add rules here: redesign Layout 8 and isotope5 follows automatically. */ /*********************** Isotope 6 ************************/ /* Isotope 6 now SHARES Grid Layout 9's card — its old slide-up `.tlp-overlay` panel, the boxed `h3 .team-name` / `.tlp-position span` labels and the `.tlp-btn-wrapper` are gone, and every rule in the Layout 9 block above carries an `.isotope6` twin. Do not add rules here: redesign Layout 9 and isotope6 follows automatically. */ /*********************** Isotope 7 ********************/ /* Isotope 7 now SHARES Grid Layout 10's split card — its old overlay padding and social tint are gone, and every rule in the Layout 10 block above carries an `.isotope7` twin. Do not add rules here: redesign Layout 10 and isotope7 follows automatically. */ /*************************** End Isotope ***********************/ /******************************* Layout Carousel *********************/ .rt-carousel-holder .carousel-item { display: block; } .rt-carousel-holder.top-nav .swiper-nav { position: absolute; right: 0; top: -30px; } .rt-carousel-holder.swiper-rtl.top-nav .swiper-nav { right: auto; left: 100px; } .rt-carousel-holder .swiper-arrow::after { content: none !important; } .rt-carousel-holder.top-nav .swiper-button-next { right: 15px; } .rt-carousel-holder.top-nav .swiper-button-prev { left: -85px; } .rt-carousel-holder.top-nav.swiper-rtl .swiper-button-prev { right: 15px; left: auto; } .rt-carousel-holder.top-nav.swiper-rtl .swiper-button-next { left: -85px; right: auto; } .rt-carousel-holder.standard-nav .swiper-nav { position: absolute; top: 50%; margin-top: -30px; width: 100%; } .tlp-widget-holder .rt-carousel-holder.standard-nav .swiper-nav { margin-top: 0; } .tlp-widget-holder .rt-carousel-holder.standard-nav.has-dots .swiper-nav { margin-top: -15px; } .rt-carousel-holder.bottom-nav .swiper-nav { position: absolute; bottom: 0; left: 50%; bottom: 50px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .rt-team-container .rt-carousel-holder.bottom-nav .swiper-nav + .swiper-pagination { margin-top: 40px; } .rt-carousel-holder.standard-nav .swiper-nav .swiper-arrow { top: 7.5px; } .rt-carousel-holder.standard-nav .swiper-nav .swiper-button-next { right: -12px; } .rt-carousel-holder.standard-nav .swiper-nav .swiper-button-prev { left: -12px; } .tlp-widget-holder .rt-carousel-holder.standard-nav .swiper-nav .swiper-button-next { right: 0; } .tlp-widget-holder .rt-carousel-holder.standard-nav .swiper-nav .swiper-button-prev { left: 0; } .rt-carousel-holder.bottom-nav .swiper-nav .swiper-button-next { right: auto; left: 5px; } .rt-carousel-holder.bottom-nav .swiper-nav .swiper-button-prev { left: auto; right: 5px; } .rt-carousel-holder .swiper-arrow { width: 30px; height: 30px; background: #000; -webkit-transition: all 0.3s; transition: all 0.3s; } .rt-carousel-holder .swiper-arrow:hover { background: #333; } .rt-carousel-holder .swiper-arrow i { color: #fff; } .rt-carousel-holder.swiper-rtl .swiper-button-prev i, .rt-carousel-holder.swiper-rtl .swiper-button-next i { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .rt-carousel-holder.bottom-nav.no-dots { margin-bottom: 40px; } .rt-carousel-holder.bottom-nav.no-dots.no-nav { margin-bottom: 0; } .rt-carousel-holder.bottom-nav.no-dots .swiper-nav { bottom: 20px; } #team-member-profile-gallery .profile-img-wrapper { margin-bottom: 30px; } #team-member-profile-gallery .swiper-arrow { position: absolute; top: 50%; font-size: 18px; background: #000; width: 40px; height: 40px; color: #fff; line-height: 30px; -webkit-transition: all 0.3s; transition: all 0.3s; margin-top: -35px; } #team-member-profile-gallery .swiper-arrow:hover { background: #333; } #team-member-profile-gallery .swiper-arrow::after { content: none; } #team-member-profile-gallery .swiper-button-prev { left: 15px; } #team-member-profile-gallery .swiper-button-next { right: 15px; } .rt-smart-modal #team-member-profile-gallery .swiper-button-prev, .tlp-md-content-holder #team-member-profile-gallery .swiper-button-prev { left: 0; } .rt-smart-modal #team-member-profile-gallery .swiper-button-next, .tlp-md-content-holder #team-member-profile-gallery .swiper-button-next { right: 0; } .rt-smart-modal #team-member-profile-gallery .swiper-pagination, .tlp-md-content-holder #team-member-profile-gallery .swiper-pagination { display: none; } .rt-team-container .rt-carousel-holder.swiper .swiper-pagination-bullet { width: 10px; height: 10px; margin: 10px 5px 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } .rt-carousel-holder .swiper-pagination-bullet:hover { background: #000; opacity: 0.75; } .rt-carousel-holder .swiper-pagination-bullet-active { opacity: 0.75; background: #000; } .rt-carousel-holder.swiper-autoheight .swiper-pagination { margin-top: 20px; } .rt-carousel-holder.swiper-autoheight .swiper-pagination, .rt-team-container .swiper-pagination-bullets-dynamic { margin-left: auto; margin-right: auto; -webkit-transform: none !important; transform: none !important; } .rt-team-container .rt-carousel-holder .swiper-pagination { width: calc(100% - 30px); bottom: -20px; height: 30px; margin-top: 20px; } .rt-team-container .carousel11 .rt-carousel-holder .swiper-pagination { margin-top: 30px; } .rt-pos-s { position: static !important; } .rt-pos-r { position: relative !important; } .rt-smart-modal .rt-pos-s, .tlp-md-content-holder .rt-pos-s { position: relative !important; } .rt-carousel-holder .default-img { width: 100%; } .rt-carousel-holder .default-img + .swiper-lazy-preloader { display: none; } /*********************** Layout 14 - "Expanding panel" ************************/ /* carousel8 and isotope9 share this card and have no CSS of their own - every selector below covers all three. Keep _lo-layout-14.scss (the Elementor twin) in step. */ /* ---------- Accent colour ---------- Same plumbing as layouts 12 / 13: --l14-primary is fed from --l1-primary (sc-css.php writes it from the Styling tab's "Primary Color"), and the Elementor Primary Color control writes --l14-primary directly (ElementorFilters::colorControls). Deliberately NOT chained off --rttm-primary-color, which Pro pins to #007acc on :root. Mirrored verbatim in _lo-layout-14.scss so the specificity tie is harmless. */ .rt-team-container .layout14, .rt-elementor-container .layout14, .rt-team-container .isotope9, .rt-elementor-container .isotope9, .rt-team-container .carousel8, .rt-elementor-container .carousel8 { --l14-primary: var(--l1-primary, #143ee5); --l14-primary-700: #0e2aa3; --l14-primary-700: color-mix(in srgb, var(--l14-primary) 68%, #000); } /* Neutralise the grid's negative row margins — they push ~5px past the viewport on the Elementor path, which does not offset them. Column padding still supplies the gaps. */ .rt-team-container .rt-row.layout14, .rt-team-container .rt-row.isotope9, .rt-team-container .rt-row.carousel8 { margin-left: 0; margin-right: 0; } /* ---------- Card ---------- */ .rt-team-container .layout14 .rt-grid-item .single-team-area, .rt-team-container .isotope9 .rt-grid-item .single-team-area, .rt-team-container .carousel8 .rt-grid-item .single-team-area { position: relative; width: 100%; margin: 0; aspect-ratio: 1 / 1.12; overflow: hidden; border-radius: 14px; background: #dfe3ee; text-align: center; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 6px 18px rgba(20, 30, 75, .05); transition: box-shadow .35s cubic-bezier(.4, 0, .2, 1), transform .35s cubic-bezier(.4, 0, .2, 1); } .rt-team-container .layout14 .rt-grid-item .single-team-area:hover, .rt-team-container .isotope9 .rt-grid-item .single-team-area:hover, .rt-team-container .carousel8 .rt-grid-item .single-team-area:hover { transform: translateY(-4px); z-index: 2; box-shadow: 0 24px 60px color-mix(in srgb, var(--l14-primary, #143ee5) 22%, transparent), 0 4px 12px rgba(20, 30, 75, .06); } .rt-team-container .layout14 .rt-grid-item .single-team-area:hover:after, .rt-team-container .isotope9 .rt-grid-item .single-team-area:hover:after, .rt-team-container .carousel8 .rt-grid-item .single-team-area:hover:after { content: initial; } /* Carousel 8 only: no hover LIFT. The slider viewport (.rt-carousel-holder.swiper) is overflow:hidden and sits flush with the slide, so translateY(-4px) pushes the card's top outside the clip box and 4px of it is visibly cut off. Padding the holder to make room re-anchors the absolutely-positioned nav arrows, so the lift is dropped and the resting shadow kept. Grid layout 14 and isotope 9 have no clipping container and keep both. Mirrored in pro's _lo-layout-14.scss for the Elementor path. */ .rt-team-container .carousel8 .rt-grid-item .single-team-area:hover { transform: none; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 6px 18px rgba(20, 30, 75, .05); } /* ---------- Media ---------- */ .rt-team-container .layout14 .rt-l14-media, .rt-team-container .isotope9 .rt-l14-media, .rt-team-container .carousel8 .rt-l14-media { position: absolute; inset: 0; overflow: hidden; line-height: 0; } /* overflow:hidden so the Image Border Radius control — which targets the
    — is actually visible; without it the radius is set but the paints over the corners. */ .rt-team-container .layout14 .rt-l14-media figure, .rt-team-container .isotope9 .rt-l14-media figure, .rt-team-container .carousel8 .rt-l14-media figure { margin: 0; height: 100%; overflow: hidden; } .rt-team-container .layout14 .rt-l14-media figure a, .rt-team-container .isotope9 .rt-l14-media figure a, .rt-team-container .carousel8 .rt-l14-media figure a { display: block; height: 100%; } .rt-team-container .layout14 .rt-l14-media img, .rt-team-container .isotope9 .rt-l14-media img, .rt-team-container .carousel8 .rt-l14-media img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.4, 0, .2, 1), filter .4s cubic-bezier(.4, 0, .2, 1); } .rt-team-container .layout14 .rt-grid-item .single-team-area:hover .rt-l14-media img, .rt-team-container .isotope9 .rt-grid-item .single-team-area:hover .rt-l14-media img, .rt-team-container .carousel8 .rt-grid-item .single-team-area:hover .rt-l14-media img { transform: scale(1.06); filter: brightness(.92); } /* ---------- Panel (`.tlp-overlay` = Overlay Background + Content Padding hooks) ---------- */ .rt-team-container .layout14 .rt-grid-item .tlp-overlay, .rt-team-container .isotope9 .rt-grid-item .tlp-overlay, .rt-team-container .carousel8 .rt-grid-item .tlp-overlay { position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 3; width: 100%; /* Demo behaviour: a 30% strip that grows to cover the whole card on hover. `min-height: min-content` is the safety net — it lets the panel outgrow 30% when the Social Width / Height / Padding / Border controls enlarge the chips and the row wraps, which a bare `height: 30%` silently chopped off. Only `height` transitions (the padding is constant now); animating padding as well is what made hover janky. */ height: 30%; min-height: -webkit-min-content; min-height: min-content; /* 10px vertical, not 18: at `height: 30%` the panel is 89px and the resting content (name + role) needs 67px, so 36px of padding pushed `min-height: min-content` to 103px — ABOVE the declared height. The height transition then spent its first ~90ms animating through a range the floor hid, which is what made the hover hesitate then lurch. Constant across rest and hover — animating padding is its own source of jank. */ padding: 10px 18px; display: flex; flex-direction: column; align-items: center; /* flex-end, not center: the panel is bottom-anchored, so with `center` its content was re-centred on every frame of the height animation and the name/role slid ~153px — measured, and that travel was the lurch. Pinned to the fixed bottom edge, the name only moves by the height of what is revealed beneath it. The resting look is unchanged: at 30% the content nearly fills the strip, so centre and flex-end put it in the same place (measured 1px apart). */ justify-content: flex-end; text-align: center; overflow: hidden; /* .6s, not .45s: at `height: 30%` the panel grows 208px and its centred content travels ~153px with it — measured. That much movement in .45s reads as a lurch however clean the frames are (they hold 60fps). The longer ramp is what actually makes it feel smooth; the child reveals below keep their own shorter timings so they still land inside the expansion. */ transition: height .6s cubic-bezier(.4, 0, .2, 1); color: #fff; background-color: var(--l14-primary); background-image: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(0, 0, 0, .26) 100%); } .rt-team-container .layout14 .rt-grid-item .single-team-area:hover .tlp-overlay, .rt-team-container .isotope9 .rt-grid-item .single-team-area:hover .tlp-overlay, .rt-team-container .carousel8 .rt-grid-item .single-team-area:hover .tlp-overlay { height: 100%; } .rt-team-container .layout14 .rt-grid-item .tlp-overlay h3, .rt-team-container .isotope9 .rt-grid-item .tlp-overlay h3, .rt-team-container .carousel8 .rt-grid-item .tlp-overlay h3 { margin: 0 !important; padding: 0 !important; line-height: 1.2; letter-spacing: -.2px; text-shadow: 0 1px 6px rgba(0, 0, 0, .18); } .rt-team-container .layout14 .rt-grid-item .tlp-overlay h3 .team-name, .rt-team-container .isotope9 .rt-grid-item .tlp-overlay h3 .team-name, .rt-team-container .carousel8 .rt-grid-item .tlp-overlay h3 .team-name { background: none; padding: 0; } /* 0,2,0 on purpose: the Designation Padding / Margin controls are 0,4,0 and must win. */ .layout14 .tlp-position, .isotope9 .tlp-position, .carousel8 .tlp-position { margin: 5px 0 0; padding: 0; } .rt-team-container .layout14 .rt-grid-item .tlp-overlay .tlp-position span, .rt-team-container .isotope9 .rt-grid-item .tlp-overlay .tlp-position span, .rt-team-container .carousel8 .rt-grid-item .tlp-overlay .tlp-position span { background: none; padding: 0; } /* Divider - draws in on hover */ .rt-team-container .layout14 .rt-l14-divider, .rt-team-container .isotope9 .rt-l14-divider, .rt-team-container .carousel8 .rt-l14-divider { display: block; /* scaleX, not width: `width` reflows the panel every frame and this was one of six layout-triggering properties running at once. The bar is drawn at its full 32px and scaled from the centre, which is compositor-only and pixel-identical. */ width: 32px; transform: scaleX(0); height: 2px; margin: 10px 0 0; border-radius: 2px; background: rgba(255, 255, 255, .5); transition: transform .4s cubic-bezier(.4, 0, .2, 1) .15s; } .rt-team-container .layout14 .rt-grid-item .single-team-area:hover .rt-l14-divider, .rt-team-container .isotope9 .rt-grid-item .single-team-area:hover .rt-l14-divider, .rt-team-container .carousel8 .rt-grid-item .single-team-area:hover .rt-l14-divider { transform: scaleX(1); } /* Social - hidden at rest, revealed with the panel on hover. Same recipe as `.tlp-btn-wrapper` further down (opacity + rise + a collapsing max-height/margin) so the panel height stays CONTENT-DRIVEN — a fixed height here is what clipped the icons and made the hover janky last time. The icons lead the buttons by 100ms (.18s vs .28s) so the panel fills from the top down. `max-height` is generous enough for three rows of 36px chips; it only has to exceed the real height, and the fade/rise carry the perceived motion. */ .rt-team-container .layout14 .tlp-overlay .social-icons, .rt-team-container .isotope9 .tlp-overlay .social-icons, .rt-team-container .carousel8 .tlp-overlay .social-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; /* stays 0 at rest: `max-height: 0` cannot compress padding, so any padding here would leave a sliver of the wrapper visible in the collapsed panel. The clip headroom is applied in the hover rule instead. */ padding: 0; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transform: translateY(10px); transition: opacity .4s cubic-bezier(.4, 0, .2, 1) .18s, transform .4s cubic-bezier(.4, 0, .2, 1) .18s, margin-top .4s cubic-bezier(.4, 0, .2, 1) .18s, max-height .4s cubic-bezier(.4, 0, .2, 1) .18s, visibility .4s .18s; } .rt-team-container .layout14 .rt-grid-item .single-team-area:hover .tlp-overlay .social-icons, .rt-team-container .isotope9 .rt-grid-item .single-team-area:hover .tlp-overlay .social-icons, .rt-team-container .carousel8 .rt-grid-item .single-team-area:hover .tlp-overlay .social-icons { opacity: 1; visibility: visible; transform: translateY(0); margin-top: 4px; /* headroom INSIDE the clip box — `overflow: hidden` (needed for the collapse) clips at the padding edge, and the chips lift translateY(-2px) on hover, so without this the top 2px of a hovered chip is sliced off. `margin-top` is 4px rather than the original 8px so the padding makes up the difference and the visual gap is unchanged. */ padding-top: 4px; /* three rows of chips at whatever size the controls chose — a flat 132px clipped the second row once the chips grew past ~50px */ max-height: calc(var(--rt-l14-soc, 36px) * 3 + 24px); } .rt-team-container .layout14 .tlp-overlay .social-icons:before, .rt-team-container .isotope9 .tlp-overlay .social-icons:before, .rt-team-container .carousel8 .tlp-overlay .social-icons:before { content: none; } .rt-team-container .layout14 .tlp-overlay .social-icons a, .rt-team-container .isotope9 .tlp-overlay .social-icons a, .rt-team-container .carousel8 .tlp-overlay .social-icons a { min-width: 36px; min-height: 36px; /* see layout 13: the Social Width/Height controls size the inner , so the chip must grow with it and clip the glyph box's own background/border. */ width: -webkit-max-content; width: max-content; height: -webkit-max-content; height: max-content; align-self: center; flex: 0 0 auto; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); font-size: calc(var(--rt-l14-soc, 36px) * .36); /* the glyph inherits this, so the icon scales WITH the chip instead of staying 13px inside a 66px circle. `--rt-l14-soc` is written by the Elementor Social Width/Height controls; unset it falls back to the design's own 36px chip, which yields the original 13px. Typography > Size still wins - it sets font-size on the directly. */ line-height: 1; text-decoration: none; color: #fff; transition: background .2s, color .2s, transform .2s, border-color .2s; } /* The plugin ships Elementor-only icon defaults - `.rt-elementor-container .social-icons a i { font-size: 20px }` and `… a .fab { width: 30px; height: 30px }` - which forced a 30x30 glyph box and inflated this chip well past the demo's 36px (the shortcode has no such rule, so only Elementor looked wrong). Reset them here at 0,5,2; the Social Icon Width / Height / Typography controls are more specific and still win. */ .rt-team-container .layout14 .tlp-overlay .social-icons a i, .rt-team-container .isotope9 .tlp-overlay .social-icons a i, .rt-team-container .carousel8 .tlp-overlay .social-icons a i { color: inherit; background: transparent; border: 0; flex: 0 0 auto; width: auto; height: auto; font-size: inherit; line-height: 1; } .rt-team-container .layout14 .tlp-overlay .social-icons a:hover, .rt-team-container .isotope9 .tlp-overlay .social-icons a:hover, .rt-team-container .carousel8 .tlp-overlay .social-icons a:hover { background: #fff; color: var(--l14-primary); border-color: #fff; transform: translateY(-2px); } .rt-team-container .layout14 .tlp-overlay .social-icons a:hover i, .rt-team-container .isotope9 .tlp-overlay .social-icons a:hover i, .rt-team-container .carousel8 .tlp-overlay .social-icons a:hover i { color: var(--l14-primary) !important; background: transparent !important; } /* ---------- Buttons - fade up as the panel expands ---------- */ .rt-team-container .layout14 .tlp-btn-wrapper, .rt-team-container .isotope9 .tlp-btn-wrapper, .rt-team-container .carousel8 .tlp-btn-wrapper { /* grid, not flex: Read More has to sit on its own row (grid-column: 1 / -1) AND still shrink-wrap its text, so the arrow can be pinned just after the label rather than at the far edge of a full-width anchor. */ display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-items: center; gap: 8px; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(14px); transition: opacity .4s cubic-bezier(.4, 0, .2, 1) .28s, transform .4s cubic-bezier(.4, 0, .2, 1) .28s, margin-top .4s cubic-bezier(.4, 0, .2, 1) .28s, max-height .4s cubic-bezier(.4, 0, .2, 1) .28s; } .rt-team-container .layout14 .rt-grid-item .single-team-area:hover .tlp-btn-wrapper, .rt-team-container .isotope9 .rt-grid-item .single-team-area:hover .tlp-btn-wrapper, .rt-team-container .carousel8 .rt-grid-item .single-team-area:hover .tlp-btn-wrapper { opacity: 1; transform: translateY(0); margin-top: 18px; max-height: 140px; } /* Read More - underlined link with a trailing arrow, full width on its own row */ .rt-team-container .layout14 .tlp-btn-wrapper .rt-ream-me-btn, .rt-team-container .isotope9 .tlp-btn-wrapper .rt-ream-me-btn, .rt-team-container .carousel8 .tlp-btn-wrapper .rt-ream-me-btn { grid-column: 1 / -1; justify-self: center; position: relative; display: block; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.4; background: none; /* `border: 0` would set border-style:none, and a none-style border computes to width 0 no matter what the Read More Border control sets — so keep it solid + transparent. */ border: 0 solid transparent; /* right padding holds the out-of-flow arrow (and is not underlined); the bottom padding keeps the 4px underline offset INSIDE the box, otherwise the wrapper's `overflow: hidden` (needed for the collapse) clips the line away entirely. */ padding: 0 22px 5px 0; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 4px; transition: text-decoration-color .2s; } /* The arrow is taken OUT OF FLOW on purpose: an ancestor's text-decoration is drawn across inline-level descendants (inline-block included), so an in-flow arrow got underlined too. Decorations do not propagate to out-of-flow boxes, so only the label is underlined. */ .rt-team-container .layout14 .tlp-btn-wrapper .rt-ream-me-btn::after, .rt-team-container .isotope9 .tlp-btn-wrapper .rt-ream-me-btn::after, .rt-team-container .carousel8 .tlp-btn-wrapper .rt-ream-me-btn::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; position: absolute; right: 0; top: 0; bottom: 5px; display: flex; align-items: center; transition: transform .25s cubic-bezier(.4, 0, .2, 1); } .rt-team-container .layout14 .tlp-btn-wrapper .rt-ream-me-btn:hover, .rt-team-container .isotope9 .tlp-btn-wrapper .rt-ream-me-btn:hover, .rt-team-container .carousel8 .tlp-btn-wrapper .rt-ream-me-btn:hover { color: #fff; text-decoration-color: #fff; } .rt-team-container .layout14 .tlp-btn-wrapper .rt-ream-me-btn:hover::after, .rt-team-container .isotope9 .tlp-btn-wrapper .rt-ream-me-btn:hover::after, .rt-team-container .carousel8 .tlp-btn-wrapper .rt-ream-me-btn:hover::after { transform: translateX(4px); } /* Resume + Hire Me - ghost pills sharing the second row */ .rt-team-container .layout14 .tlp-btn-wrapper .rt-resume-btn, .rt-team-container .layout14 .tlp-btn-wrapper .rt-hire-btn, .rt-team-container .isotope9 .tlp-btn-wrapper .rt-resume-btn, .rt-team-container .isotope9 .tlp-btn-wrapper .rt-hire-btn, .rt-team-container .carousel8 .tlp-btn-wrapper .rt-resume-btn, .rt-team-container .carousel8 .tlp-btn-wrapper .rt-hire-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); transition: background .2s, color .2s, border-color .2s; } .rt-team-container .layout14 .tlp-btn-wrapper .rt-resume-btn:hover, .rt-team-container .layout14 .tlp-btn-wrapper .rt-hire-btn:hover, .rt-team-container .isotope9 .tlp-btn-wrapper .rt-resume-btn:hover, .rt-team-container .isotope9 .tlp-btn-wrapper .rt-hire-btn:hover, .rt-team-container .carousel8 .tlp-btn-wrapper .rt-resume-btn:hover, .rt-team-container .carousel8 .tlp-btn-wrapper .rt-hire-btn:hover { background: #fff; color: var(--l14-primary); border-color: #fff; } /*********************** Layout 15 - "Diagonal band" ************************/ /* isotope10 and carousel11 share this card and have no CSS of their own - every selector below covers all three. Keep _lo-layout-15.scss (the Elementor twin) in step. */ /* ---------- Accent colour ---------- Same plumbing as layouts 12-14: --l15-primary is fed from --l1-primary (sc-css.php writes it from the Styling tab's "Primary Color"), and the Elementor Primary Color control writes --l15-primary directly. Deliberately NOT chained off --rttm-primary-color, which Pro pins to #007acc on :root. Mirrored verbatim in _lo-layout-15.scss. */ .rt-team-container .layout15, .rt-elementor-container .layout15, .rt-team-container .isotope10, .rt-elementor-container .isotope10, .rt-team-container .carousel11, .rt-elementor-container .carousel11 { --l15-primary: var(--l1-primary, #143ee5); --l15-primary-700: #0e2aa3; --l15-primary-700: color-mix(in srgb, var(--l15-primary) 68%, #000); --l15-slant: 34px; } /* Neutralise the grid's negative row margins - they push a few px past the viewport on the Elementor path, which does not offset them. Column padding still supplies the gaps. */ .rt-team-container .rt-row.layout15, .rt-team-container .rt-row.isotope10, .rt-team-container .rt-row.carousel11 { margin-left: 0; margin-right: 0; } /* ---------- Card ---------- */ .rt-team-container .layout15 .single-team-area, .rt-team-container .isotope10 .single-team-area, .rt-team-container .carousel11 .single-team-area { position: relative; /* Media and band are stacked in ONE grid cell (the layout-12 trick), so the card's height is max(photo's aspect-ratio height, band height). That keeps the square-ish card by default but lets it GROW when big Name/Designation/Social control values make the band taller - putting `aspect-ratio` on the card itself clamped the height instead, and `overflow: hidden` then sliced the name off the top. `min-height: min-content` does not help there: it loses to the ratio's transferred size. */ display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin: 0; overflow: hidden; border-radius: 14px; background: #dfe3ee; text-align: left; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 6px 18px rgba(20, 30, 75, .05); transition: box-shadow .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout15 .single-team-area:hover, .rt-team-container .isotope10 .single-team-area:hover, .rt-team-container .carousel11 .single-team-area:hover { transform: translateY(-4px); z-index: 2; box-shadow: 0 24px 60px color-mix(in srgb, var(--l15-primary, #143ee5) 22%, transparent), 0 4px 12px rgba(20, 30, 75, .06); } /* the old design drew its diagonal with ::before - the band is a real element now */ .rt-team-container .layout15 .single-team-area::before, .rt-team-container .isotope10 .single-team-area::before, .rt-team-container .carousel11 .single-team-area::before { content: none; } /* ---------- Media ---------- */ .rt-team-container .layout15 .rt-l15-media, .rt-team-container .isotope10 .rt-l15-media, .rt-team-container .carousel11 .rt-l15-media { /* in flow, in the shared grid cell - THIS is what carries the card's aspect ratio now. `align-self` stays `stretch`, so if the band makes the row taller the photo fills it. */ position: relative; grid-area: 1 / 1; aspect-ratio: 1 / 1.05; overflow: hidden; line-height: 0; } .rt-team-container .layout15 .rt-l15-media figure, .rt-team-container .isotope10 .rt-l15-media figure, .rt-team-container .carousel11 .rt-l15-media figure { margin: 0; height: 100%; overflow: hidden; } .rt-team-container .layout15 .rt-l15-media figure a, .rt-team-container .isotope10 .rt-l15-media figure a, .rt-team-container .carousel11 .rt-l15-media figure a { display: block; height: 100%; } .rt-team-container .layout15 .rt-l15-media img, .rt-team-container .isotope10 .rt-l15-media img, .rt-team-container .carousel11 .rt-l15-media img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout15 .single-team-area:hover .rt-l15-media img, .rt-team-container .isotope10 .single-team-area:hover .rt-l15-media img, .rt-team-container .carousel11 .single-team-area:hover .rt-l15-media img { transform: scale(1.05); } /* ---------- The band (`.ttp-member-title`) ---------- Content-height, anchored to the bottom, with a diagonal top edge. The extra top padding is the slant area so text never sits in the cut. */ .rt-team-container .layout15 .single-team-area .ttp-member-title, .rt-team-container .isotope10 .single-team-area .ttp-member-title, .rt-team-container .carousel11 .single-team-area .ttp-member-title { /* in flow, sharing the photo's grid cell (see the card rule) - `align-self: end` pins it to the bottom just as `position: absolute` used to, but it still contributes its height to the row, so the card grows instead of clipping it. */ position: relative; grid-area: 1 / 1; align-self: end; width: 100%; z-index: 3; padding: calc(var(--l15-slant) + 6px) 22px 22px; text-align: left; color: #fff; background-color: var(--l15-primary); background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(0, 0, 0, .14) 100%); -webkit-clip-path: polygon(0 var(--l15-slant), 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 var(--l15-slant), 100% 0, 100% 100%, 0 100%); transition: background-color .35s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .layout15 .single-team-area:hover .ttp-member-title, .rt-team-container .isotope10 .single-team-area:hover .ttp-member-title, .rt-team-container .carousel11 .single-team-area:hover .ttp-member-title { background-image: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(0, 0, 0, .28) 100%); } .rt-team-container .layout15 .single-team-area .ttp-member-title h3, .rt-team-container .isotope10 .single-team-area .ttp-member-title h3, .rt-team-container .carousel11 .single-team-area .ttp-member-title h3 { margin: 0 !important; padding: 0 !important; line-height: 1.15; letter-spacing: -.3px; } .rt-team-container .layout15 .ttp-member-title h3 .team-name, .rt-team-container .isotope10 .ttp-member-title h3 .team-name, .rt-team-container .carousel11 .ttp-member-title h3 .team-name { background: none; padding: 0; } .rt-team-container .layout15 .ttp-member-title .tlp-position span, .rt-team-container .isotope10 .ttp-member-title .tlp-position span, .rt-team-container .carousel11 .ttp-member-title .tlp-position span { background: none; padding: 0; } /* ---------- Social - slides in on hover, band grows by its height ---------- */ .rt-team-container .layout15 .ttp-member-title .social-icons, .rt-team-container .isotope10 .ttp-member-title .social-icons, .rt-team-container .carousel11 .ttp-member-title .social-icons { position: static; left: auto; bottom: auto; /* NOT flex: both Alignment controls (shortcode `social.align` and Elementor `social_icons_alignment`) write `text-align`, which a flex container ignores. The chips are already `inline-flex`, so a block wrapper lays them out identically AND honours text-align. `line-height/font-size: 0` kills the inline strut + any whitespace nodes; the chips' own margins replace `gap`. */ display: block; line-height: 0; font-size: 0; /* Spacing is CONSTANT now and lives inside the clipped box, so it no longer has to be animated: at rest `.rt-l15-soc` holds a 0fr row, which clips this element (and its padding) to nothing. 16px top = the old 12px margin-top plus the 4px of headroom the lifted chip needs so `overflow: hidden` cannot shave its top off. The -10px bottom still cancels the chips' own row margin, so the gap to the band's bottom padding is unchanged. */ /* No margin and no padding: a grid item's MARGINS still count toward the grid container's height even in a 0fr track (they left the band 6px too tall), and `box-sizing: border-box` floors its height at its own PADDING (that left a 16px sliver). All strip spacing therefore lives on the chips, inside the clipped box. */ margin: 0; padding: 0; /* Height is owned by `.rt-l15-soc` below; this element only fades and lifts. */ min-height: 0; overflow: hidden; visibility: visible; opacity: 0; transform: translateY(8px); /* This is the EXIT timing (the base rule is what applies once :hover is gone). The fade deliberately LEADS the collapse: the row shuts 90% in ~100ms, so a slower fade would leave the chips visible while `overflow: hidden` sliced through them. The slower enter timing is on the :hover rule below. */ transition: opacity .14s linear, transform .14s cubic-bezier(.2, .7, .2, 1); } /* ---------- The reveal ---------- `grid-template-rows: 0fr -> 1fr` resolves to the strip's EXACT content height, so the easing curve maps 1:1 onto visible motion and the open and close are mirror images. It replaces `max-height: 0 -> 220px`, where the cap was ~4.5x the real ~48px content: the band hit full height in the first 15% of the curve and then sat still for 280ms while the icons were still fading in, and on the way out the icons faded to nothing while the band held full height for 232ms before collapsing on an empty strip. That also animated max-height, margin-top, margin-bottom and padding-top together - four layout properties reflowing every frame. Browsers without animatable `fr` rows (pre-Chrome 107 / Safari 16) simply snap open and shut, which is what the old cap effectively did anyway. */ .rt-team-container .layout15 .ttp-member-title .rt-l15-soc, .rt-team-container .isotope10 .ttp-member-title .rt-l15-soc, .rt-team-container .carousel11 .ttp-member-title .rt-l15-soc { display: grid; grid-template-rows: 0fr; /* EXIT curve: ease-IN, so the row barely moves for the first ~80ms while the chips finish fading, then closes. With the enter curve (fast-start) reversed, the row was 83% shut while the chips were still half visible and `overflow: hidden` cut through them. The enter curve is on the :hover rule below. */ transition: grid-template-rows .28s cubic-bezier(.5, 0, .9, 1); } .rt-team-container .layout15 .single-team-area:hover .ttp-member-title .rt-l15-soc, .rt-team-container .isotope10 .single-team-area:hover .ttp-member-title .rt-l15-soc, .rt-team-container .carousel11 .single-team-area:hover .ttp-member-title .rt-l15-soc { grid-template-rows: 1fr; /* enter: the fast-start curve the rest of the card uses */ transition: grid-template-rows .38s cubic-bezier(.2, .7, .2, 1); } /* The chips arrive one after another once the row is on its way open. Pure transform and opacity, so it costs nothing on top of the reveal. */ .rt-team-container .layout15 .ttp-member-title .social-icons a, .rt-team-container .isotope10 .ttp-member-title .social-icons a, .rt-team-container .carousel11 .ttp-member-title .social-icons a { opacity: 0; transform: translateY(6px); } .rt-team-container .layout15 .single-team-area:hover .ttp-member-title .social-icons a, .rt-team-container .isotope10 .single-team-area:hover .ttp-member-title .social-icons a, .rt-team-container .carousel11 .single-team-area:hover .ttp-member-title .social-icons a { opacity: 1; transform: translateY(0); } .rt-team-container .layout15 .ttp-member-title .social-icons a:nth-child(1), .rt-team-container .isotope10 .ttp-member-title .social-icons a:nth-child(1), .rt-team-container .carousel11 .ttp-member-title .social-icons a:nth-child(1) { transition-delay: .10s, .10s, 0s, 0s, 0s; } .rt-team-container .layout15 .ttp-member-title .social-icons a:nth-child(2), .rt-team-container .isotope10 .ttp-member-title .social-icons a:nth-child(2), .rt-team-container .carousel11 .ttp-member-title .social-icons a:nth-child(2) { transition-delay: .16s, .16s, 0s, 0s, 0s; } .rt-team-container .layout15 .ttp-member-title .social-icons a:nth-child(3), .rt-team-container .isotope10 .ttp-member-title .social-icons a:nth-child(3), .rt-team-container .carousel11 .ttp-member-title .social-icons a:nth-child(3) { transition-delay: .22s, .22s, 0s, 0s, 0s; } .rt-team-container .layout15 .ttp-member-title .social-icons a:nth-child(n+4), .rt-team-container .isotope10 .ttp-member-title .social-icons a:nth-child(n+4), .rt-team-container .carousel11 .ttp-member-title .social-icons a:nth-child(n+4) { transition-delay: .28s, .28s, 0s, 0s, 0s; } /* Leaving, the chips go together and immediately - a staggered exit reads as lag. */ .rt-team-container .layout15 .single-team-area:not(:hover) .ttp-member-title .social-icons a, .rt-team-container .isotope10 .single-team-area:not(:hover) .ttp-member-title .social-icons a, .rt-team-container .carousel11 .single-team-area:not(:hover) .ttp-member-title .social-icons a { transition-delay: 0s; } /* Motion is decoration here; honour the OS setting. */ @media (prefers-reduced-motion: reduce) { .rt-team-container .layout15 .ttp-member-title .rt-l15-soc, .rt-team-container .isotope10 .ttp-member-title .rt-l15-soc, .rt-team-container .carousel11 .ttp-member-title .rt-l15-soc, .rt-team-container .layout15 .ttp-member-title .social-icons, .rt-team-container .isotope10 .ttp-member-title .social-icons, .rt-team-container .carousel11 .ttp-member-title .social-icons, .rt-team-container .layout15 .ttp-member-title .social-icons a, .rt-team-container .isotope10 .ttp-member-title .social-icons a, .rt-team-container .carousel11 .ttp-member-title .social-icons a { transition-duration: .01ms; transition-delay: 0s; } } .rt-team-container .layout15 .single-team-area:hover .ttp-member-title .social-icons, .rt-team-container .isotope10 .single-team-area:hover .ttp-member-title .social-icons, .rt-team-container .carousel11 .single-team-area:hover .ttp-member-title .social-icons { /* No cap and no margin/padding animation: `.rt-l15-soc` opens to the strip's real height, so a second row - or bigger chips from the Social Width/Height controls - is measured rather than guessed at, and can never be sliced off. */ opacity: 1; transform: translateY(0); /* enter: slower and slightly behind the row opening */ transition: opacity .34s cubic-bezier(.2, .7, .2, 1) .04s, transform .34s cubic-bezier(.2, .7, .2, 1) .04s; } .rt-team-container .layout15 .ttp-member-title .social-icons:before, .rt-team-container .isotope10 .ttp-member-title .social-icons:before, .rt-team-container .carousel11 .ttp-member-title .social-icons:before { content: none; } .rt-team-container .layout15 .ttp-member-title .social-icons a:last-child, .rt-team-container .isotope10 .ttp-member-title .social-icons a:last-child, .rt-team-container .carousel11 .ttp-member-title .social-icons a:last-child { margin-right: 0; } .rt-team-container .layout15 .ttp-member-title .social-icons a, .rt-team-container .isotope10 .ttp-member-title .social-icons a, .rt-team-container .carousel11 .ttp-member-title .social-icons a { min-width: 38px; min-height: 38px; /* see layout 13/14: the Social Width/Height controls size the inner , so the chip has to grow with it and clip the glyph box's own background/border. */ width: -webkit-max-content; width: max-content; height: -webkit-max-content; height: max-content; /* replaces the wrapper's `gap` now that it is a block - the bottom margin spaces wrapped rows and is cancelled by the wrapper's -10px bottom margin, so a single row's height is unchanged. */ /* 16px above each row is the gap under the designation, and it doubles as the row gap when the chips wrap. It lives here rather than on `.social-icons` because only spacing INSIDE the clipped item collapses with the 0fr row. */ margin: 16px 10px 0 0; vertical-align: top; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); font-size: 13px; line-height: 1; text-decoration: none; color: #fff; transition: background .2s, color .2s, transform .2s, border-color .2s; } .rt-team-container .layout15 .ttp-member-title .social-icons a i, .rt-team-container .isotope10 .ttp-member-title .social-icons a i, .rt-team-container .carousel11 .ttp-member-title .social-icons a i { color: inherit; background: transparent; border: 0; flex: 0 0 auto; width: auto; height: auto; font-size: inherit; line-height: 1; } .rt-team-container .layout15 .ttp-member-title .social-icons a:hover, .rt-team-container .isotope10 .ttp-member-title .social-icons a:hover, .rt-team-container .carousel11 .ttp-member-title .social-icons a:hover { background: #fff; color: var(--l15-primary); border-color: #fff; transform: translateY(-2px); } .rt-team-container .layout15 .ttp-member-title .social-icons a:hover i, .rt-team-container .isotope10 .ttp-member-title .social-icons a:hover i, .rt-team-container .carousel11 .ttp-member-title .social-icons a:hover i { color: var(--l15-primary) !important; background: transparent !important; } /*********************** Carousel 10 — "Spotlight stage" ***********************/ /* carousel10 is the "slider with thumbnail" layout: an image-only Swiper (.ttp-carousel-thumb, centeredSlides + slideToClickedSlide) synced to a text-only Swiper (.rttm-carousel-main). It has no grid twin, so these rules are its own. Keep _lo-carousel-10.scss (the Elementor twin) in step. Paint and type live in the "paintable defaults (LAST)" block at the end of this file so every Styling control out-ranks them. */ /* ---------- Accent colour ---------- Same plumbing as carousel9: --c10-primary is fed from --l1-primary (sc-css.php writes it from the Styling tab's "Primary Color") and the Elementor Primary Color control writes --c10-primary directly (ElementorFilters::colorControls). */ .rt-team-container .carousel10, .rt-elementor-container .carousel10 { --c10-primary: var(--l1-primary, #143ee5); --c10-primary-700: #0e2aa3; --c10-primary-700: color-mix(in srgb, var(--c10-primary) 72%, #000); --c10-primary-300: #3a63ff; --c10-primary-300: color-mix(in srgb, var(--c10-primary) 82%, #fff); --c10-line: #e7eaf3; --c10-bg: #f3f5fb; } /* ---------- The stage (the thumbnail slider) ---------- */ .rt-team-container .carousel10 .ttp-carousel-thumb { position: relative; border-radius: 28px; padding: 54px 0 104px; /* built entirely from --c10-primary so Primary Color recolours the whole stage */ background: linear-gradient(135deg, #1b2f8f 0%, #143ee5 55%, #3a63ff 100%); background: linear-gradient(135deg, var(--c10-primary-700) 0%, var(--c10-primary) 55%, var(--c10-primary-300) 100%); } .rt-team-container .carousel10 .ttp-carousel-thumb::before { content: ""; position: absolute; top: -140px; right: -90px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%); pointer-events: none; } /* the card lands on this, so the stage darkens towards its bottom edge */ .rt-team-container .carousel10 .ttp-carousel-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to top, rgba(9, 17, 60, .42), transparent); pointer-events: none; } .rt-team-container .carousel10 .ttp-carousel-thumb .swiper-wrapper { align-items: center; } /* Swiper writes the slide WIDTH inline from slidesPerView (the Columns setting), so the tile only needs the gutter and its inner frame. */ .rt-team-container .carousel10 .profile-img-wrapper { display: flex; justify-content: center; padding: 0 10px; } .rt-team-container .carousel10 .profile-img-wrap { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #dfe3ee; cursor: pointer; transform: scale(.72); filter: grayscale(1); opacity: .5; box-shadow: 0 14px 30px rgba(6, 12, 45, .28); transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s cubic-bezier(.2, .7, .2, 1), opacity .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel10 .profile-img-wrapper.round-img .profile-img-wrap { border-radius: 50%; } .rt-team-container .carousel10 .profile-img-wrap img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center 18%; display: block; /* the old design scaled the IMG; the frame is scaled now, so the image must not */ transform: none; } /* "Image flip on hover" wraps the photo in .rt-flip-container > .rt-flip-inner > .rt-flip-front > img, and pro's _cp-flip.scss leaves the front face auto-height. Inside a fixed 3:4 frame that left the image at its natural height with a grey band beneath it, so the whole chain has to stretch. `.profile-img-wrapper` is one of the flip's own hover triggers, so this layout is meant to support it. */ .rt-team-container .carousel10 .profile-img-wrap .rt-flip-container, .rt-team-container .carousel10 .profile-img-wrap .rt-flip-inner, .rt-team-container .carousel10 .profile-img-wrap .rt-flip-front { height: 100%; } .rt-team-container .carousel10 .profile-img-wrap .rt-flip-front img, .rt-team-container .carousel10 .profile-img-wrap .rt-flip-back img { height: 100%; object-fit: cover; } /* the theme underlines content links; the card's own anchors are chips, pills and headings. Held at 0,3,0 so a Typography control's text-decoration still wins. */ .rt-team-container .carousel10 .single-team-area :where(a), .rt-team-container .carousel10 .contact-info :where(a) { text-decoration: none; } .rt-team-container .carousel10 .swiper-slide-active .profile-img-wrap { transform: scale(1); filter: none; opacity: 1; cursor: default; box-shadow: 0 0 0 6px rgba(255, 255, 255, .92), 0 30px 60px rgba(5, 12, 45, .45); } /* the two flanking the active one lift halfway — reads as depth, not a flat strip */ .rt-team-container .carousel10 .swiper-slide-active + .profile-img-wrapper .profile-img-wrap, .rt-team-container .carousel10 .profile-img-wrapper:has(+ .swiper-slide-active) .profile-img-wrap { transform: scale(.86); opacity: .72; filter: grayscale(.65); } /* ---------- The floating card ---------- */ .rt-team-container .carousel10 .carousel-wrapper { position: relative; max-width: 900px; /* -76px of overlap onto the stage, plus the card's own 30px breathing margin below */ margin: -106px auto 0; } /* flex-start, NOT stretch: a member with less content would otherwise be stretched to the tallest slide and carry the difference as a void inside the card. Hugging the content leaves that space outside the card instead, where it reads as ordinary slider padding. */ .rt-team-container .carousel10 .rttm-carousel-main .swiper-wrapper { align-items: flex-start; } .rt-team-container .carousel10 .rttm-carousel-main .rt-grid-item { display: flex; height: auto; margin-bottom: 0; } .rt-team-container .carousel10 .single-team-area { width: 100%; max-width: 780px; /* Keep the margin symmetric: the nav arrows are centred with top:50% on the holder, so an uneven margin would push them off the card's centre. It also holds the -106px wrapper offset to the intended 76px of overlap onto the stage. */ margin: 30px auto; padding: 38px 44px 34px; text-align: center; background: #fff; /* the card carries no drop shadow, so below the stage's bottom edge it would be white on a white page with no boundary at all — this hairline is what gives it its edge. */ border: 1px solid var(--c10-line); border-radius: 24px; /* deliberately NOT a flex column: the designation and department are block-level siblings that this design sets inline-block so they share one meta line, and flex items cannot share a line in a column. */ } /* Name */ .rt-team-container .carousel10 .single-team-area h3 { margin: 0; } /* Designation + department share one meta line. Both are block-level siblings in the template, so they are set inline-block and the separator is drawn only when the designation actually precedes the department. */ .rt-team-container .carousel10 .tlp-position, .rt-team-container .carousel10 .tlp-department { display: inline-block; vertical-align: middle; margin: 10px 0 0; padding: 0; } .rt-team-container .carousel10 .tlp-position + .tlp-department::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #c3c8db; margin: 0 11px 3px 9px; vertical-align: middle; } /* the hairline under the meta line, drawn without adding markup */ .rt-team-container .carousel10 .single-team-area .short-bio::before { content: ""; display: block; width: 36px; height: 2px; border-radius: 2px; background: var(--c10-primary); opacity: .4; margin: 0 auto 18px; } .rt-team-container .carousel10 .short-bio { margin: 16px auto 0; max-width: 600px; } .rt-team-container .carousel10 .short-bio p { margin: 0; } .rt-team-container .carousel10 .single-team-area .profile-content { max-width: none; margin: 22px auto 0; } /* ---------- Contact chips ---------- */ .rt-team-container .carousel10 .contact-info ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0; padding: 0; list-style: none; } .rt-team-container .carousel10 .contact-info li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: var(--c10-bg); border: 1px solid var(--c10-line); transition: background .25s cubic-bezier(.2, .7, .2, 1), border-color .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel10 .contact-info li:hover { border-color: var(--c10-primary); } /* the website row nests its inside the , so the anchor carries the gap too */ .rt-team-container .carousel10 .contact-info li a { display: inline-flex; align-items: center; gap: 8px; } /* ---------- Social chips (the chip is the ) ---------- */ .rt-team-container .carousel10 .single-team-area .social-icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; } .rt-team-container .carousel10 .social-icons a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--c10-line); margin: 0; transition: background .25s cubic-bezier(.2, .7, .2, 1), color .25s cubic-bezier(.2, .7, .2, 1), border-color .25s cubic-bezier(.2, .7, .2, 1), transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel10 .social-icons a:hover { transform: translateY(-3px); } .rt-team-container .carousel10 .social-icons a i { color: inherit; width: auto; height: auto; line-height: 1; } /* !important is required, not decoration: the plugin's per-network brand rules paint the GLYPH's background on hover with !important (`.social-icons a:hover .fa-linkedin { background: #0080b1 !important }` and ~20 siblings), which renders as a coloured square inside the round chip. On this card the chip is the , so the glyph box stays blank. */ .rt-team-container .carousel10 .social-icons a i, .rt-team-container .carousel10 .social-icons a:hover i { background: transparent !important; background-color: transparent !important; color: inherit !important; /* the brand hover rules also set `width/height: 30px` on the GLYPH at (0,4,1) — the pseudo-class counts in the class column — which drops the character to the top of a 30px box (line-height stays 13px) and the icon jumps upward inside the chip on hover. */ width: auto !important; height: auto !important; } /* ---------- Skills ---------- Fns::get_formatted_skill() emits flat `.skill_name` + `.skill-prog` sibling pairs, which fall straight into a two-column grid — label in column 1, bar in column 2. */ .rt-team-container .carousel10 .tlp-team-skill { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 15px 18px; margin: 24px 0 0; padding: 22px 24px; background: var(--c10-bg); border: 1px solid var(--c10-line); border-radius: 16px; text-align: left; } .rt-team-container .carousel10 .tlp-team-skill .skill_name { margin: 0; white-space: nowrap; } .rt-team-container .carousel10 .tlp-team-skill .skill-prog { position: relative; height: 8px; margin: 0 44px 0 0; border: 0; border-radius: 999px; background: #dfe4f2; box-sizing: border-box; } .rt-team-container .carousel10 .tlp-team-skill .skill-prog .fill { /* .fill is set static so the percentage anchors to the TRACK and stops drifting with the value; the sheen is a neutral white wash so the Skill Bar Color control (which writes background-color) still shows through. */ position: static; height: 100%; border-radius: 999px; background-color: var(--c10-primary); background-image: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 65%); } /* the base style draws the percentage as a blue tooltip bubble with a pointer arrow; this design shows it as plain text at the end of the track. */ .rt-team-container .carousel10 .tlp-team-skill .skill-prog .percent-text { position: absolute; right: -44px; top: 50%; transform: translateY(-50%); width: 38px; text-align: right; padding: 0; border-radius: 0; background: none; line-height: 1; } .rt-team-container .carousel10 .tlp-team-skill .skill-prog .percent-text::before { content: none; } /* ---------- Buttons ---------- Resume + Hire Me pair up; Read More is the solid primary below them. */ .rt-team-container .carousel10 .readmore-btn.hirme-resume { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .rt-team-container .carousel10 .readmore-btn { margin-top: 12px; } .rt-team-container .carousel10 .readmore-btn .rt-resume-btn, .rt-team-container .carousel10 .readmore-btn .rt-hire-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--c10-line); transition: border-color .25s cubic-bezier(.2, .7, .2, 1), color .25s cubic-bezier(.2, .7, .2, 1), background .25s cubic-bezier(.2, .7, .2, 1), transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel10 .readmore-btn .rt-ream-me-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 30px; /* `border-width` computes to 0 while `border-style` is none, so the button needs a declared style for the Read More "Border Width" / "Border Color" controls to do anything. Zero-width transparent is invisible until one of them is set. */ border: 0 solid transparent; border-radius: 999px; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel10 .readmore-btn .rt-ream-me-btn::after { content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel10 .readmore-btn .rt-ream-me-btn:hover { transform: translateY(-2px); } .rt-team-container .carousel10 .readmore-btn .rt-ream-me-btn:hover::after { transform: translateX(3px); } .rt-team-container .carousel10 .readmore-btn .rt-resume-btn:hover, .rt-team-container .carousel10 .readmore-btn .rt-hire-btn:hover { transform: translateY(-1px); } /* ---------- Arrows + dots ---------- The nav sits INSIDE .rt-carousel-holder (which is overflow:hidden), so the arrows are kept flush with the holder's edges — the card is 780px inside a 900px holder, which leaves them 60px clear of it without a negative offset that would be clipped. */ .rt-team-container .carousel10 .swiper-nav-main .swiper-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; /* On a carousel the shortcode "Buttons" control's only arm is `.rt-carousel-holder .swiper-arrow { border-color }` — with no border-style declared that control has nothing to paint, so the arrows carry a hairline by default. */ border: 1px solid var(--c10-line); border-radius: 50%; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 10px 26px rgba(20, 30, 75, .08); z-index: 3; transition: background .25s cubic-bezier(.2, .7, .2, 1), color .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel10 .swiper-nav-main .swiper-button-prev { left: 0; } .rt-team-container .carousel10 .swiper-nav-main .swiper-button-next { right: 0; } .rt-team-container .carousel10 .swiper-nav-main .swiper-arrow i { color: inherit; } .rt-team-container .carousel10 .swiper-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px; } .rt-team-container .carousel10 .rt-carousel-holder.swiper .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0; border-radius: 999px; opacity: 1; transition: width .3s cubic-bezier(.2, .7, .2, 1), background .3s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel10 .rt-carousel-holder.swiper .swiper-pagination-bullet-active { width: 26px; } @media (max-width: 900px) { .rt-team-container .carousel10 .ttp-carousel-thumb { padding: 40px 0 92px; border-radius: 22px; } .rt-team-container .carousel10 .carousel-wrapper { margin-top: -100px; } .rt-team-container .carousel10 .single-team-area { padding: 32px 24px 30px; border-radius: 20px; } } @media (max-width: 560px) { .rt-team-container .carousel10 .readmore-btn.hirme-resume { flex-direction: column; } /* the meta line no longer fits on one row, and a wrapped department would start its line with the separator dot — stack them and drop the dot instead. */ .rt-team-container .carousel10 .tlp-position, .rt-team-container .carousel10 .tlp-department { display: block; } .rt-team-container .carousel10 .tlp-position + .tlp-department { margin-top: 6px; } .rt-team-container .carousel10 .tlp-position + .tlp-department::before { display: none; } .rt-team-container .carousel10 .tlp-team-skill { grid-template-columns: minmax(0, 1fr); gap: 6px 0; padding: 18px; } .rt-team-container .carousel10 .swiper-nav-main .swiper-arrow { width: 40px; height: 40px; } } /*********************** End Carousel 10 ***************************************/ /*********************** Carousel 9 - "Blue panel" *****************************/ /* Ported from `Downloads/Team Blue Panel Layout.html`. carousel9 has no grid twin, so these rules are its own. The template is UNCHANGED — every element below is something carousel9.php already emitted; the divider is a `.tlp-position::after` pseudo so no markup had to be added. Keep _lo-carousel-9.scss (the Elementor twin) in step. */ /* ---------- Accent colour ---------- Same plumbing as layouts 10-15: --c9-primary is fed from --l1-primary (sc-css.php writes it from the Styling tab's "Primary Color") and the Elementor Primary Color control writes --c9-primary directly (ElementorFilters::colorControls). */ .rt-team-container .carousel9, .rt-elementor-container .carousel9 { --c9-primary: var(--l1-primary, #143ee5); --c9-primary-700: #0e2aa3; --c9-primary-700: color-mix(in srgb, var(--c9-primary) 72%, #000); --c9-line: #e7eaf3; } /* ---------- Card ---------- */ .rt-team-container .carousel9 .swiper-wrapper { align-items: stretch; } .rt-team-container .carousel9 .rt-grid-item { display: flex; height: auto; } /*********************** Carousel auto-height guard **************************** Carousels 2, 3, 4, 5, 6 and 9 set `align-items: stretch` on `.swiper-wrapper` so every card grows to the tallest slide. That is correct ONLY while Swiper's autoHeight option is off. With autoHeight ON, Swiper sizes the wrapper from the active slide's height — but `stretch` sizes the slide from the wrapper's height. Neither has a value to start from, so both settle at Swiper's 1px floor and the whole slider collapses (the card is still painted at its real height, overflowing a 1px slide, so the layout reads as "gone"). Swiper avoids this in its own stylesheet with `.swiper-autoheight .swiper-wrapper { align-items: flex-start }`; the rules above are more specific and were beating it. Restate it here at (0,4,0) so it wins again. `.swiper-autoheight` is added by Swiper at init, so this only applies when autoHeight is actually on — the stretch rules above still govern the fixed-height case. Carousels 7, 8, 10 and 11 never overrode `align-items`, which is why they were unaffected. The Elementor path has no equivalent override and needs no counterpart. */ .rt-team-container .carousel2 .swiper-autoheight .swiper-wrapper, .rt-team-container .carousel3 .swiper-autoheight .swiper-wrapper, .rt-team-container .carousel4 .swiper-autoheight .swiper-wrapper, .rt-team-container .carousel5 .swiper-autoheight .swiper-wrapper, .rt-team-container .carousel6 .swiper-autoheight .swiper-wrapper, .rt-team-container .carousel9 .swiper-autoheight .swiper-wrapper { align-items: flex-start; } /*********************** End carousel auto-height guard ************************/ .rt-team-container .carousel9 .single-team-area { width: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c9-line); border-radius: 18px; overflow: hidden; text-align: center; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 10px 26px rgba(20, 30, 75, .08); /* No translateY on hover: the slider viewport (.rt-carousel-holder.swiper) is overflow:hidden and flush with the slide, so a lift is clipped at the top — the reference's -8px would slice twice what carousel8's -4px did. */ transition: border-color .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel9 .single-team-area:hover { border-color: transparent; } /* ---------- Photo ---------- */ .rt-team-container .carousel9 .single-team-area figure { position: relative; margin: 0; aspect-ratio: 1 / 1.04; overflow: hidden; background: #dfe3ee; } .rt-team-container .carousel9 .single-team-area figure a { display: block; height: 100%; } .rt-team-container .carousel9 .single-team-area figure img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel9 .single-team-area:hover figure img { transform: scale(1.05); } /* brand wash rising from the panel over the photo base */ .rt-team-container .carousel9 .single-team-area figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--c9-primary-700) 28%, transparent), transparent); opacity: 0; transition: opacity .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel9 .single-team-area:hover figure::after { opacity: 1; } /* ---------- Brand panel ---------- */ .rt-team-container .carousel9 .single-team-area .tlp-overlay { position: relative; margin-top: -26px; padding: 28px 22px 26px; /* Base colour and sheen are SEPARATE longhands on purpose: the Overlay Background Color control writes background-color only, so the old `background: linear-gradient(primary, primary-700)` swallowed it. The sheen is a neutral darkening wash that reproduces the reference's top-to-bottom shading over ANY hue. */ background-color: var(--c9-primary); background-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .28) 100%); color: #fff; text-align: center; border-radius: 24px 24px 18px 18px; overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .rt-team-container .carousel9 .single-team-area .tlp-overlay::before { content: ""; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%); pointer-events: none; } /* Generic white link colour kept at ZERO specificity so the buttons' own colours (and every Style control) out-rank it — a plain rule here painted the Read More label white on its white pill. */ :where(.rt-team-container .carousel9 .tlp-overlay a) { color: #fff; } .rt-team-container .carousel9 .tlp-overlay a { text-decoration: none; } /* Name / role — low-spec so the Name and Designation Style controls still win. */ .rt-team-container .carousel9 h3 { position: relative; margin: 0; /* Reserve two lines. Slides are stretched to a common height, so any block that can change height hands its difference to whichever gap holds the auto margin — a name that wraps at tablet width is what pushed one card's buttons 25px out of step with its neighbours'. No clamp: a name must never be truncated, this only reserves room. grid + align-content centres a one-line name in the reserved box, so the spare line reads as balanced padding instead of a hole above the role. text-align still governs the horizontal, so the alignment controls are unaffected. */ min-height: calc(1.25em * 2); display: grid; align-content: center; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.2px; } /* 0,2,1 — above the theme's `h3{color}` and the plugin's generics, below the Name control's 0,3,1. A :where() here lost to the theme and the name went dark on blue. */ .rt-team-container .carousel9 h3 { color: #fff; } /* anchors INHERIT: a hard colour here would out-rank a Style control that only paints the parent (Elementor's Name Color targets h3, not h3 a) and the visible label would ignore it. */ .rt-team-container .carousel9 h3 a { color: inherit; } .rt-team-container .carousel9 .tlp-position { position: relative; margin: 6px 0 0; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; } /* 0,3,0 — two later generic `.rt-team-container .tlp-position` rules (7806/7860) tie a 0,2,0 default and win on order, leaving the role black when a member has no link. The Designation control is also 0,3,0 but ships in team-sc.css, which loads after this file, so it still wins. */ .rt-team-container .carousel9 .tlp-position { color: rgba(255, 255, 255, .82); } .rt-team-container .carousel9 .tlp-position a { color: inherit; } /* Divider — a pseudo-element so the template needed no new markup. */ .rt-team-container .carousel9 .tlp-position::after { content: ""; display: block; width: 34px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .4); margin: 14px auto 0; } /* Short bio — already emitted by carousel9.php, clamped so long text can't stretch the panel. min-height pins it to the same 2 lines the clamp allows, so a 1-line bio and a 2-line bio leave the card's action block at the same height. Without it the slack lands in whichever gap holds the auto margin and the button spacing differs card to card. */ .rt-team-container .carousel9 .short-bio { position: relative; margin: 14px 0 0; min-height: calc(1.55em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rt-team-container .carousel9 :where(.short-bio), .rt-team-container .carousel9 :where(.short-bio p) { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .86); } .rt-team-container .carousel9 .short-bio p { margin: 0; } /* ---------- Social squares ---------- */ .rt-team-container .carousel9 .single-team-area .social-icons { position: relative; display: flex; justify-content: center; align-items: center; gap: 9px; margin: 16px 0 20px; padding: 0; } /* Four 38px chips + gaps need 179px and the tablet panel offers 178.75, so the row shrinks. aspect-ratio (with height auto) makes the chip shrink SQUARE instead of going 34x38 — graceful at any panel width, and no wrap/overflow. A Height control still overrides it. */ .rt-team-container .carousel9 .social-icons a { width: 38px; height: auto; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; font-size: 14px; transition: background .2s, color .2s, transform .2s; } .rt-team-container .carousel9 .social-icons :where(a) { color: #fff; } .rt-team-container .carousel9 .social-icons a:hover { background: #fff; color: var(--c9-primary); transform: translateY(-3px); } .rt-team-container .carousel9 .social-icons a:hover i, .rt-team-container .carousel9 .social-icons a:hover i[class*="fa"] { color: var(--c9-primary) !important; background: transparent !important; } /* ---------- Actions: Resume + Hire me paired, Read More full width ---------- */ .rt-team-container .carousel9 .readmore-btn { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; /* The FIRST button row takes the auto margin, so any residual slack from uneven content opens above the whole action block instead of between the two rows. */ margin-top: auto; } /* every later row is welded to the one above it — never absorbs slack */ .rt-team-container .carousel9 .readmore-btn ~ .readmore-btn { margin-top: 0; } .rt-team-container .carousel9 .readmore-btn.hirme-resume { margin-bottom: 10px; } .rt-team-container .carousel9 .readmore-btn:not(.hirme-resume) { grid-template-columns: 1fr; } .rt-team-container .carousel9 .readmore-btn a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s; } .rt-team-container .carousel9 .rt-resume-btn, .rt-team-container .carousel9 .rt-hire-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); } .rt-team-container .carousel9 .rt-resume-btn, .rt-team-container .carousel9 .rt-hire-btn { color: #fff; } .rt-team-container .carousel9 .rt-resume-btn:hover, .rt-team-container .carousel9 .rt-hire-btn:hover { background: rgba(255, 255, 255, .2); border-color: #fff; transform: translateY(-1px); } .rt-team-container .carousel9 .rt-ream-me-btn { background: #fff; color: var(--c9-primary-700); } .rt-team-container .carousel9 .rt-ream-me-btn::after { content: "\2192"; font-size: 12px; line-height: 1; display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .rt-team-container .carousel9 .rt-ream-me-btn:hover { /* the pill STAYS white on hover, only the label shifts — matching the reference. Needed explicitly: the generic `.rt-team-container .readmore-btn a:hover` (0,3,1) repaints it blue otherwise. */ background: #fff; color: var(--c9-primary); transform: translateY(-1px); } .rt-team-container .carousel9 .rt-ream-me-btn:hover::after { transform: translateX(3px); } /*********************** End Carousel 9 ****************************************/ /* The old carousel10 rules that used to sit here (an 800px centred text block, a hardcoded #1e73be social colour and a 15px slide margin) are gone — the redesign owns all three in the "Carousel 10" block above. */ /* GLOBAL, not layout-16 — this rule happened to sit in the middle of the old Layout 16 block. Every layout's designation default depends on it, and the "text (kept last)" blocks for layouts 12-16 at the end of this file are placed AFTER it on purpose, because it has the same (0,2,0) specificity and would otherwise win. Do not fold it into a layout block. */ .rt-team-container .tlp-position { color: initial; } /************************ Start Layout 16 ******************/ /* No `margin-bottom` here on purpose: the grid item already carries 30px (`.rt-team-container .even-grid-item, .masonry-grid-item`). Having it on the card too stacked the two into a 60px vertical gap against a 30px horizontal gutter, and left a 30px band between rows even when Margin was set to "No Margin" -- that setting only reaches the item. Spacing belongs to the grid item, as it does in every layout redesigned since (8, 9, 10, 12, 13, 14, 15, isotope3 all set `margin: 0` on the card). */ .rt-team-container .layout16 .single-team-area{ padding: 30px; background-color: #fff; box-shadow: 0 0 38px 0 rgb(0 0 0 / 10%); position: relative; overflow: hidden; } .rt-team-container.rt-grayscale .layout16 img.rt-team-img{ transition: all .3s; transform: scale(1); transition: all 0.3s ease-in-out; filter: grayscale(100%); } .rt-team-container.rt-grayscale .layout16 .single-team-area:hover img.rt-team-img{ transform: scale(1.1); filter:grayscale(0); } .rt-team-container .layout16 .single-team-area:before{ content: ""; width: 70px; height: 70px; background-color: #e1e1e1; border: none; border-radius: 6px; position: absolute; bottom: 22px; right: -40px; z-index: 11; transform: rotate(50deg); transition: all 0.3s ease-in-out; } .rt-team-container .layout16 .single-team-area:after{ content: ""; width: 70px; height: 70px; border: 2px solid #e1e1e1; border-radius: 6px; position: absolute; right: -45px; bottom: -12px; z-index: 10; transform: rotate(50deg); transition: all 0.3s ease-in-out; } .rt-team-container .layout16 .single-team-area:hover:before{ background-color: #007acc; } .rt-team-container .tlp-position{ color:initial; } .rt-team-container .layout16 .single-team-area:hover:after{ border-color: #007acc; } .rt-team-container .layout16 .single-team-area .social-icons{ z-index: 5; position: absolute; bottom: -20%; left: 0; right: 0; visibility: hidden; opacity: 0; width: 100%; padding: 15px 0; background-color:#007acc; margin-top: 0; text-align: center; transition: all 0.3s ease-in-out; } .rt-team-container .layout16 .single-team-area:hover .social-icons{ visibility: visible; opacity: 1; bottom: 0; } .rt-team-container .layout16 .single-team-area .social-icons a:hover i{ background-color:transparent; opacity: .8; } .rt-team-container .layout16 .single-team-area .short-bio{ margin-bottom: 15px; } .rt-team-container .layout16 .single-team-area .tlp-position a{ color: initial; text-decoration: none; } .rt-team-container .layout16 .single-team-area .tlp-content{ background-color: transparent; padding-left: 0; padding-right: 0; padding-top: 20px; padding-bottom: 0; } .rt-team-container .layout16 .readmore-btn a{ padding-right: 18px; padding-left: 18px; /* solid + 0 width = no border by default, but it lets the Styling tab's Border width / Border color render. sc-css.php emits `border-width` and `border-color` for ttp_resume_btn_style / ttp_hireme_btn_style / ttp_readmore_btn_style but never `border-style`, and the initial `border-style:none` forces the computed width to 0 -- so all six of those controls were silently dead on this layout. Layout 3 already carries the same two lines (12822). Kept at (0,3,1): the control's own arm is `.rt-team-container-{id} .readmore-btn .rt-hire-btn` (0,4,0), so it still wins. Do NOT add `.rt-row` here -- that would make this (0,4,1) and pin every button back to 0. */ border-style: solid; border-width: 0; } /* Resume and Hire Me live in one `.readmore-btn` with no separator in the markup, and the anchors are plain inline elements, so their padding boxes butt together with no gap at all -- at fractional widths the two colours round onto each other and read as overlapping. Inline is the wrong display for a padded button anyway: vertical padding is not reserved in the line box, so as soon as the pair wraps to a second line the backgrounds collide. This is the same treatment layout1 (12076) and layout17 (9488) already use. Deliberately NOT scoped to `.ttp-even` -- the gap is missing in both Grid Styles -- and `.rt-row` keeps it off the single page and the popups, which carry their own button rules. Covers the Elementor path too: it renders the same `.rt-row … layout16` hooks. */ .rt-team-container .rt-row.layout16 .readmore-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } /* ---------- Grid Style = "Even": equal card heights (same mechanics as layout1) ---------- `[data-layout*="layout"] .rt-row.ttp-even` already makes the ROW a flex container, so the columns stretch to the tallest one. The card did not follow: it stayed at content height and every row ended up with ragged bottoms. Layout 1 fixes this purely in CSS -- column becomes a flex box, card fills it -- and the same treatment works here. JS is not an option: HeightResize() in tlpteam.js pins `.even-grid-item` to the tallest card, but it returns early for every `.rt-team-container[data-layout*='layout']`, which is every grid layout including this one. Spacing is deliberately untouched. The card keeps its own `margin-bottom`, and a stretched flex item's height is the line height MINUS its margins -- so the cards still end up equal while the gap between rows stays exactly what it was. Scoped to `.ttp-even` so Grid Style = Masonry, where Isotope owns the geometry, is left alone. Both the shortcode and the Elementor path render `.layout16` + `.ttp-even` on the same hooks, so this one block covers both. */ .rt-team-container .rt-row.layout16.ttp-even > [class*="rt-col-"] { display: -webkit-box; display: -ms-flexbox; display: flex; } .rt-team-container .rt-row.layout16.ttp-even .single-team-area { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* Push the button block to the bottom edge so the footers line up across a row, the way layout1's do. `.readmore-btn.hirme-resume` is emitted whenever ANY of the three buttons is on -- even when it is empty and only the plain `.readmore-btn` below it has content -- so anchoring to it catches every combination. */ .rt-team-container .rt-row.layout16.ttp-even .single-team-area .readmore-btn.hirme-resume { margin-top: auto; } /* A flex item's margins never collapse, so a wrapper whose last child carried a bottom margin -- `.short-bio` (its

    has 5px) and `.tlp-team-skill` (the last bar has 10px) -- suddenly measures 10px taller than it did in block flow, and the whole card grows with it. Clipping that one edge margin puts the height back exactly where it was: the margin used to collapse into the wrapper's own larger bottom margin (15px and 30px), so nothing is lost from the gap below either. */ .rt-team-container .rt-row.layout16.ttp-even .single-team-area .short-bio > :last-child, .rt-team-container .rt-row.layout16.ttp-even .single-team-area .tlp-team-skill > :last-child { margin-bottom: 0; } /************************ Start Layout 17 - "Grayscale spotlight" ******************/ /* SHORTCODE ONLY. `layout17` shares ONE template with the Elementor path and BOTH stylesheets load on every page, so every selector here is scoped with `:where(:not(.rt-elementor-container))` — `:where()` contributes ZERO specificity, so this excludes the Elementor path without shifting any selector's weight. The Elementor twin of this card is `tlp-team-pro/src/scss/frontend/layouts/_lo-layout-17.scss`; keep them in step. Markup (tlp-team-pro/templates/layouts/layout17.php): .tlp-portfolio-thum → the photo's clip box .tlp-overlay > .icons-wrapper > .social-icons → the floating vertical pill .tlp-content > .tlp-title h3 / .tlp-position / .tlp-department / .short-bio / .contact-info / .tlp-team-skill / .readmore-btn */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 { --l17-primary: var(--l1-primary, #143ee5); --l17-primary-700: #0e2aa3; --l17-primary-700: color-mix(in srgb, var(--l17-primary) 72%, #000); --l17-ink: #0f1535; --l17-muted: #6b7088; --l17-line: #e7eaf3; /* ---------- Motion ---------- One easing and two durations for the whole card, so every piece of the hover arrives as a single movement. The old curve, cubic-bezier(.2, .7, .2, 1), was so front-loaded that a ".4s" transition was ~90% finished in 120ms and then coasted - it read as a snap, not a transition. This is the standard ease-in-out, which has no such kick. */ --l17-ease: cubic-bezier(.4, 0, .2, 1); --l17-dur: .45s; --l17-dur-img: .6s; } /* ---------- Equal-height cards ---------- */ .rt-team-container:where(:not(.rt-elementor-container)) .rt-row.layout17 { display: flex; flex-wrap: wrap; } .rt-team-container:where(:not(.rt-elementor-container)) .rt-row.layout17 > .rt-grid-item { display: flex; flex-direction: column; } .rt-team-container:where(:not(.rt-elementor-container)) .rt-row.layout17 > .rt-grid-item > .single-team-area { flex: 1 1 auto; display: flex; flex-direction: column; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .readmore-btn:last-child { margin-top: auto; } /* ---------- Card ---------- */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area { position: relative; z-index: 1; padding: 18px 18px 26px; margin-bottom: 30px; text-align: center; background: #fff; border: 1px solid var(--l17-line); border-radius: 18px; /* deliberately NOT `overflow: hidden` - the social pill hangs off the photo's right edge */ overflow: visible; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); transition: transform var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover { transform: translateY(-5px); z-index: 2; } /* THE HOVER FILL IS A CROSS-FADED LAYER, NOT A `background` TRANSITION. `background` cannot interpolate `none` -> `linear-gradient()`, so the gradient was never animated at all: it appeared at full strength on the FIRST frame of hover (hidden behind the white `background-color`, which was the only thing actually fading) and vanished on the first frame of un-hover - leaving the card transparent for an instant before the white faded back in. That flash was the "not smooth". Painting the gradient and the lifted shadow on a `z-index: -1` layer and fading its `opacity` instead gives a true cross-fade in BOTH directions. `opacity` is composited, so the 70px-blur shadow also stops repainting the whole card on every frame. `inset: -1px` covers the 1px border as well, so the border needs no hover state. The card is `position: relative; z-index: 1`, i.e. its own stacking context, so a negative z-index child paints above the card's white background but below all of its content. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(165deg, var(--l17-primary) 0%, var(--l17-primary-700) 100%); box-shadow: 0 28px 70px color-mix(in srgb, var(--l17-primary, #143ee5) 28%, transparent), 0 6px 18px rgba(20, 30, 75, .08); opacity: 0; pointer-events: none; transition: opacity var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover:before { opacity: 1; } /* ---------- Media ---------- `.tlp-portfolio-thum` is the clip box AND the pill's containing block. It was deliberately unpositioned so the pill escaped this `overflow: hidden` and hung off the photo's right edge - but "escaping" meant the offsets were measured from `.single-team-area`, whose padding sits ~19px outside the photo, so the pill landed 12px OUTSIDE the image wrapper. Positioning this box makes `top`/`right` on `.tlp-overlay` mean "inset from the photo", and the pill now slides out from behind the photo's right edge because this `overflow: hidden` finally applies to it. `right: 0` is deliberate: the pill sits FLUSH against the photo's right edge, no gap. No forced ratio and no object-fit - the image keeps its natural proportions and the shortcode's own "Image Size" setting decides the crop. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-portfolio-thum { position: relative; margin: 0 0 18px; border: 0; box-shadow: none; border-radius: 14px; overflow: hidden; background: #dfe3ee; line-height: 0; z-index: auto; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-portfolio-thum figure { margin: 0; border-radius: inherit; overflow: hidden; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-portfolio-thum a { display: block; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-portfolio-thum img { width: 100%; max-width: 100%; height: auto; display: block; filter: grayscale(100%); transform: scale(1); /* one duration for both, or the colour arrives 250ms before the zoom settles */ transition: filter var(--l17-dur-img) var(--l17-ease), transform var(--l17-dur-img) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-portfolio-thum img { filter: grayscale(0); transform: scale(1.03); } /* ---------- Social - a floating vertical pill on the photo's right edge ---------- Offsets are measured from the CARD's padding box (18px padding). */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-overlay { position: absolute; top: 14px; right: 0; bottom: auto; left: auto; display: block; margin: 0; z-index: 3; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .icons-wrapper { position: static; display: block; } /* the reference has no share button */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .icons-wrapper a.share-icon { display: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .social-icons { position: static; right: auto; bottom: auto; width: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; margin: 0; background: #fff; /* Right corners squared: the pill is flush to the photo's right edge, so rounding that side would show slivers of the photo through the corners. */ border-radius: 12px 0 0 12px; box-shadow: 0 12px 28px rgba(15, 21, 53, .18); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(16px) scale(.9); transform-origin: right center; transition: opacity var(--l17-dur) var(--l17-ease), transform var(--l17-dur) var(--l17-ease), visibility var(--l17-dur); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .social-icons { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0) scale(1); /* only on the way IN, so the pill emerges just after the card starts filling; the rest state carries no delay, so it retracts immediately on the way out */ transition-delay: .06s; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .social-icons:before { content: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .social-icons a { min-width: 38px; min-height: 38px; /* see layouts 13-15: the Social Width/Height controls size the inner , so the chip has to grow with it and clip the glyph box's own background/border. */ width: -webkit-max-content; width: max-content; height: -webkit-max-content; height: max-content; margin: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: transparent; border: 0; color: var(--l17-primary); font-size: 14px; line-height: 1; text-decoration: none; transition: background .25s var(--l17-ease), color .25s var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .social-icons a i { color: inherit; background: transparent; border: 0; flex: 0 0 auto; width: auto; height: auto; font-size: inherit; line-height: 1; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .social-icons a:hover { background: var(--l17-primary); color: #fff; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .social-icons a:hover i { background: transparent !important; opacity: 1; } /* ---------- Content ---------- */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-content { background-color: transparent; padding: 0; position: static; color: var(--l17-ink); /* `.percent-text` inherits its colour from here via `.tlp-team-skill`; without this the inherited value jumped while every sibling faded */ transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-content a { text-decoration: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area.has-thumbnail .tlp-content { margin-top: 0; padding-top: 0; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-title { margin: 0; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-title h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.2px; color: var(--l17-ink); transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-title h3 a { color: inherit; text-decoration: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-position { margin: 0 0 14px; padding: 0; font-size: 15px; font-weight: 400; letter-spacing: .2px; color: var(--l17-muted); transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-position a { color: inherit; text-decoration: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-department { margin: 0 0 12px; font-size: 15px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--l17-primary); transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .short-bio { margin: 0 0 14px; font-size: 15px; transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .short-bio p { margin: 0; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .contact-info { margin: 0 0 16px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .contact-info ul { margin: 0; padding: 0; list-style: none; display: inline-flex; flex-direction: column; gap: 6px; text-align: left; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .contact-info ul li { margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--l17-muted); transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .contact-info ul li i { width: 15px; text-align: center; font-size: 12px; color: var(--l17-primary); transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .contact-info ul li a, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .contact-info ul li span { color: inherit; text-decoration: none; word-break: break-word; } /* ---------- Skills ---------- */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-team-skill { margin: 0 0 16px; text-align: left; transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-team-skill .skill_name { margin: 0 0 5px; font-size: 14px; font-weight: 500; letter-spacing: .2px; transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-team-skill .skill-prog { position: relative; height: 6px; margin: 0 0 12px; border-radius: 999px; overflow: visible; transition: background var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-team-skill .skill-prog .fill { height: 100%; border-radius: 999px; transition: background var(--l17-dur) var(--l17-ease), width .8s var(--l17-ease); } /* the base style draws the percentage as a blue tooltip bubble with a pointer arrow; this design shows it as plain text riding above the end of the bar. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-team-skill .skill-prog .fill .percent-text { position: absolute; right: 0; bottom: calc(100% + 4px); font-size: 12px; font-weight: 500; line-height: 1; /* `!important` is required, not cosmetic: the Primary Color arm in sc-css.php paints `.tlp-team-skill .skill-prog .fill .percent-text` with `!important`, so specificity alone can never win. That arm serves the layouts whose design keeps the percentage as a coloured tooltip bubble and must stay; this one shows plain text above the bar, so it opts out. The Skills text-colour controls are unaffected. */ background: none !important; padding: 0; border-radius: 0; /* colour is NOT set here on purpose — see the low-specificity block at the end. Setting it in this (0,7,0) rule out-ranked the card-hover invert, so the percentage stayed muted grey on the filled card while its label turned white. */ transition: color var(--l17-dur) var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-team-skill .skill-prog .fill .percent-text:before { content: none; } /* ---------- Hover: the card fills with the brand gradient, so all text inverts ---------- */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-content, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-title h3, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-title h3 a { color: #fff; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-position, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-position a, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .short-bio, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .short-bio p, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .contact-info ul li, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-email, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-phone, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-mobile, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-location, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-website, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-url { color: rgba(255, 255, 255, .85); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .contact-info ul li i, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area:hover .tlp-department { color: #fff; } /* ---------- Buttons ---------- SPECIFICITY: sc-css.php writes the button and skill controls at (0,4,0) normal / (0,5,0) hover (`$selector` is TWO classes). The colour rules below are pushed under that with `:where()` to (0,3,0) - high enough to beat the base `.rt-team-container .readmore-btn a` (0,2,1) that paints every button #007acc, low enough that ANY control overrides them. Rest and the hover invert are BOTH (0,3,0), so the invert must stay LATER in the file. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .readmore-btn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .readmore-btn.hirme-resume { margin-bottom: 8px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .readmore-btn a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 11px 24px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: background var(--l17-dur) var(--l17-ease), color var(--l17-dur) var(--l17-ease), border-color var(--l17-dur) var(--l17-ease), box-shadow .25s var(--l17-ease), transform .25s var(--l17-ease); } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .readmore-btn .rt-resume-btn, .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .readmore-btn .rt-hire-btn { padding: 9px 18px; font-size: 13px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .readmore-btn a:hover { transform: translateY(-2px); } /* -- resting colours, deliberately weak (see the note above) -- */ .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17) .readmore-btn .rt-ream-me-btn { background: var(--l17-primary); border: 1px solid var(--l17-primary); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--l17-primary, #143ee5) 25%, transparent); } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17) .readmore-btn .rt-resume-btn, .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17) .readmore-btn .rt-hire-btn { background: #fff; border: 1px solid var(--l17-line); color: var(--l17-ink); } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17) .tlp-team-skill .skill_name { color: var(--l17-ink); } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17) .tlp-team-skill .skill-prog { background: var(--l17-line); } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17) .tlp-team-skill .skill-prog .fill { background: var(--l17-primary); } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17) .tlp-team-skill { color: var(--l17-muted); } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17) .tlp-team-skill .skill-prog .fill .percent-text { /* (0,5,0): high enough to beat the plugin's own `.percent-text { color: #fff }` (0,4,0), which would leave the percentage invisible on the white card, but low enough that the hover invert below and any Skills colour control still win. */ color: inherit; } /* -- card-hover invert (must stay AFTER the resting rules) -- */ .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17 .single-team-area:hover) .readmore-btn .rt-ream-me-btn { background: #fff; border-color: #fff; color: var(--l17-primary); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17 .single-team-area:hover) .readmore-btn .rt-resume-btn, .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17 .single-team-area:hover) .readmore-btn .rt-hire-btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: #fff; } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17 .single-team-area:hover) .tlp-team-skill .skill_name { color: #fff; } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17 .single-team-area:hover) .tlp-team-skill .skill-prog { background: rgba(255, 255, 255, .25); } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17 .single-team-area:hover) .tlp-team-skill .skill-prog .fill { background: #fff; } .rt-team-container:where(:not(.rt-elementor-container)) :where(.layout17 .single-team-area:hover) .tlp-team-skill .skill-prog .fill .percent-text { color: rgba(255, 255, 255, .85); } /************************ Start Layout 18 - "Peel card" ******************/ /* SHORTCODE ONLY. `layout18` is a SHARED key (there is no `layout-el-18`) and BOTH stylesheets load on every page, so every selector here is scoped with `:where(:not(.rt-elementor-container))` — `:where()` contributes ZERO specificity, so it excludes the Elementor path without shifting any selector's weight. The Elementor twin is `tlp-team-pro/src/scss/frontend/layouts/_lo-layout-18.scss`; BOTH are generated from the same source body, so keep them in step. Redesigned from `Team Peel Card Layout.html`: a photo header with a slide-in social rail on its left, and a white profile card lifted over it with a folded top-right corner. */ /* ---------- Accent + design tokens ---------- --l18-primary is fed from --l1-primary (sc-css.php writes it from the Styling tab's "Primary Color"); the Elementor Primary Color control writes --l18-primary directly. Deliberately NOT chained off --rttm-primary-color, which Pro pins to #007acc on :root. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 { --l18-primary: var(--l1-primary, #143ee5); --l18-primary-600: #1133c2; --l18-primary-600: color-mix(in srgb, var(--l18-primary) 84%, #000); --l18-primary-50: #eef1ff; --l18-primary-50: color-mix(in srgb, var(--l18-primary) 8%, #fff); --l18-ink: #0f1535; --l18-ink-2: #3a3f5c; --l18-muted: #6b7088; --l18-line: #e7eaf3; --l18-curl: 34px; } /* ---------- Equal-height cards ---------- The reference lays the cards on a CSS grid, so a row shares one height. The plugin's row is a float/column grid; flexing just THIS row fixes the ragged bottoms and the columns keep their percentage widths, so the breakpoints are untouched. */ .rt-team-container:where(:not(.rt-elementor-container)) .rt-row.layout18 { display: flex; flex-wrap: wrap; } .rt-team-container:where(:not(.rt-elementor-container)) .rt-row.layout18 > .rt-grid-item { display: flex; flex-direction: column; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area { position: relative; margin-bottom: 30px; background: none; border: 0; padding: 0; text-align: left; flex: 1 1 auto; display: flex; flex-direction: column; /* THE CARD'S ELEVATION LIVES HERE, not on `.tlp-content`. That element is clipped for the peeled corner, and the render order is filter -> clip-path, so any shadow drawn on it is trimmed by the polygon's square corners and shows as a hard rectangular fringe. This wrapper is unclipped, so its drop-shadow is generated from the subtree's real alpha and traces the photo + the notched, rounded card correctly. */ filter: drop-shadow(0 1px 1px rgba(20, 30, 75, .05)) drop-shadow(0 6px 12px rgba(20, 30, 75, .07)); transition: filter .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area:hover { filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--l18-primary, #143ee5) 20%, transparent)) drop-shadow(0 3px 8px rgba(20, 30, 75, .10)); } /* the white card takes the slack so every card in a row ends level */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-content { flex: 1 1 auto; display: flex; flex-direction: column; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .readmore-btn:last-child { margin-top: auto; } /* ---------- Photo header ---------- Sits BEHIND the card. It is a flex row so the social rail can be an in-flow child pinned left — that way the photo grows to fit however many icons a member has. `object-fit` is deliberate here: this is a fixed-height header, not a natural-flow portrait. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-portfolio-thum { position: relative; z-index: 1; min-height: 230px; margin: 0 10px; display: flex; align-items: center; border-radius: 16px; overflow: hidden; background: #dfe3ee linear-gradient(135deg, #dbe0f5, #c7cfea); /* elevation lives on `.single-team-area` so it is not clipped — see the note there */ box-shadow: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-portfolio-thum figure { position: absolute; inset: 0; margin: 0; line-height: 0; /* follow whatever radius the thumb ends up with, so the Image Border Radius control (which lands on .tlp-portfolio-thum) still clips the photo correctly */ border-radius: inherit; overflow: hidden; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-portfolio-thum figure a { display: block; height: 100%; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-portfolio-thum img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center 22%; display: block; transform: scale(1); transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area:hover .tlp-portfolio-thum img { transform: scale(1.06); } /* ---------- Social rail ---------- In flow on the photo's left edge, slid out of view until the card is hovered. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-overlay { position: relative; z-index: 2; top: auto; right: auto; left: auto; bottom: auto; margin: 0 auto 0 0; padding: 0; transform: translateX(calc(-100% - 4px)); opacity: 0; transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .3s cubic-bezier(.2, .7, .2, 1); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area:hover .tlp-overlay { transform: translateX(0); opacity: 1; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-overlay .icons-wrapper { position: static; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 46px; } /* the reference has no share button — the rail is only the social links */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-overlay .icons-wrapper a.share-icon { display: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-overlay .social-icons { position: static; top: auto; left: auto; bottom: auto; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-overlay .social-icons:before { content: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-overlay .social-icons > a { min-width: 36px; min-height: 36px; /* see layouts 13-17: the Social Width/Height controls size the inner , so the chip has to grow with it and clip the glyph box's own background/border. */ width: -webkit-max-content; width: max-content; height: -webkit-max-content; height: max-content; flex: 0 0 auto; margin: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .96); color: var(--l18-primary); border: 0; border-radius: 10px; font-size: 13px; line-height: 1; text-decoration: none; /* the old card faded these in one by one; the whole rail slides in now */ opacity: 1; visibility: visible; transform: none; box-shadow: 0 6px 14px rgba(15, 21, 53, .18); transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-overlay .social-icons > a i { color: inherit; background: transparent; border: 0; flex: 0 0 auto; width: auto; height: auto; font-size: inherit; line-height: 1; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-overlay .social-icons > a:hover { background: var(--l18-primary); color: #fff; transform: translateX(2px); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-overlay .social-icons > a:hover i { background: transparent !important; color: inherit; } /* ---------- The peeled card ---------- Lifts over the photo by 34px. The top-right corner is cut away with clip-path and the folded flap is drawn as a ::before triangle. (::before, not ::after — the shortcode "Content Background Color" control already targets `.tlp-content:after`.) */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-content { position: relative; z-index: 3; margin: -34px 0 0; padding: 24px 24px 26px; background: #fff; border: 1px solid var(--l18-line); border-radius: 16px; /* NO shadow here — see `.single-team-area`. The render order is filter -> clip-path, so anything drawn on this element gets trimmed by the polygon below, which has square corners; that leaves a hard rectangular fringe outside the rounded corners. */ -webkit-clip-path: polygon(0 0, calc(100% - var(--l18-curl)) 0, 100% var(--l18-curl), 100% 100%, 0 100%); clip-path: polygon(0 0, calc(100% - var(--l18-curl)) 0, 100% var(--l18-curl), 100% 100%, 0 100%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area:hover .tlp-content { transform: translateY(-6px); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-content:before { content: ""; position: absolute; top: 0; right: 0; width: var(--l18-curl); height: var(--l18-curl); z-index: 2; background: linear-gradient(135deg, #eef1ff 0%, #d7deff 55%, #c2ccf7 100%); -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); box-shadow: -2px 2px 6px rgba(20, 30, 75, .12); border-bottom-left-radius: 4px; } /* ---------- Identity ---------- */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-title { margin: 0; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-title h3 { margin: 0; padding: 0; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.2px; color: var(--l18-ink); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-title h3 a { color: inherit; text-decoration: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-position { display: inline-flex; align-self: flex-start; margin: 8px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--l18-primary-50); color: var(--l18-primary); font-size: 11.5px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; line-height: 1.6; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-position a { color: inherit; text-decoration: none; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .short-bio { margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--l18-muted); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .short-bio p { margin: 0; } /* ---------- Contact ---------- */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .contact-info { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--l18-line); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .contact-info ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .contact-info ul li { margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--l18-ink-2); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .contact-info ul li i { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--l18-primary-50); color: var(--l18-primary); border-radius: 8px; font-size: 12px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .contact-info ul li a, .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .contact-info ul li span { color: inherit; text-decoration: none; word-break: break-word; transition: color .2s cubic-bezier(.2, .7, .2, 1); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .contact-info ul li a:hover { color: var(--l18-primary); } /* ---------- Skills ---------- */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-team-skill { margin: 18px 0 0; text-align: left; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-team-skill .skill_name { margin: 0 0 5px; font-size: 12.5px; font-weight: 500; letter-spacing: .2px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-team-skill .skill-prog { position: relative; height: 6px; margin: 0 0 12px; border-radius: 999px; overflow: visible; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-team-skill .skill-prog .fill { height: 100%; border-radius: 999px; transition: background .35s cubic-bezier(.2, .7, .2, 1), width .8s cubic-bezier(.2, .7, .2, 1); } /* the base style draws the percentage as a tooltip bubble with a pointer arrow; this design shows it as plain text riding above the end of the bar. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-team-skill .skill-prog .percent-text { position: absolute; right: 0; bottom: calc(100% + 4px); font-size: 11.5px; font-weight: 500; line-height: 1; background: none; padding: 0; border-radius: 0; /* the base rule `.tlp-team-skill .skill-prog .fill .percent-text` paints this #fff and sits LATER in tlpteam.css, so a low-specificity colour default loses and the percentage goes invisible on the white card. Inherit instead: the default comes from `.tlp-team-skill` below, and the Skills "Text Color" control still overrides it. */ color: inherit; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .tlp-team-skill .skill-prog .percent-text:before { content: none; } /* ---------- Buttons ---------- Resume + Hire Me share a two-column row; Read More is the full-width primary below it. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .readmore-btn.hirme-resume { margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .readmore-btn:last-child { display: grid; margin-top: 9px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .readmore-btn a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 11px 18px; font-weight: 500; font-size: 13.5px; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1), border-color .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s cubic-bezier(.2, .7, .2, 1); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .single-team-area .readmore-btn .rt-ream-me-btn:hover { transform: translateY(-2px); } /* ---------- Colour defaults, deliberately weak ---------- These sit at (0,3,0)/(0,4,0): above the plugin's base button and skill styling, below every Read More / Resume / Hire Me / Skills control. Do NOT reach for `:where()` here — Sass mangles a selector whose compound starts with `:where(` after a descendant combinator, and the result silently stops matching. Shortening the chain achieves the same weight safely. */ .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .rt-resume-btn, .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .rt-hire-btn { background: #fff; color: var(--l18-ink-2); border: 1px solid var(--l18-line); border-radius: 10px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .rt-resume-btn:hover, .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .rt-hire-btn:hover { border-color: var(--l18-primary); color: var(--l18-primary); background: var(--l18-primary-50); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .rt-ream-me-btn { background: var(--l18-primary); color: #fff; border: 1px solid transparent; border-radius: 10px; box-shadow: 0 6px 16px color-mix(in srgb, var(--l18-primary, #143ee5) 25%, transparent); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .rt-ream-me-btn:hover { background: var(--l18-primary-600); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--l18-primary, #143ee5) 35%, transparent); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .tlp-team-skill { color: var(--l18-muted); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .tlp-team-skill .skill_name { color: var(--l18-ink); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .tlp-team-skill .skill-prog { background: var(--l18-line); } .rt-team-container:where(:not(.rt-elementor-container)) .layout18 .tlp-team-skill .skill-prog .fill { background: var(--l18-primary); } /*************************** pop up ****************************/ #tlp-popup-wrap .tlp-popup-singlePage-counter { color: #fff; position: absolute; margin: auto; right: 40px; top: 0; bottom: 0; font: 400 13px/30px "Open Sans", sans-serif; height: 30px; } .tlp-popup-wrap { min-height: 100%; position: fixed; width: 100%; left: 0; top: 0; margin-left: 100%; display: none; overflow-y: scroll; overflow-x: hidden; z-index: 999999; padding: 0px; } .tlp-popup-wrap:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .tlp-popup-wrap .tlp-popup-navigation-wrap { background-color: #8cc63e; } .tlp-popup-wrap .tlp-popup-loading { background: url("../images/tlp-loading.gif") no-repeat center; height: 200px; } .tlp-popup-content { width: 100%; height: 100%; background: #fff; position: fixed; overflow-y: scroll; padding-bottom: 30px; } .tlp-popup-singlePage-sticky .tlp-popup-navigation-wrap { position: fixed; top: 0; } .tlp-popup-singlePage .tlp-popup-next, .tlp-popup-singlePage .tlp-popup-prev { width: 44px; height: 44px; bottom: 0; } .tlp-popup-singlePage .tlp-popup-next { /* background: url("../images/tlp-sprite.png") no-repeat scroll -46px -92px transparent; right: 0; bottom: 0; left: 108px; */ } .tlp-popup-navigation .tlp-popup-next, .tlp-popup-navigation .tlp-popup-close, .tlp-popup-navigation .tlp-popup-prev { display: inline-block; margin: 5px !important; cursor: pointer; border: 1px solid; border-radius: 50%; display: inline-flex; padding: 10px; align-items: center; justify-content: center; color: #fff; font-size: 27px; } .tlp-popup-navigation { padding: 5px 0px; text-align: center; } .tlp-popup-singlePage .tlp-popup-next:hover { /* background-position: -46px -138px; */ } .tlp-popup-navigation, .tlp-popup-navigation-wrap { width: 100%; } .tlp-detail ul.author-latest-post { margin: 2px 0px 10px 20px !important; } .tlp-detail ul.author-latest-post li { padding: 2px 0px; } .tlp-team-skill { margin-bottom: 30px; } /*************** Button ********************/ /* NOTE: the old generic `.button-group` filter-bar rules (black pills, #26aae1 active, font-weight:400 !important, margin:5px) were removed. `.button-group` only ever appears on the isotope filter bar (`ttp-isotope-buttons button-group filter-button-group`), which the global `.ttp-isotope-buttons` nav style now handles for every isotope layout — the old !important weight + margin here fought that redesign on all isotope layouts. */ /******************************* Next Preview ******************/ .tlp-popup-singlePage .tlp-popup-prev { /* background: url("../images/tlp-sprite.png") no-repeat scroll 0 -92px transparent; */ /* left: 0; */ } .tlp-popup-singlePage .tlp-popup-prev:hover { /* background-position: 0 -138px; */ } .tlp-popup-singlePage .tlp-popup-close { /* background: url("../images/tlp-sprite.png") no-repeat scroll -92px -92px transparent; */ height: 44px; width: 44px; margin: auto; /* top: 0; right: 0; bottom: 0; left: 0; */ } .tlp-popup-singlePage .tlp-popup-close:hover { background-position: -92px -138px; } .tlp-layout-isotope .team-member { display: inline-block; float: left; } .rt-team-container figure { margin: 0; } .rt-team-container img { max-width: 100%; height: auto; vertical-align: middle; } .rt-team-container .img-responsive { display: block; max-width: 100%; width: 100%; height: auto; } .rt-team-container .img-responsive.swiper-lazy:not(.swiper-lazy-loaded) { visibility: hidden; opacity: 0; } .rt-team-container figure { position: relative; width: 100%; overflow: hidden; } .rt-team-container .swiper-lazy-preloader { width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; border-width: 2px; border-color: #fb4c35; border-top-color: transparent; } .rt-team-container .img-rounded { border-radius: 6px; } .rt-team-container .img-thumbnail { padding: 4px; line-height: 1.42857143; background-color: #ffffff; border: 1px solid #dddddd; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; display: inline-block; max-width: 100%; height: auto; } .rt-team-container .img-circle { border-radius: 50%; } .rt-team-container .table-responsive { overflow-x: auto; min-height: 0.01%; } /**********************************************************************/ /********************************* pagination *************************/ /**********************************************************************/ .rt-team-container .rt-pagination-wrap .rt-cb-page-prev-next > * { margin-left: 1px; margin-right: 1px; font-size: 16px; line-height: 1.55; display: inline-block; width: 30px; height: 30px; text-align: center; font-size: 18px; background-color: #bcbcbc; color: #fff; line-height: 30px; bottom: auto; cursor: pointer; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; } .rt-team-container .rt-pagination-wrap .rt-cb-page-prev-next > * i { line-height: 1; } .rt-team-container .rt-pagination-wrap .rt-cb-page-prev-next > .rt-disabled { opacity: 0.5; pointer-events: none; } .rt-cb-page-prev-next { text-align: left; } .rt-team-container .rt-pagination-wrap .rt-loadmore-style .rt-loadmore-loading { color: #fff; position: absolute; top: 50%; left: 50%; margin-top: -32px; margin-left: -32px; visibility: hidden; opacity: 0; } .rt-ball-scale-multiple.rt-2x { width: 64px; height: 64px; } .rt-ball-scale-multiple.rt-2x > div { width: 64px; height: 64px; } .rt-ball-scale-multiple, .rt-ball-scale-multiple > div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .rt-ball-scale-multiple > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .rt-ball-scale-multiple > div:nth-child(2) { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .rt-ball-scale-multiple > div { position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 100%; opacity: 0; -webkit-animation: ball-scale-multiple 1s 0s linear infinite; -moz-animation: ball-scale-multiple 1s 0s linear infinite; -o-animation: ball-scale-multiple 1s 0s linear infinite; animation: ball-scale-multiple 1s 0s linear infinite; } .rt-team-container .rt-pagination-wrap { text-align: center; margin-top: 10px; } .rt-team-container .rt-pagination-wrap .rt-infinite-action.rt-active-elm { display: block; } .rt-team-container .rt-pagination-wrap .rt-infinite-action { width: 40px; height: 40px; margin: 0 auto; position: relative; display: none; border-top-left-radius: 50%; -webkit-border-top-left-radius: 50%; -moz-border-top-left-radius: 50%; -ms-border-top-left-radius: 50%; -o-border-top-left-radius: 50%; border-top-right-radius: 50%; -webkit-border-top-right-radius: 50%; -moz-border-top-right-radius: 50%; -ms-border-top-right-radius: 50%; -o-border-top-right-radius: 50%; border-bottom-left-radius: 50%; -webkit-border-bottom-left-radius: 50%; -moz-border-bottom-left-radius: 50%; -ms-border-bottom-left-radius: 50%; -o-border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; -webkit-border-bottom-right-radius: 50%; -moz-border-bottom-right-radius: 50%; -ms-border-bottom-right-radius: 50%; -o-border-bottom-right-radius: 50%; } .rt-team-container .rt-pagination-wrap .rt-infinite-action .rt-infinite-loading { color: rgba(251, 76, 53, 0.5); position: absolute; top: 50%; left: 50%; margin-top: -32px; margin-left: -32px; } .rt-team-container .rt-pagination-wrap .rt-loadmore-style { cursor: pointer; position: relative; user-select: none; -webkit-user-select: none; } .rt-team-container .rt-pagination-wrap .rt-loadmore-style.rt-hidden-elm, .rt-team-container .rt-pagination-wrap .rt-infinite-action.rt-hidden-elm, .rt-team-container .rt-pagination-wrap .rt-page-numbers.rt-hidden-elm, .rt-team-container .rt-pagination-wrap .rt-cb-page-prev-next.rt-hidden-elm { display: none !important; } .rt-team-container .rt-pagination-wrap .rt-loadmore-style.rt-lm-loading .rt-loadmore-text { opacity: 0; visibility: hidden; } .rt-team-container .rt-pagination-wrap .rt-loadmore-style.rt-lm-loading .rt-loadmore-loading { opacity: 1; visibility: visible; } .rt-team-container .rt-pagination-wrap .rt-loadmore-btn { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background-color: #fb4c35; text-decoration: none; padding: 9px 20px 8px 20px; display: inline-block; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; } .rt-team-container .rt-loadmore-btn:hover { background-color: #666; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages { float: none; padding-top: 0.1px; padding-bottom: 0.1px; } .rt-team-container .rt-pagination-wrap .rt-page-numbers.rt-lm-loading { pointer-events: none; opacity: 0.5; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages ul { float: none; text-align: center; font-size: 0; line-height: 0; margin: -2px; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages ul li { float: none; font-size: 16px; line-height: 1.55; display: inline-block; min-width: 30px; min-height: 30px; border: none; padding: 2px; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages ul li > a { -moz-border-top-left-radius: 0; -ms-border-top-left-radius: 0; -o-border-top-left-radius: 0; -moz-border-top-right-radius: 0; -ms-border-top-right-radius: 0; -o-border-top-right-radius: 0; -moz-border-bottom-left-radius: 0; -ms-border-bottom-left-radius: 0; -o-border-bottom-left-radius: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-bottom-right-radius: 0; -ms-border-bottom-right-radius: 0; -o-border-bottom-right-radius: 0; text-decoration: none; min-width: 30px; height: 30px; font-size: 16px; line-height: 1.55; font-weight: normal; color: #999; letter-spacing: 0; line-height: 29px; border: 1px solid #d7d7d7; display: block; padding-left: 8px; padding-right: 8px; color: #999; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages ul li.active > a { background-color: #fb4c35; color: #fff; } /********************************* OLD pagination ************************/ .rt-team-container .tlp-pagination { text-align: center; } .rt-team-container .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .rt-team-container .pagination > li { display: inline; } .rt-team-container .pagination > li > a, .rt-team-container .pagination > li > span { position: relative; float: left; padding: 6px 12px; line-height: 1.42857143; text-decoration: none; color: #337ab7; background-color: #ffffff; border: 0; margin-left: -1px; } .rt-team-container .pagination > li:first-child > a, .rt-team-container .pagination > li:first-child > span { margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .rt-team-container .pagination > li:last-child > a, .rt-team-container .pagination > li:last-child > span { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .rt-team-container .pagination > li > a:hover, .rt-team-container .pagination > li > span:hover, .rt-team-container .pagination > li > a:focus, .rt-team-container .pagination > li > span:focus { z-index: 2; color: #23527c; background-color: #eeeeee; border-color: #dddddd; } .rt-team-container .pagination > .active > a, .rt-team-container .pagination > .active > span, .rt-team-container .pagination > .active > a:hover, .rt-team-container .pagination > .active > span:hover, .rt-team-container .pagination > .active > a:focus, .rt-team-container .pagination > .active > span:focus { z-index: 3; color: #ffffff; background-color: #337ab7; cursor: default; } .rt-team-container .pagination > .disabled > span, .rt-team-container .pagination > .disabled > span:hover, .rt-team-container .pagination > .disabled > span:focus, .rt-team-container .pagination > .disabled > a, .rt-team-container .pagination > .disabled > a:hover, .rt-team-container .pagination > .disabled > a:focus { color: #777777; background-color: #ffffff; border-color: #dddddd; cursor: not-allowed; } .rt-team-container .pagination-lg > li > a, .rt-team-container .pagination-lg > li > span { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; } .rt-team-container .pagination-lg > li:first-child > a, .rt-team-container .pagination-lg > li:first-child > span { border-bottom-left-radius: 6px; border-top-left-radius: 6px; } .rt-team-container .pagination-lg > li:last-child > a, .rt-team-container .pagination-lg > li:last-child > span { border-bottom-right-radius: 6px; border-top-right-radius: 6px; } .rt-team-container .pagination-sm > li > a, .rt-team-container .pagination-sm > li > span { padding: 5px 10px; font-size: 12px; line-height: 1.5; } .rt-team-container .pagination-sm > li:first-child > a, .rt-team-container .pagination-sm > li:first-child > span { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .rt-team-container .pagination-sm > li:last-child > a, .rt-team-container .pagination-sm > li:last-child > span { border-bottom-right-radius: 3px; border-top-right-radius: 3px; } /****************************** detail page *************************/ .tlp-single-container { margin: 25px auto; width: 100%; max-width: 1170px;} .rt-team-container .tlp-detail { text-align: left !important; padding-bottom: 30px !important; } .rt-team-container .tlp-detail ul { margin: 10px 0px; } .tlp-single-detail { display: inline-block; width: 100%; line-height: 1.6; } .rt-team-container .tlp-detail .tlp-position, .tlp-single-detail .tlp-position { font-weight: 400; margin-bottom: 20px; font-size: 20px; } .tlp-single-detail .social-icons a { /*background: #00afd1;*/ } #tlp-member-container:after { clrar: both; content: "."; display: block; visibility: hidden; height: 0; } .rt-team-container .tlp-detail .social-icons { margin-bottom: 15px; } .tlp-single-detail .tlp-team-skill ul { margin: 0; } .tlp-single--detail ul li label { font-weight: bold; margin-right: 10px; } /* md POPUP */ .md-modal { top: 10%; position: fixed; left: 0; right: 0; margin: auto; width: 100%; max-width: 1000px; height: 70%; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .md-show { visibility: visible; } .md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(0, 0, 0, 0.9); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show ~ .md-overlay { opacity: 1; visibility: visible; } .md-modal .social-icons { /* margin-top: 10px; */ } .md-modal .social-icons a { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; color: #fff; } .md-modal .social-icons a i { line-height: 30px; } .md-modal .social-icons .fa { font-size: 22px; padding-top: 5px; width: 30px; height: 30px; color: #fff; } .md-modal .social-icons a:hover .fa-facebook-f { background: #3b5999; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-twitter { background: #3aa9e0; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-linkedin { background: #0080b1; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-xing { background: #1C5D5B; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-google-plus { background: #d04333; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-youtube { background: #cd322d; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-soundcloud { background: #ff5500; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-vimeo { background: #44bbff; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-instagram { background: #3e729a; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-skype { background: #06bcff; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-whatsapp { background: #25D366; color: #fff; width: 30px; height: 30px; } .md-modal .social-icons a:hover .fa-telegram { background: #29b6f6; color: #fff; width: 30px; height: 30px; } /* Content styles */ .md-content { color: #fff; background: #0071bd; position: relative; border-radius: 3px; margin: 0 auto; height: 100%; position: relative; overflow: hidden; } .md-content .tlp-md-content-holder > .md-header { opacity: 0.8; /* background: rgba(0, 0, 0, 0.1); */ text-align: center; margin: 0; padding: 15px 0 10px; } .md-content .tlp-md-content-holder > .md-header h4 { font-size: 14px; margin: 0; } .md-content .tlp-md-content-holder > .md-header h4, .md-content .tlp-md-content-holder > .md-header h3 { color: #fff; } .md-content .tlp-md-content-holder > .md-header h3 { padding: 0; font-size: 28px; margin: 0; text-transform: uppercase; } div#tlp-modal .tlp-md-content-holder { min-height: 15px; height: 100%; overflow: hidden; } div#tlp-modal .tlp-md-loading { text-align: center; padding: 15px 40px 30px; } .md-content > .tlp-md-content-holder .tlp-md-content { padding: 0px 0; margin: 15px 30px; height: 90%; } .md-content > .tlp-md-content-holder .tlp-md-content .tlp-md-member-details { margin: 15px 0; } .tlp-md-member-details p { margin: 5px 0; } .tlp-md-content .rt-team-container .tlp-team-skill ul { margin: 0; } .tlp-md-content .rt-team-container a { color: #fff; } .tlp-md-content .tlp-short-bio { margin: 15px 0; } .md-content .md-cls-btn { text-align: right; padding: 4px; position: absolute; top: 0; left: 0; right: 0; } .md-content button { display: inline-block; margin: 0 auto; background-color: transparent; font-size: 0.8em; } .md-content button.md-close { background: transparent; } .md-content .md-cls-btn i { font-size: 22px; line-height: 34px; } .md-content .author-latest-post li { padding-bottom: 5px; } #tlp-modal .md-content .author-latest-post li a:hover{ text-decoration: underline; } #tlp-modal .rt-team-container .contact-info{ margin-bottom: 10px; } /* Individual modal styles with animations/transitions */ /* Effect 1: Fade in and scale up */ .tlp-md-effect .md-content { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.tlp-md-effect .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /********************* Media Query *******************/ @media (min-width: 768px) { .rt-container { max-width: 750px; } } @media (min-width: 992px) { .rt-container { max-width: 970px; } } @media (min-width: 1200px) { .rt-container { max-width: 1170px; } } @media (max-width: 767px) { .hidden-xs { display: none !important; } } @media screen and (max-width: 767px) { .rt-team-container .rt-margin-bottom15 { margin-bottom: 5px !important; } .tlp-member-feature-img, .tlp-member-description-container { float: none; width: 100%; } .tlp-member-description-container{ padding-top: 15px; } } @media (min-width: 768px) { .rt-margin-bottom15 { margin-bottom: 5px !important; } .rt-col-sm-1, .rt-col-sm-2, .rt-col-sm-3, .rt-col-sm-4, .rt-col-sm-5, .rt-col-sm-6, .rt-col-sm-7, .rt-col-sm-8, .rt-col-sm-9, .rt-col-sm-10, .rt-col-sm-11, .rt-col-sm-12 { float: left; } .rt-col-sm-24 { float: left; } .rt-col-sm-24 { width: 20%; } .rt-col-sm-12 { width: 100%; } .rt-col-sm-11 { width: 91.66666667%; } .rt-col-sm-10 { width: 83.33333333%; } .rt-col-sm-9 { width: 75%; } .rt-col-sm-8 { width: 66.66666667%; } .rt-col-sm-7 { width: 58.33333333%; } .rt-col-sm-6 { width: 50%; } .rt-col-sm-5 { width: 41.66666667%; } .rt-col-sm-4 { width: 33.33333333%; } .rt-col-sm-3 { width: 25%; } .rt-col-sm-2 { width: 16.66666667%; } .rt-col-sm-1 { width: 8.33333333%; } } @media (min-width: 992px) { .rt-margin-bottom15 { margin-bottom: 15px; } .rt-col-md-1, .rt-col-md-2, .rt-col-md-3, .rt-col-md-4, .rt-col-md-5, .rt-col-md-6, .rt-col-md-7, .rt-col-md-8, .rt-col-md-9, .rt-col-md-10, .rt-col-md-11, .rt-col-md-12 { float: left; } .rt-col-md-24 { float: left; } .rt-col-md-24 { width: 20%; } .rt-col-md-12 { width: 100%; } .rt-col-md-11 { width: 91.66666667%; } .rt-col-md-10 { width: 83.33333333%; } .rt-col-md-9 { width: 75%; } .rt-col-md-8 { width: 66.66666667%; } .rt-col-md-7 { width: 58.33333333%; } .rt-col-md-6 { width: 50%; } .rt-col-md-5 { width: 41.66666667%; } .rt-col-md-4 { width: 33.33333333%; } .rt-col-md-3 { width: 25%; } .rt-col-md-2 { width: 16.66666667%; } .rt-col-md-1 { width: 8.33333333%; } } @media (min-width: 1200px) { .rt-col-lg-1, .rt-col-lg-2, .rt-col-lg-3, .rt-col-lg-4, .rt-col-lg-5, .rt-col-lg-6, .rt-col-lg-7, .rt-col-lg-8, .rt-col-lg-9, .rt-col-lg-10, .rt-col-lg-11, .rt-col-lg-12 { float: left; } .rt-col-lg-24 { float: left; } .rt-col-lg-24 { width: 20%; } .rt-col-lg-12 { width: 100%; } .rt-col-lg-11 { width: 91.66666667%; } .rt-col-lg-10 { width: 83.33333333%; } .rt-col-lg-9 { width: 75%; } .rt-col-lg-8 { width: 66.66666667%; } .rt-col-lg-7 { width: 58.33333333%; } .rt-col-lg-6 { width: 50%; } .rt-col-lg-5 { width: 41.66666667%; } .rt-col-lg-4 { width: 33.33333333%; } .rt-col-lg-3 { width: 25%; } .rt-col-lg-2 { width: 16.66666667%; } .rt-col-lg-1 { width: 8.33333333%; } } @media screen and (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #dddddd; } .table-responsive > .table { margin-bottom: 0; } .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td { white-space: nowrap; } .table-responsive > .table-bordered { border: 0; } .table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; } .table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; } .rt-team-container .layout16 .single-team-area{ padding:20px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area{ padding: 14px 14px 20px; margin-bottom: 20px; } .rt-team-container:where(:not(.rt-elementor-container)) .layout17 .single-team-area .tlp-overlay{ top: 10px; right: 0; } .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > th, .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; } } /* * Animation */ @-webkit-keyframes ball-scale-multiple { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes ball-scale-multiple { 0% { opacity: 0; -moz-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes ball-scale-multiple { 0% { opacity: 0; -o-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -o-transform: scale(1); transform: scale(1); } } @keyframes ball-scale-multiple { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 5% { opacity: .75; } 100% { opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes ball-clip-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes ball-clip-rotate { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(180deg); transform: rotate(180deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes ball-clip-rotate { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 50% { -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ball-clip-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes fire-diamonds { 0% { -webkit-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); } 50% { -webkit-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); } 100% { -webkit-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); } } @-moz-keyframes fire-diamonds { 0% { -moz-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); } 50% { -moz-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); } 100% { -moz-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); } } @-o-keyframes fire-diamonds { 0% { -o-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); } 50% { -o-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); } 100% { -o-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); } } @keyframes fire-diamonds { 0% { -webkit-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); -moz-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); -o-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); } 50% { -webkit-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); -moz-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); -o-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); } 100% { -webkit-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); -moz-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); -o-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); } } .la-fire, .la-fire > div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .la-fire { display: block; font-size: 0; color: #fff; } .la-fire.la-dark { color: #333; } .la-fire > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-fire { width: 32px; height: 32px; } .la-fire > div { position: absolute; bottom: 0; left: 50%; width: 12px; height: 12px; border-radius: 0; border-radius: 2px; -webkit-transform: translateY(0) translateX(-50%) rotate(45deg) scale(0); -moz-transform: translateY(0) translateX(-50%) rotate(45deg) scale(0); -ms-transform: translateY(0) translateX(-50%) rotate(45deg) scale(0); -o-transform: translateY(0) translateX(-50%) rotate(45deg) scale(0); transform: translateY(0) translateX(-50%) rotate(45deg) scale(0); -webkit-animation: fire-diamonds 1.5s infinite linear; -moz-animation: fire-diamonds 1.5s infinite linear; -o-animation: fire-diamonds 1.5s infinite linear; animation: fire-diamonds 1.5s infinite linear; } .la-fire > div:nth-child(1) { -webkit-animation-delay: -.85s; -moz-animation-delay: -.85s; -o-animation-delay: -.85s; animation-delay: -.85s; } .la-fire > div:nth-child(2) { -webkit-animation-delay: -1.85s; -moz-animation-delay: -1.85s; -o-animation-delay: -1.85s; animation-delay: -1.85s; } .la-fire > div:nth-child(3) { -webkit-animation-delay: -2.85s; -moz-animation-delay: -2.85s; -o-animation-delay: -2.85s; animation-delay: -2.85s; } .la-fire.la-sm { width: 16px; height: 16px; } .la-fire.la-sm > div { width: 6px; height: 6px; } .la-fire.la-2x { width: 64px; height: 64px; } .la-fire.la-2x > div { width: 24px; height: 24px; } .la-fire.la-3x { width: 96px; height: 96px; } .la-fire.la-3x > div { width: 36px; height: 36px; } @-webkit-keyframes fire-diamonds { 0% { -webkit-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); } 50% { -webkit-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); } 100% { -webkit-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); } } @-moz-keyframes fire-diamonds { 0% { -moz-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); } 50% { -moz-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); } 100% { -moz-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); } } @-o-keyframes fire-diamonds { 0% { -o-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); } 50% { -o-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); } 100% { -o-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); } } @keyframes fire-diamonds { 0% { -webkit-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); -moz-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); -o-transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0); } 50% { -webkit-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); -moz-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); -o-transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1); } 100% { -webkit-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); -moz-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); -o-transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0); } } .isotope-free .single-team-area .social-icons a { background: #0367bf; color: #fff; } .isotope-free .single-team-area .tlp-content a { color: #fff; } /* techlabpro 23 custom css */ .rt-team-container .layout1 figure, .rt-team-container .layout3 figure, .rt-team-container .isotope-free figure { margin: auto; display: table; } .rt-team-container .isotope-free .short-bio p, .rt-team-container .layout1 .short-bio p { margin-top: 10px; } /* Single page */ .tlp-single-container .tlp-member-title { margin-bottom: 10px; line-height: 1.2; } .tlp-single-container.rt-team-container .contact-info { margin-bottom: 15px; } /* Resume ("My CV") / Hire Me / Read More buttons. Every other `.readmore-btn a` rule in this file is scoped to a layout (`.layout7`, `.layout8`, `[data-layout="layout4"]`, …). The single page's row carries no layout class, so none of them reached it and the buttons rendered as bare theme links — transparent background, theme link colour. Kept at (0,2,1) on purpose: this is only a fallback look, so the Styling-tab rules that sc-css.php emits for `.tlp-single-container .readmore-btn .rt-resume-btn` (0,3,0) still win. Adding `.rt-team-container` here would make it (0,3,1) and silently override the user's configured colours. */ .tlp-single-container .readmore-btn { display: flex; gap: 10px; flex-wrap: wrap; } .tlp-single-container .readmore-btn a, .tlp-single-container .readmore-btn .rt-resume-btn, .tlp-single-container .readmore-btn .rt-hire-btn { padding: 10px 20px; /* Follow the Styling tab's "Primary Color" when one is set — sc-css.php writes --l1-primary for `.tlp-single-container` too — and fall back to the plugin's own default accent otherwise. Same variable and default the layouts use. */ background: #143ee5; background: var(--l1-primary, #143ee5); color: #fff; text-decoration: none; display: inline-block; border: 1px solid transparent; border-radius: 4px; -webkit-transition: all .3s; transition: all .3s; } .tlp-single-container .readmore-btn a:hover, .tlp-single-container .readmore-btn .rt-resume-btn:hover, .tlp-single-container .readmore-btn .rt-hire-btn:hover { /* Literal first so browsers without color-mix() still darken on hover. */ background-color: #1133c2; background-color: color-mix(in srgb, var(--l1-primary, #143ee5) 82%, #000); color: #fff; } @media (max-width: 992px) { .rt-team-container .special01 .img-responsive, .rt-team-container .single-team-area img { width: 100%; } .rt-team-container .round-img .single-team img{ width: initial; } } @media (max-width: 767px) { .rt-team-container .layout6 .tlp-img.tlp-single-team img{ width: 100%; } } @media (max-width: 576px) { #team-member-profile-gallery .swiper-arrow { width: 34px; height: 34px; margin-top: -32px; } #team-member-profile-gallery .swiper-pagination-bullet { margin: 5px; } .rt-team-container .rt-carousel-holder .swiper-pagination { margin-top: -10px; margin-left: auto; margin-right: auto; } .rt-team-container .rt-carousel-holder.swiper-autoheight .swiper-pagination { margin-top: 20px; } #team-member-profile-gallery { margin-bottom: 30px; } .tlp-popup-content #team-member-profile-gallery, .rt-smart-modal #team-member-profile-gallery, .tlp-md-content-holder #team-member-profile-gallery { margin-bottom: 0; } .rt-team-container .rt-carousel-holder:not(#team-member-profile-gallery):not(.bottom-nav):not(.rttm-carousel-main) { margin-top: 50px; } .rt-carousel-holder.standard-nav .swiper-nav, .rt-carousel-holder.top-nav .swiper-nav { top: 25px; right: auto; left: 50%; margin-top: 0; width: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .rt-carousel-holder.standard-nav .swiper-nav .swiper-button-next, .rt-carousel-holder .swiper-nav .swiper-button-next { right: -35px; } .rt-carousel-holder.standard-nav .swiper-nav .swiper-button-prev, .rt-carousel-holder .swiper-nav .swiper-button-prev { left: -35px; } } /* carousel-el-2's old `.content-inner` box is gone — it now shares layout 7's `.caption-inner-content` (see the Layout 7 block above). */ /* carousel3's old slide-up overlay rules are gone — it now shares Layout 8's card (see the Layout 8 block above). */ /* isotope5's old slide-up overlay override is gone — it now shares Layout 8's card (see the Layout 8 block above). */ .rt-team-container .isotope4 .tlp-team-item figcaption .caption-inner-content { left: 0; right: 0; } .tlp-team-skill .skill-prog .fill{ position: relative; } .tlp-team-skill .skill-prog .fill .percent-text{ position: absolute; top: -27px; right: 0; background-color: #1e73be; border-radius: 5px; text-align: center; padding: 1px 5px; color: #fff; font-size: 12px; } .tlp-team-skill .skill-prog .fill .percent-text:before{ content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #1e73be; margin-right: 8px; position: absolute; bottom: -4px; left: 9px; } .rt-team-container .fa-x-twitter:before { content: "\e61b"; } .tlp-content-wrapper{ display: flex; padding: 40px; } .tlp-content-wrapper .tlp-image-inner{ min-width: 40%; max-width: 40%; } .md-content > .tlp-md-content-holder .tlp-content-wrapper .tlp-md-content{ margin-left: 0; margin-right: 0; } .tlp-content-wrapper .tlp-title{ margin: 0 0 15px; font-weight: 700; font-size: 34px; } .tlp-content-wrapper .title-experience{ font-size: 18px; } .tlp-content-wrapper .tlp-content-innen{ padding-left: 30px; } .tlp-content-innen .rt-extra-curriculum{ margin: 0 0 15px; } .ptl-padding-0{ padding: 0 !important; } #rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal-header a.rt-smart-modal-close { text-stroke: 0 #990028 !important; -webkit-text-stroke: 0 #990028 !important; } .rt-smart-modal-main-content-wrapper .social-icons a{ color: inherit; } .tlp-overlay h3 span a{ display: block; } .tlp-member-description-container .tlp-member-detail{ margin: 0 0 15px; } /*Team Details Builder Widget Css*/ .rttmp-builder-team-department .tlp-team-department .label { font-weight: 500; color: #000; } .rttmp-builder-team-designation .tlp-team-designation .label { font-weight: 500; color: #000; } .rttmp-builder-team-experience .tlp-team-experience .label { font-weight: 500; color: #000; } .rttmp-builder-team-contact-list .contact-info { display: flex; flex-direction: column; gap: 7px; } .rttmp-builder-team-details.social-icons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .rttmp-builder-team-details.social-icons a { text-align: center; color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; width: 30px; transition: all 0.3s; height: 30px; background: #00afd1; margin-right: 5px; } .rttmp-builder-team-details.social-icons .tlp-team-heading{ margin-bottom: 0; } .rttmp-builder-team-details.social-icons a:hover { background: #000; } .rttmp-builder-team-buttons .readmore-btn { display: flex; gap: 10px; flex-wrap: wrap; } .rttmp-builder-team-buttons .readmore-btn a { padding: 10px 20px; background: #007acc; text-decoration: none; color: #fff; transition: all 0.3s; display: inline-block; border-radius: 4px; margin-right: 5px; border: 1px solid transparent; } .rttmp-builder-team-buttons .readmore-btn a:hover { background-color: #07639e; } .rttmp-builder-team-details.tlp-team-skill .skill-prog { height: 4px; margin-bottom: 10px; background: #fff; border: 1px solid #edeaea; border-radius: 4px; box-sizing: content-box; } .rttmp-builder-team-details.tlp-team-skill .fill { position: relative; height: 100%; -webkit-animation: 400ms; background-color: #00afd1; border-radius: 4px; } .rttmp-builder-team-details.tlp-team-skill .rt-percent { position: absolute; top: -26px; right: 0; font-weight: 600; } .rttmp-builder-team-professionals .rt-extra-curriculum .label { font-weight: 500; color: #000; } .rttmp-builder-team-qualification .rt-extra-curriculum .label { font-weight: 500; color: #000; } .rttmp-builder-team-expertise .rt-extra-curriculum .label { font-weight: 500; color: #000; } .rttmp-builder-team-comments .rt-team-comments-wrapper label { display: inline-block; } .rttmp-builder-team-author-post h3{ margin-bottom: 15px; } .rttmp-builder-team-details .ttp-pre-loader { position: relative; overflow: hidden; } .rttmp-builder-team-details .rt-loading-overlay { opacity: 0; visibility: hidden; position: absolute; transition: all 0.5s; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #fff; } .rttmp-builder-team-details .rt-loading { color: #fb4c35; position: absolute; top: 60px; left: 50%; margin-left: -16px; opacity: 0; visibility: hidden; z-index: 100; } .rttmp-builder-team-details .ttp-pre-loader { position: relative; overflow: hidden; } .rttmp-builder-team-details .ttp-pre-loader .rt-loading-overlay { opacity: 1; visibility: visible; } .rttmp-builder-team-details .ttp-pre-loader .rt-loading { opacity: 1; visibility: visible; } .rttmp-builder-team-details.tlp-member-feature-img{ display:inline-block; width:100% } .rttmp-builder-team-short-bio .has-label { display: flex; gap: 5px; } .rttmp-builder-team-short-bio .has-label .label { font-weight: 500; color: #000; } /*.tlp-content-wrapper .tlp-content-innen{*/ /* max-height: 765px;*/ /* overflow-y: auto;*/ /*}*/ /*Image Flip Feature*/ .rt-flip-container { perspective: 1000px; width: 100%; } .rt-flip-inner { position: relative; width: 100%; transition: transform 0.6s ease; transform-style: preserve-3d; } .rt-flip-front, .rt-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .rt-flip-front img, .rt-flip-back img { display: block; width: 100%; height: auto; } .rt-flip-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(180deg); } .rt-flip-back img { width: 100%; height: 100%; object-fit: cover; } .single-team-area:hover .rt-flip-inner, .team-member:hover .rt-flip-inner, .profile-img-wrapper:hover .rt-flip-inner, tr:hover .rt-flip-inner, .tlp-img:hover .rt-flip-inner, .rt-flip-container:hover .rt-flip-inner { transform: rotateY(180deg); } figure:has(.rt-flip-container), .image-container:has(.rt-flip-container) { overflow: visible; } .rt-flip-container img { transform: none !important; backface-visibility: hidden; } .single-team-area:hover .rt-flip-container img, .team-member:hover .rt-flip-container img { transform: none !important; } .tlp-single-detail .tlp-member-feature-img .wp-caption-text{ margin:15px 0; } /* ========================================================================== GRID LAYOUT 1 — card redesign -------------------------------------------------------------------------- Scope notes (important): - `.layout1` is a class on the inner `.rt-row`; `[data-layout="layout1"]` is on the outer `.rt-team-container`. Pagination renders as a SIBLING of the row, so the design tokens live on the container and the card rules hang off `.layout1`. - Both hooks are EXACT matches, so nothing here can ever leak into `.layout16` / `layout2` / `layout3` / isotope / carousel. - Markup is untouched. This only restyles what templates/layouts/layout1.php already outputs, so every field-visibility and link setting still applies. - Image dimensions are NOT forced here on purpose — they come from the shortcode's own "Image Size" setting (ttp_image_size / ttp_custom_image_size). ========================================================================== */ .rt-team-container[data-layout="layout1"] { --l1-primary: #143ee5; --l1-primary-600: #1133c2; --l1-primary-50: #eef1ff; --l1-primary-100: #dde3ff; /* The Styling tab's "Primary Color" overrides --l1-primary via sc-css.php; these three then re-derive from it so the role text, icon chips, social chips, buttons and pagination all follow the setting together. The literals above stay as the fallback where color-mix() is unsupported. */ --l1-primary-600: color-mix(in srgb, var(--l1-primary) 82%, #000); --l1-primary-50: color-mix(in srgb, var(--l1-primary) 8%, #fff); --l1-primary-100: color-mix(in srgb, var(--l1-primary) 16%, #fff); --l1-ink: #0f1535; --l1-ink-2: #3a3f5c; --l1-muted: #6b7088; --l1-line: #e7eaf3; --l1-radius: 16px; --l1-radius-sm: 10px; --l1-shadow-sm: 0 1px 2px rgba(20, 30, 75, .04), 0 2px 6px rgba(20, 30, 75, .04); --l1-shadow-lg: 0 24px 60px color-mix(in srgb, var(--l1-primary, #143ee5) 18%, transparent), 0 4px 12px rgba(20, 30, 75, .06); --l1-ease: cubic-bezier(.2, .7, .2, 1); /* Poppins to match the reference; falls back to the theme stack when the theme doesn't load it. Deliberately no @import — a distributed plugin should not pull Google Fonts on the front end. */ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---------- Grid: 28px gutter ---------- */ .rt-team-container .rt-row.layout1 { margin-left: -14px; margin-right: -14px; } .rt-team-container .rt-row.layout1 > [class*="rt-col-"] { padding-left: 14px; padding-right: 14px; margin-bottom: 28px; display: -webkit-box; display: -ms-flexbox; display: flex; } /* ---------- Card ---------- */ .rt-team-container .layout1 .single-team-area { /* The card owns the bottom breathing room. The blocks that can end a card - .short-bio, .contact-info, .social-icons, .readmore-btn.hirme-resume - all have 0 (or 6px) bottom padding, so whichever one happened to be last sat flush on the card's edge. Only .readmore-btn.tlp-readmore-button carried the intended 22px, which is why the gap appeared solely when a Read More button was enabled. That 22px moved here, so it applies to every combination. */ padding-bottom: 22px; width: 100%; background: #fff; border: 1px solid var(--l1-line); border-radius: var(--l1-radius); overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; box-shadow: var(--l1-shadow-sm); -webkit-transition: -webkit-transform .35s var(--l1-ease), box-shadow .35s var(--l1-ease), border-color .35s var(--l1-ease); transition: transform .35s var(--l1-ease), box-shadow .35s var(--l1-ease), border-color .35s var(--l1-ease); } .rt-team-container .layout1 .single-team-area:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); box-shadow: var(--l1-shadow-lg); border-color: transparent; } /* ---------- Media ---------- */ .rt-team-container .layout1 .single-team { position: relative; overflow: hidden; background: #eef0f6; } /* Image style = "Round" (Layout tab) puts .round-img on the grid item. Drop the placeholder panel and inset the circle so it reads intentionally. */ .rt-team-container .layout1 .round-img .single-team { background: transparent; padding: 22px 22px 0; } .rt-team-container .layout1 figure { margin: 0; display: block; line-height: 0; } .rt-team-container .layout1 .single-team figure a { display: block; } .rt-team-container .layout1 .single-team-area img { width: 100%; height: auto; max-width: 100%; display: block; -webkit-transform: none; transform: none; -webkit-transition: -webkit-transform .6s var(--l1-ease); transition: transform .6s var(--l1-ease); } .rt-team-container .layout1 .single-team-area:hover img { -webkit-transform: scale(1.06); transform: scale(1.06); } /* ---------- Name strip ---------- */ .rt-team-container .layout1 .tlp-content { background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafbff)); background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%); color: var(--l1-ink); padding: 18px 22px 14px; border-bottom: 1px solid var(--l1-line); margin: 0; } /* * Upgrade guard — the one place !important is justified here. * * A site that hasn't re-saved its shortcodes yet (or whose migration hasn't run, * e.g. a front-end hit before any admin login) can still be serving a * team-sc.css built by an older version, which painted this strip solid: * .rt-team-container.rt-team-container-N .layout1 .tlp-content{background:… !important} * That is (0,4,0)+!important and makes the name unreadable on the new white card. * This rule is (0,5,0)+!important so it out-ranks that stale declaration. * * Safe because nothing current emits a background for .layout1 .tlp-content: * ttp_content_bg_color targets .single-team-area (the card), and the generic * `.tlp-team $selector .tlp-content` entry needs a .tlp-team ancestor that the * shortcode never renders. Once Upgrade::maybe_rebuild_shortcode_css() has run, * the stale rule is gone and this just restates the base style. */ .rt-team-container[data-layout="layout1"] .rt-row.layout1 .tlp-content { background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafbff)) !important; background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%) !important; } .rt-team-container .layout1 .single-team-area h3 { padding: 0; margin: 0 0 4px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.2px; } .rt-team-container .layout1 .single-team-area h3, .rt-team-container .layout1 .single-team-area h3 a { color: var(--l1-ink); text-decoration: none; } .rt-team-container .layout1 .single-team-area h3 a:hover { color: var(--l1-primary); } .rt-team-container .layout1 .tlp-position { font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .2px; margin: 0; } .rt-team-container .layout1 .tlp-position, .rt-team-container .layout1 .tlp-position a { color: var(--l1-primary); text-decoration: none; } /* ---------- Bio ---------- */ .rt-team-container .layout1 .short-bio { padding: 18px 22px 0; margin: 0; } .rt-team-container .layout1 .short-bio p { margin: 0; padding: 0; font-size: 14.5px; line-height: 1.65; color: var(--l1-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Contact list ---------- */ /* * Styling-tab compatibility, deliberate: * sc-css.php targets the ROWS directly (`… .tlp-email`, `… .tlp-phone a`, * `… .tlp-url` at (0,3,0)-(0,3,1)). So colour / font-size / line-height are set * here on the WRAPPER only and inherit down — inheritance carries no * specificity, so a per-field value from the Styling tab always wins. Never move * these onto `li` / `li a`: that out-ranks the user's own setting. */ .rt-team-container .layout1 .contact-info { margin: 14px 22px 0; padding: 14px 0 0; border-top: 1px dashed var(--l1-line); -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; color: var(--l1-ink-2); font-size: 14px; line-height: 1.5; } .rt-team-container .layout1 .contact-info ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } /* * `display:block` (not flex) is also deliberate: the per-field "Alignment" * option emits `text-align`, which a flex row would silently ignore. Block rows * keep Alignment working while the inline-flex chip below still gives the * icon + text layout. */ .rt-team-container .layout1 .contact-info li { display: block; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-team-container .layout1 .contact-info li i { width: 30px; height: 30px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; margin: 0 10px 0 0; background: var(--l1-primary-50); color: var(--l1-primary); border-radius: 8px; font-size: 12px; -ms-flex-negative: 0; flex-shrink: 0; } .rt-team-container .layout1 .contact-info a { color: inherit; text-decoration: none; -webkit-transition: color .2s var(--l1-ease); transition: color .2s var(--l1-ease); } .rt-team-container .layout1 .contact-info a:hover { color: var(--l1-primary); } /* ---------- Skills ---------- Every other block in this card is inset 22px (`.tlp-content`, `.short-bio`, `.contact-info`, `.social-icons`). The skills wrapper is pro-only markup that the redesign never covered, so it kept the base `padding: 0` and ran edge to edge — the bars touched both sides of the card. Match the card's gutter. */ .rt-team-container .layout1 .tlp-team-skill { padding-left: 22px; padding-right: 22px; } /* ---------- Social ---------- */ .rt-team-container .layout1 .social-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0 22px 6px; text-align: left; } .rt-team-container .layout1 .social-icons a { width: 36px; height: 36px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; padding: 0; border: 0; background: var(--l1-primary-50); color: var(--l1-primary); border-radius: var(--l1-radius-sm); font-size: 13px; line-height: 1; text-decoration: none; -webkit-transition: background .2s var(--l1-ease), color .2s var(--l1-ease), -webkit-transform .2s var(--l1-ease), box-shadow .2s var(--l1-ease); transition: background .2s var(--l1-ease), color .2s var(--l1-ease), transform .2s var(--l1-ease), box-shadow .2s var(--l1-ease); } .rt-team-container .layout1 .social-icons a:hover { background: var(--l1-primary); color: #fff; -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--l1-primary, #143ee5) 28%, transparent); } /* * The shared social CSS paints per-network BRAND colours on the INSIDE the * anchor on hover/focus — ~48 rules, e.g. * .rt-team-container .social-icons a:hover .fa-facebook-f{background:#3b5999;width:30px;height:30px} * They target the icon, while the rule above tints the anchor, so both render and * you get a brand-coloured square sitting on the chip. The reference design tints * only the anchor, so neutralise the icon here. (0,4,2) out-ranks their (0,4,1). * Scoped to layout1 — every other layout keeps its brand-colour hover. */ .rt-team-container .layout1 .social-icons a:hover i, .rt-team-container .layout1 .social-icons a:focus i { /* !important on BACKGROUND ONLY, to beat Pro's re-shipped per-network brand rules on the Elementor path (`.rt-elementor-container .social-icons a:hover .fa-*{background:…!important}`) that paint a brand square on the glyph. Pro's brand rule doesn't touch width/height, and the user's Social Width/Height + Hover-Background controls carry their own higher-specificity values (the hover-bg control is itself !important at 0,6,2), so leave those non-!important here — otherwise this would clobber the user's settings. */ background: transparent !important; background-color: transparent !important; color: inherit; width: auto; height: auto; } /* ---------- Buttons ---------- */ /* Secondary row (Resume / Hire Me). The reference only shows one button, so these keep the same radius/easing but read as secondary. */ .rt-team-container .layout1 .readmore-btn.hirme-resume { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; margin: 0; padding: 14px 22px 0; } .rt-team-container .layout1 .readmore-btn.hirme-resume:empty, .rt-team-container .layout1 .readmore-btn.tlp-readmore-button:empty { display: none; } .rt-team-container .layout1 .hirme-resume a { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 14px; /* solid + 0 width = no border by default, but lets a user's button border-width/color (ttp_*_btn_style) render — sc-css sets width+colour but never border-style, and border-style:none would force width to 0. */ border-style: solid; border-width: 0; border-radius: var(--l1-radius-sm); background: var(--l1-primary-50); color: var(--l1-primary); font-size: 13.5px; font-weight: 500; line-height: 1.4; text-decoration: none; -webkit-transition: background .2s var(--l1-ease), color .2s var(--l1-ease); transition: background .2s var(--l1-ease), color .2s var(--l1-ease); } .rt-team-container .layout1 .hirme-resume a:hover { background: var(--l1-primary-100); color: var(--l1-primary-600); } /* Primary (Read More) — the reference's .team-btn */ .rt-team-container .layout1 .readmore-btn.tlp-readmore-button { margin: 0; padding: 14px 22px 0; } .rt-team-container .layout1 .tlp-readmore-button a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 18px; /* solid + 0 width = no border by default, but lets a user's button border-width/color (ttp_*_btn_style) render — sc-css sets width+colour but never border-style, and border-style:none would force width to 0. */ border-style: solid; border-width: 0; border-radius: var(--l1-radius-sm); background: var(--l1-primary); color: #fff; font-size: 14.5px; font-weight: 500; line-height: 1.4; text-decoration: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--l1-primary, #143ee5) 25%, transparent); -webkit-transition: background .2s var(--l1-ease), box-shadow .2s var(--l1-ease), -webkit-transform .2s var(--l1-ease); transition: background .2s var(--l1-ease), box-shadow .2s var(--l1-ease), transform .2s var(--l1-ease); } .rt-team-container .layout1 .tlp-readmore-button a:hover { background: var(--l1-primary-600); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--l1-primary, #143ee5) 32%, transparent); } /* Trailing arrow from the reference, added without touching the markup. */ .rt-team-container .layout1 .tlp-readmore-button a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; -webkit-transition: -webkit-transform .25s var(--l1-ease); transition: transform .25s var(--l1-ease); } .rt-team-container .layout1 .tlp-readmore-button a:hover::after { -webkit-transform: translateX(4px); transform: translateX(4px); } /* ========================================================================== GLOBAL PAGINATION — one modern pill design for EVERY team layout -------------------------------------------------------------------------- Replaces the old default numbered pagination AND the former per-layout (layout1 / layout3) copies. Applies to all layouts on both paths: the selectors mirror the plugin's own chains, so they out-rank the old default (tlpteam.css:5142-5453) by specificity on `.tlp-pagination ul.pagination`, and by source order for the equal-specificity paginationjs chain. The accent follows the shortcode's "Primary Color" (--l1-primary, set by sc-css.php on the container) and falls back to the reference blue, so pagination recolours with the cards. ========================================================================== */ .rt-team-container { --rtp-accent: var(--l1-primary, #143ee5); --rtp-accent-50: color-mix(in srgb, var(--rtp-accent) 8%, #fff); --rtp-accent-600: color-mix(in srgb, var(--rtp-accent) 82%, #000); --rtp-ink-2: #3a3f5c; --rtp-line: #e7eaf3; --rtp-radius-sm: 10px; --rtp-ease: cubic-bezier(.2, .7, .2, 1); } .rt-team-container .tlp-pagination { margin: 0; text-align: center; } .rt-team-container .tlp-pagination ul.pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .rt-team-container .tlp-pagination ul.pagination > li { display: block; float: none; margin: 0; padding: 0; list-style: none; } /* `.tlp-pagination ul.pagination > li > …` (0,3,3) so it beats the old default's `:first-child/:last-child` corner-radius rules (0,3,2) — otherwise the end/active pills keep the old 4px corners. */ .rt-team-container .tlp-pagination ul.pagination > li > a, .rt-team-container .tlp-pagination ul.pagination > li > span { min-width: 44px; height: 44px; padding: 0 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; color: var(--rtp-ink-2); border: 1px solid var(--rtp-line); border-radius: 12px; font-size: 14.5px; font-weight: 500; line-height: 1; text-decoration: none; -webkit-transition: all .2s var(--rtp-ease); transition: all .2s var(--rtp-ease); } .rt-team-container .tlp-pagination ul.pagination > li > a:hover { background: var(--rtp-accent-50); border-color: var(--rtp-accent); color: var(--rtp-accent); -webkit-transform: translateY(-1px); transform: translateY(-1px); } .rt-team-container .tlp-pagination ul.pagination > li.active > span { background: var(--rtp-accent); border-color: var(--rtp-accent); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--l1-primary, #143ee5) 28%, transparent); } .rt-team-container .tlp-pagination ul.pagination > li.disabled > span { opacity: .45; background: #fff; } /* ---------- "Ajax Number Pagination" (paginationjs) ---------- Same selectors as the plugin's own paginationjs chain; loading later, they win the equal-specificity ties (e.g. the #fb4c35 active colour at tlpteam.css:5380). */ .rt-team-container .rt-pagination-wrap { margin: 0; text-align: center; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages { float: none; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin: 0; font-size: inherit; line-height: normal; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages ul li { float: none; margin: 0; padding: 0; min-width: 0; min-height: 0; border: 0; line-height: normal; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages ul li > a { min-width: 44px; height: 44px; padding: 0 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--rtp-ink-2); border: 1px solid var(--rtp-line); border-radius: 12px; font-size: 14.5px; font-weight: 500; line-height: 1; letter-spacing: 0; text-decoration: none; -webkit-transition: all .2s var(--rtp-ease); transition: all .2s var(--rtp-ease); } /* number-button background at LOW specificity so ttp_button_style (Load More Button) still overrides it when the user sets one */ .rt-team-container .paginationjs-pages li > a { background: #fff; } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages ul li:not(.active) > a:hover { background: var(--rtp-accent-50); border-color: var(--rtp-accent); color: var(--rtp-accent); -webkit-transform: translateY(-1px); transform: translateY(-1px); } .rt-team-container .rt-pagination-wrap .rt-page-numbers .paginationjs .paginationjs-pages ul li.active > a { background-color: var(--rtp-accent); border-color: var(--rtp-accent); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--l1-primary, #143ee5) 28%, transparent); } /* Load-more / infinite-scroll button — same design language */ .rt-team-container .rt-pagination-wrap .rt-loadmore-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 44px; padding: 10px 22px; background: var(--rtp-accent); color: #fff; /* solid + 0 width = no border by default, but lets a user's button border-width/color (ttp_*_btn_style) render — border-style:none would force width to 0. */ border-style: solid; border-width: 0; border-radius: var(--rtp-radius-sm); font-size: 14.5px; font-weight: 500; text-decoration: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--l1-primary, #143ee5) 25%, transparent); -webkit-transition: background .2s var(--rtp-ease), box-shadow .2s var(--rtp-ease); transition: background .2s var(--rtp-ease), box-shadow .2s var(--rtp-ease); } .rt-team-container .rt-pagination-wrap .rt-loadmore-btn:hover { background: var(--rtp-accent-600); box-shadow: 0 10px 24px color-mix(in srgb, var(--l1-primary, #143ee5) 32%, transparent); } /* ========================================================================== GRID LAYOUT 3 — card redesign (~80% Layout 1, colour-band header) -------------------------------------------------------------------------- Same markup + look as Layout 1 (layout3.php == layout1.php). One deliberate difference: the name/role strip (.tlp-content) is a PRIMARY-COLOUR BAND with white text (Layout 1 has a light strip). Applies to BOTH paths — the Elementor container also carries .rt-team-container. Accent = --l3-primary (shortcode Primary Color via --l1-primary; Elementor control via _lo-layout-3.scss). ========================================================================== */ .rt-team-container[data-layout="layout3"] { --l3-primary: var(--l1-primary, #143ee5); --l3-primary-600: #1133c2; --l3-primary-50: #eef1ff; --l3-primary-100: #dde3ff; /* The Styling tab's "Primary Color" overrides --l3-primary via sc-css.php; these three then re-derive from it so the role text, icon chips, social chips, buttons and pagination all follow the setting together. The literals above stay as the fallback where color-mix() is unsupported. */ --l3-primary-600: color-mix(in srgb, var(--l3-primary) 82%, #000); --l3-primary-50: color-mix(in srgb, var(--l3-primary) 8%, #fff); --l3-primary-100: color-mix(in srgb, var(--l3-primary) 16%, #fff); --l3-ink: #0f1535; --l3-ink-2: #3a3f5c; --l3-muted: #6b7088; --l3-line: #e7eaf3; --l3-radius: 16px; --l3-radius-sm: 10px; --l3-shadow-sm: 0 1px 2px rgba(20, 30, 75, .04), 0 2px 6px rgba(20, 30, 75, .04); --l3-shadow-lg: 0 24px 60px color-mix(in srgb, var(--l3-primary, #143ee5) 18%, transparent), 0 4px 12px rgba(20, 30, 75, .06); --l3-ease: cubic-bezier(.2, .7, .2, 1); /* Poppins to match the reference; falls back to the theme stack when the theme doesn't load it. Deliberately no @import — a distributed plugin should not pull Google Fonts on the front end. */ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---------- Grid: 28px gutter ---------- */ .rt-team-container .rt-row.layout3 { margin-left: -14px; margin-right: -14px; } .rt-team-container .rt-row.layout3 > [class*="rt-col-"] { padding-left: 14px; padding-right: 14px; margin-bottom: 28px; display: -webkit-box; display: -ms-flexbox; display: flex; } /* ---------- Card ---------- */ .rt-team-container .layout3 .single-team-area { /* The card owns the bottom breathing room. The blocks that can end a card - .short-bio, .contact-info, .social-icons, .readmore-btn.hirme-resume - all have 0 (or 6px) bottom padding, so whichever one happened to be last sat flush on the card's edge. Only .readmore-btn.tlp-readmore-button carried the intended 22px, which is why the gap appeared solely when a Read More button was enabled. That 22px moved here, so it applies to every combination. */ padding-bottom: 22px; width: 100%; background: #fff; border: 1px solid var(--l3-line); border-radius: var(--l3-radius); overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; box-shadow: var(--l3-shadow-sm); -webkit-transition: -webkit-transform .35s var(--l3-ease), box-shadow .35s var(--l3-ease), border-color .35s var(--l3-ease); transition: transform .35s var(--l3-ease), box-shadow .35s var(--l3-ease), border-color .35s var(--l3-ease); } .rt-team-container .layout3 .single-team-area:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); box-shadow: var(--l3-shadow-lg); border-color: transparent; } /* ---------- Media ---------- */ .rt-team-container .layout3 .single-team { position: relative; overflow: hidden; background: #eef0f6; } /* Image style = "Round" (Layout tab) puts .round-img on the grid item. Drop the placeholder panel and inset the circle so it reads intentionally. */ .rt-team-container .layout3 .round-img .single-team { background: transparent; padding: 22px 22px 0; } .rt-team-container .layout3 figure { margin: 0; display: block; line-height: 0; } .rt-team-container .layout3 .single-team figure a { display: block; } .rt-team-container .layout3 .single-team-area img { width: 100%; height: auto; max-width: 100%; display: block; -webkit-transform: none; transform: none; -webkit-transition: -webkit-transform .6s var(--l3-ease); transition: transform .6s var(--l3-ease); } .rt-team-container .layout3 .single-team-area:hover img { -webkit-transform: scale(1.06); transform: scale(1.06); } /* ---------- Name strip ---------- */ .rt-team-container .layout3 .tlp-content { background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafbff)); background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%); color: var(--l3-ink); padding: 18px 22px 14px; border-bottom: 1px solid var(--l3-line); margin: 0; } /* * Upgrade guard — the one place !important is justified here. * * A site that hasn't re-saved its shortcodes yet (or whose migration hasn't run, * e.g. a front-end hit before any admin login) can still be serving a * team-sc.css built by an older version, which painted this strip solid: * .rt-team-container.rt-team-container-N .layout3 .tlp-content{background:… !important} * That is (0,4,0)+!important and makes the name unreadable on the new white card. * This rule is (0,5,0)+!important so it out-ranks that stale declaration. * * Safe because nothing current emits a background for .layout3 .tlp-content: * ttp_content_bg_color targets .single-team-area (the card), and the generic * `.tlp-team $selector .tlp-content` entry needs a .tlp-team ancestor that the * shortcode never renders. Once Upgrade::maybe_rebuild_shortcode_css() has run, * the stale rule is gone and this just restates the base style. */ .rt-team-container[data-layout="layout3"] .rt-row.layout3 .tlp-content { background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafbff)) !important; background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%) !important; } .rt-team-container .layout3 .single-team-area h3 { padding: 0; margin: 0 0 4px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.2px; } .rt-team-container .layout3 .single-team-area h3, .rt-team-container .layout3 .single-team-area h3 a { color: var(--l3-ink); text-decoration: none; } .rt-team-container .layout3 .single-team-area h3 a:hover { color: var(--l3-primary); } .rt-team-container .layout3 .tlp-position { font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .2px; margin: 0; } .rt-team-container .layout3 .tlp-position, .rt-team-container .layout3 .tlp-position a { color: var(--l3-primary); text-decoration: none; } /* ---------- Bio ---------- */ .rt-team-container .layout3 .short-bio { padding: 18px 22px 0; margin: 0; } /* Bio colour + typography on the WRAPPER so the Elementor Bio Color/Typography controls (generic `.short-bio`) override them; the

    inherits both. */ .rt-team-container .layout3 .short-bio { color: var(--l3-muted); font-size: 14.5px; line-height: 1.65; } .rt-team-container .layout3 .short-bio p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Contact list ---------- */ /* * Styling-tab compatibility, deliberate: * sc-css.php targets the ROWS directly (`… .tlp-email`, `… .tlp-phone a`, * `… .tlp-url` at (0,3,0)-(0,3,1)). So colour / font-size / line-height are set * here on the WRAPPER only and inherit down — inheritance carries no * specificity, so a per-field value from the Styling tab always wins. Never move * these onto `li` / `li a`: that out-ranks the user's own setting. */ .rt-team-container .layout3 .contact-info { margin: 14px 22px 0; padding: 4px 0 0; border-top: 0; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; color: var(--l3-ink-2); font-size: 14px; line-height: 1.5; } .rt-team-container .layout3 .contact-info ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } /* * `display:block` (not flex) is also deliberate: the per-field "Alignment" * option emits `text-align`, which a flex row would silently ignore. Block rows * keep Alignment working while the inline-flex chip below still gives the * icon + text layout. */ .rt-team-container .layout3 .contact-info li { display: block; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-team-container .layout3 .contact-info li i { width: 30px; height: 30px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; margin: 0 10px 0 0; background: var(--l3-primary-50); color: var(--l3-primary); border-radius: 8px; font-size: 12px; -ms-flex-negative: 0; flex-shrink: 0; } .rt-team-container .layout3 .contact-info a { color: inherit; text-decoration: none; -webkit-transition: color .2s var(--l3-ease); transition: color .2s var(--l3-ease); } .rt-team-container .layout3 .contact-info a:hover { color: var(--l3-primary); } /* ---------- Skills ---------- Same gutter as the rest of the card; see the matching note on layout1. */ .rt-team-container .layout3 .tlp-team-skill { padding-left: 22px; padding-right: 22px; } /* ---------- Social ---------- */ .rt-team-container .layout3 .social-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0 22px 6px; text-align: left; } .rt-team-container .layout3 .social-icons a { width: 36px; height: 36px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; padding: 0; border: 0; background: var(--l3-primary-50); color: var(--l3-primary); border-radius: var(--l3-radius-sm); font-size: 13px; line-height: 1; text-decoration: none; -webkit-transition: background .2s var(--l3-ease), color .2s var(--l3-ease), -webkit-transform .2s var(--l3-ease), box-shadow .2s var(--l3-ease); transition: background .2s var(--l3-ease), color .2s var(--l3-ease), transform .2s var(--l3-ease), box-shadow .2s var(--l3-ease); } .rt-team-container .layout3 .social-icons a:hover { background: var(--l3-primary); color: #fff; -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--l3-primary, #143ee5) 28%, transparent); } /* * The shared social CSS paints per-network BRAND colours on the INSIDE the * anchor on hover/focus — ~48 rules, e.g. * .rt-team-container .social-icons a:hover .fa-facebook-f{background:#3b5999;width:30px;height:30px} * They target the icon, while the rule above tints the anchor, so both render and * you get a brand-coloured square sitting on the chip. The reference design tints * only the anchor, so neutralise the icon here. (0,4,2) out-ranks their (0,4,1). * Scoped to layout1 — every other layout keeps its brand-colour hover. */ .rt-team-container .layout3 .social-icons a:hover i, .rt-team-container .layout3 .social-icons a:focus i { /* !important on BACKGROUND ONLY — beats Pro's re-shipped brand-colour glyph rule on Elementor; width/height left non-!important so the user's Social size controls still win (Pro's brand rule doesn't set width/height). */ background: transparent !important; background-color: transparent !important; color: inherit; width: auto; height: auto; } /* ---------- Buttons ---------- */ /* Secondary row (Resume / Hire Me). The reference only shows one button, so these keep the same radius/easing but read as secondary. */ .rt-team-container .layout3 .readmore-btn.hirme-resume { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; margin: 0; padding: 14px 22px 0; } .rt-team-container .layout3 .readmore-btn.hirme-resume:empty, .rt-team-container .layout3 .readmore-btn.tlp-readmore-button:empty { display: none; } .rt-team-container .layout3 .hirme-resume a { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 14px; /* solid + 0 width = no border by default, but lets a user's button border-width/color (ttp_*_btn_style) render — sc-css sets width+colour but never border-style, and border-style:none would force width to 0. */ border-style: solid; border-width: 0; border-radius: var(--l3-radius-sm); background: var(--l3-primary-50); color: var(--l3-primary); font-size: 13.5px; font-weight: 500; line-height: 1.4; text-decoration: none; -webkit-transition: background .2s var(--l3-ease), color .2s var(--l3-ease); transition: background .2s var(--l3-ease), color .2s var(--l3-ease); } .rt-team-container .layout3 .hirme-resume a:hover { background: var(--l3-primary-100); color: var(--l3-primary-600); } /* Primary (Read More) — the reference's .team-btn */ .rt-team-container .layout3 .readmore-btn.tlp-readmore-button { margin: 0; padding: 14px 22px 0; } .rt-team-container .layout3 .tlp-readmore-button a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 18px; /* solid + 0 width = no border by default, but lets a user's button border-width/color (ttp_*_btn_style) render — sc-css sets width+colour but never border-style, and border-style:none would force width to 0. */ border-style: solid; border-width: 0; border-radius: var(--l3-radius-sm); background: var(--l3-primary); color: #fff; font-size: 14.5px; font-weight: 500; line-height: 1.4; text-decoration: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--l3-primary, #143ee5) 25%, transparent); -webkit-transition: background .2s var(--l3-ease), box-shadow .2s var(--l3-ease), -webkit-transform .2s var(--l3-ease); transition: background .2s var(--l3-ease), box-shadow .2s var(--l3-ease), transform .2s var(--l3-ease); } .rt-team-container .layout3 .tlp-readmore-button a:hover { background: var(--l3-primary-600); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--l3-primary, #143ee5) 32%, transparent); } /* Trailing arrow from the reference, added without touching the markup. */ .rt-team-container .layout3 .tlp-readmore-button a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; -webkit-transition: -webkit-transform .25s var(--l3-ease); transition: transform .25s var(--l3-ease); } .rt-team-container .layout3 .tlp-readmore-button a:hover::after { -webkit-transform: translateX(4px); transform: translateX(4px); } /* ---------- 20% difference: primary-colour name band (white text) ---------- */ .rt-team-container .layout3 .tlp-content { background: var(--l3-primary); border-bottom: 0; } .rt-team-container[data-layout="layout3"] .rt-row.layout3 .tlp-content { background: var(--l3-primary) !important; } .rt-team-container .layout3 .single-team-area h3 { color: #fff; } /* link inherits the h3 colour so the Elementor Name Color control (which targets the generic `.single-team-area h3`, not `h3 a`, for layout3) flows through. */ .rt-team-container .layout3 .single-team-area h3 a { color: inherit; } /* inherit so the Name Hover Color control (targets `h3:hover`, not `h3 a:hover`) flows to the link; default = no colour change on the band. */ .rt-team-container .layout3 .single-team-area h3 a:hover { color: inherit; } .rt-team-container .layout3 .tlp-position, .rt-team-container .layout3 .tlp-position a { color: rgba(255, 255, 255, .92); } .rt-team-container .layout3 .tlp-position a:hover { color: #fff; } .rt-team-container .layout3 .tlp-department { color: rgba(255, 255, 255, .82); } /* Pagination for Layout 3 is handled by the GLOBAL PAGINATION block above. */ /* ========================================================================== LIST LAYOUT 2 — horizontal card redesign -------------------------------------------------------------------------- Faithful to the "Team — List Layout" reference: a horizontal card with the photo on the LEFT and name / role / bio / contact / socials / button on the RIGHT. No view-toggle tab — just the team items. ONE hook, ONE design, BOTH paths. The shortcode container and the Elementor "List Layouts" widget both render templates/layouts/layout2.php and both carry `.rt-team-container` + the `.layout2` row class, and tlpteam.css is enqueued on both paths — so these rules style the shortcode AND the Elementor widget. Per instruction the hook is the `.layout2` CLASS, never [data-layout="layout2"]. IMAGE ↔ CONTENT RATIO IS NOT HARDCODED. `.img-area` / `.rttm-content-area` keep their `rt-col-sm-{N}` / `rt-col-sm-{12-N}` widths from the List layout's "Image column" setting (ttl_image_column / Elementor image_cols), so that control keeps working. Only card styling, chips and buttons are added here. The card stays this horizontal photo-left LIST at every column count. On phones (viewport ≤767px) it stacks instead — full-width photo on top, content below (see the @media block at the end); narrow cards otherwise only tighten spacing. USER STYLES WIN. Every paintable default (colour / font-size / weight / align / button background) is declared through `:where(.rt-team-container .layout2)` at ZERO specificity — the same technique Grid Layout 3 uses — so: • the Styling tab (sc-css.php: .tlp-position / .tlp-email / .rt-ream-me-btn …) • the Elementor Style tab ({{WRAPPER}} .single-team-area h3, .tlp-position …) both override them. Structure (layout, borders, chips) stays at normal weight. ========================================================================== */ .rt-team-container .layout2 { /* Accent defaults to the reference blue on BOTH paths. The shortcode "Primary Color" writes --l1-primary on the container (sc-css.php); layout2 inherits it, so role text, contact chips, social chips and the Read More button all recolour together. Elementor has no --l1-primary, so it keeps the reference blue and stays visually identical to the shortcode by default. */ --l2-primary: var(--l1-primary, #143ee5); --l2-primary-600: #1133c2; --l2-primary-50: #eef1ff; --l2-primary-100: #dde3ff; --l2-primary-600: color-mix(in srgb, var(--l2-primary) 82%, #000); --l2-primary-50: color-mix(in srgb, var(--l2-primary) 8%, #fff); --l2-primary-100: color-mix(in srgb, var(--l2-primary) 16%, #fff); --l2-ink: #0f1535; --l2-ink-2: #3a3f5c; --l2-muted: #6b7088; --l2-line: #e7eaf3; --l2-radius: 16px; --l2-radius-sm: 10px; --l2-media-radius: 12px; --l2-gap: 22px; --l2-shadow-sm: 0 1px 2px rgba(20, 30, 75, .04), 0 2px 6px rgba(20, 30, 75, .04); --l2-shadow-lg: 0 22px 55px color-mix(in srgb, var(--l2-primary, #143ee5) 16%, transparent), 0 4px 12px rgba(20, 30, 75, .06); --l2-ease: cubic-bezier(.2, .7, .2, 1); /* Poppins to match the reference; falls back to the theme stack. No @import — a distributed plugin should not pull Google Fonts on the front end. */ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* --- Elementor + Pro: align Pro's colour scheme to the demo accent --- With Team Pro active the Elementor path loads Pro's compiled CSS (tlp-el-team-pro.min.css), which colours the name and role from `--rttm-primary-color` (default #007acc) at a specificity my zero-specificity defaults can't beat — leaving the card with two blues (teal name/role vs the #143ee5 button, social and contact-icon accent). Feed Pro's own variable the demo accent so name + role match the rest. One declaration, no specificity fight, and every Style control still overrides it (controls set explicit colours at higher specificity). Scoped to the Elementor path + layout2, so the shortcode card — where the name stays dark ink and Pro's CSS never loads — is untouched. */ .rt-elementor-container .layout2 { --rttm-primary-color: var(--l1-primary, #143ee5); } /* ---------- Grid: 28px gutter between cards, equal-height rows ---------- */ .rt-team-container .rt-row.layout2 { margin-left: -14px; margin-right: -14px; } .rt-team-container .rt-row.layout2 > [class*="rt-col-"] { padding-left: 14px; padding-right: 14px; margin-bottom: 28px; display: -webkit-box; display: -ms-flexbox; display: flex; } /* ---------- Card: flex row — photo left + content right, EQUAL height ---------- */ .rt-team-container .layout2 .single-team-area { position: relative; box-sizing: border-box; width: 100%; /* Flex row so the photo column can STRETCH to the card's full height — that big full-height list photo is what makes the reference read as a "list", not a contact card. container-type drives the narrow-card spacing tuning below; the phone stack (photo on top) is a viewport @media rule at the end of this block. */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: nowrap; flex-wrap: nowrap; container-type: inline-size; background: #fff; border: 1px solid var(--l2-line); border-radius: var(--l2-radius); padding: 18px; box-shadow: var(--l2-shadow-sm); -webkit-transition: -webkit-transform .35s var(--l2-ease), box-shadow .35s var(--l2-ease), border-color .35s var(--l2-ease); transition: transform .35s var(--l2-ease), box-shadow .35s var(--l2-ease), border-color .35s var(--l2-ease); } .rt-team-container .layout2 .single-team-area:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--l2-shadow-lg); border-color: transparent; } /* ---------- Media (left column) — fills the card height ---------- */ .rt-team-container .layout2 .single-team-area .img-area { box-sizing: border-box; float: none; /* keep the "Image column" width (rt-col-sm-N); never let it shrink away */ -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-item-align: stretch; align-self: stretch; padding: 0; margin: 0; } .rt-team-container .layout2 .img-area figure { margin: 0; padding: 0; height: 100%; min-height: 100%; line-height: 0; border-radius: var(--l2-media-radius); overflow: hidden; background: #eef0f6; } .rt-team-container .layout2 .img-area figure a { display: block; height: 100%; line-height: 0; } .rt-team-container .layout2 .img-area img { width: 100%; height: 100%; max-width: 100%; display: block; /* fill the tall media box like the reference; keep faces (top) when it crops */ -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; -webkit-transition: -webkit-transform .6s var(--l2-ease); transition: transform .6s var(--l2-ease); } .rt-team-container .layout2 .single-team-area:hover .img-area img { -webkit-transform: scale(1.05); transform: scale(1.05); } /* Image style = "Round" (Layout tab) → circular avatar (square, not stretched) */ .rt-team-container .layout2 .round-img .single-team-area { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .rt-team-container .layout2 .round-img .img-area figure { height: auto; min-height: 0; border-radius: 50%; aspect-ratio: 1 / 1; } .rt-team-container .layout2 .round-img .img-area figure a { height: auto; } /* ---------- Content (right column) ---------- */ .rt-team-container .layout2 .single-team-area .rttm-content-area { box-sizing: border-box; float: none; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 0 0 var(--l2-gap); margin: 0; min-width: 0; } /* Kill the theme's link underline inside the card (the reference has none). Only text-decoration is set here — colour / size / weight stay with the Styling tab and the Elementor controls, so this changes nothing they own. */ .rt-team-container .layout2 .rttm-content-area a { text-decoration: none; } .rt-team-container .layout2 .rttm-content-area a:hover { text-decoration: none; } /* ---------- Name ---------- */ .rt-team-container .layout2 .rttm-content-area h3 { margin: 0 0 3px; padding: 0; line-height: 1.25; } :where(.rt-team-container .layout2) h3 { color: var(--l2-ink); font-size: 19px; font-weight: 600; letter-spacing: -.2px; } /* The name link INHERITS the h3 (its own default, or the control's value), instead of carrying its own colour — otherwise the Elementor Name control, which targets `h3` (not `h3 a`) on non-layout1 layouts, can't reach the visible link. (0,3,1) beats the theme's `a{color}`; the shortcode Styling tab still wins because it colours the h3 too, which the link inherits. */ .rt-team-container .layout2 h3 a { color: inherit; text-decoration: none; } :where(.rt-team-container .layout2) h3 a:hover { color: var(--l2-primary); } /* ---------- Role / Designation ---------- */ .rt-team-container .layout2 .rttm-content-area .tlp-position { margin: 0 0 10px; line-height: 1.5; } :where(.rt-team-container .layout2) .tlp-position, :where(.rt-team-container .layout2) .tlp-position a { color: var(--l2-primary); font-size: 13px; font-weight: 500; letter-spacing: .2px; text-decoration: none; } /* ---------- Department ---------- */ .rt-team-container .layout2 .rttm-content-area .tlp-department { margin: 0 0 10px; } :where(.rt-team-container .layout2) .tlp-department { color: var(--l2-muted); font-size: 12.5px; font-weight: 500; } /* ---------- Bio ---------- */ .rt-team-container .layout2 .rttm-content-area .short-bio { margin: 0 0 14px; padding: 0; } :where(.rt-team-container .layout2) .short-bio { color: var(--l2-muted); font-size: 14px; line-height: 1.6; } /* The

    inherits .short-bio, so the Elementor Short-Biography control (which targets `.short-bio`, not `.short-bio p`, on non-layout1 layouts) reaches the text. The shortcode Styling tab colours `.short-bio p` directly (0,3,1) and loads later, so it still wins. */ .rt-team-container .layout2 .short-bio p { color: inherit; } .rt-team-container .layout2 .rttm-content-area .short-bio p { margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Contact list ---------- Colour / size on the WRAPPER (inherit) + rows via :where() at zero specificity, so a per-field Styling value (.tlp-email / .tlp-phone / .tlp-url …) or an Elementor contact control always wins. Rows are display:block so the per-field Alignment control (text-align) still applies. */ .rt-team-container .layout2 .rttm-content-area .contact-info { margin: 0 0 14px; padding: 0; } .rt-team-container .layout2 .contact-info ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 7px; } .rt-team-container .layout2 .contact-info li { display: block; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.rt-team-container .layout2) .contact-info li, :where(.rt-team-container .layout2) .contact-info li a { color: var(--l2-ink-2); font-size: 13.5px; line-height: 1.5; text-decoration: none; } .rt-team-container .layout2 .contact-info li i { width: 28px; height: 28px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; margin: 0 10px 0 0; background: var(--l2-primary-50); color: var(--l2-primary); border-radius: 8px; font-size: 11px; -ms-flex-negative: 0; flex-shrink: 0; } .rt-team-container .layout2 .contact-info a { -webkit-transition: color .2s var(--l2-ease); transition: color .2s var(--l2-ease); } .rt-team-container .layout2 .contact-info a:hover { color: var(--l2-primary); } /* ---------- Social ---------- */ .rt-team-container .layout2 .rttm-content-area .social-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; } :where(.rt-team-container .layout2) .social-icons { text-align: left; } .rt-team-container .layout2 .social-icons a { width: 34px; height: 34px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: var(--l2-radius-sm); font-size: 12.5px; line-height: 1; text-decoration: none; -webkit-transition: background .2s var(--l2-ease), color .2s var(--l2-ease), -webkit-transform .2s var(--l2-ease), box-shadow .2s var(--l2-ease); transition: background .2s var(--l2-ease), color .2s var(--l2-ease), transform .2s var(--l2-ease), box-shadow .2s var(--l2-ease); } /* Normal specificity (0,3,1), NOT :where — the plugin's generic `.rt-team-container .social-icons a{color:#fff}` (0,2,1, for dark-overlay layouts) would otherwise paint these icons white on the light chip. This still loses to the Styling tab's Social Icon colour (sc-css emits `!important`) and background (same specificity, but team-sc.css loads later), so user settings keep winning. */ .rt-team-container .layout2 .social-icons a { background: var(--l2-primary-50); color: var(--l2-primary); } .rt-team-container .layout2 .social-icons a:hover { background: var(--l2-primary); color: #fff; -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--l2-primary, #143ee5) 28%, transparent); } /* The shared social CSS brand-colours the inside the anchor on hover; the reference tints only the chip, so neutralise the icon (scoped to layout2). */ .rt-team-container .layout2 .social-icons a:hover i, .rt-team-container .layout2 .social-icons a:focus i { background: transparent; background-color: transparent; color: inherit; width: auto; height: auto; } /* --- Elementor + Pro: move the social chip onto the so Pro's controls reach it --- Pro's "Social Color" / "Social Background" controls emit `.social-icons a i { color; background-color }` (the glyph) — they never target `.layout2 .social-icons a`, so with the chip on the anchor the Background control paints a box behind the glyph while the visible chip stays the default. On the Elementor path only (`.rt-elementor-container`), make the BE the 34×34 chip and the anchor a bare wrapper: now Social Color recolours the glyph and Social Background recolours the chip. The shortcode path has no `.rt-elementor-container`, so its anchor chip (driven by the Styling tab, which targets `.social-icons a`) is completely untouched. */ .rt-elementor-container .layout2 .social-icons a { background: transparent; box-shadow: none; /* size to the chip so the generic `.social-icons a{width:30px}` can't clamp it and shrink the below the user's Social Width/Height control value. */ width: auto; } .rt-elementor-container .layout2 .social-icons a i { width: 34px; height: 34px; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--l2-primary-50); color: var(--l2-primary); border-radius: var(--l2-radius-sm); font-size: 12.5px; line-height: 1; -webkit-transition: background .2s var(--l2-ease), color .2s var(--l2-ease); transition: background .2s var(--l2-ease), color .2s var(--l2-ease); } /* Hover paints the chip (override the neutralise-icon rule above for this path). !important beats Pro's re-shipped per-network brand rules (`.rt-elementor-container .social-icons a:hover .fa-*{background:…!important}`), which would otherwise paint the wrong (brand) colour on the chip. */ .rt-elementor-container .layout2 .social-icons a:hover { background: transparent; box-shadow: none; } .rt-elementor-container .layout2 .social-icons a:hover i, .rt-elementor-container .layout2 .social-icons a:focus i { /* !important on BACKGROUND ONLY — beats Pro's brand-colour glyph !important so the chip tints the primary colour. width/height stay non-!important so the user's Social Width/Height controls still resize the chip; the user's Social Hover-Background control (its own !important at 0,6,2) still overrides this. */ width: 34px; height: 34px; background: var(--l2-primary) !important; color: #fff; } /* ---------- Buttons ---------- */ .rt-team-container .layout2 .rttm-content-area .readmore-btn { margin: 0; padding: 0; } .rt-team-container .layout2 .rttm-content-area .readmore-btn:empty { display: none; } /* Resume + Hire row (secondary) */ .rt-team-container .layout2 .readmore-btn:not(.hirme-resume) { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .rt-team-container .layout2 .readmore-btn:not(.hirme-resume):not(:empty) { margin-bottom: 10px; } /* Shared button box — structure only. solid + 0 width = no border by default but lets a user's button border-width/colour (ttp_*_btn_style) render; border:0 would force width to 0. */ .rt-team-container .layout2 .readmore-btn a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; padding: 10px 18px; border-style: solid; border-width: 0; border-radius: var(--l2-radius-sm); line-height: 1.4; text-decoration: none; -webkit-transition: background .2s var(--l2-ease), color .2s var(--l2-ease), box-shadow .2s var(--l2-ease), -webkit-transform .2s var(--l2-ease); transition: background .2s var(--l2-ease), color .2s var(--l2-ease), box-shadow .2s var(--l2-ease), transform .2s var(--l2-ease); } /* Button colour defaults at (0,3,0) — deliberately NOT :where. The plugin's generic `.rt-team-container .readmore-btn a{background:#007acc}` (0,2,1, tlpteam.css:4917) beats a zero-specificity default, so the buttons ignored the accent (stuck at #007acc, and Primary Color couldn't reach them). (0,3,0) beats that generic but still LOSES to BOTH controls: the Styling tab (`.rt-team-container-ID .readmore-btn .rt-ream-me-btn`, 0,4,0) and the Elementor button control (`{{WRAPPER}} .readmore-btn .rt-ream-me-btn`, 0,3,0 — ties, but its page CSS loads later). Scoped on `.layout2` alone (no `.rt-team-container`) to stay exactly at 0,3,0. */ .layout2 .readmore-btn .rt-ream-me-btn { background: var(--l2-primary); color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 6px 16px color-mix(in srgb, var(--l2-primary, #143ee5) 25%, transparent); } .layout2 .readmore-btn .rt-resume-btn, .layout2 .readmore-btn .rt-hire-btn { background: var(--l2-primary-50); color: var(--l2-primary); font-size: 13.5px; font-weight: 500; } .rt-team-container .layout2 .readmore-btn .rt-ream-me-btn:hover { background: var(--l2-primary-600); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--l2-primary, #143ee5) 32%, transparent); } .rt-team-container .layout2 .readmore-btn .rt-resume-btn:hover, .rt-team-container .layout2 .readmore-btn .rt-hire-btn:hover { background: var(--l2-primary-100); color: var(--l2-primary-600); } /* Trailing arrow on Read More, added without touching the markup */ .rt-team-container .layout2 .readmore-btn .rt-ream-me-btn::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; -webkit-transition: -webkit-transform .25s var(--l2-ease); transition: transform .25s var(--l2-ease); } .rt-team-container .layout2 .readmore-btn .rt-ream-me-btn:hover::after { -webkit-transform: translateX(3px); transform: translateX(3px); } /* ---------- Narrow card → STAY a list (horizontal), just tighten ---------- The card never collapses to a vertical block — even with many columns per row it keeps the photo-left / content-right LIST shape (per requirement). It only tightens the padding, gap and chip sizes so a narrow card stays readable. */ @container (max-width: 400px) { .rt-team-container .layout2 .single-team-area { padding: 12px; } .rt-team-container .layout2 .single-team-area .rttm-content-area { padding-left: 12px; } .rt-team-container .layout2 .contact-info li i { width: 24px; height: 24px; margin-right: 7px; font-size: 10px; } .rt-team-container .layout2 .social-icons { gap: 6px; } .rt-team-container .layout2 .social-icons a { width: 30px; height: 30px; } } @container (max-width: 300px) { .rt-team-container .layout2 .single-team-area .rttm-content-area { padding-left: 10px; } :where(.rt-team-container .layout2) h3 { font-size: 16px; } } /* ---------- Mobile (≤767px) → STACK: photo on TOP, content BELOW ---------- On phones the card turns vertical: a full-width photo banner on top, then the name / role / bio / contact / socials / button underneath. This is a VIEWPORT rule (mobile screens) — NOT a column-count rule. On tablet/desktop the card stays the horizontal photo-left LIST at every column count (per requirement). Below 768px the grid's rt-col-sm-N widths drop out anyway, so the left/right split is replaced by a top/bottom stack. Applies to BOTH paths (shortcode + Elementor List widget), which both carry `.rt-team-container .layout2`. */ @media (max-width: 767px) { .rt-team-container .layout2 .single-team-area { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } /* Photo → full-width banner on top (keeps the "Image column" split off on phones) */ .rt-team-container .layout2 .single-team-area .img-area { width: 100%; max-width: 100%; -ms-flex-preferred-size: auto; flex-basis: auto; -ms-flex-item-align: stretch; align-self: stretch; margin: 0 0 16px; } .rt-team-container .layout2 .img-area figure { height: auto; min-height: 0; aspect-ratio: 3 / 2; } .rt-team-container .layout2 .img-area figure a { height: 100%; } /* Content → full width, flush under the photo (no left gap now) */ .rt-team-container .layout2 .single-team-area .rttm-content-area { width: 100%; padding-left: 0; } /* "Round" image style → keep a centered circular avatar, not a full-width circle */ .rt-team-container .layout2 .round-img .single-team-area { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rt-team-container .layout2 .round-img .img-area { -ms-flex-item-align: center; align-self: center; width: 150px; max-width: 45%; margin: 0 auto 16px; } } /* ========================================================================== SLIDER LAYOUT (carousel1) — "Team Slider Layout" redesign -------------------------------------------------------------------------- Card: square photo with social chips that slide up on hover → accent gradient band (name + role) → white body (bio + Read More). Shortcode-only (the Elementor slider uses carousel-el-1). The template hook is `.rttm-slider1` on the slide and `.carousel1` on the row — carousel1 NO LONGER carries `.layout3`, so grid Layout 3's redesign can't clip it. Plugin element classes are kept, so the Styling tab and Primary Color keep working: paintable defaults use `:where()` / low specificity and lose to sc-css. ========================================================================== */ .rt-team-container .carousel1, .rt-team-container .carousel-el-1 { /* accent follows the shortcode Primary Color, falls back to the reference blue */ --s1-primary: var(--l1-primary, #143ee5); --s1-primary-600: color-mix(in srgb, var(--s1-primary) 82%, #000); --s1-primary-700: color-mix(in srgb, var(--s1-primary) 68%, #000); --s1-primary-50: color-mix(in srgb, var(--s1-primary) 8%, #fff); --s1-primary-100: color-mix(in srgb, var(--s1-primary) 16%, #fff); --s1-ink: #0f1535; --s1-ink-2: #3a3f5c; --s1-muted: #6b7088; --s1-line: #e7eaf3; --s1-radius: 18px; --s1-ease: cubic-bezier(.2, .7, .2, 1); --s1-shadow-sm: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); --s1-shadow-lg: 0 28px 70px color-mix(in srgb, var(--s1-primary, #143ee5) 18%, transparent), 0 6px 18px rgba(20, 30, 75, .06); } .rt-team-container .rttm-slider1 { height: auto; /* let the card set slide height so Swiper equal-height works */ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---------- Card ---------- */ .rt-team-container .rttm-slider1 .single-team-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; text-align: left; background: #fff; border: 1px solid var(--s1-line); border-radius: var(--s1-radius); overflow: hidden; /* Promote the card to its own layer so its rounded overflow:hidden clip survives the hover transform:translateY — otherwise the image-zoom flashes square top corners. */ will-change: transform; -webkit-transition: -webkit-transform .35s var(--s1-ease), box-shadow .35s var(--s1-ease), border-color .35s var(--s1-ease); transition: transform .35s var(--s1-ease), box-shadow .35s var(--s1-ease), border-color .35s var(--s1-ease); } .rt-team-container .rttm-slider1 .single-team-area:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); } /* ---------- Media (square photo) ---------- */ .rt-team-container .rttm-slider1 .rttm-slide-media { position: relative; overflow: hidden; background: #dfe3ee; aspect-ratio: 1 / 1; /* Round the media's own top corners as a backup clip for the hover image-zoom. */ border-top-left-radius: var(--s1-radius); border-top-right-radius: var(--s1-radius); } .rt-team-container .rttm-slider1 .rttm-slide-media figure { margin: 0; padding: 0; height: 100%; line-height: 0; } .rt-team-container .rttm-slider1 .rttm-slide-media figure a { display: block; height: 100%; } .rt-team-container .rttm-slider1 .rttm-slide-media img { width: 100%; height: 100%; max-width: 100%; display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; -webkit-transition: -webkit-transform .7s var(--s1-ease); transition: transform .7s var(--s1-ease); } .rt-team-container .rttm-slider1 .single-team-area:hover .rttm-slide-media img { -webkit-transform: scale(1.06); transform: scale(1.06); } /* social chips slide up over the image on hover */ .rt-team-container .rttm-slider1 .rttm-slide-media .social-icons { position: absolute; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin: 0; padding: 16px; background: -webkit-gradient(linear, left bottom, left top, from(rgba(15, 21, 53, .55)), to(rgba(15, 21, 53, 0))); background: linear-gradient(to top, rgba(15, 21, 53, .55), rgba(15, 21, 53, 0)); -webkit-transform: translateY(110%); transform: translateY(110%); -webkit-transition: -webkit-transform .4s var(--s1-ease); transition: transform .4s var(--s1-ease); } .rt-team-container .rttm-slider1 .single-team-area:hover .social-icons { -webkit-transform: translateY(0); transform: translateY(0); } /* chip STRUCTURE (size/shape) */ .rt-team-container .rttm-slider1 .rttm-slide-media .social-icons a { width: 36px; height: 36px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; line-height: 1; text-decoration: none; -webkit-transition: background .2s var(--s1-ease), color .2s var(--s1-ease), -webkit-transform .2s var(--s1-ease); transition: background .2s var(--s1-ease), color .2s var(--s1-ease), transform .2s var(--s1-ease); } /* chip PAINT at (0,3,1): beats the generic `.rt-team-container .social-icons a{color:#fff}` (0,2,1) but ties the Styling tab's `$sel .social-icons a` (0,3,1, loads later → wins), so the Social Icon Colour / Background controls still override. font-size lives HERE (not in the 0,4,1 structure rule above) so the Social icon-size control can override it. */ .rt-team-container .rttm-slider1 .social-icons a { background: rgba(255, 255, 255, .96); color: var(--s1-primary); font-size: 13px; } .rt-team-container .rttm-slider1 .rttm-slide-media .social-icons a:hover { background: var(--s1-primary); color: #fff; -webkit-transform: translateY(-2px); transform: translateY(-2px); } /* the shared social CSS tints the on hover; keep the glyph following the chip */ .rt-team-container .rttm-slider1 .social-icons a:hover i, .rt-team-container .rttm-slider1 .social-icons a:focus i { background: transparent; background-color: transparent; color: inherit; width: auto; height: auto; } /* --- Elementor + Pro: move the social chip onto the so the Slider widget's Social controls reach it. Pro emits `.social-icons a i { background-color; border-radius }` + `.social-icons a i[class*="fa"] { width; height }` (the glyph) — never the anchor for this layout — so with the chip on the anchor a Social BG just paints a box behind the glyph. Make the the chip and the anchor a bare wrapper. Scoped to .rt-elementor-container so the shortcode overlay (anchor chip, driven by sc-css which targets the anchor) is untouched. */ .rt-elementor-container .rttm-slider1 .rttm-slide-media .social-icons a { background: transparent; } .rt-elementor-container .rttm-slider1 .rttm-slide-media .social-icons a i { width: 36px; height: 36px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(255, 255, 255, .96); color: var(--s1-primary); border-radius: 50%; line-height: 1; } .rt-elementor-container .rttm-slider1 .rttm-slide-media .social-icons a:hover { background: transparent; } .rt-elementor-container .rttm-slider1 .rttm-slide-media .social-icons a:hover i, .rt-elementor-container .rttm-slider1 .rttm-slide-media .social-icons a:focus i { width: 36px; height: 36px; background: var(--s1-primary); color: #fff; } /* ---------- Band (name + role) ---------- */ .rt-team-container .rttm-slider1 .rttm-slide-band { padding: 16px 20px; background: -webkit-gradient(linear, left top, right bottom, from(var(--s1-primary)), to(var(--s1-primary-700))); background: linear-gradient(160deg, var(--s1-primary) 0%, var(--s1-primary-700) 100%); color: #fff; } .rt-team-container .rttm-slider1 .rttm-slide-band h3 { margin: 0; padding: 0; line-height: 1.25; } :where(.rt-team-container .rttm-slider1) .rttm-slide-band h3 { color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -.2px; } .rt-team-container .rttm-slider1 .rttm-slide-band h3 a { color: inherit; text-decoration: none; } .rt-team-container .rttm-slider1 .rttm-slide-band .tlp-position { margin: 3px 0 0; padding: 0; line-height: 1.5; } :where(.rt-team-container .rttm-slider1) .rttm-slide-band .tlp-position, :where(.rt-team-container .rttm-slider1) .rttm-slide-band .tlp-position a { color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 400; letter-spacing: .2px; text-decoration: none; } /* ---------- Body (bio + buttons) ---------- */ .rt-team-container .rttm-slider1 .rttm-slide-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 18px 20px 22px; } .rt-team-container .rttm-slider1 .rttm-slide-body .short-bio { margin: 0; padding: 0; } :where(.rt-team-container .rttm-slider1) .short-bio { color: var(--s1-muted); font-size: 14px; line-height: 1.65; } .rt-team-container .rttm-slider1 .short-bio p { margin: 0; padding: 0; color: inherit; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* department (muted label) */ .rt-team-container .rttm-slider1 .rttm-slide-body .tlp-department { margin: 0; padding: 0; } :where(.rt-team-container .rttm-slider1) .tlp-department { color: var(--s1-muted); font-size: 12.5px; font-weight: 500; } /* contact list — icon chip + text, same compact look as the list card. Colour on the WRAPPER via :where() so the per-field Styling controls (Email/Phone… colour) win. */ .rt-team-container .rttm-slider1 .rttm-slide-body .contact-info { margin: 0; padding: 0; } .rt-team-container .rttm-slider1 .contact-info ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 7px; } .rt-team-container .rttm-slider1 .contact-info li { display: block; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.rt-team-container .rttm-slider1) .contact-info li, :where(.rt-team-container .rttm-slider1) .contact-info li a { color: var(--s1-ink-2); font-size: 13.5px; line-height: 1.5; text-decoration: none; } .rt-team-container .rttm-slider1 .contact-info li i { width: 28px; height: 28px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; margin: 0 10px 0 0; background: var(--s1-primary-50); color: var(--s1-primary); border-radius: 8px; font-size: 11px; -ms-flex-negative: 0; flex-shrink: 0; } /* no underline on contact links (beats the theme's `a{text-decoration:underline}`; the `:where()` default above is zero-specificity and loses to the theme). */ .rt-team-container .rttm-slider1 .contact-info a, .rt-team-container .rttm-slider1 .contact-info a:hover, .rt-team-container .rttm-slider1 .contact-info a:focus { text-decoration: none; } .rt-team-container .rttm-slider1 .contact-info a { -webkit-transition: color .2s var(--s1-ease); transition: color .2s var(--s1-ease); } .rt-team-container .rttm-slider1 .contact-info a:hover { color: var(--s1-primary); } /* skill */ .rt-team-container .rttm-slider1 .rttm-slide-body .tlp-team-skill { margin: 0; } :where(.rt-team-container .rttm-slider1) .tlp-team-skill .skill_name { color: var(--s1-ink-2); font-size: 13px; font-weight: 500; } .rt-team-container .rttm-slider1 .rttm-slide-foot { margin-top: auto; } .rt-team-container .rttm-slider1 .rttm-slide-foot .readmore-btn { margin: 0; padding: 0; } .rt-team-container .rttm-slider1 .rttm-slide-foot .readmore-btn:empty { display: none; } .rt-team-container .rttm-slider1 .rttm-slide-foot .readmore-btn:not(.hirme-resume) { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .rt-team-container .rttm-slider1 .rttm-slide-foot .readmore-btn:not(.hirme-resume):not(:empty) { margin-bottom: 10px; } /* button box (structure) */ .rt-team-container .rttm-slider1 .readmore-btn a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; padding: 11px 22px; border-style: solid; border-width: 0; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; -webkit-transition: background .2s var(--s1-ease), color .2s var(--s1-ease), box-shadow .2s var(--s1-ease), -webkit-transform .2s var(--s1-ease); transition: background .2s var(--s1-ease), color .2s var(--s1-ease), box-shadow .2s var(--s1-ease), transform .2s var(--s1-ease); } /* Read More paint at (0,3,0): beats generic `.readmore-btn a{background:#007acc}` (0,2,1), still loses to the Styling tab (0,4,0). */ .rttm-slider1 .readmore-btn .rt-ream-me-btn { background: var(--s1-primary); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--s1-primary, #143ee5) 25%, transparent); } .rttm-slider1 .readmore-btn .rt-resume-btn, .rttm-slider1 .readmore-btn .rt-hire-btn { background: var(--s1-primary-50); color: var(--s1-primary); font-size: 13.5px; } .rt-team-container .rttm-slider1 .readmore-btn .rt-ream-me-btn:hover { background: var(--s1-primary-600); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--s1-primary, #143ee5) 35%, transparent); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .rt-team-container .rttm-slider1 .readmore-btn .rt-resume-btn:hover, .rt-team-container .rttm-slider1 .readmore-btn .rt-hire-btn:hover { background: var(--s1-primary-100); color: var(--s1-primary-600); } .rt-team-container .rttm-slider1 .readmore-btn .rt-ream-me-btn::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; -webkit-transition: -webkit-transform .25s var(--s1-ease); transition: transform .25s var(--s1-ease); } .rt-team-container .rttm-slider1 .readmore-btn .rt-ream-me-btn:hover::after { -webkit-transform: translateX(3px); transform: translateX(3px); } /* --- Elementor + Pro: keep the band text white on the accent gradient --- Pro's compiled CSS colours `.rt-elementor-container .tlp-position { color: initial }` (and h3 via its scheme), which would beat the zero-specificity band defaults above and turn the role black on the blue band. Re-assert white on the Elementor path at normal specificity; the link inherits so the Elementor Name/Designation Style controls (which target the wrappers) still override. Scoped to .rt-elementor-container so the shortcode band is untouched. */ .rt-elementor-container .rttm-slider1 .rttm-slide-band h3 { color: #fff; } .rt-elementor-container .rttm-slider1 .rttm-slide-band h3 a { color: inherit; } .rt-elementor-container .rttm-slider1 .rttm-slide-band .tlp-position { color: rgba(255, 255, 255, .85); } .rt-elementor-container .rttm-slider1 .rttm-slide-band .tlp-position a { color: inherit; } /* ---------- Holder breathing room ---------- The Swiper holder needs overflow:hidden to hide off-screen slides, but that also clips the cards' box-shadow AND the top of the card as it lifts on hover (translateY(-6px)), leaving a hard "wrapper" edge across the top/bottom. Add vertical padding so shadows + lift have room, and negative margin so the surrounding layout doesn't shift. Vertical only — horizontal padding would change Swiper's slide-width math. */ .rt-team-container :is(.carousel1, .carousel-el-1) .rt-carousel-holder.swiper { /* Vertical room only, so the hover lift (translateY -6px) isn't clipped by the holder's overflow:hidden; negative margin keeps the layout unchanged. No horizontal padding — the cards have no shadow now, and any horizontal room would just peek the neighbouring slide (loop slider). */ padding: 32px 0; margin: -32px 0; } /* ---------- Carousel nav (dots + arrows) — carousel1 (shortcode) + carousel-el-1 (Elementor) ---------- The dot selectors carry `.rt-carousel-holder.swiper` so they reach (0,5,0) and out-rank Pro's `.rt-elementor-container .rt-carousel-holder.swiper .swiper-pagination-bullet` (0,4,0) on the Elementor path. Arrow SIZE on Elementor stays governed by the widget's Navigation control (post-*.css, higher specificity); the appearance (white/rounded) below still applies. */ .rt-team-container :is(.carousel1, .carousel-el-1) .rt-carousel-holder.swiper .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 4px; opacity: 1; background: var(--s1-primary-100); border-radius: 999px; -webkit-transition: width .35s var(--s1-ease), background .25s var(--s1-ease); transition: width .35s var(--s1-ease), background .25s var(--s1-ease); } .rt-team-container :is(.carousel1, .carousel-el-1) .rt-carousel-holder.swiper .swiper-pagination-bullet-active { width: 34px; /* Solid colour (not a gradient background-image) so the shortcode "Buttons" style control's active colour — which sets background-color — can override the active dot. */ background-color: var(--s1-primary); } .rt-team-container :is(.carousel1, .carousel-el-1) .swiper-arrow { width: 52px; height: 52px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; color: var(--s1-ink); border: 1px solid var(--s1-line); border-radius: 14px; box-shadow: var(--s1-shadow-sm); -webkit-transition: background .2s var(--s1-ease), color .2s var(--s1-ease), border-color .2s var(--s1-ease), -webkit-transform .2s var(--s1-ease), box-shadow .2s var(--s1-ease); transition: background .2s var(--s1-ease), color .2s var(--s1-ease), border-color .2s var(--s1-ease), transform .2s var(--s1-ease), box-shadow .2s var(--s1-ease); } .rt-team-container :is(.carousel1, .carousel-el-1) .swiper-arrow:hover { background: var(--s1-primary); color: #fff; border-color: var(--s1-primary); -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--s1-primary, #143ee5) 30%, transparent); } /* The base top-nav offsets (next:right:15px, prev:left:-85px) were sized for the old ~30px arrows, so the 52px arrows overlap each other. Lay them out with flex and lift them above the cards instead. DOM order is next,prev → row-reverse shows prev (←) on the left, next (→) on the right, 10px apart. */ .rt-team-container :is(.carousel1, .carousel-el-1) .rt-carousel-holder.top-nav .swiper-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 10px; right: 0; top: -70px; } .rt-team-container :is(.carousel1, .carousel-el-1) .rt-carousel-holder.top-nav .swiper-arrow { position: static; left: auto; right: auto; margin: 0; } /* ========================================================================== ISOTOPE FILTER LAYOUT (isotope-free) — "Team Isotope Filter Layout" redesign -------------------------------------------------------------------------- Card: square photo -> accent gradient band (name + role) -> body (bio + contact chips + social chips + Read More). Filter bar = the plugin's `.ttp-isotope-buttons` restyled as a rounded pill group (active button = the accent gradient pill). Hook `.rttm-iso` on the item; tokens on the `.isotope-free` row so the filter bar shares them. Plugin element classes kept so the Styling tab + Primary Color work. ========================================================================== */ .rt-team-container .isotope-free { /* --l1-primary is set by the shortcode CSS (sc-css.php "Primary Color"); on the Elementor path the widget's Primary Color control writes --iso-primary directly (ElementorFilters::colorControls), so both paths reach it. Deliberately NOT chained through --rttm-primary-color: pro sets `:root { --rttm-primary-color: #007acc }`, which made the filter bar and this card default to pro's legacy TEAL while every redesigned layout defaults to #143ee5 — the menu items visibly disagreed with the card sitting under them. Same reasoning as layouts 10/12/13. */ --iso-primary: var(--l1-primary, #143ee5); --iso-primary-600: color-mix(in srgb, var(--iso-primary) 82%, #000); --iso-primary-700: color-mix(in srgb, var(--iso-primary) 68%, #000); --iso-primary-50: color-mix(in srgb, var(--iso-primary) 8%, #fff); --iso-primary-100: color-mix(in srgb, var(--iso-primary) 16%, #fff); --iso-ink: #0f1535; --iso-ink-2: #3a3f5c; --iso-muted: #6b7088; --iso-line: #e7eaf3; --iso-radius: 16px; --iso-radius-sm: 9px; --iso-ease: cubic-bezier(.2, .7, .2, 1); --iso-shadow-sm: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); --iso-shadow-lg: 0 28px 70px color-mix(in srgb, var(--iso-primary, #143ee5) 18%, transparent), 0 6px 18px rgba(20, 30, 75, .06); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---------- Filter bar (pill group) — GLOBAL to every isotope layout ---------- The `.ttp-isotope-buttons` bar is rendered (by the shared free render code) for ALL isotope layouts, not just isotope-free, so its nav style lives here on the bar itself (not under `.isotope-free`). The bar carries its own `--iso-*` tokens so the accent works regardless of which isotope layout wraps it (the card tokens stay on `.isotope-free`). The `.button-group` qualifier is load-bearing, not decoration: pro's legacy `.rt-elementor-container .button-group { padding: 0 10px 20px }` (_cp-button.scss) is also (0,2,0) and ships in a stylesheet that loads AFTER this one, so at equal specificity it won on the Elementor path only — the bar came out with 5px of padding on top and 20px underneath while the shortcode stayed symmetric, and the 10px side padding cost enough width to wrap the pills onto a second row. The bar always carries `button-group`, so this reaches (0,3,0) and both paths render identically. */ .rt-team-container .ttp-isotope-buttons.button-group { /* see the .isotope-free block above — NOT chained through --rttm-primary-color, or the bar defaults to pro's teal while the cards under it default to #143ee5. */ --iso-primary: var(--l1-primary, #143ee5); --iso-primary-700: color-mix(in srgb, var(--iso-primary) 68%, #000); --iso-primary-50: color-mix(in srgb, var(--iso-primary) 8%, #fff); --iso-ink-2: #3a3f5c; --iso-line: #e7eaf3; --iso-radius: 16px; --iso-ease: cubic-bezier(.2, .7, .2, 1); --iso-shadow-sm: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0 auto 44px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--iso-line); border-radius: var(--iso-radius); box-shadow: var(--iso-shadow-sm); } .rt-team-container .ttp-isotope-buttons.button-group button { margin: 0; border: 0; background: transparent; color: var(--iso-ink-2); font-family: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: .2px; line-height: 1; padding: 11px 20px; border-radius: 11px; cursor: pointer; white-space: nowrap; -webkit-transition: color .25s var(--iso-ease), background .25s var(--iso-ease), box-shadow .25s var(--iso-ease); transition: color .25s var(--iso-ease), background .25s var(--iso-ease), box-shadow .25s var(--iso-ease); } .rt-team-container .ttp-isotope-buttons.button-group button:hover { color: var(--iso-primary); background: var(--iso-primary-50); } .rt-team-container .ttp-isotope-buttons.button-group button.selected { color: #fff; background: -webkit-gradient(linear, left top, right bottom, from(var(--iso-primary)), to(var(--iso-primary-700))); background: linear-gradient(160deg, var(--iso-primary) 0%, var(--iso-primary-700) 100%); /* derived from --iso-primary so Primary Color moves the glow with the pill; the old hardcoded rgba(20,62,229,.32) left a blue halo under a recoloured button */ box-shadow: 0 6px 16px color-mix(in srgb, var(--iso-primary) 32%, transparent); } /* ---------- Card ---------- */ .rt-team-container .rttm-iso .single-team-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; text-align: left; background: #fff; border: 1px solid var(--iso-line); border-radius: var(--iso-radius); overflow: hidden; box-shadow: var(--iso-shadow-sm); will-change: transform; -webkit-transition: -webkit-transform .4s var(--iso-ease), box-shadow .4s var(--iso-ease), border-color .4s var(--iso-ease); transition: transform .4s var(--iso-ease), box-shadow .4s var(--iso-ease), border-color .4s var(--iso-ease); } .rt-team-container .rttm-iso .single-team-area:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); box-shadow: var(--iso-shadow-lg); border-color: transparent; } /* media */ .rt-team-container .rttm-iso .rttm-iso-media { position: relative; overflow: hidden; background: #dfe3ee; aspect-ratio: 1 / 1; border-top-left-radius: var(--iso-radius); border-top-right-radius: var(--iso-radius); } .rt-team-container .rttm-iso .rttm-iso-media figure { margin: 0; padding: 0; height: 100%; line-height: 0; } .rt-team-container .rttm-iso .rttm-iso-media figure a { display: block; height: 100%; } .rt-team-container .rttm-iso .rttm-iso-media img { width: 100%; height: 100%; max-width: 100%; display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; -webkit-transition: -webkit-transform .7s var(--iso-ease); transition: transform .7s var(--iso-ease); } .rt-team-container .rttm-iso .single-team-area:hover .rttm-iso-media img { -webkit-transform: scale(1.06); transform: scale(1.06); } /* band (name + role) */ .rt-team-container .rttm-iso .rttm-iso-band { padding: 15px 18px 16px; background: -webkit-gradient(linear, left top, right bottom, from(var(--iso-primary)), to(var(--iso-primary-700))); background: linear-gradient(160deg, var(--iso-primary) 0%, var(--iso-primary-700) 100%); color: #fff; } .rt-team-container .rttm-iso .rttm-iso-band h3 { margin: 0; padding: 0; line-height: 1.25; } :where(.rt-team-container .rttm-iso) .rttm-iso-band h3 { color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.2px; } .rt-team-container .rttm-iso .rttm-iso-band h3 a { color: inherit; text-decoration: none; } .rt-team-container .rttm-iso .rttm-iso-band .tlp-position { margin: 2px 0 0; padding: 0; line-height: 1.5; } :where(.rt-team-container .rttm-iso) .rttm-iso-band .tlp-position, :where(.rt-team-container .rttm-iso) .rttm-iso-band .tlp-position a { color: rgba(255, 255, 255, .85); font-size: 12.5px; font-weight: 400; letter-spacing: .2px; text-decoration: none; } /* The inside the designation must FOLLOW the .tlp-position colour — white by default, or the Designation Color control when the user sets one (the control colours .tlp-position, so `inherit` picks it up). color:inherit beats the theme `a{color:royalblue}` and the Elementor `.rt-elementor-container .tlp-position a{color:initial}` reset, yet still defers to the control (same pattern as the name link above). Do NOT hard-code white here or the Designation Color control stops working. */ .rt-team-container .rttm-iso .rttm-iso-band .tlp-position a { color: inherit; } /* body */ .rt-team-container .rttm-iso .rttm-iso-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 14px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 16px 18px 20px; } .rt-team-container .rttm-iso .rttm-iso-body .tlp-department { margin: 0; padding: 0; } :where(.rt-team-container .rttm-iso) .tlp-department { color: var(--iso-muted); font-size: 12.5px; font-weight: 500; } .rt-team-container .rttm-iso .short-bio { margin: 0; padding: 0; } :where(.rt-team-container .rttm-iso) .short-bio { color: var(--iso-muted); font-size: 14px; line-height: 1.6; } .rt-team-container .rttm-iso .short-bio p { margin: 0; padding: 0; color: inherit; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* contact list — icon chip + text */ .rt-team-container .rttm-iso .contact-info { margin: 0; padding: 0; } .rt-team-container .rttm-iso .contact-info ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 7px; } .rt-team-container .rttm-iso .contact-info li { display: block; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.rt-team-container .rttm-iso) .contact-info li, :where(.rt-team-container .rttm-iso) .contact-info li a { color: var(--iso-ink-2); font-size: 13.5px; line-height: 1.5; } /* The contact must INHERIT its

  • 's font-size, not pin its own. sc-css sets the Mobile/Fax/Location size controls on `.tlp-mobile`/`.tlp-fax`/`.tlp-location` (the
  • ) only — NOT on the inner — so without this the link keeps the 13.5px default and those size controls appear dead. Email/Telephone size `.tlp-x a` directly (0,3,1) and still win. */ :where(.rt-team-container .rttm-iso) .contact-info li a { font-size: inherit; } .rt-team-container .rttm-iso .contact-info li i { width: 28px; height: 28px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; margin: 0 10px 0 0; background: var(--iso-primary-50); color: var(--iso-primary); border-radius: 8px; font-size: 11px; -ms-flex-negative: 0; flex-shrink: 0; } .rt-team-container .rttm-iso .contact-info a, .rt-team-container .rttm-iso .contact-info a:hover, .rt-team-container .rttm-iso .contact-info a:focus { text-decoration: none; } .rt-team-container .rttm-iso .contact-info a { -webkit-transition: color .2s var(--iso-ease); transition: color .2s var(--iso-ease); } .rt-team-container .rttm-iso .contact-info a:hover { color: var(--iso-primary); } /* social chips */ .rt-team-container .rttm-iso .social-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; } :where(.rt-team-container .rttm-iso) .social-icons { text-align: left; } .rt-team-container .rttm-iso .social-icons a { width: 34px; height: 34px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: var(--iso-radius-sm); line-height: 1; text-decoration: none; -webkit-transition: background .2s var(--iso-ease), color .2s var(--iso-ease), -webkit-transform .2s var(--iso-ease); transition: background .2s var(--iso-ease), color .2s var(--iso-ease), transform .2s var(--iso-ease); } .rt-team-container .rttm-iso .social-icons a { background: var(--iso-primary-50); color: var(--iso-primary); font-size: 12.5px; } /* The Elementor CSS (free tlp-el-team.min.css AND pro tlp-el-team-pro.min.css) still ships the legacy `.isotope-free .single-team-area .social-icons a{background:transparent;font-size:16px}` (0,3,1) and loads LAST on any "default" block-type page — beating the chip default above and the shortcode Social controls (all 0,3,1). The free copy was removed at source, but the Pro copy can't be edited, so re-assert the chip one class stronger (adds .single-team-area → 0,4,1) to win regardless of which Elementor stylesheet is present. The Social controls are boosted to 0,4,1 too (sc-css.php) so they still override this. */ .rt-team-container .rttm-iso .single-team-area .social-icons a { background: var(--iso-primary-50); color: var(--iso-primary); font-size: 12.5px; } .rt-team-container .rttm-iso .social-icons a:hover, .rt-team-container .rttm-iso .single-team-area .social-icons a:hover { background: var(--iso-primary); color: #fff; -webkit-transform: translateY(-2px); transform: translateY(-2px); } /* !important is load-bearing here. These declarations neutralise the plugin's per-network brand rules (`.social-icons a:hover .fa-facebook-f { background:#3b5999; color:#fff; width/height:30px }` and ~20 siblings), which would otherwise paint a coloured SQUARE inside the round chip. Free's copies are plain, and this rule is later in the file, so it used to win on the shortcode — but PRO's copies carry `!important`, so on the Elementor path the Facebook square showed through. Matching their weight fixes that path without changing the shortcode's result. `color: inherit` rather than a fixed colour keeps the Social Hover Color control working: it paints the anchor (and the glyph at 0,5,2 with !important), and the glyph follows. */ .rt-team-container .rttm-iso .social-icons a:hover i, .rt-team-container .rttm-iso .social-icons a:focus i { background: transparent !important; background-color: transparent !important; color: inherit !important; width: auto !important; height: auto !important; } /* buttons */ .rt-team-container .rttm-iso .rttm-iso-foot { margin-top: auto; } .rt-team-container .rttm-iso .rttm-iso-foot .readmore-btn { margin: 0; padding: 0; } .rt-team-container .rttm-iso .rttm-iso-foot .readmore-btn:empty { display: none; } .rt-team-container .rttm-iso .rttm-iso-foot .readmore-btn:not(.hirme-resume) { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .rt-team-container .rttm-iso .rttm-iso-foot .readmore-btn:not(.hirme-resume):not(:empty) { margin-bottom: 10px; } .rt-team-container .rttm-iso .readmore-btn a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; padding: 10px 20px; border-style: solid; border-width: 0; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; -webkit-transition: background .2s var(--iso-ease), color .2s var(--iso-ease), box-shadow .2s var(--iso-ease), -webkit-transform .2s var(--iso-ease); transition: background .2s var(--iso-ease), color .2s var(--iso-ease), box-shadow .2s var(--iso-ease), transform .2s var(--iso-ease); } .rttm-iso .readmore-btn .rt-ream-me-btn { background: var(--iso-primary); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--iso-primary, #143ee5) 25%, transparent); } .rttm-iso .readmore-btn .rt-resume-btn, .rttm-iso .readmore-btn .rt-hire-btn { background: var(--iso-primary-50); color: var(--iso-primary); font-size: 13.5px; } /* Hover, mirroring Grid Layout 3's Resume / Hire Me scheme (primary-100 fill, primary-600 label) but on this card's own --iso-* family, so it follows the Primary Color control. The rest rule above is (0,3,0) and there was NO hover rule, so an old global `.rt-team-container .readmore-btn a:hover { background:#07639e }` (0,3,1) in tlp-el-team-pro won the hover and painted both buttons a hardcoded blue while the label stayed primary. Prefixing with .rt-team-container and keeping the class targets puts this at (0,4,0), over that legacy rule but still under the Resume / Hire Me Style controls at (0,6,0). */ .rt-team-container .rttm-iso .readmore-btn .rt-resume-btn:hover, .rt-team-container .rttm-iso .readmore-btn .rt-hire-btn:hover { background: var(--iso-primary-100); color: var(--iso-primary-600); } .rt-team-container .rttm-iso .readmore-btn .rt-ream-me-btn:hover { background: var(--iso-primary-600); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--iso-primary, #143ee5) 35%, transparent); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .rt-team-container .rttm-iso .readmore-btn .rt-ream-me-btn::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; -webkit-transition: -webkit-transform .25s var(--iso-ease); transition: transform .25s var(--iso-ease); } .rt-team-container .rttm-iso .readmore-btn .rt-ream-me-btn:hover::after { -webkit-transform: translateX(3px); transform: translateX(3px); } /* ---------- Filter bar: sliding glider + count badges ---------- */ .rt-team-container .ttp-isotope-buttons { position: relative; } .rt-team-container .ttp-isotope-buttons.button-group button { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .rt-team-container .ttp-isotope-buttons .count { font-size: 11px; font-weight: 600; line-height: 1; padding: 2px 7px; border-radius: 999px; background: var(--iso-primary-50); color: var(--iso-primary); -webkit-transition: background .25s var(--iso-ease), color .25s var(--iso-ease); transition: background .25s var(--iso-ease), color .25s var(--iso-ease); } .rt-team-container .ttp-isotope-buttons.button-group button.selected .count { background: rgba(255, 255, 255, .22); color: #fff; } .rt-team-container .ttp-isotope-buttons .rttm-iso-glider { position: absolute; z-index: 0; left: 5px; top: 5px; height: calc(100% - 10px); background: -webkit-gradient(linear, left top, right bottom, from(var(--iso-primary)), to(var(--iso-primary-700))); background: linear-gradient(160deg, var(--iso-primary) 0%, var(--iso-primary-700) 100%); border-radius: 11px; /* same as the .selected pill above — the glider is what actually paints the active filter, so its glow must follow --iso-primary too */ box-shadow: 0 6px 16px color-mix(in srgb, var(--iso-primary) 32%, transparent); pointer-events: none; -webkit-transition: left .35s var(--iso-ease), top .35s var(--iso-ease), width .35s var(--iso-ease), height .35s var(--iso-ease), opacity .2s var(--iso-ease); transition: left .35s var(--iso-ease), top .35s var(--iso-ease), width .35s var(--iso-ease), height .35s var(--iso-ease), opacity .2s var(--iso-ease); } /* glider active -> the pill itself goes transparent so only the glider paints the accent */ .rt-team-container .ttp-isotope-buttons.rttm-iso-has-glider button.selected { background: transparent; box-shadow: none; } /*********************** Layout 12 - text colours (kept last on purpose) ************************/ /* Both faces of the flip card sit on the accent colour, so name + role default to white. These stay at 0,1,1 / 0,2,0 — low enough that the Name Color (`.rt-team-container- h3`) and Designation Color (`… .tlp-position`) controls, which live in the later-loaded team-sc.css, always win. They must appear AFTER `.rt-team-container .tlp-position { color: initial }` (line ~6034), which has the same specificity and would otherwise win on source order — hence this block lives at the end of the file. */ .layout12 h3 { color: #fff; font-size: 18px; font-weight: 600; } .layout12 h3 a { color: inherit; } .layout12 .tlp-position { font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: rgba(255, 255, 255, .82); } .layout12 .tlp-position a { color: inherit; text-decoration: none; } /*********************** Layout 13 / isotope 8 - text (kept last on purpose) ************************/ /* Same reasoning as the layout 12 block above: these sit at 0,1,1 / 0,2,0 so the Name and Designation controls (0,2,0, in the later-loaded team-sc.css) always win, and they must come after `.rt-team-container .tlp-position { color: initial }` (line ~6034) which would otherwise beat them on source order. */ .layout13 h3, .isotope8 h3 { font-size: 19px; font-weight: 600; color: var(--l13-ink); } .layout13 h3 a, .isotope8 h3 a { color: inherit; } .layout13 .tlp-position, .isotope8 .tlp-position { font-size: 11.5px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--l13-primary); background: var(--l13-primary-50); } .layout13 .tlp-position a, .isotope8 .tlp-position a { color: inherit; text-decoration: none; } .layout13 .short-bio, .isotope8 .short-bio { font-size: 14px; line-height: 1.65; color: var(--l13-muted); } /* `inherit`, not literals: the Elementor Short Biography controls only target the `.short-bio` wrapper, so the

    has to follow it. The shortcode controls target `.short-bio p` directly and win on source order (team-sc.css loads later). */ .layout13 .short-bio p, .isotope8 .short-bio p { font-size: inherit; line-height: inherit; color: inherit; } /*********************** Layout 14 / isotope 9 / carousel 8 - text (kept last on purpose) ************************/ /* Same reasoning as the layout 12 / 13 blocks above: 0,1,1 and 0,2,0 so the Name and Designation controls (0,2,0, in the later-loaded team-sc.css) always win, and they must come after `.rt-team-container .tlp-position { color: initial }` (line ~6034), which has the same specificity and would otherwise win on source order. */ .layout14 h3, .isotope9 h3, .carousel8 h3 { font-size: 19px; font-weight: 600; color: #fff; } .layout14 h3 a, .isotope9 h3 a, .carousel8 h3 a { color: inherit; } .layout14 .tlp-position, .isotope9 .tlp-position, .carousel8 .tlp-position { font-size: 12.5px; font-weight: 400; letter-spacing: .3px; color: rgba(255, 255, 255, .88); } .layout14 .tlp-position a, .isotope9 .tlp-position a, .carousel8 .tlp-position a { color: inherit; text-decoration: none; } /*********************** Layout 15 / isotope 10 / carousel 11 - text (kept last) ************************/ /* Same reasoning as the layout 12-14 blocks above: 0,1,1 and 0,2,0 so the Name and Designation controls (0,2,0, in the later-loaded team-sc.css) always win, and they must come after `.rt-team-container .tlp-position { color: initial }` (line ~6034). */ .layout15 h3, .isotope10 h3, .carousel11 h3 { font-size: 21px; font-weight: 600; color: #fff; } .layout15 h3 a, .isotope10 h3 a, .carousel11 h3 a { color: inherit; } .layout15 .tlp-position, .isotope10 .tlp-position, .carousel11 .tlp-position { margin: 6px 0 0; padding: 0; font-size: 13.5px; font-weight: 400; letter-spacing: .3px; color: rgba(255, 255, 255, .9); } .layout15 .tlp-position a, .isotope10 .tlp-position a, .carousel11 .tlp-position a { color: inherit; text-decoration: none; } /* ========================================================================== Special Layout 01 - colour + typography defaults Deliberately LOW specificity (`.special01 …`, no container prefix) and deliberately LAST in the file. Low so that every shortcode style control (Name, Designation, Short Bio, Email/Phone/Mobile/Fax/Location/Web, Social, Buttons, Primary Color) still wins - their selectors carry the `.rt-team-container.rt-team-container-` prefix and outrank these. Last so that these still beat the generic `.rt-team-container …` defaults earlier in this stylesheet, which have the same specificity. Geometry for this layout lives in the main Special Layout 01 block above. The same rules are mirrored in tlp-team-pro/src/scss/frontend/layouts/_lo-special-1.scss. ========================================================================== */ .special01 h3 { font-size: 20px; line-height: 1.15; font-weight: 600; letter-spacing: -0.3px; color: #fff; } .special01 h3 a { color: inherit; text-decoration: none; } .special01 .tlp-position, .special01 .tlp-department { font-size: 14px; line-height: 1.45; font-weight: 400; letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.88); } .special01 .tlp-position a, .special01 .tlp-department a { color: inherit; text-decoration: none; } .special01 .special-selected-short-bio { font-size: 15px; line-height: 1.7; color: #3a3f5c; } .special01 .contact-info ul li { font-size: 14.5px; line-height: 1.5; color: #3a3f5c; } .special01 .contact-info ul li a { color: inherit; text-decoration: none; } .special01 .contact-info ul li a:hover { color: var(--rt-sp1-primary, #143ee5); } .special01 .contact-info i { color: var(--rt-sp1-primary, #143ee5); } .special01 .social-icons a { font-size: 14px; color: var(--rt-sp1-primary, #143ee5); background: #fff; } /* the pro stylesheet hard-sets 20px on the glyph for every Elementor layout; inheriting keeps both paths identical and keeps the Social size control live */ .special01 .social-icons a i { font-size: inherit; } .special01 .social-icons a:hover, .special01 .social-icons a:focus { color: #fff; background: var(--rt-sp1-primary, #143ee5); border-color: var(--rt-sp1-primary, #143ee5); } .special01 .readmore-btn a { color: #fff; background: var(--rt-sp1-primary, #143ee5); /* keep a border STYLE so the button Border Width control has something to widen - `border: 0` would compute border-width to 0 whatever it sets */ border: 0 solid transparent; border-radius: 999px; } /* Thumbnail grid spacing - same shape the Gutter control emits, so setting that control simply replaces these. */ .special01 .special-items-wrapper { margin-left: -7px; margin-right: -7px; } .special01 .special-items-wrapper > div { padding-left: 7px; padding-right: 7px; margin-bottom: 14px; } .special01 .readmore-btn a:hover { color: #fff; background: var(--rt-sp1-primary-dark, #0e2aa3); } /* Name shrinks on phones. Low specificity as ever, so the Name Size control still overrides it. */ @media (max-width: 575px) { .special01 h3 { font-size: 19px; } .special01 .tlp-position, .special01 .tlp-department { font-size: 13px; } } /**********************************************************************/ /*************** Layout 5 — paintable defaults (LAST) *****************/ /**********************************************************************/ /* Every colour / size / weight default for the table layout lives here, wrapped in :where() so it contributes almost no specificity. The generated `team-sc.css` loads after this file AND outranks it, so each Styling control (Name, Designation, Email, Phone, Mobile, Fax, Location, Website, Social) overrides its default cleanly. Two exceptions are called out inline. --l5-primary is emitted by the Primary Color control in templates/sc-css.php. */ :where(.rt-team-container .layout5 .table) > thead > tr > th { color: #6b7088; } :where(.rt-team-container .layout5 .table) > tbody > tr > td { font-size: 14px; color: #3a3f5c; } :where(.rt-team-container .layout5 .table) h3 .team-name, :where(.rt-team-container .layout5 .table) h3 .team-name a { font-size: 15px; font-weight: 600; letter-spacing: -.1px; color: #0f1535; } /* Needs exactly (0,3,0)/(0,3,1): enough to beat the legacy global `.rt-team-container .tlp-position` (0,2,0), which otherwise pins the role to black at weight 400 whenever the link is switched off, and no more, so the Designation Styling control — same specificity, loaded later in team-sc.css — still wins the tie. */ :where(.rt-team-container) .layout5 .table .tlp-position, :where(.rt-team-container) .layout5 .table .tlp-position a { font-size: 13px; font-weight: 500; color: var(--l5-primary, #143ee5); } /* Contact chip + text. The chip's own tint is a background, which no shortcode control paints, so it can sit this low safely. */ :where(.rt-team-container .layout5 .table) .rt-l5-contact i { font-size: 11px; background-color: #eef1ff; color: var(--l5-primary, #143ee5); } :where(.rt-team-container .layout5 .table) .rt-l5-contact a, :where(.rt-team-container .layout5 .table) .rt-l5-contact .tlp-location { color: #3a3f5c; } :where(.rt-team-container .layout5 .table) .rt-l5-contact a:hover { color: var(--l5-primary, #143ee5); } /* Social chips need exactly (0,3,1): enough to beat the legacy global `.rt-team-container .social-icons a` (0,2,1) that sets color:#fff and font-size:20px, and no more, so the Social Styling control — same (0,3,1), loaded later in team-sc.css — still wins the tie. */ :where(.rt-team-container) .layout5 .table .social-icons a { font-size: 12px; color: var(--l5-primary, #143ee5); } :where(.rt-team-container .layout5 .table) .social-icons a { background-color: #eef1ff; } :where(.rt-team-container) .layout5 .table .social-icons a i { color: inherit; font-size: inherit; } /**********************************************************************/ /************* Carousel 10 — paintable defaults (LAST) ****************/ /**********************************************************************/ /* Every declaration below is something a Styling control can write, so each rule is held at or under the control's own specificity. team-sc.css loads AFTER this file, so a tie goes to the control. Keep _lo-carousel-10.scss's tail block in step. */ /* Name — 0,2,1, the same budget carousel9 uses: above the theme's own `h3{color}` and the plugin's generics, tied with the Name control which then wins on load order. */ .rt-team-container .carousel10 h3 { font-size: 29px; line-height: 1.25; font-weight: 600; letter-spacing: -.4px; color: #0f1535; } /* anchors INHERIT: a hard colour here would out-rank a control that only paints the parent (the Name Color control targets h3, not h3 a) and the visible label would ignore it. */ .rt-team-container .carousel10 h3 a, .rt-team-container .carousel10 .tlp-position a, .rt-team-container .carousel10 .contact-info a { color: inherit; } /* Designation — 0,3,0. Needs to clear the later generic `.rt-team-container .tlp-position { color: initial }` (0,2,0); ties the Designation control, which wins on order. */ .rt-team-container .carousel10 .tlp-position { font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c10-primary); } .rt-team-container .carousel10 .tlp-department { font-size: 12.5px; font-weight: 500; letter-spacing: .6px; color: #6b7088; } /* Short bio — the paint goes on `.short-bio` ONLY. The Elementor Short Biography controls target the wrapper and let the

    inherit, so a hard colour/size on `.short-bio p` here would out-rank them by being a direct rule (the shortcode control writes the

    itself, so it still wins there). */ .rt-team-container .carousel10 .short-bio { font-size: 16px; line-height: 1.75; color: #6b7088; } /* Contact — the colour goes on the WRAPPER, never on the

  • : the per-field controls (`$selector .tlp-email`, 0,3,0) target the li itself, and a direct rule always beats an inherited one, so every field control keeps working. */ .rt-team-container .carousel10 .contact-info { font-size: 13.5px; color: #3a3f5c; } .rt-team-container .carousel10 .contact-info ul li i { color: var(--c10-primary); } /* Social — 0,3,1, tied with `$selector .social-icons a` and below the 0,4,1 variant. */ .rt-team-container .carousel10 .social-icons a { font-size: 14px; color: #0f1535; background: #fff; } .rt-team-container .carousel10 .single-team-area .social-icons a:hover { background: var(--c10-primary); border-color: var(--c10-primary); color: #fff; } /* Skills — type and colour go on the WRAPPER, which is what both paths' controls target (Elementor's Skills Typography/Text Color write `{{WRAPPER}} .tlp-team-skill`). A direct rule on `.skill_name` or `.percent-text` would out-rank them by directness, which is exactly how the Elementor typography control was blocked. The shortcode control writes `$selector .skill_name` itself, so it still wins there. */ .rt-team-container .carousel10 .tlp-team-skill { font-size: 13.5px; font-weight: 500; color: #0f1535; } /* the base rule paints the percentage #fff at 12px inside a blue bubble — neutralise it to `inherit` so the wrapper (and therefore the control) governs it. */ .rt-team-container .carousel10 .tlp-team-skill .skill-prog .percent-text { font-size: inherit; font-weight: inherit; color: inherit; } /* Buttons — 0,4,0 / 0,4,1, tied with the Read More / Resume / Hire Me controls. */ .rt-team-container .carousel10 .readmore-btn .rt-resume-btn, .rt-team-container .carousel10 .readmore-btn .rt-hire-btn { font-size: 13.5px; font-weight: 500; color: #0f1535; background: #fff; } .rt-team-container .carousel10 .readmore-btn .rt-resume-btn:hover, .rt-team-container .carousel10 .readmore-btn .rt-hire-btn:hover { border-color: var(--c10-primary); background: #eef1ff; color: var(--c10-primary); } .rt-team-container .carousel10 .readmore-btn .rt-ream-me-btn { font-size: 14px; font-weight: 500; color: #fff; background: var(--c10-primary); /* the glow is mixed FROM the accent so Primary Color moves it too — the first declaration is the fallback for engines without color-mix(). */ box-shadow: 0 12px 26px color-mix(in srgb, var(--c10-primary, #143ee5) 28%, transparent); box-shadow: 0 12px 26px color-mix(in srgb, var(--c10-primary) 28%, transparent); } /* explicit, because the generic `.rt-team-container .readmore-btn a:hover` (0,3,1) repaints it #07639e otherwise — a rest-state background alone is not enough. */ .rt-team-container .carousel10 .readmore-btn .rt-ream-me-btn:hover { background: var(--c10-primary-700); color: #fff; } /* Arrows + dots — 0,4,0, tied with the shortcode "Buttons" control's `$selector .rt-carousel-holder .swiper-arrow`. */ .rt-team-container .carousel10 .swiper-nav-main .swiper-arrow { background: #fff; color: #0f1535; font-size: 13px; } .rt-team-container .carousel10 .swiper-nav-main .swiper-arrow:hover { background: var(--c10-primary); color: #fff; } .rt-team-container .carousel10 .rt-carousel-holder.swiper .swiper-pagination-bullet { background: #c9cfe3; } .rt-team-container .carousel10 .rt-carousel-holder.swiper .swiper-pagination-bullet-active { background: var(--c10-primary); } /**********************************************************************/ /************** Isotope 1 — paintable defaults (LAST) *****************/ /**********************************************************************/ /* Every declaration below is something a Styling control can write, so each rule is held at or under the control's own specificity. team-sc.css loads AFTER this file, so a tie goes to the control. Keep _lo-isotope-1.scss's tail block in step. NOTE: this card has no `.single-team-area`, so the Social control only reaches it through its `$selector .social-icons a` (0,4,1) arm — these stay below that. */ /* Name — 0,2,1, tied with the Name control and beaten by it on load order. The plate and the overlay copy share the selector on purpose: both are `h3 > .team-name`, so one control paints both. */ .rt-team-container .isotope1 h3 { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.2px; color: #fff; } /* The plate's own size/colour tweaks are scoped with `:where()` so they add NOTHING to the selector's weight. Without it `.isotope1 .rest-plate .tlp-position` (0,4,0) out-ranked the Designation Color control (0,3,0) and the plate ignored it while the overlay copy obeyed — the two copies of the same field disagreed. */ .rt-team-container .isotope1 :where(.rest-plate) h3 { font-size: 16.5px; } /* anchors INHERIT so a Name Color control that paints only the parent still reaches the label */ .rt-team-container .isotope1 h3 a, .rt-team-container .isotope1 .tlp-position a { color: inherit; } /* 0,3,0 — the theme's underline on the designation link survived a 0,2,0 reset. Still below any Typography control's own text-decoration. */ .rt-team-container .isotope1 .team-member :where(a) { text-decoration: none; } /* Designation — 0,3,0. Needs to clear the later generic `.rt-team-container .tlp-position { color: initial }` (0,2,0); ties the Designation control, which wins on order. */ .rt-team-container .isotope1 .tlp-position { font-size: 11.5px; font-weight: 500; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255, 255, 255, .82); } .rt-team-container .isotope1 :where(.rest-plate) .tlp-position { color: rgba(255, 255, 255, .8); } /* Short bio — paint on `.short-bio` only, never on the

    : the Elementor control targets the wrapper and lets the paragraph inherit, and a direct rule on the

    would out-rank it. */ .rt-team-container .isotope1 .short-bio { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); } /* Social — 0,3,1, below the `$selector .social-icons a` (0,4,1) control arm. */ .rt-team-container .isotope1 .social-icons a { font-size: 13px; color: #fff; background: rgba(255, 255, 255, .14); } .rt-team-container .isotope1 .social-icons a:hover { background: #fff; color: var(--iso1-primary); } /* Buttons — 0,4,0 / 0,4,1, tied with the Resume / Hire Me / Read More controls. */ .rt-team-container .isotope1 .readmore-btn .rt-resume-btn, .rt-team-container .isotope1 .readmore-btn .rt-hire-btn { font-size: 12.5px; font-weight: 500; color: #fff; background: rgba(255, 255, 255, .12); } /* Hover fills with the layout's primary and keeps the label white, so the secondary buttons pick up the Primary Color control instead of a fixed translucent white. Keep in step with the Elementor twin in tlp-team-pro _lo-isotope-1.scss. */ .rt-team-container .isotope1 .readmore-btn .rt-resume-btn:hover, .rt-team-container .isotope1 .readmore-btn .rt-hire-btn:hover { background: var(--iso1-primary); border-color: #fff; color: #fff; } .rt-team-container .isotope1 .readmore-btn .rt-ream-me-btn { font-size: 13px; font-weight: 500; color: var(--iso1-primary-700); background: #fff; } /* explicit, because the generic `.rt-team-container .readmore-btn a:hover` (0,3,1) repaints it #07639e otherwise — a rest-state background alone is not enough. The label colour is held at the rest value on purpose: the approved design gives its hover feedback through the sliding arrow, not a colour shift. */ .rt-team-container .isotope1 .readmore-btn .rt-ream-me-btn:hover { background: #fff; color: var(--iso1-primary-700); } /*********************** Single detail popup — START (generated) ********************/ /* Two-column detail popup: photo gallery left, scrollable details right. Generated by scratchpad/popup-css.py from ONE source body shared with pro's _lo-single-modal.scss — edit the script, never this block. */ /* ---------- user-owned colour tokens ---------- PopUp Background / Text / Link / Link Hover set these on the shell; every rule below reads them, so a control never has to out-specify the design. :where() keeps the defaults at zero specificity, and declaring them on the SHELL rather than on the card means no inner element can shadow the value a control writes. */ :where(#tlp-modal) { --rttm-pop-surface: #fff; --rttm-pop-text: #3a3f5c; --rttm-pop-heading: #0f1535; --rttm-pop-muted: #6b7088; --rttm-pop-link: var(--rttm-pop-text, #3a3f5c); --rttm-pop-link-hover: var(--rttm-pop-primary, #143ee5); } /* shell — the modal box itself. --rttm-pop-primary is set on #tlp-modal by the runtime from the opening container's Primary Color, so the popup follows the same accent as the cards; the tint is derived from it so one value drives the pills, icon chips, skill bars, buttons and hovers. */ #tlp-modal .md-content { --rttm-pop-primary-50: #eef1ff; --rttm-pop-primary-50: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 8%, #fff); --rttm-pop-primary-600: #1133c2; --rttm-pop-primary-600: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 82%, #000); width: min(920px, 100%); max-width: min(920px, 100%); max-height: min(620px, calc(100vh - 48px)); background: var(--rttm-pop-surface, #fff); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 120px rgba(10, 15, 40, .45); } #tlp-modal .md-content > .tlp-md-content-holder { height: 100%; } /* two-column body: gallery | details. The row is bounded so the details column can own the scrolling instead of the whole modal growing. */ #tlp-modal .md-content .rttm-pop { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr); max-height: min(620px, calc(100vh - 48px)); background: var(--rttm-pop-surface, #fff); color: var(--rttm-pop-text, #3a3f5c); font-size: 16px; line-height: 1.6; } /* ---------- loading / reveal ---------- The AJAX returns well before the photos decode. Rather than let the modal scale in empty and have the content (then the image) snap in mid-animation, the card ships covered by a spinner and cross-fades in as one piece once the runtime adds `is-ready` — which it does only after every gallery image has actually decoded. `.tlp-md-loading` covers the earlier moment, the AJAX round-trip itself; the markup ships the literal word "Loading...", hence font-size:0. */ #tlp-modal .md-content .tlp-md-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: var(--rttm-pop-surface, #fff); font-size: 0; color: transparent; } #tlp-modal .md-content .tlp-md-loading::after, #tlp-modal .md-content .rttm-pop-spinner::after { content: ""; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--rttm-pop-primary-50, #eef1ff); border-top-color: var(--rttm-pop-primary, #143ee5); animation: rttm-pop-spin .8s linear infinite; } #tlp-modal .md-content .rttm-pop-spinner { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: var(--rttm-pop-surface, #fff); transition: opacity .25s cubic-bezier(.2, .7, .2, 1); } #tlp-modal .md-content .rttm-pop.is-ready .rttm-pop-spinner { opacity: 0; pointer-events: none; } /* both columns fade in together, so the photo never hard-cuts over the dark panel */ #tlp-modal .md-content .rttm-pop-gallery, #tlp-modal .md-content .rttm-pop-body { opacity: 0; transition: opacity .4s cubic-bezier(.2, .7, .2, 1) .05s; } #tlp-modal .md-content .rttm-pop.is-ready .rttm-pop-gallery, #tlp-modal .md-content .rttm-pop.is-ready .rttm-pop-body { opacity: 1; } @keyframes rttm-pop-spin { to { transform: rotate(360deg); } } /* ---------- gallery (left) ---------- */ #tlp-modal .md-content .rttm-pop-gallery { position: relative; background: #0e1430; /* min-block-size:0 defeats the grid child's automatic min-height:auto, which would otherwise let the image column push the modal taller than its cap */ min-block-size: 0; overflow: hidden; } #tlp-modal .md-content .rttm-pop-gallery .rt-carousel-holder, #tlp-modal .md-content .rttm-pop-gallery .swiper, #tlp-modal .md-content .rttm-pop-gallery .swiper-wrapper, #tlp-modal .md-content .rttm-pop-gallery .swiper-slide, #tlp-modal .md-content .rttm-pop-gallery .profile-img-wrapper, #tlp-modal .md-content .rttm-pop-gallery .tlp-single-img-wrapper { height: 100%; } /* the featured-image fallback is a plain div in normal flow — pin it so the photo fills the column instead of overflowing at its natural aspect ratio */ #tlp-modal .md-content .rttm-pop-gallery .tlp-single-img-wrapper { position: absolute; inset: 0; } #tlp-modal .md-content .rttm-pop-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; } /* bottom scrim so white dots stay legible over a light photo */ #tlp-modal .md-content .rttm-pop-gallery::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 20, 48, .4), transparent 40%); pointer-events: none; z-index: 2; } #tlp-modal .md-content .rttm-pop-gallery .swiper-nav, #tlp-modal .md-content .rttm-pop-gallery .swiper-arrow { z-index: 3; } #tlp-modal .md-content .rttm-pop-gallery .swiper-button-prev, #tlp-modal .md-content .rttm-pop-gallery .swiper-button-next { width: 42px; height: 42px; /* the shared carousel CSS sets top:50% with no translate and margin-top:0, which puts the arrow's TOP edge on the centre line — half a button too low */ top: 50%; transform: translateY(-50%); margin: 0; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--rttm-pop-heading, #0f1535); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1); } /* inset from the gallery edges, per the reference (the shared carousel CSS pins these flush at 0 — and pulls them outside the holder entirely at some breakpoints) */ #tlp-modal .md-content .rttm-pop-gallery .swiper-button-prev { left: 14px; right: auto; } #tlp-modal .md-content .rttm-pop-gallery .swiper-button-next { right: 14px; left: auto; } #tlp-modal .md-content .rttm-pop-gallery .swiper-button-prev:hover, #tlp-modal .md-content .rttm-pop-gallery .swiper-button-next:hover { background: var(--rttm-pop-primary, #143ee5); color: #fff; } #tlp-modal .md-content .rttm-pop-gallery .swiper-button-prev:active, #tlp-modal .md-content .rttm-pop-gallery .swiper-button-next:active { transform: translateY(-50%) scale(.94); } /* The gallery's dots are driven by the member gallery, not by the layout's own "dots" option, so the shared carousel CSS leaves this container collapsed — position it explicitly or the bullets render at 0x0. */ #tlp-modal .md-content .rttm-pop-gallery .swiper-pagination { position: absolute; left: 0; right: 0; bottom: 16px; top: auto; z-index: 3; width: auto; height: auto; display: flex; align-items: center; justify-content: center; gap: 7px; transform: none; } #tlp-modal .md-content .rttm-pop-gallery .swiper-pagination-bullet { margin: 0; } #tlp-modal .md-content .rttm-pop-gallery .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .5); opacity: 1; transition: width .3s cubic-bezier(.2, .7, .2, 1), background .25s cubic-bezier(.2, .7, .2, 1); } #tlp-modal .md-content .rttm-pop-gallery .swiper-pagination-bullet-active { width: 24px; background: #fff; } /* ---------- details (right, scrolls) ---------- */ #tlp-modal .md-content .rttm-pop-body { padding: 38px 36px 34px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; min-block-size: 0; } #tlp-modal .md-content .rttm-pop-body .md-header { margin: 0; padding: 0; border: 0; background: none; } /* role + department pills sit on one wrapping row */ #tlp-modal .md-content .rttm-pop-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; } #tlp-modal .md-content .rttm-pop-dept { display: inline-flex; align-items: center; margin: 0; padding: 5px 13px; border-radius: 999px; background: #f3f5fb; font-size: 12px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; line-height: 1.4; } :where(#tlp-modal .md-content) .rttm-pop-dept { color: var(--rttm-pop-muted, #6b7088); } /* role pill */ #tlp-modal .md-content .rttm-pop-role { align-self: flex-start; display: inline-flex; align-items: center; margin: 0; padding: 5px 13px; border-radius: 999px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 12px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; line-height: 1.4; } :where(#tlp-modal .md-content) .rttm-pop-role, :where(#tlp-modal .md-content) .rttm-pop-role .experience { color: var(--rttm-pop-primary, #143ee5); } #tlp-modal .md-content .rttm-pop-role .experience { margin-left: 5px; font-weight: 400; text-transform: none; } /* name */ #tlp-modal .md-content .rttm-pop-name { margin: 0 0 16px; padding: 0; } :where(#tlp-modal .md-content) .rttm-pop-name { font-size: 30px; line-height: 1.12; font-weight: 600; letter-spacing: -.4px; color: var(--rttm-pop-heading, #0f1535); } #tlp-modal .md-content .rttm-pop-body .tlp-tag-line { margin: -8px 0 16px; font-size: 14px; font-style: italic; color: var(--rttm-pop-muted, #6b7088); } /* bio + post content */ #tlp-modal .md-content .rttm-pop-body .short-bio, #tlp-modal .md-content .rttm-pop-body .tlp-md-member-details { margin: 0 0 22px; font-size: 14.5px; line-height: 1.7; } #tlp-modal .md-content .rttm-pop-body .short-bio p, #tlp-modal .md-content .rttm-pop-body .tlp-md-member-details p { margin: 0 0 10px; font-size: inherit; line-height: inherit; } #tlp-modal .md-content .rttm-pop-body .short-bio p:last-child, #tlp-modal .md-content .rttm-pop-body .tlp-md-member-details p:last-child { margin-bottom: 0; } /* contact list — icon chip + text, matching the reference */ #tlp-modal .md-content .rttm-pop-body .contact-info { margin: 0 0 22px; } #tlp-modal .md-content .rttm-pop-body .contact-info ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } #tlp-modal .md-content .rttm-pop-body .contact-info ul li { display: flex; align-items: center; gap: 13px; margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 1.5; list-style: none; } #tlp-modal .md-content .rttm-pop-body .contact-info ul li::before { content: none; } #tlp-modal .md-content .rttm-pop-body .contact-info ul li i { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 13px; line-height: 1; } :where(#tlp-modal .md-content) .rttm-pop-body .contact-info ul li i { color: var(--rttm-pop-primary, #143ee5); } #tlp-modal .md-content .rttm-pop-body .contact-info ul li a { text-decoration: none; transition: color .2s cubic-bezier(.2, .7, .2, 1); } /* NOT :where() — the old dark popup left `.md-modal .rt-team-container .contact-info ul li a { color:#fff }` (0,3,3) behind, which beat a zeroed default and rendered the contact text white-on-white. The `li` needs it too: the Location row is a bare span. Nothing here fights a user control — the popup Text Color control only targets h3 and the author-post links, and the per-field Email/Phone controls are scoped to the shortcode id, which out-specifies this. */ #tlp-modal .md-content .rttm-pop-body .contact-info ul li, #tlp-modal .md-content .rttm-pop-body .contact-info ul li > span { color: var(--rttm-pop-text, #3a3f5c); } /* the email / fax / website rows wrap their value in a span INSIDE the anchor, so the link colour has to reach that span too — otherwise only the bare-text rows (phone, mobile) ever follow PopUp Link Color. */ #tlp-modal .md-content .rttm-pop-body .contact-info ul li a, #tlp-modal .md-content .rttm-pop-body .contact-info ul li a span { color: var(--rttm-pop-link, #3a3f5c); } #tlp-modal .md-content .rttm-pop-body .contact-info ul li a:hover, #tlp-modal .md-content .rttm-pop-body .contact-info ul li a:hover span { color: var(--rttm-pop-link-hover, #143ee5); } /* the website row wraps its icon INSIDE the anchor — keep the row a flex line */ #tlp-modal .md-content .rttm-pop-body .contact-info ul li.tlp-website > a { display: flex; align-items: center; gap: 13px; } /* Qualifications / Professional Memberships / Areas of Expertise — the label takes the accent so these read as part of the same palette as the pills and icon chips. */ #tlp-modal .md-content .rttm-pop-body .rt-extra-curriculum { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 14px; line-height: 1.6; } #tlp-modal .md-content .rttm-pop-body .rt-extra-curriculum strong { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; } :where(#tlp-modal .md-content) .rttm-pop-body .rt-extra-curriculum { color: var(--rttm-pop-text, #3a3f5c); } :where(#tlp-modal .md-content) .rttm-pop-body .rt-extra-curriculum strong { color: var(--rttm-pop-primary, #143ee5); } /* keep a gap before whatever follows the last one */ #tlp-modal .md-content .rttm-pop-body .rt-extra-curriculum:last-of-type { margin-bottom: 22px; } /* skills — on the design palette: primary fill on a primary-tinted track */ #tlp-modal .md-content .rttm-pop-body .tlp-team-skill { margin: 0 0 20px; } #tlp-modal .md-content .rttm-pop-body .tlp-team-skill .skill_name { margin: 0 0 6px; padding: 0; font-size: 13.5px; font-weight: 500; } :where(#tlp-modal .md-content) .rttm-pop-body .tlp-team-skill .skill_name { color: var(--rttm-pop-heading, #0f1535); } #tlp-modal .md-content .rttm-pop-body .tlp-team-skill .skill-prog { height: 8px; margin: 0 0 14px; border-radius: 999px; overflow: hidden; background: var(--rttm-pop-primary-50, #eef1ff); } #tlp-modal .md-content .rttm-pop-body .tlp-team-skill .skill-prog .fill { height: 100%; border-radius: 999px; background: var(--rttm-pop-primary, #143ee5); } /* the percentage sits above the bar, not inside an 8px track */ #tlp-modal .md-content .rttm-pop-body .tlp-team-skill .skill-prog .fill .percent-text { position: absolute; right: 0; top: -22px; font-size: 12px; font-weight: 500; line-height: 1; background: none; padding: 0; } :where(#tlp-modal .md-content) .rttm-pop-body .tlp-team-skill .skill-prog .fill .percent-text { color: var(--rttm-pop-primary, #143ee5); } /* Author posts — same accent language: a tinted list with accent links */ #tlp-modal .md-content .rttm-pop-body .rt-team-latest-post-wrap { margin: 0 0 22px; } #tlp-modal .md-content .rttm-pop-body .rt-team-latest-post-wrap h3 { margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; } :where(#tlp-modal .md-content) .rttm-pop-body .rt-team-latest-post-wrap h3 { color: var(--rttm-pop-primary, #143ee5); } #tlp-modal .md-content .rttm-pop-body .author-latest-post { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #tlp-modal .md-content .rttm-pop-body .author-latest-post li { margin: 0; padding: 9px 14px; border-radius: 10px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 14px; line-height: 1.5; list-style: none; } #tlp-modal .md-content .rttm-pop-body .author-latest-post li::before { content: none; } #tlp-modal .md-content .rttm-pop-body .author-latest-post li a { text-decoration: none; transition: color .2s cubic-bezier(.2, .7, .2, 1); } #tlp-modal .md-content .rttm-pop-body .author-latest-post li a { color: var(--rttm-pop-link, #3a3f5c); } #tlp-modal .md-content .rttm-pop-body .author-latest-post li a:hover { color: var(--rttm-pop-link-hover, #143ee5); } /* ---------- footer ---------- */ #tlp-modal .md-content .rttm-pop-foot { margin-top: auto; padding-top: 22px; border-top: 1px solid #e7eaf3; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #tlp-modal .md-content .rttm-pop-foot .social-icons { margin: 0; padding: 0; display: flex; gap: 9px; line-height: 1; } #tlp-modal .md-content .rttm-pop-foot .social-icons a { width: 40px; height: 40px; margin: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; font-size: 14px; text-decoration: none; transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } :where(#tlp-modal .md-content) .rttm-pop-foot .social-icons a { background: var(--rttm-pop-primary-50, #eef1ff); color: var(--rttm-pop-primary, #143ee5); } #tlp-modal .md-content .rttm-pop-foot .social-icons a:hover { transform: translateY(-2px); } /* beat the per-network brand rules, which are !important, so the chip stays on-theme */ #tlp-modal .md-content .rttm-pop-foot .social-icons a:hover i { background: transparent !important; color: inherit !important; width: auto; height: auto; } #tlp-modal .md-content .rttm-pop-foot .social-icons a:hover { background: var(--rttm-pop-primary, #143ee5); color: #fff; } /* Resume / Hire Me */ #tlp-modal .md-content .rttm-pop-actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; } #tlp-modal .md-content .rttm-pop-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; box-shadow: 0 6px 16px rgba(20, 62, 229, .25); transition: background .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } /* NOT :where() — pro pins `--rttm-primary-color: #007acc` at :root and the shared `.readmore-btn a` rules paint these buttons with it, which beat a zeroed default and put an off-palette teal in the footer. The per-button Style controls are scoped to the shortcode id, which the popup markup does not carry, so nothing user-facing is being overridden here. */ #tlp-modal .md-content .rttm-pop-actions a { background: var(--rttm-pop-primary, #143ee5); color: #fff; } #tlp-modal .md-content .rttm-pop-actions a:hover { background: var(--rttm-pop-primary-600, #1133c2); color: #fff; } #tlp-modal .md-content .rttm-pop-actions a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 62, 229, .35); } /* member pager */ #tlp-modal .md-content .rttm-pop-pager { display: flex; gap: 8px; margin-left: auto; } #tlp-modal .md-content .rttm-pop-pager .rttm-pop-nav { width: 38px; height: 38px; padding: 0; cursor: pointer; border: 1px solid #e7eaf3; border-radius: 10px; background: var(--rttm-pop-surface, #fff); color: var(--rttm-pop-text, #3a3f5c); font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(20, 30, 75, .04), 0 8px 22px rgba(20, 30, 75, .06); transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1), border-color .2s cubic-bezier(.2, .7, .2, 1); } #tlp-modal .md-content .rttm-pop-pager .rttm-pop-nav:hover { background: var(--rttm-pop-primary, #143ee5); color: #fff; border-color: var(--rttm-pop-primary, #143ee5); } #tlp-modal .md-content .rttm-pop-pager .rttm-pop-nav[disabled] { opacity: .4; cursor: default; } #tlp-modal .md-content .rttm-pop-pager .rttm-pop-nav[disabled]:hover { background: var(--rttm-pop-surface, #fff); color: var(--rttm-pop-text, #3a3f5c); border-color: #e7eaf3; } /* close button */ #tlp-modal .md-content .md-cls-btn .md-close { position: absolute; top: 16px; right: 16px; z-index: 6; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--rttm-pop-heading, #0f1535); font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } #tlp-modal .md-content .md-cls-btn .md-close:hover { background: var(--rttm-pop-primary, #143ee5); color: #fff; transform: rotate(90deg); } /* single column under 720px, and let the modal itself scroll there */ @media (max-width: 720px) { #tlp-modal .md-content .rttm-pop { grid-template-columns: 1fr; grid-template-rows: auto auto; max-height: calc(100vh - 32px); overflow-y: auto; } #tlp-modal .md-content .rttm-pop-gallery { min-block-size: 340px; } #tlp-modal .md-content .rttm-pop-body { padding: 28px 22px 26px; overflow: visible; } #tlp-modal .md-content .rttm-pop-pager { margin-left: 0; } #tlp-modal .md-content { max-height: calc(100vh - 32px); } } /*********************** Single detail popup — END (generated) **********************/ /*********************** Multiple popup viewer — START (generated) ******************/ /* Fullscreen multi popup: gradient bar with counter + controls, centred gallery/details stage, member thumbnail strip. Generated by scratchpad/multipop-css.py from ONE source body shared with pro's _lo-multi-modal.scss — edit the script, never this block. */ /* ---------- user-owned colour tokens ---------- PopUp Background / Text / Link / Link Hover set these on the shell; every rule below reads them, so a control never has to out-specify the design. :where() keeps the defaults at zero specificity, and declaring them on the SHELL rather than on the card means no inner element can shadow the value a control writes. */ :where(#tlp-popup-wrap.rttm-mpop) { --rttm-pop-surface: #fff; --rttm-pop-text: #3a3f5c; --rttm-pop-heading: #0f1535; --rttm-pop-muted: #6b7088; --rttm-pop-link: var(--rttm-pop-text, #3a3f5c); --rttm-pop-link-hover: var(--rttm-pop-primary, #143ee5); } /* ---------- shell ---------- A fullscreen viewer, not the old slide-in panel: the legacy .tlp-popup-wrap / .tlp-el-popup-wrap rules (position:fixed; margin-left:100%; display:none; overflow-y:scroll) are all overridden here, so every one of those properties has to be restated even where the value looks like a default. --rttm-pop-primary is set on the shell by the runtime from the opening container's Primary Color — the same bridge the single popup uses — and the three tints are derived from it, so one value drives the bar, pills, chips, dots and buttons. */ #tlp-popup-wrap.rttm-mpop { --rttm-pop-primary-50: #eef1ff; --rttm-pop-primary-50: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 8%, #fff); --rttm-pop-primary-100: #dde3ff; --rttm-pop-primary-100: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 16%, #fff); --rttm-pop-primary-600: #1133c2; --rttm-pop-primary-600: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 82%, #000); --rttm-pop-primary-700: #0e2aa3; --rttm-pop-primary-700: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 72%, #000); position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; min-height: 0; max-height: none; display: flex; flex-direction: column; overflow: hidden; z-index: 999999; background: var(--rttm-pop-surface, #fff); color: var(--rttm-pop-text, #3a3f5c); font-size: 16px; line-height: 1.6; opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.2, .7, .2, 1); } #tlp-popup-wrap.rttm-mpop.is-open { opacity: 1; pointer-events: auto; } /* the legacy stylesheets give .tlp-popup-wrap a ::before strut for vertical centring */ #tlp-popup-wrap.rttm-mpop::before { content: none; } /* ---------- top bar ---------- */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-bar { position: relative; flex-shrink: 0; height: 72px; width: 100%; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background-image: linear-gradient(100deg, var(--rttm-pop-primary, #143ee5) 0%, var(--rttm-pop-primary-700, #0e2aa3) 100%); color: #fff; } /* Popup Header Background is a user control; it writes background-color on this same element, and the arms that do so also clear this gradient (see the `background-image: none` companions in ElementorFilters and Fns). */ :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-bar { background-color: transparent; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-counter, #tlp-popup-wrap.rttm-mpop .rttm-mpop-spacer { flex: 1 1 0; min-width: 0; } /* the spacer balances the counter so the controls sit dead centre */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-spacer { visibility: hidden; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-counter { position: static; margin: 0; height: auto; font: 500 14px/1.4 inherit; letter-spacing: .3px; white-space: nowrap; } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-counter { color: #fff; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-counter b { font-weight: 600; font-size: 16px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-counter .rttm-mpop-of { opacity: .7; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-controls { position: static; width: auto; padding: 0; display: flex; align-items: center; gap: 12px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-ctrl { width: 46px; height: 46px; flex-shrink: 0; margin: 0; padding: 0; bottom: auto; cursor: pointer; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .2s cubic-bezier(.2, .7, .2, 1), border-color .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1); } /* PopUp Header Text Color owns these */ :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-ctrl { color: #fff; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-ctrl i { -webkit-text-stroke: 0; font-size: inherit; line-height: 1; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-ctrl:hover { background: #fff; border-color: #fff; color: var(--rttm-pop-primary, #143ee5); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-ctrl.is-close:hover { transform: rotate(90deg); } /* progress along the bottom edge of the bar */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-progress { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: rgba(255, 255, 255, .85); transition: width .4s cubic-bezier(.2, .7, .2, 1); } /* ---------- stage ---------- Also .tlp-popup-content, which the legacy sheets pin to position:fixed with a full viewport height — it has to become an ordinary flex child here. */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-stage { position: relative; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; padding: 40px 32px; display: flex; /* NOT align-items:center. A flex item taller than its scroll container overflows equally at BOTH ends, and the top overflow is unreachable because scrollTop cannot go negative — so on a short viewport the role pill and the name were clipped off the top of the stage with no way to scroll to them. flex-start plus `margin:auto` on the card still centres it when there IS spare room, and simply starts at the top when there is not. */ align-items: flex-start; justify-content: center; overflow-y: auto; overflow-x: hidden; } /* PopUp Background is a user control on .tlp-popup-content */ :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-stage { background: var(--rttm-pop-surface, #fff); } /* first-open spinner, while the AJAX is in flight */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-loading { width: 44px; height: 44px; margin: auto; border-radius: 50%; border: 3px solid var(--rttm-pop-primary-50, #eef1ff); border-top-color: var(--rttm-pop-primary, #143ee5); animation: rttm-mpop-spin .7s linear infinite; } @keyframes rttm-mpop-spin { to { transform: rotate(360deg); } } /* ---------- the member panel ---------- */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-card { width: min(1080px, 100%); /* auto on all four sides: centres vertically only when the stage has spare height, and never pushes the top out of reach when it does not */ margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; /* The reference centres the two columns, but its member copy is short. With the real field set the details column runs much taller than the photo, and centring left a large empty gap above the image. Both columns start at the top instead. */ align-items: start; opacity: 1; transform: none; transition: opacity .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1); } /* the step animation: slide out in the direction of travel, swap, slide back in */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-card.is-swapping { opacity: 0; transform: translateX(var(--rttm-mpop-swap, 24px)); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-card--nogallery { grid-template-columns: minmax(0, 1fr); max-width: 720px; } /* ---------- gallery ---------- */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-gallery { /* Sticky within the stage, so the photo stays alongside the text on a long profile. It works because the card is `align-items: start`: the column is only as tall as its content while its GRID AREA is as tall as the details column, which is the room sticky needs to travel. `align-self: start` is restated so a stretched item can never creep back in and freeze it. */ position: sticky; top: 24px; align-self: start; min-width: 0; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-frame { position: relative; aspect-ratio: 1 / 1.05; border-radius: 18px; overflow: hidden; background: #0e1430; box-shadow: 0 24px 60px rgba(10, 15, 40, .22); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s cubic-bezier(.2, .7, .2, 1); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-slide.is-active { opacity: 1; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; border-radius: 0; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 26px 16px 12px; background: linear-gradient(to top, rgba(10, 15, 40, .78), transparent); color: #fff; font-size: 12.5px; line-height: 1.45; text-align: center; } /* arrows are centred on the gallery, dots included, exactly as in the reference */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-garrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; padding: 0; cursor: pointer; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .94); color: var(--rttm-pop-heading, #0f1535); font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-garrow.prev { left: 14px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-garrow.next { right: 14px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-garrow:hover { background: var(--rttm-pop-primary, #143ee5); color: #fff; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-dot { width: 8px; height: 8px; padding: 0; cursor: pointer; border: 0; border-radius: 999px; background: var(--rttm-pop-primary-100, #dde3ff); transition: width .3s cubic-bezier(.2, .7, .2, 1), background .25s cubic-bezier(.2, .7, .2, 1); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-dot.is-active { width: 26px; background: linear-gradient(90deg, var(--rttm-pop-primary, #143ee5), var(--rttm-pop-primary-700, #0e2aa3)); } /* ---------- details ---------- */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-details { min-width: 0; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-role, #tlp-popup-wrap.rttm-mpop .rttm-mpop-dept { margin: 0; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-role { background: var(--rttm-pop-primary-50, #eef1ff); color: var(--rttm-pop-primary, #143ee5); } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-dept { background: #f3f5fb; color: var(--rttm-pop-muted, #6b7088); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-role .experience { font-weight: 400; opacity: .85; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-name { margin: 0 0 18px; padding: 0; font-size: 38px; font-weight: 600; line-height: 1.08; letter-spacing: -.6px; } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-name { color: var(--rttm-pop-heading, #0f1535); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .tlp-tag-line { margin: -8px 0 18px; font-size: 15px; font-style: italic; } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .tlp-tag-line { color: var(--rttm-pop-muted, #6b7088); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .short-bio, #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .tlp-md-member-details { margin: 0 0 26px; font-size: 15.5px; line-height: 1.75; max-width: 52ch; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .short-bio p, #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .tlp-md-member-details p { margin: 0 0 12px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .short-bio p:last-child, #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .tlp-md-member-details p:last-child { margin-bottom: 0; } /* contact list — icon chips on the design palette */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .contact-info { margin: 0 0 26px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .contact-info ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .contact-info ul li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; border: 0; font-size: 15px; line-height: 1.5; list-style: none; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .contact-info ul li::before { content: none; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .contact-info ul li i { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 14px; line-height: 1; } /* :where() throughout — PopUp Text Color and PopUp Link Color own these */ :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .contact-info ul li i { color: var(--rttm-pop-primary, #143ee5); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .contact-info ul li a { text-decoration: none; transition: color .2s cubic-bezier(.2, .7, .2, 1); } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .contact-info ul li, :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .contact-info ul li > span { color: var(--rttm-pop-text, #3a3f5c); } /* the email / fax / website rows wrap their value in a span INSIDE the anchor, so the link colour has to reach that span too — otherwise only the bare-text rows (phone, mobile) ever follow PopUp Link Color. */ :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .contact-info ul li a, :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .contact-info ul li a span { color: var(--rttm-pop-link, #3a3f5c); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .contact-info ul li a:hover, #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .contact-info ul li a:hover span { color: var(--rttm-pop-link-hover, #143ee5); } /* the website row wraps its icon INSIDE the anchor — keep the row a flex line */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .contact-info ul li.tlp-website > a { display: flex; align-items: center; gap: 14px; } /* Qualifications / Memberships / Expertise */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .rt-extra-curriculum { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 14px; line-height: 1.6; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .rt-extra-curriculum strong { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .rt-extra-curriculum { color: var(--rttm-pop-text, #3a3f5c); } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .rt-extra-curriculum strong { color: var(--rttm-pop-primary, #143ee5); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .rt-extra-curriculum:last-of-type { margin-bottom: 26px; } /* skills */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .tlp-team-skill { margin: 0 0 22px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .tlp-team-skill .skill_name { margin: 0 0 6px; padding: 0; font-size: 13.5px; font-weight: 500; } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .tlp-team-skill .skill_name { color: var(--rttm-pop-heading, #0f1535); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .tlp-team-skill .skill-prog { height: 8px; margin: 0 0 14px; border-radius: 999px; overflow: hidden; background: var(--rttm-pop-primary-50, #eef1ff); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .tlp-team-skill .skill-prog .fill { height: 100%; border-radius: 999px; background: var(--rttm-pop-primary, #143ee5); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .tlp-team-skill .skill-prog .fill .percent-text { position: absolute; right: 0; top: -22px; padding: 0; background: none; font-size: 12px; font-weight: 500; line-height: 1; } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .tlp-team-skill .skill-prog .fill .percent-text { color: var(--rttm-pop-primary, #143ee5); } /* author posts */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .rt-team-latest-post-wrap { margin: 0 0 26px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .rt-team-latest-post-wrap h3 { margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .rt-team-latest-post-wrap h3 { color: var(--rttm-pop-primary, #143ee5); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .author-latest-post { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .author-latest-post li { margin: 0; padding: 9px 14px; border-radius: 10px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 14px; line-height: 1.5; list-style: none; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .author-latest-post li::before { content: none; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .author-latest-post li a { text-decoration: none; transition: color .2s cubic-bezier(.2, .7, .2, 1); } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-details .author-latest-post li a { color: var(--rttm-pop-link, #3a3f5c); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-details .author-latest-post li a:hover { color: var(--rttm-pop-link-hover, #143ee5); } /* ---------- footer: socials + buttons ---------- */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-foot .social-icons { margin: 0; padding: 0; display: flex; gap: 10px; line-height: 1; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-foot .social-icons a { width: 44px; height: 44px; margin: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; font-size: 15px; text-decoration: none; transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } :where(#tlp-popup-wrap.rttm-mpop) .rttm-mpop-foot .social-icons a { background: var(--rttm-pop-primary-50, #eef1ff); color: var(--rttm-pop-primary, #143ee5); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-foot .social-icons a:hover { background: var(--rttm-pop-primary, #143ee5); color: #fff; transform: translateY(-2px); } /* the per-network brand rules paint the GLYPH and are !important, so the chip would show Facebook blue inside the accent square without this */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-foot .social-icons a:hover i { background: transparent !important; color: inherit !important; width: auto; height: auto; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 0; border-radius: 11px; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; box-shadow: 0 6px 16px rgba(20, 62, 229, .25); transition: background .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } /* NOT :where() — pro pins `--rttm-primary-color: #007acc` at :root and the shared `.readmore-btn a` rules paint these with it, which beats a zeroed default and puts an off-palette teal in the footer. */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-actions a { background: var(--rttm-pop-primary, #143ee5); color: #fff; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-actions a:hover { background: var(--rttm-pop-primary-600, #1133c2); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 62, 229, .35); } /* ---------- member thumbnail strip ---------- */ #tlp-popup-wrap.rttm-mpop .rttm-mpop-strip { flex-shrink: 0; display: flex; gap: 10px; justify-content: center; padding: 14px 20px 20px; overflow-x: auto; overflow-y: hidden; background: var(--rttm-pop-surface, #fff); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-strip:empty { display: none; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-thumb { width: 54px; height: 54px; flex-shrink: 0; padding: 0; cursor: pointer; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #dfe3ee; opacity: .55; transition: opacity .25s cubic-bezier(.2, .7, .2, 1), border-color .25s cubic-bezier(.2, .7, .2, 1), transform .25s cubic-bezier(.2, .7, .2, 1); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; border-radius: 0; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-thumb:hover { opacity: .85; transform: translateY(-2px); } #tlp-popup-wrap.rttm-mpop .rttm-mpop-thumb.is-active { opacity: 1; border-color: var(--rttm-pop-primary, #143ee5); box-shadow: 0 6px 14px rgba(20, 62, 229, .3); } /* ---------- responsive ---------- */ @media (max-width: 840px) { #tlp-popup-wrap.rttm-mpop .rttm-mpop-card { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-stage { padding: 24px 20px; align-items: flex-start; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-gallery { position: static; top: auto; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-name { font-size: 30px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-frame { aspect-ratio: 1 / 1; } } @media (max-width: 560px) { #tlp-popup-wrap.rttm-mpop .rttm-mpop-bar { height: 64px; padding: 0 14px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-spacer { display: none; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-ctrl { width: 40px; height: 40px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-controls { gap: 8px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-name { font-size: 26px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-strip { justify-content: flex-start; padding: 10px 14px 14px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-thumb { width: 46px; height: 46px; } #tlp-popup-wrap.rttm-mpop .rttm-mpop-foot { gap: 12px; } } /*********************** Multiple popup viewer — END (generated) ********************/ /*********************** Smart popup drawer — START (generated) *********************/ /* Right-hand drawer smart popup: blurred backdrop, gradient bar with member stepper + close, square hero slider and a scrolling detail column. Generated by scratchpad/smartpop-css.py from ONE source body shared with pro's _lo-smart-modal.scss — edit the script, never this block. */ /* ---------- user-owned colour tokens ---------- PopUp Background / Text / Link / Link Hover set these on the shell; every rule below reads them, so a control never has to out-specify the design. :where() keeps the defaults at zero specificity, and declaring them on the SHELL rather than on the card means no inner element can shadow the value a control writes. */ :where(#rt-smart-modal-container.rttm-sp) { --rttm-pop-surface: #fff; --rttm-pop-text: #3a3f5c; --rttm-pop-heading: #0f1535; --rttm-pop-muted: #6b7088; --rttm-pop-link: var(--rttm-pop-text, #3a3f5c); --rttm-pop-link-hover: var(--rttm-pop-primary, #143ee5); } /* ---------- backdrop ---------- The container itself is the dimmer; the drawer is its child. The legacy sheets gave this element a centred-modal layout, so the overridden properties are restated even where the value looks like a default. */ #rt-smart-modal-container.rttm-sp { --rttm-pop-primary-50: #eef1ff; --rttm-pop-primary-50: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 8%, #fff); --rttm-pop-primary-100: #dde3ff; --rttm-pop-primary-100: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 16%, #fff); --rttm-pop-primary-600: #1133c2; --rttm-pop-primary-600: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 82%, #000); --rttm-pop-primary-700: #0e2aa3; --rttm-pop-primary-700: color-mix(in srgb, var(--rttm-pop-primary, #143ee5) 72%, #000); --rttm-sp-width: 440px; position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; height: 100%; display: block; overflow: hidden; z-index: 999999; background: rgba(10, 15, 40, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--rttm-pop-text, #3a3f5c); font-size: 16px; line-height: 1.6; opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.2, .7, .2, 1); } #rt-smart-modal-container.rttm-sp.open { opacity: 1; pointer-events: auto; } #rt-smart-modal-container.rttm-sp::before, #rt-smart-modal-container.rttm-sp::after { content: none; } /* ---------- drawer ---------- */ #rt-smart-modal-container.rttm-sp .rt-smart-modal-main { position: fixed; top: 0; right: 0; bottom: 0; left: auto; margin: 0; padding: 0; width: min(var(--rttm-sp-width), 100%); max-width: 100%; height: 100%; max-height: none; display: flex; flex-direction: column; border-radius: 0; background: var(--rttm-pop-surface, #fff); box-shadow: -30px 0 80px rgba(10, 15, 40, .3); transform: translateX(100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1); } #rt-smart-modal-container.rttm-sp.open .rt-smart-modal-main { transform: translateX(0); } /* ---------- top bar ---------- */ #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-header { position: relative; flex-shrink: 0; height: 60px; width: 100%; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background-image: linear-gradient(100deg, var(--rttm-pop-primary, #143ee5) 0%, var(--rttm-pop-primary-700, #0e2aa3) 100%); color: #fff; } /* the header background is a user control; the arms that set it also clear this gradient, otherwise a background-image would paint over the flat colour */ :where(#rt-smart-modal-container.rttm-sp) .rt-smart-modal-header { background-color: transparent; } #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-nav { position: static; display: flex; gap: 8px; margin: 0; padding: 0; } #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-header a.rt-smart-nav-item, #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-header a.rt-smart-modal-close { float: none; -webkit-text-stroke: 0; position: static; width: 38px; height: 38px; margin: 0; padding: 0; flex-shrink: 0; cursor: pointer; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 13px; line-height: 1; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1), border-color .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } /* PopUp Header Text Color owns these */ :where(#rt-smart-modal-container.rttm-sp) .rt-smart-modal-header .rt-smart-nav-item, :where(#rt-smart-modal-container.rttm-sp) .rt-smart-modal-header .rt-smart-modal-close { color: #fff; } #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-header a.rt-smart-modal-close { width: 40px; height: 40px; border-radius: 50%; font-size: 14px; } #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-header a.rt-smart-nav-item:hover, #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-header a.rt-smart-modal-close:hover { background: #fff; border-color: #fff; color: var(--rttm-pop-primary, #143ee5); } #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-header a.rt-smart-modal-close:hover { transform: rotate(90deg); } #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-header i { -webkit-text-stroke: 0; font-size: inherit; line-height: 1; } /* ---------- scrolling body ---------- */ #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal { position: static; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; max-height: none; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; border-radius: 0; box-shadow: none; } /* The legacy dark smart popup painted this element from `#rt-smart-modal-container .rt-smart-modal-main .rt-smart-modal` (1,3,0), so a :where()-zeroed white default lost to it and the drawer came out charcoal with the design's dark text on top of it. Matching that specificity is what makes the drawer white. The PopUp Background control still wins: Elementor writes the same selector from its own stylesheet, which loads later, and the shortcode runtime applies the colour inline. */ #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal { background: var(--rttm-pop-surface, #fff); } #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal, #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-main-content-wrapper, #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-main-content, #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rttm-sp-panel { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-main-content-wrapper, #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal-main-content { width: 100%; max-width: none; height: auto; margin: 0; padding: 0; overflow: visible; opacity: 1; } /* the spinner the runtime drops in while the AJAX is in flight */ #rt-smart-modal-container.rttm-sp .rt-spinner { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; background: none; animation: rttm-sp-spin .7s linear infinite; } @keyframes rttm-sp-spin { to { transform: rotate(360deg); } } /* The panel fades/lifts on a member step. These carry the legacy sheet's full chain because it pins `... .rt-smart-modal-main-content { opacity: 0 }` at (1,5,0) — the old runtime cleared that by hand after its custom-scrollbar init, which the redesign drops. A shorter selector loses and the drawer opens blank. */ #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content.rttm-sp-panel { opacity: 1; transform: none; transition: opacity .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1); } #rt-smart-modal-container.rttm-sp .rt-smart-modal-main .rt-smart-modal .rt-smart-modal-main-content-wrapper .rt-smart-modal-main-content.rttm-sp-panel.is-swapping { opacity: 0; transform: translateY(8px); transition: none; } /* ---------- hero ---------- */ #rt-smart-modal-container.rttm-sp .rttm-sp-hero { position: relative; width: 100%; margin: 0; padding: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #0e1430; } #rt-smart-modal-container.rttm-sp .rttm-sp-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .4s cubic-bezier(.2, .7, .2, 1); } #rt-smart-modal-container.rttm-sp .rttm-sp-slide.is-active { opacity: 1; } #rt-smart-modal-container.rttm-sp .rttm-sp-slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; border-radius: 0; } #rt-smart-modal-container.rttm-sp .rttm-sp-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 34px 16px 30px; background: linear-gradient(to top, rgba(10, 15, 40, .8), transparent); color: #fff; font-size: 12.5px; line-height: 1.45; text-align: center; } #rt-smart-modal-container.rttm-sp .rttm-sp-garrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; padding: 0; cursor: pointer; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .92); color: var(--rttm-pop-heading, #0f1535); font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0, 0, 0, .22); transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1); } #rt-smart-modal-container.rttm-sp .rttm-sp-garrow.prev { left: 12px; } #rt-smart-modal-container.rttm-sp .rttm-sp-garrow.next { right: 12px; } #rt-smart-modal-container.rttm-sp .rttm-sp-garrow:hover { background: var(--rttm-pop-primary, #143ee5); color: #fff; } /* dots sit ON the photo here, not below it */ #rt-smart-modal-container.rttm-sp .rttm-sp-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 7px; } #rt-smart-modal-container.rttm-sp .rttm-sp-dot { width: 8px; height: 8px; padding: 0; cursor: pointer; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .5); transition: width .3s cubic-bezier(.2, .7, .2, 1), background .25s cubic-bezier(.2, .7, .2, 1); } #rt-smart-modal-container.rttm-sp .rttm-sp-dot.is-active { width: 24px; background: #fff; } /* ---------- details ---------- */ #rt-smart-modal-container.rttm-sp .rttm-sp-body { width: 100%; margin: 0; padding: 26px 28px 32px; } #rt-smart-modal-container.rttm-sp .rttm-sp-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } #rt-smart-modal-container.rttm-sp .rttm-sp-role, #rt-smart-modal-container.rttm-sp .rttm-sp-dept { margin: 0; padding: 5px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-role { background: var(--rttm-pop-primary-50, #eef1ff); color: var(--rttm-pop-primary, #143ee5); } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-dept { background: #f3f5fb; color: var(--rttm-pop-muted, #6b7088); } #rt-smart-modal-container.rttm-sp .rttm-sp-role .experience { font-weight: 400; opacity: .85; } #rt-smart-modal-container.rttm-sp .rttm-sp-name { margin: 0 0 14px; padding: 0; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.3px; } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-name { color: var(--rttm-pop-heading, #0f1535); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-tag-line { margin: -6px 0 14px; font-size: 14px; font-style: italic; } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .tlp-tag-line { color: var(--rttm-pop-muted, #6b7088); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .short-bio, #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-md-member-details { margin: 0 0 22px; font-size: 14.5px; line-height: 1.7; } /* NOT :where() — the legacy dark smart popup painted the body copy white from inside #rt-smart-modal-container, and a zeroed default lost to it, so the bio rendered white-on-white in the new light drawer. The Elementor PopUp Text Color control is far more specific (id + six classes) and still wins. */ #rt-smart-modal-container.rttm-sp .rttm-sp-body .short-bio, #rt-smart-modal-container.rttm-sp .rttm-sp-body .short-bio p, #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-md-member-details, #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-md-member-details p, #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-tag-line { color: var(--rttm-pop-text, #3a3f5c); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-tag-line { color: var(--rttm-pop-muted, #6b7088); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .short-bio p, #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-md-member-details p { margin: 0 0 10px; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .short-bio p:last-child, #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-md-member-details p:last-child { margin-bottom: 0; } /* contact list */ #rt-smart-modal-container.rttm-sp .rttm-sp-body .contact-info { margin: 0 0 22px; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .contact-info ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .contact-info ul li { display: flex; align-items: center; gap: 13px; margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 1.5; list-style: none; word-break: break-word; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .contact-info ul li::before { content: none; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .contact-info ul li i { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 13px; line-height: 1; } /* :where() throughout — PopUp Text Color and PopUp Link Color own these */ :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .contact-info ul li i { color: var(--rttm-pop-primary, #143ee5); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .contact-info ul li a { text-decoration: none; transition: color .2s cubic-bezier(.2, .7, .2, 1); } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .contact-info ul li, :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .contact-info ul li > span { color: var(--rttm-pop-text, #3a3f5c); } /* the email / fax / website rows wrap their value in a span INSIDE the anchor, so the link colour has to reach that span too — otherwise only the bare-text rows (phone, mobile) ever follow PopUp Link Color. */ :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .contact-info ul li a, :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .contact-info ul li a span { color: var(--rttm-pop-link, #3a3f5c); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .contact-info ul li a:hover, #rt-smart-modal-container.rttm-sp .rttm-sp-body .contact-info ul li a:hover span { color: var(--rttm-pop-link-hover, #143ee5); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .contact-info ul li.tlp-website > a { display: flex; align-items: center; gap: 13px; } /* Qualifications / Memberships / Expertise */ #rt-smart-modal-container.rttm-sp .rttm-sp-body .rt-extra-curriculum { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 13.5px; line-height: 1.6; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .rt-extra-curriculum strong { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .rt-extra-curriculum { color: var(--rttm-pop-text, #3a3f5c); } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .rt-extra-curriculum strong { color: var(--rttm-pop-primary, #143ee5); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .rt-extra-curriculum:last-of-type { margin-bottom: 22px; } /* skills */ #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-team-skill { margin: 0 0 20px; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-team-skill .skill_name { margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 500; } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .tlp-team-skill .skill_name { color: var(--rttm-pop-heading, #0f1535); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-team-skill .skill-prog { height: 8px; margin: 0 0 14px; border-radius: 999px; overflow: hidden; background: var(--rttm-pop-primary-50, #eef1ff); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-team-skill .skill-prog .fill { height: 100%; border-radius: 999px; background: var(--rttm-pop-primary, #143ee5); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .tlp-team-skill .skill-prog .fill .percent-text { position: absolute; right: 0; top: -22px; padding: 0; background: none; font-size: 12px; font-weight: 500; line-height: 1; } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .tlp-team-skill .skill-prog .fill .percent-text { color: var(--rttm-pop-primary, #143ee5); } /* author posts */ #rt-smart-modal-container.rttm-sp .rttm-sp-body .rt-team-latest-post-wrap { margin: 0 0 22px; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .rt-team-latest-post-wrap h3 { margin: 0 0 8px; padding: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .rt-team-latest-post-wrap h3 { color: var(--rttm-pop-primary, #143ee5); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .author-latest-post { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .author-latest-post li { margin: 0; padding: 9px 14px; border-radius: 10px; background: var(--rttm-pop-primary-50, #eef1ff); font-size: 13.5px; line-height: 1.5; list-style: none; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .author-latest-post li::before { content: none; } #rt-smart-modal-container.rttm-sp .rttm-sp-body .author-latest-post li a { text-decoration: none; transition: color .2s cubic-bezier(.2, .7, .2, 1); } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-body .author-latest-post li a { color: var(--rttm-pop-link, #3a3f5c); } #rt-smart-modal-container.rttm-sp .rttm-sp-body .author-latest-post li a:hover { color: var(--rttm-pop-link-hover, #143ee5); } /* buttons */ #rt-smart-modal-container.rttm-sp .rttm-sp-actions { margin: 0 0 20px; display: flex; gap: 8px; flex-wrap: wrap; } #rt-smart-modal-container.rttm-sp .rttm-sp-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: 11px; font-size: 13.5px; font-weight: 500; line-height: 1.2; text-decoration: none; box-shadow: 0 6px 16px rgba(20, 62, 229, .25); transition: background .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } /* NOT :where() — pro pins `--rttm-primary-color: #007acc` at :root and the shared `.readmore-btn a` rules paint these with it */ #rt-smart-modal-container.rttm-sp .rttm-sp-actions a { background: var(--rttm-pop-primary, #143ee5); color: #fff; } #rt-smart-modal-container.rttm-sp .rttm-sp-actions a:hover { background: var(--rttm-pop-primary-600, #1133c2); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 62, 229, .35); } /* socials, ruled off as in the reference */ #rt-smart-modal-container.rttm-sp .rttm-sp-foot { padding-top: 20px; border-top: 1px solid #e7eaf3; } #rt-smart-modal-container.rttm-sp .rttm-sp-foot .social-icons { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; line-height: 1; } #rt-smart-modal-container.rttm-sp .rttm-sp-foot .social-icons a { width: 42px; height: 42px; margin: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; font-size: 14px; text-decoration: none; transition: background .2s cubic-bezier(.2, .7, .2, 1), color .2s cubic-bezier(.2, .7, .2, 1), transform .2s cubic-bezier(.2, .7, .2, 1); } :where(#rt-smart-modal-container.rttm-sp) .rttm-sp-foot .social-icons a { background: var(--rttm-pop-primary-50, #eef1ff); color: var(--rttm-pop-primary, #143ee5); } #rt-smart-modal-container.rttm-sp .rttm-sp-foot .social-icons a:hover { background: var(--rttm-pop-primary, #143ee5); color: #fff; transform: translateY(-2px); } /* the per-network brand rules paint the GLYPH and are !important */ #rt-smart-modal-container.rttm-sp .rttm-sp-foot .social-icons a:hover i { background: transparent !important; color: inherit !important; width: auto; height: auto; } /* ---------- responsive ---------- */ @media (max-width: 480px) { #rt-smart-modal-container.rttm-sp { --rttm-sp-width: 100%; } #rt-smart-modal-container.rttm-sp .rttm-sp-body { padding: 22px 20px 28px; } #rt-smart-modal-container.rttm-sp .rttm-sp-name { font-size: 23px; } } /*********************** Smart popup drawer — END (generated) ***********************/ /*********************** Round image style — circular clip (see layouts 1 & 3 above) ***********************/ /* `.round-img img { border-radius: 50% }` (near the top of this file) rounds only the IMAGE. Every layout below also zooms that image on hover, and the

    wrapping it clips as a RECTANGLE, so the circle's four extreme points were pushed past the figure's straight edges and came back flattened (measured 6-14px sliced off, depending on the layout's zoom). Rounding the figure keeps the OUTLINE a perfect circle while the photo zooms inside it. Each selector names the figure that wraps ONLY the image. There is deliberately no blanket `.round-img figure` rule: layout 7's card is itself a
    around a second bare
    , so a blanket rule would clip the whole card - text, overlay and all - into a circle. Layouts 7 and 9 are omitted on purpose: their hover state covers the photo with an opaque overlay, so the flattened edges are never visible. Layout 12 has no image zoom at all. 17 and 18 carry an extra `.single-team-area` in the path purely for specificity: pro's stylesheet sets `border-radius: inherit` on the same figure at (0,4,1) and loads later, so these need (0,5,1) to win on the Elementor path. */ .rt-team-container .layout4 .round-img .single-team-area > figure, .rt-team-container .layout6 .round-img .tlp-img > figure, .rt-team-container .layout8 .round-img .single-team-area .tlp-portfolio-thum > figure, .rt-team-container .layout10 .round-img .image-container > figure, .rt-team-container .layout11 .round-img .single-team-area > figure, .rt-team-container .layout13 .round-img .rt-l13-media > figure, .rt-team-container .layout14 .round-img .rt-l14-media > figure, .rt-team-container .layout15 .round-img .rt-l15-media > figure, .rt-team-container .layout17 .round-img .single-team-area .tlp-portfolio-thum > figure, .rt-team-container .layout18 .round-img .single-team-area .tlp-portfolio-thum > figure { border-radius: 50%; overflow: hidden; } /* Same circular clip for the isotope and carousel families, and for the Elementor-only layout keys the block above misses. These do NOT inherit the grid rules: an isotope row carries `.isotope8`, not `.layout13`, even though it draws layout 13's card, and layouts 4/6/8/10 render from separate `layout-el-*` templates on the Elementor path. carousel1 and carousel-el-1 both hardcode `.rttm-slider1` on the ITEM, so one compound selector covers both of those. Omitted on purpose, matching the grid block: isotope4 + carousel2 + carousel-el-2 (they draw layout 7's card, whose hover overlay hides the photo), isotope6 + isotope-el-6 and carousel4 (layout 9's card, same reason), carousel7 (layout 12's card - no image zoom) and carousel10 (no image zoom at all). */ .rt-team-container .isotope1 .round-img > figure, .rt-team-container .isotope2 .round-img .rt-iso2-card > figure, .rt-team-container .isotope3 .round-img .single-team-area > figure, .rt-team-container .isotope-el-3 .round-img .single-team-area > figure, .rt-team-container .isotope5 .round-img .tlp-portfolio-thum > figure, .rt-team-container .isotope7 .round-img .image-container > figure, .rt-team-container .isotope8 .round-img .rt-l13-media > figure, .rt-team-container .isotope9 .round-img .rt-l14-media > figure, .rt-team-container .isotope10 .round-img .rt-l15-media > figure, .rt-team-container .rttm-slider1.round-img .rttm-slide-media > figure, .rt-team-container .carousel3 .round-img .tlp-portfolio-thum > figure, .rt-team-container .carousel5 .round-img .image-container > figure, .rt-team-container .carousel6 .round-img .single-team-area > figure, .rt-team-container .carousel8 .round-img .rt-l14-media > figure, .rt-team-container .carousel9 .round-img .single-team-area > figure, .rt-team-container .carousel11 .round-img .rt-l15-media > figure, .rt-team-container .layout-el-4 .round-img .single-team-area > figure, .rt-team-container .layout-el-6 .round-img .tlp-img > figure, .rt-team-container .layout-el-8 .round-img .single-team-area .tlp-portfolio-thum > figure, .rt-team-container .layout-el-10 .round-img .image-container > figure { border-radius: 50%; overflow: hidden; } /* ========================================================================== Grid item entrance — staggered rise + fade The plugin already tagged every fresh item `rt-ready-animation animated fadeIn` (hardcoded in RenderHelpers.php and re-applied by the runtime after each AJAX swap — it is NOT a user-chosen animation, so it is safe to retune). What it produced was a 1.25s opacity-only fade with `animation-delay: 0s` on every item, so a whole grid of cards flashed in as one block. That is what read as "not smooth" when a filter button was clicked. This replaces it with a shorter rise-and-fade and a per-item stagger, so the cards arrive as a cascade. Applies to every AJAX swap the plugin does — filter, search, sort, pagination and load-more (appended items are new nodes, so they animate while the existing ones stay put). Isotope layouts are untouched: the runtime excludes `.isotope-item` from the `rt-ready-animation` class, and Isotope owns those items' transforms. TRANSFORM IS DELIBERATELY NOT USED. With `animation-fill-mode: both` the last keyframe's values stick permanently, so a `transform` here would out-rank (animations beat normal declarations) and pin any transform a layout sets on `.rt-grid-item` — carousel cards do style the item directly. The independent `translate` property has no such collision, and browsers that lack it simply fall back to the opacity fade. Duplicated verbatim into tlp-team/assets/css/tlpteam.css and tlp-team-pro/src/scss/frontend/components/_cp-animations.scss — keep in step. ========================================================================== */ @keyframes rt-item-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } } /* (0,4,0) — beats the plugin's own `.fadeIn` / `.animated` (0,1,0) and Elementor's `.animated { animation-duration: 1.25s }` in frontend.css. */ .rt-grid-item.rt-ready-animation.animated.fadeIn { animation-name: rt-item-in; animation-duration: .45s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); animation-fill-mode: both; } /* The cascade. Delays are capped so a large grid never leaves the last cards waiting seconds; everything past the 12th shares the final step. */ .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(1) { animation-delay: 0ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(2) { animation-delay: 45ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(3) { animation-delay: 90ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(4) { animation-delay: 135ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(5) { animation-delay: 180ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(6) { animation-delay: 225ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(7) { animation-delay: 270ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(8) { animation-delay: 315ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(9) { animation-delay: 360ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(10) { animation-delay: 405ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(11) { animation-delay: 450ms; } .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(n + 12) { animation-delay: 495ms; } /* Respect a reduced-motion preference: keep the fade, drop the movement and the stagger, so the grid still reads as "new content" without animating. */ @media (prefers-reduced-motion: reduce) { .rt-grid-item.rt-ready-animation.animated.fadeIn, .rt-grid-item.rt-ready-animation.animated.fadeIn:nth-child(n) { animation-name: fadeIn; animation-duration: .2s; animation-delay: 0ms; } } /* ============================================================================ Legacy per-network brand block — hover neutraliser for chip layouts ============================================================================ The block near line 2736 (`.rt-team-container .social-icons a:hover .fa-facebook-f{background:#3b5999;width:30px;height:30px}` and ~18 siblings) belongs to the OLD flat social design, where the glyph itself was the coloured square. The layouts below instead draw their own chip on the ``, so on hover that block produced two defects, measured across every layout on the sweep pages: 1. a brand-coloured box behind the glyph, on top of the chip colour the user picked (carousel1, isotope4/5/6, layout2/7/8/9); 2. the glyph resizing — `width/height:30px` is re-imposed on hover only, so it snapped from its natural size (layout9 12x12, special01 14x14, isotope2 8.125x30) to 30x30 and the icon appeared to jump. Defect 2 reached far more layouts because `.far.fa-envelope` is the block's only DOUBLE-class arm — (0,5,1) — so it outranks even the layouts that already null the background by hand (isotope8, isotope10, layout12, layout13, layout15, special01 all declare it at (0,4,2) and still lost). `i[class*="fa"]` puts these arms at (0,5,2), one above that, and they sit at the end of the file so any tie resolves here too. GEOMETRY is reset for every layout — `auto` is the resting value in each case, so hover changes colour and nothing moves. */ /* Elementor exclusion for the cards whose ELEMENTOR variant draws the chip on the instead of the : layout2, layout7, isotope4, isotope5, layout9 and layout8. layout2 is the free "List Layout 1" card: on the Elementor path the block near line 14092 hands the 34x34 chip to the `` (`.rt-elementor-container .layout2 .social-icons a i`) and leaves the `` width:auto, so the `width/height:auto` below collapsed the chip to the glyph's intrinsic ~8x12.5 on hover — every icon after the hovered one slid left and the row visibly jumped. The last two are here for their BORROWERS: carousel4's slides carry the `layout9` class and carousel3's carry `layout8` (carousel2 / carousel-el-2 carry `layout7`). Scoping `.layout8` costs layout 8 nothing, because layout8 is not an Elementor-selectable key at all — the Elementor catalogue offers `layout-el-8` (Fns::el_pro_grid_layouts) — so `.layout8` can only appear inside `.rt-elementor-container` by way of a carousel3 slide. `width/height:auto` is the resting value for all of them on the SHORTCODE path, which is what this block was written for. But tlp-el-team-pro.css gives their Elementor twins `a i` sized width/height 100% at (0,4,2), and this block is (0,5,2) — so, because the Elementor container also carries `.rt-team-container`, it reached those cards and collapsed the glyph to its intrinsic size (layout9: 34x34 -> ~12x12) on hover only. A Social Icon Hover Background then painted that small box instead of the whole circle. `:where()` contributes no specificity, so the shortcode arms stay at exactly the (0,5,2) the rest of the block is balanced against. Excluding only the GEOMETRY arm is deliberate: the background/colour arm below is still wanted on both paths, since it is what kills the legacy brand colours. */ .rt-team-container .carousel1 .social-icons a:hover i[class*="fa"], .rt-team-container .carousel1 .social-icons a:focus i[class*="fa"], .rt-team-container .carousel8 .social-icons a:hover i[class*="fa"], .rt-team-container .carousel8 .social-icons a:focus i[class*="fa"], .rt-team-container .carousel9 .social-icons a:hover i[class*="fa"], .rt-team-container .carousel9 .social-icons a:focus i[class*="fa"], .rt-team-container .carousel11 .social-icons a:hover i[class*="fa"], .rt-team-container .carousel11 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope2 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope2 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope3 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope3 .social-icons a:focus i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .isotope4 .social-icons a:hover i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .isotope4 .social-icons a:focus i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .isotope5 .social-icons a:hover i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .isotope5 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope6 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope6 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope7 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope7 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope8 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope8 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope9 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope9 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope10 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope10 .social-icons a:focus i[class*="fa"], .rt-team-container .layout1 .social-icons a:hover i[class*="fa"], .rt-team-container .layout1 .social-icons a:focus i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .layout2 .social-icons a:hover i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .layout2 .social-icons a:focus i[class*="fa"], .rt-team-container .layout3 .social-icons a:hover i[class*="fa"], .rt-team-container .layout3 .social-icons a:focus i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .layout7 .social-icons a:hover i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .layout7 .social-icons a:focus i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .layout8 .social-icons a:hover i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .layout8 .social-icons a:focus i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .layout9 .social-icons a:hover i[class*="fa"], .rt-team-container:where(:not(.rt-elementor-container)) .layout9 .social-icons a:focus i[class*="fa"], .rt-team-container .layout10 .social-icons a:hover i[class*="fa"], .rt-team-container .layout10 .social-icons a:focus i[class*="fa"], .rt-team-container .layout11 .social-icons a:hover i[class*="fa"], .rt-team-container .layout11 .social-icons a:focus i[class*="fa"], .rt-team-container .layout12 .social-icons a:hover i[class*="fa"], .rt-team-container .layout12 .social-icons a:focus i[class*="fa"], .rt-team-container .layout13 .social-icons a:hover i[class*="fa"], .rt-team-container .layout13 .social-icons a:focus i[class*="fa"], .rt-team-container .layout14 .social-icons a:hover i[class*="fa"], .rt-team-container .layout14 .social-icons a:focus i[class*="fa"], .rt-team-container .layout15 .social-icons a:hover i[class*="fa"], .rt-team-container .layout15 .social-icons a:focus i[class*="fa"], .rt-team-container .layout17 .social-icons a:hover i[class*="fa"], .rt-team-container .layout17 .social-icons a:focus i[class*="fa"], .rt-team-container .special01 .social-icons a:hover i[class*="fa"], .rt-team-container .special01 .social-icons a:focus i[class*="fa"] { width: auto; height: auto; } /* The BACKGROUND, and the `color:#fff` that rides with it, are cleared for the same set. This block briefly excluded carousel1, layout2, layout7 and layout9: those layouts flip their chip to #fff on hover, and while the Social Icon Color control wrote `color:X !important` on the `` in every state, their own `a:hover{color:…}` could never apply — so removing the brand box left a white glyph on a white chip (measured 1.00-1.23 contrast; layout7's facebook fell 6.34 -> 1.00). templates/sc-css.php now scopes that control to `:not(:hover):not(:focus)`, so the layouts own their hover colour again and the exclusion is gone. `color: inherit` is what carries it: the glyph hands itself back to the ``, which is where both the layout hover colour and the user's control live. It also has to sit at (0,5,2), because the brand block forces `color:#fff` on the envelope at (0,5,1) — above the (0,4,2) at which layouts already declare `color:inherit`. */ .rt-team-container .carousel1 .social-icons a:hover i[class*="fa"], .rt-team-container .carousel1 .social-icons a:focus i[class*="fa"], .rt-team-container .carousel8 .social-icons a:hover i[class*="fa"], .rt-team-container .carousel8 .social-icons a:focus i[class*="fa"], .rt-team-container .carousel9 .social-icons a:hover i[class*="fa"], .rt-team-container .carousel9 .social-icons a:focus i[class*="fa"], .rt-team-container .carousel11 .social-icons a:hover i[class*="fa"], .rt-team-container .carousel11 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope2 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope2 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope3 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope3 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope4 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope4 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope5 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope5 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope6 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope6 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope7 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope7 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope8 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope8 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope9 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope9 .social-icons a:focus i[class*="fa"], .rt-team-container .isotope10 .social-icons a:hover i[class*="fa"], .rt-team-container .isotope10 .social-icons a:focus i[class*="fa"], .rt-team-container .layout1 .social-icons a:hover i[class*="fa"], .rt-team-container .layout1 .social-icons a:focus i[class*="fa"], .rt-team-container .layout2 .social-icons a:hover i[class*="fa"], .rt-team-container .layout2 .social-icons a:focus i[class*="fa"], .rt-team-container .layout3 .social-icons a:hover i[class*="fa"], .rt-team-container .layout3 .social-icons a:focus i[class*="fa"], .rt-team-container .layout7 .social-icons a:hover i[class*="fa"], .rt-team-container .layout7 .social-icons a:focus i[class*="fa"], .rt-team-container .layout8 .social-icons a:hover i[class*="fa"], .rt-team-container .layout8 .social-icons a:focus i[class*="fa"], .rt-team-container .layout9 .social-icons a:hover i[class*="fa"], .rt-team-container .layout9 .social-icons a:focus i[class*="fa"], .rt-team-container .layout10 .social-icons a:hover i[class*="fa"], .rt-team-container .layout10 .social-icons a:focus i[class*="fa"], .rt-team-container .layout11 .social-icons a:hover i[class*="fa"], .rt-team-container .layout11 .social-icons a:focus i[class*="fa"], .rt-team-container .layout12 .social-icons a:hover i[class*="fa"], .rt-team-container .layout12 .social-icons a:focus i[class*="fa"], .rt-team-container .layout13 .social-icons a:hover i[class*="fa"], .rt-team-container .layout13 .social-icons a:focus i[class*="fa"], .rt-team-container .layout14 .social-icons a:hover i[class*="fa"], .rt-team-container .layout14 .social-icons a:focus i[class*="fa"], .rt-team-container .layout15 .social-icons a:hover i[class*="fa"], .rt-team-container .layout15 .social-icons a:focus i[class*="fa"], .rt-team-container .layout17 .social-icons a:hover i[class*="fa"], .rt-team-container .layout17 .social-icons a:focus i[class*="fa"], .rt-team-container .special01 .social-icons a:hover i[class*="fa"], .rt-team-container .special01 .social-icons a:focus i[class*="fa"]{ background: transparent; color: inherit; } /* ============================================================================ Single member detail — Latest post(s) + action buttons ============================================================================ `Fns::memberDetailPosts()` emits a bare `

    ` + `
      `, so on the detail page the block fell through to the theme: a full-size heading and a disc-bulleted list of raw links. The popups already carry a modern treatment of the very same markup (see `#tlp-modal … .rttm-pop-body .author-latest-post`); this brings the detail page into that language — small uppercase eyebrow heading, the list as rounded cards, an affordance chevron — WITHOUT touching the shared markup, so the popup and multi-popup renderings are unaffected. Scoped to `.tlp-single-container`, which only the single-team template sets. */ .rt-team-container.tlp-single-container { /* Follow the accent rather than hardcoding it. The shortcode named as the single page's style source writes `--l1-primary` onto this very element (see the `$singleScope` arm in templates/sc-css.php), so a site that has set Primary Color recolours this block along with the Resume / Hire Me buttons beside it. */ --rttm-detail-primary: var(--l1-primary, #143ee5); --rttm-detail-tint: #eef1ff; --rttm-detail-line: rgba(20, 62, 229, .12); --rttm-detail-text: #3a3f5c; } /* Derive the tint and rule from the accent where color-mix is available, so a custom Primary Color carries through to them too; the flat values above remain the fallback. */ @supports (background: color-mix(in srgb, red 8%, white)) { .rt-team-container.tlp-single-container { --rttm-detail-tint: color-mix(in srgb, var(--rttm-detail-primary) 8%, #fff); --rttm-detail-line: color-mix(in srgb, var(--rttm-detail-primary) 14%, transparent); } } .rt-team-container.tlp-single-container .rt-team-latest-post-wrap { margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid var(--rttm-detail-line); } .rt-team-container.tlp-single-container .rt-team-latest-post-wrap h3 { margin: 0 0 14px; padding: 0; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .8px; text-transform: uppercase; color: var(--rttm-detail-primary); } .rt-team-container.tlp-single-container ul.author-latest-post { /* `!important` only on the margin: the legacy `.tlp-detail ul.author-latest-post` rule above sets `margin:2px 0 10px 20px !important`, and a detail page rendered inside a wrapper carrying that class would otherwise keep the old indent. */ margin: 0 !important; padding: 0; list-style: none; display: grid; gap: 8px; } .rt-team-container.tlp-single-container ul.author-latest-post li { margin: 0; padding: 0; list-style: none; background: var(--rttm-detail-tint); border-radius: 12px; transition: background .2s cubic-bezier(.2, .7, .2, 1); } .rt-team-container.tlp-single-container ul.author-latest-post li::marker, .rt-team-container.tlp-single-container ul.author-latest-post li::before { content: none; } .rt-team-container.tlp-single-container ul.author-latest-post li a { position: relative; display: block; padding: 13px 46px 13px 18px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--rttm-detail-text); text-decoration: none; transition: color .2s cubic-bezier(.2, .7, .2, 1); } /* Affordance chevron, drawn from borders rather than a glyph: this block renders on the theme's own page, where no icon font is guaranteed to have loaded. */ .rt-team-container.tlp-single-container ul.author-latest-post li a::after { content: ""; position: absolute; top: 50%; right: 20px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; opacity: .4; transform: translateY(-50%) rotate(45deg); transition: transform .2s cubic-bezier(.2, .7, .2, 1), opacity .2s; } .rt-team-container.tlp-single-container ul.author-latest-post li:hover { background: var(--rttm-detail-primary); } .rt-team-container.tlp-single-container ul.author-latest-post li:hover a { color: #fff; } .rt-team-container.tlp-single-container ul.author-latest-post li:hover a::after { opacity: 1; transform: translateY(-50%) translateX(3px) rotate(45deg); } /* Resume / Hire Me now sit directly under the social row. Appearance is left to whatever already styles them (theme or Styling tab) — this only owns the row. */ .rt-team-container.tlp-single-container .readmore-btn { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* --------------------------------------------------------------------------- "After Short Description" text --------------------------------------------------------------------------- The shortcode/widget option `ttp_after_short_desc_text` appends its value to the member's short bio. It used to be concatenated with no element and no class, so it read as part of the bio — "…a galley of type Read more" — and a site owner had no way to tell it apart or restyle it. Fns::get_ttp_short_description() now wraps it in `.rttm-after-bio`; this gives it a quiet chip so it reads as an addition rather than as the member's own words. Deliberately low specificity (0,1,0) and no !important: it is a default, and the Elementor Short Bio typography/colour controls carry {{WRAPPER}}, so a user styling the bio still wins. */ .rttm-after-bio { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: rgba(20, 62, 229, .09); color: #143ee5; font-size: .86em; font-weight: 600; line-height: 1.6; vertical-align: baseline; white-space: nowrap; } /* On the dark/overlay cards the tint is invisible, so lift it there. */ .rt-team-container .tlp-overlay .rttm-after-bio, .rt-team-container .overlay .rttm-after-bio, .rt-team-container .layout6 .tlp-info-block .rttm-after-bio { background: rgba(255, 255, 255, .18); color: inherit; }