/* --- Root & Global Styles --- */
:root {
--bg: #070a0f;
--card: #0f1623;
--accent: #00ffc3;
--blue: #4da3ff;
--red: #ff4d6d;
--green: #2dd4bf;
--text: #e6edf3;
--muted: #8b9bb0;
--glass: rgba(15, 22, 35, 0.6);
--gradient: linear-gradient(90deg, var(--accent), var(--blue));
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 24px;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: var(--bg);
color: var(--text);
scroll-behavior: smooth;
/* 1. الإجبار الهيكلي لتثبيت الفوتر */
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* --- Cyber Background --- */
.cyber-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(0, 255, 195, 0.05), var(--bg)); }
.cyber-grid { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-image: linear-gradient(rgba(0, 255, 195, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 195, 0.03) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg); animation: grid-move 20s linear infinite; }
@keyframes grid-move { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(50px); } }
.cyber-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.15; background: url('data:image/svg+xml;utf8,'); animation: pulse 4s ease-in-out infinite; -webkit-animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.2; } }
/* --- Navigation --- */
.nav-bar { position: sticky; top: 0; z-index: 10000; background: rgba(7, 10, 15, 0.6); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 12px 0; }
.nav-container { max-width: 900px; margin: auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; gap: 20px; }
.nav-brand { color: var(--text); text-decoration: none; font-size: 1.05rem; font-weight: 700; display: inline-flex; align-items: center; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
/* ---- هامبرغر Menu Icon - يظهر في جميع الشاشات ---- */
.nav-toggle { display: flex; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); cursor: pointer; align-items: center; justify-content: center; gap: 5px; flex-direction: column; transition: 0.3s ease; flex-shrink: 0; }
.nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 999px; background: var(--text); transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-toggle span:nth-child(1) { transform: translateY(0px); }
.nav-toggle span:nth-child(3) { transform: translateY(0px); }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translateY(4px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translateY(-4px); }
/* --- New Login Button in Nav --- */
.nav-login-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.04);
color: var(--text);
cursor: pointer;
font-size: 1.05rem;
transition: 0.3s ease;
flex-shrink: 0;
text-decoration: none; /* For tag */
}
.nav-login-btn:hover {
background: rgba(0,255,195,0.12);
color: var(--accent);
border-color: var(--accent);
transform: scale(1.05);
}
/* ---- زر تبديل الثيم ---- */
.nav-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: var(--text); cursor: pointer; font-size: 1.05rem; transition: 0.3s ease; flex-shrink: 0; }
.nav-theme-btn:hover { background: rgba(0,255,195,0.12); color: var(--accent); border-color: var(--accent); transform: scale(1.05); }
/* ---- القائمة الجانبية (Sidebar) - تنزلق من اليمين ---- */
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: auto;
max-width: 320px;
min-width: 220px;
height: 100vh;
margin: 0;
padding: 100px 25px 30px;
flex-direction: column;
gap: 8px;
background: rgba(7, 10, 15, 0.6);
backdrop-filter: blur(20px);
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-right: none;
z-index: 10001;
overflow-y: auto;
box-shadow: -4px 0 30px rgba(0, 0, 0, 0.7);
align-items: stretch;
display: flex;
}
.nav-menu.active { right: 0; }
.nav-menu a {
color: #ffffff;
text-decoration: none;
font-size: 0.95rem;
background: rgba(255,255,255,0.04);
padding: 12px 16px;
border-radius: 14px;
transition: 0.25s ease;
width: 100%;
text-align: right;
box-sizing: border-box;
white-space: nowrap;
}
.nav-menu a:hover { background: rgba(0,255,195,0.14); color: var(--accent); }
/* ---- التراكب الخلفي (Overlay) ---- */
.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-overlay.active {
opacity: 1;
visibility: visible;
}
/* ---- تنسيقات Light Mode ---- */
body.light {
--bg: #f4f7fb;
--card: #ffffff;
--accent: #0269d3;
--blue: #1f6dff;
--red: #d14d5f;
--green: #0b8b6f;
--text: #111827;
--muted: #5a6c82;
--glass: rgba(255,255,255,0.6);
--gradient: linear-gradient(90deg, #0269d3, #03b5ff);
}
body.light .nav-bar { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); }
body.light .nav-toggle { background: rgba(2, 105, 211, 0.08); border: 1px solid rgba(2, 105, 211, 0.2); }
body.light .nav-toggle:hover { background: rgba(2, 105, 211, 0.15); }
body.light .nav-theme-btn { background: rgba(2, 105, 211, 0.08); border: 1.5px solid rgba(2, 105, 211, 0.2); color: #111827; }
body.light .nav-login-btn {
background: rgba(2, 105, 211, 0.08);
border: 1.5px solid rgba(2, 105, 211, 0.2);
color: #111827;
}
body.light .nav-login-btn:hover {
background: rgba(2, 105, 211, 0.15);
color: #0269d3;
border-color: #0269d3;
}
body.light .nav-theme-btn:hover { background: rgba(2, 105, 211, 0.15); color: #0269d3; }
body.light .nav-menu { background: rgba(255, 255, 255, 0.6) !important; box-shadow: -4px 0 30px rgba(0, 0, 0, 0.1) !important; }
body.light .nav-menu a { background: rgba(255,255,255,0.85); color: #111827; border: 1px solid rgba(2, 105, 211, 0.1); }
body.light .nav-menu a:hover { background: rgba(2,105,211,0.12); color: #0269d3; border-color: #0269d3; }
body.light .cyber-bg { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.03), var(--bg)); }
body.light .cyber-grid { background-image: linear-gradient(rgba(0, 105, 211, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 105, 211, 0.08) 1px, transparent 1px); }
/* ---- Light Mode Card Borders ---- */
body.light .section,
body.light .faq-item {
border-color: rgba(0,0,0,0.08);
}
body.light .step,
body.light .card {
background: var(--card);
border: 1px solid rgba(0,0,0,0.08);
}
body.light .card {
border-right: 3px solid var(--accent);
}
/* ---- Container ---- */
.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
position: relative;
width: 100%;
box-sizing: border-box;
}
/* 2. القاعدة الإجبارية لدفع الفوتر للأسفل */
.container, .main-wrapper, .main-content { flex: 1 0 auto; }
.hero { text-align: center; padding: 60px 20px 60px; }
.hero h1 { font-size: clamp(30px, 6vw, 48px); margin-bottom: 15px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.3; }
.sub-h1 { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; display: block; font-size: 1.2rem; margin: 5px 0 10px; }
.btn { display: inline-block; padding: 18px 60px; border-radius: 12px; background: linear-gradient(90deg, var(--accent), var(--blue)); color: #000; text-decoration: none; font-weight: bold; font-size: 18px; transition: 0.3s; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(0,255,195,0.2); }
.btn:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(0,255,195,0.4); }
/* --- Discovery Banner --- */
.discovery-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
background: var(--glass);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin-top: 40px;
text-align: right;
}
.banner-content {
flex: 1;
}
.banner-content h2 {
font-size: 24px;
color: var(--accent);
margin-top: 0;
margin-bottom: 15px;
}
.banner-content p {
color: var(--muted);
line-height: 1.7;
margin-bottom: 30px;
}
.banner-image {
max-width: 45%;
height: auto;
border-radius: 16px;
object-fit: cover;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.action-buttons {
display: flex;
gap: 15px;
align-items: center;
}
.primary-btn {
display: inline-block;
padding: 14px 30px;
border-radius: 12px;
background: linear-gradient(90deg, var(--accent), var(--blue));
color: #000;
text-decoration: none;
font-weight: bold;
font-size: 16px;
transition: 0.3s;
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,255,195,0.2);
}
.primary-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(0,255,195,0.4);
}
.share-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 25px;
border-radius: 12px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--muted);
color: var(--text);
font-weight: bold;
font-size: 16px;
font-family: inherit;
cursor: pointer;
transition: 0.3s;
}
.share-btn i { font-size: 14px; }
.share-btn:hover {
background: rgba(255,255,255,0.1);
border-color: var(--accent);
color: var(--accent);
}
body.light .discovery-banner { border-color: rgba(0,0,0,0.08); }
body.light .share-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.2); color: var(--text); }
body.light .share-btn:hover { background: rgba(2,105,211,0.1); border-color: var(--accent); color: var(--accent); }
/* --- Program Details Section --- */
.program-details-section {
/* 1. ضبط العرض والتصميم الزجاجي */
max-width: none; /* إزالة التحديد السابق ليمتد بعرض الحاوية */
margin-top: 50px;
padding: 40px;
background: var(--glass);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 20px;
/* 2. التقسيم الشبكي (يمين للشعارات، يسار للنص) */
display: grid;
grid-template-columns: 1fr 3fr; /* 25% للشريط، 75% للنص */
gap: 40px;
align-items: center;
}
/* حاوية النصوص (الجهة اليسرى) */
.details-content {
text-align: right;
}
.details-content h2 {
color: var(--accent);
font-size: 26px;
margin-bottom: 20px;
text-align: right;
}
.details-content > p {
color: var(--muted);
line-height: 1.8;
margin-bottom: 40px;
}
.beneficiaries-list {
text-align: right;
margin-top: 30px;
}
.beneficiaries-list > div { margin-bottom: 30px; }
.beneficiaries-list h3 {
color: var(--blue);
font-size: 18px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.beneficiaries-list h3 i { font-size: 20px; }
.beneficiaries-list p { color: var(--muted); line-height: 1.7; padding-right: 32px; margin: 0; }
/* --- New Vertical Carousel (Rebuilt from Scratch) --- */
.new-vertical-carousel {
height: 350px;
width: 100%;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%);
}
.new-vertical-carousel .carousel-track {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
animation: scrollDown 20s linear infinite;
will-change: transform; /* Performance hint */
}
.new-vertical-carousel:hover .carousel-track,
.new-vertical-carousel:active .carousel-track {
animation-play-state: paused;
}
.new-vertical-carousel .carousel-track img {
width: 100px !important;
height: auto !important;
object-fit: contain;
display: block;
flex-shrink: 0;
}
@keyframes scrollDown {
from { transform: translateY(-50%); }
to { transform: translateY(0); }
}
.inline-link { color: var(--accent); text-decoration: underline; font-weight: bold; transition: color 0.3s; }
.inline-link:hover { color: var(--blue); }
body.light .program-details-section { border-color: rgba(0,0,0,0.08); }
/* --- Sections & Cards --- */
.section { margin-top: 50px; padding: 35px; background: var(--glass); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--border-radius-lg); }
.steps-container { display: grid; gap: 20px; margin-top: 20px; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Desktop Layout: Enforce 3 columns for the main paths section */
@media (min-width: 1024px) {
.steps-container {
grid-template-columns: repeat(3, 1fr);
}
}
.features-grid { display: grid; gap: 20px; margin-top: 20px; align-items: stretch; grid-template-columns: 1fr 1fr !important; margin-top: 25px; }
.step, .card { padding: 20px 20px; background: rgba(255,255,255,0.02); border-radius: var(--border-radius-md); text-align: center; transition: 0.3s; overflow: hidden; display: flex !important; flex-direction: column !important; align-items: center; justify-content: flex-start; gap: 8px; height: 100%; box-sizing: border-box; }
.card { border-right: 3px solid var(--accent); }
/* --- Why Test Banner (Unified Glass Banner) --- */
.why-test-banner-container {
/* The main glass container */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.why-test-main-title {
color: var(--accent);
font-size: 26px;
margin-bottom: 30px;
}
.why-test-grid {
/* The container for the 4 items */
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
width: 100%;
}
.why-test-item {
/* Each of the 4 items */
flex: 1;
min-width: 200px;
max-width: 250px;
text-align: center;
}
.why-test-item h4 {
color: var(--blue); /* Secondary color for subtitles */
font-size: 18px;
margin: 0 0 10px 0;
font-weight: bold;
}
.why-test-item p {
color: var(--muted);
font-size: 15px;
line-height: 1.7;
margin: 0 0 20px 0; /* Spacing below each description */
}
.step { padding: 20px 20px; background: rgba(255,255,255,0.02); border-radius: var(--border-radius-md); text-align: center; transition: 0.3s; overflow: hidden; display: flex !important; flex-direction: column !important; align-items: center; justify-content: flex-start; gap: 8px; height: 100%; box-sizing: border-box; }
.step i { font-size: 48px !important; }
.step b, .card h3, .sub-h1 { display: block !important; width: 100%; margin: 0; font-size: 1.1rem; }
.step p, .card p { margin: 0; line-height: 1.6; font-size: 16px; flex-grow: 1; }
.step:hover, .card:hover { background: rgba(255,255,255,0.05); transform: translateY(-5px); }
.step b, .sub-h1 { display: block !important; width: 100%; margin: 0; font-size: 1.1rem; }
.step p { margin: 0; line-height: 1.6; font-size: 16px; flex-grow: 1; }
.step:hover { background: rgba(255,255,255,0.05); transform: translateY(-5px); }
/* --- Cyber Stats Section --- */
/* --- Social Contact Grid (page5.html) --- */
.social-contact-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 40px;
text-align: right; /* For RTL context */
}
.social-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
transition: all 0.3s ease;
}
.social-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 255, 195, 0.1);
border-color: var(--accent);
}
.social-card img {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 8px; /* Softer edges for icons */
}
.social-card .social-text {
color: var(--text);
font-weight: bold;
font-size: 16px;
}
.cyber-stats-section {
padding: 60px 20px;
}
.stats-grid {
display: grid;
gap: 30px;
grid-template-columns: repeat(3, 1fr);
}
.stat-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 15px;
text-align: center;
padding: 30px 20px;
transition: 0.3s;
}
.stat-card:hover {
transform: translateY(-5px);
border-color: var(--accent);
}
.stat-num {
font-size: 48px;
color: var(--accent);
font-weight: 800;
margin: 0 0 15px 0;
}
.stat-card p {
color: var(--muted);
line-height: 1.8;
margin: 0;
font-size: 15px;
}
/* --- Form Grid (e.g., for Join as Instructor page) --- */
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.form-grid .full-width {
grid-column: 1 / -1;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
width: 100%;
box-sizing: border-box;
height: 45px;
background: var(--card);
border: 1px solid rgba(255,255,255,0.1);
padding: 0 15px;
border-radius: 10px;
color: var(--text);
outline: none;
font-size: 14px;
font-family: inherit;
}
.form-grid textarea {
height: auto;
padding: 15px;
resize: vertical;
min-height: 120px;
}
/* --- FAQ --- */
.faq-grid { margin-top: 20px; }
.faq-item { background: var(--card); padding: 18px; border-radius: var(--border-radius-md); margin-bottom: 12px; cursor: pointer; border: 1px solid rgba(255,255,255,0.03); transition: 0.3s; }
.faq-item:hover { border-color: var(--accent); }
.faq-item h4 { margin: 0; color: var(--blue); font-size: 16px; display: flex; justify-content: space-between; align-items: center; }
.faq-item h4::after { content: '+'; color: var(--accent); font-size: 20px; transition: 0.3s; }
.faq-item.active h4::after { content: '-'; transform: rotate(180deg); }
.faq-item.active p { display: block; }
.faq-item p { margin: 15px 0 0; color: var(--muted); font-size: 14px; display: none; line-height: 1.6; }
/* --- AI Chat Widget --- */
#ai-chat-widget { display: none !important; }
#ai-chat-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--gradient); border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 24px; color: #000; box-shadow: 0 5px 20px rgba(0,255,195,0.4); transition: 0.3s; }
#ai-chat-btn:hover { transform: scale(1.1); box-shadow: 0 8px 25px rgba(0,255,195,0.5); }
#ai-window { position: absolute; bottom: 80px; left: 0; width: 350px; height: 500px; background: var(--card); border: 1px solid var(--accent); border-radius: 15px; display: none; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.8); border-bottom: 4px solid var(--accent); }
#ai-header { background: var(--gradient); padding: 15px; color: #000; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
#ai-messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: #070a0f; }
.ai-msg { padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; max-width: 85%; word-wrap: break-word; }
.msg-bot { background: rgba(0, 255, 195, 0.1); color: var(--accent); align-self: flex-start; border: 1px solid rgba(0, 255, 195, 0.2); border-bottom-right-radius: 2px; }
.msg-user { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-left-radius: 2px; }
#ai-input-area { padding: 12px; display: flex; gap: 8px; border-top: 1px solid rgba(255,255,255,0.05); background: var(--card); }
#ai-input { flex: 1; background: #000; border: 1px solid #333; color: #fff; padding: 10px; border-radius: 8px; outline: none; font-size: 13px; }
#ai-send { background: var(--accent); border: none; padding: 0 15px; border-radius: var(--border-radius-sm); cursor: pointer; color: #000; font-weight: bold; transition: 0.2s; }
/* --- Back to Top --- */
.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--gradient); color: #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; z-index: 2000; transition: 0.4s; opacity: 0; visibility: hidden; border: none; }
.back-to-top.show { opacity: 1; visibility: visible; }
.fade { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
.fade.show { opacity: 1; transform: translateY(0); }
/* --- Authentication Pages --- */
.auth-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: calc(100vh - 220px); /* Adjust based on header/footer height */
padding: 40px 20px;
}
.auth-container {
width: 100%;
max-width: 450px;
background: var(--glass);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--border-radius-lg);
padding: 40px;
box-sizing: border-box;
}
.auth-tabs {
display: flex;
margin-bottom: 30px;
background: rgba(0,0,0,0.2);
border-radius: 10px;
padding: 5px;
}
.auth-tab-btn {
flex: 1;
padding: 12px;
border: none;
background: transparent;
color: var(--muted);
font-size: 16px;
font-weight: bold;
cursor: pointer;
border-radius: 8px;
transition: 0.3s ease;
}
.auth-tab-btn.active {
background: var(--gradient);
color: #000;
box-shadow: 0 4px 15px rgba(0,255,195,0.2);
}
.auth-form { display: none; }
.auth-form.active { display: block; }
.form-group { margin-bottom: 20px; position: relative; }
.form-group label { display: block; color: var(--muted); margin-bottom: 8px; font-size: 14px; }
.form-group input { width: 100%; box-sizing: border-box; height: 50px; background: var(--bg); border: 1px solid rgba(255,255,255,0.1); padding: 0 15px; border-radius: 10px; color: var(--text); outline: none; font-size: 15px; font-family: inherit; transition: border-color 0.3s; }
.form-group input:focus { border-color: var(--accent); }
.form-options { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 14px; }
.remember-me { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); }
.remember-me input[type="checkbox"] { display: none; }
.remember-me .checkbox-custom { width: 18px; height: 18px; background: var(--bg); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s; }
.remember-me .checkbox-custom i { color: var(--accent); font-size: 12px; opacity: 0; transform: scale(0.5); transition: 0.2s; }
.remember-me input[type="checkbox"]:checked + .checkbox-custom { background: var(--accent); border-color: var(--accent); }
.remember-me input[type="checkbox"]:checked + .checkbox-custom i { opacity: 1; transform: scale(1); }
.forgot-password-link { color: var(--blue); text-decoration: none; transition: color 0.3s; }
.forgot-password-link:hover { color: var(--accent); text-decoration: underline; }
.auth-form .btn { width: 100%; margin-top: 30px; }
.auth-container h1 { text-align: center; color: var(--accent); margin-top: 0; margin-bottom: 10px; }
.auth-container p { text-align: center; color: var(--muted); margin-bottom: 30px; }
body.light .auth-tabs { background: rgba(0,0,0,0.05); }
body.light .form-group input { background: #eef2f7; border-color: rgba(0,0,0,0.1); }
body.light .remember-me .checkbox-custom { background: #eef2f7; border-color: rgba(0,0,0,0.2); }
/* 3. تنسيق الفوتر الموحد والنهائي (هيكلة جديدة وصارمة) */
footer, .footer {
width: 100%;
margin-top: auto; /* الأهم: يدفع الفوتر للأسفل في حاوية Flexbox */
padding: 50px 20px;
background: var(--glass);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text);
font-size: 14px;
box-sizing: border-box;
z-index: 10; /* ضمان ظهور الفوتر فوق العناصر الأخرى */
}
.footer-container { /* الحاوية الداخلية المستخدمة بواسطة footer-injector.js */
max-width: 900px;
margin: 0 auto;
}
/* 1. الهيكلة العامة للفوتر (شاشة الكمبيوتر) */
.footer-grid {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
margin-bottom: 40px;
}
/* 2. قسم "عن MAF Tech" (الجهة اليمنى) */
.footer-about-section {
flex: 1.5; /* نعطيه مساحة أكبر قليلاً */
text-align: right;
}
.footer-about-section h3 {
color: var(--accent); /* لون العنوان المميز */
margin-top: 0;
margin-bottom: 15px;
font-size: 18px;
}
.footer-about-section p {
color: var(--muted);
line-height: 1.8;
margin: 0;
}
.footer-social-icons {
display: flex;
justify-content: flex-start; /* محاذاة لليمين */
gap: 15px;
margin-top: 20px;
}
.footer-social-icons a {
display: inline-block;
transition: transform 0.3s ease;
}
.footer-social-icons a:hover {
transform: translateY(-3px);
}
.footer-social-icons img {
width: 25px;
height: 25px;
object-fit: contain;
}
/* 3. قسم الروابط التوجيهية (الجهة اليسرى) */
.footer-links-section {
flex: 1;
}
.footer-links-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 15px 30px !important; /* row-gap column-gap */
text-align: right;
}
.footer-links-column {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links-column a {
color: var(--muted);
text-decoration: none !important; /* إزالة الخط السفلي */
font-size: 15px;
transition: color 0.3s ease;
}
.footer-links-column a:hover {
color: var(--accent); /* تغيير اللون عند مرور الماوس */
}
/* قسم الحقوق */
.footer-copyright {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: var(--muted);
font-size: 13px;
text-align: center;
}
/* --- New Footer Accreditations & Banner --- */
.footer-accreditations {
display: flex;
justify-content: flex-start; /* Aligns to the right in RTL */
gap: 20px;
}
.accreditation-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.accreditation-item img {
width: 50px;
height: auto;
object-fit: contain;
}
/* New class for accreditation numbers to allow copying */
.badge-number {
font-size: 12px;
color: var(--muted);
user-select: text; /* Allow text selection */
cursor: text; /* Show text cursor */
}
.footer-banner {
display: flex;
justify-content: center;
margin: 30px 0;
}
.footer-banner img {
height: auto;
width: 100%;
max-width: 280px;
object-fit: contain;
}
/* --- Quiz Page --- */
.main-wrapper { flex: 1 0 auto; display: flex; justify-content: center; align-items: center; padding: 40px 20px; }
#quiz-container { width: 92%; max-width: 500px; background: var(--glass); border-radius: var(--border-radius-lg); padding: 30px; box-shadow: 0 10px 50px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.05); position: relative; margin: 20px 0; }
.progress { height: 6px; background: #1a2233; margin-bottom: 25px; border-radius: 10px; overflow: hidden; }
.bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--blue)); transition: 0.4s; }
.quiz-option-btn { display: block; width: 100%; padding: 16px; margin: 10px auto; background: rgba(255,255,255,0.03); border: 1.2px solid rgba(255,255,255,0.2); color: var(--text); border-radius: var(--border-radius-md); cursor: pointer; text-align: center; font-size: 16px; transition: 0.3s; box-sizing: border-box; }
.quiz-option-btn:hover { border-color: var(--accent); background: rgba(0,255,195,0.08); }
.start-btn { background: linear-gradient(90deg, var(--accent), var(--blue)); color: #000; font-weight: bold; text-align: center; border: none; padding: 16px; width: calc(100% - 0px); max-width: 360px; display: block; margin: 0 auto; border-radius: 15px; cursor: pointer; }
#quiz-content { width: 100%; margin: 0 auto; box-sizing: border-box; }
#quiz-content > div { width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
/* --- Quiz Result Styles --- */
.quiz-result-container { padding: 10px; margin: 0; background: var(--bg); color: var(--text); direction: rtl; font-family: Arial, sans-serif; text-align: center; }
.result-header { text-align: center; border-bottom: 2px solid var(--accent); padding-bottom: 20px; margin-bottom: 40px; }
.result-main-title { color: var(--accent); margin: 0; font-size: 28px; }
.result-path-box { text-align: center; margin-bottom: 40px; padding: 20px; border: 1.5px solid rgba(2, 105, 211, 0.3); border-radius: var(--border-radius-md); }
.result-path-label { color: var(--blue); font-size: 20px; font-weight: bold; margin-bottom: 10px; }
.result-path-title { color: var(--text); font-size: 24px; font-weight: bold; }
.skill-meter { margin-bottom: 15px; text-align: center; padding: 15px; background: rgba(255,255,255,0.02); border-radius: var(--border-radius-md); }
.skill-meter-title { font-size: 16px; color: var(--text); margin-bottom: 5px; }
.skill-meter-percent { font-size: 14px; margin-bottom: 8px; font-weight: bold; }
.skill-meter-percent.red { color: var(--red); }
.skill-meter-percent.blue { color: var(--blue); }
.skill-meter-percent.green { color: var(--green); }
.skill-meter-bar-bg { height: 14px; background: #111; border-radius: 7px; overflow: hidden; position: relative; width: 100%; }
.skill-meter-bar { position: absolute; right: 0; top: 0; height: 100%; }
.skill-meter-bar.red { background: var(--red); }
.skill-meter-bar.blue { background: var(--blue); }
.skill-meter-bar.green { background: var(--green); }
.roadmap-box { background: rgba(255,255,255,0.03); padding: 25px; border-radius: 15px; border: 1.5px solid rgba(0,255,195,0.3); text-align: center; }
.roadmap-title { color: var(--accent); font-weight: bold; margin-bottom: 20px; font-size: 18px; }
.roadmap-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); direction: rtl; }
.roadmap-item:last-child { border-bottom: none; }
.roadmap-level { color: var(--accent); font-weight: bold; width: 40%; text-align: right; }
.roadmap-cert { color: var(--text); font-weight: 500; width: 60%; text-align: left; direction: ltr; }
.quiz-actions { display: flex; gap: 15px; margin-top: 25px; direction: rtl; justify-content: center; flex-wrap: wrap; }
.pdf-btn { flex: 1; min-width: 150px; padding: 12px 20px; border: none; border-radius: var(--border-radius-md); font-size: 16px; font-weight: bold; cursor: pointer; transition: transform 0.2s ease; }
.pdf-btn:hover { transform: scale(1.03); }
.pdf-btn.download { background: var(--accent); color: #000; }
.pdf-btn.guide { background: var(--blue); color: #000; }
.pdf-btn i {
margin-left: 8px; /* إضافة مسافة بين الأيقونة والنص */
font-size: 14px;
}
/* تطبيق نمط زر المشاركة الثانوي على زر مشاركة النتيجة */
.pdf-btn.share {
background: rgba(255,255,255,0.05);
border: 1px solid var(--muted);
color: var(--text);
}
.pdf-btn.share:hover {
background: rgba(255,255,255,0.1);
border-color: var(--accent);
color: var(--accent);
}
body.light .pdf-btn.share {
background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.2); color: var(--text);
}
body.light .pdf-btn.share:hover {
background: rgba(2,105,211,0.1); border-color: var(--accent); color: var(--accent);
}
/* --- Terminal Loader Overlay --- */
.terminal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(7, 10, 15, 0.98);
z-index: 20000;
display: none;
align-items: center;
justify-content: center;
font-family: 'Courier New', Courier, monospace;
color: var(--accent);
padding: 20px;
box-sizing: border-box;
}
.terminal-overlay.active { display: flex; }
.terminal-content { width: 100%; max-width: 600px; direction: rtl; }
.terminal-line {
margin-bottom: 10px;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
border-left: .15em solid var(--accent); /* تغيير جهة المؤشر ليتناسب مع العربية */
width: 0;
animation: typing 1s steps(40, end) forwards, blink-caret .75s step-end infinite;
}
.terminal-line:nth-child(2) { animation-delay: 1s; }
.terminal-line:nth-child(3) { animation-delay: 2s; }
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--accent); } }
/* --- Share Modal --- */
.share-modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(5px);
display: flex; align-items: center; justify-content: center;
z-index: 30000;
cursor: pointer;
}
.share-modal-content {
background: var(--card);
padding: 30px 40px;
border-radius: var(--border-radius-lg);
text-align: center;
border: 1px solid var(--accent);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
cursor: default;
}
.share-modal-content h3 { color: var(--accent); margin-top: 0; margin-bottom: 25px; }
.share-modal-links { display: flex; gap: 30px; margin-bottom: 30px; justify-content: center; }
.share-modal-links a { text-decoration: none; font-size: 48px; transition: transform 0.2s ease; }
.share-modal-links a:hover { transform: scale(1.1); }
.share-modal-links .twitter { color: #1DA1F2; } /* X/Twitter */
.share-modal-links .linkedin { color: #0A66C2; }
.share-modal-close { background: var(--muted); color: var(--text); border: none; padding: 10px 25px; border-radius: var(--border-radius-md); cursor: pointer; font-weight: bold; }
body.light .quiz-result-container { background: var(--bg); color: var(--text); }
body.light .result-path-box { border-color: rgba(2, 105, 211, 0.3); }
body.light .result-path-label { color: var(--blue); }
body.light .result-path-title { color: var(--text); }
body.light .skill-meter { background: rgba(0,0,0,0.02); }
body.light .skill-meter-title { color: var(--text); }
body.light .skill-meter-bar-bg { background: #e0e0e0; }
body.light .roadmap-box { background: rgba(0,0,0,0.03); border-color: rgba(2, 105, 211, 0.3); }
body.light .roadmap-item { border-color: rgba(0,0,0,0.1); }
body.light .roadmap-cert { color: var(--text); }
/* Light mode styles for new footer */
body.light footer, body.light .footer {
border-top-color: rgba(0,0,0,0.08);
}
body.light .footer-links-column a {
color: var(--muted);
}
body.light .footer-links-column a:hover {
color: var(--accent);
}
body.light .footer-copyright {
border-top-color: rgba(0,0,0,0.1);
}
/* --- Cert Guide Page --- */
.main-content { flex: 1 0 auto; padding: 20px; position: relative; }
.nav-top { max-width: 900px; margin: 0 auto; display: flex; justify-content: flex-start; padding: 10px 20px; box-sizing: border-box; }
.home-link { color: var(--accent); text-decoration: none; font-size: 14px; display: flex; align-items: center; gap: 8px; opacity: 0.8; transition: 0.3s; }
.home-link:hover { opacity: 1; text-shadow: 0 0 8px var(--accent); }
.header { text-align: center; padding: 20px 0; }
.header h1 { color: var(--accent); font-size: 28px; margin-bottom: 5px; }
.controls-container { max-width: 600px; margin: 0 auto 30px; display: flex; gap: 10px; }
.controls-container { position: relative; } /* Make it a positioning context for the dropdown */
.search-wrapper { flex: 1; position: relative; }
.search-wrapper i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--accent); }
.search-input { width: 100%; height: 45px; background: var(--card); border: 1px solid rgba(255,255,255,0.1); padding: 0 40px 0 15px; border-radius: 10px; color: var(--text); outline: none; box-sizing: border-box; }
.search-input:focus { border-color: var(--accent); }
.filter-wrapper { position: relative; }
.filter-btn { width: 45px; height: 45px; background: var(--card); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: var(--accent); cursor: pointer; display: flex; justify-content: center; align-items: center; }
.filter-dropdown {
display: none; /* Hidden by default */
position: absolute;
top: calc(100% + 10px); /* Position below the controls container with a gap */
left: 0;
right: -150px;
background: var(--glass);
backdrop-filter: blur(1px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 10px;
z-index: 100;
animation: fadeInFilter 0.3s ease-out;
}
.filter-dropdown.show {
display: block;
}
.filter-options {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.filter-options label {
display: block;
padding: 8px 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
}
.filter-options input[type="checkbox"] {
display: none; /* Hide the actual checkbox */
}
.filter-options input[type="checkbox"]:checked + label {
background: var(--gradient);
color: #000;
border-color: var(--accent);
font-weight: bold;
}
.filter-options label:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent);
}
@keyframes fadeInFilter {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
body.light .filter-dropdown { border-color: rgba(0,0,0,0.1); }
body.light .filter-options label { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.2); }
body.light .filter-options input[type="checkbox"]:checked + label { background: var(--gradient); color: #fff; border-color: var(--accent); }
body.light .filter-options label:hover { background: rgba(2,105,211,0.1); border-color: var(--accent); }
#recommendedSection { max-width: 900px; margin: 0 auto 40px; padding: 25px; background: rgba(0, 255, 195, 0.05); border: 2px solid var(--accent); border-radius: 20px; display: none; backdrop-filter: blur(5px); }
.recommendation-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; color: var(--accent); }
.section-title { max-width: 900px; margin: 40px auto 20px; border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--muted); padding-bottom: 10px; }
/* --- Grid Layout for Course Cards (Final Grid Enforcement) --- */
/* Base styles (for tablets 769px-1023px and as a fallback) */
.courses-grid, #coursePrototypeContainer {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Default to 2 columns */
gap: 14px;
max-width: 900px;
margin: 0 auto;
padding: 0 20px; /* محاذاة مع محتوى الهيدر */
}
/* Desktop (1024px and up): Enforce 4 columns */
@media (min-width: 1024px) {
.courses-grid, #coursePrototypeContainer {
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px; /* Retaining a larger gap for desktop */
}
}
/* Mobile (768px and below): Enforce 2 columns with smaller gap */
@media (max-width: 768px) {
.courses-grid, #coursePrototypeContainer {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px; /* الفجوة بين البطاقات في الجوال */
padding: 0; /* السماح للشبكة بملء الحاوية الرئيسية في الجوال */
}
}
.course-card {
position: relative;
width: 100%;
background: var(--card);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 15px;
transition: 0.3s;
display: flex;
flex-direction: column;
box-sizing: border-box;
gap: 12px; /* المسافة بين الصورة والجسم */
}
.course-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 5px 15px rgba(0, 255, 195, 0.1); }
.card-meta-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-img-container {
aspect-ratio: 1 / 1;
width: 100%;
border-radius: 8px;
overflow: hidden;
background-color: rgba(0,0,0,0.2); /* لون خلفية أنيق لملء الفراغات */
display: flex;
align-items: center;
justify-content: center;
position: relative; /* ضروري لتحديد موضع الخط المضيء */
}
.card-img-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient);
box-shadow: 0 0 10px var(--accent);
}
.card-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.course-card .card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
position: relative;
gap: 6px; /* التحكم في المسافات العمودية الداخلية للبطاقة */
}
.card-org {
font-size: 12px;
color: var(--muted);
}
.badge { padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; margin-bottom: 10px; width: fit-content; }
.course-card .badge {
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
margin-bottom: 0;
}
.badge-red { background: rgba(255, 77, 109, 0.1); color: var(--red); }
.badge-blue { background: rgba(77, 163, 255, 0.1); color: var(--blue); }
.badge-green { background: rgba(45, 212, 191, 0.1); color: var(--green); }
.course-title { font-size: 17px; font-weight: bold; color: #fff; margin: 0; }
.course-desc { font-size: 13px; color: var(--muted); margin: 0; flex-grow: 1; }
.meta-info { display: flex; justify-content: space-between; font-size: 11px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; }
/* --- Track Specific Card Styles --- */
.course-card.track-offensive { border-color: rgba(255, 77, 109, 0.3); }
.course-card.track-defensive { border-color: rgba(77, 163, 255, 0.3); }
.course-card.track-grc { border-color: rgba(45, 212, 191, 0.3); }
.course-card.track-offensive:hover { border-color: var(--red) !important; box-shadow: 0 5px 15px rgba(255, 77, 109, 0.15) !important; }
.course-card.track-defensive:hover { border-color: var(--blue) !important; box-shadow: 0 5px 15px rgba(77, 163, 255, 0.15) !important; }
.course-card.track-grc:hover { border-color: var(--green) !important; box-shadow: 0 5px 15px rgba(45, 212, 191, 0.15) !important; }
.course-card .track-badge {
font-size: 20px; /* تم تكبير الأيقونة */
background: transparent;
border: none;
transition: 0.3s;
}
.course-card .track-badge.offensive { color: var(--red); }
.course-card .track-badge.defensive { color: var(--blue); }
.course-card .track-badge.grc { color: var(--green); }
.course-card:hover .track-badge { transform: scale(1.1); }
/* Modal */
.modal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); backdrop-filter: blur(10px); }
.modal-content { background: var(--card); margin: 50px auto; padding: 40px; border-radius: 20px; width: 90%; max-width: 650px; border: 1px solid var(--accent); position: relative; color: #fff; overflow-y: auto; max-height: 80vh; box-sizing: border-box; }
.close-btn { position: absolute; left: 20px; top: 20px; font-size: 24px; cursor: pointer; color: var(--muted); transition: 0.3s; }
.close-btn:hover { color: var(--red); }
/* --- Mobile Responsive --- */
/* --- Desktop Wide Layout Alignment (توسيع المحاذاة لشاشات الكمبيوتر) --- */
@media (min-width: 1024px) {
/* 1. توسيع الحاويات الرئيسية وتوسيطها */
.nav-container,
.container,
.footer-container {
width: 90%;
max-width: 1400px;
}
/* 1.1. تطبيق نفس القاعدة على الحاوية الرئيسية في الصفحات الداخلية */
.main-content {
width: 90%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
/* 2. إزالة الحشوات الأفقية من الأغلفة للسماح للمحتوى بالوصول للحواف */
.nav-container,
.container,
.hero,
.program-details-section,
.main-content {
padding-left: 0;
padding-right: 0;
}
/* 3. ضمان أن الحاويات الداخلية (مثل الشبكات والعناوين) تأخذ العرض الكامل */
.courses-grid, #coursePrototypeContainer, #recommendedSection, .section-title, .nav-top {
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
}
/* 4. التجاوب مع الجوال للفوتر */
@media (max-width: 768px) {
.footer-grid {
flex-direction: column; /* تحويل الفوتر الرئيسي إلى عمودي */
align-items: center; /* توسيط العناصر */
gap: 40px;
}
.footer-about-section {
text-align: center; /* توسيط نصوص قسم "عن" */
}
.footer-social-icons {
justify-content: center; /* توسيط أيقونات التواصل */
}
.footer-links-grid {
text-align: center; /* توسيط نصوص الروابط مع الحفاظ على العمودين */
}
.footer-accreditations {
justify-content: center; /* توسيط الاعتمادات في الجوال */
}
.social-contact-grid {
grid-template-columns: 1fr;
}
.why-test-grid {
flex-direction: column;
align-items: center;
gap: 20px;
}
}
@media (max-width: 768px) {
.nav-menu { width: 85%; max-width: 290px; }
#quiz-container { width: 95vw; max-width: 95vw; padding: 18px; }
#quiz-content { width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; text-align: center; }
.quiz-option-btn, .start-btn, .pdf-btn, #result-to-pdf { width: 100%; max-width: 100%; margin: 10px auto; box-sizing: border-box; }
#result-to-pdf { padding: 18px; border-radius: 18px; }
#result-to-pdf * { text-align: center !important; }
.container { padding: 15px; }
.section { padding: 20px; margin-top: 25px; }
/* Discovery Banner Mobile */
.discovery-banner {
flex-direction: column-reverse;
padding: 25px 20px;
gap: 25px;
text-align: center;
}
.banner-image {
max-width: 100%;
width: 100%;
}
.action-buttons {
justify-content: center;
flex-direction: row; /* تغيير التخطيط إلى أفقي لوضع الأزرار جنباً إلى جنب */
width: 100%;
gap: 10px; /* إضافة مسافة صغيرة بين الزرين */
}
.action-buttons .primary-btn,
.action-buttons .share-btn { width: auto; justify-content: center; padding: 10px 18px; font-size: 14px; }
/* Program Details Section Mobile */
.program-details-section {
grid-template-columns: 1fr; /* كسر التخطيط ليصبح عمودياً */
gap: 30px;
}
.new-vertical-carousel {
height: 200px;
}
.details-content, .details-content h2 {
text-align: center; /* توسيط محتوى النص في الجوال */
}
.beneficiaries-list {
text-align: right; /* إبقاء قائمة المستفيدين بمحاذاة اليمين لسهولة القراءة */
}
.prototype-card .card-image { height: 90px; }
/* Fix for 2-column grids on mobile (Form Overflow Fix) */
.form-grid {
grid-template-columns: 1fr !important; /* This was part of a fix for form overflow */
}
.stats-grid {
grid-template-columns: 1fr;
}
/* Mobile Form Layout Fix: Force single column and full width for all form elements */
.form-grid input,
.form-grid select,
.form-grid textarea,
.form-grid .btn {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.prototype-card .track-badge { width: 28px; height: 28px; font-size: 12px; top: -14px; }
.prototype-card .card-body { padding: 10px; gap: 6px; }
.prototype-card .title { font-size: 12px; line-height: 1.3; }
.prototype-card .description { font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prototype-card .provider { font-size: 10px; }
.prototype-card .meta-row { flex-direction: column; gap: 4px; }
.prototype-card .meta-row span { font-size: 10px; padding: 3px 5px; }
.prototype-card .duration-section { font-size: 10px; padding-top: 6px; }
.prototype-card .badge { font-size: 9px; padding: 3px 5px; top: 6px; right: 6px; }
.prototype-card .share-btn { width: 22px; height: 22px; font-size: 10px; top: 6px; left: 6px; }
.course-card { padding: 10px; border-radius: 10px; gap: 10px; /* تقليل الفجوة للشاشات الصغيرة */ }
.card-img-container { /* الارتفاع الآن يتم التحكم به عبر aspect-ratio لضمان التناسق */ }
.card-org { font-size: 10px; /* تم إزالة الهامش السفلي، يتم التحكم به عبر gap */ }
.course-card .track-badge {
/* إزالة الدائرة وتعديل الحجم والموضع للجوال */
font-size: 16px;
}
.course-title { font-size: 12px; line-height: 1.3; /* تم إزالة الهامش السفلي */ }
.course-desc { font-size: 11px; /* تم إزالة الهامش السفلي */ }
.card-footer { padding-top: 8px; flex-direction: column; gap: 6px; align-items: stretch; text-align: center; }
.card-duration { font-size: 10px; justify-content: center; }
.card-btn { width: 100%; justify-content: center; font-size: 10px; padding: 6px; box-sizing: border-box; }
}
/* تنسيق شارة العداد الجذري المستمر */
.cyber-counter-badge {
display: inline-flex;
align-items: center;
background: rgba(0, 255, 195, 0.05);
border: 1px solid rgba(0, 255, 195, 0.15);
padding: 8px 18px;
border-radius: 50px;
font-size: 14px;
color: var(--text);
/* تم التعديل ليناسب الموضع الجديد أسفل الأزرار */
margin-top: 25px;
box-shadow: 0 0 15px rgba(0, 255, 195, 0.03);
animation: counter-glow 3s ease-in-out infinite;
}
.cyber-counter-badge .counter-num {
color: var(--accent);
font-weight: 800;
margin: 0 4px;
text-shadow: 0 0 8px var(--accent);
}
@keyframes counter-glow {
0%, 100% { border-color: rgba(0, 255, 195, 0.15); box-shadow: 0 0 15px rgba(0, 255, 195, 0.03); }
50% { border-color: rgba(0, 255, 195, 0.4); box-shadow: 0 0 20px rgba(0, 255, 195, 0.1); }
}
/* --- دعم الوضع النهاري للقائمة المنبثقة (Header Dropdown) --- */
body.light .nav-profile-dropdown {
background: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
body.light .nav-profile-dropdown .dropdown-user-name {
color: #111827 !important;
}
body.light .nav-profile-dropdown .dropdown-user-label {
color: #5a6c82 !important;
border-bottom-color: rgba(0,0,0,0.08) !important;
}
body.light .nav-profile-dropdown .dropdown-link {
color: #111827 !important;
}
body.light .nav-profile-dropdown .dropdown-link:hover {
background: rgba(2, 105, 211, 0.1) !important;
color: var(--blue) !important;
}
/* =========================================
🌟 تأثيرات البطاقة السحرية (Magic Flip) 🌟
========================================= */
.cyber-card-wrapper {
display: flex;
flex-direction: column;
height: 100%;
background: #0b1120;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
overflow: hidden;
transition: 0.3s;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.cyber-card-wrapper:hover {
border-color: var(--accent);
box-shadow: 0 10px 25px rgba(0, 255, 195, 0.15);
}
/* الحاوية القابلة للالتفاف */
.flip-container {
perspective: 1000px;
flex-grow: 1;
position: relative;
min-height: 250px;
}
.flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
}
.flip-container.flipped .flip-inner {
transform: rotateY(180deg);
}
.flip-front, .flip-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
top: 0; left: 0;
display: flex;
flex-direction: column;
}
.flip-back {
transform: rotateY(180deg);
background: rgba(0,0,0,0.4);
padding: 20px;
box-sizing: border-box;
cursor: pointer;
overflow-y: auto;
}
.flip-back ul {
list-style: none; padding: 0; margin: 0;
}
.flip-back li {
margin-bottom: 12px; color: var(--text); font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px;
}
.flip-back li i { color: var(--accent); margin-left: 8px; width: 16px; text-align: center; }
/* الجزء السفلي الثابت (خارج الالتفاف) */
.card-static-footer {
padding: 15px;
border-top: 1px solid rgba(255,255,255,0.05);
background: #0b1120;
z-index: 2;
}
/* زر المزيد من المعلومات */
.btn-more-info {
width: 100%; padding: 8px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text); cursor: pointer; transition: 0.3s; font-family: inherit; font-size: 12px; font-weight: bold;
}
.btn-more-info:hover { background: rgba(0,255,195,0.1); border-color: var(--accent); color: var(--accent); }
/* =========================================
🌟 بانر مواعيد الدورات (الصفحة الرئيسية) 🌟
========================================= */
.upcoming-banner-container {
display: flex;
background: var(--glass);
border: 1px solid var(--accent);
border-radius: 20px;
overflow: hidden;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,255,195,0.1);
}
.upcoming-banner-right {
flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center;
}
.upcoming-banner-left {
width: 350px; background: #0b1120; padding: 20px; border-right: 1px solid rgba(255,255,255,0.05);
}
.countdown-box {
display: flex; gap: 15px; margin-top: 20px; justify-content: center;
}
.time-box {
background: rgba(0,0,0,0.5); border: 1px solid rgba(0,255,195,0.3); border-radius: 12px; padding: 10px; min-width: 60px; text-align: center;
}
.time-box span { display: block; font-size: 24px; font-weight: 900; color: var(--accent); }
.time-box small { font-size: 11px; color: var(--muted); }
@media(max-width: 800px){
.upcoming-banner-container { flex-direction: column; }
.upcoming-banner-left { width: 100%; border-right: none; border-top: 1px solid rgba(255,255,255,0.05); }
}
/* =========================================
🌟 التصميم المتطابق مع البطاقة الأصلية (معدل) 🌟
========================================= */
.cyber-card-wrapper {
background: #0b1120;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 19px;
display: flex;
flex-direction: column;
overflow: hidden;
transition: 0.3s;
height: 100%;
min-height: 540px; /* 🌟 تم زيادة 3 بكسل كما طلبت 🌟 */
text-decoration: none;
box-sizing: border-box;
}
.cyber-card-wrapper:hover {
border-color: var(--accent);
box-shadow: 0 10px 25px rgba(0, 255, 195, 0.15);
transform: translateY(-5px);
}
.flip-container {
perspective: 1000px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.flip-inner {
position: relative;
flex-grow: 1;
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
display: flex;
flex-direction: column;
}
.flip-container.flipped .flip-inner {
transform: rotateY(180deg);
}
.flip-front, .flip-back {
backface-visibility: hidden;
width: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.flip-back {
position: absolute;
top: 0; left: 0; height: 100%;
transform: rotateY(180deg);
background: #0b1120;
padding: 20px;
box-sizing: border-box;
cursor: pointer;
overflow-y: auto;
scrollbar-width: none;
}
.flip-back::-webkit-scrollbar { display: none; }
.cyber-card-img-wrap {
margin: 15px;
height: 250px;
border-radius: 12px;
overflow: hidden;
background: transparent;
flex-shrink: 0;
}
.cyber-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cyber-card-body { padding: 0 20px 20px 20px; display: flex; flex-direction: column; flex-grow: 1; }
.cyber-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.cyber-card-badge { padding: 4px 16px; border-radius: 20px; font-size: 12px; font-weight: bold; background: transparent; }
.badge-مبتدئ { color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.3); }
.badge-متوسط { color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-محترف { color: #4da3ff; border: 1px solid rgba(77, 163, 255, 0.3); }
.cyber-shield-group { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cyber-shield-icon { font-size: 24px; }
.shield-red { color: #ff4d6d; }
.shield-blue { color: #4da3ff; }
.shield-green { color: #2dd4bf; }
.cyber-card-org { font-size: 11px; color: #2dd4bf; font-weight: bold; text-transform: uppercase; }
.cyber-card-title { font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 10px 0; text-align: right; line-height: 1.5; }
.cyber-card-desc { font-size: 12px; color: #8b9bb0; line-height: 1.6; margin: 0 0 15px 0; text-align: right; flex-grow: 1; }
.card-static-footer {
padding: 15px 20px 20px 20px;
border-top: 1px solid rgba(255,255,255,0.05);
background: rgba(0,0,0,0.2);
z-index: 2;
margin-top: auto;
}
.meta-info-row {
display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 15px;
}
.meta-info-row span {
font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 6px;
}
.btn-more-info {
width: 100%; padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: var(--text); cursor: pointer; transition: 0.3s; font-family: inherit; font-size: 13px; font-weight: bold; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: auto;
}
.btn-more-info:hover { background: rgba(0,255,195,0.08); border-color: var(--accent); color: var(--accent); }
/* 🌟 السطر السحري (box-sizing) لمساواة عرض الزر مع البطاقة تماماً 🌟 */
.cyber-card-btn {
width: 100%; background: linear-gradient(90deg, #00ffc3, #4da3ff); color: #000 !important; padding: 12px; border-radius: 999px; font-size: 14px; font-weight: 900; text-decoration: none; display: flex; justify-content: center; align-items: center; gap: 8px; transition: 0.3s; border: none; cursor: pointer; font-family: inherit;
box-sizing: border-box;
}
.cyber-card-btn:hover { transform: scale(1.03); box-shadow: 0 4px 15px rgba(0, 255, 195, 0.3); }
/* =========================================
🌟 سلايدر مواعيد الدورات التفاعلي (الرئيسية) 🌟
========================================= */
.upcoming-slider-wrapper {
position: relative;
width: 100%;
margin-bottom: 20px;
}
#dynamic-banners-container {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
-ms-overflow-style: none; /* إخفاء السكرول في IE */
scrollbar-width: none; /* إخفاء السكرول في Firefox */
padding-bottom: 10px;
cursor: grab; /* علامة اليد للسحب */
}
#dynamic-banners-container::-webkit-scrollbar {
display: none; /* إخفاء السكرول الافتراضي في Chrome/Safari */
}
#dynamic-banners-container.dragging {
scroll-behavior: auto;
cursor: grabbing;
}
.upcoming-banner-container {
flex: 0 0 calc(50% - 10px); /* عرض بانرين في الشاشة الكبيرة */
max-width: calc(50% - 10px);
display: flex;
background: var(--glass);
border: 1px solid var(--accent);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,255,195,0.1);
align-items: stretch;
user-select: none; /* منع تحديد النصوص أثناء السحب */
}
.upcoming-banner-container img {
pointer-events: none; /* يمنع المتصفح من سحب الصورة نفسها أثناء تمرير السلايدر */
}
/* 🌟 شريط التمرير المخصص (Scrollbar) 🌟 */
.custom-scrollbar-container {
width: 100%;
max-width: 250px;
height: 6px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
margin: 20px auto 30px auto;
position: relative;
display: none; /* يظهر تلقائياً بالجافاسكريبت إذا زادت البانرات عن 2 */
}
.custom-scrollbar-thumb {
position: absolute; top: 0; right: 0; height: 100%; width: 50%;
background: var(--accent); border-radius: 10px; cursor: grab; transition: background 0.3s;
}
.custom-scrollbar-thumb:active {
background: var(--blue); cursor: grabbing;
}
/* 🌟 زر عرض المزيد 🌟 */
.view-more-wrapper {
text-align: center; margin-top: 10px;
}
.view-more-main-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 35px; border-radius: 12px;
background: transparent; border: 1.5px solid var(--accent);
color: var(--accent); font-size: 15px; font-weight: bold;
text-decoration: none; transition: 0.3s;
}
.view-more-main-btn:hover {
background: var(--accent); color: #000;
transform: translateY(-3px); box-shadow: 0 5px 20px rgba(0,255,195,0.3);
}
/* تفاصيل داخل البانر */
.upcoming-banner-right {
width: 50%; padding: 40px; display: flex; flex-direction: column; justify-content: center; text-align: right; box-sizing: border-box;
}
.upcoming-banner-left {
width: 50%; background: transparent; padding: 25px; border-right: 1px solid rgba(255,255,255,0.15); display: flex; justify-content: center; align-items: center; box-sizing: border-box;
}
.upcoming-banner-left .banner-item-container {
width: 100%; max-width: 100%; height: 100%;
}
.countdown-box {
display: flex; gap: 6px; margin-top: 20px; justify-content: flex-start; direction: ltr; flex-direction: row-reverse; flex-wrap: nowrap;
}
.time-box {
background: rgba(0,0,0,0.5); border: 1px solid rgba(0,255,195,0.3); border-radius: 8px; padding: 6px 4px; min-width: 46px; text-align: center;
}
.time-box span { display: block; font-size: 16px; font-weight: 900; color: var(--accent); }
.time-box small { font-size: 9px; color: var(--muted); }
/* دعم الوضع النهاري للزر والشريط */
body.light .custom-scrollbar-container { background: rgba(0,0,0,0.08); }
body.light .view-more-main-btn { border-color: var(--accent); color: var(--accent); }
body.light .view-more-main-btn:hover { background: var(--accent); color: #fff; box-shadow: 0 5px 20px rgba(2, 105, 211, 0.3); }
/* التجاوب مع الجوال */
@media(max-width: 900px){
.upcoming-banner-container { flex: 0 0 100%; max-width: 100%; flex-direction: column-reverse; }
.upcoming-banner-left { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 20px; }
.upcoming-banner-right { width: 100%; padding: 30px 20px; }
.countdown-box { justify-content: center; }
.upcoming-banner-left .banner-item-container { max-width: 350px; margin: 0 auto; }
}
@media(max-width: 900px){
#dynamic-banners-container { grid-template-columns: 1fr; }
.upcoming-banner-container { flex-direction: column-reverse; }
.upcoming-banner-left { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 20px; }
.upcoming-banner-right { width: 100%; padding: 30px 20px; }
.countdown-box { justify-content: center; }
.upcoming-banner-left .banner-item-container { max-width: 350px; margin: 0 auto; }
}
/* =========================================
📱 إصلاح عرض البطاقات في شاشات الجوال فقط 📱
========================================= */
@media(max-width: 768px) {
/* تنسيقات واجهة البطاقة */
.cyber-card-wrapper { min-height: 420px; }
.cyber-card-img-wrap { margin: 8px; width: calc(100% - 16px); height: auto; aspect-ratio: 1 / 1; }
.cyber-card-body { padding: 0 10px 10px 10px; }
.cyber-card-top { margin-bottom: 10px; }
.cyber-card-badge { padding: 3px 8px; font-size: 9px; }
.cyber-shield-icon { font-size: 18px; }
.cyber-card-org { font-size: 9px; }
.cyber-card-title { font-size: 12px; margin-bottom: 6px; line-height: 1.4; }
.cyber-card-desc { font-size: 10px; margin-bottom: 10px; line-height: 1.5; }
.btn-more-info { padding: 8px; font-size: 11px; }
.card-static-footer { padding: 10px 12px; }
.meta-info-row { margin-bottom: 10px; }
.meta-info-row span { font-size: 10px; }
.cyber-card-btn { padding: 10px; font-size: 12px; }
/* 🌟 التعديل الجديد: ترتيب ظهر البطاقة (التفاصيل) في الجوال 🌟 */
.flip-back {
padding: 15px 12px !important; /* تقليل الهوامش الداخلية */
}
.flip-back h4 {
font-size: 13px !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
}
.flip-back li {
font-size: 10px !important; /* تصغير الخط بشكل مريح */
margin-bottom: 8px !important;
padding-bottom: 6px !important;
display: flex !important; /* 🌟 ترتيب الأيقونة والنص بجانب بعض 🌟 */
align-items: center !important;
text-align: right !important;
}
.flip-back li i {
margin-left: 6px !important;
font-size: 11px !important;
flex-shrink: 0 !important; /* منع انكماش الأيقونة */
width: auto !important;
}
.flip-back li strong {
margin-left: 4px !important;
}
}
/* =========================================
☀️ التوافق الكامل مع الوضع النهاري (Light Mode) ☀️
========================================= */
body.light .cyber-card-wrapper {
background: var(--card) !important;
border-color: rgba(0,0,0,0.08) !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}
body.light .flip-back {
background: var(--card) !important;
}
body.light .cyber-card-title {
color: var(--text) !important;
}
body.light .cyber-card-desc {
color: var(--muted) !important;
}
body.light .card-static-footer {
background: rgba(0,0,0,0.02) !important;
border-top-color: rgba(0,0,0,0.05) !important;
}
body.light .btn-more-info {
background: rgba(0,0,0,0.04) !important;
border-color: rgba(0,0,0,0.08) !important;
color: var(--text) !important; /* 🌟 هذا السطر يظهر النص المختفي 🌟 */
}
body.light .btn-more-info:hover {
background: rgba(2, 105, 211, 0.1) !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
}
body.light .flip-back li {
color: var(--text) !important;
border-bottom-color: rgba(0,0,0,0.05) !important;
}
body.light .time-box {
background: var(--card) !important;
border-color: rgba(0,0,0,0.1) !important;
}
body.light .time-box small {
color: var(--muted) !important;
}
/* ==================================================
MAF Tech Phase 1: Advisor Quiz Refinement
================================================== */
.hero-trust-note,
.quiz-disclaimer,
.result-disclaimer {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.8;
margin-top: 14px;
}
.quiz-intro-card {
background: rgba(255,255,255,0.035);
border: 1px solid rgba(0,255,195,0.16);
border-radius: 22px;
padding: 24px;
margin-bottom: 22px;
box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
.quiz-intro-badge,
.advisor-result-badge {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent);
background: rgba(0,255,195,0.08);
border: 1px solid rgba(0,255,195,0.18);
border-radius: 999px;
padding: 7px 14px;
font-size: 0.82rem;
font-weight: 800;
margin-bottom: 12px;
}
.quiz-intro-card h3 {
margin: 0 0 12px;
font-size: clamp(1.25rem, 4vw, 1.8rem);
color: var(--text);
}
.quiz-intro-card p {
color: var(--muted);
line-height: 1.9;
margin: 0 auto 16px;
max-width: 760px;
}
.quiz-intro-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 18px 0 8px;
}
.quiz-intro-points span {
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.035);
border-radius: 14px;
padding: 12px;
color: var(--text);
font-weight: 700;
font-size: 0.92rem;
}
.quiz-intro-points i { color: var(--accent); margin-left: 6px; }
.quiz-question-card {
background: rgba(255,255,255,0.025);
padding: 26px;
border-radius: 18px;
border: 1.2px solid rgba(0,255,195,0.18);
text-align: center;
}
.quiz-step-label {
color: var(--muted);
font-size: 0.92rem;
margin-bottom: 10px;
font-weight: 800;
}
.quiz-question-title {
font-size: clamp(1.1rem, 3.6vw, 1.45rem);
margin-bottom: 22px;
font-weight: 900;
color: var(--accent);
line-height: 1.7;
}
.quiz-options-grid {
display: grid;
gap: 12px;
}
.quiz-progress-text {
color: var(--muted);
margin-top: 15px;
font-size: 0.9rem;
}
.advisor-result-header p {
color: var(--muted);
line-height: 1.9;
margin: 10px auto 0;
max-width: 720px;
}
.advisor-result-header .result-main-title i {
color: var(--accent);
margin-left: 8px;
}
.advisor-next-step .result-path-title {
font-size: 1rem;
line-height: 1.9;
color: var(--text);
}
.advisor-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 18px 0;
}
.advisor-card {
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 18px;
text-align: right;
}
.advisor-card.warning {
border-color: rgba(255,77,109,0.25);
background: rgba(255,77,109,0.045);
}
.advisor-card h4 {
margin: 0 0 10px;
color: var(--text);
font-size: 1rem;
}
.advisor-card h4 i {
color: var(--accent);
margin-left: 7px;
}
.advisor-card.warning h4 i { color: var(--red); }
.advisor-card p {
color: var(--muted);
line-height: 1.9;
margin: 0;
}
.result-disclaimer {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 14px;
margin-bottom: 0;
}
@media (max-width: 720px) {
.quiz-intro-points,
.advisor-grid {
grid-template-columns: 1fr;
}
.quiz-intro-card,
.quiz-question-card {
padding: 18px;
}
}
/* ==================================================
MAF Tech Phase 2: Wide Responsive Quiz Page
================================================== */
.compact-footer p {
margin: 0;
}
.compact-footer .footer-note {
max-width: 760px;
margin: 10px auto 0;
line-height: 1.8;
color: var(--muted);
font-size: 0.9rem;
}
.quiz-page .quiz-page-wrapper {
width: 100%;
min-height: calc(100vh - 92px);
align-items: flex-start;
justify-content: center;
padding: clamp(28px, 5vw, 72px) clamp(16px, 4vw, 42px);
position: relative;
overflow: hidden;
}
.quiz-page .quiz-page-wrapper::before,
.quiz-page .quiz-page-wrapper::after {
content: "";
position: absolute;
border-radius: 999px;
filter: blur(60px);
opacity: 0.18;
pointer-events: none;
}
.quiz-page .quiz-page-wrapper::before {
width: 420px;
height: 420px;
background: var(--accent);
top: -160px;
right: -120px;
}
.quiz-page .quiz-page-wrapper::after {
width: 360px;
height: 360px;
background: var(--blue);
bottom: -140px;
left: -120px;
}
.quiz-page #quiz-container,
.quiz-page .quiz-shell {
width: min(1180px, 100%);
max-width: 1180px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
position: relative;
z-index: 1;
}
.quiz-page .quiz-page-heading {
text-align: center;
max-width: 880px;
margin: 0 auto clamp(22px, 4vw, 34px);
}
.quiz-page .quiz-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 15px;
margin-bottom: 14px;
border-radius: 999px;
color: var(--accent);
background: rgba(0,255,195,0.08);
border: 1px solid rgba(0,255,195,0.18);
font-weight: 800;
font-size: 0.86rem;
}
.quiz-page #quiz-title {
color: var(--text);
text-align: center;
font-size: clamp(2rem, 5vw, 3.4rem);
line-height: 1.25;
margin: 0;
letter-spacing: -0.03em;
}
.quiz-page .quiz-page-heading p {
color: var(--muted);
line-height: 1.9;
font-size: clamp(0.98rem, 2vw, 1.12rem);
margin: 16px auto 0;
}
.quiz-page .progress {
width: min(960px, 100%);
height: 8px;
margin: 0 auto clamp(22px, 4vw, 34px);
border-radius: 999px;
background: rgba(255,255,255,0.08);
overflow: hidden;
}
.quiz-page #quiz-content {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0;
text-align: initial !important;
}
.quiz-page .quiz-intro-card {
width: 100%;
max-width: none;
margin: 0 auto 24px;
padding: clamp(22px, 4vw, 40px);
border-radius: 30px;
background:
linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
var(--glass);
border: 1px solid rgba(255,255,255,0.09);
box-shadow: 0 24px 70px rgba(0,0,0,0.28);
text-align: center;
}
.quiz-page .quiz-intro-copy {
max-width: 850px;
margin: 0 auto;
}
.quiz-page .quiz-intro-card h3 {
font-size: clamp(1.55rem, 4vw, 2.7rem);
line-height: 1.35;
margin-bottom: 18px;
}
.quiz-page .quiz-intro-card p {
max-width: 820px;
font-size: 1rem;
}
.quiz-page .quiz-intro-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 28px auto 8px;
}
.quiz-page .quiz-intro-points span {
min-height: 92px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 18px;
border-radius: 22px;
font-size: 1rem;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.1);
}
.quiz-page .start-btn {
width: min(420px, 100%);
max-width: 420px;
padding: 17px 24px;
border-radius: 999px;
font-size: 1rem;
box-shadow: 0 14px 35px rgba(0,255,195,0.16);
}
.quiz-page .quiz-question-card {
width: 100%;
max-width: none;
padding: clamp(22px, 4vw, 44px);
border-radius: 30px;
background:
linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
var(--glass);
border: 1px solid rgba(255,255,255,0.09);
box-shadow: 0 24px 70px rgba(0,0,0,0.24);
text-align: center;
}
.quiz-page .quiz-step-label {
display: inline-flex;
padding: 8px 15px;
border-radius: 999px;
background: rgba(0,255,195,0.08);
border: 1px solid rgba(0,255,195,0.16);
color: var(--accent);
margin-bottom: 18px;
}
.quiz-page .quiz-question-title {
max-width: 900px;
margin: 0 auto clamp(22px, 4vw, 34px);
font-size: clamp(1.35rem, 3.5vw, 2.2rem);
color: var(--text);
}
.quiz-page .quiz-options-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.quiz-page .quiz-option-btn {
min-height: 72px;
margin: 0;
padding: 18px 20px;
border-radius: 20px;
font-size: 1rem;
line-height: 1.7;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-start;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.12);
}
.quiz-page .quiz-option-btn:hover {
transform: translateY(-2px);
border-color: rgba(0,255,195,0.5);
box-shadow: 0 16px 34px rgba(0,0,0,0.16);
}
.quiz-page .quiz-progress-text {
text-align: center;
margin-top: 22px;
}
.quiz-page .advisor-result {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
background: transparent !important;
color: var(--text);
text-align: initial !important;
}
.quiz-page .advisor-result-header {
text-align: center !important;
margin-bottom: 22px;
padding: clamp(22px, 4vw, 38px);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 30px;
background:
linear-gradient(135deg, rgba(0,255,195,0.1), rgba(2,105,211,0.08)),
rgba(255,255,255,0.035);
box-shadow: 0 24px 70px rgba(0,0,0,0.22);
}
.quiz-page .advisor-result-header .result-main-title {
font-size: clamp(1.7rem, 4vw, 3rem);
line-height: 1.35;
text-align: center !important;
}
.quiz-page .advisor-result-header p {
max-width: 920px;
text-align: center !important;
}
.quiz-page .advisor-result-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);
gap: 18px;
align-items: stretch;
margin-bottom: 18px;
}
.quiz-page .advisor-main-column,
.quiz-page .advisor-side-column {
display: flex;
flex-direction: column;
gap: 18px;
}
.quiz-page .advisor-next-step,
.quiz-page .roadmap-box,
.quiz-page .advisor-card,
.quiz-page .skill-meter {
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 24px;
box-shadow: 0 18px 50px rgba(0,0,0,0.16);
}
.quiz-page .advisor-next-step {
margin: 0;
padding: clamp(20px, 3vw, 30px);
text-align: right !important;
}
.quiz-page .result-path-label {
color: var(--accent);
font-size: 1rem;
margin-bottom: 10px;
text-align: right !important;
}
.quiz-page .result-path-title {
font-size: clamp(1.08rem, 2.2vw, 1.35rem);
line-height: 1.9;
text-align: right !important;
}
.quiz-page .advisor-card {
padding: clamp(20px, 3vw, 26px);
text-align: right !important;
}
.quiz-page .advisor-card h4,
.quiz-page .advisor-card p {
text-align: right !important;
}
.quiz-page .advisor-card p {
font-size: 0.96rem;
}
.quiz-page .roadmap-box {
flex: 1;
margin: 0;
padding: clamp(20px, 3vw, 30px);
text-align: right !important;
}
.quiz-page .roadmap-title {
font-size: 1.08rem;
margin-bottom: 18px;
text-align: right !important;
}
.quiz-page .roadmap-title i {
color: var(--accent);
margin-left: 8px;
}
.quiz-page .roadmap-item {
gap: 18px;
padding: 14px 0;
}
.quiz-page .roadmap-level {
width: 130px;
flex: 0 0 130px;
text-align: right !important;
}
.quiz-page .roadmap-cert {
width: auto;
flex: 1;
text-align: right !important;
direction: ltr;
}
.quiz-page .skill-meters-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 18px 0;
}
.quiz-page .skill-meter {
margin: 0;
padding: 20px;
text-align: right !important;
}
.quiz-page .skill-meter-title,
.quiz-page .skill-meter-percent {
text-align: right !important;
}
.quiz-page .skill-meter-bar-bg {
height: 12px;
background: rgba(0,0,0,0.32);
}
.quiz-page .result-disclaimer {
margin: 18px 0 0;
padding: 18px 20px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
background: rgba(255,255,255,0.025);
text-align: center !important;
}
.quiz-page .quiz-actions {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 20px;
}
.quiz-page .pdf-btn {
width: 100%;
min-width: 0;
margin: 0;
border-radius: 18px;
padding: 15px 16px;
}
body.light.quiz-page .quiz-intro-card,
body.light.quiz-page .quiz-question-card,
body.light.quiz-page .advisor-result-header,
body.light.quiz-page .advisor-next-step,
body.light.quiz-page .roadmap-box,
body.light.quiz-page .advisor-card,
body.light.quiz-page .skill-meter,
body.light.quiz-page .result-disclaimer {
background: rgba(255,255,255,0.85) !important;
border-color: rgba(0,0,0,0.08) !important;
box-shadow: 0 18px 46px rgba(0,0,0,0.08) !important;
}
@media (max-width: 980px) {
.quiz-page .advisor-result-layout,
.quiz-page .skill-meters-grid,
.quiz-page .quiz-actions {
grid-template-columns: 1fr;
}
.quiz-page .advisor-side-column {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.quiz-page .quiz-page-wrapper {
padding: 26px 14px 42px;
}
.quiz-page .quiz-intro-points,
.quiz-page .quiz-options-grid,
.quiz-page .advisor-side-column {
grid-template-columns: 1fr;
}
.quiz-page .quiz-intro-card,
.quiz-page .quiz-question-card,
.quiz-page .advisor-result-header,
.quiz-page .advisor-next-step,
.quiz-page .roadmap-box,
.quiz-page .advisor-card,
.quiz-page .skill-meter {
border-radius: 22px;
}
.quiz-page .quiz-intro-points span {
min-height: auto;
}
.quiz-page .quiz-option-btn {
min-height: auto;
font-size: 0.95rem;
}
.quiz-page .roadmap-item {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.quiz-page .roadmap-level,
.quiz-page .roadmap-cert {
width: 100%;
flex: none;
}
}
/* --- Phase 5: clean PDF export for advisor report --- */
.pdf-btn.download {
background: linear-gradient(90deg, var(--accent), var(--blue));
color: #00110d;
border: 1px solid transparent;
}
.pdf-btn.download:hover {
box-shadow: 0 14px 30px rgba(0,255,195,0.12);
}
.pdf-export-wrapper {
position: fixed;
left: -99999px;
top: 0;
width: 1120px;
padding: 30px;
direction: rtl;
background: #070a0f;
color: #e6edf3;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-sizing: border-box;
z-index: -1;
}
body.quiz-page .pdf-export-wrapper .advisor-result {
width: 100% !important;
max-width: none !important;
padding: 28px !important;
margin: 0 !important;
border-radius: 30px !important;
background: linear-gradient(145deg, rgba(15,22,35,0.98), rgba(8,13,21,0.98)) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
box-shadow: none !important;
color: #e6edf3 !important;
text-align: initial !important;
box-sizing: border-box;
}
body.quiz-page .pdf-export-wrapper .advisor-result-header,
body.quiz-page .pdf-export-wrapper .advisor-next-step,
body.quiz-page .pdf-export-wrapper .roadmap-box,
body.quiz-page .pdf-export-wrapper .advisor-card,
body.quiz-page .pdf-export-wrapper .skill-meter,
body.quiz-page .pdf-export-wrapper .result-disclaimer {
break-inside: avoid;
page-break-inside: avoid;
box-shadow: none !important;
}
body.quiz-page .pdf-export-wrapper .advisor-result-layout {
display: grid !important;
grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr) !important;
gap: 16px !important;
}
body.quiz-page .pdf-export-wrapper .skill-meters-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
}
body.quiz-page .pdf-export-wrapper * {
transform: none !important;
box-sizing: border-box;
}
/* --- Phase 6 fixes: reliable PDF button + non-overlapping certificate guide cards --- */
.quiz-page .pdf-btn.download {
background: linear-gradient(90deg, var(--accent), var(--blue)) !important;
color: #00110d !important;
border: 1px solid transparent !important;
}
.quiz-page .pdf-btn.download[disabled] {
opacity: .78;
cursor: wait;
transform: none !important;
}
body:has(#certGrid) .cert-page {
overflow: visible !important;
isolation: isolate;
}
body:has(#certGrid) .guide-controls {
width: min(1120px, 100%) !important;
max-width: 1120px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body:has(#certGrid) #certGrid.guide-grid,
body:has(#certGrid) .guide-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 30px 24px !important;
align-items: stretch !important;
grid-auto-rows: auto !important;
overflow: visible !important;
}
body:has(#certGrid) .guide-card {
height: auto !important;
min-height: 560px !important;
margin: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
contain: layout paint;
}
body:has(#certGrid) .guide-card h3 {
min-height: 86px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
body:has(#certGrid) .guide-card p {
min-height: 86px !important;
text-align: center !important;
overflow-wrap: anywhere !important;
}
body:has(#certGrid) .guide-card .meta-box {
min-height: 60px !important;
overflow-wrap: anywhere !important;
}
body:has(#certGrid) .guide-card .card-actions {
margin-top: auto !important;
}
@media (max-width: 1250px) {
body:has(#certGrid) #certGrid.guide-grid,
body:has(#certGrid) .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
body:has(#certGrid) #certGrid.guide-grid,
body:has(#certGrid) .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; }
body:has(#certGrid) .guide-card { min-height: 520px !important; }
}
@media (max-width: 620px) {
body:has(#certGrid) #certGrid.guide-grid,
body:has(#certGrid) .guide-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
body:has(#certGrid) .guide-card,
body:has(#certGrid) .guide-card h3,
body:has(#certGrid) .guide-card p,
body:has(#certGrid) .guide-card .meta-box { min-height: auto !important; }
}
/* ==========================================================
Phase 7 - Homepage Advisor Refresh
هدف هذا الجزء: تحويل الرئيسية إلى واجهة إرشادية واضحة بدون بيع أو تسجيل
========================================================== */
.home-page .nav-container,
.home-page .footer-container {
max-width: 1220px;
}
.home-container {
max-width: 1220px;
padding: 28px 22px 70px;
}
.home-page .nav-menu a.active,
.home-page .nav-menu a.nav-link.active {
color: var(--accent);
border-color: rgba(0, 255, 195, 0.25);
background: rgba(0, 255, 195, 0.10);
}
.home-hero {
min-height: calc(100vh - 150px);
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
gap: 34px;
align-items: center;
padding: 54px 0 36px;
}
.home-hero-content {
text-align: right;
}
.home-eyebrow,
.home-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
width: fit-content;
border: 1px solid rgba(0, 255, 195, 0.22);
background: rgba(0, 255, 195, 0.08);
color: var(--accent);
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0;
}
.home-hero h1 {
margin: 22px 0 18px;
font-size: clamp(38px, 6vw, 76px);
line-height: 1.18;
letter-spacing: -1.6px;
color: var(--text);
}
.home-hero h1::first-line {
color: var(--text);
}
.home-hero h1 span,
.home-gradient-text {
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-hero-lead {
max-width: 720px;
margin: 0;
color: var(--muted);
font-size: clamp(16px, 2vw, 19px);
line-height: 2;
}
.home-hero-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 30px;
}
.home-hero-actions.center {
justify-content: center;
}
.home-primary-btn,
.home-secondary-btn {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 16px;
padding: 0 24px;
text-decoration: none;
font-weight: 900;
transition: 0.25s ease;
border: 1px solid transparent;
box-sizing: border-box;
}
.home-primary-btn {
color: #00110d;
background: var(--gradient);
box-shadow: 0 16px 44px rgba(0, 255, 195, 0.16);
}
.home-secondary-btn {
color: var(--text);
background: rgba(255,255,255,0.045);
border-color: rgba(255,255,255,0.12);
}
.home-secondary-btn.wide {
margin-top: 22px;
width: fit-content;
}
.home-primary-btn:hover,
.home-secondary-btn:hover {
transform: translateY(-3px);
}
.home-secondary-btn:hover {
border-color: rgba(0,255,195,0.45);
color: var(--accent);
background: rgba(0,255,195,0.08);
}
.home-trust-note {
margin-top: 22px;
max-width: 650px;
color: #facc15;
background: rgba(250, 204, 21, 0.08);
border: 1px solid rgba(250, 204, 21, 0.22);
border-radius: 16px;
padding: 13px 16px;
line-height: 1.8;
font-size: 14px;
}
.home-hero-panel {
position: relative;
min-height: 500px;
border-radius: 34px;
padding: 28px;
background:
radial-gradient(circle at 70% 0%, rgba(0, 255, 195, 0.18), transparent 38%),
radial-gradient(circle at 10% 90%, rgba(77, 163, 255, 0.16), transparent 42%),
rgba(15, 22, 35, 0.72);
border: 1px solid rgba(255,255,255,0.09);
box-shadow: 0 30px 80px rgba(0,0,0,0.38);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.panel-glow {
position: absolute;
inset: auto -70px -80px auto;
width: 240px;
height: 240px;
background: rgba(0, 255, 195, 0.18);
filter: blur(70px);
border-radius: 999px;
pointer-events: none;
}
.mini-result-card {
position: relative;
z-index: 1;
border-radius: 26px;
padding: 26px;
background: rgba(7, 10, 15, 0.62);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.mini-result-header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--accent);
font-weight: 900;
margin-bottom: 28px;
}
.mini-result-header i {
width: 46px;
height: 46px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 16px;
color: #00110d;
background: var(--gradient);
}
.mini-result-card h3 {
margin: 0 0 12px;
color: var(--muted);
font-size: 18px;
}
.mini-result-card strong {
display: block;
color: var(--accent);
font-size: clamp(26px, 4vw, 38px);
line-height: 1.35;
margin-bottom: 16px;
}
.mini-result-card p {
color: var(--muted);
line-height: 1.9;
margin: 0;
}
.home-hero-stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 16px;
}
.home-hero-stats div {
min-height: 92px;
border-radius: 20px;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.08);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
text-align: center;
}
.home-hero-stats strong {
color: var(--accent);
font-size: 25px;
}
.home-hero-stats span {
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.home-section {
margin-top: 34px;
padding: clamp(26px, 4vw, 46px);
border-radius: 30px;
background: rgba(15, 22, 35, 0.62);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 22px 70px rgba(0,0,0,0.18);
}
.home-section-heading {
max-width: 760px;
margin: 0 auto 30px;
text-align: center;
}
.home-section-heading h2,
.home-cert-copy h2,
.home-final-cta h2 {
margin: 16px 0 12px;
color: var(--text);
font-size: clamp(28px, 4vw, 46px);
line-height: 1.25;
letter-spacing: -0.8px;
}
.home-section-heading p,
.home-cert-copy p,
.home-final-cta p {
color: var(--muted);
line-height: 2;
font-size: 16px;
margin: 0;
}
.home-problem-grid,
.home-flow-grid,
.home-track-grid {
display: grid;
gap: 16px;
}
.home-problem-grid {
grid-template-columns: repeat(3, 1fr);
}
.home-problem-card,
.home-flow-step,
.home-track-card {
border-radius: 24px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.08);
padding: 24px;
transition: 0.25s ease;
}
.home-problem-card:hover,
.home-flow-step:hover,
.home-track-card:hover {
transform: translateY(-5px);
border-color: rgba(0,255,195,0.30);
background: rgba(0,255,195,0.055);
}
.home-problem-card i {
width: 52px;
height: 52px;
border-radius: 17px;
background: rgba(0,255,195,0.10);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 16px;
}
.home-problem-card h3,
.home-flow-step h3,
.home-track-card h3 {
color: var(--text);
margin: 0 0 10px;
font-size: 20px;
}
.home-problem-card p,
.home-flow-step p,
.home-track-card p {
color: var(--muted);
line-height: 1.85;
margin: 0;
font-size: 15px;
}
.home-how-section {
background:
linear-gradient(135deg, rgba(0,255,195,0.08), transparent 45%),
rgba(15, 22, 35, 0.62);
}
.home-flow-grid {
grid-template-columns: repeat(4, 1fr);
counter-reset: home-flow;
}
.home-flow-step {
min-height: 210px;
}
.home-flow-step span {
display: inline-flex;
color: var(--accent);
font-weight: 900;
font-size: 34px;
margin-bottom: 18px;
opacity: 0.95;
}
.home-track-grid {
grid-template-columns: repeat(3, 1fr);
}
.home-track-card {
display: block;
text-decoration: none;
min-height: 190px;
position: relative;
overflow: hidden;
}
.home-track-card::after {
content: "";
position: absolute;
inset: auto -40px -50px auto;
width: 140px;
height: 140px;
border-radius: 999px;
filter: blur(36px);
opacity: 0.20;
}
.home-track-card.defensive::after { background: var(--blue); }
.home-track-card.offensive::after { background: var(--red); }
.home-track-card.grc::after { background: var(--green); }
.home-track-card.cloud::after { background: #38bdf8; }
.home-track-card.forensics::after { background: #a78bfa; }
.home-track-card.appsec::after { background: #22c55e; }
.home-track-card i {
width: 54px;
height: 54px;
border-radius: 18px;
background: rgba(255,255,255,0.06);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 23px;
margin-bottom: 18px;
}
.home-cert-section {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
gap: 26px;
align-items: center;
}
.home-cert-copy {
text-align: right;
}
.home-cert-points {
display: grid;
gap: 10px;
margin-top: 20px;
}
.home-cert-points div {
color: var(--text);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 13px 15px;
}
.home-cert-points i {
color: var(--accent);
margin-left: 8px;
}
.home-cert-logos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.home-cert-logos span {
min-height: 82px;
border-radius: 22px;
background:
radial-gradient(circle at 50% 0%, rgba(0,255,195,0.14), transparent 45%),
rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text);
font-weight: 900;
text-align: center;
padding: 10px;
}
.home-final-cta {
text-align: center;
background:
radial-gradient(circle at 50% 0%, rgba(0,255,195,0.14), transparent 45%),
rgba(15, 22, 35, 0.72);
}
.home-final-cta p {
max-width: 780px;
margin: 0 auto;
}
.home-faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.home-faq-grid .faq-item {
margin-bottom: 0;
}
/* تحسين موحد للسكرول بار */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0,255,195,0.55) rgba(255,255,255,0.06);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgba(255,255,255,0.05);
border-radius: 999px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--accent), var(--blue));
border-radius: 999px;
border: 2px solid rgba(7,10,15,0.9);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
body.light .home-section,
body.light .home-hero-panel,
body.light .mini-result-card,
body.light .home-problem-card,
body.light .home-flow-step,
body.light .home-track-card {
border-color: rgba(0,0,0,0.08);
}
body.light .home-secondary-btn,
body.light .home-problem-card,
body.light .home-flow-step,
body.light .home-track-card,
body.light .home-cert-points div,
body.light .home-cert-logos span,
body.light .home-hero-stats div {
background: rgba(255,255,255,0.78);
border-color: rgba(0,0,0,0.08);
}
body.light .home-trust-note {
color: #8a5a00;
background: rgba(250, 204, 21, 0.18);
border-color: rgba(138, 90, 0, 0.18);
}
@media (max-width: 1040px) {
.home-hero,
.home-cert-section {
grid-template-columns: 1fr;
}
.home-hero {
min-height: auto;
padding-top: 34px;
}
.home-hero-panel {
min-height: auto;
}
.home-problem-grid,
.home-flow-grid,
.home-track-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 680px) {
.home-container {
padding: 20px 14px 54px;
}
.home-hero {
padding: 24px 0 18px;
}
.home-hero-content,
.home-cert-copy {
text-align: center;
}
.home-eyebrow,
.home-kicker {
margin-inline: auto;
}
.home-hero h1 {
font-size: clamp(34px, 10vw, 48px);
letter-spacing: -0.8px;
}
.home-hero-lead {
font-size: 15px;
}
.home-hero-actions,
.home-hero-actions.center {
justify-content: stretch;
}
.home-primary-btn,
.home-secondary-btn,
.home-secondary-btn.wide {
width: 100%;
}
.home-trust-note {
text-align: right;
}
.home-hero-panel,
.home-section {
border-radius: 24px;
padding: 20px;
}
.home-hero-stats,
.home-problem-grid,
.home-flow-grid,
.home-track-grid,
.home-cert-logos,
.home-faq-grid {
grid-template-columns: 1fr;
}
.home-flow-step {
min-height: auto;
}
}
/* ==========================================================
Phase 8 - Quiz Intelligence + Night/Day Contrast Polish
يثبت ألوان الاختبار، التقرير، ودليل الشهادات في الوضع الليلي والنهاري
========================================================== */
:root {
--surface-strong: rgba(15, 22, 35, 0.92);
--surface-soft: rgba(255,255,255,0.045);
--surface-hover: rgba(255,255,255,0.075);
--line-soft: rgba(255,255,255,0.11);
--line-strong: rgba(0,255,195,0.24);
--shadow-soft: 0 24px 70px rgba(0,0,0,0.24);
--warning-bg: rgba(255,77,109,0.055);
--warning-border: rgba(255,77,109,0.28);
}
body.light {
--surface-strong: rgba(255,255,255,0.94);
--surface-soft: rgba(255,255,255,0.86);
--surface-hover: rgba(2,105,211,0.075);
--line-soft: rgba(15,23,42,0.12);
--line-strong: rgba(2,105,211,0.24);
--shadow-soft: 0 24px 50px rgba(15,23,42,0.09);
--warning-bg: rgba(209,77,95,0.07);
--warning-border: rgba(209,77,95,0.22);
}
.quiz-page .quiz-page-wrapper {
overflow: visible !important;
}
.quiz-page .quiz-intro-card,
.quiz-page .quiz-question-card,
.quiz-page .advisor-result-header,
.quiz-page .advisor-next-step,
.quiz-page .roadmap-box,
.quiz-page .advisor-card,
.quiz-page .skill-meter,
.quiz-page .result-disclaimer,
.quiz-page .result-certs-section,
.quiz-page .result-cert-card,
.quiz-page .top-track-card {
background: var(--surface-soft) !important;
border-color: var(--line-soft) !important;
color: var(--text) !important;
box-shadow: var(--shadow-soft) !important;
}
.quiz-page .quiz-intro-card,
.quiz-page .quiz-question-card {
border-color: var(--line-strong) !important;
}
.quiz-page .quiz-intro-points {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.quiz-question-hint {
margin: -14px auto 22px !important;
max-width: 760px;
color: var(--muted) !important;
line-height: 1.8;
text-align: center !important;
}
.quiz-page .quiz-option-btn {
color: var(--text) !important;
background: var(--surface-soft) !important;
border-color: var(--line-soft) !important;
justify-content: space-between !important;
gap: 14px;
}
.quiz-page .quiz-option-btn span {
flex: 1;
}
.quiz-page .quiz-option-btn i {
color: var(--accent);
opacity: .75;
flex-shrink: 0;
}
.quiz-page .quiz-option-btn:hover,
.quiz-page .quiz-option-btn:focus-visible {
background: var(--surface-hover) !important;
border-color: var(--line-strong) !important;
outline: none;
}
.quiz-page .advisor-result-header {
background:
linear-gradient(135deg, rgba(0,255,195,0.12), rgba(77,163,255,0.08)),
var(--surface-soft) !important;
}
body.light.quiz-page .advisor-result-header {
background:
linear-gradient(135deg, rgba(2,105,211,0.10), rgba(3,181,255,0.10)),
rgba(255,255,255,0.96) !important;
}
.quiz-page .advisor-card.warning {
background: var(--warning-bg) !important;
border-color: var(--warning-border) !important;
}
.top-tracks-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 0 0 18px;
}
.top-track-card {
border-radius: 22px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
min-height: 86px;
}
.top-track-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 16px;
background: rgba(0,255,195,0.09);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line-strong);
}
.top-track-card strong,
.top-track-card span {
display: block;
text-align: right;
}
.top-track-card strong {
color: var(--text);
font-weight: 900;
margin-bottom: 5px;
}
.top-track-card span {
color: var(--muted);
font-size: .86rem;
}
.quiz-page .result-certs-section {
border-radius: 26px;
padding: clamp(18px, 3vw, 26px);
margin: 18px 0;
}
.result-certs-title {
margin: 0 0 16px;
color: var(--accent);
font-size: 1.08rem;
text-align: right;
}
.result-certs-title i {
margin-left: 8px;
}
.result-certs-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.result-cert-card {
border-radius: 22px;
padding: 14px;
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 14px;
align-items: stretch;
box-shadow: none !important;
}
.result-cert-code {
min-height: 86px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px;
color: #00110d;
font-weight: 950;
line-height: 1.25;
background: linear-gradient(135deg, var(--accent), var(--blue));
box-shadow: 0 12px 28px rgba(0,255,195,0.10);
}
.result-cert-info h4 {
margin: 0 0 8px;
color: var(--text);
font-size: .98rem;
line-height: 1.55;
text-align: right;
}
.result-cert-info p {
margin: 0 0 10px;
color: var(--muted);
line-height: 1.75;
font-size: .9rem;
text-align: right;
}
.result-cert-meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.result-cert-meta span,
.result-skills-list span {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 6px 10px;
background: rgba(255,255,255,0.055);
border: 1px solid var(--line-soft);
color: var(--muted);
font-size: .78rem;
font-weight: 800;
}
body.light .result-cert-meta span,
body.light .result-skills-list span {
background: rgba(2,105,211,0.055);
color: #42526a;
}
.result-skills-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.quiz-page .skill-meters-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.quiz-page .skill-meter.compact {
padding: 16px !important;
min-height: 118px;
}
.quiz-page .skill-meter.compact .skill-meter-title {
color: var(--text) !important;
line-height: 1.55;
}
.quiz-page .skill-meter.compact .skill-meter-title i {
color: var(--accent);
margin-left: 6px;
}
.quiz-page .skill-meter.compact .skill-meter-percent {
color: var(--accent) !important;
}
.quiz-page .skill-meter.compact .skill-meter-bar {
background: var(--gradient) !important;
}
body.light.quiz-page .quiz-page-heading p,
body.light.quiz-page .quiz-intro-card p,
body.light.quiz-page .advisor-result-header p,
body.light.quiz-page .advisor-card p,
body.light.quiz-page .result-disclaimer,
body.light.quiz-page .quiz-progress-text,
body.light.quiz-page .quiz-question-hint {
color: var(--muted) !important;
}
body.light.quiz-page .quiz-option-btn,
body.light.quiz-page .quiz-intro-points span,
body.light.quiz-page .pdf-btn:not(.download) {
background: rgba(255,255,255,0.92) !important;
border-color: rgba(15,23,42,0.12) !important;
color: var(--text) !important;
}
body.light.quiz-page .pdf-btn.guide {
background: linear-gradient(90deg, #0269d3, #03b5ff) !important;
color: #ffffff !important;
}
body.light.quiz-page .pdf-btn.download {
color: #ffffff !important;
}
/* دليل الشهادات: شبكة آمنة بدون تداخل على كل الشاشات */
#certGrid.guide-grid,
.guide-grid {
width: min(1320px, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 28px !important;
align-items: stretch !important;
overflow: visible !important;
}
.guide-card {
position: relative !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
background: var(--surface-strong) !important;
border-color: var(--line-soft) !important;
color: var(--text) !important;
}
.guide-card h3,
.guide-card p,
.guide-card .meta-box {
min-height: 0 !important;
overflow-wrap: anywhere !important;
}
.guide-card h3 {
color: var(--text) !important;
}
.guide-card p {
color: var(--muted) !important;
}
.guide-card .card-actions {
margin-top: auto !important;
}
body.light .guide-card,
body.light .guide-controls,
body.light .guide-modal-content,
body.light .filters-shell,
body.light .filters-card {
background: rgba(255,255,255,0.94) !important;
border-color: rgba(15,23,42,0.12) !important;
color: var(--text) !important;
box-shadow: 0 18px 42px rgba(15,23,42,0.08) !important;
}
body.light .guide-card p,
body.light .guide-card .muted,
body.light .guide-card .meta-box,
body.light .guide-modal-content p {
color: var(--muted) !important;
}
/* Scrollbar موحد وأوضح */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0,255,195,0.55) rgba(255,255,255,0.06);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgba(255,255,255,0.04);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--accent), var(--blue));
border-radius: 999px;
border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
@media (max-width: 1050px) {
.quiz-page .quiz-intro-points,
.top-tracks-grid,
.quiz-page .skill-meters-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.result-certs-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.quiz-page .quiz-intro-points,
.top-tracks-grid,
.quiz-page .skill-meters-grid,
.result-certs-grid {
grid-template-columns: 1fr !important;
}
.result-cert-card {
grid-template-columns: 1fr;
}
.result-cert-code {
min-height: 68px;
}
.top-track-card {
min-height: auto;
}
.quiz-page .quiz-option-btn {
text-align: right !important;
}
}
@media print {
body.quiz-page {
background: #070a0f !important;
}
body.quiz-page .nav-bar,
body.quiz-page .quiz-page-heading,
body.quiz-page .progress,
body.quiz-page .quiz-actions,
body.quiz-page footer,
body.quiz-page .footer,
body.quiz-page .back-to-top {
display: none !important;
}
body.quiz-page .quiz-page-wrapper {
padding: 0 !important;
min-height: auto !important;
}
}
/* ==========================================================
Phase 9 - Unified advisory side pages + clean navigation
========================================================== */
.nav-actions {
display: flex;
align-items: center;
gap: 10px;
}
.nav-link.active {
color: var(--accent) !important;
border-color: rgba(0,255,195,0.35);
background: rgba(0,255,195,0.10);
}
body.light .nav-link.active {
color: var(--accent) !important;
border-color: rgba(2,105,211,0.28);
background: rgba(2,105,211,0.10);
}
.advisor-page {
width: min(1120px, 100%);
margin: 0 auto;
padding: 42px 20px 76px;
box-sizing: border-box;
position: relative;
z-index: 1;
flex: 1 0 auto;
}
.advisor-hero,
.advisor-section,
.advisor-note {
border-radius: 30px;
background: linear-gradient(145deg, rgba(15,22,35,.92), rgba(8,13,21,.95));
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 22px 70px rgba(0,0,0,.22);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.advisor-hero {
text-align: center;
padding: clamp(34px, 6vw, 68px);
overflow: hidden;
position: relative;
}
.advisor-hero.compact {
padding: clamp(30px, 5vw, 56px);
}
.advisor-hero::before,
.advisor-hero::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.advisor-hero::before {
width: 360px;
height: 360px;
top: -140px;
right: -100px;
background: radial-gradient(circle, rgba(0,255,195,.20), transparent 68%);
}
.advisor-hero::after {
width: 300px;
height: 300px;
bottom: -140px;
left: -90px;
background: radial-gradient(circle, rgba(77,163,255,.16), transparent 70%);
}
.advisor-kicker {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
color: var(--accent);
background: rgba(0,255,195,.08);
border: 1px solid rgba(0,255,195,.22);
font-size: 12px;
font-weight: 900;
margin-bottom: 18px;
}
.advisor-hero h1 {
position: relative;
z-index: 1;
margin: 0 auto;
color: var(--text);
font-size: clamp(30px, 5vw, 56px);
line-height: 1.18;
max-width: 900px;
}
.advisor-hero p {
position: relative;
z-index: 1;
margin: 18px auto 0;
color: var(--muted);
line-height: 1.95;
font-size: 16px;
max-width: 850px;
}
.advisor-hero-actions {
position: relative;
z-index: 1;
margin-top: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.advisor-section {
margin-top: 24px;
padding: clamp(24px, 4vw, 42px);
}
.advisor-section-head {
text-align: center;
margin-bottom: 26px;
}
.advisor-section-head span {
color: var(--accent);
font-size: 13px;
font-weight: 900;
}
.advisor-section-head h2 {
color: var(--text);
font-size: clamp(24px, 3.4vw, 38px);
margin: 8px 0 10px;
}
.advisor-section-head p {
color: var(--muted);
line-height: 1.8;
max-width: 760px;
margin: 0 auto;
}
.advisor-grid {
display: grid;
gap: 16px;
}
.advisor-grid.three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.advisor-card {
padding: 24px;
border-radius: 22px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.075);
min-height: 210px;
box-sizing: border-box;
transition: .22s ease;
}
.advisor-card:hover {
transform: translateY(-4px);
border-color: rgba(0,255,195,.28);
background: rgba(0,255,195,.055);
}
.advisor-card i {
width: 48px;
height: 48px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent);
background: rgba(0,255,195,.08);
border: 1px solid rgba(0,255,195,.18);
font-size: 20px;
margin-bottom: 16px;
}
.advisor-card h3 {
color: var(--text);
margin: 0 0 10px;
font-size: 18px;
}
.advisor-card p {
color: var(--muted);
margin: 0;
line-height: 1.8;
font-size: 14px;
}
.advisor-steps {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.advisor-step {
padding: 24px;
border-radius: 22px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.075);
}
.advisor-step strong {
color: var(--accent);
font-size: 28px;
display: block;
margin-bottom: 14px;
}
.advisor-step h3 {
color: var(--text);
margin: 0 0 10px;
}
.advisor-step p {
color: var(--muted);
line-height: 1.8;
margin: 0;
font-size: 14px;
}
.advisor-note {
margin-top: 24px;
padding: 22px;
display: flex;
gap: 16px;
align-items: flex-start;
background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(15,22,35,.90));
border-color: rgba(245,158,11,.24);
}
.advisor-note > i {
width: 46px;
height: 46px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fcd34d;
background: rgba(245,158,11,.12);
border: 1px solid rgba(245,158,11,.22);
flex: 0 0 auto;
}
.advisor-note h3 {
color: var(--text);
margin: 0 0 8px;
}
.advisor-note p {
color: var(--muted);
line-height: 1.8;
margin: 0;
}
.contact-method-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.contact-method-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
border-radius: 22px;
text-decoration: none;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.075);
color: var(--text);
transition: .22s ease;
}
.contact-method-card:hover {
transform: translateY(-3px);
border-color: rgba(0,255,195,.28);
}
.contact-method-card > i {
width: 48px;
height: 48px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent);
background: rgba(0,255,195,.08);
border: 1px solid rgba(0,255,195,.18);
font-size: 20px;
flex: 0 0 auto;
}
.contact-method-card strong {
display: block;
color: var(--text);
margin-bottom: 4px;
}
.contact-method-card span {
color: var(--muted);
font-size: 14px;
direction: ltr;
display: inline-block;
}
.advisor-checklist {
display: grid;
gap: 12px;
}
.advisor-checklist > div {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border-radius: 18px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.07);
color: var(--muted);
line-height: 1.7;
}
.advisor-checklist i {
color: var(--accent);
margin-top: 4px;
}
.portal-coming-soon {
max-width: 760px;
text-align: center;
}
.portal-coming-soon h1 {
color: var(--text);
font-size: clamp(28px, 4vw, 44px);
margin: 0 0 14px;
}
.portal-coming-soon p {
color: var(--muted);
line-height: 1.9;
}
.portal-list {
text-align: right;
margin: 26px 0;
}
/* Better light mode contrast for all new cards */
body.light .advisor-hero,
body.light .advisor-section,
body.light .advisor-card,
body.light .advisor-step,
body.light .contact-method-card,
body.light .advisor-checklist > div,
body.light .portal-coming-soon {
background: rgba(255,255,255,.88);
border-color: rgba(17,24,39,.10);
box-shadow: 0 18px 55px rgba(15,23,42,.08);
}
body.light .advisor-note {
background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.88));
border-color: rgba(245,158,11,.28);
}
body.light .advisor-kicker,
body.light .advisor-card i,
body.light .contact-method-card > i {
background: rgba(2,105,211,.08);
border-color: rgba(2,105,211,.18);
color: var(--accent);
}
body.light .advisor-card:hover,
body.light .contact-method-card:hover {
background: rgba(2,105,211,.06);
border-color: rgba(2,105,211,.24);
}
/* Safety: if an old login icon remains in a cached page, hide it until the portal is ready */
.nav-login-btn {
display: none !important;
}
@media (max-width: 860px) {
.advisor-grid.three,
.advisor-steps,
.contact-method-grid {
grid-template-columns: 1fr;
}
.advisor-page {
padding: 26px 14px 56px;
}
.advisor-hero,
.advisor-section {
border-radius: 24px;
}
.advisor-card {
min-height: auto;
}
}
@media (max-width: 560px) {
.advisor-hero-actions {
align-items: stretch;
}
.advisor-hero-actions .primary-btn,
.advisor-hero-actions .guide-btn {
width: 100%;
}
.advisor-note {
flex-direction: column;
}
}
/* --- Phase 10: Quiz Analytics, Feedback, and Lead Capture --- */
.quiz-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 20px 0 12px;
text-align: right;
}
.quiz-meta-grid label,
.quiz-contact-fields label {
display: flex;
flex-direction: column;
gap: 8px;
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.quiz-meta-input,
.feedback-note-input {
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(255,255,255,.12);
background: rgba(7,12,20,.78);
color: var(--text);
border-radius: 14px;
min-height: 46px;
padding: 0 14px;
outline: none;
font-family: inherit;
transition: .22s ease;
}
.quiz-meta-input:focus,
.feedback-note-input:focus {
border-color: rgba(0,255,195,.55);
box-shadow: 0 0 0 4px rgba(0,255,195,.08);
}
.quiz-privacy-note,
.feedback-privacy-note {
color: var(--muted);
background: rgba(0,255,195,.055);
border: 1px solid rgba(0,255,195,.14);
border-radius: 14px;
padding: 12px 14px;
line-height: 1.8;
font-size: 13px;
margin: 12px 0 0 !important;
}
.quiz-privacy-note i,
.feedback-privacy-note i { color: var(--accent); margin-left: 6px; }
.quiz-feedback-card {
margin: 26px auto 0;
max-width: 1120px;
border-radius: 28px;
padding: clamp(20px, 4vw, 30px);
background: linear-gradient(145deg, rgba(15,22,35,.92), rgba(8,13,21,.96));
border: 1px solid rgba(255,255,255,.085);
box-shadow: 0 18px 60px rgba(0,0,0,.22);
text-align: right;
}
.feedback-head {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-start;
margin-bottom: 18px;
}
.feedback-kicker {
display: inline-flex;
padding: 7px 12px;
border-radius: 999px;
color: var(--accent);
background: rgba(0,255,195,.08);
border: 1px solid rgba(0,255,195,.18);
font-size: 12px;
font-weight: 900;
margin-bottom: 10px;
}
.feedback-head h3 {
margin: 0 0 8px;
color: var(--text);
font-size: clamp(20px, 3vw, 28px);
}
.feedback-head p {
margin: 0;
color: var(--muted);
line-height: 1.8;
}
.rating-public-summary {
min-width: 138px;
border-radius: 20px;
padding: 16px;
text-align: center;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
}
.rating-public-summary strong {
display: block;
font-size: 34px;
color: var(--accent);
line-height: 1;
}
.rating-public-summary span {
display: block;
color: var(--muted);
font-size: 12px;
margin-top: 8px;
}
.stars-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 18px;
}
.quiz-star-btn {
width: 46px;
height: 46px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.28);
cursor: pointer;
font-size: 20px;
transition: .2s ease;
}
.quiz-star-btn:hover,
.quiz-star-btn.active {
color: #fbbf24;
background: rgba(251,191,36,.12);
border-color: rgba(251,191,36,.45);
transform: translateY(-2px);
}
.rating-selected-text {
color: var(--muted);
font-weight: 800;
margin-right: 6px;
}
.contact-toggle-row {
display: flex;
align-items: center;
gap: 10px;
color: var(--text);
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.08);
padding: 14px;
border-radius: 16px;
cursor: pointer;
margin-bottom: 14px;
}
.contact-toggle-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.quiz-contact-fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.feedback-note-input {
min-height: 110px;
padding: 14px;
resize: vertical;
line-height: 1.7;
}
.feedback-submit-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.feedback-message {
color: var(--accent);
font-size: 14px;
font-weight: 800;
}
body.light .quiz-meta-input,
body.light .feedback-note-input {
background: rgba(255,255,255,.92);
border-color: rgba(17,24,39,.12);
color: var(--text);
}
body.light .quiz-feedback-card {
background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,247,251,.98));
border-color: rgba(17,24,39,.10);
box-shadow: 0 20px 60px rgba(17,24,39,.08);
}
body.light .rating-public-summary,
body.light .contact-toggle-row {
background: rgba(2,105,211,.045);
border-color: rgba(2,105,211,.12);
}
body.light .quiz-star-btn {
background: rgba(2,105,211,.045);
border-color: rgba(17,24,39,.12);
color: rgba(17,24,39,.25);
}
body.light .quiz-star-btn:hover,
body.light .quiz-star-btn.active {
color: #b45309;
background: rgba(245,158,11,.13);
border-color: rgba(245,158,11,.35);
}
body.light .quiz-privacy-note,
body.light .feedback-privacy-note {
background: rgba(2,105,211,.055);
border-color: rgba(2,105,211,.15);
}
@media (max-width: 760px) {
.quiz-meta-grid,
.quiz-contact-fields { grid-template-columns: 1fr; }
.feedback-head { flex-direction: column; }
.rating-public-summary { width: 100%; box-sizing: border-box; }
.quiz-star-btn { width: 42px; height: 42px; border-radius: 14px; }
}
/* ==========================================================
Phase 11 - Polish Pass: dashboard spacing, quiz controls, cards, footer
========================================================== */
/* Quiz intro button placement and privacy text */
.quiz-page .intro-start-btn {
width: min(360px, 100%) !important;
margin: 18px auto 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.quiz-page .quiz-privacy-note {
text-align: center !important;
margin: 16px auto 0 !important;
max-width: 760px;
}
/* Custom select for stage field */
.maf-custom-select { position: relative; width: 100%; }
.maf-select-trigger {
width: 100%; min-height: 46px; border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(7,12,20,.78); color: var(--text);
padding: 0 14px; display: flex; align-items: center; justify-content: space-between;
gap: 12px; font-family: inherit; font-weight: 800; cursor: pointer;
}
.maf-select-trigger i { color: var(--accent); transition: .22s ease; }
.maf-custom-select.open .maf-select-trigger { border-color: rgba(0,255,195,.55); box-shadow: 0 0 0 4px rgba(0,255,195,.08); }
.maf-custom-select.open .maf-select-trigger i { transform: rotate(180deg); }
.maf-select-menu {
position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 5000;
display: none; overflow: hidden; border-radius: 16px;
background: rgba(12,18,30,.98); border: 1px solid rgba(0,255,195,.22);
box-shadow: 0 18px 46px rgba(0,0,0,.35); backdrop-filter: blur(16px);
padding: 7px;
}
.maf-custom-select.open .maf-select-menu { display: grid; gap: 5px; }
.maf-select-menu button {
min-height: 40px; border: 0; border-radius: 11px; background: transparent; color: var(--text);
font-family: inherit; font-weight: 850; text-align: right; padding: 0 12px; cursor: pointer;
}
.maf-select-menu button:hover,
.maf-select-menu button.selected { background: rgba(0,255,195,.12); color: var(--accent); }
body.light .maf-select-trigger { background: rgba(255,255,255,.92); border-color: rgba(17,24,39,.12); color: var(--text); }
body.light .maf-select-menu { background: rgba(255,255,255,.98); border-color: rgba(2,105,211,.18); box-shadow: 0 18px 38px rgba(15,23,42,.12); }
body.light .maf-select-menu button:hover,
body.light .maf-select-menu button.selected { background: rgba(2,105,211,.10); color: var(--accent); }
select option { background: var(--card); color: var(--text); }
body.light select option { background: #ffffff; color: #111827; }
/* Result buttons: compact and not stretched */
.quiz-page .quiz-actions {
width: min(880px, 100%) !important;
margin: 22px auto 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.quiz-page .quiz-actions .pdf-btn {
width: auto !important;
min-width: 190px !important;
flex: 0 1 auto !important;
padding: 13px 20px !important;
border-radius: 16px !important;
white-space: nowrap;
}
.quiz-page .feedback-submit-row .pdf-btn { width: auto !important; min-width: 180px; flex: 0 0 auto; }
@media (max-width: 620px) {
.quiz-page .quiz-actions { display: grid !important; grid-template-columns: 1fr !important; }
.quiz-page .quiz-actions .pdf-btn { width: 100% !important; }
}
/* Certificate guide cards: stable alignment and two cards on mobile */
#certGrid.guide-grid,
.guide-grid {
grid-auto-rows: 1fr !important;
gap: 34px 26px !important;
}
.guide-card {
height: 100% !important;
border-radius: 26px !important;
}
.guide-card .card-head { min-height: 86px !important; }
.guide-card h3 { min-height: 84px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.guide-card p { min-height: 94px !important; }
.guide-card .card-meta { margin-top: auto !important; padding-top: 18px !important; }
.guide-card .meta-box { min-height: 64px !important; }
.badge.level-beginner { color: #052e1c !important; background: linear-gradient(135deg, #34d399, #00ffc3) !important; border-color: rgba(52,211,153,.5) !important; }
.badge.level-intermediate { color: #3b2500 !important; background: linear-gradient(135deg, #fbbf24, #fde68a) !important; border-color: rgba(251,191,36,.55) !important; }
.badge.level-pro { color: #fff1f2 !important; background: linear-gradient(135deg, #ef4444, #fb7185) !important; border-color: rgba(239,68,68,.55) !important; }
@media (max-width: 720px) {
#certGrid.guide-grid,
.guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
.guide-card { padding: 13px !important; border-radius: 20px !important; }
.guide-card .card-head { min-height: 0 !important; flex-direction: column-reverse !important; align-items: stretch !important; gap: 10px !important; }
.guide-card .card-badges { justify-content: center !important; }
.guide-card .badge { font-size: 10px !important; padding: 5px 7px !important; }
.guide-card .cert-code { width: 100% !important; min-height: 48px !important; font-size: 13px !important; border-radius: 15px !important; }
.guide-card h3 { min-height: 70px !important; font-size: 14px !important; line-height: 1.45 !important; }
.guide-card p { min-height: 92px !important; font-size: 11.5px !important; line-height: 1.65 !important; }
.guide-card .meta-box { min-height: 72px !important; font-size: 10.5px !important; padding: 9px !important; }
.guide-card .card-btn { min-height: 40px !important; font-size: 11px !important; }
}
/* Home mini result icon */
.mini-result-icon {
width: 46px; height: 46px; display: inline-flex; justify-content: center; align-items: center;
border-radius: 16px; color: #00110d; background: var(--gradient); box-shadow: 0 12px 28px rgba(0,255,195,.15);
}
.mini-result-icon i { color: #00110d; font-size: 18px; }
.mini-result-header > i { display: none; }
/* Modern footer */
.maf-footer {
margin-top: auto; padding: 42px 20px 28px;
background: linear-gradient(180deg, rgba(7,10,15,.72), rgba(7,10,15,.96));
border-top: 1px solid rgba(0,255,195,.10);
box-shadow: 0 -24px 70px rgba(0,0,0,.18);
}
.maf-footer .footer-container { width: min(1180px,100%); max-width: 1180px; }
.footer-hero-row {
display:flex; align-items:center; justify-content:space-between; gap:22px;
border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:22px;
background: linear-gradient(135deg, rgba(0,255,195,.075), rgba(77,163,255,.045), rgba(255,255,255,.025));
margin-bottom:22px;
}
.footer-brand-block { display:flex; align-items:center; gap:16px; text-align:right; }
.footer-logo { width:58px; height:58px; object-fit:contain; border-radius:18px; background:rgba(255,255,255,.035); padding:8px; border:1px solid rgba(255,255,255,.08); }
.footer-brand-block h3, .footer-links-section h3, .footer-mini-stats h3 { color:var(--accent); margin:0 0 8px; font-size:18px; }
.footer-brand-block p { margin:0; color:var(--muted); line-height:1.8; max-width:620px; }
.footer-cta-group { display:flex; gap:10px; flex-wrap:wrap; }
.footer-cta { min-height:44px; padding:0 16px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; color:var(--text); background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); font-weight:900; }
.footer-cta.primary { background:var(--gradient); color:#00110d; border:0; }
.maf-footer .footer-grid { display:grid; grid-template-columns:1.4fr 1fr .9fr; gap:28px; align-items:start; margin-bottom:26px; }
.footer-links-section h3, .footer-mini-stats h3 { text-align:right; }
.maf-footer .footer-links-grid { grid-template-columns:1fr 1fr !important; gap:12px 24px !important; }
.footer-mini-stats { display:flex; flex-direction:column; gap:10px; text-align:right; }
.footer-mini-stats span { color:var(--muted); background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:10px 12px; font-weight:800; }
.footer-mini-stats i { color:var(--accent); margin-left:8px; }
.maf-footer .footer-copyright { margin-top:24px; padding-top:22px; }
body.light .maf-footer { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,247,251,.98)); border-top-color: rgba(2,105,211,.12); }
body.light .footer-hero-row, body.light .footer-mini-stats span { background: rgba(255,255,255,.86); border-color: rgba(17,24,39,.10); }
@media (max-width: 900px) {
.footer-hero-row, .footer-brand-block { flex-direction:column; align-items:flex-start; }
.footer-cta-group { width:100%; }
.footer-cta { flex:1; }
.maf-footer .footer-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) { .footer-cta-group { display:grid; grid-template-columns:1fr; } }
/* ==========================================================
Phase 12 - PDF direct download, stable colors, mobile guide polish
========================================================== */
/* إلغاء تموّج الخلفية المتحركة على كل الموقع حتى لا تظهر اهتزازات في الجوال */
.cyber-grid,
.cyber-lines {
animation: none !important;
-webkit-animation: none !important;
}
.cyber-grid {
width: 100% !important;
height: 100% !important;
inset: 0 !important;
transform: none !important;
background-size: 44px 44px !important;
opacity: .72;
}
body.light .cyber-grid { opacity: .42; }
/* ألوان صفحة نتيجة الاختبار في النهاري والليلي بدون تضارب */
.quiz-page .advisor-result {
background: linear-gradient(145deg, rgba(15,22,35,.96), rgba(7,12,20,.98)) !important;
color: #e6edf3 !important;
border-color: rgba(255,255,255,.10) !important;
}
.quiz-page .advisor-result p,
.quiz-page .result-cert-info p,
.quiz-page .result-cert-meta,
.quiz-page .advisor-card p,
.quiz-page .roadmap-cert {
color: #a8b3c4 !important;
}
.quiz-page .advisor-next-step,
.quiz-page .roadmap-box,
.quiz-page .advisor-card,
.quiz-page .skill-meter,
.quiz-page .result-cert-card,
.quiz-page .top-track-card,
.quiz-page .result-disclaimer {
background: rgba(255,255,255,.045) !important;
border-color: rgba(255,255,255,.10) !important;
}
body.light.quiz-page .advisor-result {
background: linear-gradient(145deg, #ffffff, #f7fafc) !important;
color: #111827 !important;
border-color: rgba(15,23,42,.12) !important;
box-shadow: 0 22px 60px rgba(15,23,42,.09) !important;
}
body.light.quiz-page .advisor-result-header {
background: linear-gradient(135deg, rgba(2,105,211,.10), rgba(3,181,255,.08)) !important;
border-color: rgba(2,105,211,.18) !important;
}
body.light.quiz-page .advisor-next-step,
body.light.quiz-page .roadmap-box,
body.light.quiz-page .advisor-card,
body.light.quiz-page .skill-meter,
body.light.quiz-page .result-cert-card,
body.light.quiz-page .top-track-card,
body.light.quiz-page .result-disclaimer {
background: rgba(255,255,255,.88) !important;
border-color: rgba(15,23,42,.10) !important;
box-shadow: 0 12px 26px rgba(15,23,42,.055) !important;
}
body.light.quiz-page .result-main-title,
body.light.quiz-page .result-path-label,
body.light.quiz-page .roadmap-title,
body.light.quiz-page .advisor-card h4,
body.light.quiz-page .result-certs-title,
body.light.quiz-page .roadmap-level {
color: #0269d3 !important;
}
body.light.quiz-page .advisor-result p,
body.light.quiz-page .result-cert-info p,
body.light.quiz-page .result-cert-meta,
body.light.quiz-page .advisor-card p,
body.light.quiz-page .roadmap-cert,
body.light.quiz-page .skill-meter-title {
color: #475569 !important;
}
body.light.quiz-page .result-path-title,
body.light.quiz-page .result-cert-info h4 {
color: #111827 !important;
}
body.light.quiz-page .advisor-card.warning {
background: rgba(255,247,237,.88) !important;
border-color: rgba(249,115,22,.18) !important;
}
/* أزرار التقرير أصغر وأكثر احترافية */
.quiz-page .quiz-actions {
width: min(760px, 100%) !important;
gap: 12px !important;
}
.quiz-page .quiz-actions .pdf-btn {
min-width: 165px !important;
max-width: 230px !important;
flex: 0 0 auto !important;
padding: 12px 18px !important;
border-radius: 15px !important;
font-size: 14px !important;
}
@media (max-width: 620px) {
.quiz-page .quiz-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.quiz-page .quiz-actions .pdf-btn {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal !important;
}
.quiz-page .quiz-actions .pdf-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* دليل الشهادات: مكان ثابت لتاق المستوى بجانب رمز الشهادة */
.guide-card .card-head {
align-items: flex-start !important;
gap: 12px !important;
}
.cert-code-stack {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 9px !important;
flex: 0 0 auto !important;
}
.cert-code-stack .cert-code {
width: 92px !important;
min-width: 92px !important;
max-width: 92px !important;
}
.cert-code-stack .badge.level {
min-width: 72px !important;
justify-content: center !important;
padding: 7px 10px !important;
box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
.guide-card .card-badges {
flex: 1 1 auto !important;
min-width: 0 !important;
justify-content: flex-start !important;
align-content: flex-start !important;
}
.guide-card .badge.kind { opacity: .92; }
/* إصلاح التعارض القديم الذي كان يحول بطاقات الجوال إلى عمود واحد */
@media (max-width: 620px) {
body:has(#certGrid) #certGrid.guide-grid,
body:has(#certGrid) .guide-grid,
#certGrid.guide-grid,
.guide-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
body:has(#certGrid) .guide-card,
.guide-card {
min-height: 0 !important;
padding: 10px !important;
border-radius: 18px !important;
}
.guide-card .card-head {
display: grid !important;
grid-template-columns: 1fr auto !important;
align-items: start !important;
min-height: 0 !important;
gap: 8px !important;
}
.cert-code-stack .cert-code {
width: 66px !important;
min-width: 66px !important;
max-width: 66px !important;
min-height: 46px !important;
border-radius: 13px !important;
font-size: 11px !important;
padding: 7px !important;
}
.cert-code-stack .badge.level {
min-width: 58px !important;
padding: 5px 7px !important;
font-size: 9px !important;
}
.guide-card .card-badges { gap: 5px !important; justify-content: flex-start !important; }
.guide-card .badge { font-size: 8.5px !important; padding: 5px 6px !important; line-height: 1.35 !important; }
.guide-card .badge.kind { display: none !important; }
.guide-card h3 {
min-height: 58px !important;
font-size: 12px !important;
line-height: 1.45 !important;
margin: 8px 0 !important;
}
.guide-card p {
min-height: 78px !important;
font-size: 10px !important;
line-height: 1.65 !important;
}
.guide-card .card-meta { gap: 7px !important; padding-top: 10px !important; }
.guide-card .meta-box {
min-height: 58px !important;
padding: 8px !important;
font-size: 9.5px !important;
line-height: 1.55 !important;
border-radius: 12px !important;
}
.guide-card .card-btn {
min-height: 38px !important;
font-size: 10px !important;
border-radius: 12px !important;
}
}
/* فلاتر دليل الشهادات على الجوال: مرتبة بدل مستطيلات طويلة */
@media (max-width: 720px) {
body:has(#certGrid) .guide-controls {
padding: 14px !important;
border-radius: 22px !important;
}
body:has(#certGrid) .controls-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 9px !important;
}
body:has(#certGrid) .field-wrap.search-field { grid-column: 1 / -1 !important; }
body:has(#certGrid) .guide-input,
body:has(#certGrid) .guide-select {
min-height: 48px !important;
border-radius: 15px !important;
font-size: 12px !important;
font-weight: 900 !important;
padding-right: 36px !important;
padding-left: 10px !important;
}
body:has(#certGrid) .field-wrap i {
right: 12px !important;
font-size: 13px !important;
}
body:has(#certGrid) .track-chips {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
margin-top: 12px !important;
}
body:has(#certGrid) .track-chip {
min-height: 38px !important;
justify-content: center !important;
padding: 7px 8px !important;
font-size: 11px !important;
border-radius: 999px !important;
}
}
@media (max-width: 400px) {
body:has(#certGrid) .track-chips { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* منع تحول صفحة الطباعة/التنزيل إلى النهاري أثناء إنشاء PDF */
.pdf-export-wrapper,
.pdf-export-wrapper * {
color-scheme: dark !important;
}
/* ==========================================================
Phase 15 - Hostinger mobile performance + fixed header cleanup
========================================================== */
/* منع أي تمدد أفقي مع الحفاظ على سكرول عمودي طبيعي */
html,
body {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
scroll-behavior: auto !important;
overscroll-behavior-x: none;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* الهيدر ثابت دائماً في الأعلى */
body {
padding-top: 72px !important;
}
.nav-bar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
z-index: 10000 !important;
transform: none !important;
will-change: auto !important;
}
/* إزالة أزرار الفوتر الكبيرة نهائياً */
.footer-cta-group,
.footer-cta {
display: none !important;
}
/* الفوتر بعد حذف أزرار CTA */
.footer-hero-row {
justify-content: center !important;
}
.footer-brand-block {
width: 100%;
justify-content: center;
text-align: center !important;
}
.footer-brand-block p {
max-width: 760px;
margin: 0 auto;
}
/* لا نحتاج نوافذ الزائر القديمة لو بقيت في الكاش */
#quizWarningModal {
display: none !important;
}
/* تحسين السلاسة على الجوال وإزالة سبب الارتعاش */
@media (max-width: 768px) {
html,
body {
overflow-x: hidden !important;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}
body {
padding-top: 70px !important;
background:
radial-gradient(circle at 70% 4%, rgba(0, 255, 195, 0.10), transparent 30%),
radial-gradient(circle at 20% 24%, rgba(77, 163, 255, 0.08), transparent 35%),
#070a0f !important;
}
body.light {
background:
radial-gradient(circle at 70% 4%, rgba(2, 105, 211, 0.08), transparent 32%),
radial-gradient(circle at 20% 24%, rgba(3, 181, 255, 0.08), transparent 35%),
#f4f7fb !important;
}
/* الخلفية الشبكية الثقيلة كانت سبب التقطيع والارتعاش في الجوال */
.cyber-bg,
.cyber-grid,
.cyber-lines {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
overflow: hidden !important;
transform: none !important;
animation: none !important;
-webkit-animation: none !important;
pointer-events: none !important;
}
.cyber-grid,
.cyber-lines {
display: none !important;
}
/* إلغاء الفلاتر الثقيلة على الجوال لتحسين النزول والطلوع */
.nav-bar,
.nav-menu,
.section,
.discovery-banner,
.program-details-section,
.quiz-shell,
#quiz-container,
.quiz-intro-card,
.advisor-result,
.advisor-card,
.advisor-next-step,
.roadmap-box,
.rating-panel,
.guide-hero,
.guide-controls,
.cert-panel,
.cert-card,
.maf-footer,
.footer-hero-row,
.advisor-hero,
.advisor-section,
.advisor-note {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* منع تأثيرات fade من إعادة الرسم وقت السحب */
.fade,
.fade.show {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.container,
.main-wrapper,
.main-content,
.quiz-page-wrapper,
.cert-page,
.advisor-page,
.hero,
.section,
.quiz-shell,
#quiz-container,
.advisor-result,
.guide-hero,
.guide-controls,
.cert-shell,
.maf-footer,
.footer-container {
max-width: 100% !important;
overflow-x: hidden !important;
}
img,
svg,
video,
canvas {
max-width: 100% !important;
height: auto;
}
/* تثبيت الهيدر بشكل أنظف للجوال */
.nav-bar {
background: rgba(7, 10, 15, 0.96) !important;
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
body.light .nav-bar {
background: rgba(255,255,255,0.96) !important;
border-bottom-color: rgba(17,24,39,0.10) !important;
}
/* الفوتر بدون أزرار ضخمة */
.footer-hero-row {
padding: 20px !important;
}
.footer-brand-block {
align-items: center !important;
}
.footer-brand-block p {
font-size: 13px !important;
}
}
@media print {
body {
padding-top: 0 !important;
}
.nav-bar {
position: static !important;
}
}
/* ==================================================
Phase 16 - Certificate Guide Hero + Level Badge Polish
================================================== */
/* إلغاء أي مساحة متبقية لمنطقة أزرار الهيرو في دليل الشهادات */
.guide-hero .hero-actions:empty,
.guide-hero .hero-actions.is-hidden {
display: none !important;
}
/* ترتيب تاق المستوى تحت إطار رمز الشهادة من جهة اليسار بشكل ثابت */
.guide-card .card-head {
align-items: flex-start !important;
gap: 14px !important;
}
.cert-code-stack {
width: 96px !important;
min-width: 96px !important;
max-width: 96px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
direction: ltr !important;
flex: 0 0 96px !important;
}
.cert-code-stack .cert-code {
width: 96px !important;
min-width: 96px !important;
max-width: 96px !important;
min-height: 66px !important;
border-radius: 15px !important;
}
.cert-code-stack .badge.level {
direction: rtl !important;
align-self: flex-start !important;
min-width: 66px !important;
width: auto !important;
justify-content: center !important;
padding: 7px 12px !important;
border-radius: 9px !important;
line-height: 1.15 !important;
box-shadow: 0 10px 22px rgba(0,0,0,.14) !important;
margin: 0 !important;
}
.cert-code-stack .badge.level-beginner {
color: #042f20 !important;
background: linear-gradient(135deg, #34d399, #00ffc3) !important;
border-color: rgba(52, 211, 153, .58) !important;
}
.cert-code-stack .badge.level-intermediate {
color: #3f2a00 !important;
background: linear-gradient(135deg, #fbbf24, #fde68a) !important;
border-color: rgba(251, 191, 36, .62) !important;
}
.cert-code-stack .badge.level-pro {
color: #fff1f2 !important;
background: linear-gradient(135deg, #ef4444, #fb7185) !important;
border-color: rgba(239, 68, 68, .62) !important;
}
/* ترتيب شارات الجهة والنوع بحيث لا تضغط على رمز الشهادة */
.guide-card .card-badges {
flex: 1 1 auto !important;
min-width: 0 !important;
justify-content: flex-start !important;
align-content: flex-start !important;
gap: 8px !important;
}
.guide-card .badge:not(.level) {
border-radius: 10px !important;
}
@media (max-width: 620px) {
.cert-code-stack {
width: 68px !important;
min-width: 68px !important;
max-width: 68px !important;
flex-basis: 68px !important;
gap: 7px !important;
}
.cert-code-stack .cert-code {
width: 68px !important;
min-width: 68px !important;
max-width: 68px !important;
min-height: 46px !important;
border-radius: 12px !important;
}
.cert-code-stack .badge.level {
min-width: 48px !important;
padding: 5px 7px !important;
border-radius: 8px !important;
font-size: 9px !important;
}
}
/* ==========================================================
Phase 17 - Privacy Page
========================================================== */
.privacy-page {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 46px 0 80px;
position: relative;
z-index: 2;
}
.privacy-panel,
.privacy-card {
background: linear-gradient(145deg, rgba(15,22,35,.88), rgba(8,13,21,.94));
border: 1px solid rgba(255,255,255,.085);
border-radius: 28px;
box-shadow: 0 24px 70px rgba(0,0,0,.18);
}
.privacy-hero {
text-align: center;
padding: clamp(30px, 5vw, 58px);
overflow: hidden;
position: relative;
margin-bottom: 24px;
}
.privacy-hero::before,
.privacy-hero::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.privacy-hero::before {
inset: -150px -120px auto auto;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(0,255,195,.20), transparent 66%);
}
.privacy-hero::after {
inset: auto auto -150px -120px;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(77,163,255,.15), transparent 68%);
}
.privacy-eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
color: var(--accent);
background: rgba(0,255,195,.08);
border: 1px solid rgba(0,255,195,.22);
font-size: 12px;
font-weight: 900;
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.privacy-hero h1 {
margin: 0;
color: var(--text);
font-size: clamp(34px, 5vw, 58px);
line-height: 1.18;
position: relative;
z-index: 1;
}
.privacy-hero p {
color: var(--muted);
line-height: 2;
margin: 18px auto 0;
max-width: 840px;
font-size: 16px;
position: relative;
z-index: 1;
}
.privacy-hero-note {
margin: 24px auto 0;
width: min(760px, 100%);
padding: 14px 16px;
border-radius: 18px;
background: rgba(245,158,11,.08);
border: 1px solid rgba(245,158,11,.24);
color: #fcd34d;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
line-height: 1.8;
position: relative;
z-index: 1;
}
.privacy-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-bottom: 18px;
}
.privacy-card {
padding: 24px;
text-align: right;
}
.privacy-icon {
width: 52px;
height: 52px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent);
background: rgba(0,255,195,.08);
border: 1px solid rgba(0,255,195,.18);
margin-bottom: 16px;
font-size: 20px;
}
.privacy-card h2,
.privacy-wide h2,
.privacy-final h2 {
color: var(--accent);
margin: 0 0 12px;
font-size: 22px;
}
.privacy-card p,
.privacy-wide p,
.privacy-final p {
color: var(--muted);
line-height: 1.9;
margin: 0 0 14px;
}
.privacy-card ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.privacy-card li {
color: var(--text);
line-height: 1.8;
position: relative;
padding-right: 24px;
}
.privacy-card li::before {
content: "";
width: 8px;
height: 8px;
border-radius: 3px;
background: var(--accent);
position: absolute;
right: 0;
top: 12px;
box-shadow: 0 0 12px rgba(0,255,195,.35);
}
.privacy-wide,
.privacy-final {
padding: 24px;
margin-top: 18px;
text-align: right;
}
.privacy-wide h2 i,
.privacy-final h2 i { margin-left: 8px; }
.privacy-final {
text-align: center;
border-color: rgba(0,255,195,.18);
}
.privacy-final p { max-width: 850px; margin: 0 auto 20px; }
.privacy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 22px;
border-radius: 15px;
background: var(--gradient);
color: #00110d;
text-decoration: none;
font-weight: 900;
}
body.light .privacy-panel,
body.light .privacy-card {
background: rgba(255,255,255,.9);
border-color: rgba(17,24,39,.10);
box-shadow: 0 20px 55px rgba(17,24,39,.08);
}
body.light .privacy-hero-note {
background: rgba(245,158,11,.12);
border-color: rgba(245,158,11,.24);
color: #92400e;
}
@media (max-width: 760px) {
.privacy-page {
width: min(100% - 24px, 720px);
padding: 28px 0 56px;
}
.privacy-grid {
grid-template-columns: 1fr;
}
.privacy-hero,
.privacy-card,
.privacy-wide,
.privacy-final {
border-radius: 22px;
padding: 22px;
}
.privacy-hero-note {
align-items: flex-start;
text-align: right;
}
.privacy-card h2,
.privacy-wide h2,
.privacy-final h2 {
font-size: 20px;
}
}
/* ==================================================
Phase 25 - Result meters, focused CTAs, mobile start fix
================================================== */
.advisor-hero-actions:has(.primary-btn:only-child),
.advisor-hero-actions:has(.cta-email-btn:only-child) {
justify-content: center;
}
.advisor-hero-actions .primary-btn:only-child,
.advisor-hero-actions .cta-email-btn:only-child {
min-width: 230px;
}
.quiz-page .skill-meters-board {
width: 100%;
margin: 22px 0 0;
padding: 22px;
border-radius: 28px;
border: 1px solid rgba(0,255,195,0.16);
background: linear-gradient(145deg, rgba(15,22,35,0.78), rgba(7,13,21,0.88));
box-shadow: 0 18px 55px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
overflow: hidden;
}
.quiz-page .skill-meters-board-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.quiz-page .skill-meters-board-head span {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--text);
font-weight: 950;
font-size: clamp(1rem, 2vw, 1.2rem);
}
.quiz-page .skill-meters-board-head span i {
color: var(--accent);
}
.quiz-page .skill-meters-board-head small {
color: var(--muted);
font-weight: 800;
}
.quiz-page .skill-meters-board .skill-meters-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
margin: 0 !important;
}
.quiz-page .skill-meters-board .skill-meter,
.quiz-page .skill-meters-board .skill-meter.compact {
min-height: auto !important;
margin: 0 !important;
padding: 14px !important;
border-radius: 18px !important;
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: none !important;
}
.quiz-page .skill-meter-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 9px;
}
.quiz-page .skill-meters-board .skill-meter-title {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--text) !important;
font-weight: 950;
line-height: 1.5;
text-align: right !important;
}
.quiz-page .skill-meters-board .skill-meter-title i {
color: var(--accent);
margin-left: 0 !important;
}
.quiz-page .skill-meters-board .skill-meter-percent {
color: var(--accent) !important;
font-weight: 950;
white-space: nowrap;
margin: 0 !important;
}
.quiz-page .skill-meters-board .skill-meter-bar-bg {
height: 10px !important;
border-radius: 999px;
background: rgba(0,0,0,0.34) !important;
overflow: hidden;
}
.quiz-page .skill-meters-board .skill-meter-bar {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), var(--blue)) !important;
}
body.light.quiz-page .skill-meters-board {
background: rgba(255,255,255,0.88) !important;
border-color: rgba(2,105,211,0.14) !important;
box-shadow: 0 18px 46px rgba(0,0,0,0.08) !important;
}
body.light.quiz-page .skill-meters-board .skill-meter {
background: rgba(2,105,211,0.045) !important;
border-color: rgba(2,105,211,0.12) !important;
}
@media (max-width: 980px) {
.quiz-page .skill-meters-board .skill-meters-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 720px) {
.quiz-page .skill-meters-board {
padding: 16px;
border-radius: 22px;
}
.quiz-page .skill-meters-board-head {
align-items: flex-start;
flex-direction: column;
}
.quiz-page .skill-meters-board .skill-meters-grid {
grid-template-columns: 1fr !important;
}
.quiz-page .skill-meters-board .skill-meter,
.quiz-page .skill-meters-board .skill-meter.compact {
padding: 12px !important;
}
}
/* =========================================================
Phase 30 - Mobile Homepage Layout Polish
Scope: homepage mobile only
========================================================= */
.home-mobile-offers {
display: none;
}
@media (max-width: 760px) {
body.home-page .home-container {
padding-inline: 14px;
}
/* 1) Hero buttons side-by-side on mobile */
body.home-page .home-hero > .home-hero-content > .home-hero-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100%;
align-items: stretch;
}
body.home-page .home-hero > .home-hero-content > .home-hero-actions .home-primary-btn,
body.home-page .home-hero > .home-hero-content > .home-hero-actions .home-secondary-btn {
width: 100% !important;
min-width: 0 !important;
min-height: 52px;
padding: 12px 7px !important;
border-radius: 16px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
white-space: nowrap !important;
line-height: 1.1;
font-size: clamp(10.5px, 3.05vw, 12.5px) !important;
letter-spacing: -0.2px;
}
body.home-page .home-hero > .home-hero-content > .home-hero-actions i {
font-size: 11px !important;
flex: 0 0 auto;
}
/* 2) Mini report stats horizontal */
body.home-page .home-hero-stats {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.home-page .home-hero-stats > div {
min-width: 0;
padding: 10px 6px !important;
border-radius: 15px;
text-align: center;
}
body.home-page .home-hero-stats strong {
font-size: clamp(15px, 4.4vw, 19px) !important;
line-height: 1.1;
white-space: nowrap;
}
body.home-page .home-hero-stats span {
font-size: clamp(9px, 2.55vw, 10.5px) !important;
line-height: 1.25;
display: block;
}
/* 3) How it works: 2 cards per row */
body.home-page .home-flow-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.home-page .home-flow-step {
min-width: 0;
padding: 14px 10px !important;
border-radius: 18px;
}
body.home-page .home-flow-step span {
font-size: 13px !important;
margin-bottom: 8px !important;
}
body.home-page .home-flow-step h3 {
font-size: clamp(13px, 3.6vw, 15px) !important;
line-height: 1.35;
margin-bottom: 6px !important;
}
body.home-page .home-flow-step p {
font-size: clamp(10.5px, 3vw, 12px) !important;
line-height: 1.65;
}
/* 4) Tracks: 2 cards per row */
body.home-page .home-track-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.home-page .home-track-card {
min-width: 0;
padding: 14px 10px !important;
border-radius: 18px;
gap: 6px !important;
}
body.home-page .home-track-card i {
font-size: 20px !important;
margin-bottom: 4px !important;
}
body.home-page .home-track-card h3 {
font-size: clamp(12.5px, 3.45vw, 14px) !important;
line-height: 1.35;
margin: 0 0 4px !important;
}
body.home-page .home-track-card p {
font-size: clamp(10px, 2.8vw, 11.5px) !important;
line-height: 1.55;
margin: 0 !important;
}
/* 5) Certificate authorities: 3 per row */
body.home-page .home-cert-logos {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 9px !important;
width: 100%;
}
body.home-page .home-cert-logos span {
min-width: 0 !important;
width: 100%;
padding: 11px 5px !important;
border-radius: 14px;
text-align: center;
font-size: clamp(10.5px, 3vw, 12px) !important;
white-space: nowrap;
}
/* 6) Move "What we offer" above FAQ on mobile */
body.home-page .home-mobile-offers {
display: block;
margin-top: 32px;
padding: 20px 14px;
border-radius: 24px;
border: 1px solid rgba(0, 255, 195, 0.16);
background:
radial-gradient(circle at 85% 10%, rgba(0, 255, 195, 0.12), transparent 35%),
rgba(15, 22, 35, 0.58);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
text-align: center;
}
body.home-page .home-mobile-offers .home-kicker {
margin: 0 auto 14px;
}
body.home-page .home-mobile-offers-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
body.home-page .home-mobile-offers-grid > div {
min-height: 72px;
padding: 10px 6px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.045);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
}
body.home-page .home-mobile-offers-grid i {
color: var(--accent);
font-size: 15px;
}
body.home-page .home-mobile-offers-grid span {
font-size: clamp(9.5px, 2.65vw, 11px);
line-height: 1.35;
color: var(--text);
font-weight: 800;
}
body.home-page .maf-footer .footer-mini-stats {
display: none !important;
}
body.light.home-page .home-mobile-offers {
background:
radial-gradient(circle at 85% 10%, rgba(2, 105, 211, 0.10), transparent 35%),
rgba(255,255,255,0.82);
border-color: rgba(2,105,211,0.16);
}
body.light.home-page .home-mobile-offers-grid > div {
background: rgba(255,255,255,0.86);
border-color: rgba(17,24,39,0.08);
}
}
@media (max-width: 380px) {
body.home-page .home-hero > .home-hero-content > .home-hero-actions .home-primary-btn,
body.home-page .home-hero > .home-hero-content > .home-hero-actions .home-secondary-btn {
font-size: 10.5px !important;
padding-inline: 5px !important;
gap: 4px;
}
body.home-page .home-track-card p,
body.home-page .home-flow-step p {
font-size: 10px !important;
}
}