166 lines
5.7 KiB
PHP
166 lines
5.7 KiB
PHP
<?php
|
|
/**
|
|
* Plugin Name: Coco Beauty Bar Custom Styles
|
|
* Description: Custom CSS for the luxury feminine aesthetic.
|
|
*/
|
|
|
|
add_action('wp_head', function() {
|
|
?>
|
|
<style>
|
|
:root {
|
|
--coco-beige: #F5F5DC;
|
|
--coco-pink: #FFD1DC;
|
|
--coco-gold: #D4AF37;
|
|
--coco-white: #FFFFFF;
|
|
--coco-text: #4A4A4A;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--coco-beige);
|
|
color: var(--coco-text);
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: 'Playfair Display', serif;
|
|
color: var(--coco-text);
|
|
}
|
|
|
|
.wp-block-button__link {
|
|
border-radius: 25px !important;
|
|
background-color: var(--coco-pink) !important;
|
|
color: var(--coco-text) !important;
|
|
border: none !important;
|
|
padding: 12px 30px !important;
|
|
font-weight: 600;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.wp-block-button__link:hover {
|
|
transform: scale(1.05);
|
|
background-color: var(--coco-gold) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.coco-hero {
|
|
position: relative;
|
|
padding: 150px 20px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
background: var(--coco-beige);
|
|
}
|
|
|
|
.coco-hero video {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 0;
|
|
opacity: 0.4;
|
|
filter: blur(2px);
|
|
}
|
|
|
|
.coco-hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.coco-section {
|
|
padding: 80px 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: all 0.8s ease-out;
|
|
}
|
|
|
|
.coco-section.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.coco-card {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
|
text-align: center;
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.coco-card:hover {
|
|
transform: translateY(-10px) scale(1.02);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.whatsapp-float {
|
|
position: fixed;
|
|
bottom: 40px;
|
|
right: 40px;
|
|
background-color: #25d366;
|
|
color: white;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50px;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
box-shadow: 2px 2px 3px #999;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.booking-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background: white;
|
|
padding: 15px;
|
|
text-align: center;
|
|
box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
|
|
z-index: 99;
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.booking-bar { display: block; }
|
|
}
|
|
</style>
|
|
<!-- Add Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
|
|
<?php
|
|
});
|
|
|
|
add_action('wp_footer', function() {
|
|
?>
|
|
<a href="https://wa.me/212000000000?text=Hello%20%F0%9F%92%96%20Welcome%20to%20Coco%20Beauty%20Bar!%20How%20can%20we%20help%20you%20today?" class="whatsapp-float" target="_blank">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
|
|
</svg>
|
|
</a>
|
|
<div class="booking-bar">
|
|
<a href="/contact" class="wp-block-button__link"><?php echo coco_i18n()->t('book_now'); ?></a>
|
|
</div>
|
|
<script>
|
|
// Intersection Observer for scroll animations
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
document.querySelectorAll('.coco-section').forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
</script>
|
|
<?php
|
|
});
|