initial commit

This commit is contained in:
2026-07-03 15:50:14 -04:00
commit 8729c1e325
148 changed files with 99618 additions and 0 deletions
+5445
View File
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

+153
View File
@@ -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);
})();
+85
View File
@@ -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';
+64
View File
@@ -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;
}
+9
View File
@@ -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;
}
}
+144
View File
@@ -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;
}
}
}
}
+30
View File
@@ -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);
}
+60
View File
@@ -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
+55
View File
@@ -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%);
}
}
}
}
+35
View File
@@ -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);
}
}
+33
View File
@@ -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;
}
}
+14
View File
@@ -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';
+481
View File
@@ -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);
}
}
}
}
}
+272
View File
@@ -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;
}
}
}
+92
View File
@@ -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;
}
}
}
}
+177
View File
@@ -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;
}
}
}
}
}
}
+67
View File
@@ -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;
}
}
}
+509
View File
@@ -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;
}
}
}
}
+114
View File
@@ -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;
}
}
}
+96
View File
@@ -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;
}
}
}
}
+108
View File
@@ -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;
}
}
}
+176
View File
@@ -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 */
}
+83
View File
@@ -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;
}
}
}
}
}
+614
View File
@@ -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;
+1
View File
File diff suppressed because one or more lines are too long
+610
View File
@@ -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;
+1
View File
File diff suppressed because one or more lines are too long
+1
View File
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
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 it is too large Load Diff
Binary file not shown.
Binary file not shown.
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
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
View File
@@ -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
+598
View File
@@ -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
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
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
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 it is too large Load Diff
File diff suppressed because one or more lines are too long
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
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
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