/*
* Swaastik Yog School - Style Guide
* Extracted from: https://swaastikyogschool.com/
* Date: 2025-10-25
*/
/* ==========================================
CSS VARIABLES - COLOR PALETTE
========================================== */
:root {
/* Primary Colors */
--color-primary: #242424;
--color-secondary: #000000;
--color-white: #FFFFFF;
/* Accent Colors */
--color-purple: #610981;
--color-orange: #FCA631;
--color-gold: #F9A517;
--color-teal: #12A397;
--color-teal-dark: #119F93;
/* Background Colors */
--bg-light-blue: #F9FBFF;
--bg-light-gray: #F5F5F7;
--bg-overlay-light: #FFFFFF2B;
--bg-overlay-dark: #00000099;
--bg-overlay-darker: #000000CC;
--bg-gradient: #CFCFCF3B;
--bg-card-white: #FFFFFFA1;
/* Text Colors */
--text-primary: #000000;
--text-white: #FFFFFF;
--text-light: #FFFFFF2B;
/* Interactive States */
--color-hover: #332724a;
/* Shadows */
--shadow-light: 0px 3px 10px rgba(0, 0, 0, 0.1);
--shadow-medium: 0px 0px 60px rgba(0, 0, 0, 0.1);
/* Border Radius */
--radius-small: 5px;
--radius-medium: 14px;
--radius-large: 15px;
--radius-button: 30px;
--radius-icon: 80px;
}
/* ==========================================
TYPOGRAPHY
========================================== */
/* Font Imports (Add these to your HTML ) */
/*
*/
/* Base Typography */
body {
font-family: "Quicksand", sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.6;
}
/* Headings */
h1, .heading-1 {
font-family: "Philosopher", sans-serif;
font-size: 48px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
h2, .heading-2 {
font-family: "Philosopher", sans-serif;
font-size: 39px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
h3, .heading-3 {
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
}
h4, .heading-4 {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 25px;
font-weight: 400;
color: var(--text-primary);
}
h5, .heading-5 {
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
}
/* Body Text Variants */
.text-body {
font-family: "Quicksand", sans-serif;
font-size: 16px;
font-weight: 500;
}
.text-accent {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.text-white {
color: var(--text-white);
}
/* ==========================================
BUTTONS
========================================== */
.btn {
display: inline-block;
padding: 12px 30px;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 16px;
font-weight: 600;
text-align: center;
text-decoration: none;
border: 0px solid transparent;
border-radius: var(--radius-button);
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background-color: var(--color-purple);
color: var(--color-white);
}
.btn-primary:hover {
background-color: var(--color-orange);
}
.btn-secondary {
background-color: var(--color-orange);
color: var(--color-white);
}
.btn-secondary:hover {
background-color: var(--color-purple);
}
.btn-gold {
background-color: var(--color-gold);
color: var(--color-white);
}
.btn-gold:hover {
background-color: var(--color-hover);
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--color-purple);
color: var(--color-purple);
}
.btn-outline:hover {
background-color: var(--color-purple);
color: var(--color-white);
}
/* ==========================================
FORM ELEMENTS
========================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 12px 16px;
font-family: "Quicksand", sans-serif;
font-size: 16px;
background-color: var(--bg-light-blue);
border: 1px solid var(--color-teal);
border-radius: var(--radius-small);
transition: all 0.3s ease;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
background-color: var(--color-white);
border-color: var(--color-purple);
box-shadow: var(--shadow-light);
}
textarea {
min-height: 120px;
resize: vertical;
}
::placeholder {
color: rgba(0, 0, 0, 0.5);
}
/* ==========================================
CARDS & CONTAINERS
========================================== */
.card {
background-color: var(--color-white);
border-radius: var(--radius-large);
padding: 30px;
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
}
.card:hover {
box-shadow: var(--shadow-medium);
transform: translateY(-5px);
}
.card-light {
background-color: var(--bg-light-blue);
border-radius: var(--radius-medium);
}
.card-white-overlay {
background-color: var(--bg-card-white);
backdrop-filter: blur(10px);
}
/* Counter/Stats Boxes */
.counter-box {
background-color: var(--bg-light-blue);
border-radius: var(--radius-medium);
padding: 25px;
text-align: center;
box-shadow: var(--shadow-light);
}
/* ==========================================
LINKS
========================================== */
a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--color-orange);
}
.link-white {
color: var(--color-white);
}
.link-white:hover {
color: var(--color-orange);
}
/* ==========================================
SECTIONS & BACKGROUNDS
========================================== */
.section {
padding: 80px 0;
}
.section-light {
background-color: var(--bg-light-blue);
}
.section-gray {
background-color: var(--bg-light-gray);
}
.section-dark {
background-color: var(--color-primary);
color: var(--text-white);
}
.section-overlay {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.section-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--bg-overlay-dark);
}
/* ==========================================
ICONS & DECORATIVE ELEMENTS
========================================== */
.icon-circle {
width: 80px;
height: 80px;
background-color: var(--color-purple);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
}
.divider {
width: 60px;
height: 4px;
background-color: var(--color-orange);
margin: 20px 0;
}
.divider-center {
margin-left: auto;
margin-right: auto;
}
.divider-thick {
height: 5px;
}
/* Pattern Backgrounds */
.pattern-background {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* ==========================================
UTILITY CLASSES
========================================== */
/* Spacing */
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 50px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }
.mb-5 { margin-bottom: 50px; }
.pt-1 { padding-top: 10px; }
.pt-2 { padding-top: 20px; }
.pt-3 { padding-top: 30px; }
.pt-4 { padding-top: 40px; }
.pt-5 { padding-top: 50px; }
.pb-1 { padding-bottom: 10px; }
.pb-2 { padding-bottom: 20px; }
.pb-3 { padding-bottom: 30px; }
.pb-4 { padding-bottom: 40px; }
.pb-5 { padding-bottom: 50px; }
/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Display */
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
/* Flexbox Utilities */
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Opacity Variants */
.opacity-10 { opacity: 0.1; }
.opacity-30 { opacity: 0.3; }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
/* Border Radius */
.rounded-sm { border-radius: var(--radius-small); }
.rounded-md { border-radius: var(--radius-medium); }
.rounded-lg { border-radius: var(--radius-large); }
.rounded-full { border-radius: 50%; }
/* Box Shadows */
.shadow-light { box-shadow: var(--shadow-light); }
.shadow-medium { box-shadow: var(--shadow-medium); }
/* Background Colors */
.bg-purple { background-color: var(--color-purple); }
.bg-orange { background-color: var(--color-orange); }
.bg-teal { background-color: var(--color-teal); }
.bg-light-blue { background-color: var(--bg-light-blue); }
.bg-light-gray { background-color: var(--bg-light-gray); }
.bg-white { background-color: var(--color-white); }
/* Text Colors */
.text-purple { color: var(--color-purple); }
.text-orange { color: var(--color-orange); }
.text-teal { color: var(--color-teal); }
.text-black { color: var(--text-primary); }
/* ==========================================
RESPONSIVE TYPOGRAPHY
========================================== */
@media (max-width: 768px) {
h1, .heading-1 {
font-size: 36px;
}
h2, .heading-2 {
font-size: 28px;
}
h3, .heading-3 {
font-size: 16px;
}
h4, .heading-4 {
font-size: 20px;
}
.section {
padding: 50px 0;
}
}
@media (max-width: 480px) {
h1, .heading-1 {
font-size: 28px;
}
h2, .heading-2 {
font-size: 24px;
}
body {
font-size: 14px;
}
.btn {
padding: 10px 24px;
font-size: 14px;
}
}
/* ==========================================
NAVIGATION & DROPDOWN MENUS
========================================== */
/* Desktop Navigation */
nav ul {
position: relative;
}
nav .dropdown {
position: relative;
}
nav .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--color-white);
box-shadow: var(--shadow-medium);
border-radius: var(--radius-small);
padding: 10px 0;
margin-top: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
list-style: none;
}
nav .dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
nav .dropdown-menu li {
margin: 0;
padding: 0;
}
nav .dropdown-menu a {
display: block;
padding: 12px 20px;
color: var(--color-primary);
text-decoration: none;
transition: all 0.3s ease;
font-size: 15px;
}
nav .dropdown-menu a:hover,
nav .dropdown-menu a:focus {
background-color: var(--bg-light-blue);
color: var(--color-purple);
outline: none;
}
/* Focus States for Accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
outline: 3px solid var(--color-orange);
outline-offset: 2px;
}
nav a:focus {
outline: 2px solid var(--color-orange);
outline-offset: 4px;
border-radius: 3px;
}
.btn:focus {
outline: 3px solid var(--color-orange);
outline-offset: 3px;
}
/* Skip to main content link for accessibility */
.skip-to-main {
position: absolute;
top: -40px;
left: 0;
background: var(--color-purple);
color: var(--color-white);
padding: 8px 16px;
text-decoration: none;
z-index: 10000;
}
.skip-to-main:focus {
top: 0;
}
/* Mobile Navigation */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 10px;
position: relative;
z-index: 1001;
}
.mobile-menu-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: var(--color-primary);
margin: 5px 0;
transition: all 0.3s ease;
}
.mobile-menu-toggle:focus {
outline: 2px solid var(--color-orange);
outline-offset: 4px;
}
/* Hamburger animation when active */
body.mobile-nav-active .mobile-menu-toggle span:nth-child(1) {
transform: rotate(45deg) translate(7px, 7px);
}
body.mobile-nav-active .mobile-menu-toggle span:nth-child(2) {
opacity: 0;
}
body.mobile-nav-active .mobile-menu-toggle span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
.mobile-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-white);
z-index: 1000;
text-align: center;
padding-top: 100px;
overflow-y: auto;
}
.mobile-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-nav ul li {
margin-bottom: 20px;
}
.mobile-nav ul li a {
font-size: 24px;
color: var(--color-primary);
text-decoration: none;
padding: 10px 20px;
display: inline-block;
transition: all 0.3s ease;
}
.mobile-nav ul li a:hover,
.mobile-nav ul li a:focus {
color: var(--color-purple);
background-color: var(--bg-light-blue);
border-radius: var(--radius-small);
}
/* Form Error States */
input.error,
textarea.error,
select.error {
border-color: #d8000c !important;
background-color: #ffe6e6 !important;
}
.error-message {
color: #d8000c;
font-size: 14px;
margin-top: 5px;
display: block;
}
/* ==========================================
RESPONSIVE VIDEO EMBEDS
========================================== */
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
width: 100%;
}
.video-item {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
width: 100%;
border-radius: var(--radius-medium);
}
.video-item iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 768px) {
#nav-menu {
display: none;
}
.mobile-menu-toggle {
display: block;
}
body.mobile-nav-active .mobile-nav {
display: block;
}
body.mobile-nav-active {
overflow: hidden;
}
/* Video grid - single column on mobile */
.video-grid {
grid-template-columns: 1fr !important;
gap: 20px;
}
/* Ensure videos don't cause horizontal scroll */
.video-section,
.video-grid,
.video-item {
max-width: 100%;
overflow: hidden;
}
}
@media (max-width: 480px) {
.video-grid {
gap: 15px;
}
}
/* ==========================================
COLOR CONTRAST IMPROVEMENTS (WCAG AA/AAA)
========================================== */
/* Improved text color for better contrast */
.testimonial-text,
.blog-excerpt,
.feature-item p,
.course-card p {
color: #555 !important; /* 7.02:1 contrast ratio - AAA compliant */
}
/* Ensure sufficient contrast for secondary text */
.blog-meta,
.contact-item-icon + div {
color: #666; /* 5.74:1 contrast ratio - AA compliant */
}
/* Link contrast improvements */
a[style*="color: var(--color-purple)"] {
font-weight: 500; /* Helps readability even with good contrast */
}
/* Ensure social links have good contrast */
.social-link svg {
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}