Fixed ui errors

This commit is contained in:
R-Bharathraj
2026-05-15 15:51:56 +05:30
parent 88a54944c3
commit 7f71527e85
9 changed files with 404 additions and 144 deletions

View File

@@ -8,13 +8,13 @@
?>
<style>
/* Scope safety: ensured by wrapping elementor-63 container below */
.elementor-element-bf5fff2 {
.elementor-63 .elementor-element-bf5fff2 {
--margin-top: 100px !important;
/* Slightly reduced for about page */
--margin-bottom: 80px !important;
}
.elementor-element-57c7653 .logico-title {
.elementor-63 .elementor-element-57c7653 .logico-title {
font-size: 50px !important;
/* Adjusted for better visibility */
line-height: 1.2 !important;
@@ -22,12 +22,189 @@
}
/* Fix for overlapping text seen in screenshot */
.elementor-element-bf5fff2 {
.elementor-63 .elementor-element-bf5fff2 {
clear: both;
position: relative;
z-index: 0;
background: transparent;
}
@media (max-width: 767px) {
.elementor-63 .elementor-element-bf5fff2 {
--margin-top: 70px !important;
--margin-bottom: 70px !important;
clear: both !important;
display: block !important;
height: auto !important;
overflow: visible !important;
position: relative !important;
z-index: 1 !important;
}
.elementor-63 .elementor-element-bf5fff2 .e-con-inner,
.elementor-63 .elementor-element-5a54148,
.elementor-63 .elementor-element-138c81a,
.elementor-63 .elementor-widget-container,
.elementor-63 .logico-team-listing-widget,
.elementor-63 .archive-listing {
display: block !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
position: relative !important;
width: 100% !important;
}
.elementor-63 .elementor-element-57c7653 .logico-title {
font-size: 34px !important;
line-height: 1.15 !important;
margin-bottom: 28px !important;
}
.elementor-63 .archive-listing-wrapper.team-listing-wrapper {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 26px !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
position: relative !important;
transform: none !important;
width: 100% !important;
}
.elementor-63 .team-item-wrapper {
clear: both !important;
display: block !important;
float: none !important;
height: auto !important;
margin: 0 !important;
min-height: 0 !important;
position: relative !important;
transform: none !important;
width: 100% !important;
}
.elementor-63 .team-item {
align-items: center !important;
display: flex !important;
flex-direction: row !important;
gap: 20px !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
position: relative !important;
transform: none !important;
width: 100% !important;
}
.elementor-63 .team-item-media,
.elementor-63 .post-media,
.elementor-63 .post-media a,
.elementor-63 .post-media picture {
display: block !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
position: relative !important;
width: 100% !important;
}
.elementor-63 .team-item-media {
flex: 0 0 44% !important;
max-width: 156px !important;
}
.elementor-63 .team-item-media img {
aspect-ratio: 1 / 1.45 !important;
border-radius: 18px !important;
display: block !important;
height: auto !important;
max-height: none !important;
object-fit: cover !important;
position: static !important;
transform: none !important;
width: 100% !important;
}
.elementor-63 .team-item-content {
align-self: stretch !important;
align-items: flex-start !important;
background: transparent !important;
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
justify-content: center !important;
height: auto !important;
inset: auto !important;
left: auto !important;
margin: 0 !important;
min-height: 0 !important;
padding: 0 !important;
right: auto !important;
position: static !important;
text-align: left !important;
top: auto !important;
transform: none !important;
width: 100% !important;
}
.elementor-63 .post-title,
.elementor-63 .post-title a {
color: #1f1f1f !important;
display: block !important;
font-size: clamp(22px, 6vw, 26px) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin: 0 0 32px !important;
text-align: left !important;
overflow-wrap: anywhere !important;
text-decoration: none !important;
white-space: normal !important;
}
.elementor-63 .team-item-socials,
.elementor-63 .team-socials.wrapper-socials {
display: flex !important;
flex-wrap: wrap !important;
gap: 28px !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
}
.elementor-63 .team-socials.wrapper-socials li {
margin: 0 !important;
}
.elementor-63 .team-socials.wrapper-socials a {
align-items: center !important;
color: #1f1f1f !important;
display: inline-flex !important;
font-size: 16px !important;
height: 18px !important;
justify-content: center !important;
line-height: 1 !important;
width: 18px !important;
}
}
@media (max-width: 420px) {
.elementor-63 .team-item {
gap: 18px !important;
}
.elementor-63 .team-item-media {
flex-basis: 44% !important;
max-width: 156px !important;
}
.elementor-63 .team-item-socials,
.elementor-63 .team-socials.wrapper-socials {
gap: 26px !important;
}
}
</style>
<div class="elementor elementor-63">
@@ -41,7 +218,7 @@
</div>
<div class="elementor-element elementor-element-57c7653 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-logico_heading" data-id="57c7653" data-element_type="widget" data-settings="{&quot;_animation&quot;:&quot;logico_heading_animation&quot;}" data-widget_type="logico_heading.default">
<div class="elementor-widget-container">
<h3 class="logico-title">Meet our the&nbsp;best crew</h3>
<h3 class="logico-title">Meet our &nbsp;best crew</h3>
</div>
</div>
<div class="elementor-element elementor-element-138c81a elementor-widget elementor-widget-logico_team_listing" data-id="138c81a" data-element_type="widget" data-widget_type="logico_team_listing.default">
@@ -57,9 +234,9 @@
<div class="post-media">
<a href="#">
<picture>
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 840w">
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="assets/images/Investor.png 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="assets/images/Investor.png 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="assets/images/Investor.png 840w">
<img decoding="async" alt="team-pic-1" title="team-pic-1" src="assets/images/Investor.png" class="attachment-medium size-medium wp-post-image" />
</picture>
</a>
@@ -83,23 +260,23 @@
</div>
<!-- PERSON-2 -->
<div class="team-item-wrapper post-2850 team type-team status-publish has-post-thumbnail hentry">
<div class="team-item-wrapper post-2850 team type-team status-publish has-post-thumbnail hentry">
<div class="team-item">
<div class="team-item-media">
<div class="post-media">
<a href="#">
<picture>
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 840w">
<img decoding="async" alt="team-pic-2" title="team-pic-2" src="assets/images/Aravinth.png" class="attachment-medium size-medium wp-post-image" />
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="assets/images/Fazul.png 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="assets/images/Fazul.png 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="assets/images/Fazul.png 840w">
<img decoding="async" alt="team-pic-2" title="team-pic-2" src="assets/images/Fazul.png" class="attachment-medium size-medium wp-post-image" />
</picture>
</a>
</div>
</div>
<div class="team-item-content">
<div class="post-title">
<a href="#">Aravinth</a>
<a href="#">Fazul Ilahi</a>
</div>
<!-- <div class="team-item-position">Manager</div> -->
<div class="team-item-socials">
@@ -113,6 +290,7 @@
</div>
</div>
</div>
<!-- PERSON-3 -->
<div class="team-item-wrapper post-2855 team type-team status-publish has-post-thumbnail hentry">
@@ -121,9 +299,9 @@
<div class="post-media">
<a href="#">
<picture>
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 840w">
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="assets/images/Parthi.png 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="assets/images/Parthi.png 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="assets/images/Parthi.png 840w">
<img decoding="async" alt="team-pic-3" title="team-pic-3" src="assets/images/Parthi.png" class="attachment-medium size-medium wp-post-image" />
</picture>
</a>
@@ -153,17 +331,17 @@
<div class="post-media">
<a href="#">
<picture>
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 840w">
<img decoding="async" alt="team-pic-2" title="team-pic-2" src="assets/images/Fazul.png" class="attachment-medium size-medium wp-post-image" />
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="assets/images/Aravinth.png 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="assets/images/Aravinth.png 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="assets/images/Aravinth.png 840w">
<img decoding="async" alt="team-pic-2" title="team-pic-2" src="assets/images/Aravinth.png" class="attachment-medium size-medium wp-post-image" />
</picture>
</a>
</div>
</div>
<div class="team-item-content">
<div class="post-title">
<a href="#">Fazul Ilahi</a>
<a href="#">Aravinth</a>
</div>
<!-- <div class="team-item-position">Manager</div> -->
<div class="team-item-socials">
@@ -186,9 +364,9 @@
<div class="post-media">
<a href="#">
<picture>
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 840w">
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="assets/images/Suriya.png 480w">
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="assets/images/Suriya.png 660w">
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="assets/images/Suriya.png 840w">
<img decoding="async" alt="team-pic-3" title="team-pic-3" src="assets/images/Suriya.png" class="attachment-medium size-medium wp-post-image" />
</picture>
</a>
@@ -219,4 +397,4 @@
</div>
</div>
</div>
</div>
</div>

View File

@@ -24,7 +24,7 @@
.offices-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
gap: 80px;
}
.office-card {
background: #f5f5f5;

View File

@@ -1,7 +1,8 @@
<style>
/* Our Values Component Styles — matched to Vision section style */
.values-section-wrapper {
width: 100%;
width: calc(100% - 40px);
max-width: none;
display: flex;
justify-content: center;
background: #1F1F1F;
@@ -9,14 +10,20 @@
font-family: 'DM Sans', sans-serif;
color: #ffffff;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border-radius: 25px;
overflow: hidden;
}
.values-section {
position: relative;
z-index: 1;
width: 100%;
max-width: 1140px;
max-width: 1520px;
padding-top: 80px;
padding-left: clamp(24px, 4vw, 64px);
padding-right: clamp(24px, 4vw, 64px);
margin: 0 auto !important;
}
@@ -217,6 +224,10 @@
}
@media (max-width: 991px) {
.values-section-wrapper {
width: calc(100% - 24px);
}
.values-grid {
grid-template-columns: 1fr 1fr;
height: 75vh;
@@ -287,4 +298,4 @@
</article>
</div>
</section>
</div>
</div>

View File

@@ -2,7 +2,8 @@
/* Vision & Mission Component Styles */
.vm-section-wrapper {
margin-top: 30px;
width: 100%;
width: calc(100% - 40px);
max-width: none;
height: auto;
display: flex;
justify-content: center;
@@ -10,14 +11,20 @@
position: relative;
font-family: 'DM Sans', sans-serif;
color: #ffffff;
margin-left: auto;
margin-right: auto;
border-radius: 25px;
overflow: hidden;
}
.vm-section {
position: relative;
z-index: 1;
width: 100%;
max-width: 1140px;
max-width: 1520px;
padding-top: 90px;
padding-left: clamp(24px, 4vw, 64px);
padding-right: clamp(24px, 4vw, 64px);
margin: 0 auto !important;
}
@@ -156,6 +163,7 @@
@media (max-width: 1024px) {
.vm-section-wrapper {
margin-top: 20px;
width: calc(100% - 24px);
}
.vm-section {

View File

@@ -26,6 +26,11 @@
line-height: 1.6;
overflow: hidden;
background: var(--we-white);
clear: both;
display: block;
position: relative;
z-index: 1;
isolation: isolate;
}
.we-container {
@@ -447,21 +452,51 @@
to { opacity: 1; transform: translateY(0); }
}
.reveal {
.we-section .reveal {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.reveal.active {
.we-section .reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.we-hero { padding: 80px 0 60px; }
.we-hero-sub { font-size: 18px; }
.we-section {
clear: both;
margin-top: 80px;
overflow: hidden;
}
.we-hero {
padding: 96px 0 64px;
position: relative;
z-index: 2;
}
.we-container {
padding: 0 20px;
}
.we-hero-badge {
margin-bottom: 28px;
}
.we-hero-title {
font-size: clamp(34px, 10vw, 44px);
line-height: 1.08;
margin-bottom: 24px;
}
.we-hero-sub {
font-size: 18px;
line-height: 1.6;
margin-bottom: 36px;
}
.we-stats { margin-top: 0; border-radius: 0; }
.we-stat-item:not(:last-child)::after { display: none; }
.we-title { font-size: 36px; }
@@ -700,7 +735,7 @@
<script>
// Intersection Observer for scroll reveals
document.addEventListener('DOMContentLoaded', function() {
const revealEls = document.querySelectorAll('.reveal');
const revealEls = document.querySelectorAll('.we-section .reveal');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {