initial commit
@@ -0,0 +1,80 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||||
|
<title>Campus Map - SSBC Main</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="keywords" content="">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<!--<link href="assets/img/favicon.png" rel="icon">
|
||||||
|
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">-->
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<link href="https://fonts.googleapis.com" rel="preconnect">
|
||||||
|
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Vendor CSS Files -->
|
||||||
|
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||||
|
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Main CSS File -->
|
||||||
|
<link href="assets/css/main.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="campus-map-page">
|
||||||
|
|
||||||
|
<?php include 'header.php'; ?>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
|
||||||
|
<!-- Page Title -->
|
||||||
|
<div class="page-title dark-background" data-aos="fade" style="background-image: url(assets/img/bg/bg-2.webp);">
|
||||||
|
<div class="container position-relative">
|
||||||
|
<h1>CAMPUS MAP</h1>
|
||||||
|
|
||||||
|
<nav class="breadcrumbs">
|
||||||
|
<ol>
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li class="current">Campus Map</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div><!-- End Page Title -->
|
||||||
|
|
||||||
|
<!-- Starter Section Section -->
|
||||||
|
<section id="starter-section" class="starter-section section light-background">
|
||||||
|
|
||||||
|
<div class="container" data-aos="fade-up">
|
||||||
|
<p>Use this page as a starter for your own custom pages.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section><!-- /Starter Section Section -->
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php include 'footer.php'; ?>
|
||||||
|
|
||||||
|
<!-- Scroll Top -->
|
||||||
|
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
||||||
|
|
||||||
|
<!-- Preloader -->
|
||||||
|
<div id="preloader"></div>
|
||||||
|
|
||||||
|
<!-- Vendor JS Files -->
|
||||||
|
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="assets/vendor/php-email-form/validate.js"></script>
|
||||||
|
<script src="assets/vendor/aos/aos.js"></script>
|
||||||
|
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
|
||||||
|
|
||||||
|
<!-- Main JS File -->
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
Project: SSBC Main
|
||||||
|
Exported on: 2026-06-15 19:08 with Bootstrap v5.3.8
|
||||||
|
Generated Using BootstrapMade Builder
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||||
|
<title>About - SSBC Main</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="keywords" content="">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<!--<link href="assets/img/favicon.png" rel="icon">
|
||||||
|
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">-->
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<link href="https://fonts.googleapis.com" rel="preconnect">
|
||||||
|
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Vendor CSS Files -->
|
||||||
|
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||||
|
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Main CSS File -->
|
||||||
|
<link href="assets/css/main.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="about-page">
|
||||||
|
|
||||||
|
<?php include 'header.php'; ?>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
|
||||||
|
<!-- Page Title -->
|
||||||
|
<div class="page-title dark-background position-relative" data-aos="fade" style="background-image: url(assets/img/tabernacle_choir.webp);">
|
||||||
|
<div class="container position-relative">
|
||||||
|
<h1>WELCOME HOME</h1>
|
||||||
|
</div>
|
||||||
|
</div><!-- End Page Title -->
|
||||||
|
|
||||||
|
<!-- About 2 Section -->
|
||||||
|
<section id="about-2" class="about-2 section light-background">
|
||||||
|
|
||||||
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||||||
|
|
||||||
|
<div class="row gy-5 align-items-center mb-5">
|
||||||
|
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
|
||||||
|
<div class="intro-block">
|
||||||
|
<h2>Welcome to Southside</h2>
|
||||||
|
<p class="desc-primary">Welcome to our church! We are a community of believers committed to loving God, serving others, and sharing the hope found in Jesus Christ. Whether you're visiting for the first time, searching for a church home, or simply exploring your faith, we are glad you're here. We invite you to join us for worship, fellowship, and spiritual growth as we seek to follow Christ together.
|
||||||
|
</p>
|
||||||
|
<div class="action-group">
|
||||||
|
<a href="about.html" class="btn-primary-action">First Time Visitor Card</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="150">
|
||||||
|
<div class="image-card">
|
||||||
|
<img src="assets/img/real-estate/property-exterior-3.webp" alt="Modern Property" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section><!-- /About 2 Section -->
|
||||||
|
|
||||||
|
<!-- Faq Section -->
|
||||||
|
<section id="faq" class="faq section">
|
||||||
|
|
||||||
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||||||
|
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
|
||||||
|
<div class="faq-item" data-aos="fade-up" data-aos-delay="100">
|
||||||
|
<h3>What can I expect when I get to church?</h3>
|
||||||
|
<div class="faq-content">
|
||||||
|
<p>JESUS JSEUS JESUS</p>
|
||||||
|
</div>
|
||||||
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
||||||
|
</div><!-- End FAQ Item -->
|
||||||
|
|
||||||
|
<div class="faq-item" data-aos="fade-up" data-aos-delay="200">
|
||||||
|
<h3>When shoudl I arrive?</h3>
|
||||||
|
<div class="faq-content">
|
||||||
|
<p>Early</p>
|
||||||
|
</div>
|
||||||
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
||||||
|
</div><!-- End FAQ Item -->
|
||||||
|
|
||||||
|
<div class="faq-item" data-aos="fade-up" data-aos-delay="300">
|
||||||
|
<h3>Let us know you are coming!</h3>
|
||||||
|
<div class="faq-content">
|
||||||
|
<p>If you plan on attending, you can call and let us know you are coming! The Church Office is open Monday through Thursday from 9:00 AM to 3:00 PM. If you call ahead, we can save you a seat and make sure to meet you at the door when you arrive! Call the church office at (386) 328-0764</p>
|
||||||
|
</div>
|
||||||
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
||||||
|
</div><!-- End FAQ Item -->
|
||||||
|
|
||||||
|
<div class="faq-item" data-aos="fade-up" data-aos-delay="400">
|
||||||
|
<h3>Praying About Church Membership?</h3>
|
||||||
|
<div class="faq-content">
|
||||||
|
<p>Find out what it means to be a member of Southside Baptist Church and join one of our New Members Classes</p>
|
||||||
|
</div>
|
||||||
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
||||||
|
</div><!-- End FAQ Item -->
|
||||||
|
|
||||||
|
<div class="faq-item" data-aos="fade-up" data-aos-delay="500">
|
||||||
|
<h3>What warranty do you offer on completed work?</h3>
|
||||||
|
<div class="faq-content">
|
||||||
|
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. We provide comprehensive warranties on all workmanship and materials used in every project.</p>
|
||||||
|
</div>
|
||||||
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
||||||
|
</div><!-- End FAQ Item -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section><!-- /Faq Section -->
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php include 'footer.php'; ?>
|
||||||
|
|
||||||
|
<!-- Scroll Top -->
|
||||||
|
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
||||||
|
|
||||||
|
<!-- Preloader -->
|
||||||
|
<div id="preloader"></div>
|
||||||
|
|
||||||
|
<!-- Vendor JS Files -->
|
||||||
|
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="assets/vendor/php-email-form/validate.js"></script>
|
||||||
|
<script src="assets/vendor/aos/aos.js"></script>
|
||||||
|
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
|
||||||
|
|
||||||
|
<!-- Main JS File -->
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 278 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 2.9 MiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 776 KiB |
|
After Width: | Height: | Size: 2.1 MiB |
@@ -0,0 +1,153 @@
|
|||||||
|
(function() {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply .scrolled class to the body as the page is scrolled down
|
||||||
|
*/
|
||||||
|
function toggleScrolled() {
|
||||||
|
const selectBody = document.querySelector('body');
|
||||||
|
const selectHeader = document.querySelector('#header');
|
||||||
|
if (!selectHeader.classList.contains('scroll-up-sticky') && !selectHeader.classList.contains('sticky-top') && !selectHeader.classList.contains('fixed-top')) return;
|
||||||
|
window.scrollY > 100 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('scroll', toggleScrolled);
|
||||||
|
window.addEventListener('load', toggleScrolled);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mobile nav toggle
|
||||||
|
*/
|
||||||
|
const mobileNavToggleBtn = document.querySelector('.mobile-nav-toggle');
|
||||||
|
|
||||||
|
function mobileNavToogle() {
|
||||||
|
document.querySelector('body').classList.toggle('mobile-nav-active');
|
||||||
|
mobileNavToggleBtn.classList.toggle('bi-list');
|
||||||
|
mobileNavToggleBtn.classList.toggle('bi-x');
|
||||||
|
}
|
||||||
|
if (mobileNavToggleBtn) {
|
||||||
|
mobileNavToggleBtn.addEventListener('click', mobileNavToogle);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide mobile nav on same-page/hash links
|
||||||
|
*/
|
||||||
|
document.querySelectorAll('#navmenu a').forEach(navmenu => {
|
||||||
|
navmenu.addEventListener('click', () => {
|
||||||
|
if (document.querySelector('.mobile-nav-active') && !navmenu.classList.contains('toggle-dropdown')) {
|
||||||
|
mobileNavToogle();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle mobile nav dropdowns
|
||||||
|
*/
|
||||||
|
document.querySelectorAll('.navmenu .toggle-dropdown').forEach(navmenu => {
|
||||||
|
navmenu.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.parentNode.classList.toggle('active');
|
||||||
|
this.parentNode.nextElementSibling.classList.toggle('dropdown-active');
|
||||||
|
e.stopImmediatePropagation();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Preloader
|
||||||
|
*/
|
||||||
|
const preloader = document.querySelector('#preloader');
|
||||||
|
if (preloader) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
preloader.remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll top button
|
||||||
|
*/
|
||||||
|
let scrollTop = document.querySelector('.scroll-top');
|
||||||
|
|
||||||
|
function toggleScrollTop() {
|
||||||
|
if (scrollTop) {
|
||||||
|
window.scrollY > 100 ? scrollTop.classList.add('active') : scrollTop.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
scrollTop.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('load', toggleScrollTop);
|
||||||
|
document.addEventListener('scroll', toggleScrollTop);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Animation on scroll function and init
|
||||||
|
*/
|
||||||
|
function aosInit() {
|
||||||
|
AOS.init({
|
||||||
|
duration: 600,
|
||||||
|
easing: 'ease-in-out',
|
||||||
|
once: true,
|
||||||
|
mirror: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
window.addEventListener('load', aosInit);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initiate Pure Counter
|
||||||
|
*/
|
||||||
|
new PureCounter();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Frequently Asked Questions Toggle
|
||||||
|
*/
|
||||||
|
document.querySelectorAll('.faq-item h3, .faq-item .faq-toggle, .faq-item .faq-header').forEach((faqItem) => {
|
||||||
|
faqItem.addEventListener('click', () => {
|
||||||
|
faqItem.parentNode.classList.toggle('faq-active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct scrolling position upon page load for URLs containing hash links.
|
||||||
|
*/
|
||||||
|
window.addEventListener('load', function(e) {
|
||||||
|
if (window.location.hash) {
|
||||||
|
if (document.querySelector(window.location.hash)) {
|
||||||
|
setTimeout(() => {
|
||||||
|
let section = document.querySelector(window.location.hash);
|
||||||
|
let scrollMarginTop = getComputedStyle(section).scrollMarginTop;
|
||||||
|
window.scrollTo({
|
||||||
|
top: section.offsetTop - parseInt(scrollMarginTop),
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Navmenu Scrollspy
|
||||||
|
*/
|
||||||
|
let navmenulinks = document.querySelectorAll('.navmenu a');
|
||||||
|
|
||||||
|
function navmenuScrollspy() {
|
||||||
|
navmenulinks.forEach(navmenulink => {
|
||||||
|
if (!navmenulink.hash) return;
|
||||||
|
let section = document.querySelector(navmenulink.hash);
|
||||||
|
if (!section) return;
|
||||||
|
let position = window.scrollY + 200;
|
||||||
|
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
|
||||||
|
document.querySelectorAll('.navmenu a.active').forEach(link => link.classList.remove('active'));
|
||||||
|
navmenulink.classList.add('active');
|
||||||
|
} else {
|
||||||
|
navmenulink.classList.remove('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
window.addEventListener('load', navmenuScrollspy);
|
||||||
|
document.addEventListener('scroll', navmenuScrollspy);
|
||||||
|
|
||||||
|
})();
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Global Sections
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
section,
|
||||||
|
.section {
|
||||||
|
color: var(--default-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
padding: 60px 0;
|
||||||
|
scroll-margin-top: 133px;
|
||||||
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
|
||||||
|
section,
|
||||||
|
.section {
|
||||||
|
scroll-margin-top: 73px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Global Section Titles
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.section-title {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--heading-color);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 40px;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 25%);
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@import './sections/_hero.scss';
|
||||||
|
@import './sections/_events.scss';
|
||||||
|
@import './sections/_contact.scss';
|
||||||
|
@import './sections/_about-2.scss';
|
||||||
|
@import './sections/_faq.scss';
|
||||||
|
@import './sections/_about-me.scss';
|
||||||
|
@import './sections/_team.scss';
|
||||||
|
@import './sections/_about-3.scss';
|
||||||
|
@import './sections/_ministries.scss';
|
||||||
|
@import './sections/_events-3.scss';
|
||||||
|
@import './sections/_starter-section.scss';
|
||||||
|
@import './sections/_book-excerpt.scss';
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
// main: main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Font & Color Variables
|
||||||
|
# Help: https://bootstrapmade.com/color-system/
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
|
/* Fonts */
|
||||||
|
:root {
|
||||||
|
--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--heading-font: "Lato", sans-serif;
|
||||||
|
--nav-font: "Montserrat", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
|
||||||
|
:root {
|
||||||
|
--background-color: #f3f6f4; /* Background color for the entire website, including individual sections */
|
||||||
|
--default-color: #ffffff; /* Default color used for the majority of the text content across the entire website */
|
||||||
|
--heading-color: #000000; /* Color for headings, subheadings and title throughout the website */
|
||||||
|
--accent-color: #cc0000; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
|
||||||
|
--surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
|
||||||
|
--contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
|
||||||
|
:root {
|
||||||
|
--nav-color: #ffffff; /* The default color of the main navmenu links */
|
||||||
|
--nav-hover-color: #990000; /* Applied to main navmenu links when they are hovered over or active */
|
||||||
|
--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
|
||||||
|
--nav-dropdown-background-color: #5b5b5b; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
|
||||||
|
--nav-dropdown-color: #ffffff; /* Used for navigation links of the dropdown items in the navigation menu. */
|
||||||
|
--nav-dropdown-hover-color: #ffffff; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
|
||||||
|
|
||||||
|
.light-background {
|
||||||
|
--background-color: #ffffff;
|
||||||
|
--default-color: #000000;
|
||||||
|
--heading-color: #444444;
|
||||||
|
--surface-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-background {
|
||||||
|
--background-color: #000000;
|
||||||
|
--default-color: #ffffff;
|
||||||
|
--heading-color: #ffffff;
|
||||||
|
--accent-color: #cc0000;
|
||||||
|
--surface-color: #252626;
|
||||||
|
--contrast-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-preset {
|
||||||
|
--background-color: #f3f6f4;
|
||||||
|
--default-color: #ffffff;
|
||||||
|
--heading-color: #000000;
|
||||||
|
--accent-color: #cc0000;
|
||||||
|
--surface-color: #ffffff;
|
||||||
|
--contrast-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth scroll */
|
||||||
|
:root {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Disable aos animation delay on mobile devices
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
[data-aos-delay] {
|
||||||
|
transition-delay: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,144 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Global Footer
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.footer {
|
||||||
|
--background-color: #110a06;
|
||||||
|
--default-color: #ffffff;
|
||||||
|
--heading-color: #ffffff;
|
||||||
|
--accent-color: #cc0000;
|
||||||
|
--surface-color: #121212;
|
||||||
|
--contrast-color: #000000;
|
||||||
|
color: var(--default-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
font-size: 14px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.footer-top {
|
||||||
|
background-color: color-mix(in srgb, var(--background-color), white 5%);
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-about {
|
||||||
|
.logo {
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 40px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: var(--heading-color);
|
||||||
|
font-family: var(--heading-font);
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: var(--heading-font);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--accent-color);
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
i {
|
||||||
|
padding-right: 2px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 10px 0;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 30%);
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact {
|
||||||
|
p {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
padding: 30px 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.credits {
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
a {
|
||||||
|
font-size: 18px;
|
||||||
|
display: inline-block;
|
||||||
|
background: color-mix(in srgb, var(--default-color), transparent 92%);
|
||||||
|
color: var(--accent-color);
|
||||||
|
line-height: 1;
|
||||||
|
padding: 8px 0;
|
||||||
|
margin-right: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
transition: 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--contrast-color);
|
||||||
|
background: var(--accent-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# General Styling & Shared Classes
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
body {
|
||||||
|
color: var(--default-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
font-family: var(--default-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: color-mix(in srgb, var(--accent-color), transparent 25%);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: var(--heading-color);
|
||||||
|
font-family: var(--heading-font);
|
||||||
|
}
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Global Header
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.header {
|
||||||
|
--background-color: rgba(255, 255, 255, 0);
|
||||||
|
--default-color: #ffffff;
|
||||||
|
--heading-color: #ffffff;
|
||||||
|
color: var(--default-color);
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 28px 0;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
z-index: 997;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
.container-xl {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 18px;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
line-height: 1;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 110px;
|
||||||
|
width: auto;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrolled & {
|
||||||
|
background-color: rgba(0, 0, 0, 0.88);
|
||||||
|
padding: 10px 0;
|
||||||
|
box-shadow: 0px 0 18px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
.container-xl {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
opacity: 0.75;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global Header on Scroll
|
||||||
|
------------------------------*/
|
||||||
|
.scrolled .header {
|
||||||
|
--background-color: #1a1715;
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Global Page Titles & Breadcrumbs
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.page-title {
|
||||||
|
color: var(--default-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding: 200px 0 80px 0;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
background-color: color-mix(in srgb, var(--background-color), transparent 20%);
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 42px;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs {
|
||||||
|
ol {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
list-style: none;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
li+li {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li+li::before {
|
||||||
|
content: "/";
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 10px;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Preloader
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
#preloader {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 999999;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--background-color);
|
||||||
|
transition: all 0.6s ease-out;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
top: calc(50% - 30px);
|
||||||
|
left: calc(50% - 30px);
|
||||||
|
border: 6px solid #ffffff;
|
||||||
|
border-color: var(--accent-color) transparent var(--accent-color) transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
animation: animate-preloader 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animate-preloader {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Scroll Top Button
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.scroll-top {
|
||||||
|
position: fixed;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
right: 15px;
|
||||||
|
bottom: 15px;
|
||||||
|
z-index: 99999;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.4s;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 24px;
|
||||||
|
color: var(--contrast-color);
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
|
||||||
|
color: var(--contrast-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
// out: ../css/main.css
|
||||||
|
// You can use the "Easy Compile" VS Code extension to easily compile the scss files https://marketplace.visualstudio.com/items?itemName=refgd.easy-compile
|
||||||
|
|
||||||
|
@import './_variables.scss';
|
||||||
|
|
||||||
|
@import './layouts/_general.scss';
|
||||||
|
@import './layouts/_header.scss';
|
||||||
|
@import './layouts/_navmenu.scss';
|
||||||
|
@import './layouts/_footer.scss';
|
||||||
|
@import './layouts/_preloader.scss';
|
||||||
|
@import './layouts/_scrolltop.scss';
|
||||||
|
@import './layouts/_aos.scss';
|
||||||
|
@import './layouts/_page-titles.scss';
|
||||||
|
@import './_sections.scss';
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# About 2 Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.about-2 {
|
||||||
|
padding-top: 60px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
|
||||||
|
.intro-block {
|
||||||
|
.label-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 2px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 90%);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
color: var(--heading-color);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-primary {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 15%);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-secondary {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 35%);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 24px;
|
||||||
|
background: var(--accent-color);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: color-mix(in srgb, var(--heading-color), transparent 10%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 24px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--heading-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--surface-color);
|
||||||
|
border-color: color-mix(in srgb, var(--default-color), transparent 50%);
|
||||||
|
color: var(--heading-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-card {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
|
||||||
|
box-shadow: 0 4px 6px color-mix(in srgb, var(--default-color), transparent 93%);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 420px;
|
||||||
|
object-fit: cover;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.years-tag {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
left: 16px;
|
||||||
|
background: var(--surface-color);
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color), transparent 85%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.tag-number {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent-color);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 30%);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-strip {
|
||||||
|
background: var(--surface-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 32px;
|
||||||
|
margin: 48px 0;
|
||||||
|
box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 92%);
|
||||||
|
|
||||||
|
.stat-block {
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 16px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--heading-color);
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.col-lg-3:not(:last-child) .stat-block {
|
||||||
|
border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-card {
|
||||||
|
background: var(--surface-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px 32px;
|
||||||
|
margin-bottom: 64px;
|
||||||
|
box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 92%);
|
||||||
|
|
||||||
|
.quote-avatar {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: italic;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 20%);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-author {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 13px;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "\2022";
|
||||||
|
margin-right: 8px;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 70%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestones-section {
|
||||||
|
margin-bottom: 64px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--heading-color);
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestones-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 35%);
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestone-list {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 32px;
|
||||||
|
border-left: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestone-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
padding-bottom: 32px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestone-marker {
|
||||||
|
position: absolute;
|
||||||
|
left: -44px;
|
||||||
|
top: 0;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent-color);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
left: -36px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--contrast-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestone-body {
|
||||||
|
background: var(--surface-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px 24px;
|
||||||
|
flex: 1;
|
||||||
|
box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 92%);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: color-mix(in srgb, var(--default-color), transparent 80%);
|
||||||
|
box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color), transparent 90%);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--heading-color);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: attr(data-year);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 35%);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestone-item:nth-child(1) .milestone-body h4::after {
|
||||||
|
content: "2012";
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--accent-color);
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 90%);
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestone-item:nth-child(2) .milestone-body h4::after {
|
||||||
|
content: "2016";
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--accent-color);
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 90%);
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestone-item:nth-child(3) .milestone-body h4::after {
|
||||||
|
content: "2021";
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--accent-color);
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 90%);
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.milestone-item:nth-child(4) .milestone-body h4::after {
|
||||||
|
content: "2025";
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--accent-color);
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 90%);
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leadership-section {
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--heading-color);
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leadership-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 35%);
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leader-card {
|
||||||
|
background: var(--surface-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 92%);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: color-mix(in srgb, var(--default-color), transparent 80%);
|
||||||
|
box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color), transparent 90%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leader-avatar {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0 auto 16px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leader-details {
|
||||||
|
h5 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--heading-color);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leader-role {
|
||||||
|
font-size: 13px;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-view-team {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 10px 24px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--heading-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 14px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--surface-color);
|
||||||
|
border-color: color-mix(in srgb, var(--default-color), transparent 50%);
|
||||||
|
color: var(--heading-color);
|
||||||
|
|
||||||
|
i {
|
||||||
|
transform: translateX(3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,272 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# About 3 Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.about-3 {
|
||||||
|
.content-wrapper {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.section-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 92%);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 85%);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 20%);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills-wrapper {
|
||||||
|
.skill-item {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
|
||||||
|
.skill-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.skill-name {
|
||||||
|
color: var(--heading-color);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-percentage {
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-wrapper {
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 92%);
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--accent-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: width 1.5s ease-in-out;
|
||||||
|
|
||||||
|
&[data-width="92"] {
|
||||||
|
width: 92%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-width="88"] {
|
||||||
|
width: 88%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-width="95"] {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-wrapper {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 60px;
|
||||||
|
padding-left: 30px;
|
||||||
|
margin: 40px 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 2px;
|
||||||
|
background: linear-gradient(to bottom,
|
||||||
|
transparent,
|
||||||
|
var(--accent-color) 10%,
|
||||||
|
var(--accent-color) 90%,
|
||||||
|
transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.timeline-marker {
|
||||||
|
background: var(--accent-color);
|
||||||
|
transform: scale(1.1);
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: var(--contrast-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-marker {
|
||||||
|
position: absolute;
|
||||||
|
left: -18px;
|
||||||
|
top: 0;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 90%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-size: 16px;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: var(--heading-color);
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 20%);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-card {
|
||||||
|
background: var(--surface-color);
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 15px;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(45deg,
|
||||||
|
transparent,
|
||||||
|
color-mix(in srgb, var(--accent-color), transparent 97%),
|
||||||
|
transparent);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 90%);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
background: var(--accent-color);
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: var(--contrast-color);
|
||||||
|
transform: rotateY(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 90%);
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 28px;
|
||||||
|
color: var(--accent-color);
|
||||||
|
transition: all 0.6s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--heading-color);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 20%);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991.98px) {
|
||||||
|
.content-wrapper {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767.98px) {
|
||||||
|
.content-wrapper h3 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-wrapper {
|
||||||
|
padding-left: 40px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# About Me Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.about-me {
|
||||||
|
padding-top: 556px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
|
||||||
|
.about-image {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
img {
|
||||||
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content {
|
||||||
|
padding-left: 2rem;
|
||||||
|
|
||||||
|
@media (max-width: 991.98px) {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.personal-info {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--heading-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.signature {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
|
||||||
|
.signature-image {
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signature-info {
|
||||||
|
h4 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,177 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Book Excerpt Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.book-excerpt {
|
||||||
|
padding: 80px 0;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.book-excerpt-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-page-design {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
padding: 50px 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 40px 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 5px;
|
||||||
|
background: linear-gradient(90deg,
|
||||||
|
var(--accent-color) 0%,
|
||||||
|
color-mix(in srgb, var(--accent-color), transparent 20%) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-number {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||||
|
font-family: var(--heading-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-title {
|
||||||
|
text-align: center;
|
||||||
|
font-family: var(--heading-font);
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--heading-color);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 60px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: color-mix(in srgb, var(--accent-color), transparent 30%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.excerpt-content {
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--default-color);
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-letter {
|
||||||
|
&:first-letter {
|
||||||
|
font-size: 3.5em;
|
||||||
|
float: left;
|
||||||
|
line-height: 0.8;
|
||||||
|
margin-right: 10px;
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-family: var(--heading-font);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialogue {
|
||||||
|
padding-left: 20px;
|
||||||
|
border-left: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-decoration {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '✦';
|
||||||
|
font-size: 18px;
|
||||||
|
color: color-mix(in srgb, var(--accent-color), transparent 30%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-wrapper {
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
.btn-read-more {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
color: var(--accent-color);
|
||||||
|
padding: 12px 28px;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
i {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: var(--contrast-color);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
|
||||||
|
i {
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.section-header {
|
||||||
|
h2 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 60px 0;
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-page-design {
|
||||||
|
.chapter-title {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excerpt-content {
|
||||||
|
.first-letter {
|
||||||
|
&:first-letter {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Contact Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.contact {
|
||||||
|
background: var(--surface-color);
|
||||||
|
color: #fff;
|
||||||
|
padding: 80px 0;
|
||||||
|
|
||||||
|
.contact-logo-wrap {
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-logo {
|
||||||
|
max-width: 620px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-address {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-times {
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 17px;
|
||||||
|
color: rgba(255, 255, 255, .85);
|
||||||
|
margin: 0 0 28px;
|
||||||
|
line-height: 1.7;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
padding: 60px 0;
|
||||||
|
|
||||||
|
.contact-address {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-times h6 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-times p {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,509 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Events 3 Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.events-3 {
|
||||||
|
.event-intro {
|
||||||
|
padding: 2rem 0;
|
||||||
|
|
||||||
|
.event-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: var(--contrast-color);
|
||||||
|
padding: 0.45rem 1.2rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.8px;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 3.2rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
line-height: 1.15;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
border-left: 5px solid var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 30%);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
max-width: 540px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
.meta-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 20%);
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-cta-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.7rem;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: var(--contrast-color);
|
||||||
|
padding: 0.9rem 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: color-mix(in srgb, var(--accent-color), #000 15%);
|
||||||
|
color: var(--contrast-color);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 10px 25px color-mix(in srgb, var(--accent-color), transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover i {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-hero-img {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 20px 50px color-mix(in srgb, var(--default-color), transparent 85%);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
min-height: 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-label {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 20px;
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
color: var(--accent-color);
|
||||||
|
padding: 0.6rem 1.2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
box-shadow: 0 8px 20px color-mix(in srgb, var(--default-color), transparent 80%);
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-cards {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
|
||||||
|
.highlight-card {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 10px 40px color-mix(in srgb, var(--default-color), transparent 90%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 15px 50px color-mix(in srgb, var(--default-color), transparent 82%);
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-img {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 280px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-tag {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: var(--contrast-color);
|
||||||
|
padding: 0.4rem 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .highlight-img img {
|
||||||
|
transform: scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-body {
|
||||||
|
padding: 2.5rem;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 25%);
|
||||||
|
line-height: 1.65;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.perks-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 1.5rem 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.7rem;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom-color: var(--accent-color);
|
||||||
|
gap: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover i {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accolades-strip {
|
||||||
|
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 25%));
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.accolade-tile {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2.5rem 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
right: 0;
|
||||||
|
height: 60%;
|
||||||
|
width: 1px;
|
||||||
|
background-color: color-mix(in srgb, var(--contrast-color), transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: color-mix(in srgb, var(--contrast-color), transparent 90%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-icon {
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
background-color: color-mix(in srgb, var(--contrast-color), transparent 80%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 1.2rem;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--contrast-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--contrast-color);
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
color: color-mix(in srgb, var(--contrast-color), transparent 30%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-3:last-child .accolade-tile::after,
|
||||||
|
.col-md-6:last-child .accolade-tile::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.values-section {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
.values-panel {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 2.5rem;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 10px 35px color-mix(in srgb, var(--default-color), transparent 92%);
|
||||||
|
border-top: 4px solid var(--accent-color);
|
||||||
|
|
||||||
|
.panel-badge {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 20%));
|
||||||
|
border-radius: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: var(--contrast-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
>p {
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 35%);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1.2rem;
|
||||||
|
|
||||||
|
.counter-box {
|
||||||
|
background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 92%), color-mix(in srgb, var(--accent-color), transparent 88%));
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 1.3rem;
|
||||||
|
text-align: center;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--accent-color);
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.green-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
|
||||||
|
.green-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.2rem;
|
||||||
|
padding: 1.1rem 0;
|
||||||
|
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
|
||||||
|
transition: padding-left 0.3s ease;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green-icon {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
background: color-mix(in srgb, var(--accent-color), transparent 88%);
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.green-text {
|
||||||
|
strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 0.84rem;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 45%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.green-panel {
|
||||||
|
border-top-color: color-mix(in srgb, var(--accent-color), #28a745 30%);
|
||||||
|
|
||||||
|
.panel-badge {
|
||||||
|
background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), #28a745 30%), color-mix(in srgb, var(--accent-color), #28a745 50%));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.event-intro {
|
||||||
|
h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-hero-img {
|
||||||
|
margin-top: 2rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-cards .highlight-card {
|
||||||
|
.highlight-img {
|
||||||
|
min-height: 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accolades-strip {
|
||||||
|
.col-md-6:nth-child(2) .accolade-tile::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.values-section .counter-grid {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.event-intro {
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
border-left-width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-meta {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-cards .highlight-card .highlight-body {
|
||||||
|
padding: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accolades-strip .accolade-tile {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.values-section {
|
||||||
|
.values-panel {
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Events Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.events {
|
||||||
|
--background-color: #f3f6f4;
|
||||||
|
--default-color: #444444;
|
||||||
|
--accent-color: #cc0000;
|
||||||
|
--surface-color: #ffffff;
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.35s ease;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 3px;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
transition: width 0.35s ease;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
|
||||||
|
box-shadow: 0 10px 40px color-mix(in srgb, var(--accent-color), transparent 88%);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card-inner {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-image-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #000;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-content {
|
||||||
|
padding: 22px 24px 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--heading-color);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 25%);
|
||||||
|
line-height: 1.65;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.event-content {
|
||||||
|
padding: 18px 20px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-number {
|
||||||
|
font-size: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Faq Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.faq {
|
||||||
|
.faq-item {
|
||||||
|
background: var(--surface-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px 32px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
padding-right: 32px;
|
||||||
|
line-height: 1.4;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 0fr;
|
||||||
|
transition: 0.3s ease-in-out;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-toggle {
|
||||||
|
position: absolute;
|
||||||
|
right: 32px;
|
||||||
|
top: 28px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 0;
|
||||||
|
color: var(--default-color);
|
||||||
|
transition: 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-active {
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-content {
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-toggle {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575px) {
|
||||||
|
.faq-item {
|
||||||
|
padding: 16px 24px;
|
||||||
|
|
||||||
|
.faq-toggle {
|
||||||
|
right: 24px;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Hero Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.hero {
|
||||||
|
--accent-color: #ffffff;
|
||||||
|
padding-top: 120px;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-background {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: color-mix(in srgb, var(--background-color), transparent 80%);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 30%);
|
||||||
|
line-height: 1.6;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-visit-btn {
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
bottom: 40px;
|
||||||
|
z-index: 4;
|
||||||
|
padding: 14px 28px;
|
||||||
|
border-radius: 50px;
|
||||||
|
background-color: #cc0000;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #a30000;
|
||||||
|
color: #fff;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
padding: 80px 0;
|
||||||
|
min-height: 80vh;
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
min-height: 80vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.plan-visit-btn {
|
||||||
|
left: 20px;
|
||||||
|
bottom: 24px;
|
||||||
|
padding: 12px 22px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,176 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Ministries Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.ministries {
|
||||||
|
.service-card {
|
||||||
|
display: flex;
|
||||||
|
background: var(--surface-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
|
||||||
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
|
.card-media img {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-action {
|
||||||
|
color: var(--accent-color);
|
||||||
|
|
||||||
|
i {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-media {
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 40%;
|
||||||
|
max-width: 40%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: color-mix(in srgb, var(--default-color) 5%, transparent);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-label {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 12px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: var(--surface-color);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
flex: 0 0 200px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: color-mix(in srgb, var(--default-color) 70%, transparent);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-tag {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: color-mix(in srgb, var(--default-color) 55%, transparent);
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-foot {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--heading-color);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 14px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
color: var(--accent-color);
|
||||||
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #22c55e;
|
||||||
|
box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 20%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.card-media {
|
||||||
|
flex: 0 0 35%;
|
||||||
|
max-width: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-head h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Starter Section Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.starter-section {
|
||||||
|
/* Add your styles here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
// main: ../main.scss
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Team Section
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.team {
|
||||||
|
.member {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.member-img {
|
||||||
|
margin: 0 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin: 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-color: rgba(0, 0, 0, .6);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 2;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
transition: 0.3s;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
transition: 0.3s;
|
||||||
|
color: var(--contrast-color);
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 0 8px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-info {
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-style: italic;
|
||||||
|
display: block;
|
||||||
|
font-size: 15px;
|
||||||
|
color: color-mix(in srgb, var(--default-color), transparent 40%);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.member-img {
|
||||||
|
.social {
|
||||||
|
padding-bottom: 0;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,614 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
||||||
|
|
||||||
|
var throttle = _interopDefault(require('lodash.throttle'));
|
||||||
|
var debounce = _interopDefault(require('lodash.debounce'));
|
||||||
|
|
||||||
|
var callback = function callback() {};
|
||||||
|
|
||||||
|
function containsAOSNode(nodes) {
|
||||||
|
var i = void 0,
|
||||||
|
currentNode = void 0,
|
||||||
|
result = void 0;
|
||||||
|
|
||||||
|
for (i = 0; i < nodes.length; i += 1) {
|
||||||
|
currentNode = nodes[i];
|
||||||
|
|
||||||
|
if (currentNode.dataset && currentNode.dataset.aos) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
result = currentNode.children && containsAOSNode(currentNode.children);
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function check(mutations) {
|
||||||
|
if (!mutations) return;
|
||||||
|
|
||||||
|
mutations.forEach(function (mutation) {
|
||||||
|
var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
|
||||||
|
var removedNodes = Array.prototype.slice.call(mutation.removedNodes);
|
||||||
|
var allNodes = addedNodes.concat(removedNodes);
|
||||||
|
|
||||||
|
if (containsAOSNode(allNodes)) {
|
||||||
|
return callback();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMutationObserver() {
|
||||||
|
return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSupported() {
|
||||||
|
return !!getMutationObserver();
|
||||||
|
}
|
||||||
|
|
||||||
|
function ready(selector, fn) {
|
||||||
|
var doc = window.document;
|
||||||
|
var MutationObserver = getMutationObserver();
|
||||||
|
|
||||||
|
var observer = new MutationObserver(check);
|
||||||
|
callback = fn;
|
||||||
|
|
||||||
|
observer.observe(doc.documentElement, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
removedNodes: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var observer = { isSupported: isSupported, ready: ready };
|
||||||
|
|
||||||
|
var classCallCheck = function (instance, Constructor) {
|
||||||
|
if (!(instance instanceof Constructor)) {
|
||||||
|
throw new TypeError("Cannot call a class as a function");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var createClass = function () {
|
||||||
|
function defineProperties(target, props) {
|
||||||
|
for (var i = 0; i < props.length; i++) {
|
||||||
|
var descriptor = props[i];
|
||||||
|
descriptor.enumerable = descriptor.enumerable || false;
|
||||||
|
descriptor.configurable = true;
|
||||||
|
if ("value" in descriptor) descriptor.writable = true;
|
||||||
|
Object.defineProperty(target, descriptor.key, descriptor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return function (Constructor, protoProps, staticProps) {
|
||||||
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||||
|
if (staticProps) defineProperties(Constructor, staticProps);
|
||||||
|
return Constructor;
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
var _extends = Object.assign || function (target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i];
|
||||||
|
|
||||||
|
for (var key in source) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||||
|
target[key] = source[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Device detector
|
||||||
|
*/
|
||||||
|
|
||||||
|
var fullNameRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
|
||||||
|
var prefixRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||||
|
var fullNameMobileRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
|
||||||
|
var prefixMobileRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||||
|
|
||||||
|
function ua() {
|
||||||
|
return navigator.userAgent || navigator.vendor || window.opera || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
var Detector = function () {
|
||||||
|
function Detector() {
|
||||||
|
classCallCheck(this, Detector);
|
||||||
|
}
|
||||||
|
|
||||||
|
createClass(Detector, [{
|
||||||
|
key: 'phone',
|
||||||
|
value: function phone() {
|
||||||
|
var a = ua();
|
||||||
|
return !!(fullNameRe.test(a) || prefixRe.test(a.substr(0, 4)));
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'mobile',
|
||||||
|
value: function mobile() {
|
||||||
|
var a = ua();
|
||||||
|
return !!(fullNameMobileRe.test(a) || prefixMobileRe.test(a.substr(0, 4)));
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'tablet',
|
||||||
|
value: function tablet() {
|
||||||
|
return this.mobile() && !this.phone();
|
||||||
|
}
|
||||||
|
|
||||||
|
// http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c
|
||||||
|
|
||||||
|
}, {
|
||||||
|
key: 'ie11',
|
||||||
|
value: function ie11() {
|
||||||
|
return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
return Detector;
|
||||||
|
}();
|
||||||
|
|
||||||
|
var detect = new Detector();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds multiple classes on node
|
||||||
|
* @param {DOMNode} node
|
||||||
|
* @param {array} classes
|
||||||
|
*/
|
||||||
|
var addClasses = function addClasses(node, classes) {
|
||||||
|
return classes && classes.forEach(function (className) {
|
||||||
|
return node.classList.add(className);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes multiple classes from node
|
||||||
|
* @param {DOMNode} node
|
||||||
|
* @param {array} classes
|
||||||
|
*/
|
||||||
|
var removeClasses = function removeClasses(node, classes) {
|
||||||
|
return classes && classes.forEach(function (className) {
|
||||||
|
return node.classList.remove(className);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var fireEvent = function fireEvent(eventName, data) {
|
||||||
|
var customEvent = void 0;
|
||||||
|
|
||||||
|
if (detect.ie11()) {
|
||||||
|
customEvent = document.createEvent('CustomEvent');
|
||||||
|
customEvent.initCustomEvent(eventName, true, true, { detail: data });
|
||||||
|
} else {
|
||||||
|
customEvent = new CustomEvent(eventName, {
|
||||||
|
detail: data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return document.dispatchEvent(customEvent);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set or remove aos-animate class
|
||||||
|
* @param {node} el element
|
||||||
|
* @param {int} top scrolled distance
|
||||||
|
*/
|
||||||
|
var applyClasses = function applyClasses(el, top) {
|
||||||
|
var options = el.options,
|
||||||
|
position = el.position,
|
||||||
|
node = el.node,
|
||||||
|
data = el.data;
|
||||||
|
|
||||||
|
|
||||||
|
var hide = function hide() {
|
||||||
|
if (!el.animated) return;
|
||||||
|
|
||||||
|
removeClasses(node, options.animatedClassNames);
|
||||||
|
fireEvent('aos:out', node);
|
||||||
|
|
||||||
|
if (el.options.id) {
|
||||||
|
fireEvent('aos:in:' + el.options.id, node);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.animated = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
var show = function show() {
|
||||||
|
if (el.animated) return;
|
||||||
|
|
||||||
|
addClasses(node, options.animatedClassNames);
|
||||||
|
|
||||||
|
fireEvent('aos:in', node);
|
||||||
|
if (el.options.id) {
|
||||||
|
fireEvent('aos:in:' + el.options.id, node);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.animated = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.mirror && top >= position.out && !options.once) {
|
||||||
|
hide();
|
||||||
|
} else if (top >= position.in) {
|
||||||
|
show();
|
||||||
|
} else if (el.animated && !options.once) {
|
||||||
|
hide();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll logic - add or remove 'aos-animate' class on scroll
|
||||||
|
*
|
||||||
|
* @param {array} $elements array of elements nodes
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
var handleScroll = function handleScroll($elements) {
|
||||||
|
return $elements.forEach(function (el, i) {
|
||||||
|
return applyClasses(el, window.pageYOffset);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get offset of DOM element
|
||||||
|
* like there were no transforms applied on it
|
||||||
|
*
|
||||||
|
* @param {Node} el [DOM element]
|
||||||
|
* @return {Object} [top and left offset]
|
||||||
|
*/
|
||||||
|
var offset = function offset(el) {
|
||||||
|
var _x = 0;
|
||||||
|
var _y = 0;
|
||||||
|
|
||||||
|
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
|
||||||
|
_x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0);
|
||||||
|
_y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0);
|
||||||
|
el = el.offsetParent;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: _y,
|
||||||
|
left: _x
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get inline option with a fallback.
|
||||||
|
*
|
||||||
|
* @param {Node} el [Dom element]
|
||||||
|
* @param {String} key [Option key]
|
||||||
|
* @param {String} fallback [Default (fallback) value]
|
||||||
|
* @return {Mixed} [Option set with inline attributes or fallback value if not set]
|
||||||
|
*/
|
||||||
|
|
||||||
|
var getInlineOption = (function (el, key, fallback) {
|
||||||
|
var attr = el.getAttribute('data-aos-' + key);
|
||||||
|
|
||||||
|
if (typeof attr !== 'undefined') {
|
||||||
|
if (attr === 'true') {
|
||||||
|
return true;
|
||||||
|
} else if (attr === 'false') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return attr || fallback;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate offset
|
||||||
|
* basing on element's settings like:
|
||||||
|
* - anchor
|
||||||
|
* - offset
|
||||||
|
*
|
||||||
|
* @param {Node} el [Dom element]
|
||||||
|
* @return {Integer} [Final offset that will be used to trigger animation in good position]
|
||||||
|
*/
|
||||||
|
|
||||||
|
var getPositionIn = function getPositionIn(el, defaultOffset, defaultAnchorPlacement) {
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var anchor = getInlineOption(el, 'anchor');
|
||||||
|
var inlineAnchorPlacement = getInlineOption(el, 'anchor-placement');
|
||||||
|
var additionalOffset = Number(getInlineOption(el, 'offset', inlineAnchorPlacement ? 0 : defaultOffset));
|
||||||
|
var anchorPlacement = inlineAnchorPlacement || defaultAnchorPlacement;
|
||||||
|
var finalEl = el;
|
||||||
|
|
||||||
|
if (anchor && document.querySelectorAll(anchor)) {
|
||||||
|
finalEl = document.querySelectorAll(anchor)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var triggerPoint = offset(finalEl).top - windowHeight;
|
||||||
|
|
||||||
|
switch (anchorPlacement) {
|
||||||
|
case 'top-bottom':
|
||||||
|
// Default offset
|
||||||
|
break;
|
||||||
|
case 'center-bottom':
|
||||||
|
triggerPoint += finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'bottom-bottom':
|
||||||
|
triggerPoint += finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'top-center':
|
||||||
|
triggerPoint += windowHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'center-center':
|
||||||
|
triggerPoint += windowHeight / 2 + finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'bottom-center':
|
||||||
|
triggerPoint += windowHeight / 2 + finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'top-top':
|
||||||
|
triggerPoint += windowHeight;
|
||||||
|
break;
|
||||||
|
case 'bottom-top':
|
||||||
|
triggerPoint += windowHeight + finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'center-top':
|
||||||
|
triggerPoint += windowHeight + finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return triggerPoint + additionalOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
var getPositionOut = function getPositionOut(el, defaultOffset) {
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var anchor = getInlineOption(el, 'anchor');
|
||||||
|
var additionalOffset = getInlineOption(el, 'offset', defaultOffset);
|
||||||
|
var finalEl = el;
|
||||||
|
|
||||||
|
if (anchor && document.querySelectorAll(anchor)) {
|
||||||
|
finalEl = document.querySelectorAll(anchor)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var elementOffsetTop = offset(finalEl).top;
|
||||||
|
|
||||||
|
return elementOffsetTop + finalEl.offsetHeight - additionalOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Clearing variables */
|
||||||
|
|
||||||
|
var prepare = function prepare($elements, options) {
|
||||||
|
$elements.forEach(function (el, i) {
|
||||||
|
var mirror = getInlineOption(el.node, 'mirror', options.mirror);
|
||||||
|
var once = getInlineOption(el.node, 'once', options.once);
|
||||||
|
var id = getInlineOption(el.node, 'id');
|
||||||
|
var customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
|
||||||
|
|
||||||
|
var animatedClassNames = [options.animatedClassName].concat(customClassNames ? customClassNames.split(' ') : []).filter(function (className) {
|
||||||
|
return typeof className === 'string';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (options.initClassName) {
|
||||||
|
el.node.classList.add(options.initClassName);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.position = {
|
||||||
|
in: getPositionIn(el.node, options.offset, options.anchorPlacement),
|
||||||
|
out: mirror && getPositionOut(el.node, options.offset)
|
||||||
|
};
|
||||||
|
|
||||||
|
el.options = {
|
||||||
|
once: once,
|
||||||
|
mirror: mirror,
|
||||||
|
animatedClassNames: animatedClassNames,
|
||||||
|
id: id
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return $elements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate initial array with elements as objects
|
||||||
|
* This array will be extended later with elements attributes values
|
||||||
|
* like 'position'
|
||||||
|
*/
|
||||||
|
var elements = (function () {
|
||||||
|
var elements = document.querySelectorAll('[data-aos]');
|
||||||
|
return Array.prototype.map.call(elements, function (node) {
|
||||||
|
return { node: node };
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* *******************************************************
|
||||||
|
* AOS (Animate on scroll) - wowjs alternative
|
||||||
|
* made to animate elements on scroll in both directions
|
||||||
|
* *******************************************************
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Private variables
|
||||||
|
*/
|
||||||
|
var $aosElements = [];
|
||||||
|
var initialized = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default options
|
||||||
|
*/
|
||||||
|
var options = {
|
||||||
|
offset: 120,
|
||||||
|
delay: 0,
|
||||||
|
easing: 'ease',
|
||||||
|
duration: 400,
|
||||||
|
disable: false,
|
||||||
|
once: false,
|
||||||
|
mirror: false,
|
||||||
|
anchorPlacement: 'top-bottom',
|
||||||
|
startEvent: 'DOMContentLoaded',
|
||||||
|
animatedClassName: 'aos-animate',
|
||||||
|
initClassName: 'aos-init',
|
||||||
|
useClassNames: false,
|
||||||
|
disableMutationObserver: false,
|
||||||
|
throttleDelay: 99,
|
||||||
|
debounceDelay: 50
|
||||||
|
};
|
||||||
|
|
||||||
|
// Detect not supported browsers (<=IE9)
|
||||||
|
// http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
||||||
|
var isBrowserNotSupported = function isBrowserNotSupported() {
|
||||||
|
return document.all && !window.atob;
|
||||||
|
};
|
||||||
|
|
||||||
|
var initializeScroll = function initializeScroll() {
|
||||||
|
// Extend elements objects in $aosElements with their positions
|
||||||
|
$aosElements = prepare($aosElements, options);
|
||||||
|
// Perform scroll event, to refresh view and show/hide elements
|
||||||
|
handleScroll($aosElements);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle scroll event to animate elements on scroll
|
||||||
|
*/
|
||||||
|
window.addEventListener('scroll', throttle(function () {
|
||||||
|
handleScroll($aosElements, options.once);
|
||||||
|
}, options.throttleDelay));
|
||||||
|
|
||||||
|
return $aosElements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh AOS
|
||||||
|
*/
|
||||||
|
var refresh = function refresh() {
|
||||||
|
var initialize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||||
|
|
||||||
|
// Allow refresh only when it was first initialized on startEvent
|
||||||
|
if (initialize) initialized = true;
|
||||||
|
if (initialized) initializeScroll();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hard refresh
|
||||||
|
* create array with new elements and trigger refresh
|
||||||
|
*/
|
||||||
|
var refreshHard = function refreshHard() {
|
||||||
|
$aosElements = elements();
|
||||||
|
|
||||||
|
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||||
|
return disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable AOS
|
||||||
|
* Remove all attributes to reset applied styles
|
||||||
|
*/
|
||||||
|
var disable = function disable() {
|
||||||
|
$aosElements.forEach(function (el, i) {
|
||||||
|
el.node.removeAttribute('data-aos');
|
||||||
|
el.node.removeAttribute('data-aos-easing');
|
||||||
|
el.node.removeAttribute('data-aos-duration');
|
||||||
|
el.node.removeAttribute('data-aos-delay');
|
||||||
|
|
||||||
|
if (options.initClassName) {
|
||||||
|
el.node.classList.remove(options.initClassName);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.animatedClassName) {
|
||||||
|
el.node.classList.remove(options.animatedClassName);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if AOS should be disabled based on provided setting
|
||||||
|
*/
|
||||||
|
var isDisabled = function isDisabled(optionDisable) {
|
||||||
|
return optionDisable === true || optionDisable === 'mobile' && detect.mobile() || optionDisable === 'phone' && detect.phone() || optionDisable === 'tablet' && detect.tablet() || typeof optionDisable === 'function' && optionDisable() === true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializing AOS
|
||||||
|
* - Create options merging defaults with user defined options
|
||||||
|
* - Set attributes on <body> as global setting - css relies on it
|
||||||
|
* - Attach preparing elements to options.startEvent,
|
||||||
|
* window resize and orientation change
|
||||||
|
* - Attach function that handle scroll and everything connected to it
|
||||||
|
* to window scroll event and fire once document is ready to set initial state
|
||||||
|
*/
|
||||||
|
var init = function init(settings) {
|
||||||
|
options = _extends(options, settings);
|
||||||
|
|
||||||
|
// Create initial array with elements -> to be fullfilled later with prepare()
|
||||||
|
$aosElements = elements();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable mutation observing if not supported
|
||||||
|
*/
|
||||||
|
if (!options.disableMutationObserver && !observer.isSupported()) {
|
||||||
|
console.info('\n aos: MutationObserver is not supported on this browser,\n code mutations observing has been disabled.\n You may have to call "refreshHard()" by yourself.\n ');
|
||||||
|
options.disableMutationObserver = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Observe [aos] elements
|
||||||
|
* If something is loaded by AJAX
|
||||||
|
* it'll refresh plugin automatically
|
||||||
|
*/
|
||||||
|
if (!options.disableMutationObserver) {
|
||||||
|
observer.ready('[data-aos]', refreshHard);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Don't init plugin if option `disable` is set
|
||||||
|
* or when browser is not supported
|
||||||
|
*/
|
||||||
|
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||||
|
return disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set global settings on body, based on options
|
||||||
|
* so CSS can use it
|
||||||
|
*/
|
||||||
|
document.querySelector('body').setAttribute('data-aos-easing', options.easing);
|
||||||
|
|
||||||
|
document.querySelector('body').setAttribute('data-aos-duration', options.duration);
|
||||||
|
|
||||||
|
document.querySelector('body').setAttribute('data-aos-delay', options.delay);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle initializing
|
||||||
|
*/
|
||||||
|
if (['DOMContentLoaded', 'load'].indexOf(options.startEvent) === -1) {
|
||||||
|
// Listen to options.startEvent and initialize AOS
|
||||||
|
document.addEventListener(options.startEvent, function () {
|
||||||
|
refresh(true);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
window.addEventListener('load', function () {
|
||||||
|
refresh(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.startEvent === 'DOMContentLoaded' && ['complete', 'interactive'].indexOf(document.readyState) > -1) {
|
||||||
|
// Initialize AOS if default startEvent was already fired
|
||||||
|
refresh(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh plugin on window resize or orientation change
|
||||||
|
*/
|
||||||
|
window.addEventListener('resize', debounce(refresh, options.debounceDelay, true));
|
||||||
|
|
||||||
|
window.addEventListener('orientationchange', debounce(refresh, options.debounceDelay, true));
|
||||||
|
|
||||||
|
return $aosElements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Public API
|
||||||
|
*/
|
||||||
|
|
||||||
|
var aos = {
|
||||||
|
init: init,
|
||||||
|
refresh: refresh,
|
||||||
|
refreshHard: refreshHard
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = aos;
|
||||||
@@ -0,0 +1,610 @@
|
|||||||
|
import throttle from 'lodash.throttle';
|
||||||
|
import debounce from 'lodash.debounce';
|
||||||
|
|
||||||
|
var callback = function callback() {};
|
||||||
|
|
||||||
|
function containsAOSNode(nodes) {
|
||||||
|
var i = void 0,
|
||||||
|
currentNode = void 0,
|
||||||
|
result = void 0;
|
||||||
|
|
||||||
|
for (i = 0; i < nodes.length; i += 1) {
|
||||||
|
currentNode = nodes[i];
|
||||||
|
|
||||||
|
if (currentNode.dataset && currentNode.dataset.aos) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
result = currentNode.children && containsAOSNode(currentNode.children);
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function check(mutations) {
|
||||||
|
if (!mutations) return;
|
||||||
|
|
||||||
|
mutations.forEach(function (mutation) {
|
||||||
|
var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
|
||||||
|
var removedNodes = Array.prototype.slice.call(mutation.removedNodes);
|
||||||
|
var allNodes = addedNodes.concat(removedNodes);
|
||||||
|
|
||||||
|
if (containsAOSNode(allNodes)) {
|
||||||
|
return callback();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMutationObserver() {
|
||||||
|
return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSupported() {
|
||||||
|
return !!getMutationObserver();
|
||||||
|
}
|
||||||
|
|
||||||
|
function ready(selector, fn) {
|
||||||
|
var doc = window.document;
|
||||||
|
var MutationObserver = getMutationObserver();
|
||||||
|
|
||||||
|
var observer = new MutationObserver(check);
|
||||||
|
callback = fn;
|
||||||
|
|
||||||
|
observer.observe(doc.documentElement, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
removedNodes: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var observer = { isSupported: isSupported, ready: ready };
|
||||||
|
|
||||||
|
var classCallCheck = function (instance, Constructor) {
|
||||||
|
if (!(instance instanceof Constructor)) {
|
||||||
|
throw new TypeError("Cannot call a class as a function");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var createClass = function () {
|
||||||
|
function defineProperties(target, props) {
|
||||||
|
for (var i = 0; i < props.length; i++) {
|
||||||
|
var descriptor = props[i];
|
||||||
|
descriptor.enumerable = descriptor.enumerable || false;
|
||||||
|
descriptor.configurable = true;
|
||||||
|
if ("value" in descriptor) descriptor.writable = true;
|
||||||
|
Object.defineProperty(target, descriptor.key, descriptor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return function (Constructor, protoProps, staticProps) {
|
||||||
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||||
|
if (staticProps) defineProperties(Constructor, staticProps);
|
||||||
|
return Constructor;
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
var _extends = Object.assign || function (target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i];
|
||||||
|
|
||||||
|
for (var key in source) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||||
|
target[key] = source[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Device detector
|
||||||
|
*/
|
||||||
|
|
||||||
|
var fullNameRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
|
||||||
|
var prefixRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||||
|
var fullNameMobileRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
|
||||||
|
var prefixMobileRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||||
|
|
||||||
|
function ua() {
|
||||||
|
return navigator.userAgent || navigator.vendor || window.opera || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
var Detector = function () {
|
||||||
|
function Detector() {
|
||||||
|
classCallCheck(this, Detector);
|
||||||
|
}
|
||||||
|
|
||||||
|
createClass(Detector, [{
|
||||||
|
key: 'phone',
|
||||||
|
value: function phone() {
|
||||||
|
var a = ua();
|
||||||
|
return !!(fullNameRe.test(a) || prefixRe.test(a.substr(0, 4)));
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'mobile',
|
||||||
|
value: function mobile() {
|
||||||
|
var a = ua();
|
||||||
|
return !!(fullNameMobileRe.test(a) || prefixMobileRe.test(a.substr(0, 4)));
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'tablet',
|
||||||
|
value: function tablet() {
|
||||||
|
return this.mobile() && !this.phone();
|
||||||
|
}
|
||||||
|
|
||||||
|
// http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c
|
||||||
|
|
||||||
|
}, {
|
||||||
|
key: 'ie11',
|
||||||
|
value: function ie11() {
|
||||||
|
return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
return Detector;
|
||||||
|
}();
|
||||||
|
|
||||||
|
var detect = new Detector();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds multiple classes on node
|
||||||
|
* @param {DOMNode} node
|
||||||
|
* @param {array} classes
|
||||||
|
*/
|
||||||
|
var addClasses = function addClasses(node, classes) {
|
||||||
|
return classes && classes.forEach(function (className) {
|
||||||
|
return node.classList.add(className);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes multiple classes from node
|
||||||
|
* @param {DOMNode} node
|
||||||
|
* @param {array} classes
|
||||||
|
*/
|
||||||
|
var removeClasses = function removeClasses(node, classes) {
|
||||||
|
return classes && classes.forEach(function (className) {
|
||||||
|
return node.classList.remove(className);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var fireEvent = function fireEvent(eventName, data) {
|
||||||
|
var customEvent = void 0;
|
||||||
|
|
||||||
|
if (detect.ie11()) {
|
||||||
|
customEvent = document.createEvent('CustomEvent');
|
||||||
|
customEvent.initCustomEvent(eventName, true, true, { detail: data });
|
||||||
|
} else {
|
||||||
|
customEvent = new CustomEvent(eventName, {
|
||||||
|
detail: data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return document.dispatchEvent(customEvent);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set or remove aos-animate class
|
||||||
|
* @param {node} el element
|
||||||
|
* @param {int} top scrolled distance
|
||||||
|
*/
|
||||||
|
var applyClasses = function applyClasses(el, top) {
|
||||||
|
var options = el.options,
|
||||||
|
position = el.position,
|
||||||
|
node = el.node,
|
||||||
|
data = el.data;
|
||||||
|
|
||||||
|
|
||||||
|
var hide = function hide() {
|
||||||
|
if (!el.animated) return;
|
||||||
|
|
||||||
|
removeClasses(node, options.animatedClassNames);
|
||||||
|
fireEvent('aos:out', node);
|
||||||
|
|
||||||
|
if (el.options.id) {
|
||||||
|
fireEvent('aos:in:' + el.options.id, node);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.animated = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
var show = function show() {
|
||||||
|
if (el.animated) return;
|
||||||
|
|
||||||
|
addClasses(node, options.animatedClassNames);
|
||||||
|
|
||||||
|
fireEvent('aos:in', node);
|
||||||
|
if (el.options.id) {
|
||||||
|
fireEvent('aos:in:' + el.options.id, node);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.animated = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.mirror && top >= position.out && !options.once) {
|
||||||
|
hide();
|
||||||
|
} else if (top >= position.in) {
|
||||||
|
show();
|
||||||
|
} else if (el.animated && !options.once) {
|
||||||
|
hide();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll logic - add or remove 'aos-animate' class on scroll
|
||||||
|
*
|
||||||
|
* @param {array} $elements array of elements nodes
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
var handleScroll = function handleScroll($elements) {
|
||||||
|
return $elements.forEach(function (el, i) {
|
||||||
|
return applyClasses(el, window.pageYOffset);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get offset of DOM element
|
||||||
|
* like there were no transforms applied on it
|
||||||
|
*
|
||||||
|
* @param {Node} el [DOM element]
|
||||||
|
* @return {Object} [top and left offset]
|
||||||
|
*/
|
||||||
|
var offset = function offset(el) {
|
||||||
|
var _x = 0;
|
||||||
|
var _y = 0;
|
||||||
|
|
||||||
|
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
|
||||||
|
_x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0);
|
||||||
|
_y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0);
|
||||||
|
el = el.offsetParent;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: _y,
|
||||||
|
left: _x
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get inline option with a fallback.
|
||||||
|
*
|
||||||
|
* @param {Node} el [Dom element]
|
||||||
|
* @param {String} key [Option key]
|
||||||
|
* @param {String} fallback [Default (fallback) value]
|
||||||
|
* @return {Mixed} [Option set with inline attributes or fallback value if not set]
|
||||||
|
*/
|
||||||
|
|
||||||
|
var getInlineOption = (function (el, key, fallback) {
|
||||||
|
var attr = el.getAttribute('data-aos-' + key);
|
||||||
|
|
||||||
|
if (typeof attr !== 'undefined') {
|
||||||
|
if (attr === 'true') {
|
||||||
|
return true;
|
||||||
|
} else if (attr === 'false') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return attr || fallback;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate offset
|
||||||
|
* basing on element's settings like:
|
||||||
|
* - anchor
|
||||||
|
* - offset
|
||||||
|
*
|
||||||
|
* @param {Node} el [Dom element]
|
||||||
|
* @return {Integer} [Final offset that will be used to trigger animation in good position]
|
||||||
|
*/
|
||||||
|
|
||||||
|
var getPositionIn = function getPositionIn(el, defaultOffset, defaultAnchorPlacement) {
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var anchor = getInlineOption(el, 'anchor');
|
||||||
|
var inlineAnchorPlacement = getInlineOption(el, 'anchor-placement');
|
||||||
|
var additionalOffset = Number(getInlineOption(el, 'offset', inlineAnchorPlacement ? 0 : defaultOffset));
|
||||||
|
var anchorPlacement = inlineAnchorPlacement || defaultAnchorPlacement;
|
||||||
|
var finalEl = el;
|
||||||
|
|
||||||
|
if (anchor && document.querySelectorAll(anchor)) {
|
||||||
|
finalEl = document.querySelectorAll(anchor)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var triggerPoint = offset(finalEl).top - windowHeight;
|
||||||
|
|
||||||
|
switch (anchorPlacement) {
|
||||||
|
case 'top-bottom':
|
||||||
|
// Default offset
|
||||||
|
break;
|
||||||
|
case 'center-bottom':
|
||||||
|
triggerPoint += finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'bottom-bottom':
|
||||||
|
triggerPoint += finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'top-center':
|
||||||
|
triggerPoint += windowHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'center-center':
|
||||||
|
triggerPoint += windowHeight / 2 + finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'bottom-center':
|
||||||
|
triggerPoint += windowHeight / 2 + finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'top-top':
|
||||||
|
triggerPoint += windowHeight;
|
||||||
|
break;
|
||||||
|
case 'bottom-top':
|
||||||
|
triggerPoint += windowHeight + finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'center-top':
|
||||||
|
triggerPoint += windowHeight + finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return triggerPoint + additionalOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
var getPositionOut = function getPositionOut(el, defaultOffset) {
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var anchor = getInlineOption(el, 'anchor');
|
||||||
|
var additionalOffset = getInlineOption(el, 'offset', defaultOffset);
|
||||||
|
var finalEl = el;
|
||||||
|
|
||||||
|
if (anchor && document.querySelectorAll(anchor)) {
|
||||||
|
finalEl = document.querySelectorAll(anchor)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var elementOffsetTop = offset(finalEl).top;
|
||||||
|
|
||||||
|
return elementOffsetTop + finalEl.offsetHeight - additionalOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Clearing variables */
|
||||||
|
|
||||||
|
var prepare = function prepare($elements, options) {
|
||||||
|
$elements.forEach(function (el, i) {
|
||||||
|
var mirror = getInlineOption(el.node, 'mirror', options.mirror);
|
||||||
|
var once = getInlineOption(el.node, 'once', options.once);
|
||||||
|
var id = getInlineOption(el.node, 'id');
|
||||||
|
var customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
|
||||||
|
|
||||||
|
var animatedClassNames = [options.animatedClassName].concat(customClassNames ? customClassNames.split(' ') : []).filter(function (className) {
|
||||||
|
return typeof className === 'string';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (options.initClassName) {
|
||||||
|
el.node.classList.add(options.initClassName);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.position = {
|
||||||
|
in: getPositionIn(el.node, options.offset, options.anchorPlacement),
|
||||||
|
out: mirror && getPositionOut(el.node, options.offset)
|
||||||
|
};
|
||||||
|
|
||||||
|
el.options = {
|
||||||
|
once: once,
|
||||||
|
mirror: mirror,
|
||||||
|
animatedClassNames: animatedClassNames,
|
||||||
|
id: id
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return $elements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate initial array with elements as objects
|
||||||
|
* This array will be extended later with elements attributes values
|
||||||
|
* like 'position'
|
||||||
|
*/
|
||||||
|
var elements = (function () {
|
||||||
|
var elements = document.querySelectorAll('[data-aos]');
|
||||||
|
return Array.prototype.map.call(elements, function (node) {
|
||||||
|
return { node: node };
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* *******************************************************
|
||||||
|
* AOS (Animate on scroll) - wowjs alternative
|
||||||
|
* made to animate elements on scroll in both directions
|
||||||
|
* *******************************************************
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Private variables
|
||||||
|
*/
|
||||||
|
var $aosElements = [];
|
||||||
|
var initialized = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default options
|
||||||
|
*/
|
||||||
|
var options = {
|
||||||
|
offset: 120,
|
||||||
|
delay: 0,
|
||||||
|
easing: 'ease',
|
||||||
|
duration: 400,
|
||||||
|
disable: false,
|
||||||
|
once: false,
|
||||||
|
mirror: false,
|
||||||
|
anchorPlacement: 'top-bottom',
|
||||||
|
startEvent: 'DOMContentLoaded',
|
||||||
|
animatedClassName: 'aos-animate',
|
||||||
|
initClassName: 'aos-init',
|
||||||
|
useClassNames: false,
|
||||||
|
disableMutationObserver: false,
|
||||||
|
throttleDelay: 99,
|
||||||
|
debounceDelay: 50
|
||||||
|
};
|
||||||
|
|
||||||
|
// Detect not supported browsers (<=IE9)
|
||||||
|
// http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
||||||
|
var isBrowserNotSupported = function isBrowserNotSupported() {
|
||||||
|
return document.all && !window.atob;
|
||||||
|
};
|
||||||
|
|
||||||
|
var initializeScroll = function initializeScroll() {
|
||||||
|
// Extend elements objects in $aosElements with their positions
|
||||||
|
$aosElements = prepare($aosElements, options);
|
||||||
|
// Perform scroll event, to refresh view and show/hide elements
|
||||||
|
handleScroll($aosElements);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle scroll event to animate elements on scroll
|
||||||
|
*/
|
||||||
|
window.addEventListener('scroll', throttle(function () {
|
||||||
|
handleScroll($aosElements, options.once);
|
||||||
|
}, options.throttleDelay));
|
||||||
|
|
||||||
|
return $aosElements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh AOS
|
||||||
|
*/
|
||||||
|
var refresh = function refresh() {
|
||||||
|
var initialize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||||
|
|
||||||
|
// Allow refresh only when it was first initialized on startEvent
|
||||||
|
if (initialize) initialized = true;
|
||||||
|
if (initialized) initializeScroll();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hard refresh
|
||||||
|
* create array with new elements and trigger refresh
|
||||||
|
*/
|
||||||
|
var refreshHard = function refreshHard() {
|
||||||
|
$aosElements = elements();
|
||||||
|
|
||||||
|
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||||
|
return disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable AOS
|
||||||
|
* Remove all attributes to reset applied styles
|
||||||
|
*/
|
||||||
|
var disable = function disable() {
|
||||||
|
$aosElements.forEach(function (el, i) {
|
||||||
|
el.node.removeAttribute('data-aos');
|
||||||
|
el.node.removeAttribute('data-aos-easing');
|
||||||
|
el.node.removeAttribute('data-aos-duration');
|
||||||
|
el.node.removeAttribute('data-aos-delay');
|
||||||
|
|
||||||
|
if (options.initClassName) {
|
||||||
|
el.node.classList.remove(options.initClassName);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.animatedClassName) {
|
||||||
|
el.node.classList.remove(options.animatedClassName);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if AOS should be disabled based on provided setting
|
||||||
|
*/
|
||||||
|
var isDisabled = function isDisabled(optionDisable) {
|
||||||
|
return optionDisable === true || optionDisable === 'mobile' && detect.mobile() || optionDisable === 'phone' && detect.phone() || optionDisable === 'tablet' && detect.tablet() || typeof optionDisable === 'function' && optionDisable() === true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializing AOS
|
||||||
|
* - Create options merging defaults with user defined options
|
||||||
|
* - Set attributes on <body> as global setting - css relies on it
|
||||||
|
* - Attach preparing elements to options.startEvent,
|
||||||
|
* window resize and orientation change
|
||||||
|
* - Attach function that handle scroll and everything connected to it
|
||||||
|
* to window scroll event and fire once document is ready to set initial state
|
||||||
|
*/
|
||||||
|
var init = function init(settings) {
|
||||||
|
options = _extends(options, settings);
|
||||||
|
|
||||||
|
// Create initial array with elements -> to be fullfilled later with prepare()
|
||||||
|
$aosElements = elements();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable mutation observing if not supported
|
||||||
|
*/
|
||||||
|
if (!options.disableMutationObserver && !observer.isSupported()) {
|
||||||
|
console.info('\n aos: MutationObserver is not supported on this browser,\n code mutations observing has been disabled.\n You may have to call "refreshHard()" by yourself.\n ');
|
||||||
|
options.disableMutationObserver = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Observe [aos] elements
|
||||||
|
* If something is loaded by AJAX
|
||||||
|
* it'll refresh plugin automatically
|
||||||
|
*/
|
||||||
|
if (!options.disableMutationObserver) {
|
||||||
|
observer.ready('[data-aos]', refreshHard);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Don't init plugin if option `disable` is set
|
||||||
|
* or when browser is not supported
|
||||||
|
*/
|
||||||
|
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||||
|
return disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set global settings on body, based on options
|
||||||
|
* so CSS can use it
|
||||||
|
*/
|
||||||
|
document.querySelector('body').setAttribute('data-aos-easing', options.easing);
|
||||||
|
|
||||||
|
document.querySelector('body').setAttribute('data-aos-duration', options.duration);
|
||||||
|
|
||||||
|
document.querySelector('body').setAttribute('data-aos-delay', options.delay);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle initializing
|
||||||
|
*/
|
||||||
|
if (['DOMContentLoaded', 'load'].indexOf(options.startEvent) === -1) {
|
||||||
|
// Listen to options.startEvent and initialize AOS
|
||||||
|
document.addEventListener(options.startEvent, function () {
|
||||||
|
refresh(true);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
window.addEventListener('load', function () {
|
||||||
|
refresh(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.startEvent === 'DOMContentLoaded' && ['complete', 'interactive'].indexOf(document.readyState) > -1) {
|
||||||
|
// Initialize AOS if default startEvent was already fired
|
||||||
|
refresh(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh plugin on window resize or orientation change
|
||||||
|
*/
|
||||||
|
window.addEventListener('resize', debounce(refresh, options.debounceDelay, true));
|
||||||
|
|
||||||
|
window.addEventListener('orientationchange', debounce(refresh, options.debounceDelay, true));
|
||||||
|
|
||||||
|
return $aosElements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Public API
|
||||||
|
*/
|
||||||
|
|
||||||
|
var aos = {
|
||||||
|
init: init,
|
||||||
|
refresh: refresh,
|
||||||
|
refreshHard: refreshHard
|
||||||
|
};
|
||||||
|
|
||||||
|
export default aos;
|
||||||
@@ -0,0 +1,601 @@
|
|||||||
|
/*!
|
||||||
|
* Bootstrap Reboot v5.3.8 (https://getbootstrap.com/)
|
||||||
|
* Copyright 2011-2025 The Bootstrap Authors
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
|
*/
|
||||||
|
:root,
|
||||||
|
[data-bs-theme=light] {
|
||||||
|
--bs-blue: #0d6efd;
|
||||||
|
--bs-indigo: #6610f2;
|
||||||
|
--bs-purple: #6f42c1;
|
||||||
|
--bs-pink: #d63384;
|
||||||
|
--bs-red: #dc3545;
|
||||||
|
--bs-orange: #fd7e14;
|
||||||
|
--bs-yellow: #ffc107;
|
||||||
|
--bs-green: #198754;
|
||||||
|
--bs-teal: #20c997;
|
||||||
|
--bs-cyan: #0dcaf0;
|
||||||
|
--bs-black: #000;
|
||||||
|
--bs-white: #fff;
|
||||||
|
--bs-gray: #6c757d;
|
||||||
|
--bs-gray-dark: #343a40;
|
||||||
|
--bs-gray-100: #f8f9fa;
|
||||||
|
--bs-gray-200: #e9ecef;
|
||||||
|
--bs-gray-300: #dee2e6;
|
||||||
|
--bs-gray-400: #ced4da;
|
||||||
|
--bs-gray-500: #adb5bd;
|
||||||
|
--bs-gray-600: #6c757d;
|
||||||
|
--bs-gray-700: #495057;
|
||||||
|
--bs-gray-800: #343a40;
|
||||||
|
--bs-gray-900: #212529;
|
||||||
|
--bs-primary: #0d6efd;
|
||||||
|
--bs-secondary: #6c757d;
|
||||||
|
--bs-success: #198754;
|
||||||
|
--bs-info: #0dcaf0;
|
||||||
|
--bs-warning: #ffc107;
|
||||||
|
--bs-danger: #dc3545;
|
||||||
|
--bs-light: #f8f9fa;
|
||||||
|
--bs-dark: #212529;
|
||||||
|
--bs-primary-rgb: 13, 110, 253;
|
||||||
|
--bs-secondary-rgb: 108, 117, 125;
|
||||||
|
--bs-success-rgb: 25, 135, 84;
|
||||||
|
--bs-info-rgb: 13, 202, 240;
|
||||||
|
--bs-warning-rgb: 255, 193, 7;
|
||||||
|
--bs-danger-rgb: 220, 53, 69;
|
||||||
|
--bs-light-rgb: 248, 249, 250;
|
||||||
|
--bs-dark-rgb: 33, 37, 41;
|
||||||
|
--bs-primary-text-emphasis: #052c65;
|
||||||
|
--bs-secondary-text-emphasis: #2b2f32;
|
||||||
|
--bs-success-text-emphasis: #0a3622;
|
||||||
|
--bs-info-text-emphasis: #055160;
|
||||||
|
--bs-warning-text-emphasis: #664d03;
|
||||||
|
--bs-danger-text-emphasis: #58151c;
|
||||||
|
--bs-light-text-emphasis: #495057;
|
||||||
|
--bs-dark-text-emphasis: #495057;
|
||||||
|
--bs-primary-bg-subtle: #cfe2ff;
|
||||||
|
--bs-secondary-bg-subtle: #e2e3e5;
|
||||||
|
--bs-success-bg-subtle: #d1e7dd;
|
||||||
|
--bs-info-bg-subtle: #cff4fc;
|
||||||
|
--bs-warning-bg-subtle: #fff3cd;
|
||||||
|
--bs-danger-bg-subtle: #f8d7da;
|
||||||
|
--bs-light-bg-subtle: #fcfcfd;
|
||||||
|
--bs-dark-bg-subtle: #ced4da;
|
||||||
|
--bs-primary-border-subtle: #9ec5fe;
|
||||||
|
--bs-secondary-border-subtle: #c4c8cb;
|
||||||
|
--bs-success-border-subtle: #a3cfbb;
|
||||||
|
--bs-info-border-subtle: #9eeaf9;
|
||||||
|
--bs-warning-border-subtle: #ffe69c;
|
||||||
|
--bs-danger-border-subtle: #f1aeb5;
|
||||||
|
--bs-light-border-subtle: #e9ecef;
|
||||||
|
--bs-dark-border-subtle: #adb5bd;
|
||||||
|
--bs-white-rgb: 255, 255, 255;
|
||||||
|
--bs-black-rgb: 0, 0, 0;
|
||||||
|
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||||
|
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||||
|
--bs-body-font-size: 1rem;
|
||||||
|
--bs-body-font-weight: 400;
|
||||||
|
--bs-body-line-height: 1.5;
|
||||||
|
--bs-body-color: #212529;
|
||||||
|
--bs-body-color-rgb: 33, 37, 41;
|
||||||
|
--bs-body-bg: #fff;
|
||||||
|
--bs-body-bg-rgb: 255, 255, 255;
|
||||||
|
--bs-emphasis-color: #000;
|
||||||
|
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||||
|
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||||
|
--bs-secondary-color-rgb: 33, 37, 41;
|
||||||
|
--bs-secondary-bg: #e9ecef;
|
||||||
|
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||||
|
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||||
|
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||||
|
--bs-tertiary-bg: #f8f9fa;
|
||||||
|
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||||
|
--bs-heading-color: inherit;
|
||||||
|
--bs-link-color: #0d6efd;
|
||||||
|
--bs-link-color-rgb: 13, 110, 253;
|
||||||
|
--bs-link-decoration: underline;
|
||||||
|
--bs-link-hover-color: #0a58ca;
|
||||||
|
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||||
|
--bs-code-color: #d63384;
|
||||||
|
--bs-highlight-color: #212529;
|
||||||
|
--bs-highlight-bg: #fff3cd;
|
||||||
|
--bs-border-width: 1px;
|
||||||
|
--bs-border-style: solid;
|
||||||
|
--bs-border-color: #dee2e6;
|
||||||
|
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||||
|
--bs-border-radius: 0.375rem;
|
||||||
|
--bs-border-radius-sm: 0.25rem;
|
||||||
|
--bs-border-radius-lg: 0.5rem;
|
||||||
|
--bs-border-radius-xl: 1rem;
|
||||||
|
--bs-border-radius-xxl: 2rem;
|
||||||
|
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||||
|
--bs-border-radius-pill: 50rem;
|
||||||
|
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||||
|
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
|
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||||
|
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||||
|
--bs-focus-ring-width: 0.25rem;
|
||||||
|
--bs-focus-ring-opacity: 0.25;
|
||||||
|
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||||
|
--bs-form-valid-color: #198754;
|
||||||
|
--bs-form-valid-border-color: #198754;
|
||||||
|
--bs-form-invalid-color: #dc3545;
|
||||||
|
--bs-form-invalid-border-color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme=dark] {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bs-body-color: #dee2e6;
|
||||||
|
--bs-body-color-rgb: 222, 226, 230;
|
||||||
|
--bs-body-bg: #212529;
|
||||||
|
--bs-body-bg-rgb: 33, 37, 41;
|
||||||
|
--bs-emphasis-color: #fff;
|
||||||
|
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||||
|
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
||||||
|
--bs-secondary-color-rgb: 222, 226, 230;
|
||||||
|
--bs-secondary-bg: #343a40;
|
||||||
|
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||||
|
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
||||||
|
--bs-tertiary-color-rgb: 222, 226, 230;
|
||||||
|
--bs-tertiary-bg: #2b3035;
|
||||||
|
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||||
|
--bs-primary-text-emphasis: #6ea8fe;
|
||||||
|
--bs-secondary-text-emphasis: #a7acb1;
|
||||||
|
--bs-success-text-emphasis: #75b798;
|
||||||
|
--bs-info-text-emphasis: #6edff6;
|
||||||
|
--bs-warning-text-emphasis: #ffda6a;
|
||||||
|
--bs-danger-text-emphasis: #ea868f;
|
||||||
|
--bs-light-text-emphasis: #f8f9fa;
|
||||||
|
--bs-dark-text-emphasis: #dee2e6;
|
||||||
|
--bs-primary-bg-subtle: #031633;
|
||||||
|
--bs-secondary-bg-subtle: #161719;
|
||||||
|
--bs-success-bg-subtle: #051b11;
|
||||||
|
--bs-info-bg-subtle: #032830;
|
||||||
|
--bs-warning-bg-subtle: #332701;
|
||||||
|
--bs-danger-bg-subtle: #2c0b0e;
|
||||||
|
--bs-light-bg-subtle: #343a40;
|
||||||
|
--bs-dark-bg-subtle: #1a1d20;
|
||||||
|
--bs-primary-border-subtle: #084298;
|
||||||
|
--bs-secondary-border-subtle: #41464b;
|
||||||
|
--bs-success-border-subtle: #0f5132;
|
||||||
|
--bs-info-border-subtle: #087990;
|
||||||
|
--bs-warning-border-subtle: #997404;
|
||||||
|
--bs-danger-border-subtle: #842029;
|
||||||
|
--bs-light-border-subtle: #495057;
|
||||||
|
--bs-dark-border-subtle: #343a40;
|
||||||
|
--bs-heading-color: inherit;
|
||||||
|
--bs-link-color: #6ea8fe;
|
||||||
|
--bs-link-hover-color: #8bb9fe;
|
||||||
|
--bs-link-color-rgb: 110, 168, 254;
|
||||||
|
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||||
|
--bs-code-color: #e685b5;
|
||||||
|
--bs-highlight-color: #dee2e6;
|
||||||
|
--bs-highlight-bg: #664d03;
|
||||||
|
--bs-border-color: #495057;
|
||||||
|
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||||
|
--bs-form-valid-color: #75b798;
|
||||||
|
--bs-form-valid-border-color: #75b798;
|
||||||
|
--bs-form-invalid-color: #ea868f;
|
||||||
|
--bs-form-invalid-border-color: #ea868f;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
:root {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--bs-body-font-family);
|
||||||
|
font-size: var(--bs-body-font-size);
|
||||||
|
font-weight: var(--bs-body-font-weight);
|
||||||
|
line-height: var(--bs-body-line-height);
|
||||||
|
color: var(--bs-body-color);
|
||||||
|
text-align: var(--bs-body-text-align);
|
||||||
|
background-color: var(--bs-body-bg);
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: inherit;
|
||||||
|
border: 0;
|
||||||
|
border-top: var(--bs-border-width) solid;
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6, h5, h4, h3, h2, h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--bs-heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: calc(1.375rem + 1.5vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: calc(1.325rem + 0.9vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: calc(1.3rem + 0.6vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: calc(1.275rem + 0.3vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
-webkit-text-decoration: underline dotted;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
cursor: help;
|
||||||
|
-webkit-text-decoration-skip-ink: none;
|
||||||
|
text-decoration-skip-ink: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
dl {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol,
|
||||||
|
ul ul,
|
||||||
|
ol ul,
|
||||||
|
ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
padding: 0.1875em;
|
||||||
|
color: var(--bs-highlight-color);
|
||||||
|
background-color: var(--bs-highlight-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.75em;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: var(--bs-font-monospace);
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
pre code {
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--bs-code-color);
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
a > code {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
padding: 0.1875rem 0.375rem;
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--bs-body-bg);
|
||||||
|
background-color: var(--bs-body-color);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
kbd kbd {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
caption-side: bottom;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
color: var(--bs-secondary-color);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: inherit;
|
||||||
|
text-align: -webkit-match-parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
tr,
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-color: inherit;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus:not(:focus-visible) {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
optgroup,
|
||||||
|
textarea {
|
||||||
|
margin: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role=button] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
word-wrap: normal;
|
||||||
|
}
|
||||||
|
select:disabled {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type=button],
|
||||||
|
[type=reset],
|
||||||
|
[type=submit] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
button:not(:disabled),
|
||||||
|
[type=button]:not(:disabled),
|
||||||
|
[type=reset]:not(:disabled),
|
||||||
|
[type=submit]:not(:disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: inherit;
|
||||||
|
font-size: calc(1.275rem + 0.3vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
legend {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
legend + * {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-datetime-edit-fields-wrapper,
|
||||||
|
::-webkit-datetime-edit-text,
|
||||||
|
::-webkit-datetime-edit-minute,
|
||||||
|
::-webkit-datetime-edit-hour-field,
|
||||||
|
::-webkit-datetime-edit-day-field,
|
||||||
|
::-webkit-datetime-edit-month-field,
|
||||||
|
::-webkit-datetime-edit-year-field {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-inner-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=search] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
[type=search]::-webkit-search-cancel-button {
|
||||||
|
cursor: pointer;
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* rtl:raw:
|
||||||
|
[type="tel"],
|
||||||
|
[type="url"],
|
||||||
|
[type="email"],
|
||||||
|
[type="number"] {
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-color-swatch-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
font: inherit;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
::file-selector-button {
|
||||||
|
font: inherit;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||||
@@ -0,0 +1,598 @@
|
|||||||
|
/*!
|
||||||
|
* Bootstrap Reboot v5.3.8 (https://getbootstrap.com/)
|
||||||
|
* Copyright 2011-2025 The Bootstrap Authors
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
|
*/
|
||||||
|
:root,
|
||||||
|
[data-bs-theme=light] {
|
||||||
|
--bs-blue: #0d6efd;
|
||||||
|
--bs-indigo: #6610f2;
|
||||||
|
--bs-purple: #6f42c1;
|
||||||
|
--bs-pink: #d63384;
|
||||||
|
--bs-red: #dc3545;
|
||||||
|
--bs-orange: #fd7e14;
|
||||||
|
--bs-yellow: #ffc107;
|
||||||
|
--bs-green: #198754;
|
||||||
|
--bs-teal: #20c997;
|
||||||
|
--bs-cyan: #0dcaf0;
|
||||||
|
--bs-black: #000;
|
||||||
|
--bs-white: #fff;
|
||||||
|
--bs-gray: #6c757d;
|
||||||
|
--bs-gray-dark: #343a40;
|
||||||
|
--bs-gray-100: #f8f9fa;
|
||||||
|
--bs-gray-200: #e9ecef;
|
||||||
|
--bs-gray-300: #dee2e6;
|
||||||
|
--bs-gray-400: #ced4da;
|
||||||
|
--bs-gray-500: #adb5bd;
|
||||||
|
--bs-gray-600: #6c757d;
|
||||||
|
--bs-gray-700: #495057;
|
||||||
|
--bs-gray-800: #343a40;
|
||||||
|
--bs-gray-900: #212529;
|
||||||
|
--bs-primary: #0d6efd;
|
||||||
|
--bs-secondary: #6c757d;
|
||||||
|
--bs-success: #198754;
|
||||||
|
--bs-info: #0dcaf0;
|
||||||
|
--bs-warning: #ffc107;
|
||||||
|
--bs-danger: #dc3545;
|
||||||
|
--bs-light: #f8f9fa;
|
||||||
|
--bs-dark: #212529;
|
||||||
|
--bs-primary-rgb: 13, 110, 253;
|
||||||
|
--bs-secondary-rgb: 108, 117, 125;
|
||||||
|
--bs-success-rgb: 25, 135, 84;
|
||||||
|
--bs-info-rgb: 13, 202, 240;
|
||||||
|
--bs-warning-rgb: 255, 193, 7;
|
||||||
|
--bs-danger-rgb: 220, 53, 69;
|
||||||
|
--bs-light-rgb: 248, 249, 250;
|
||||||
|
--bs-dark-rgb: 33, 37, 41;
|
||||||
|
--bs-primary-text-emphasis: #052c65;
|
||||||
|
--bs-secondary-text-emphasis: #2b2f32;
|
||||||
|
--bs-success-text-emphasis: #0a3622;
|
||||||
|
--bs-info-text-emphasis: #055160;
|
||||||
|
--bs-warning-text-emphasis: #664d03;
|
||||||
|
--bs-danger-text-emphasis: #58151c;
|
||||||
|
--bs-light-text-emphasis: #495057;
|
||||||
|
--bs-dark-text-emphasis: #495057;
|
||||||
|
--bs-primary-bg-subtle: #cfe2ff;
|
||||||
|
--bs-secondary-bg-subtle: #e2e3e5;
|
||||||
|
--bs-success-bg-subtle: #d1e7dd;
|
||||||
|
--bs-info-bg-subtle: #cff4fc;
|
||||||
|
--bs-warning-bg-subtle: #fff3cd;
|
||||||
|
--bs-danger-bg-subtle: #f8d7da;
|
||||||
|
--bs-light-bg-subtle: #fcfcfd;
|
||||||
|
--bs-dark-bg-subtle: #ced4da;
|
||||||
|
--bs-primary-border-subtle: #9ec5fe;
|
||||||
|
--bs-secondary-border-subtle: #c4c8cb;
|
||||||
|
--bs-success-border-subtle: #a3cfbb;
|
||||||
|
--bs-info-border-subtle: #9eeaf9;
|
||||||
|
--bs-warning-border-subtle: #ffe69c;
|
||||||
|
--bs-danger-border-subtle: #f1aeb5;
|
||||||
|
--bs-light-border-subtle: #e9ecef;
|
||||||
|
--bs-dark-border-subtle: #adb5bd;
|
||||||
|
--bs-white-rgb: 255, 255, 255;
|
||||||
|
--bs-black-rgb: 0, 0, 0;
|
||||||
|
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||||
|
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||||
|
--bs-body-font-size: 1rem;
|
||||||
|
--bs-body-font-weight: 400;
|
||||||
|
--bs-body-line-height: 1.5;
|
||||||
|
--bs-body-color: #212529;
|
||||||
|
--bs-body-color-rgb: 33, 37, 41;
|
||||||
|
--bs-body-bg: #fff;
|
||||||
|
--bs-body-bg-rgb: 255, 255, 255;
|
||||||
|
--bs-emphasis-color: #000;
|
||||||
|
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||||
|
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||||
|
--bs-secondary-color-rgb: 33, 37, 41;
|
||||||
|
--bs-secondary-bg: #e9ecef;
|
||||||
|
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||||
|
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||||
|
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||||
|
--bs-tertiary-bg: #f8f9fa;
|
||||||
|
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||||
|
--bs-heading-color: inherit;
|
||||||
|
--bs-link-color: #0d6efd;
|
||||||
|
--bs-link-color-rgb: 13, 110, 253;
|
||||||
|
--bs-link-decoration: underline;
|
||||||
|
--bs-link-hover-color: #0a58ca;
|
||||||
|
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||||
|
--bs-code-color: #d63384;
|
||||||
|
--bs-highlight-color: #212529;
|
||||||
|
--bs-highlight-bg: #fff3cd;
|
||||||
|
--bs-border-width: 1px;
|
||||||
|
--bs-border-style: solid;
|
||||||
|
--bs-border-color: #dee2e6;
|
||||||
|
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||||
|
--bs-border-radius: 0.375rem;
|
||||||
|
--bs-border-radius-sm: 0.25rem;
|
||||||
|
--bs-border-radius-lg: 0.5rem;
|
||||||
|
--bs-border-radius-xl: 1rem;
|
||||||
|
--bs-border-radius-xxl: 2rem;
|
||||||
|
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||||
|
--bs-border-radius-pill: 50rem;
|
||||||
|
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||||
|
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
|
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||||
|
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||||
|
--bs-focus-ring-width: 0.25rem;
|
||||||
|
--bs-focus-ring-opacity: 0.25;
|
||||||
|
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||||
|
--bs-form-valid-color: #198754;
|
||||||
|
--bs-form-valid-border-color: #198754;
|
||||||
|
--bs-form-invalid-color: #dc3545;
|
||||||
|
--bs-form-invalid-border-color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme=dark] {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bs-body-color: #dee2e6;
|
||||||
|
--bs-body-color-rgb: 222, 226, 230;
|
||||||
|
--bs-body-bg: #212529;
|
||||||
|
--bs-body-bg-rgb: 33, 37, 41;
|
||||||
|
--bs-emphasis-color: #fff;
|
||||||
|
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||||
|
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
||||||
|
--bs-secondary-color-rgb: 222, 226, 230;
|
||||||
|
--bs-secondary-bg: #343a40;
|
||||||
|
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||||
|
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
||||||
|
--bs-tertiary-color-rgb: 222, 226, 230;
|
||||||
|
--bs-tertiary-bg: #2b3035;
|
||||||
|
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||||
|
--bs-primary-text-emphasis: #6ea8fe;
|
||||||
|
--bs-secondary-text-emphasis: #a7acb1;
|
||||||
|
--bs-success-text-emphasis: #75b798;
|
||||||
|
--bs-info-text-emphasis: #6edff6;
|
||||||
|
--bs-warning-text-emphasis: #ffda6a;
|
||||||
|
--bs-danger-text-emphasis: #ea868f;
|
||||||
|
--bs-light-text-emphasis: #f8f9fa;
|
||||||
|
--bs-dark-text-emphasis: #dee2e6;
|
||||||
|
--bs-primary-bg-subtle: #031633;
|
||||||
|
--bs-secondary-bg-subtle: #161719;
|
||||||
|
--bs-success-bg-subtle: #051b11;
|
||||||
|
--bs-info-bg-subtle: #032830;
|
||||||
|
--bs-warning-bg-subtle: #332701;
|
||||||
|
--bs-danger-bg-subtle: #2c0b0e;
|
||||||
|
--bs-light-bg-subtle: #343a40;
|
||||||
|
--bs-dark-bg-subtle: #1a1d20;
|
||||||
|
--bs-primary-border-subtle: #084298;
|
||||||
|
--bs-secondary-border-subtle: #41464b;
|
||||||
|
--bs-success-border-subtle: #0f5132;
|
||||||
|
--bs-info-border-subtle: #087990;
|
||||||
|
--bs-warning-border-subtle: #997404;
|
||||||
|
--bs-danger-border-subtle: #842029;
|
||||||
|
--bs-light-border-subtle: #495057;
|
||||||
|
--bs-dark-border-subtle: #343a40;
|
||||||
|
--bs-heading-color: inherit;
|
||||||
|
--bs-link-color: #6ea8fe;
|
||||||
|
--bs-link-hover-color: #8bb9fe;
|
||||||
|
--bs-link-color-rgb: 110, 168, 254;
|
||||||
|
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||||
|
--bs-code-color: #e685b5;
|
||||||
|
--bs-highlight-color: #dee2e6;
|
||||||
|
--bs-highlight-bg: #664d03;
|
||||||
|
--bs-border-color: #495057;
|
||||||
|
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||||
|
--bs-form-valid-color: #75b798;
|
||||||
|
--bs-form-valid-border-color: #75b798;
|
||||||
|
--bs-form-invalid-color: #ea868f;
|
||||||
|
--bs-form-invalid-border-color: #ea868f;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
:root {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--bs-body-font-family);
|
||||||
|
font-size: var(--bs-body-font-size);
|
||||||
|
font-weight: var(--bs-body-font-weight);
|
||||||
|
line-height: var(--bs-body-line-height);
|
||||||
|
color: var(--bs-body-color);
|
||||||
|
text-align: var(--bs-body-text-align);
|
||||||
|
background-color: var(--bs-body-bg);
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: inherit;
|
||||||
|
border: 0;
|
||||||
|
border-top: var(--bs-border-width) solid;
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6, h5, h4, h3, h2, h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--bs-heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: calc(1.375rem + 1.5vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: calc(1.325rem + 0.9vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: calc(1.3rem + 0.6vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: calc(1.275rem + 0.3vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
-webkit-text-decoration: underline dotted;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
cursor: help;
|
||||||
|
-webkit-text-decoration-skip-ink: none;
|
||||||
|
text-decoration-skip-ink: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
dl {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol,
|
||||||
|
ul ul,
|
||||||
|
ol ul,
|
||||||
|
ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
padding: 0.1875em;
|
||||||
|
color: var(--bs-highlight-color);
|
||||||
|
background-color: var(--bs-highlight-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.75em;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: var(--bs-font-monospace);
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
pre code {
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--bs-code-color);
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
a > code {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
padding: 0.1875rem 0.375rem;
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--bs-body-bg);
|
||||||
|
background-color: var(--bs-body-color);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
kbd kbd {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
caption-side: bottom;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
color: var(--bs-secondary-color);
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: inherit;
|
||||||
|
text-align: -webkit-match-parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
tr,
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-color: inherit;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus:not(:focus-visible) {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
optgroup,
|
||||||
|
textarea {
|
||||||
|
margin: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role=button] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
word-wrap: normal;
|
||||||
|
}
|
||||||
|
select:disabled {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type=button],
|
||||||
|
[type=reset],
|
||||||
|
[type=submit] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
button:not(:disabled),
|
||||||
|
[type=button]:not(:disabled),
|
||||||
|
[type=reset]:not(:disabled),
|
||||||
|
[type=submit]:not(:disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
float: right;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: inherit;
|
||||||
|
font-size: calc(1.275rem + 0.3vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
legend {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
legend + * {
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-datetime-edit-fields-wrapper,
|
||||||
|
::-webkit-datetime-edit-text,
|
||||||
|
::-webkit-datetime-edit-minute,
|
||||||
|
::-webkit-datetime-edit-hour-field,
|
||||||
|
::-webkit-datetime-edit-day-field,
|
||||||
|
::-webkit-datetime-edit-month-field,
|
||||||
|
::-webkit-datetime-edit-year-field {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-inner-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=search] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
[type=search]::-webkit-search-cancel-button {
|
||||||
|
cursor: pointer;
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="tel"],
|
||||||
|
[type="url"],
|
||||||
|
[type="email"],
|
||||||
|
[type="number"] {
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-color-swatch-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
font: inherit;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
::file-selector-button {
|
||||||
|
font: inherit;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
|
||||||