1052 lines
23 KiB
SCSS
1052 lines
23 KiB
SCSS
/* ====
|
|
--------- (2.03) global styles start ---------
|
|
==== */
|
|
|
|
@use "../abstracts/mixins" as *;
|
|
|
|
// Modern base styles with improved typography and accessibility
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-family-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: var(--leading-normal);
|
|
color: var(--secondary-800);
|
|
background-color: var(--white);
|
|
font-size: var(--text-base);
|
|
font-weight: var(--font-weight-normal);
|
|
}
|
|
|
|
// Improved image handling
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border: 0;
|
|
outline: 0;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
// Modern icon styling
|
|
i {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-style: normal;
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
|
|
// Improved link styling
|
|
a {
|
|
color: var(--primary-600);
|
|
text-decoration: none;
|
|
transition: var(--transition-colors);
|
|
|
|
&:hover {
|
|
color: var(--primary-700);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:focus {
|
|
outline: 2px solid var(--primary-500);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
.unset {
|
|
max-width: unset;
|
|
}
|
|
|
|
.dir-rtl {
|
|
direction: rtl;
|
|
}
|
|
|
|
.bg-img {
|
|
@include background(var(--template-color), no-repeat, cover, center center);
|
|
}
|
|
|
|
.slick-slide {
|
|
margin: 0px 12px;
|
|
|
|
img {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.slick-list {
|
|
margin: 0px -12px;
|
|
}
|
|
|
|
.fw-4 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.fw-9 {
|
|
font-weight: 900 !important;
|
|
}
|
|
|
|
.fw-7 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.fw-6 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.fw-5 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--secondary-color) !important;
|
|
}
|
|
|
|
.text-tertiary {
|
|
color: var(--tertiary-color) !important;
|
|
}
|
|
|
|
.text-quaternary {
|
|
color: var(--enterprise-blue) !important;
|
|
}
|
|
|
|
.text-quinary {
|
|
color: var(--quinary-color) !important;
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
.bg-secondary {
|
|
background-color: var(--secondary-color);
|
|
}
|
|
|
|
.bg-tertiary {
|
|
background-color: var(--tertiary-color);
|
|
}
|
|
|
|
.bg-quaternary {
|
|
background-color: var(--enterprise-blue);
|
|
}
|
|
|
|
.bg-quinary {
|
|
background-color: var(--quinary-color);
|
|
}
|
|
|
|
.bg-black {
|
|
background-color: black;
|
|
}
|
|
|
|
.fm {
|
|
font-family: var(--mont);
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.mh-260 {
|
|
min-height: 260px;
|
|
}
|
|
|
|
.mh-220 {
|
|
min-height: 220px;
|
|
}
|
|
|
|
.mh-300 {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.mh-400 {
|
|
min-height: 400px;
|
|
}
|
|
|
|
.pls-60 {
|
|
padding-left: 60px;
|
|
}
|
|
|
|
.overflow-x-clip {
|
|
overflow-x: clip;
|
|
}
|
|
|
|
.vertical-column-gap {
|
|
row-gap: 24px;
|
|
}
|
|
|
|
.vertical-column-gap-md {
|
|
row-gap: 40px;
|
|
}
|
|
|
|
.vertical-column-gap-lg {
|
|
row-gap: 60px;
|
|
}
|
|
|
|
.pt-120 {
|
|
padding-top: 120px;
|
|
}
|
|
|
|
.pb-120 {
|
|
padding-bottom: 120px;
|
|
}
|
|
|
|
.mt-80 {
|
|
margin-top: 80px;
|
|
}
|
|
|
|
.mb-80 {
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.mt-60 {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.mt-40 {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.mt-8 {
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.mt-12 {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.mb-16 {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mt-24 {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.mb-24 {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.mt-30 {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.mb-12 {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.mb-8 {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mb-24 {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.mb-30 {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.mb-40 {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.pl-100 {
|
|
padding-left: 100px;
|
|
}
|
|
|
|
.h-100 {
|
|
height: 100%;
|
|
}
|
|
|
|
.sticky-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.sticky-item {
|
|
position: sticky;
|
|
top: 220px;
|
|
}
|
|
|
|
|
|
.social {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
|
|
li {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
a {
|
|
color: var(--tertiary-color);
|
|
background-color: #f0efff;
|
|
@include box(40px);
|
|
font-size: 16px;
|
|
&:hover {
|
|
color: var(--black);
|
|
background-color: var(--primary-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.fix-top {
|
|
padding-top: 220px;
|
|
}
|
|
|
|
@keyframes rotateInfinite {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.video-frame {
|
|
position: relative;
|
|
@include box(160px);
|
|
font-size: 30px;
|
|
color: white;
|
|
z-index: 1;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
inset: 0px;
|
|
animation: rotateInfinite 24s linear infinite;
|
|
animation-play-state: running;
|
|
z-index: -1;
|
|
}
|
|
|
|
&:hover {
|
|
color: white;
|
|
img {
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
}
|
|
|
|
.parallax-image {
|
|
transform: scale(1.2);
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
@keyframes moveInfinite {
|
|
from {
|
|
left: 0px;
|
|
}
|
|
|
|
to {
|
|
left: 70%;
|
|
}
|
|
}
|
|
|
|
.op-text {
|
|
color: rgba(0, 0, 0, 0.2);
|
|
font-size: 100px;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.group {
|
|
li {
|
|
list-style-type: disc;
|
|
margin-bottom: 16px;
|
|
&:nth-last-of-type(1) {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
|
|
button,
|
|
a {
|
|
@include box(44px);
|
|
border: 0px;
|
|
border-radius: 10px;
|
|
background-color: #120f23;
|
|
color: white;
|
|
transition: var(--transition);
|
|
|
|
&:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border: 0px;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
button {
|
|
&:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.parallax-image-wrap {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.modal-video {
|
|
background-color: rgba(0, 0, 0, 0.8) !important;
|
|
}
|
|
|
|
.tp-error {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 100vw;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// About Page Styles
|
|
.about-hero {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.about-hero__content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.about-hero__stats {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.stat-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
transition: all 0.3s ease;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: 0.5px;
|
|
transition: all 0.3s ease;
|
|
|
|
&.btn-primary {
|
|
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
|
|
border: none;
|
|
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
|
|
}
|
|
}
|
|
|
|
&.btn-outline-light {
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.about-content {
|
|
.about-content__text {
|
|
h2 {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
p {
|
|
color: #6c757d;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
padding: 12px 24px;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.about-content__features {
|
|
.feature-list {
|
|
.feature-item {
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid #f8f9fa;
|
|
transition: all 0.3s ease;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:hover {
|
|
background: rgba(102, 126, 234, 0.05);
|
|
border-radius: 8px;
|
|
padding-left: 16px;
|
|
margin-left: -16px;
|
|
margin-right: -16px;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
span {
|
|
font-size: 16px;
|
|
color: #495057;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.about-services {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
|
.service-card {
|
|
background: white;
|
|
border: 1px solid #e9ecef;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 12px;
|
|
padding: 32px;
|
|
height: 100%;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #667eea, #764ba2);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
&:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
|
&::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.icon-wrapper {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.icon-wrapper {
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
margin-bottom: 24px;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
&:hover::after {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
color: #2c3e50;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
p {
|
|
color: #6c757d;
|
|
line-height: 1.6;
|
|
margin-bottom: 24px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
border: 2px solid #667eea;
|
|
color: #667eea;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
text-transform: none;
|
|
letter-spacing: 0.5px;
|
|
padding: 8px 16px;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
background: #667eea;
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.about-cta {
|
|
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.cta-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
h2 {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: 0.5px;
|
|
transition: all 0.3s ease;
|
|
|
|
&.btn-primary {
|
|
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
|
|
border: none;
|
|
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
|
|
}
|
|
}
|
|
|
|
&.btn-outline-light {
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Animation classes
|
|
.fade-up {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.6s ease;
|
|
|
|
&.animate {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
// Utility classes for about page
|
|
.text-white-50 {
|
|
color: rgba(255, 255, 255, 0.7) !important;
|
|
}
|
|
|
|
.bg-white-10 {
|
|
background: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
.backdrop-blur {
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.rounded-12 {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.shadow-sm {
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.gap-16 {
|
|
gap: 16px;
|
|
}
|
|
|
|
.g-24 {
|
|
--bs-gutter-x: 24px;
|
|
--bs-gutter-y: 24px;
|
|
}
|
|
|
|
.mb-40 {
|
|
margin-bottom: 40px !important;
|
|
}
|
|
|
|
.p-32 {
|
|
padding: 32px !important;
|
|
}
|
|
|
|
.me-16 {
|
|
margin-right: 16px !important;
|
|
}
|
|
|
|
// Modern utility classes
|
|
// Spacing utilities
|
|
@for $i from 0 through 12 {
|
|
.p-#{$i} { padding: var(--space-#{$i}) !important; }
|
|
.pt-#{$i} { padding-top: var(--space-#{$i}) !important; }
|
|
.pr-#{$i} { padding-right: var(--space-#{$i}) !important; }
|
|
.pb-#{$i} { padding-bottom: var(--space-#{$i}) !important; }
|
|
.pl-#{$i} { padding-left: var(--space-#{$i}) !important; }
|
|
.px-#{$i} { padding-left: var(--space-#{$i}) !important; padding-right: var(--space-#{$i}) !important; }
|
|
.py-#{$i} { padding-top: var(--space-#{$i}) !important; padding-bottom: var(--space-#{$i}) !important; }
|
|
|
|
.m-#{$i} { margin: var(--space-#{$i}) !important; }
|
|
.mt-#{$i} { margin-top: var(--space-#{$i}) !important; }
|
|
.mr-#{$i} { margin-right: var(--space-#{$i}) !important; }
|
|
.mb-#{$i} { margin-bottom: var(--space-#{$i}) !important; }
|
|
.ml-#{$i} { margin-left: var(--space-#{$i}) !important; }
|
|
.mx-#{$i} { margin-left: var(--space-#{$i}) !important; margin-right: var(--space-#{$i}) !important; }
|
|
.my-#{$i} { margin-top: var(--space-#{$i}) !important; margin-bottom: var(--space-#{$i}) !important; }
|
|
}
|
|
|
|
// Text utilities
|
|
.text-xs { font-size: var(--text-xs) !important; }
|
|
.text-sm { font-size: var(--text-sm) !important; }
|
|
.text-base { font-size: var(--text-base) !important; }
|
|
.text-lg { font-size: var(--text-lg) !important; }
|
|
.text-xl { font-size: var(--text-xl) !important; }
|
|
.text-2xl { font-size: var(--text-2xl) !important; }
|
|
.text-3xl { font-size: var(--text-3xl) !important; }
|
|
.text-4xl { font-size: var(--text-4xl) !important; }
|
|
.text-5xl { font-size: var(--text-5xl) !important; }
|
|
.text-6xl { font-size: var(--text-6xl) !important; }
|
|
|
|
.font-thin { font-weight: var(--font-weight-thin) !important; }
|
|
.font-light { font-weight: var(--font-weight-light) !important; }
|
|
.font-normal { font-weight: var(--font-weight-normal) !important; }
|
|
.font-medium { font-weight: var(--font-weight-medium) !important; }
|
|
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
|
|
.font-bold { font-weight: var(--font-weight-bold) !important; }
|
|
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }
|
|
.font-black { font-weight: var(--font-weight-black) !important; }
|
|
|
|
.leading-none { line-height: var(--leading-none) !important; }
|
|
.leading-tight { line-height: var(--leading-tight) !important; }
|
|
.leading-snug { line-height: var(--leading-snug) !important; }
|
|
.leading-normal { line-height: var(--leading-normal) !important; }
|
|
.leading-relaxed { line-height: var(--leading-relaxed) !important; }
|
|
.leading-loose { line-height: var(--leading-loose) !important; }
|
|
|
|
// Color utilities
|
|
.text-primary { color: var(--primary-600) !important; }
|
|
.text-primary-light { color: var(--primary-400) !important; }
|
|
.text-primary-dark { color: var(--primary-800) !important; }
|
|
.text-secondary { color: var(--secondary-600) !important; }
|
|
.text-secondary-light { color: var(--secondary-400) !important; }
|
|
.text-secondary-dark { color: var(--secondary-800) !important; }
|
|
.text-success { color: var(--success) !important; }
|
|
.text-warning { color: var(--warning) !important; }
|
|
.text-error { color: var(--error) !important; }
|
|
.text-info { color: var(--info) !important; }
|
|
.text-white { color: var(--white) !important; }
|
|
.text-black { color: var(--black) !important; }
|
|
|
|
.bg-primary { background-color: var(--primary-600) !important; }
|
|
.bg-primary-light { background-color: var(--primary-400) !important; }
|
|
.bg-primary-dark { background-color: var(--primary-800) !important; }
|
|
.bg-secondary { background-color: var(--secondary-600) !important; }
|
|
.bg-secondary-light { background-color: var(--secondary-400) !important; }
|
|
.bg-secondary-dark { background-color: var(--secondary-800) !important; }
|
|
.bg-success { background-color: var(--success) !important; }
|
|
.bg-warning { background-color: var(--warning) !important; }
|
|
.bg-error { background-color: var(--error) !important; }
|
|
.bg-info { background-color: var(--info) !important; }
|
|
.bg-white { background-color: var(--white) !important; }
|
|
.bg-black { background-color: var(--black) !important; }
|
|
|
|
// Border utilities
|
|
.border { border: 1px solid var(--secondary-300) !important; }
|
|
.border-t { border-top: 1px solid var(--secondary-300) !important; }
|
|
.border-r { border-right: 1px solid var(--secondary-300) !important; }
|
|
.border-b { border-bottom: 1px solid var(--secondary-300) !important; }
|
|
.border-l { border-left: 1px solid var(--secondary-300) !important; }
|
|
.border-primary { border-color: var(--primary-600) !important; }
|
|
.border-secondary { border-color: var(--secondary-300) !important; }
|
|
|
|
.rounded-none { border-radius: var(--radius-none) !important; }
|
|
.rounded-sm { border-radius: var(--radius-sm) !important; }
|
|
.rounded { border-radius: var(--radius-base) !important; }
|
|
.rounded-md { border-radius: var(--radius-md) !important; }
|
|
.rounded-lg { border-radius: var(--radius-lg) !important; }
|
|
.rounded-xl { border-radius: var(--radius-xl) !important; }
|
|
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
|
|
.rounded-3xl { border-radius: var(--radius-3xl) !important; }
|
|
.rounded-full { border-radius: var(--radius-full) !important; }
|
|
|
|
// Shadow utilities
|
|
.shadow-none { box-shadow: var(--shadow-none) !important; }
|
|
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
|
|
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
|
|
.shadow { box-shadow: var(--shadow-base) !important; }
|
|
.shadow-md { box-shadow: var(--shadow-md) !important; }
|
|
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
|
|
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
|
|
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }
|
|
.shadow-inner { box-shadow: var(--shadow-inner) !important; }
|
|
|
|
// Display utilities
|
|
.block { display: block !important; }
|
|
.inline-block { display: inline-block !important; }
|
|
.inline { display: inline !important; }
|
|
.flex { display: flex !important; }
|
|
.inline-flex { display: inline-flex !important; }
|
|
.grid { display: grid !important; }
|
|
.hidden { display: none !important; }
|
|
|
|
// Flexbox utilities
|
|
.flex-row { flex-direction: row !important; }
|
|
.flex-col { flex-direction: column !important; }
|
|
.flex-wrap { flex-wrap: wrap !important; }
|
|
.flex-nowrap { flex-wrap: nowrap !important; }
|
|
.items-start { align-items: flex-start !important; }
|
|
.items-center { align-items: center !important; }
|
|
.items-end { align-items: flex-end !important; }
|
|
.justify-start { justify-content: flex-start !important; }
|
|
.justify-center { justify-content: center !important; }
|
|
.justify-end { justify-content: flex-end !important; }
|
|
.justify-between { justify-content: space-between !important; }
|
|
.justify-around { justify-content: space-around !important; }
|
|
|
|
// Position utilities
|
|
.static { position: static !important; }
|
|
.relative { position: relative !important; }
|
|
.absolute { position: absolute !important; }
|
|
.fixed { position: fixed !important; }
|
|
.sticky { position: sticky !important; }
|
|
|
|
// Width and height utilities
|
|
.w-full { width: 100% !important; }
|
|
.w-auto { width: auto !important; }
|
|
.w-screen { width: 100vw !important; }
|
|
.h-full { height: 100% !important; }
|
|
.h-auto { height: auto !important; }
|
|
.h-screen { height: 100vh !important; }
|
|
|
|
// Opacity utilities
|
|
.opacity-0 { opacity: 0 !important; }
|
|
.opacity-25 { opacity: 0.25 !important; }
|
|
.opacity-50 { opacity: 0.5 !important; }
|
|
.opacity-75 { opacity: 0.75 !important; }
|
|
.opacity-100 { opacity: 1 !important; }
|
|
|
|
// Transition utilities
|
|
.transition-none { transition: none !important; }
|
|
.transition-all { transition: var(--transition-all) !important; }
|
|
.transition-colors { transition: var(--transition-colors) !important; }
|
|
.transition-opacity { transition: var(--transition-opacity) !important; }
|
|
.transition-shadow { transition: var(--transition-shadow) !important; }
|
|
.transition-transform { transition: var(--transition-transform) !important; }
|
|
|
|
// Transform utilities
|
|
.transform { transform: translateZ(0) !important; }
|
|
.scale-0 { transform: scale(0) !important; }
|
|
.scale-50 { transform: scale(0.5) !important; }
|
|
.scale-75 { transform: scale(0.75) !important; }
|
|
.scale-90 { transform: scale(0.9) !important; }
|
|
.scale-95 { transform: scale(0.95) !important; }
|
|
.scale-100 { transform: scale(1) !important; }
|
|
.scale-105 { transform: scale(1.05) !important; }
|
|
.scale-110 { transform: scale(1.1) !important; }
|
|
.scale-125 { transform: scale(1.25) !important; }
|
|
.scale-150 { transform: scale(1.5) !important; }
|
|
|
|
// Modern glassmorphism utilities
|
|
.glass {
|
|
@include glassmorphism;
|
|
}
|
|
|
|
.glass-dark {
|
|
@include glassmorphism-dark;
|
|
}
|
|
|
|
// Gradient text utilities
|
|
.gradient-text-primary {
|
|
@include gradient-text(linear-gradient(135deg, var(--primary-600), var(--primary-400)));
|
|
}
|
|
|
|
.gradient-text-secondary {
|
|
@include gradient-text(linear-gradient(135deg, var(--secondary-600), var(--secondary-400)));
|
|
}
|
|
|
|
// Hover utilities
|
|
.hover-lift {
|
|
@include hover-lift;
|
|
}
|
|
|
|
.hover-scale {
|
|
@include hover-scale;
|
|
}
|
|
|
|
// Responsive adjustments for about page
|
|
@media (max-width: 768px) {
|
|
.about-hero {
|
|
padding: 80px 0 60px;
|
|
|
|
h1 {
|
|
font-size: 32px !important;
|
|
line-height: 40px !important;
|
|
}
|
|
|
|
.stat-card {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
.about-content {
|
|
padding: 60px 0;
|
|
|
|
h2 {
|
|
font-size: 28px !important;
|
|
line-height: 36px !important;
|
|
}
|
|
}
|
|
|
|
.about-services {
|
|
padding: 60px 0;
|
|
|
|
.service-card {
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
|
|
.about-cta {
|
|
padding: 60px 0;
|
|
|
|
h2 {
|
|
font-size: 28px !important;
|
|
line-height: 36px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.about-hero {
|
|
.btn {
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.about-cta {
|
|
.btn {
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ====
|
|
--------- (2.03) global styles end ---------
|
|
==== */
|