Skip to content

M
makura-2025
Commit 912412bf by rajshah
Options

Merge branch 'dev' of gitlab.makuracreations.xyz:rajshah/makura-2025 into dev

parents 953ab59a 9a912761
Showing with 1264 additions and 219 deletions
assets/css/style.css
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/js/script.js
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
/** GLOBAL SCROLL INTO VIEW CONTROLLER START HERE*/ /** GLOBAL SCROLL INTO VIEW CONTROLLER START HERE*/
$(function () { $(function () {
$(".makura-new a[data-target]").on("click", function (e) { $(".makura-new a[data-target]").on("click", function (e) {
console.log("clicked data target");
e.preventDefault(); e.preventDefault();
$(this).parent().addClass("active").siblings().removeClass("active"); $(this).parent().addClass("active").siblings().removeClass("active");
const currentActive = $(this).data("target"); const currentActive = $(this).data("target");
...@@ -37,6 +38,35 @@ ...@@ -37,6 +38,35 @@
}); });
} }
}); });
const observer = new IntersectionObserver(
function (entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const currentActive = entry.target.getAttribute("id");
console.log(currentActive);
$(".makura-new a[data-target]").each(function () {
if ($(this).data("target") === currentActive) {
$(this)
.parent()
.addClass("active")
.siblings()
.removeClass("active");
}
});
}
});
},
{
threshold: 0.2,
},
);
$(".portfolio-block").each(function () {
observer.observe(this);
});
}); });
/** GLOBAL SCROLL INTO VIEW CONTROLLER ENDS HERE*/ /** GLOBAL SCROLL INTO VIEW CONTROLLER ENDS HERE*/
...@@ -80,51 +110,85 @@ ...@@ -80,51 +110,85 @@
/** MOBILE OFFCANVAS TOC START HERE */ /** MOBILE OFFCANVAS TOC START HERE */
$(function () { $(function () {
$(".blog-side-bar h6").on("click", function () { $(".toc h6").on("click", function () {
$(this).addClass("remove"); $(this).addClass("remove");
$(".category-list").addClass("active"); $(".category-list").addClass("active");
}); });
$(".category-list a").on("click", function () { $(".category-list a").on("click", function () {
$(".blog-side-bar h6").removeClass("remove"); $(".toc h6").removeClass("remove");
$(".category-list").removeClass("active"); $(".category-list").removeClass("active");
}); });
$(document).on("click", function (e) { $(document).on("click", function (e) {
if (!$(e.target).closest(".blog-side-bar").length) { if (!$(e.target).closest(".toc").length) {
$(".blog-side-bar h6").removeClass("remove"); $(".toc h6").removeClass("remove");
$(".category-list").removeClass("active"); $(".category-list").removeClass("active");
} }
}); });
$(window).on("scroll", function () { $(window).on("scroll", function () {
$(".blog-side-bar h6").removeClass("remove"); $(".toc h6").removeClass("remove");
$(".category-list").removeClass("active"); $(".category-list").removeClass("active");
}); });
const tocObserver = new IntersectionObserver( // const tocObserver = new IntersectionObserver(
function (entries) { // function (entries) {
entries.forEach((entry) => { // entries.forEach((entry) => {
if (entry.isIntersecting) { // if (entry.isIntersecting) {
$(".blog-side-bar h6").show(); // $(".toc h6").show();
} else { // console.log("is intersecting")
$(".blog-side-bar h6").hide(); // } else {
} // $(".toc h6").hide();
}); // console.log("is not intersecting")
}, // }
{ // });
threshold: 0.1, // },
}, // {
); // threshold: 0.1,
// },
// );
// const sections = [
// document.querySelector(".BLOGDETAIL-LIST-ITEM-SECTION"),
// document.querySelector(".BLOGLISTING-LIST-ITEM-SECTION"),
// document.querySelector(".case-study-general"),
// ];
// sections.length &&
// sections.forEach((section) => {
// if (section) tocObserver.observe(section);
// });
const sections = [ const sections = [
document.querySelector(".BLOGDETAIL-LIST-ITEM-SECTION"), document.querySelector(".BLOGDETAIL-LIST-ITEM-SECTION"),
document.querySelector(".BLOGLISTING-LIST-ITEM-SECTION"), document.querySelector(".BLOGLISTING-LIST-ITEM-SECTION"),
document.querySelector(".case-study-general"),
]; ];
sections.length &&
sections.forEach((section) => { // Filter out any null sections
if (section) tocObserver.observe(section); const validSections = sections.filter(Boolean);
});
if (validSections.length) {
const handleScroll = () => {
const scrollTop = $(window).scrollTop();
const viewportHeight = $(window).height();
if (scrollTop > viewportHeight) {
$(".toc h6").show();
console.log("Scrolled past 100vh");
} else {
$(".toc h6").hide();
console.log("Above 100vh");
}
};
// Bind scroll event
$(window).on("scroll", handleScroll);
// Run on page load too
$(document).ready(handleScroll);
}
}); });
/** MOBILE OFFCANVAS TOC ENDS HERE */ /** MOBILE OFFCANVAS TOC ENDS HERE */
...@@ -178,4 +242,102 @@ ...@@ -178,4 +242,102 @@
}); });
}); });
/** GALLERY LIGHT BOX AND DYNAMIC SLIDER ENDS HERE */ /** GALLERY LIGHT BOX AND DYNAMIC SLIDER ENDS HERE */
/** CASE STUDY DETAIL */
$(function () {
// Handle click on TOC items
$(".case-study-general .category-list a[data-target]").on("click", function (e) {
e.preventDefault();
// Update active class on TOC items
$(this).parent("li").addClass("active").siblings("li").removeClass("active");
// Scroll to the target section
var currentActive = $(this).data("target");
document.getElementById(currentActive)?.scrollIntoView({
behavior: "smooth",
});
});
function handleTocActiveOnScroll(offset = 100) {
let currentId = null;
// Check all h2 elements with IDs in the content area
$(".case-study-general-content h2[id]").each(function () {
const elementTop = $(this).offset().top;
const scrollPosition = $(window).scrollTop() + offset;
if (elementTop <= scrollPosition) {
currentId = $(this).attr("id");
}
});
// Update active TOC item if a section is in view
if (currentId) {
$(".case-study-general .category-list li").removeClass("active");
$(`.case-study-general .category-list a[data-target="${currentId}"]`)
.parent("li")
.addClass("active");
}
}
// Handle scroll events
$(window).on("load scroll", function () {
handleTocActiveOnScroll();
});
});
$(function () {
// Wrap tables inside .table-responsive
$(".case-study-general-content table").each(function () {
const $table = $(this);
if (!$table.parent().hasClass("table-responsive")) {
$table.wrap('<div class="table-responsive"></div>');
}
});
})
/** CUSTOM FILTER */
// $(function () {
// $(".case-study-filter a").on("click", function (e) {
// e.preventDefault();
// $(".case-study-filter a").removeClass("active");
// $(this).addClass("active");
// const currentActive = $(this).data("filter"); // e.g. "design", "dev", etc.
// // Show all items first
// $(".case-study-listing .row > div").removeClass("d-none");
// if (currentActive !== "") {
// $(".case-study-listing .row > div").each(function () {
// if (!$(this).hasClass(currentActive)) {
// $(this).addClass("d-none");
// }
// });
// }
// });
// });
/** CASE STUDY LOAD MORE */
$(function () {
$(".load-hidden-item").on("click", function (e) {
e.preventDefault();
var items = $(".case-study-listing .extra-item");
var isVisible = items.is(":visible");
if (isVisible) {
items.slideUp();
$(this).find("span").text("Load More");
$(this).parent().removeClass("show-less");
} else {
items.slideDown();
$(this).find("span").text("Show Less");
$(this).parent().addClass("show-less");
}
})
})
})(jQuery); })(jQuery);
assets/js/spider-animation.js
jQuery(document).ready(function () { jQuery(document).ready(function () {
VerletJS.prototype.spider = function (origin) { VerletJS.prototype.spider = function (origin) {
var i; var i;
var legSeg1Stiffness = 0.99; var legSeg1Stiffness = 0.99;
var legSeg2Stiffness = 0.99; var legSeg2Stiffness = 0.99;
...@@ -211,8 +211,8 @@ VerletJS.prototype.spider = function (origin) { ...@@ -211,8 +211,8 @@ VerletJS.prototype.spider = function (origin) {
} }
this.composites.push(composite); this.composites.push(composite);
return composite; return composite;
}; };
VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) { VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) {
var stiffness = 0.6; var stiffness = 0.6;
var tensor = 0.3; var tensor = 0.3;
var stride = (2 * Math.PI) / segments; var stride = (2 * Math.PI) / segments;
...@@ -271,16 +271,16 @@ VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) { ...@@ -271,16 +271,16 @@ VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) {
for (c in composite.constraints) composite.constraints[c].distance *= tensor; for (c in composite.constraints) composite.constraints[c].distance *= tensor;
this.composites.push(composite); this.composites.push(composite);
return composite; return composite;
}; };
function shuffle(o) { function shuffle(o) {
for ( for (
var j, x, i = o.length; var j, x, i = o.length;
i; i;
j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x
); );
return o; return o;
} }
VerletJS.prototype.crawl = function (leg) { VerletJS.prototype.crawl = function (leg) {
var stepRadius = 100; var stepRadius = 100;
var minStepRadius = 35; var minStepRadius = 35;
var spiderweb = this.composites[0]; var spiderweb = this.composites[0];
...@@ -344,8 +344,8 @@ VerletJS.prototype.crawl = function (leg) { ...@@ -344,8 +344,8 @@ VerletJS.prototype.crawl = function (leg) {
new DistanceConstraint(spider.legs[leg], paths[0], 1, 0) new DistanceConstraint(spider.legs[leg], paths[0], 1, 0)
); );
} }
}; };
window.onload = function () { window.onload = function () {
var canvas = document.getElementById("scratch"); var canvas = document.getElementById("scratch");
var width = parseInt(canvas.style.width); var width = parseInt(canvas.style.width);
var height = parseInt(canvas.style.height); var height = parseInt(canvas.style.height);
...@@ -367,10 +367,12 @@ window.onload = function () { ...@@ -367,10 +367,12 @@ window.onload = function () {
var point = composite.particles[i]; var point = composite.particles[i];
ctx.beginPath(); ctx.beginPath();
ctx.arc(point.pos.x, point.pos.y, 1.3, 0, 2 * Math.PI); ctx.arc(point.pos.x, point.pos.y, 1.3, 0, 2 * Math.PI);
ctx.fillStyle = "#7e7e7e"; ctx.fillStyle = "#ddd";
ctx.fill(); ctx.fill();
} }
}; };
spider.drawConstraints = function (ctx, composite) { spider.drawConstraints = function (ctx, composite) {
var i; var i;
ctx.beginPath(); ctx.beginPath();
...@@ -431,7 +433,7 @@ window.onload = function () { ...@@ -431,7 +433,7 @@ window.onload = function () {
} }
} }
}; };
spider.drawParticles = function (ctx, composite) {}; spider.drawParticles = function (ctx, composite) { };
var legIndex = 0; var legIndex = 0;
var loop = function () { var loop = function () {
if (Math.floor(Math.random() * 4) == 0) { if (Math.floor(Math.random() * 4) == 0) {
...@@ -442,5 +444,19 @@ window.onload = function () { ...@@ -442,5 +444,19 @@ window.onload = function () {
requestAnimFrame(loop); requestAnimFrame(loop);
}; };
loop(); loop();
};
function PinConstraint(a, pos) {
this.a = a;
this.pos = new Vec2().mutableSet(pos);
}
PinConstraint.prototype.relax = function (stepCoef) {
this.a.pos.mutableSet(this.pos);
};
PinConstraint.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI);
ctx.fillStyle = "yellow";
ctx.fill();
};
};
}); });
\ No newline at end of file
assets/js/spider-framework.js
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
PinConstraint.prototype.draw = function (ctx) { PinConstraint.prototype.draw = function (ctx) {
ctx.beginPath(); ctx.beginPath();
ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI); ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(0,153,255,0.1)"; ctx.fillStyle = "#ddd";
ctx.fill(); ctx.fill();
}; };
function AngleConstraint(a, b, c, stiffness) { function AngleConstraint(a, b, c, stiffness) {
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
ctx.lineTo(this.c.pos.x, this.c.pos.y); ctx.lineTo(this.c.pos.x, this.c.pos.y);
var tmp = ctx.lineWidth; var tmp = ctx.lineWidth;
ctx.lineWidth = 5; ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(255,255,0,0.2)"; ctx.strokeStyle = "red";
ctx.stroke(); ctx.stroke();
ctx.lineWidth = tmp; ctx.lineWidth = tmp;
}; };
...@@ -466,7 +466,7 @@ ...@@ -466,7 +466,7 @@
this.mouseDown = false; this.mouseDown = false;
this.draggedEntity = null; this.draggedEntity = null;
this.selectionRadius = 20; this.selectionRadius = 20;
this.highlightColor = "#4f545c"; this.highlightColor = "#fff";
this.bounds = function (particle) { this.bounds = function (particle) {
if (particle.pos.y > this.height - 1) if (particle.pos.y > this.height - 1)
particle.pos.y = this.height - 1; particle.pos.y = this.height - 1;
......
assets/js/style.js
...@@ -274,12 +274,20 @@ ...@@ -274,12 +274,20 @@
}); });
//customer-feedback-course-detail //customer-feedback-course-detail
$(".client-carouselwrapper").owlCarousel({ $(".client-carouselwrapper").each(function (index) {
loop: false, const isSecond = index === 1;
autoplay: true,
$(this).owlCarousel({
loop: true,
margin: 20, margin: 20,
nav: false, nav: false,
dots: false, dots: false,
autoplay: true,
rtl: isSecond,
slideTransition: "linear",
autoplayTimeout: 3000,
autoplaySpeed: 3000,
// autoplayHoverPause: true,
responsive: { responsive: {
0: { 0: {
items: 3, items: 3,
...@@ -290,9 +298,14 @@ ...@@ -290,9 +298,14 @@
1000: { 1000: {
items: 5, items: 5,
}, },
1200: {
items: 8,
}, },
},
});
}); });
//more-course-section //more-course-section
$(".more-course-section").owlCarousel({ $(".more-course-section").owlCarousel({
loop: false, loop: false,
...@@ -433,19 +446,6 @@ ...@@ -433,19 +446,6 @@
// }); // });
// }); // });
var lastScrollTop = 0;
$(window).scroll(function (event) {
$(".menu-item-has-children").removeClass("show");
var thisValue = $(this).scrollTop();
if (thisValue == 0) {
$(".navbar").removeClass("sticky-top");
} else if (thisValue > lastScrollTop) {
$(".navbar").removeClass("sticky-top");
} else {
$(".navbar").addClass("sticky-top");
}
lastScrollTop = thisValue;
});
$(".button-close").click(function () { $(".button-close").click(function () {
$(".modal-dialog").addClass("addCss"); $(".modal-dialog").addClass("addCss");
...@@ -479,17 +479,53 @@ ...@@ -479,17 +479,53 @@
}, },
}); });
$(function () {
let lastScrollTop = 0;
let scrollTimeout;
$(window).on("scroll", function () {
clearTimeout(scrollTimeout);
const scrollTop = $(this).scrollTop();
scrollTimeout = setTimeout(() => {
$(".menu-item-has-children").removeClass("show");
if (scrollTop > 120 && scrollTop < lastScrollTop) {
$(".navbar").addClass("sticky-top");
$(".sticky-tab").addClass("sticky-with-header");
} else {
$(".navbar").removeClass("sticky-top");
$(".sticky-tab").removeClass("sticky-with-header");
}
lastScrollTop = scrollTop;
}, 100);
});
})
// returntotop // returntotop
$(function () {
let lastScrollTop = 0;
$(window).scroll(function () { $(window).scroll(function () {
if ($(this).scrollTop() >= 200) { let currentScrollTop = $(this).scrollTop();
$("#return-to-top").show(200);
// Only show if scrolling up and scrolled at least 200px
if (currentScrollTop < lastScrollTop && currentScrollTop >= 200) {
$("#return-to-top").fadeIn(200);
} else { } else {
$("#return-to-top").hide(200); $("#return-to-top").fadeOut(200);
} }
lastScrollTop = currentScrollTop;
}); });
$("#return-to-top").click(function () { $("#return-to-top").click(function () {
$("body,html").animate({ scrollTop: 0 }, 1000); $("html, body").animate({ scrollTop: 0 }, 1000);
}); });
})
//thankyou message for comment in blog-detail //thankyou message for comment in blog-detail
$("#submitBtn").click(function () { $("#submitBtn").click(function () {
......
blocks/custom-banner-with-right-image.php
<?php if (get_field('enable_section')): ?> <?php if (get_field('enable_section')): ?>
<section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION"> <section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION">
<div class="container"> <div class="container">
<div class="inner-banner-wrapper"> <div class="inner-banner-wrapper">
<div class="row align-items-center justify-content-between"> <div class="row align-items-start justify-content-between">
<div class="col-lg-6 col-12"> <div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper"> <div class="position-relative left-text-wrapper">
<?php the_field('description'); ?> <?php the_field('description'); ?>
...@@ -23,5 +23,5 @@ ...@@ -23,5 +23,5 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<?php endif; ?> <?php endif; ?>
\ No newline at end of file
blocks/partners-carousel.php
<?php if (get_field('enable_partners_carousel_section')) : ?> <?php if (get_field('enable_partners_carousel_section')) : ?>
<section class="py-80 container-fluid HOME TOP-CAROUSEL-SECTION reversed"> <section class="py-80 container-fluid HOME TOP-CAROUSEL-SECTION reversed">
<div class="container"> <div class="container">
<div class="row mb-60 pb-60 border-bottom"> <div class="row mb-60 pb-60 border-bottom">
<div class="mb-3 text-center title-wrapper"> <div class="mb-3 text-center title-wrapper">
<h5><?php echo get_field('pc_title'); ?></h5> <h5><?php echo get_field('pc_title'); ?></h5>
</div> </div>
<div class="col-lg-10 mx-auto"> <div class="">
<div class="client-carouselwrapper owl-carousel owl-theme"> <div class="client-carouselwrapper owl-carousel owl-theme mb-4">
<?php <?php
if (have_rows('pc_partners_list')) : if (have_rows('pc_partners_list')) :
while (have_rows('pc_partners_list')) : the_row(); ?> while (have_rows('pc_partners_list')) : the_row(); ?>
...@@ -22,8 +22,25 @@ ...@@ -22,8 +22,25 @@
<?php endwhile; <?php endwhile;
endif; ?> endif; ?>
</div> </div>
<div class="client-carouselwrapper owl-carousel owl-theme">
<?php
$partners = get_field('pc_partners_list'); // Get entire repeater as array
if ($partners) {
$partners = array_reverse($partners); // Reverse the order
foreach ($partners as $partner) {
$image = $partner['logo'];
$size = 'full'; // thumbnail, medium, large, full or custom size
if ($image) {
echo wp_get_attachment_image($image, $size);
}
}
}
?>
</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<?php endif; ?> <?php endif; ?>
\ No newline at end of file
blocks/portfolio-banner.php
...@@ -17,17 +17,18 @@ ...@@ -17,17 +17,18 @@
</a> </a>
<?php endif; ?> <?php endif; ?>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4 col-xl-3">
<div class="client-logo-wrapper d-none d-lg-block"> <div class="client-logo-wrapper d-none d-lg-block">
<?php if ($image = get_field('client_logo')): <?php if ($image = get_field('client_logo')):
echo wp_get_attachment_image($image, 'full'); echo wp_get_attachment_image($image, 'full');
endif; ?> endif; ?>
</div> </div>
<?php <?php
$sof_title = get_field('sof_title')?:'Scope of Work'; $sof_title = get_field('sof_title') ?: 'Scope of Work';
if ($scope = get_field('scope_of_work')): ?> if ($scope = get_field('scope_of_work')): ?>
<div class="scope-work-wrapper"> <div class="scope-work-wrapper">
<?php if (!empty($sof_title)): ?><span class="sm-text"><?php echo $sof_title; ?></span><?php endif; ?> <?php if (!empty($sof_title)): ?><span
class="sm-text"><?php echo $sof_title; ?></span><?php endif; ?>
<ul class="list-unstyled"> <ul class="list-unstyled">
<?php echo $scope; ?> <?php echo $scope; ?>
</ul> </ul>
...@@ -40,7 +41,8 @@ ...@@ -40,7 +41,8 @@
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-lg-none"> <a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-lg-none">
<?php echo $link['title']; ?> <?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z" <path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" /> fill="#005AFF" />
</svg> </svg>
</a> </a>
......
blocks/portfolio-conclusion-section.php
...@@ -37,7 +37,7 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)): ...@@ -37,7 +37,7 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)):
$cmws_desc = $cmws['cmws_desc'] ?: ''; $cmws_desc = $cmws['cmws_desc'] ?: '';
$cmws_gal = $cmws['cmws_gal'] ?: []; $cmws_gal = $cmws['cmws_gal'] ?: [];
?> ?>
<section class="moment-worth-sharing makura-new mb-100"> <section class="moment-worth-sharing makura-new mb-100">
<div class="container"> <div class="container">
<?php if (!empty($cmws_title) || !empty($cmws_desc)): ?> <?php if (!empty($cmws_title) || !empty($cmws_desc)): ?>
<div class="section-title slide-up"> <div class="section-title slide-up">
...@@ -82,10 +82,10 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)): ...@@ -82,10 +82,10 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)):
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
</section> </section>
<?php endif; endif; ?> <?php endif; endif; ?>
<?php if ($quote_text = get_field('quote_text')): ?> <?php if ($quote_text = get_field('quote_text')): ?>
<section class="quote PROJECT-CONCLUSION"> <section class="quote PROJECT-CONCLUSION">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-10 col-xl-8 mx-auto"> <div class="col-lg-10 col-xl-8 mx-auto">
...@@ -102,5 +102,5 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)): ...@@ -102,5 +102,5 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)):
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<?php endif; ?> <?php endif; ?>
\ No newline at end of file
blocks/portfolio-listing-section.php
<?php if (get_field('enable_section')) : <?php
$portfolio_listing = get_field('portfolio_listing') ?: [];
if (is_array($portfolio_listing) && !empty($portfolio_listing) && isset($portfolio_listing)):
$enable_portfolio_listing = $portfolio_listing['enable_portfolio_listing'] ?? '';
if ($enable_portfolio_listing && !empty($enable_portfolio_listing) && isset($enable_portfolio_listing)):
$terms = get_terms('portfolio-category'); $terms = get_terms('portfolio-category');
if ($terms) :
?> ?>
<section class="background-dark mb-60 ABOUT TOP-BANNER-SECTION"> <section class="case-study-filter background-dark mb-60 ABOUT TOP-BANNER-SECTION">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
...@@ -102,4 +105,5 @@ ...@@ -102,4 +105,5 @@
</div> </div>
</section> </section>
<?php endif; <?php endif;
endif; ?> endif;
\ No newline at end of file ?>
\ No newline at end of file
blocks/portfolio-text-image-section.php
...@@ -128,6 +128,8 @@ if (isset($content) && is_array($content) && !empty($content)): ...@@ -128,6 +128,8 @@ if (isset($content) && is_array($content) && !empty($content)):
$galleries_desc = $galleries['galleries_desc'] ?: ''; $galleries_desc = $galleries['galleries_desc'] ?: '';
$galleries_img = $galleries['galleries_img'] ?: []; $galleries_img = $galleries['galleries_img'] ?: [];
if (isset($galleries_img) && is_array($galleries_img) && !empty($galleries_img)): if (isset($galleries_img) && is_array($galleries_img) && !empty($galleries_img)):
$sanitized_title = !empty($galleries_title) ? sanitize_title_with_dashes(strtok($galleries_title, ' ')) : 'gallery';
$gallery_id = $sanitized_title . '-' . mt_rand(100000, 999999);
?> ?>
<div class="block-gallery makura-new mb-120"> <div class="block-gallery makura-new mb-120">
<div class="container"> <div class="container">
...@@ -156,7 +158,7 @@ if (isset($content) && is_array($content) && !empty($content)): ...@@ -156,7 +158,7 @@ if (isset($content) && is_array($content) && !empty($content)):
</div> </div>
</div> </div>
<div class="gallery-slider-wrapper slide-up"> <div class="gallery-slider-wrapper slide-up">
<div class="gallery-slider owl-carousel " id="ui-ux-gallery"> <div class="gallery-slider owl-carousel " id="ui-ux-<?php echo esc_attr($gallery_id); ?>">
<?php foreach ($galleries_img as $gi => $img): <?php foreach ($galleries_img as $gi => $img):
?> ?>
<div class="gallery-item"> <div class="gallery-item">
......
blocks/resources/resource-listing.php
...@@ -7,11 +7,14 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc ...@@ -7,11 +7,14 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
$resources_items = $resources_listing['resources_items'] ?: []; $resources_items = $resources_listing['resources_items'] ?: [];
if (isset($resources_items) && is_array($resources_items) && !empty($resources_items)): if (isset($resources_items) && is_array($resources_items) && !empty($resources_items)):
?> ?>
<section class="resource-listing py-80 makura-new"> <section class="resource-listing py-80 makura-new">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="toc slide-up"> <div class="toc slide-up">
<div class="toc-title">
<h6>Table of Content</h6>
</div>
<div class="category-list"> <div class="category-list">
<ul> <ul>
<?php foreach ($resources_items as $ri => $res_item): <?php foreach ($resources_items as $ri => $res_item):
...@@ -123,6 +126,6 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc ...@@ -123,6 +126,6 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<?php endif; endif; endif; ?> <?php endif; endif; endif; ?>
<!-- !Resources - Resources Listing --> <!-- !Resources - Resources Listing -->
\ No newline at end of file
blocks/testimonial-block.php
<?php if(get_field('enable_section')):?> <?php if (get_field('enable_section')):
<section class="container-fluid background-dark py-80 HOME OUR-CUSTOMERS-SAY-SECTION <?php if (is_singular('portfolio')): ?>single-what-customers-say<?php endif; ?>"> if (is_singular('portfolio') || is_singular('case-study')) {
$single_customer_review = 'single-what-customers-say';
}
?>
<section class="container-fluid background-dark py-80 HOME OUR-CUSTOMERS-SAY-SECTION <?php echo esc_attr($single_customer_review); ?>">
<div class="container"> <div class="container">
<div class="row top-title pb-60 justify-content-between"> <div class="row top-title pb-60 justify-content-between">
<div class="col-lg-5 col-md-6 col-12"> <div class="col-lg-5 col-md-6 col-12">
<h2> <h2>
<?php the_field('title');?> <?php the_field('title'); ?>
</h2> </h2>
</div> </div>
<div class="col-lg-5 col-md-5 col-12"> <div class="col-lg-5 col-md-5 col-12">
<?php the_field('description');?> <?php the_field('description'); ?>
</div> </div>
</div> </div>
<?php $testimonials = get_field('testimonials'); if($testimonials): $carousle_type = get_field('carousel_type'); ?> <?php $testimonials = get_field('testimonials');
if ($testimonials): $carousle_type = get_field('carousel_type'); ?>
<div class="row"> <div class="row">
<div class="<?php if($carousle_type==3): echo 'customer-feedback'; elseif($carousle_type==2): echo ''; else: echo 'customer-feedback-portfolio'; endif;?> owl-carousel owl-theme"> <div class="<?php if ($carousle_type == 3): echo 'customer-feedback';
<?php foreach($testimonials as $testimonial):?> elseif ($carousle_type == 2): echo '';
else: echo 'customer-feedback-portfolio';
endif; ?> owl-carousel owl-theme">
<?php foreach ($testimonials as $testimonial): ?>
<div class="item feedback-wrapper p-40"> <div class="item feedback-wrapper p-40">
<svg width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
...@@ -22,21 +30,21 @@ ...@@ -22,21 +30,21 @@
d="M28.6018 0.0012207V5.52334H26.9027C25.5339 5.52334 24.4484 5.73573 23.646 6.16051C22.8437 6.58529 22.2537 7.31685 21.8761 8.3552C21.4985 9.34635 21.3097 10.6915 21.3097 12.3906V17.6295L19.2566 13.6649C19.587 13.4289 20.059 13.2402 20.6726 13.0986C21.2861 12.9098 21.9233 12.8154 22.5841 12.8154C24.1416 12.8154 25.4395 13.311 26.4779 14.3021C27.5162 15.2461 28.0354 16.5676 28.0354 18.2667C28.0354 19.8714 27.5398 21.2402 26.5487 22.3729C25.5575 23.4584 24.1416 24.0012 22.3009 24.0012C21.1209 24.0012 20.0118 23.7416 18.9735 23.2225C17.9823 22.6561 17.1799 21.7121 16.5664 20.3906C15.9528 19.0219 15.646 17.1576 15.646 14.7977V13.5941C15.646 10.2431 16.0944 7.57644 16.9912 5.59414C17.9351 3.61184 19.2802 2.19591 21.0265 1.34635C22.7729 0.449598 24.8968 0.0012207 27.3982 0.0012207H28.6018ZM12.9558 0.0012207V5.52334H11.2566C9.88791 5.52334 8.80236 5.73573 8 6.16051C7.19764 6.58529 6.60767 7.31685 6.23009 8.3552C5.85251 9.34635 5.66372 10.6915 5.66372 12.3906V17.6295L3.61062 13.6649C3.941 13.4289 4.41298 13.2402 5.02655 13.0986C5.64012 12.9098 6.27729 12.8154 6.93805 12.8154C8.49558 12.8154 9.79351 13.311 10.8319 14.3021C11.8702 15.2461 12.3894 16.5676 12.3894 18.2667C12.3894 19.8714 11.8938 21.2402 10.9027 22.3729C9.91151 23.4584 8.49558 24.0012 6.65487 24.0012C5.47493 24.0012 4.36578 23.7416 3.32743 23.2225C2.33628 22.6561 1.53392 21.7121 0.920354 20.3906C0.306785 19.0219 0 17.1576 0 14.7977V13.5941C0 10.2431 0.448378 7.57644 1.34513 5.59414C2.28909 3.61184 3.63422 2.19591 5.38053 1.34635C7.12684 0.449598 9.25074 0.0012207 11.7522 0.0012207H12.9558Z" d="M28.6018 0.0012207V5.52334H26.9027C25.5339 5.52334 24.4484 5.73573 23.646 6.16051C22.8437 6.58529 22.2537 7.31685 21.8761 8.3552C21.4985 9.34635 21.3097 10.6915 21.3097 12.3906V17.6295L19.2566 13.6649C19.587 13.4289 20.059 13.2402 20.6726 13.0986C21.2861 12.9098 21.9233 12.8154 22.5841 12.8154C24.1416 12.8154 25.4395 13.311 26.4779 14.3021C27.5162 15.2461 28.0354 16.5676 28.0354 18.2667C28.0354 19.8714 27.5398 21.2402 26.5487 22.3729C25.5575 23.4584 24.1416 24.0012 22.3009 24.0012C21.1209 24.0012 20.0118 23.7416 18.9735 23.2225C17.9823 22.6561 17.1799 21.7121 16.5664 20.3906C15.9528 19.0219 15.646 17.1576 15.646 14.7977V13.5941C15.646 10.2431 16.0944 7.57644 16.9912 5.59414C17.9351 3.61184 19.2802 2.19591 21.0265 1.34635C22.7729 0.449598 24.8968 0.0012207 27.3982 0.0012207H28.6018ZM12.9558 0.0012207V5.52334H11.2566C9.88791 5.52334 8.80236 5.73573 8 6.16051C7.19764 6.58529 6.60767 7.31685 6.23009 8.3552C5.85251 9.34635 5.66372 10.6915 5.66372 12.3906V17.6295L3.61062 13.6649C3.941 13.4289 4.41298 13.2402 5.02655 13.0986C5.64012 12.9098 6.27729 12.8154 6.93805 12.8154C8.49558 12.8154 9.79351 13.311 10.8319 14.3021C11.8702 15.2461 12.3894 16.5676 12.3894 18.2667C12.3894 19.8714 11.8938 21.2402 10.9027 22.3729C9.91151 23.4584 8.49558 24.0012 6.65487 24.0012C5.47493 24.0012 4.36578 23.7416 3.32743 23.2225C2.33628 22.6561 1.53392 21.7121 0.920354 20.3906C0.306785 19.0219 0 17.1576 0 14.7977V13.5941C0 10.2431 0.448378 7.57644 1.34513 5.59414C2.28909 3.61184 3.63422 2.19591 5.38053 1.34635C7.12684 0.449598 9.25074 0.0012207 11.7522 0.0012207H12.9558Z"
fill="#005AFF" /> fill="#005AFF" />
</svg> </svg>
<?php echo get_the_content(null,false,$testimonial);?> <?php echo get_the_content(null, false, $testimonial); ?>
<hr> <hr>
<div class="author-info d-flex align-items-center"> <div class="author-info d-flex align-items-center">
<?php echo get_the_post_thumbnail($testimonial);?> <?php echo get_the_post_thumbnail($testimonial); ?>
<div class="detail"> <div class="detail">
<div><?php the_field('name',$testimonial);?></div> <div><?php the_field('name', $testimonial); ?></div>
<span><?php the_field('profession',$testimonial);?></span> <span><?php the_field('profession', $testimonial); ?></span>
</div> </div>
</div> </div>
</div> </div>
<?php endforeach;?> <?php endforeach; ?>
</div> </div>
</div> </div>
<?php endif;?> <?php endif; ?>
</div> </div>
</section> </section>
<?php endif;?> <?php endif; ?>
\ No newline at end of file \ No newline at end of file
blocks/welcome-banner-spider.php
<?php if (get_field('enable_spider_welcome_banner_section')) : ?> <?php if (get_field('enable_spider_welcome_banner_section')) : ?>
<section class="py-80 HOME TOP-BANNER-SECTION home2"> <section class="py-80 HOME TOP-BANNER-SECTION home2">
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text"> <div class="col-lg-6 col-md-6 col-12 mx-auto order-md-2">
<canvas id="scratch" style="width: 375px; height: 400px;"></canvas>
</div>
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text order-md-1">
<div class="position-relative left-text-wrapper"> <div class="position-relative left-text-wrapper">
<h1><?php echo get_field('wb_title') ?></h1> <h1><?php echo get_field('wb_title') ?></h1>
<p><?php echo get_field('wb_subtitle') ?></p> <p><?php echo get_field('wb_subtitle') ?></p>
</div> </div>
<div class="button-wrapper"> <div class="button-wrapper">
<a href="<?php echo get_field('wb_button_link') ?>" class="btn btn-start-project btn-primary"><?php echo get_field('wb_button_text') ?></a> <a href="<?php echo get_field('wb_button_link') ?>" class="btn btn-start-project btn-primary">
</div> <?php echo get_field('wb_button_text') ?><svg width="24" height="24" viewBox="0 0 24 24"
</div> fill="none" xmlns="http://www.w3.org/2000/svg">
<div class="col-lg-6 col-md-6 col-12 mx-auto"> <path fill-rule="evenodd" clip-rule="evenodd"
<div class="jumbotron showcase parallax-window" data-parallax="scroll" d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
data-image-src="images/showcase-bg.jpg" data-position="-80% -90%" style="margin-top:70px;"> fill="white"></path>
<div class="col-md-5" style="margin-top:-50px;"> </svg>
<canvas id="scratch" style="width: 500px; height: 400px;"></canvas> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<?php endif; ?> <?php endif; ?>
\ No newline at end of file
blocks/welcome-banner.php
<?php if (get_field('enable_welcome_banner_section')) : ?> <?php if (get_field('enable_welcome_banner_section')) : ?>
<section class="bg-secondary background-dark py-80 HOME TOP-BANNER-SECTION"> <section class="bg-secondary background-dark py-80 HOME TOP-BANNER-SECTION">
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text"> <div class="col-lg-6 col-md-6 col-12 mx-auto order-md-2">
<?php $enable_interactive_spider = get_field('enable_interactive_spider') ?: '';
if (isset($enable_interactive_spider) && $enable_interactive_spider):
if(wp_is_mobile()){
$spiderInlineCss = 'style="width: 350px; height: 400px;"';
}else{
$spiderInlineCss = 'style="width: 500px; height: 400px;"';
}
?>
<canvas id="scratch" <?php echo $spiderInlineCss; ?>></canvas>
<?php else:
$image = get_field('banner_image');
$size = 'full';
if ($image) {
echo wp_get_attachment_image($image, $size);
}
endif;
?>
</div>
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text order-md-1">
<div class="position-relative left-text-wrapper"> <div class="position-relative left-text-wrapper">
<h1><?php echo get_field('wb_title') ?></h1> <h1><?php echo get_field('wb_title') ?></h1>
<p><?php echo get_field('wb_subtitle') ?></p> <p><?php echo get_field('wb_subtitle') ?></p>
</div> </div>
<div class="button-wrapper"> <div class="button-wrapper">
<a href="<?php echo get_field('wb_button_link') ?>" class="btn btn-start-project btn-primary"><?php echo get_field('wb_button_text') ?></a> <a href="<?php echo get_field('wb_button_link') ?>"
</div> class="btn btn-start-project btn-primary"><?php echo get_field('wb_button_text') ?><svg
width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg></a>
</div> </div>
<div class="col-lg-6 col-md-6 col-12 mx-auto">
<?php <?php
$image = get_field('banner_image'); $review_widget = get_field('review_widget') ?: [];
$size = 'full'; // (thumbnail, medium, large, full or custom size) if (isset($review_widget) && is_array($review_widget) && !empty($review_widget)) :
if ($image) { $enable_review_widget = $review_widget['enable_review_widget'] ?: '';
echo wp_get_attachment_image($image, $size); if (!empty($enable_review_widget) && isset($enable_review_widget) && $enable_review_widget) :
} ?> $review_items = $review_widget['widget_items'] ?: '';
if (isset($review_items) && is_array($review_items) && !empty($review_items)) :
?>
<div class="review-block d-flex gap-2 flex-wrap">
<?php foreach ($review_items as $i => $item):
$widget = $item['widget'] ?? '';
if (empty($widget)) continue;
if ($i === 1) {
$widget = do_shortcode($widget);
};
?>
<div class="review d-flex align-items-center bg-white rounded-2">
<?php echo $widget; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif;
endif;
endif; ?>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<?php endif; ?> <?php endif; ?>
<script type="text/javascript" src="https://widget.clutch.co/static/js/widget.js"></script>
\ No newline at end of file
dev/sass/base/_base.scss
...@@ -40,6 +40,7 @@ body { ...@@ -40,6 +40,7 @@ body {
font-family: $body-font; font-family: $body-font;
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
&.no-scroll { &.no-scroll {
overflow: hidden !important; overflow: hidden !important;
} }
...@@ -93,6 +94,7 @@ p { ...@@ -93,6 +94,7 @@ p {
font-size: 1.125rem; font-size: 1.125rem;
color: #58595a; color: #58595a;
letter-spacing: -0.5px; letter-spacing: -0.5px;
@media (max-width: 991px) { @media (max-width: 991px) {
letter-spacing: 0; letter-spacing: 0;
} }
...@@ -647,11 +649,14 @@ ul { ...@@ -647,11 +649,14 @@ ul {
} }
// 9: Return to Top Start // 9: Return to Top Start
#return-to-top { .fixed-button-wrapper {
position: fixed; position: fixed;
z-index: 99; z-index: 99;
bottom: 20px; bottom: 80px;
right: 2%; right: 8px;
}
#return-to-top {
background: $primary; background: $primary;
width: 50px; width: 50px;
height: 50px; height: 50px;
...@@ -699,7 +704,7 @@ ul { ...@@ -699,7 +704,7 @@ ul {
} }
.text-content { .text-content {
& > span { &>span {
font-size: 1.25rem; font-size: 1.25rem;
color: #000000; color: #000000;
letter-spacing: 0.28em; letter-spacing: 0.28em;
...@@ -1054,60 +1059,14 @@ ul { ...@@ -1054,60 +1059,14 @@ ul {
// transition: all 0.5s ease; // transition: all 0.5s ease;
// transform: translateY(100%); // transform: translateY(100%);
h6,
.category-list {
position: fixed;
top: 50vh;
left: 0;
z-index: 2;
}
h6 {
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 0 0;
padding: 8px 16px;
transform: rotate(90deg);
transform-origin: left bottom;
background-color: $primary;
color: $white !important;
font-size: 1rem !important;
word-spacing: 4px;
&.remove {
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
}
}
.category-list {
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
max-height: 240px;
overflow: auto !important;
background-color: $white;
max-width: 75%;
ul {
overflow: visible !important;
}
&.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
}
.blog-filter-bar-close { .blog-filter-bar-close {
display: block; display: block;
} }
} }
} }
//blog-card-wrapper //blog-card-wrapper
.blog-card-wrapper { .blog-card-wrapper {
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
...@@ -1168,6 +1127,7 @@ ul { ...@@ -1168,6 +1127,7 @@ ul {
} }
.text-wrapper { .text-wrapper {
h1, h1,
h2, h2,
h3, h3,
...@@ -1411,6 +1371,7 @@ ul { ...@@ -1411,6 +1371,7 @@ ul {
display: flex !important; display: flex !important;
.job-list { .job-list {
h1, h1,
h2, h2,
h3, h3,
...@@ -1455,12 +1416,15 @@ ul { ...@@ -1455,12 +1416,15 @@ ul {
.breadcrumb-background-dark { .breadcrumb-background-dark {
padding-bottom: 0; padding-bottom: 0;
padding-top: 4.5rem !important; padding-top: 4.5rem !important;
&.background-dark { &.background-dark {
background: #005aff !important; background: #005aff !important;
} }
&.breadcrumb-background-dark { &.breadcrumb-background-dark {
padding-bottom: 2.5rem !important; padding-bottom: 2.5rem !important;
} }
ol, ol,
ul { ul {
margin: 0; margin: 0;
...@@ -1472,7 +1436,7 @@ ul { ...@@ -1472,7 +1436,7 @@ ul {
} }
} }
.breadcrumb-item + .breadcrumb-item { .breadcrumb-item+.breadcrumb-item {
&::before { &::before {
content: ""; content: "";
background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A");
...@@ -1488,6 +1452,7 @@ ul { ...@@ -1488,6 +1452,7 @@ ul {
.vacancy-detail-breadcrumb { .vacancy-detail-breadcrumb {
padding-top: 4.5rem !important; padding-top: 4.5rem !important;
background: #121526 !important; background: #121526 !important;
ol, ol,
ul { ul {
margin: 0; margin: 0;
...@@ -1499,7 +1464,7 @@ ul { ...@@ -1499,7 +1464,7 @@ ul {
} }
} }
.breadcrumb-item + .breadcrumb-item { .breadcrumb-item+.breadcrumb-item {
&::before { &::before {
content: ""; content: "";
background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A");
...@@ -1517,11 +1482,13 @@ ul { ...@@ -1517,11 +1482,13 @@ ul {
.col-lg-9 { .col-lg-9 {
padding-left: 0.8125rem; padding-left: 0.8125rem;
} }
.terms-sidebar-wrapper { .terms-sidebar-wrapper {
position: sticky; position: sticky;
top: 20%; top: 20%;
margin-right: 2.5rem; margin-right: 2.5rem;
padding-bottom: 1.875rem; padding-bottom: 1.875rem;
ul { ul {
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
...@@ -1615,6 +1582,7 @@ ul { ...@@ -1615,6 +1582,7 @@ ul {
//YOU-MAY-LIKE //YOU-MAY-LIKE
.YOU-MAY-LIKE { .YOU-MAY-LIKE {
.main-wrapper .top-title-wrapper p, .main-wrapper .top-title-wrapper p,
span { span {
color: #000 !important; color: #000 !important;
......
dev/sass/base/_footer.scss
...@@ -2,26 +2,34 @@ ...@@ -2,26 +2,34 @@
.upper-footer { .upper-footer {
position: relative; position: relative;
min-height: 29.75rem; min-height: 29.75rem;
@media (max-width: 1200px) { @media (max-width: 1200px) {
min-height: 35rem; min-height: 35rem;
} }
@media (max-width: 991px) { @media (max-width: 991px) {
min-height: 33rem; min-height: 33rem;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
min-height: 20rem; min-height: 20rem;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
min-height: 20rem; min-height: 20rem;
} }
.inner-text-wrapper { .inner-text-wrapper {
.inner-wrapper { .inner-wrapper {
position: relative; position: relative;
h2 { h2 {
margin-bottom: 4.0625rem; margin-bottom: 4.0625rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
font-size: 1.5rem !important; font-size: 1.5rem !important;
} }
&:before { &:before {
content: ""; content: "";
background-image: url("https://makuracreations.com/wp-content/themes/makura/assets/img/footer-left-arrow.png"); background-image: url("https://makuracreations.com/wp-content/themes/makura/assets/img/footer-left-arrow.png");
...@@ -31,26 +39,31 @@ ...@@ -31,26 +39,31 @@
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
left: -27%; left: -27%;
@media (max-width: 1023.98px) { @media (max-width: 1023.98px) {
height: 150px; height: 150px;
width: 150px; width: 150px;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
height: 130px; height: 130px;
width: 130px; width: 130px;
left: -46%; left: -46%;
} }
@media (max-width: 424.98px) { @media (max-width: 424.98px) {
display: none; display: none;
} }
} }
} }
} }
a { a {
position: relative; position: relative;
width: 15.75rem; width: 15.75rem;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
&::before { &::before {
content: ""; content: "";
background-image: url("https://makuracreations.com/wp-content/themes/makura/assets/img/start-project.png"); background-image: url("https://makuracreations.com/wp-content/themes/makura/assets/img/start-project.png");
...@@ -66,17 +79,21 @@ ...@@ -66,17 +79,21 @@
} }
} }
} }
.left-img { .left-img {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
img { img {
height: 100%; height: 100%;
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;
@media (max-width: 1023.98px) { @media (max-width: 1023.98px) {
height: 100%; height: 100%;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
height: 7rem; height: 7rem;
width: 7rem; width: 7rem;
...@@ -84,17 +101,21 @@ ...@@ -84,17 +101,21 @@
} }
} }
} }
.right-img { .right-img {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
img { img {
height: 100%; height: 100%;
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;
@media (max-width: 1023.98px) { @media (max-width: 1023.98px) {
height: 100%; height: 100%;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
height: 7rem; height: 7rem;
width: 7rem; width: 7rem;
...@@ -103,23 +124,32 @@ ...@@ -103,23 +124,32 @@
} }
} }
} }
.section-footer { .section-footer {
padding: 64px 0 68px;
position: relative;
z-index: 1;
.row { .row {
@media (max-width: 991px) { @media (max-width: 991px) {
justify-content: center; justify-content: center;
margin: auto; margin: auto;
text-align: center; text-align: center;
.col-lg-5 { .col-lg-5 {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
ul { ul {
justify-content: center !important; justify-content: center !important;
margin-top: 1rem; margin-top: 1rem;
} }
} }
} }
.lower-footer { .lower-footer {
padding: 0 0 2rem 0; padding: 0 0 2rem 0;
.nav-item { .nav-item {
.font-16 { .font-16 {
@media (max-width: 991px) { @media (max-width: 991px) {
...@@ -127,42 +157,52 @@ ...@@ -127,42 +157,52 @@
} }
} }
} }
.top-ul { .top-ul {
justify-content: center; justify-content: center;
margin: 0; margin: 0;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
flex-direction: column; flex-direction: column;
li { li {
padding-right: 0 !important; padding-right: 0 !important;
margin: 0 auto; margin: 0 auto;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
} }
li { li {
padding-right: 1rem; padding-right: 1rem;
a { a {
color: rgba(255, 255, 255, 0.56); color: rgba(255, 255, 255, 0.56);
transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
padding: 0 20px; padding: 0 20px;
&:hover { &:hover {
color: white; color: white;
text-decoration: underline; text-decoration: underline;
} }
} }
&:last-of-type { &:last-of-type {
padding-right: 0; padding-right: 0;
} }
} }
} }
} }
.social-links { .social-links {
margin-bottom: 2rem; margin-bottom: 2rem;
border-bottom: 2px solid #000; border-bottom: 2px solid #000;
padding-bottom: 2rem; padding-bottom: 2rem;
ul { ul {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 0; margin-bottom: 0;
@media (max-width: 425px) { @media (max-width: 425px) {
li { li {
a { a {
...@@ -170,21 +210,25 @@ ...@@ -170,21 +210,25 @@
} }
} }
} }
li { li {
@media screen and (max-width: 1024.98px) { @media screen and (max-width: 1024.98px) {
margin: 0; margin: 0;
text-align: center; text-align: center;
} }
a { a {
color: rgba(255, 255, 255, 0.56); color: rgba(255, 255, 255, 0.56);
padding: 0 2rem; padding: 0 2rem;
transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
svg { svg {
&:hover { &:hover {
path { path {
fill: #868fce; fill: #868fce;
} }
} }
path { path {
transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
} }
...@@ -193,14 +237,17 @@ ...@@ -193,14 +237,17 @@
} }
} }
} }
span { span {
color: rgba(255, 255, 255, 0.56) !important; color: rgba(255, 255, 255, 0.56) !important;
} }
.footer-bottom-right-content { .footer-bottom-right-content {
li { li {
&:first-child { &:first-child {
margin-right: 2rem; margin-right: 2rem;
} }
a { a {
color: rgba(255, 255, 255, 0.56); color: rgba(255, 255, 255, 0.56);
font-family: $body-font; font-family: $body-font;
...@@ -208,11 +255,249 @@ ...@@ -208,11 +255,249 @@
font-weight: 400; font-weight: 400;
line-height: 180%; line-height: 180%;
letter-spacing: -0.4px; letter-spacing: -0.4px;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
} }
} }
.footer-links {
.footer-link-wrapper {
padding: 24px;
border-radius: 12px;
background-color: #6CAFF60A;
&:not(:last-child) {
margin-bottom: 20px;
}
}
strong {
display: block;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(119, 145, 250, 0.1);
}
ul {
margin-bottom: 0;
li {
text-align: start;
list-style-type: none;
a {
opacity: 0.56;
font-size: 14px;
line-height: 180%;
letter-spacing: 0;
&:hover {
opacity: 1;
svg {
path {
fill-opacity: 1;
fill: var(--white);
}
}
}
}
&:not(:last-child) {
margin-bottom: 8px;
}
}
&.socials {
li {
a {
display: flex;
align-items: center;
gap: 8px;
}
}
}
}
}
.footer-branch {
.branch-title {
margin-bottom: 12px;
gap: 8px;
span {
color: var(--white) !important;
font-family: "Sora", sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 180%;
letter-spacing: -0.4px;
display: block;
}
}
ul {
li {
a {
display: flex;
align-items: flex-start;
justify-content: flex-start;
word-break: break-all;
svg {
margin-right: 8px;
}
}
}
}
}
.row {
>div {
&:not(:first-child) {
.footer-branch {
margin-top: 24px;
}
}
}
}
.footer-about {
text-align: center;
max-width: 568px;
margin: 48px auto 0;
.logo {
margin-bottom: 8px;
}
span {
display: block;
font-weight: 400;
font-size: 12px;
line-height: 180%;
letter-spacing: 0px;
margin: 8px 0;
}
p {
font-weight: 400;
font-size: 10px !important;
line-height: 150%;
letter-spacing: -0.4px;
margin-bottom: 0;
opacity: 0.56;
}
}
}
.scroll-animate {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
span {
font-size: 20px;
line-height: 180%;
font-weight: 800;
letter-spacing: 0px;
mix-blend-mode: overlay;
opacity: 0.2;
color: #868fce;
}
}
@media (min-width:576px) {
.section-footer {
.footer-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
.footer-link-wrapper {
height: 100%;
}
}
}
.scroll-animate {
span {
font-size: 24px;
}
}
}
@media (min-width:768px) {
.section-footer {
.footer-links {
grid-template-columns: repeat(3, 1fr);
.footer-link-wrapper.location-wrapper {
// height: 100%;
grid-column: 1/-1;
}
}
&::before,
&::after {
content: "";
position: absolute;
bottom: 0;
width: 215px;
height: 216px;
}
&::before {
left: 0;
background: url(../img/footer-shape-left.svg) no-repeat center/cover;
}
&::after {
right: 0;
background: url(../img/footer-shape-right.svg) no-repeat center/cover;
}
}
}
@media (min-width:1200px) {
.section-footer {
.footer-links {
display: flex;
.footer-link-wrapper {
margin-bottom: 0 !important;
height: unset;
&:not(.location-wrapper) {
width: 232px;
}
.footer-branch {
margin-top: 0 !important;
}
}
}
}
}
@media (min-width:1440px) {
.section-footer {
.footer-links {
.footer-link-wrapper {
flex: 1 0 auto;
}
}
}
} }
//section-footer //section-footer
\ No newline at end of file
dev/sass/base/_global.scss
...@@ -2,8 +2,38 @@ a, ...@@ -2,8 +2,38 @@ a,
button { button {
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
.new {
position: relative;
&::after {
content: "New";
position: absolute;
right: -10px;
top: -15px;
background-color: rgb(17, 170, 55);
border-radius: 4px;
font-size: 10px;
line-height: 12px;
padding: 2px 6px;
color: $white;
animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
0% {
box-shadow: 0 0 4px rgba(17, 170, 55, 0.5);
}
100% {
box-shadow: 0 0 12px rgba(17, 170, 55, 1);
}
}
}
.section-title { .section-title {
margin-bottom: 3.75rem; margin-bottom: 3.75rem;
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -11,6 +41,7 @@ button { ...@@ -11,6 +41,7 @@ button {
.input-field { .input-field {
margin-bottom: 32px; margin-bottom: 32px;
label { label {
color: $black; color: $black;
font-size: 16px; font-size: 16px;
...@@ -19,6 +50,7 @@ button { ...@@ -19,6 +50,7 @@ button {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
} }
input, input,
select, select,
textarea { textarea {
...@@ -45,6 +77,7 @@ button { ...@@ -45,6 +77,7 @@ button {
opacity: 0.4; opacity: 0.4;
} }
} }
textarea { textarea {
resize: none; resize: none;
} }
...@@ -110,7 +143,7 @@ button { ...@@ -110,7 +143,7 @@ button {
} }
} }
> svg { >svg {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -223,6 +256,11 @@ button { ...@@ -223,6 +256,11 @@ button {
} }
} }
figcaption {
font-style: italic;
color: $grey ;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.section-title { .section-title {
margin-bottom: 2rem; margin-bottom: 2rem;
...@@ -231,6 +269,7 @@ button { ...@@ -231,6 +269,7 @@ button {
font-size: 2rem !important; font-size: 2rem !important;
} }
} }
.input-field { .input-field {
margin-bottom: 24px; margin-bottom: 24px;
} }
...@@ -249,22 +288,81 @@ button { ...@@ -249,22 +288,81 @@ button {
.toc { .toc {
position: fixed !important; position: fixed !important;
display: block !important; display: block !important;
bottom: 0; // bottom: 0;
left: 0;
top: 50%;
transform: translate(-100%, -50%);
z-index: 2;
// .category-list {
// display: grid;
// grid-template-rows: 0fr;
// overflow: hidden;
// ul {
// overflow: hidden;
// }
// }
&.active {
.category-list {
transform: translate(0%, -50%);
// grid-template-rows: 1fr;
}
}
}
}
@media (max-width: 1023px) {
.toc {
h6,
.category-list {
position: fixed;
top: 50%;
left: 0; left: 0;
right: 0; z-index: 2;
}
h6 {
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 0 0;
padding: 8px 16px;
transform: translateY(-50%) rotate(90deg);
transform-origin: left bottom;
background-color: $primary;
color: $white !important;
font-size: 1rem !important;
word-spacing: 4px;
text-wrap: nowrap;
&.remove {
opacity: 0;
visibility: hidden;
transform: translateX(-100%) translateY(-50%);
}
}
.category-list { .category-list {
display: grid; border-radius: 8px;
grid-template-rows: 0fr; padding: 16px;
overflow: hidden; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateX(-100%) translateY(-50%);
max-height: 240px;
overflow: auto !important;
background-color: $white;
width: 24rem;
ul { ul {
overflow: hidden; overflow: visible !important;
}
} }
&.active { &.active {
.category-list { opacity: 1;
grid-template-rows: 1fr; visibility: visible;
transform: translateX(0) translateY(-50%);
} }
} }
} }
......
dev/sass/base/_header.scss
///top-nav //top-nav
.header-placeholder {
height: 65px;
}
@media (min-width:992px) {
.header-placeholder {
height: 86px;
}
}
.top-nav { .top-nav {
width: 100%; width: 100%;
background-color: $white; background-color: $white;
...@@ -7,11 +17,17 @@ ...@@ -7,11 +17,17 @@
left: 0; left: 0;
z-index: 111; z-index: 111;
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
position: absolute;
top: 0;
@media (max-width: 1030px) { @media (max-width: 1030px) {
.navbar-nav { .navbar-nav {
flex-direction: column !important; flex-direction: column !important;
} }
} }
.side-menu-close { .side-menu-close {
@media (max-width: 1030px) { @media (max-width: 1030px) {
display: block !important; display: block !important;
...@@ -117,6 +133,7 @@ ...@@ -117,6 +133,7 @@
@media (max-width: 1030px) { @media (max-width: 1030px) {
margin-right: 0; margin-right: 0;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
} }
...@@ -174,6 +191,8 @@ ...@@ -174,6 +191,8 @@
} }
} }
&:last-of-type { &:last-of-type {
margin-right: 0; margin-right: 0;
} }
...@@ -181,7 +200,7 @@ ...@@ -181,7 +200,7 @@
&.menu-item-has-children { &.menu-item-has-children {
position: relative; position: relative;
> a { >a {
padding-right: 24px; padding-right: 24px;
position: relative; position: relative;
...@@ -199,11 +218,12 @@ ...@@ -199,11 +218,12 @@
&:hover, &:hover,
&.show { &.show {
> ul { >ul {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transform: translateY(0); transform: translateY(0);
} }
a { a {
&::before { &::before {
transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg);
...@@ -231,6 +251,7 @@ ...@@ -231,6 +251,7 @@
left: 100%; left: 100%;
top: 0; top: 0;
} }
a { a {
display: block; display: block;
padding: 12px 36px 12px 24px; padding: 12px 36px 12px 24px;
...@@ -238,13 +259,15 @@ ...@@ -238,13 +259,15 @@
&::after { &::after {
content: unset; content: unset;
} }
&::before { &::before {
right: 24px; right: 24px;
} }
} }
&:hover, &:hover,
&.active { &.active {
> a { >a {
background-color: rgba(44, 92, 218, 20%); background-color: rgba(44, 92, 218, 20%);
} }
} }
...@@ -324,9 +347,12 @@ ...@@ -324,9 +347,12 @@
// brightness(140%); // brightness(140%);
-webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06); -webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06);
animation: slideDown 0.8s ease forwards; animation: slideDown 0.8s ease forwards;
position: fixed;
// overflow: hidden; // overflow: hidden;
@media (max-width: 1030px) { @media (max-width: 1030px) {
animation: unset; animation: unset;
.navbar-nav { .navbar-nav {
flex-direction: column !important; flex-direction: column !important;
} }
...@@ -414,6 +440,7 @@ ...@@ -414,6 +440,7 @@
li { li {
width: 100%; width: 100%;
a { a {
// padding-left: 0 !important; // padding-left: 0 !important;
color: $black !important; color: $black !important;
...@@ -424,6 +451,7 @@ ...@@ -424,6 +451,7 @@
} }
} }
} }
.top-nav { .top-nav {
.nav-wrapper { .nav-wrapper {
.nav-right { .nav-right {
...@@ -443,6 +471,7 @@ ...@@ -443,6 +471,7 @@
padding-left: 12px; padding-left: 12px;
// border-radius: 12px; // border-radius: 12px;
} }
ul { ul {
padding-left: 12px; padding-left: 12px;
} }
...@@ -451,7 +480,7 @@ ...@@ -451,7 +480,7 @@
&:hover, &:hover,
&.show { &.show {
> ul { >ul {
display: block; display: block;
} }
} }
......
dev/sass/pages/_about.scss
//TOP-BANNER-SECTION //TOP-BANNER-SECTION
.TOP-BANNER-SECTION {
&.background-dark {
background: #005aff !important;
}
.TOP-BANNER-SECTION,
.PORTFOLIO-TOP-TITLE-SECTION {
.btn-start-project { .btn-start-project {
background-color: #121526; background-color: #121526;
svg {
margin-left: 8px;
transition: all 0.3s ease-in-out;
}
&:hover { &:hover {
color: $primary !important; color: $primary !important;
border-color: $white; border-color: $white;
&::before { &::before {
background-color: $white; background-color: $white;
} }
svg {
path {
fill: $primary;
}
}
} }
} }
}
.TOP-BANNER-SECTION {
&.background-dark {
background: #005aff !important;
}
.left-text-wrapper { .left-text-wrapper {
&::before { &::before {
display: none; display: none;
} }
p { p {
margin: 1.5rem 0 0 0; margin: 1.5rem 0 0 0;
} }
} }
.nav-pills { .nav-pills {
padding: 1.5rem 0; padding: 1.5rem 0;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding: 1.5rem; padding: 1.5rem;
} }
border-top: 1px solid #58595a; border-top: 1px solid #58595a;
border-bottom: 1px solid #58595a; border-bottom: 1px solid #58595a;
margin-bottom: 0 !important; margin-bottom: 0 !important;
li { li {
margin-right: 2.75rem; margin-right: 2.75rem;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
button { button {
padding: 0; padding: 0;
background-color: unset !important; background-color: unset !important;
...@@ -46,17 +72,20 @@ ...@@ -46,17 +72,20 @@
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: 24px;
letter-spacing: -0.4px; letter-spacing: -0.4px;
&.active { &.active {
color: #000000 !important; color: #000000 !important;
} }
} }
} }
} }
//TOP-BANNER-SECTION //TOP-BANNER-SECTION
//ABOUTPAGE //ABOUTPAGE
.ABOUTPAGE-COUTER { .ABOUTPAGE-COUTER {
.card-wrapper { .card-wrapper {
.experience, .experience,
.client, .client,
.experts { .experts {
...@@ -68,21 +97,25 @@ ...@@ -68,21 +97,25 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span { span {
font-weight: 600; font-weight: 600;
font-size: 44px; font-size: 44px;
} }
p { p {
font-weight: 500; font-weight: 500;
} }
} }
} }
} }
//ABOUTPAGE //ABOUTPAGE
//ABOUT-TOP-AFTER-COUNTER-SECTION //ABOUT-TOP-AFTER-COUNTER-SECTION
.ABOUT-TOP-AFTER-COUNTER-SECTION { .ABOUT-TOP-AFTER-COUNTER-SECTION {
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
h1, h1,
h2, h2,
h3, h3,
...@@ -91,9 +124,11 @@ ...@@ -91,9 +124,11 @@
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
.right-image-wrapper { .right-image-wrapper {
.image-wrapper { .image-wrapper {
img { img {
...@@ -105,17 +140,20 @@ ...@@ -105,17 +140,20 @@
} }
} }
} }
.left-text-wrapper { .left-text-wrapper {
span { span {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #005aff; color: #005aff;
} }
.text-wrapper { .text-wrapper {
h2 { h2 {
font-size: 2.75rem; font-size: 2.75rem;
margin-top: 1.25rem; margin-top: 1.25rem;
} }
p { p {
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
...@@ -125,6 +163,7 @@ ...@@ -125,6 +163,7 @@
} }
} }
} }
.right-image-wrapper { .right-image-wrapper {
.image-wrapper { .image-wrapper {
img { img {
...@@ -135,10 +174,12 @@ ...@@ -135,10 +174,12 @@
} }
} }
} }
//ABOUT-TOP-AFTER-COUNTER-SECTION //ABOUT-TOP-AFTER-COUNTER-SECTION
//MISSION-VISION-SECTION //MISSION-VISION-SECTION
.MISSION-VISION-SECTION { .MISSION-VISION-SECTION {
h1, h1,
h2, h2,
h3, h3,
...@@ -148,43 +189,53 @@ ...@@ -148,43 +189,53 @@
font-weight: 600; font-weight: 600;
font-size: 2.5rem; font-size: 2.5rem;
margin-bottom: 5.75rem; margin-bottom: 5.75rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
font-size: 2rem !important; font-size: 2rem !important;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.row { .row {
padding-bottom: 7rem; padding-bottom: 7rem;
&:nth-child(odd) { &:nth-child(odd) {
flex-direction: row-reverse; flex-direction: row-reverse;
.left-text-wrapper { .left-text-wrapper {
.text-wrapper { .text-wrapper {
padding-right: 0; padding-right: 0;
} }
} }
} }
&:nth-last-of-type() { &:nth-last-of-type() {
padding-bottom: 0; padding-bottom: 0;
} }
.left-text-wrapper { .left-text-wrapper {
.text-wrapper { .text-wrapper {
padding-right: 1.25rem; padding-right: 1.25rem;
h2 { h2 {
font-size: 2.75rem; font-size: 2.75rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
p { p {
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 400; font-weight: 400;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
} }
.right-image-wrapper { .right-image-wrapper {
.image-wrapper { .image-wrapper {
img { img {
...@@ -197,6 +248,7 @@ ...@@ -197,6 +248,7 @@
} }
} }
} }
//MISSION-VISION-SECTION //MISSION-VISION-SECTION
//technologies-use-innovating //technologies-use-innovating
......
dev/sass/pages/_responsive.scss
...@@ -375,6 +375,8 @@ ...@@ -375,6 +375,8 @@
} }
.TECHNOLOGY-USED-SECTION { .TECHNOLOGY-USED-SECTION {
padding-bottom: 4rem;
.col-6 { .col-6 {
width: 100%; width: 100%;
} }
......
dev/sass/pages/master-portfolio/_moment-gallery.scss
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
&.horizontal { &:nth-child(3) {
grid-row: span 2; grid-column: span 2;
} }
&:nth-child(n + 4) { &:nth-child(n + 4) {
display: none; display: none;
......
dev/sass/pages/master-portfolio/_sticky-tab.scss
...@@ -24,6 +24,10 @@ ...@@ -24,6 +24,10 @@
} }
} }
} }
&.sticky-with-header {
top: 66px;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -51,5 +55,9 @@ ...@@ -51,5 +55,9 @@
} }
} }
} }
&.sticky-with-header {
top: 88px;
}
} }
} }
dev/sass/pages/resources/_resource-detail.scss
.resource-detail { .resource-detail {
.rd-content { .rd-content {
h2, h2,
h3, h3,
h4, h4,
h5 { h5 {
margin-bottom: 16px; margin-bottom: 16px;
&:not(:first-child) { &:not(:first-child) {
margin-top: 32px; margin-top: 32px;
} }
} }
ul {
span.over-title {
display: block;
margin-top: 32px;
margin-bottom: 8px;
color: $primary;
+h2,
+h3,
+h4,
+h5 {
margin-top: 0;
}
}
ul,
ol {
padding-left: 8px; padding-left: 8px;
li { li {
position: relative; position: relative;
padding-left: 24px; padding-left: 24px;
...@@ -33,6 +52,14 @@ ...@@ -33,6 +52,14 @@
} }
} }
} }
a {
color: $primary;
&:hover {
text-decoration: underline;
}
}
} }
li, li,
...@@ -41,6 +68,7 @@ ...@@ -41,6 +68,7 @@
a { a {
font-size: 1.5rem; font-size: 1.5rem;
} }
strong { strong {
font-weight: 500; font-weight: 500;
} }
...@@ -49,6 +77,7 @@ ...@@ -49,6 +77,7 @@
padding-top: 32px; padding-top: 32px;
margin-top: 40px; margin-top: 40px;
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
.rd-socials { .rd-socials {
margin-top: 20px; margin-top: 20px;
...@@ -56,16 +85,20 @@ ...@@ -56,16 +85,20 @@
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
} }
ul { ul {
gap: 8px; gap: 8px;
li { li {
a { a {
&:hover { &:hover {
svg { svg {
fill: $primary; fill: $primary;
rect { rect {
stroke: $primary; stroke: $primary;
} }
path { path {
fill: #fff; fill: #fff;
} }
...@@ -76,11 +109,16 @@ ...@@ -76,11 +109,16 @@
} }
} }
} }
.faq-wrapper {
margin-top: 2rem;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.resource-detail { .resource-detail {
.rd-content { .rd-content {
h2, h2,
h3, h3,
h4, h4,
...@@ -90,6 +128,11 @@ ...@@ -90,6 +128,11 @@
} }
} }
} }
span.over-title {
margin-top: 48px;
}
li, li,
p, p,
strong, strong,
......
dev/sass/pages/site-comparision/_inner-banner.scss
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
&:hover { &:hover {
background-color: $white !important; background-color: $white !important;
color: $primary !important; color: $primary !important;
svg { svg {
path { path {
stroke: $primary; stroke: $primary;
...@@ -23,6 +24,7 @@ ...@@ -23,6 +24,7 @@
.COMPARISON-FORM .section-title { .COMPARISON-FORM .section-title {
margin-bottom: 24px; margin-bottom: 24px;
} }
// &::before { // &::before {
// content: ""; // content: "";
// width: 18px; // width: 18px;
...@@ -35,6 +37,7 @@ ...@@ -35,6 +37,7 @@
margin-right: 12px; margin-right: 12px;
} }
} }
h1 { h1 {
color: $white; color: $white;
} }
...@@ -47,3 +50,32 @@ ...@@ -47,3 +50,32 @@
} }
} }
} }
.ti-widget-container {
margin-top: 0 !important;
}
.ti-footer {
box-shadow: none !important;
padding: 0 !important;
.ti-fade-container {
.ti-large-logo {
height: unset !important;
}
.ti-logo-fb {
max-width: 70px !important;
height: unset !important;
}
}
}
.TOP-BANNER-SECTION {
.ti-widget.ti-goog .ti-stars .ti-star {
max-width: 12px !important;
height: 12px !important;
}
}
\ No newline at end of file
dev/sass/style.scss
...@@ -8,6 +8,10 @@ $theme-colors: ( ...@@ -8,6 +8,10 @@ $theme-colors: (
"red": #f71d24 "red": #f71d24
); );
:root {
--white: #fff;
}
//colors //colors
// $primary: #121526; // $primary: #121526;
$primary: #005aff; $primary: #005aff;
...@@ -17,6 +21,7 @@ $primary-second: #005aff; ...@@ -17,6 +21,7 @@ $primary-second: #005aff;
$grey: #58595a; $grey: #58595a;
$red: #f71d24; $red: #f71d24;
//fonts //fonts
$body-font: "Sora", sans-serif; $body-font: "Sora", sans-serif;
...@@ -62,3 +67,11 @@ $body-font: "Sora", sans-serif; ...@@ -62,3 +67,11 @@ $body-font: "Sora", sans-serif;
@import "pages/master-portfolio/sticky-tab"; @import "pages/master-portfolio/sticky-tab";
@import "pages/master-portfolio/block-gallery"; @import "pages/master-portfolio/block-gallery";
@import "pages/master-portfolio/moment-gallery"; @import "pages/master-portfolio/moment-gallery";
@import "pages/case-study/case-study-banner";
@import "pages/case-study/case-study-general";
@import "pages/case-study/case-study-list";
@import "pages/case-study/case-study-filter";
@import "pages/milestone";
@import "./base/cta";
@import "./pages/awards/award-listing";
@import "./pages/awards/award-detail";
\ No newline at end of file
footer.php
This source diff could not be displayed because it is too large. You can view the blob instead.
functions.php
...@@ -252,7 +252,9 @@ function my_custom_pagination($numpages = '', $pagerange = '', $paged = '', $sea ...@@ -252,7 +252,9 @@ function my_custom_pagination($numpages = '', $pagerange = '', $paged = '', $sea
register_nav_menus( register_nav_menus(
array( array(
'menu-web' => esc_html__( 'Primary Menu', 'makura' ) 'menu-web' => esc_html__( 'Primary Menu', 'makura' ),
'quick-link' => esc_html__( 'Quick Links', 'makura' ),
'services' => esc_html__( 'Services', 'makura' )
) )
); );
......
header.php
...@@ -59,9 +59,11 @@ ...@@ -59,9 +59,11 @@
<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit">Start class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit">Start
your project your project
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" <path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z" fill="white"></path> d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg> </svg>
<span class="bg-hover" style="left: 108px; top: 62.1562px;"></span> <span class="bg-hover" style="left: 108px; top: 62.1562px;"></span>
</a> </a>
...@@ -69,8 +71,8 @@ ...@@ -69,8 +71,8 @@
</div> </div>
<div class="col-1 menu-toggler"> <div class="col-1 menu-toggler">
<div class="toggler-icon"> <div class="toggler-icon">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="32" width="32" <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="32"
xmlns="http://www.w3.org/2000/svg"> width="32" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path> <path fill="none" d="M0 0h24v24H0z"></path>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg> </svg>
...@@ -79,3 +81,5 @@ ...@@ -79,3 +81,5 @@
</div> </div>
</div> </div>
</nav> </nav>
<div class="header-placeholder"></div>
\ No newline at end of file
includes/enqueuer.php
...@@ -12,7 +12,7 @@ function conserve_register_styles() ...@@ -12,7 +12,7 @@ function conserve_register_styles()
wp_enqueue_style('magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css', null, $theme_version); wp_enqueue_style('magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css', null, $theme_version);
wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css', null, $theme_version); wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css', null, $theme_version);
wp_enqueue_style('flatpicker', 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css', null, $theme_version); wp_enqueue_style('flatpicker', 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css', null, $theme_version);
wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/style.css', null, '6.4.5'); wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/style.css', null, '6.4.7');
......
single-resource.php
...@@ -5,7 +5,7 @@ $post_thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'full'); ...@@ -5,7 +5,7 @@ $post_thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
if (!$post_thumbnail_url) { if (!$post_thumbnail_url) {
$post_thumbnail_url = get_field('resources_fallback_featured_image', 'option'); $post_thumbnail_url = get_field('resources_fallback_featured_image', 'option');
} }
$downloadable_resource = get_field('downloadable_resource', $post_id) ?: []; $downloadable_resource = get_field('downloadable_resource') ?: [];
if (isset($downloadable_resource) && is_array($downloadable_resource) && !empty($downloadable_resource)): if (isset($downloadable_resource) && is_array($downloadable_resource) && !empty($downloadable_resource)):
$enable_downloadable_resources = $downloadable_resource['enable_downloadable_resources']; $enable_downloadable_resources = $downloadable_resource['enable_downloadable_resources'];
if ($enable_downloadable_resources && isset($enable_downloadable_resources)): if ($enable_downloadable_resources && isset($enable_downloadable_resources)):
...@@ -44,7 +44,7 @@ endif; ...@@ -44,7 +44,7 @@ endif;
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo site_url('/'); ?>">Home</a></li> <li class="breadcrumb-item"><a href="<?php echo site_url('/'); ?>">Home</a></li>
<li class="breadcrumb-item"><a <li class="breadcrumb-item"><a
href="<?php echo get_permalink(get_page_by_path('downloadable-resources')); ?>">Downloadable href="<?php echo get_permalink(get_page_by_path('resources')); ?>">
Resources</a></li> Resources</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title(); ?></li> <li class="breadcrumb-item active" aria-current="page"><?php the_title(); ?></li>
</ol> </ol>
...@@ -59,12 +59,17 @@ endif; ...@@ -59,12 +59,17 @@ endif;
<div class="col-lg-6 col-12"> <div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper"> <div class="position-relative left-text-wrapper">
<h1><?php echo get_the_title(); ?></h1> <h1><?php echo get_the_title(); ?></h1>
<p><?php echo wp_trim_words(get_the_excerpt(), 8, ' [...]') ?: wp_trim_words(get_the_content(), 8, ' [...]'); ?> <p><?php echo get_the_excerpt() ?: wp_trim_words(get_the_content(), 8, ' [...]'); ?>
</p> </p>
<a href="<?php echo esc_url($url); ?>" target="_blank" <a href="<?php echo esc_url($url); ?>" target="_blank"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit" class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit"
download>Download download>Download
Now [<?php echo $icon; ?>]</a> Now [<?php echo $icon; ?>]<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg></a>
</div> </div>
</div> </div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image"> <div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
...@@ -87,7 +92,7 @@ endif; ...@@ -87,7 +92,7 @@ endif;
<?php echo the_content(); ?> <?php echo the_content(); ?>
<!-- faqs --> <!-- faqs -->
<?php if (get_field('enable_section')): ?> <?php if (get_field('enable_section')): ?>
<span><?php the_field('subtitle'); ?></span> <span class="over-title"><?php the_field('subtitle'); ?></span>
<h3><?php the_field('title'); ?></h3> <h3><?php the_field('title'); ?></h3>
<?php the_field('description'); ?> <?php the_field('description'); ?>
<?php $faqs = get_field('faqs'); <?php $faqs = get_field('faqs');
......
single-service.php
...@@ -11,7 +11,8 @@ get_header(); ...@@ -11,7 +11,8 @@ get_header();
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo site_url('/');?>">Home</a></li> <li class="breadcrumb-item"><a href="<?php echo site_url('/');?>">Home</a></li>
<li class="breadcrumb-item"><a href="<?php echo get_permalink(get_page_by_path('services'));?>">Services</a></li> <li class="breadcrumb-item"><a
href="<?php echo get_permalink(get_page_by_path('services'));?>">Services</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title();?></li> <li class="breadcrumb-item active" aria-current="page"><?php the_title();?></li>
</ol> </ol>
</nav> </nav>
...@@ -27,7 +28,14 @@ get_header(); ...@@ -27,7 +28,14 @@ get_header();
<p><?php the_field('banner_description');?></p> <p><?php the_field('banner_description');?></p>
<?php if(get_field('enable_inquiry')):?> <?php if(get_field('enable_inquiry')):?>
<div class="d-flex w-100 button-wrapper"> <div class="d-flex w-100 button-wrapper">
<button class="btn mb-20 btn-start-project btn-primary"><a href="<?php echo get_home_url().'/contact-us/';?>"><?php the_field('inquiry_text');?></a></button> <a class="btn mb-20 btn-start-project btn-primary"
href="<?php echo get_home_url().'/contact-us/';?>"><?php the_field('inquiry_text');?><svg
width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg>
</a>
</div> </div>
<?php endif;?> <?php endif;?>
</div> </div>
......
style.css
/* /*
Theme Name: Makura Theme Theme Name: Makura Theme
Text Domain: makura-theme Text Domain: makura-theme
Version: 1.2 Version: 1.2025.07
Description: Custom theme for Makura Description: Custom theme for Makura
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
......
template-parts/home/milestone.php 0 → 100644
<section class="milestone makura-new">
<div class="container">
<div class="section-title">
<h2>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/milestone-title.svg?>" alt="">
Recognition & Milestones
</h2>
<p>Our work has been recognized for pushing creative boundaries and delivering real impact. These milestones
reflect our passion for design and the trust our clients place in us.</p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="milestone-card">
<div class="milestone-card-content">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/milestone.svg" alt=""
class="img-fluid milestone-logo">
<span class="over-title">24 october 2023</span>
<h3>Recognition from World Health Organization</h3>
<p>Proud moments that highlight our dedication to impactful and innovative design.Breathing new
life, Makura Creations changed the overall look of CAN. Boosting their social media presence
and
updating their </p>
<a href="#">Learn More →</a>
</div>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/blog-banner.png" alt=""
class="img-fluid ">
</div>
</div>
<div class="col-lg-6">
<div class="milestone-card">
<div class="milestone-card-content">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/milestone.svg" alt=""
class="img-fluid milestone-logo">
<span class="over-title">24 october 2023</span>
<h3>Recognition from World Health Organization</h3>
<p>Proud moments that highlight our dedication to impactful and innovative design.Breathing new
life, Makura Creations changed the overall look of CAN. Boosting their social media presence
and
updating their </p>
<a href="#">Learn More →</a>
</div>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/blog-banner.png" alt=""
class="img-fluid">
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment