soroush.asadi
194 lines
9.7 KiB
Plaintext
194 lines
9.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="fa" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
@RenderSection("Head", required: false)
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" onload="this.rel='stylesheet'" />
|
|
<noscript><link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" rel="stylesheet" /></noscript>
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--gold: #B8955A;
|
|
--gold-light: #D4B483;
|
|
--gold-pale: #F5ECD8;
|
|
--bg: #FAFAF7;
|
|
--white: #FFFFFF;
|
|
--dark: #1E1E1E;
|
|
--mid: #5A5A5A;
|
|
--light: #9A9A9A;
|
|
--border: #E8E2D9;
|
|
--section-bg: #F7F4EF;
|
|
}
|
|
html { scroll-behavior: smooth; }
|
|
body { font-family: 'Vazirmatn', sans-serif; background: var(--bg); color: var(--dark); line-height: 1.8; direction: rtl; }
|
|
a { text-decoration: none; color: inherit; }
|
|
/* Navbar */
|
|
header {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
background: rgba(250,250,247,0.92); backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border); padding: 0 2rem;
|
|
height: 70px; display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.logo { font-size: 1rem; font-weight: 600; color: var(--gold); letter-spacing: 0.03em; text-decoration: none; }
|
|
nav { display: flex; gap: 2rem; list-style: none; }
|
|
nav a { text-decoration: none; color: var(--mid); font-size: 0.88rem; font-weight: 400; transition: color 0.25s; position: relative; }
|
|
nav a::after { content: ''; position: absolute; bottom: -3px; right: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.3s; }
|
|
nav a:hover { color: var(--gold); }
|
|
nav a:hover::after { width: 100%; }
|
|
.nav-cta { background: var(--gold); color: var(--white) !important; padding: 0.45rem 1.2rem; border-radius: 50px; font-size: 0.85rem !important; transition: background 0.25s, transform 0.2s !important; }
|
|
.nav-cta:hover { background: var(--gold-light) !important; transform: translateY(-1px); }
|
|
.nav-cta::after { display: none !important; }
|
|
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border-radius: 8px; transition: background 0.2s; }
|
|
.hamburger:hover { background: var(--gold-pale); }
|
|
.hamburger span { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
|
|
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
|
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
|
|
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
|
/* Mobile nav drawer */
|
|
.mobile-nav {
|
|
display: none; position: fixed; top: 70px; right: 0; left: 0; bottom: 0;
|
|
background: rgba(0,0,0,0); z-index: 98; transition: background 0.25s;
|
|
}
|
|
.mobile-nav.open { display: block; background: rgba(0,0,0,0.35); }
|
|
.mobile-nav-drawer {
|
|
position: absolute; top: 0; right: 0; left: 0;
|
|
background: var(--white); padding: 1.2rem 2rem 2rem;
|
|
border-bottom: 1px solid var(--border);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
|
display: flex; flex-direction: column; gap: 0;
|
|
transform: translateY(-8px); opacity: 0;
|
|
transition: transform 0.25s ease, opacity 0.25s ease;
|
|
}
|
|
.mobile-nav.open .mobile-nav-drawer { transform: translateY(0); opacity: 1; }
|
|
.mobile-nav-drawer a {
|
|
display: block; padding: 0.85rem 0; color: var(--dark); font-size: 0.95rem;
|
|
font-weight: 500; border-bottom: 1px solid var(--border); text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.mobile-nav-drawer a:last-child { border-bottom: none; padding-bottom: 0.5rem; }
|
|
.mobile-nav-drawer a:hover { color: var(--gold); }
|
|
.mobile-nav-drawer .nav-cta-m {
|
|
margin-top: 1rem; background: var(--gold); color: var(--white) !important;
|
|
text-align: center; padding: 0.75rem 1.5rem; border-radius: 50px;
|
|
font-weight: 600; border-bottom: none !important;
|
|
}
|
|
/* Footer */
|
|
footer { background: var(--dark); color: rgba(255,255,255,0.6); text-align: center; padding: 2.5rem 2rem; font-size: 0.85rem; }
|
|
footer a { color: var(--gold-light); text-decoration: none; }
|
|
/* Shared buttons */
|
|
.btn-primary {
|
|
background: var(--gold); color: var(--white); border: none; padding: 0.8rem 2rem;
|
|
border-radius: 50px; font-family: 'Vazirmatn', sans-serif; font-size: 0.95rem; font-weight: 500;
|
|
cursor: pointer; text-decoration: none; display: inline-block;
|
|
transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
|
|
box-shadow: 0 4px 18px rgba(184,149,90,0.25);
|
|
}
|
|
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(184,149,90,0.35); }
|
|
.btn-secondary {
|
|
background: transparent; color: var(--gold); border: 1.5px solid var(--gold);
|
|
padding: 0.78rem 1.8rem; border-radius: 50px; font-family: 'Vazirmatn', sans-serif;
|
|
font-size: 0.95rem; font-weight: 500; cursor: pointer; text-decoration: none;
|
|
display: inline-block; transition: all 0.25s;
|
|
}
|
|
.btn-secondary:hover { background: var(--gold); color: var(--white); transform: translateY(-2px); }
|
|
/* Shared */
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
|
|
section { padding: 6rem 0; }
|
|
.section-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.8rem; display: block; }
|
|
.section-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; color: var(--dark); margin-bottom: 1.2rem; line-height: 1.35; }
|
|
.section-desc { font-size: 1rem; color: var(--mid); max-width: 560px; line-height: 1.9; }
|
|
.divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-pale)); border-radius: 2px; margin: 1.2rem 0 2.5rem; }
|
|
/* Animations */
|
|
@@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
|
|
@@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
|
|
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
|
|
.fade-in.visible { opacity: 1; transform: translateY(0); }
|
|
/* Mobile nav */
|
|
@@media (max-width: 900px) {
|
|
nav { display: none; }
|
|
.hamburger { display: flex; }
|
|
}
|
|
/* Small screen tweaks */
|
|
@@media (max-width: 480px) {
|
|
header { padding: 0 1rem; }
|
|
.logo { font-size: 0.88rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<a class="logo" href="/">@(ViewData["SiteName"] ?? "دکتر سوسن آلطه")</a>
|
|
<nav>
|
|
<a href="/#about">درباره من</a>
|
|
<a href="/#services">خدمات</a>
|
|
<a href="/#gallery">گالری</a>
|
|
<a href="/blog">وبلاگ</a>
|
|
<a href="/#testimonials">نظرات</a>
|
|
<a href="/#contact" class="nav-cta">رزرو نوبت</a>
|
|
</nav>
|
|
<div class="hamburger" id="hamburger" onclick="toggleMenu()" aria-label="منو" aria-expanded="false">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Mobile nav drawer (separate from header so it can overlay body) -->
|
|
<div class="mobile-nav" id="mobileNav" onclick="closeMobileNavOnOverlay(event)">
|
|
<div class="mobile-nav-drawer">
|
|
<a href="/#about" onclick="closeMenu()">درباره من</a>
|
|
<a href="/#services" onclick="closeMenu()">خدمات</a>
|
|
<a href="/#gallery" onclick="closeMenu()">گالری</a>
|
|
<a href="/blog" onclick="closeMenu()">وبلاگ</a>
|
|
<a href="/#testimonials" onclick="closeMenu()">نظرات</a>
|
|
<a href="/#contact" onclick="closeMenu()" class="nav-cta-m">رزرو نوبت</a>
|
|
</div>
|
|
</div>
|
|
|
|
@RenderBody()
|
|
|
|
<footer>
|
|
<p>© @DateTime.Now.Year @(ViewData["SiteName"] ?? "دکتر سوسن آلطه") — تمامی حقوق محفوظ است.</p>
|
|
<p style="margin-top:0.5rem; font-size:0.78rem; opacity:0.5;">طراحی شده با ❤ برای سلامت و زیبایی شما</p>
|
|
</footer>
|
|
|
|
<script>
|
|
const _ham = document.getElementById('hamburger');
|
|
const _nav = document.getElementById('mobileNav');
|
|
|
|
function toggleMenu() {
|
|
const open = _nav.classList.toggle('open');
|
|
_ham.classList.toggle('open', open);
|
|
_ham.setAttribute('aria-expanded', String(open));
|
|
document.body.style.overflow = open ? 'hidden' : '';
|
|
}
|
|
function closeMenu() {
|
|
_nav.classList.remove('open');
|
|
_ham.classList.remove('open');
|
|
_ham.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
}
|
|
function closeMobileNavOnOverlay(e) {
|
|
// close only when clicking the dim overlay, not the drawer itself
|
|
if (e.target === _nav) closeMenu();
|
|
}
|
|
// close on Escape key
|
|
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeMenu(); });
|
|
// close when viewport widens past mobile breakpoint
|
|
window.addEventListener('resize', () => { if (window.innerWidth > 900) closeMenu(); });
|
|
|
|
// Scroll fade-in
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
|
|
}, { threshold: 0.1 });
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
|
});
|
|
</script>
|
|
@RenderSection("Scripts", required: false)
|
|
</body>
|
|
</html>
|