/*
Theme Name: German Exam Platform
*/
* { box-sizing: border-box; }
body {
margin: 0; padding: 0;
direction: rtl; /* جهت کلی قالب */
font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
background: #f8f9fa;
}
.container {
width: min(1200px, 95%);
margin: 0 auto;
}
/* --- هدر --- */
.site-header {
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 15px 0;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-right {
display: flex;
align-items: center;
gap: 15px;
}
.site-logo { width: 70px; height: auto; }
/* اصلاح متن لوگو برای یکسان شدن فونت و سایز */
.site-title {
margin: 0;
font-size: 20px;
color: #1a237e;
line-height: 1.3;
font-weight: bold;
}
.header-left {
display: flex;
align-items: center;
gap: 15px;
}
.nav-buttons { display: flex; gap: 8px; }
.nav-btn, .login-btn {
text-decoration: none;
color: #fff;
padding: 8px 16px;
border-radius: 8px;
font-weight: bold;
font-size: 14px;
}
.nav-testdaf { background: #ff7a00; }
.nav-goteh { background: #d32f2f; }
.nav-osd { background: #607d8b; }
.login-btn { background: #1a237e; margin-right: 10px; }
/* --- بخش کارتها --- */
.hero-section {
display: flex;
justify-content: center;
gap: 30px;
padding: 50px 0;
flex-wrap: wrap;
}
.exam-card {
flex: 0 1 350px; /* عرض کارت */
background: #fff;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.exam-card:hover { transform: translateY(-5px); }
.card-relative {
position: relative;
width: 100%;
}
/* اصلاح ابعاد تصاویر برای نمایش مستطیل عمودی (Portrait) */
.card-relative img {
width: 100%;
height: 480px; /* ارتفاع افزایش یافت تا حالت مستطیل ایستاده حفظ شود */
object-fit: cover;
display: block;
}
.card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 20px;
background: linear-gradient(transparent, rgba(0,0,0,0.4)); /* اضافه شدن سایه ملایم برای خوانایی بهتر متن روی عکس */
}
.overlay-title {
color: #fff;
font-size: 32px;
margin: 0 0 15px 0;
font-weight: bold;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.overlay-btn {
background: #fff;
color: #1a237e;
text-decoration: none;
padding: 10px 25px;
border-radius: 12px;
font-weight: bold;
font-size: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* --- TestDaf Page Styles --- */
.testdaf-page-container {
display: flex;
padding: 30px;
background-color: #f8f9fa;
min-height: calc(100vh - 100px);
/* direction: ltr; این خط را حذف کنید */
flex-wrap: wrap; /* برای ریسپانسیو شدن در صورت نیاز */
}
.testdaf-main-content {
flex-grow: 1;
margin-left: 30px; /* تغییر از margin-right به margin-left */
/* مطمئن شوید که عرض کافی برای سایدبار باقی میماند */
width: calc(100% - 280px); /* 250px برای سایدبار + 30px مارجین */
}
.testdaf-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.testdaf-card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
padding: 15px 20px;
text-decoration: none;
color: #333;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.testdaf-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}
.testdaf-card-icons {
display: flex;
align-items: center;
gap: 8px;
font-size: 20px;
position: relative;
}
.icon-separator {
width: 2px;
height: 30px;
background-color: #eee;
margin-right: 10px; /* تغییر از margin-left به margin-right */
}
/* رنگ آیکونها */
.audio-icon { color: #8bc34a; }
.text-icon { color: #f44336; }
.writing-icon { color: #ffeb3b; }
.speaking-icon { color: #03a9f4; }
.testdaf-card-name {
font-weight: bold;
font-size: 16px;
margin-right: 15px; /* تغییر از margin-left به margin-right */
flex-grow: 1;
}
.testdaf-card-arrow {
font-size: 24px;
color: #ccc;
transform: rotate(180deg); /* فلش را برعکس کنید */
}
/* --- Sidebar Styles --- */
.testdaf-sidebar {
width: 250px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 20px 0;
display: flex;
flex-direction: column;
float: left; /* اضافه کردن float: left */
}
.sidebar-item {
display: flex;
align-items: center;
padding: 12px 20px;
color: #555;
font-size: 15px;
cursor: pointer;
transition: background-color 0.2s ease;
border-left: 4px solid transparent; /* تغییر از border-right به border-left */
}
.sidebar-item:hover {
background-color: #f5f5f5;
}
.sidebar-item.active {
background-color: #f0f0f0;
color: #e91e63;
font-weight: bold;
border-left-color: #e91e63; /* تغییر از border-right-color به border-left-color */
}
.sidebar-icon {
width: 24px;
height: 24px;
background-color: #ccc;
border-radius: 4px;
margin-right: 15px; /* تغییر از margin-left به margin-right */
}
/* آیکونهای سایدبار */
/* دقت کنید که SVG ها نیز باید جهتدهی RTL را رعایت کنند. */
/* اگر آیکونها برعکس نمایش داده میشوند، باید SVG آنها را ویرایش کنید یا از آیکونهای فونت آوسام استفاده کنید. */
/* فعلاً آیکونها بدون تغییر باقی میمانند، در صورت نیاز باید دستی چرخانده شوند یا جایگزین شوند */
.sidebar-item:nth-child(1) .sidebar-icon { background-image: url('data:image/svg+xml;utf8,'); }
.sidebar-item:nth-child(2) .sidebar-icon { background-image: url('data:image/svg+xml;utf8,'); }
.sidebar-item:nth-child(3) .sidebar-icon { background-image: url('data:image/svg+xml;utf8,'); }
.sidebar-item:nth-child(4) .sidebar-icon { background-image: url('data:image/svg+xml;utf8,'); }
.sidebar-item:nth-child(5) .sidebar-icon { background-image: url('data:image/svg+xml;utf8,'); }
.sidebar-item.active .sidebar-icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
.testdaf-page-container {
flex-direction: column;
padding: 20px;
}
.testdaf-main-content {
margin-left: 0; /* تغییر */
margin-bottom: 30px;
width: 100%; /* تغییر */
}
.testdaf-sidebar {
width: 100%;
float: right; /* تغییر */
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
box-shadow: none;
border-radius: 0;
}
.sidebar-item {
width: 48%;
justify-content: center;
border-left: none; /* تغییر */
border-bottom: 4px solid transparent;
}
.sidebar-item.active {
border-bottom-color: #e91e63;
}
.sidebar-icon { margin-right: 10px; } /* تغییر */
}
/* --- استایل جدید صفحه TestDaF --- */
.testdaf-page-container {
display: flex;
gap: 30px;
padding: 40px;
background-color: #fcfcfc;
align-items: flex-start;
direction: rtl;
}
.testdaf-sidebar {
width: 260px;
background: #fff;
border-radius: 20px;
padding: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.sidebar-item {
display: flex;
align-items: center;
padding: 15px;
margin-bottom: 10px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
color: #666;
}
.sidebar-item:hover { background: #f8f8f8; }
/* کارتها */
.testdaf-main-content { flex: 1; }
.testdaf-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.testdaf-card-ui {
background: #fff;
border-radius: 20px;
padding: 25px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
border: 1px solid #f0f0f0;
}
.card-icon { font-size: 40px; margin-bottom: 10px; }
.testdaf-card-ui h3 { margin: 10px 0; font-size: 18px; color: #333; }
.progress-bar {
height: 8px;
background: #eee;
border-radius: 10px;
margin: 15px 0 5px;
overflow: hidden;
}
.progress-fill { height: 100%; background: #4a90e2; border-radius: 10px; }
.progress-text { font-size: 12px; color: #888; display: block; margin-bottom: 15px; }
.start-btn {
display: block;
background: #ff5a5f;
color: #fff;
padding: 12px;
border-radius: 10px;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}
.start-btn:hover { background: #e04a4e; }
@media (max-width: 768px) {
.testdaf-page-container { flex-direction: column; }
.testdaf-sidebar { width: 100%; }
}
/* ---------- Modern Sidebar ---------- */
.modern-sidebar{
width:260px;
background:linear-gradient(180deg,#ffffff,#fafafa);
border-radius:24px;
padding:25px 20px;
box-shadow:0 15px 40px rgba(0,0,0,.06);
}
.sidebar-header{
margin-bottom:25px;
text-align:center;
}
.sidebar-title{
font-size:18px;
font-weight:800;
color:#333;
}
.sidebar-link{
display:flex;
align-items:center;
gap:15px;
padding:14px 18px;
border-radius:16px;
text-decoration:none;
color:#555;
font-weight:600;
margin-bottom:10px;
transition:.3s;
}
.sidebar-link .icon{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:#f1f3f6;
font-size:18px;
}
.sidebar-link:hover{
background:#f5f7ff;
color:#4a5cff;
}
.sidebar-link:hover .icon{
background:#e8ecff;
}
.sidebar-link.active{
background:#4a5cff;
color:#fff;
}
.sidebar-link.active .icon{
background:rgba(255,255,255,.2);
}
/* Mobile */
@media(max-width:768px){
.modern-sidebar{
width:100%;
margin-bottom:25px;
}
}
.site-brand {
display: flex;
align-items: center;
gap: 12px; /* فاصله لوگو و متن */
text-decoration: none;
}
.site-brand:hover {
text-decoration: none;
}
.site-brand .site-title {
text-decoration: none;
}
.site-brand h1 {
margin: 0;
}
.site-logo {
display: block;
}
/* ===========================
User Avatar & Dropdown Menu
=========================== */
.dictionary-search-wrapper{
max-width:850px;
margin:20px auto 40px auto;
}
.dictionary-search-wrapper form{
position:relative;
}
.dictionary-search-wrapper input{
width:100%;
padding:18px 55px 18px 18px;
border:2px solid #ddd;
background:#fff;
border-radius:12px;
font-size:17px;
}
.dic-search-btn{
position:absolute;
left:15px; /* چون راستچین است، سمت چپ میگذاریم */
top:50%;
transform:translateY(-50%);
background:none;
border:none;
font-size:24px;
cursor:pointer;
color:#444;
}
:root {
--loader-bg: #ffffff;
--pulse-duration: 1.2s;
--sq1-color: #2E3F8F; /* مربع بزرگ آبی */
--sq2-color: #E31B23; /* مربع قرمز */
--sq3-color: #FF7A00; /* مربع نارنجی */
--sq4-color: #2E3F8F; /* مربع آبی پایین وسط */
--sq5-color: #9A9A9A; /* مربع خاکستری */
}
.square {
position: absolute;
border-radius: 4px;
animation: sq-pulse var(--pulse-duration) infinite ease-in-out;
opacity: 0.75;
transform-box: fill-box;
transform-origin: center;
}
.sq1 { width: 50px; height: 50px; top: 0; left: 0; background-color: var(--sq1-color); animation-delay: 0s; }
.sq2 { width: 40px; height: 40px; top: 5px; left: 60px; background-color: var(--sq2-color); animation-delay: 0.2s; }
.sq3 { width: 35px; height: 35px; top: 60px; left: 0; background-color: var(--sq3-color); animation-delay: 0.4s; }
.sq4 { width: 35px; height: 35px; top: 60px; left: 45px; background-color: var(--sq4-color); animation-delay: 0.6s; }
.sq5 { width: 35px; height: 35px; top: 60px; left: 90px; background-color: var(--sq5-color); animation-delay: 0.8s; }
@keyframes sq-pulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.18); opacity: 1; }
}
@font-face {
font-family: "Vazirmatn";
src: url("/fonts/Vazirmatn-Regular.woff2") format("woff2"); /* مسیر نسبی از public_html */
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Vazirmatn";
src: url("/fonts/Vazirmatn-Medium.woff2") format("woff2"); /* مسیر نسبی از public_html */
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Vazirmatn";
src: url("/fonts/Vazirmatn-Bold.woff2") format("woff2"); /* مسیر نسبی از public_html */
font-weight: 700;
font-display: swap;
}
body {
font-family: "Vazirmatn", sans-serif;
}
body {
font-family: "Vazirmatn", Tahoma, Arial, sans-serif !important;
}