initial commit
This commit is contained in:
@@ -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>
|
||||
+5445
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 776 KiB |
Binary file not shown.
|
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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Vendored
+614
@@ -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;
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+610
@@ -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;
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
+2106
File diff suppressed because it is too large
Load Diff
+2080
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+2118
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
+4085
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+4084
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+601
@@ -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 */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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 */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+5406
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+5397
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+12048
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+10888
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+12021
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+6312
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user