/*
Theme Name: TAGHAT Bootstrap Theme
Theme URI: https://taghat.ir
Description: قالب اختصاصی انجمن ملی بچه‌های طاقت — نسخه ۴.۰. سیستم احراز هویت کامل، شمسی، وریفای، مدیریت دستگاه‌ها، نقش‌ها، لاگ امنیتی، تیم CPT، آموزش، پنل پیشرفته، حالت تاریک، لوگوی شفاف، آیکون‌های شبکه اجتماعی واقعی و شورت‌کد ورود/ثبت‌نام مینیمال.
Author: TAGHAT
Author URI: https://taghat.ir
Version: 4.7.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
Tags: rtl-language-support, custom-menu, featured-images, full-width-template, theme-options
Text Domain: taghat
*/

:root {
--primary: #2C6FE0;
--primary-dark: #1B4FB8;
--primary-deep: #0F3A8C;
--secondary: #8AA9F0;

--amber: #F2A33D;
--amber-dark: #D88420;
--amber-light: #FDE6C4;
--accent: #D6F0EA;
--accent-dark: #6BC4B3;
--bg: #F4F8FC;
--bg-warm: #FFF8EF;
--surface: #FFFFFF;
--surface-glass: rgba(255,255,255,0.86);
--text: #1A2B4A;
--text-muted: #5C6B85;
--border: rgba(15,58,140,0.08);
--shadow-sm: 0 4px 16px rgba(27,79,184,0.08);
--shadow-md: 0 12px 40px rgba(27,79,184,0.13);
--shadow-lg: 0 30px 80px rgba(27,79,184,0.16);
--shadow-amber: 0 12px 32px rgba(216,132,32,0.22);
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 28px;
--radius-xl: 40px;
--transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Vazirmatn', sans-serif;
background: linear-gradient(150deg, #F4F8FC 0%, #EEF4FF 45%, #FFF8EF 100%);
background-attachment: fixed;
color: var(--text);
min-height: 100vh;
direction: rtl;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
transition: var(--transition);
}
::selection {
background: var(--amber-light);
color: var(--primary-deep);
}
h1,h2,h3,h4,h5,h6 {
font-weight: 800;
line-height: 1.3;
color: var(--text);
}
.text-amber { color: var(--amber-dark) !important; }
.text-gradient-brand {
background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 60%, var(--amber-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.btn {
font-family: 'Vazirmatn', sans-serif;
font-weight: 700;
border-radius: var(--radius-md);
padding: 12px 28px;
transition: var(--transition);
border: none;
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0);
transition: var(--transition);
}
.btn:hover::after {
background: rgba(255,255,255,0.12);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #fff !important;
}
.btn-outline-primary {
border: 2px solid var(--primary);
color: var(--primary) !important;
background: transparent;
}
.btn-outline-primary:hover {
background: var(--primary);
color: #fff !important;
}
.btn-amber {
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
color: #fff !important;
}
.btn-amber:hover {
box-shadow: var(--shadow-amber);
}
.btn-light-glass {
background: var(--surface-glass);
backdrop-filter: blur(10px);
color: var(--text) !important;
border: 1px solid var(--border);
}
.btn-sm-pill {
padding: 8px 18px;
font-size: 14px;
border-radius: 99px;
}
.container {
max-width: 1280px;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--accent), rgba(255,255,255,0.9));
border: 1px solid var(--accent-dark);
border-radius: 50px;
padding: 8px 20px;
font-weight: 700;
font-size: 14px;
color: var(--primary-dark);
}
.section-eyebrow.amber {
background: linear-gradient(135deg, var(--amber-light), rgba(255,255,255,0.9));
border-color: var(--amber);
color: var(--amber-dark);
}
.main-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: rgba(255,255,255,0.82);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 1px 0 var(--border), 0 8px 30px rgba(15,58,140,0.05);
transition: var(--transition);
}
.main-header.scrolled {
background: rgba(255,255,255,0.97);
box-shadow: 0 4px 30px rgba(15,58,140,0.10);
}
.navbar {
min-height: 90px;
padding: 0 1rem;
}
.site-logo {
width: 64px;
height: 64px;
object-fit: contain;
}
.navbar-brand img,
.navbar-brand .custom-logo {
width: 64px !important;
height: 64px !important;
max-width: 64px;
max-height: 64px;
object-fit: contain;
display: block;
}
.navbar-brand {
font-size: 22px;
font-weight: 800;
color: var(--text) !important;
gap: 12px;
}
.navbar-nav {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
}
.navbar-nav li {
list-style: none;
}
.navbar-nav li a {
display: block;
padding: 8px 14px;
font-weight: 600;
color: var(--text) !important;
border-radius: var(--radius-sm);
text-decoration: none !important;
transition: var(--transition);
white-space: nowrap;
}
.navbar-nav li a:hover {
background: var(--bg);
color: var(--primary) !important;
}
.navbar-nav li.current-menu-item > a,
.navbar-nav li.current_page_item > a {
color: var(--primary) !important;
background: rgba(44,111,224,0.1);
}
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 110px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: -200px;
left: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(44,111,224,0.12) 0%, transparent 70%);
pointer-events: none;
}
.hero-section::after {
content: '';
position: absolute;
bottom: -200px;
right: -200px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(242,163,61,0.14) 0%, transparent 70%);
pointer-events: none;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--accent), rgba(255,255,255,0.9));
border: 1px solid var(--accent-dark);
border-radius: 50px;
padding: 10px 22px;
font-weight: 700;
font-size: 15px;
color: var(--primary-dark);
}
.hero-title {
font-size: clamp(40px, 5vw, 68px);
font-weight: 900;
line-height: 1.25;
margin-top: 20px;
background: linear-gradient(135deg, var(--text) 0%, var(--primary-dark) 70%, var(--amber-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-text {
font-size: 18px;
color: var(--text-muted);
line-height: 2;
max-width: 520px;
}
.hero-card {
background: var(--surface-glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
padding: 44px;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255,255,255,0.7);
animation: floatCard 7s ease-in-out infinite;
position: relative;
}
.hero-card h3 {
font-size: 22px;
font-weight: 800;
margin-bottom: 24px;
color: var(--text);
}
.stat-item {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
font-size: 20px;
font-weight: 700;
padding: 14px 18px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.stat-item::before {
content: '✦';
color: var(--amber-dark);
font-size: 12px;
}
@keyframes floatCard {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
.hero-trust {
margin-top: 56px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.hero-trust-avatars {
display: flex;
}
.hero-trust-avatars img,
.hero-trust-avatars .tg-trust-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
border: 3px solid var(--bg);
object-fit: cover;
margin-right: -12px;
}
.hero-trust-avatars .tg-trust-avatar {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 15px;
}
.hero-trust-text {
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
}
.tg-trust-avatar-1 { background: #2C6FE0; }
.tg-trust-avatar-2 { background: #F2A33D; }
.tg-trust-avatar-3 { background: #6BC4B3; }
.hero-stats-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
}
.hero-stats-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.hero-stats-header h3 {
font-size: 17px;
font-weight: 800;
margin: 0;
color: var(--text);
}
.hero-stats-badge {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #fff;
border-radius: var(--radius-pill);
padding: 4px 14px;
font-size: 13px;
font-weight: 700;
}
.hero-stat-box {
background: var(--surface-muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 16px 14px;
transition: var(--transition);
}
.hero-stat-box:hover {
background: var(--surface-hover);
border-color: var(--primary);
}
.hero-stat-icon { font-size: 22px; margin-bottom: 4px; }
.hero-stat-num {
font-size: 26px;
font-weight: 900;
color: var(--primary);
line-height: 1;
}
.hero-stat-sub {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.hero-stat-label {
font-size: 12px;
font-weight: 600;
color: var(--text);
margin-top: 4px;
}
.hero-stats-footer {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.hero-stats-footer-label { font-size: 13px; color: var(--text-muted); }
.hero-stats-footer-value { color: var(--primary-dark); font-size: 20px; font-weight: 700; }
.section-title h2 {
font-size: clamp(30px, 4vw, 48px);
font-weight: 800;
margin-bottom: 12px;
}
.section-title p {
color: var(--text-muted);
font-size: 18px;
}
.section-divider {
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--amber));
border-radius: 99px;
margin: 16px auto 0;
}
.story-section {
padding: 120px 0;
position: relative;
}
.story-card {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 0;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
overflow: hidden;
}
.story-card-inner {
padding: 60px;
}
.story-quote {
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 700;
line-height: 1.9;
color: var(--text);
position: relative;
padding-right: 28px;
border-right: 4px solid var(--amber);
}
.story-timeline {
margin-top: 60px;
}
.story-step {
display: flex;
gap: 24px;
align-items: flex-start;
padding: 28px 0;
border-bottom: 1px dashed var(--border);
}
.story-step:last-child {
border-bottom: none;
}
.story-step-num {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 20px;
}
.story-step:nth-child(even) .story-step-num {
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
}
.story-step h4 {
font-size: 19px;
font-weight: 800;
margin-bottom: 8px;
}
.story-step p {
color: var(--text-muted);
line-height: 1.9;
margin: 0;
}
.audience-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 32px 26px;
text-align: center;
height: 100%;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: var(--transition);
}
.audience-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-md);
}
.audience-icon {
width: 72px;
height: 72px;
margin: 0 auto 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
background: linear-gradient(135deg, var(--accent), var(--bg));
}
.audience-card h4 {
font-size: 18px;
font-weight: 800;
margin-bottom: 8px;
}
.audience-card p {
color: var(--text-muted);
font-size: 14.5px;
line-height: 1.9;
margin: 0;
}
.services-section {
padding: 120px 0;
}
.service-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 44px 36px;
height: 100%;
transition: var(--transition);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: radial-gradient(circle at top right, rgba(44,111,224,0.1), transparent 70%);
border-radius: 0 var(--radius-lg) 0 0;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-md);
border-color: rgba(44,111,224,0.2);
}
.service-icon {
font-size: 50px;
margin-bottom: 24px;
display: block;
}
.service-card h3 {
font-size: 24px;
font-weight: 800;
margin-bottom: 14px;
}
.service-card p {
color: var(--text-muted);
line-height: 2;
margin-bottom: 0;
}
.about-section {
padding: 120px 0;
}
.about-section h2 {
font-size: clamp(30px, 4vw, 46px);
font-weight: 800;
margin-bottom: 20px;
}
.about-section > .container > .row > .col-lg-6:first-child p {
font-size: 18px;
line-height: 2.1;
color: var(--text-muted);
margin-bottom: 30px;
}
.about-image img {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.about-image {
position: relative;
}
.about-image::after {
content: '';
position: absolute;
inset: -16px;
border: 2px solid var(--amber);
border-radius: calc(var(--radius-lg) + 16px);
z-index: -1;
opacity: 0.5;
}
.stats-section {
padding: 80px 30px;
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
margin: 0 0 80px;
}
.stat-box {
padding: 30px 20px;
text-align: center;
}
.stat-box h3 {
font-size: clamp(36px, 5vw, 54px);
font-weight: 900;
background: linear-gradient(135deg, var(--primary), var(--amber-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
.stat-box p {
font-size: 17px;
font-weight: 600;
color: var(--text-muted);
}
.team-section {
padding: 100px 0;
}
.team-card {
background: var(--surface);
padding: 36px 28px;
border-radius: var(--radius-lg);
text-align: center;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: var(--transition);
}
.team-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-md);
}
.team-card img {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
border: 4px solid var(--accent);
}
.team-card h3 {
font-size: 20px;
font-weight: 800;
margin-bottom: 6px;
}
.team-card p {
color: var(--text-muted);
font-weight: 600;
}
.team-card .team-badge {
display: inline-block;
margin-top: 10px;
font-size: 12.5px;
font-weight: 700;
color: var(--amber-dark);
background: var(--amber-light);
padding: 4px 14px;
border-radius: 99px;
}
.supporters-section {
padding: 90px 0;
}
.supporters-strip {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 50px 40px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
gap: 32px;
}
.supporter-logo {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
width: 140px;
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text-muted);
font-weight: 800;
font-size: 15px;
text-align: center;
padding: 8px;
}
.events-section {
padding: 120px 0;
background: rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
}
.event-card,
.news-card {
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
height: 100%;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: var(--transition);
display: flex;
flex-direction: column;
}
.event-card:hover,
.news-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-md);
}
.event-image img {
width: 100%;
height: 220px;
object-fit: cover;
}
.event-content {
padding: 28px;
flex: 1;
display: flex;
flex-direction: column;
}
.event-date {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--accent);
color: var(--primary-dark);
padding: 7px 16px;
border-radius: 30px;
font-weight: 700;
font-size: 14px;
margin-bottom: 16px;
align-self: flex-start;
}
.event-content h3 {
font-size: 20px;
font-weight: 800;
margin-bottom: 12px;
line-height: 1.5;
}
.event-content p {
color: var(--text-muted);
line-height: 1.9;
flex: 1;
margin-bottom: 20px;
}
.team-member-photo {
border-radius: 50%;
width: 140px;
height: 140px;
margin: 20px auto 0;
object-fit: cover;
}
.news-section {
padding: 120px 0;
}
.news-thumb img,
.news-card .attachment-medium {
width: 100%;
height: 210px;
object-fit: cover;
display: block;
}
.news-card h3 {
font-size: 20px;
font-weight: 800;
padding: 24px 24px 10px;
margin: 0;
line-height: 1.6;
}
.news-card p {
color: var(--text-muted);
padding: 0 24px;
line-height: 1.9;
flex: 1;
}
.news-card .btn {
margin: 20px 24px 24px;
align-self: flex-start;
}
.final-cta-section {
padding: 40px 0 120px;
}
.final-cta-card {
background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 55%, var(--amber-dark) 130%);
border-radius: var(--radius-xl);
padding: 70px 50px;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
}
.final-cta-card::before {
content: '';
position: absolute;
top: -120px;
left: -120px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
}
.final-cta-card::after {
content: '';
position: absolute;
bottom: -120px;
right: -120px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
}
.final-cta-card h2 {
color: #fff;
font-size: clamp(28px, 4vw, 42px);
margin-bottom: 16px;
position: relative;
}
.final-cta-card p {
color: rgba(255,255,255,0.88);
font-size: 17px;
max-width: 560px;
margin: 0 auto 32px;
position: relative;
}
.final-cta-card .btn-group-cta {
position: relative;
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.final-cta-card .btn-light-cta {
background: #fff;
color: var(--primary-deep) !important;
font-weight: 800;
}
.final-cta-card .btn-outline-cta {
border: 2px solid rgba(255,255,255,0.6);
color: #fff !important;
background: transparent;
}
.final-cta-card .btn-outline-cta:hover {
background: rgba(255,255,255,0.15);
}
.quick-join-section {
padding: 0 0 90px;
}
.quick-join-card {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 50px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
}
.single-news {
padding: 110px 0 80px;
}
.news-hero img {
width: 100%;
max-height: 480px;
object-fit: cover;
border-radius: var(--radius-lg);
}
.news-header {
margin-top: 30px;
}
.news-date {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--accent);
color: var(--primary-dark);
padding: 7px 16px;
border-radius: 30px;
font-weight: 700;
font-size: 14px;
}
.news-date + .news-date { margin-right: 8px; }
.event-attendees-public {
background: var(--surface-muted);
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.event-attendees-heading {
font-weight: 700;
margin-bottom: 16px;
}
.attendee-chip {
background: var(--surface);
border-radius: var(--radius-pill);
border: 1px solid var(--border);
}
.attendee-chip-photo {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.attendee-chip-name { font-size: 14px; }
.btn-static { cursor: default; }
.col-label-narrow { width: 200px; }
.profile-photo-wrap { position: relative; }
.profile-photo-preview {
width: 110px;
height: 110px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--border);
cursor: pointer;
}
.profile-photo-edit-badge {
position: absolute;
bottom: 4px;
left: 4px;
background: var(--primary-dark);
color: #fff;
border-radius: 50%;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
cursor: pointer;
transition: var(--transition);
}
.profile-photo-edit-badge:hover { background: var(--primary); transform: scale(1.08); }
.crop-controls { display: none; margin-top: 12px; }
.crop-zoom-slider { max-width: 220px; }
.delete-confirm-input { max-width: 300px; }
.btn-danger-outline {
border: 1.5px solid #DC2626;
color: #DC2626 !important;
background: transparent;
}
.btn-danger-outline:hover {
background: #DC2626;
color: #fff !important;
}
.btn-danger-outline:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #DC2626;
}
.btn-danger-solid {
background: #DC2626;
color: #fff !important;
border: none;
}
.btn-danger-solid:hover { background: #B91C1C; }
.btn-danger-solid:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #DC2626;
}
.tg-already-logged-in {
text-align: center;
padding: 50px;
font-family: inherit;
}
.social-btn-img-icon {
border-radius: 6px;
object-fit: cover;
}
.tg-link-inherit { color: inherit; }
.social-icon-inline { margin-left: 4px; }
.social-icon-inline-img {
border-radius: 4px;
object-fit: cover;
}
.contact-address-box {
background: var(--surface-muted);
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.contact-address-text {
margin: 0;
font-size: 13px;
line-height: 2;
color: var(--text);
}
.news-header h1 {
font-size: clamp(28px, 4vw, 48px);
font-weight: 800;
margin-top: 16px;
}
.news-content {
margin-top: 36px;
background: var(--surface);
padding: 44px;
border-radius: var(--radius-lg);
line-height: 2.3;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
}
.about-page {
padding: 120px 0;
}
.about-hero {
margin-bottom: 60px;
}
.about-hero h1 {
font-size: clamp(32px, 5vw, 54px);
font-weight: 900;
margin-bottom: 16px;
}
.about-hero p {
font-size: 19px;
color: var(--text-muted);
}
.about-content {
background: var(--surface);
padding: 52px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
line-height: 2.3;
}
.about-content h2 {
margin-top: 36px;
font-size: 26px;
font-weight: 800;
color: var(--primary-dark);
}
.about-content h2:first-child {
margin-top: 0;
}
.about-content p {
color: var(--text-muted);
}
.about-content ul {
padding-right: 20px;
}
.about-content ul li {
margin-bottom: 10px;
font-weight: 600;
color: var(--text-muted);
}
.contact-page {
padding: 120px 0;
}
.contact-header {
margin-bottom: 60px;
}
.contact-header h1 {
font-size: clamp(32px, 5vw, 54px);
font-weight: 900;
}
.contact-header p {
font-size: 18px;
color: var(--text-muted);
}
.contact-info,
.contact-form {
background: var(--surface);
padding: 44px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
height: 100%;
}
.contact-info h3 {
font-size: 22px;
font-weight: 800;
margin-bottom: 28px;
}
.contact-info p {
line-height: 2.2;
font-size: 16px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
}
.consultation-page {
padding: 120px 0;
}
.consultation-page h1 {
font-size: clamp(32px, 5vw, 52px);
font-weight: 900;
margin-bottom: 12px;
}
.consultation-card {
background: var(--surface);
padding: 50px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
}
.form-control,
.form-select {
font-family: 'Vazirmatn', sans-serif;
border-radius: var(--radius-sm);
border: 1.5px solid var(--border);
padding: 12px 16px;
font-size: 15px;
transition: var(--transition);
background: var(--bg);
color: var(--text);
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(44,111,224,0.15);
background: var(--surface);
outline: none;
}
.form-label {
font-weight: 700;
font-size: 14px;
color: var(--text);
margin-bottom: 8px;
}
textarea.form-control {
resize: vertical;
min-height: 140px;
}
.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
margin: 0 3px;
border-radius: var(--radius-pill);
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text);
font-weight: 700;
font-size: 14.5px;
text-decoration: none;
transition: var(--transition);
}
a.page-numbers:hover {
background: var(--surface-hover);
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
a.page-numbers:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}
.page-numbers.current {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-color: transparent;
color: #fff;
box-shadow: 0 6px 18px rgba(46,99,255,0.28);
}
.page-numbers.dots {
background: transparent;
border-color: transparent;
color: var(--text-subtle);
min-width: 24px;
width: 24px;
padding: 0;
}
.page-numbers.prev,
.page-numbers.next {
padding: 0 18px;
}
.site-footer {
background: linear-gradient(160deg, #0E1B33 0%, #16284A 100%);
color: #C9D3E8;
padding: 90px 0 30px;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--amber));
}
.site-footer h4,
.site-footer h5 {
color: #fff;
font-weight: 800;
margin-bottom: 20px;
}
.site-footer p {
line-height: 2;
font-size: 15px;
}
.site-footer a { color: #94A3B8; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer a:focus-visible {
outline: none;
color: #fff;
border-radius: 4px;
box-shadow: 0 0 0 2px #16284A, 0 0 0 4px #fff;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #94A3B8;
text-decoration: none;
transition: var(--transition);
display: flex;
align-items: center;
gap: 6px;
font-size: 15px;
}
.footer-links a::before {
content: '←';
font-size: 12px;
opacity: 0;
transform: translateX(5px);
transition: var(--transition);
}
.footer-links a:hover {
color: #fff;
padding-right: 4px;
}
.footer-links a:focus-visible {
outline: none;
color: #fff;
border-radius: 4px;
box-shadow: 0 0 0 2px #16284A, 0 0 0 4px #fff;
}
.footer-links a:hover::before {
opacity: 1;
transform: translateX(0);
}
.footer-address {
font-size: 13px;
line-height: 1.8;
}
.footer-social {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.08);
color: #94A3B8;
font-size: 18px;
text-decoration: none;
transition: var(--transition);
border: 1px solid rgba(255,255,255,0.1);
}
.social-btn:hover {
background: var(--amber);
color: #fff;
border-color: var(--amber);
transform: translateY(-3px);
}
.social-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px #16284A, 0 0 0 4px #fff;
}
.site-footer hr {
margin: 50px 0 28px;
border: none;
border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
font-size: 14px;
color: #64748B;
}
.footer-bottom p { margin: 0; }
.footer-trust-seal { display: flex; align-items: center; }
.footer-trust-seal img { max-width: 100px; width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
@media (min-width: 768px) {
.footer-bottom {
flex-direction: row;
justify-content: space-between;
text-align: right;
}
}
.membership-page {
padding: 120px 0;
}
.membership-benefits {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 36px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
height: 100%;
}
.membership-benefits ul {
list-style: none;
padding: 0;
margin: 0;
}
.membership-benefits ul li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 1px dashed var(--border);
color: var(--text-muted);
font-weight: 600;
}
.membership-benefits ul li:last-child {
border-bottom: none;
}
.membership-benefits ul li .check-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent);
color: var(--accent-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
}
.archive-events {
padding: 120px 0;
}
.tg-page-top {
padding-top: 140px;
}
.tg-page-top-tall {
padding-top: 140px;
min-height: 60vh;
}
.dashboard-section {
padding: 130px 0 100px;
}
.dashboard-shell {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: start;
}
.dashboard-sidebar {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
position: sticky;
top: 110px;
}
.dashboard-profile-pic {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--accent);
margin: 0 auto 14px;
display: block;
background: var(--bg);
}
.dashboard-sidebar .member-name {
text-align: center;
font-weight: 800;
font-size: 17px;
margin-bottom: 4px;
}
.dashboard-sidebar .member-status {
text-align: center;
display: block;
margin-bottom: 24px;
}
.member-status-badge {
display: inline-block;
font-size: 12.5px;
font-weight: 700;
padding: 5px 16px;
border-radius: 99px;
background: var(--accent);
color: var(--accent-dark);
}
.dashboard-nav {
list-style: none;
padding: 0;
margin: 0;
}
.dashboard-nav li {
margin-bottom: 6px;
}
.dashboard-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: var(--radius-sm);
color: var(--text-muted);
font-weight: 700;
font-size: 14.5px;
transition: var(--transition);
}
.dashboard-nav a:hover,
.dashboard-nav a.active {
background: var(--surface-hover);
color: var(--primary) !important;
}
.dashboard-nav a:focus-visible {
outline: none;
background: var(--surface-hover);
color: var(--primary) !important;
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}
.dashboard-nav a.logout-link {
color: #DC2626;
margin-top: 14px;
border-top: 1px solid var(--border);
padding-top: 18px;
border-radius: 0;
}
.dashboard-main {
min-width: 0;
}
.dashboard-panel {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 36px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
margin-bottom: 28px;
}
.dashboard-panel h3 {
font-size: 19px;
font-weight: 800;
margin-bottom: 22px;
display: flex;
align-items: center;
gap: 10px;
}
.dashboard-stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 28px;
}
.dashboard-stat-box {
background: var(--surface-hover);
border-radius: var(--radius-md);
padding: 22px;
text-align: center;
}
.dashboard-stat-box .num {
font-size: 28px;
font-weight: 900;
color: var(--primary-dark);
display: block;
}
.dashboard-stat-box .label {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.upload-dropzone {
border: 2px dashed var(--border);
border-radius: var(--radius-md);
padding: 32px;
text-align: center;
background: var(--bg);
transition: var(--transition);
cursor: pointer;
}
.upload-dropzone:hover {
border-color: var(--primary);
background: rgba(44,111,224,0.04);
}
.doc-list {
list-style: none;
padding: 0;
margin: 0;
}
.doc-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: var(--bg);
border-radius: var(--radius-sm);
margin-bottom: 10px;
font-size: 14.5px;
font-weight: 600;
}
.doc-list .doc-meta {
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
}
.dashboard-item-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px;
background: var(--bg);
border-radius: var(--radius-md);
margin-bottom: 12px;
}
.dashboard-item-card .item-date-box {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: var(--radius-sm);
background: var(--surface);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 800;
color: var(--primary-dark);
font-size: 13px;
box-shadow: var(--shadow-sm);
}
.dashboard-item-card .item-title {
font-weight: 700;
margin-bottom: 4px;
}
.dashboard-item-card .item-sub {
font-size: 13px;
color: var(--text-muted);
}
.status-pill {
font-size: 12px;
font-weight: 700;
padding: 4px 14px;
border-radius: 99px;
flex-shrink: 0;
}
.empty-state {
text-align: center;
padding: 50px 20px;
color: var(--text-muted);
}
.empty-state .empty-icon {
font-size: 44px;
margin-bottom: 14px;
display: block;
opacity: 0.6;
}
@media (max-width: 991px) {
.navbar-collapse {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-radius: var(--radius-lg);
margin-top: 16px;
padding: 20px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
}
.navbar-nav {
margin: 0 0 16px 0 !important;
text-align: center;
}
.navbar-nav li a {
padding: 12px 0;
display: block;
}
.navbar-collapse .btn {
width: 100%;
margin: 8px 0 !important;
}
.hero-section {
padding-top: 120px;
text-align: center;
}
.hero-text {
margin: 0 auto;
}
.hero-card {
margin-top: 50px;
}
.hero-section::before,
.hero-section::after {
display: none;
}
.hero-trust {
justify-content: center;
}
.stats-section {
border-radius: var(--radius-lg);
}
.stat-box {
border-bottom: 1px solid var(--border);
}
.stat-box:last-child {
border-bottom: none;
}
.about-content {
padding: 32px;
}
.consultation-card {
padding: 32px;
}
.contact-info,
.contact-form {
padding: 32px;
}
.story-card-inner {
padding: 36px;
}
.final-cta-card {
padding: 50px 28px;
}
.quick-join-card {
padding: 32px;
}
.dashboard-shell {
grid-template-columns: 1fr;
}
.dashboard-sidebar {
position: static;
}
}
@media (max-width: 767px) {
.navbar {
min-height: 70px;
}
.site-logo,
.navbar-brand img,
.navbar-brand .custom-logo {
width: 48px !important;
height: 48px !important;
max-width: 48px;
max-height: 48px;
}
.navbar-brand {
font-size: 18px;
}
.hero-section {
padding-top: 100px;
}
.hero-card {
padding: 28px;
}
.services-section,
.about-section,
.events-section,
.news-section,
.team-section,
.story-section,
.supporters-section {
padding: 80px 0;
}
.section-title h2 {
font-size: 28px;
}
.news-content,
.about-content {
padding: 24px;
}
.dashboard-stat-row {
grid-template-columns: 1fr;
}
.dashboard-panel {
padding: 24px;
}
}
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
.glass-card {
background: var(--surface-glass);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.6);
}
.archive-team-card .event-image {
width: 100%;
aspect-ratio: 3 / 4;
height: auto;
overflow: hidden;
border-radius: 18px 18px 0 0;
background: var(--bg);
}
.archive-team-card .team-member-photo {
width: 100%;
height: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center;
display: block;
border-radius: 0;
}
@media (max-width: 991.98px) {
.archive-team-card .event-image {
aspect-ratio: 3 / 4;
}
}
@media (max-width: 767.98px) {
.archive-team-card .event-image {
aspect-ratio: 3 / 4;
}
.archive-team-card .team-member-photo {
aspect-ratio: 3 / 4;
}
}
.tg-home-specialists { padding: 20px 0 10px; }
.tg-home-specialists .tg-specialist-card { display:block; height:100%; padding:18px; border:1px solid var(--border); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-sm); text-decoration:none; color:var(--text); transition:var(--transition); }
.tg-home-specialists .tg-specialist-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.tg-home-specialists .tg-specialist-photo { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; border-radius:16px; display:block; margin-bottom:14px; }