2026-05-31 00:42:08 +03:30
<!DOCTYPE html>
< html lang = "fa" dir = "rtl" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > دکتر سوسن آلطه | پزشک متخصص زیبایی پوست< / title >
< 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 >
< style >
/* ─── Reset & Base ─────────────────────────────────────────── */
* , * :: 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 ;
}
/* ─── Navbar ───────────────────────────────────────────────── */
header {
position : fixed ;
top : 0 ; left : 0 ; right : 0 ;
z-index : 100 ;
background : rgba ( 250 , 250 , 247 , 0.92 ) ;
backdrop-filter : blur ( 12 px ) ;
border-bottom : 1 px solid var ( - - border ) ;
padding : 0 2 rem ;
height : 70 px ;
display : flex ;
align-items : center ;
justify-content : space-between ;
}
. logo {
font-size : 1 rem ;
font-weight : 600 ;
color : var ( - - gold ) ;
letter-spacing : 0.03 em ;
text-decoration : none ;
}
nav {
display : flex ;
gap : 2 rem ;
list-style : none ;
}
nav a {
text-decoration : none ;
color : var ( - - mid ) ;
font-size : 0.88 rem ;
font-weight : 400 ;
transition : color 0.25 s ;
position : relative ;
}
nav a :: after {
content : '' ;
position : absolute ;
bottom : -3 px ;
right : 0 ;
width : 0 ;
height : 1 px ;
background : var ( - - gold ) ;
transition : width 0.3 s ;
}
nav a : hover { color : var ( - - gold ) ; }
nav a : hover :: after { width : 100 % ; }
. nav-cta {
background : var ( - - gold ) ;
color : var ( - - white ) !important ;
padding : 0.45 rem 1.2 rem ;
border-radius : 50 px ;
font-size : 0.85 rem !important ;
transition : background 0.25 s , transform 0.2 s !important ;
}
. nav-cta : hover {
background : var ( - - gold - light ) !important ;
transform : translateY ( -1 px ) ;
}
. nav-cta :: after { display : none !important ; }
/* hamburger */
. hamburger {
display : none ;
flex-direction : column ;
gap : 5 px ;
cursor : pointer ;
padding : 5 px ;
}
. hamburger span {
display : block ;
width : 24 px ;
height : 2 px ;
background : var ( - - dark ) ;
border-radius : 2 px ;
transition : 0.3 s ;
}
/* ─── Hero ─────────────────────────────────────────────────── */
# hero {
min-height : 100 vh ;
display : flex ;
align-items : center ;
padding : 80 px 0 0 ;
position : relative ;
overflow : hidden ;
}
# hero :: before {
content : '' ;
position : absolute ;
top : -120 px ; left : -120 px ;
width : 600 px ; height : 600 px ;
background : radial-gradient ( circle , rgba ( 184 , 149 , 90 , 0.10 ) 0 % , transparent 70 % ) ;
pointer-events : none ;
}
# hero :: after {
content : '' ;
position : absolute ;
bottom : -80 px ; right : -80 px ;
width : 500 px ; height : 500 px ;
background : radial-gradient ( circle , rgba ( 184 , 149 , 90 , 0.07 ) 0 % , transparent 70 % ) ;
pointer-events : none ;
}
. hero-inner {
max-width : 1200 px ;
margin : 0 auto ;
padding : 0 2 rem ;
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 4 rem ;
align-items : center ;
}
. hero-text { animation : fadeUp 0.9 s ease both ; }
. hero-tag {
display : inline-block ;
background : var ( - - gold - pale ) ;
color : var ( - - gold ) ;
font-size : 0.78 rem ;
font-weight : 500 ;
padding : 0.35 rem 1 rem ;
border-radius : 50 px ;
margin-bottom : 1.4 rem ;
letter-spacing : 0.05 em ;
}
. hero-name {
font-size : clamp ( 2.2 rem , 4 vw , 3.2 rem ) ;
font-weight : 700 ;
line-height : 1.3 ;
color : var ( - - dark ) ;
margin-bottom : 0.6 rem ;
}
. hero-name span { color : var ( - - gold ) ; }
. hero-subtitle {
font-size : 1.05 rem ;
color : var ( - - mid ) ;
font-weight : 400 ;
margin-bottom : 1.8 rem ;
line-height : 1.9 ;
}
. hero-stats {
display : flex ;
gap : 2.5 rem ;
margin-bottom : 2.5 rem ;
}
. stat-item { text-align : center ; }
. stat-number {
font-size : 2 rem ;
font-weight : 700 ;
color : var ( - - gold ) ;
display : block ;
line-height : 1 ;
}
. stat-label {
font-size : 0.78 rem ;
color : var ( - - light ) ;
margin-top : 0.3 rem ;
}
. hero-actions {
display : flex ;
gap : 1 rem ;
flex-wrap : wrap ;
}
. btn-primary {
background : var ( - - gold ) ;
color : var ( - - white ) ;
border : none ;
padding : 0.8 rem 2 rem ;
border-radius : 50 px ;
font-family : 'Vazirmatn' , sans-serif ;
font-size : 0.95 rem ;
font-weight : 500 ;
cursor : pointer ;
text-decoration : none ;
display : inline-block ;
transition : background 0.25 s , transform 0.2 s , box-shadow 0.25 s ;
box-shadow : 0 4 px 18 px rgba ( 184 , 149 , 90 , 0.25 ) ;
}
. btn-primary : hover {
background : var ( - - gold - light ) ;
transform : translateY ( -2 px ) ;
box-shadow : 0 8 px 24 px rgba ( 184 , 149 , 90 , 0.35 ) ;
}
. btn-secondary {
background : transparent ;
color : var ( - - gold ) ;
border : 1.5 px solid var ( - - gold ) ;
padding : 0.78 rem 1.8 rem ;
border-radius : 50 px ;
font-family : 'Vazirmatn' , sans-serif ;
font-size : 0.95 rem ;
font-weight : 500 ;
cursor : pointer ;
text-decoration : none ;
display : inline-block ;
transition : all 0.25 s ;
}
. btn-secondary : hover {
background : var ( - - gold ) ;
color : var ( - - white ) ;
transform : translateY ( -2 px ) ;
}
. hero-image {
position : relative ;
animation : fadeUp 0.9 s 0.2 s ease both ;
}
. hero-image-frame {
width : 100 % ;
aspect-ratio : 4 / 5 ;
border-radius : 30 % 70 % 70 % 30 % / 30 % 30 % 70 % 70 % ;
background : linear-gradient ( 145 deg , var ( - - gold - pale ) 0 % , #EFE3CC 100 % ) ;
position : relative ;
overflow : hidden ;
box-shadow : 0 30 px 80 px rgba ( 184 , 149 , 90 , 0.2 ) ;
}
. hero-image-frame img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
}
. hero-image-placeholder {
width : 100 % ;
height : 100 % ;
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
gap : 1 rem ;
color : var ( - - gold ) ;
}
. hero-image-placeholder svg {
width : 80 px ;
height : 80 px ;
opacity : 0.5 ;
}
. hero-image-placeholder p {
font-size : 0.85 rem ;
opacity : 0.6 ;
}
. hero-badge {
position : absolute ;
bottom : 2 rem ;
left : -2 rem ;
background : var ( - - white ) ;
border-radius : 16 px ;
padding : 1 rem 1.4 rem ;
box-shadow : 0 10 px 40 px rgba ( 0 , 0 , 0 , 0.1 ) ;
display : flex ;
align-items : center ;
gap : 0.8 rem ;
animation : float 3 s ease-in-out infinite ;
}
. badge-icon {
width : 42 px ; height : 42 px ;
background : var ( - - gold - pale ) ;
border-radius : 50 % ;
display : flex ;
align-items : center ;
justify-content : center ;
flex-shrink : 0 ;
}
. badge-icon svg { width : 20 px ; height : 20 px ; color : var ( - - gold ) ; }
. badge-text { font-size : 0.82 rem ; line-height : 1.4 ; }
. badge-text strong { color : var ( - - gold ) ; display : block ; font-size : 0.9 rem ; }
/* ─── Section base ─────────────────────────────────────────── */
section { padding : 6 rem 0 ; }
. container {
max-width : 1200 px ;
margin : 0 auto ;
padding : 0 2 rem ;
}
. section-label {
font-size : 0.78 rem ;
font-weight : 600 ;
letter-spacing : 0.1 em ;
color : var ( - - gold ) ;
text-transform : uppercase ;
margin-bottom : 0.8 rem ;
display : block ;
}
. section-title {
font-size : clamp ( 1.6 rem , 3 vw , 2.3 rem ) ;
font-weight : 700 ;
color : var ( - - dark ) ;
margin-bottom : 1.2 rem ;
line-height : 1.35 ;
}
. section-desc {
font-size : 1 rem ;
color : var ( - - mid ) ;
max-width : 560 px ;
line-height : 1.9 ;
}
. divider {
width : 60 px ;
height : 3 px ;
background : linear-gradient ( 90 deg , var ( - - gold ) , var ( - - gold - pale ) ) ;
border-radius : 2 px ;
margin : 1.2 rem 0 2.5 rem ;
}
/* ─── About ─────────────────────────────────────────────────── */
# about { background : var ( - - white ) ; }
. about-grid {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 5 rem ;
align-items : center ;
}
. about-image-wrap {
position : relative ;
}
. about-img-box {
width : 100 % ;
aspect-ratio : 3 / 4 ;
border-radius : 20 px ;
background : linear-gradient ( 160 deg , var ( - - gold - pale ) 0 % , #EDE0CA 100 % ) ;
overflow : hidden ;
position : relative ;
}
. about-img-box img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
}
. about-img-placeholder {
width : 100 % ;
height : 100 % ;
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
gap : 1 rem ;
color : var ( - - gold ) ;
opacity : 0.5 ;
}
. about-img-placeholder svg { width : 60 px ; height : 60 px ; }
. about-accent-box {
position : absolute ;
bottom : -2 rem ;
right : -2 rem ;
background : var ( - - gold ) ;
color : var ( - - white ) ;
border-radius : 16 px ;
padding : 1.5 rem 2 rem ;
text-align : center ;
}
. about-accent-box . big { font-size : 2.2 rem ; font-weight : 700 ; display : block ; }
. about-accent-box . small { font-size : 0.82 rem ; opacity : 0.85 ; }
. credential-list {
list-style : none ;
display : flex ;
flex-direction : column ;
gap : 1 rem ;
margin-top : 2 rem ;
}
. credential-list li {
display : flex ;
align-items : flex-start ;
gap : 0.85 rem ;
font-size : 0.95 rem ;
color : var ( - - mid ) ;
line-height : 1.6 ;
}
. cred-icon {
width : 28 px ; height : 28 px ;
border-radius : 50 % ;
background : var ( - - gold - pale ) ;
display : flex ;
align-items : center ;
justify-content : center ;
flex-shrink : 0 ;
margin-top : 0.1 rem ;
}
. cred-icon svg { width : 13 px ; height : 13 px ; color : var ( - - gold ) ; }
/* ─── Services ───────────────────────────────────────────────── */
# services { background : var ( - - section - bg ) ; }
. services-header {
text-align : center ;
margin-bottom : 3.5 rem ;
}
. services-header . divider { margin : 1.2 rem auto 0 ; }
. services-grid {
display : grid ;
grid-template-columns : repeat ( 3 , 1 fr ) ;
gap : 1.5 rem ;
}
. service-card {
background : var ( - - white ) ;
border-radius : 20 px ;
padding : 2 rem ;
border : 1 px solid var ( - - border ) ;
transition : transform 0.3 s , box-shadow 0.3 s , border-color 0.3 s ;
position : relative ;
overflow : hidden ;
}
. service-card :: before {
content : '' ;
position : absolute ;
top : 0 ; right : 0 ;
width : 80 px ; height : 80 px ;
background : radial-gradient ( circle at top right , rgba ( 184 , 149 , 90 , 0.08 ) , transparent 70 % ) ;
}
. service-card : hover {
transform : translateY ( -6 px ) ;
box-shadow : 0 20 px 50 px rgba ( 184 , 149 , 90 , 0.15 ) ;
border-color : var ( - - gold - pale ) ;
}
. service-icon {
width : 56 px ; height : 56 px ;
background : var ( - - gold - pale ) ;
border-radius : 16 px ;
display : flex ;
align-items : center ;
justify-content : center ;
margin-bottom : 1.3 rem ;
}
. service-icon svg { width : 26 px ; height : 26 px ; color : var ( - - gold ) ; }
. service-title {
font-size : 1.05 rem ;
font-weight : 600 ;
color : var ( - - dark ) ;
margin-bottom : 0.6 rem ;
}
. service-desc {
font-size : 0.88 rem ;
color : var ( - - mid ) ;
line-height : 1.8 ;
}
/* ─── Gallery ─────────────────────────────────────────────────── */
# gallery { background : var ( - - white ) ; }
. gallery-header { margin-bottom : 3 rem ; }
. gallery-tabs {
display : flex ;
gap : 0.6 rem ;
margin-bottom : 2.5 rem ;
flex-wrap : wrap ;
}
. tab-btn {
background : transparent ;
border : 1.5 px solid var ( - - border ) ;
color : var ( - - mid ) ;
padding : 0.45 rem 1.2 rem ;
border-radius : 50 px ;
font-family : 'Vazirmatn' , sans-serif ;
font-size : 0.85 rem ;
cursor : pointer ;
transition : all 0.25 s ;
}
. tab-btn . active , . tab-btn : hover {
background : var ( - - gold ) ;
border-color : var ( - - gold ) ;
color : var ( - - white ) ;
}
. gallery-grid {
display : grid ;
grid-template-columns : repeat ( 3 , 1 fr ) ;
gap : 1.2 rem ;
}
. gallery-item {
border-radius : 16 px ;
overflow : hidden ;
aspect-ratio : 4 / 3 ;
background : linear-gradient ( 135 deg , var ( - - gold - pale ) , #EDE0CA ) ;
position : relative ;
cursor : pointer ;
}
. gallery-item img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
transition : transform 0.4 s ;
}
. gallery-item : hover img { transform : scale ( 1.05 ) ; }
. gallery-placeholder {
width : 100 % ;
height : 100 % ;
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
gap : 0.6 rem ;
color : var ( - - gold ) ;
opacity : 0.45 ;
}
. gallery-placeholder svg { width : 36 px ; height : 36 px ; }
. gallery-placeholder p { font-size : 0.75 rem ; }
. gallery-item-overlay {
position : absolute ;
inset : 0 ;
background : rgba ( 184 , 149 , 90 , 0 ) ;
display : flex ;
align-items : center ;
justify-content : center ;
transition : background 0.3 s ;
}
. gallery-item : hover . gallery-item-overlay { background : rgba ( 184 , 149 , 90 , 0.15 ) ; }
2026-06-01 23:59:57 +03:30
/* Before/After split layout */
. gallery-item . before-after {
display : flex ;
flex-direction : row ;
}
. gallery-item . before-after . ba-half {
flex : 1 ;
position : relative ;
overflow : hidden ;
}
. gallery-item . before-after . ba-half img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
display : block ;
transition : transform 0.4 s ;
}
. gallery-item . before-after : hover . ba-half img { transform : scale ( 1.05 ) ; }
. gallery-item . before-after . ba-label {
position : absolute ;
bottom : 6 px ;
left : 50 % ;
transform : translateX ( -50 % ) ;
background : rgba ( 0 , 0 , 0 , 0.55 ) ;
color : #fff ;
font-size : 0.65 rem ;
padding : 2 px 8 px ;
border-radius : 20 px ;
white-space : nowrap ;
pointer-events : none ;
}
. gallery-item . before-after . ba-divider {
width : 2 px ;
background : rgba ( 255 , 255 , 255 , 0.7 ) ;
position : relative ;
z-index : 2 ;
flex-shrink : 0 ;
}
. gallery-caption {
position : absolute ;
bottom : 0 ;
left : 0 ;
right : 0 ;
background : linear-gradient ( transparent , rgba ( 0 , 0 , 0 , 0.5 ) ) ;
color : #fff ;
font-size : 0.75 rem ;
padding : 1.2 rem 0.8 rem 0.5 rem ;
text-align : center ;
}
2026-05-31 00:42:08 +03:30
/* ─── Testimonials ──────────────────────────────────────────── */
# testimonials { background : var ( - - section - bg ) ; }
. testimonials-header { text-align : center ; margin-bottom : 3 rem ; }
. testimonials-header . divider { margin : 1 rem auto 0 ; }
. testimonials-grid {
display : grid ;
grid-template-columns : repeat ( 3 , 1 fr ) ;
gap : 1.5 rem ;
}
. testimonial-card {
background : var ( - - white ) ;
border-radius : 20 px ;
padding : 2 rem ;
border : 1 px solid var ( - - border ) ;
position : relative ;
}
. testimonial-card :: before {
content : '"' ;
position : absolute ;
top : 1 rem ;
left : 1.5 rem ;
font-size : 4 rem ;
color : var ( - - gold - pale ) ;
line-height : 1 ;
font-family : Georgia , serif ;
}
. testimonial-stars {
display : flex ;
gap : 3 px ;
margin-bottom : 1 rem ;
}
. star { color : var ( - - gold ) ; font-size : 1 rem ; }
. testimonial-text {
font-size : 0.9 rem ;
color : var ( - - mid ) ;
line-height : 1.9 ;
margin-bottom : 1.5 rem ;
}
. testimonial-author {
display : flex ;
align-items : center ;
gap : 0.8 rem ;
}
. author-avatar {
width : 42 px ; height : 42 px ;
border-radius : 50 % ;
background : var ( - - gold - pale ) ;
display : flex ;
align-items : center ;
justify-content : center ;
font-size : 1.1 rem ;
flex-shrink : 0 ;
}
. author-name {
font-size : 0.88 rem ;
font-weight : 600 ;
color : var ( - - dark ) ;
}
. author-date { font-size : 0.78 rem ; color : var ( - - light ) ; }
/* ─── Contact ─────────────────────────────────────────────────── */
# contact { background : var ( - - white ) ; }
. contact-grid {
display : grid ;
grid-template-columns : 1 fr 1.4 fr ;
gap : 4 rem ;
align-items : start ;
}
. contact-info-list {
display : flex ;
flex-direction : column ;
gap : 1.5 rem ;
margin-top : 2 rem ;
}
. contact-info-item {
display : flex ;
align-items : flex-start ;
gap : 1 rem ;
}
. info-icon {
width : 48 px ; height : 48 px ;
background : var ( - - gold - pale ) ;
border-radius : 14 px ;
display : flex ;
align-items : center ;
justify-content : center ;
flex-shrink : 0 ;
}
. info-icon svg { width : 22 px ; height : 22 px ; color : var ( - - gold ) ; }
. info-text strong {
display : block ;
font-size : 0.9 rem ;
color : var ( - - dark ) ;
margin-bottom : 0.2 rem ;
}
. info-text p {
font-size : 0.88 rem ;
color : var ( - - mid ) ;
line-height : 1.6 ;
}
. social-links {
display : flex ;
gap : 0.8 rem ;
margin-top : 2.5 rem ;
}
. social-link {
width : 44 px ; height : 44 px ;
border-radius : 12 px ;
background : var ( - - gold - pale ) ;
display : flex ;
align-items : center ;
justify-content : center ;
color : var ( - - gold ) ;
text-decoration : none ;
transition : background 0.25 s , transform 0.2 s ;
}
. social-link : hover {
background : var ( - - gold ) ;
color : var ( - - white ) ;
transform : translateY ( -3 px ) ;
}
. social-link svg { width : 20 px ; height : 20 px ; }
/* Form */
. contact-form {
background : var ( - - section - bg ) ;
border-radius : 24 px ;
padding : 2.5 rem ;
border : 1 px solid var ( - - border ) ;
}
. form-title {
font-size : 1.2 rem ;
font-weight : 600 ;
color : var ( - - dark ) ;
margin-bottom : 0.5 rem ;
}
. form-sub {
font-size : 0.88 rem ;
color : var ( - - mid ) ;
margin-bottom : 2 rem ;
}
. form-row {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 1 rem ;
}
. form-group {
display : flex ;
flex-direction : column ;
gap : 0.4 rem ;
margin-bottom : 1.2 rem ;
}
. form-group label {
font-size : 0.85 rem ;
font-weight : 500 ;
color : var ( - - dark ) ;
}
. form-group input ,
. form-group select ,
. form-group textarea {
background : var ( - - white ) ;
border : 1.5 px solid var ( - - border ) ;
border-radius : 12 px ;
padding : 0.75 rem 1 rem ;
font-family : 'Vazirmatn' , sans-serif ;
font-size : 0.9 rem ;
color : var ( - - dark ) ;
direction : rtl ;
transition : border-color 0.25 s , box-shadow 0.25 s ;
outline : none ;
}
. form-group input : focus ,
. form-group select : focus ,
. form-group textarea : focus {
border-color : var ( - - gold ) ;
box-shadow : 0 0 0 3 px rgba ( 184 , 149 , 90 , 0.12 ) ;
}
. form-group textarea { resize : vertical ; min-height : 110 px ; }
. form-submit {
width : 100 % ;
background : var ( - - gold ) ;
color : var ( - - white ) ;
border : none ;
padding : 0.9 rem ;
border-radius : 12 px ;
font-family : 'Vazirmatn' , sans-serif ;
font-size : 0.95 rem ;
font-weight : 600 ;
cursor : pointer ;
transition : background 0.25 s , transform 0.2 s ;
}
. form-submit : hover {
background : var ( - - gold - light ) ;
transform : translateY ( -2 px ) ;
}
/* ─── Footer ─────────────────────────────────────────────────── */
footer {
background : var ( - - dark ) ;
color : rgba ( 255 , 255 , 255 , 0.6 ) ;
text-align : center ;
padding : 2.5 rem 2 rem ;
font-size : 0.85 rem ;
}
footer a { color : var ( - - gold - light ) ; text-decoration : none ; }
/* ─── Animations ─────────────────────────────────────────────── */
@ keyframes fadeUp {
from { opacity : 0 ; transform : translateY ( 28 px ) ; }
to { opacity : 1 ; transform : translateY ( 0 ) ; }
}
@ keyframes float {
0 % , 100 % { transform : translateY ( 0 ) ; }
50 % { transform : translateY ( -8 px ) ; }
}
. fade-in {
opacity : 0 ;
transform : translateY ( 24 px ) ;
transition : opacity 0.7 s ease , transform 0.7 s ease ;
}
. fade-in . visible {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
/* ─── Responsive ─────────────────────────────────────────────── */
@ media ( max-width : 900px ) {
nav { display : none ; }
. hamburger { display : flex ; }
. hero-inner { grid-template-columns : 1 fr ; text-align : center ; gap : 3 rem ; }
. hero-text { order : 1 ; }
. hero-image { order : 2 ; max-width : 340 px ; margin : 0 auto ; }
. hero-stats { justify-content : center ; }
. hero-actions { justify-content : center ; }
. hero-badge { left : 0 ; }
. about-grid { grid-template-columns : 1 fr ; gap : 3 rem ; }
. about-accent-box { right : 0 ; bottom : -1 rem ; }
. services-grid { grid-template-columns : repeat ( 2 , 1 fr ) ; }
. gallery-grid { grid-template-columns : repeat ( 2 , 1 fr ) ; }
. testimonials-grid { grid-template-columns : 1 fr ; }
. contact-grid { grid-template-columns : 1 fr ; gap : 2.5 rem ; }
}
@ media ( max-width : 600px ) {
section { padding : 4 rem 0 ; }
. services-grid { grid-template-columns : 1 fr ; }
. gallery-grid { grid-template-columns : repeat ( 2 , 1 fr ) ; }
. form-row { grid-template-columns : 1 fr ; }
}
< / style >
< / head >
< body >
<!-- ══════ HEADER ══════ -->
< header >
< a class = "logo" href = "#hero" > دکتر سوسن آلطه< / a >
< nav >
< a href = "#about" > درباره من< / a >
< a href = "#services" > خدمات< / a >
< a href = "#gallery" > گالری< / a >
< a href = "#testimonials" > نظرات< / a >
< a href = "#contact" class = "nav-cta" > رزرو نوبت< / a >
< / nav >
< div class = "hamburger" onclick = "toggleMenu()" >
< span > < / span > < span > < / span > < span > < / span >
< / div >
< / header >
<!-- ══════ HERO ══════ -->
< section id = "hero" >
< div class = "hero-inner" >
< div class = "hero-text" >
< span class = "hero-tag" > پزشک عمومی و متخصص زیبایی پوست< / span >
2026-05-31 11:01:36 +03:30
< h1 class = "hero-name" > دکتر < span > سوسن< / span > آلطه< / h1 >
2026-05-31 00:42:08 +03:30
< p class = "hero-subtitle" >
با بیش از یک دهه تجربه در حوزهی زیبایی و مراقبت از پوست،< br >
زیبایی واقعی شما را با علم و هنر همراه میکنیم.
< / p >
< div class = "hero-stats" >
< div class = "stat-item" >
< span class = "stat-number" > +۱۰< / span >
< span class = "stat-label" > سال تجربه< / span >
< / div >
< div class = "stat-item" >
< span class = "stat-number" > +۵۰۰< / span >
< span class = "stat-label" > بیمار راضی< / span >
< / div >
< div class = "stat-item" >
< span class = "stat-number" > +۱۵< / span >
< span class = "stat-label" > خدمات تخصصی< / span >
< / div >
< / div >
< div class = "hero-actions" >
< a href = "#contact" class = "btn-primary" > رزرو نوبت< / a >
< a href = "#about" class = "btn-secondary" > بیشتر بدانید< / a >
< / div >
< / div >
< div class = "hero-image" >
< div class = "hero-image-frame" >
<!-- Replace src with doctor's actual photo -->
< div class = "hero-image-placeholder" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "1.5" >
< path d = "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" / >
< circle cx = "12" cy = "7" r = "4" / >
< / svg >
< p > تصویر دکتر< / p >
< / div >
< / div >
< div class = "hero-badge" >
< div class = "badge-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M22 12h-4l-3 9L9 3l-3 9H2" / >
< / svg >
< / div >
< div class = "badge-text" >
< strong > متخصص پوست و زیبایی< / strong >
فارغالتحصیل دانشگاه ایران
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- ══════ ABOUT ══════ -->
< section id = "about" >
< div class = "container" >
< div class = "about-grid" >
< div class = "about-image-wrap fade-in" >
< div class = "about-img-box" >
<!-- Replace with doctor's photo -->
< div class = "about-img-placeholder" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "1.5" >
< path d = "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" / >
< circle cx = "12" cy = "7" r = "4" / >
< / svg >
< / div >
< / div >
< div class = "about-accent-box" >
< span class = "big" > ۱۰+< / span >
< span class = "small" > سال تجربه< / span >
< / div >
< / div >
< div class = "fade-in" >
< span class = "section-label" > درباره من< / span >
< h2 class = "section-title" > سلامت و زیبایی پوست< br > هدف اصلی من است< / h2 >
< div class = "divider" > < / div >
< p class = "section-desc" >
دکتر سوسن آلطه، پزشک عمومی و متخصص زیبایی پوست با سالها تجربه در ارائه خدمات پیشرفته پوست و زیبایی. ایشان با ترکیب دانش پزشکی و هنر زیبایی، بهترین نتایج را برای بیماران خود رقم میزنند.
< / p >
< ul class = "credential-list" >
< li >
< div class = "cred-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2.5" >
< polyline points = "20 6 9 17 4 12" / >
< / svg >
< / div >
< span > دکترای پزشکی عمومی از دانشگاه ایران< / span >
< / li >
< li >
< div class = "cred-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2.5" >
< polyline points = "20 6 9 17 4 12" / >
< / svg >
< / div >
< span > تخصص در حوزه زیبایی و مراقبت از پوست< / span >
< / li >
< li >
< div class = "cred-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2.5" >
< polyline points = "20 6 9 17 4 12" / >
< / svg >
< / div >
< span > آشنا با جدیدترین روشهای زیبایی روز دنیا< / span >
< / li >
< li >
< div class = "cred-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2.5" >
< polyline points = "20 6 9 17 4 12" / >
< / svg >
< / div >
< span > عضو انجمنهای تخصصی پزشکی ایران< / span >
< / li >
< li >
< div class = "cred-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2.5" >
< polyline points = "20 6 9 17 4 12" / >
< / svg >
< / div >
< span > مشاوره و درمان شخصیسازیشده برای هر بیمار< / span >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / section >
<!-- ══════ SERVICES ══════ -->
< section id = "services" >
< div class = "container" >
< div class = "services-header fade-in" >
< span class = "section-label" > خدمات ما< / span >
< h2 class = "section-title" > طیف گستردهای از خدمات< br > زیبایی و مراقبت از پوست< / h2 >
< div class = "divider" > < / div >
< / div >
< div class = "services-grid" >
< div class = "service-card fade-in" >
< div class = "service-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" / >
< / svg >
< / div >
< div class = "service-title" > مراقبت و درمان پوست< / div >
< p class = "service-desc" > ارزیابی کامل پوست و تجویز برنامه درمانی مناسب برای انواع مشکلات پوستی شامل آکنه، لک و چین و چروک.< / p >
< / div >
< div class = "service-card fade-in" >
< div class = "service-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< circle cx = "12" cy = "12" r = "10" / >
< path d = "M8 12s1.5 2 4 2 4-2 4-2" / >
< line x1 = "9" y1 = "9" x2 = "9.01" y2 = "9" / >
< line x1 = "15" y1 = "9" x2 = "15.01" y2 = "9" / >
< / svg >
< / div >
< div class = "service-title" > بوتاکس و فیلر< / div >
< p class = "service-desc" > تزریق بوتاکس و فیلر با بالاترین کیفیت برای جوانسازی چهره و رفع چین و چروکهای عمیق.< / p >
< / div >
< div class = "service-card fade-in" >
< div class = "service-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M12 2L2 7l10 5 10-5-10-5z" / >
< path d = "M2 17l10 5 10-5" / >
< path d = "M2 12l10 5 10-5" / >
< / svg >
< / div >
< div class = "service-title" > لیزر درمانی< / div >
< p class = "service-desc" > درمان با پیشرفتهترین دستگاههای لیزر برای رفع موهای زائد، لک و ضایعات پوستی.< / p >
< / div >
< div class = "service-card fade-in" >
< div class = "service-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" / >
< / svg >
< / div >
< div class = "service-title" > مزوتراپی< / div >
< p class = "service-desc" > تزریق ویتامینها و مواد مغذی مستقیم به پوست برای درمان ریزش مو و جوانسازی پوست.< / p >
< / div >
< div class = "service-card fade-in" >
< div class = "service-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< circle cx = "12" cy = "12" r = "10" / >
< line x1 = "12" y1 = "8" x2 = "12" y2 = "16" / >
< line x1 = "8" y1 = "12" x2 = "16" y2 = "12" / >
< / svg >
< / div >
< div class = "service-title" > پاکسازی عمیق پوست< / div >
< p class = "service-desc" > پاکسازی حرفهای پوست با روشهای تخصصی برای رفع جوشهای سرسیاه و سرسفید.< / p >
< / div >
< div class = "service-card fade-in" >
< div class = "service-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" / >
< / svg >
< / div >
< div class = "service-title" > مشاوره زیبایی< / div >
< p class = "service-desc" > مشاوره تخصصی و برنامهریزی شخصیسازیشده برای مراقبت از پوست و رسیدن به اهداف زیبایی شما.< / p >
< / div >
< / div >
< / div >
< / section >
<!-- ══════ GALLERY ══════ -->
< section id = "gallery" >
< div class = "container" >
< div class = "gallery-header fade-in" >
< span class = "section-label" > گالری< / span >
< h2 class = "section-title" > نتایج قبل و بعد< / h2 >
< div class = "divider" > < / div >
< p class = "section-desc" > نمونهای از نتایج فوقالعاده درمانهای انجامشده توسط دکتر آلطه.< / p >
< / div >
< div class = "gallery-tabs fade-in" >
< button class = "tab-btn active" > همه< / button >
< button class = "tab-btn" > بوتاکس< / button >
< button class = "tab-btn" > لیزر< / button >
< button class = "tab-btn" > مزوتراپی< / button >
< button class = "tab-btn" > پاکسازی< / button >
< / div >
2026-06-01 23:59:57 +03:30
< div class = "gallery-grid" id = "galleryGrid" >
<!-- Loaded dynamically from API -->
2026-05-31 00:42:08 +03:30
< / div >
< / div >
< / section >
<!-- ══════ TESTIMONIALS ══════ -->
< section id = "testimonials" >
< div class = "container" >
< div class = "testimonials-header fade-in" >
< span class = "section-label" > نظرات بیماران< / span >
< h2 class = "section-title" > بیماران ما چه میگویند< / h2 >
< div class = "divider" > < / div >
< / div >
< div class = "testimonials-grid" >
< div class = "testimonial-card fade-in" >
< div class = "testimonial-stars" >
< span class = "star" > ★< / span > < span class = "star" > ★< / span >
< span class = "star" > ★< / span > < span class = "star" > ★< / span > < span class = "star" > ★< / span >
< / div >
< p class = "testimonial-text" >
دکتر آلطه با صبر و دقت زیاد مشکل پوستی من را بررسی کردند و درمان دقیقی تجویز کردند. نتیجه فوقالعاده بود. ممنونم دکتر.
< / p >
< div class = "testimonial-author" >
< div class = "author-avatar" > 👩< / div >
< div >
< div class = "author-name" > سارا محمدی< / div >
< div class = "author-date" > اردیبهشت ۱۴۰۳< / div >
< / div >
< / div >
< / div >
< div class = "testimonial-card fade-in" >
< div class = "testimonial-stars" >
< span class = "star" > ★< / span > < span class = "star" > ★< / span >
< span class = "star" > ★< / span > < span class = "star" > ★< / span > < span class = "star" > ★< / span >
< / div >
< p class = "testimonial-text" >
بعد از تزریق بوتاکس توسط دکتر آلطه، نتیجهای طبیعی و زیبا داشتم که همه اطرافیانم تعریف کردند. حتما توصیه میکنم.
< / p >
< div class = "testimonial-author" >
< div class = "author-avatar" > 👩🦱< / div >
< div >
< div class = "author-name" > مریم حسینی< / div >
< div class = "author-date" > فروردین ۱۴۰۳< / div >
< / div >
< / div >
< / div >
< div class = "testimonial-card fade-in" >
< div class = "testimonial-stars" >
< span class = "star" > ★< / span > < span class = "star" > ★< / span >
< span class = "star" > ★< / span > < span class = "star" > ★< / span > < span class = "star" > ★< / span >
< / div >
< p class = "testimonial-text" >
دکتر خیلی حرفهای و دلسوز هستند. بعد از چند جلسه لیزر، پوستم کاملا صاف شد. از اعتماد و تخصصشان ممنونم.
< / p >
< div class = "testimonial-author" >
< div class = "author-avatar" > 👩🦳< / div >
< div >
< div class = "author-name" > نیلوفر رضایی< / div >
< div class = "author-date" > اسفند ۱۴۰۲< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- ══════ CONTACT ══════ -->
< section id = "contact" >
< div class = "container" >
< div class = "contact-grid" >
< div class = "fade-in" >
< span class = "section-label" > تماس با ما< / span >
< h2 class = "section-title" > رزرو نوبت< br > و مشاوره< / h2 >
< div class = "divider" > < / div >
< p class = "section-desc" > برای رزرو نوبت یا دریافت مشاوره رایگان با ما در تماس باشید.< / p >
< div class = "contact-info-list" >
< div class = "contact-info-item" >
< div class = "info-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.6a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 3h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 10.6a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" / >
< / svg >
< / div >
< div class = "info-text" >
< strong > تلفن تماس< / strong >
< p > ۰۲۱-XXXX-XXXX< / p >
< / div >
< / div >
< div class = "contact-info-item" >
< div class = "info-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" / >
< polyline points = "22,6 12,13 2,6" / >
< / svg >
< / div >
< div class = "info-text" >
< strong > ایمیل< / strong >
< p > dr.sousan@example.com< / p >
< / div >
< / div >
< div class = "contact-info-item" >
< div class = "info-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" / >
< circle cx = "12" cy = "10" r = "3" / >
< / svg >
< / div >
< div class = "info-text" >
< strong > آدرس مطب< / strong >
< p > تهران، خیابان ولیعصر، ساختمان پزشکی< / p >
< / div >
< / div >
< div class = "contact-info-item" >
< div class = "info-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< circle cx = "12" cy = "12" r = "10" / >
< polyline points = "12 6 12 12 16 14" / >
< / svg >
< / div >
< div class = "info-text" >
< strong > ساعات کاری< / strong >
< p > شنبه تا چهارشنبه: ۹ تا ۱۸< br > پنجشنبه: ۹ تا ۱۴< / p >
< / div >
< / div >
< / div >
< div class = "social-links" >
< a href = "#" class = "social-link" title = "اینستاگرام" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< rect x = "2" y = "2" width = "20" height = "20" rx = "5" ry = "5" / >
< path d = "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" / >
< line x1 = "17.5" y1 = "6.5" x2 = "17.51" y2 = "6.5" / >
< / svg >
< / a >
< a href = "#" class = "social-link" title = "واتساپ" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" / >
< / svg >
< / a >
< a href = "#" class = "social-link" title = "تلگرام" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< line x1 = "22" y1 = "2" x2 = "11" y2 = "13" / >
< polygon points = "22 2 15 22 11 13 2 9 22 2" / >
< / svg >
< / a >
< / div >
< / div >
< div class = "contact-form fade-in" >
< div class = "form-title" > رزرو نوبت آنلاین< / div >
< p class = "form-sub" > فرم زیر را پر کنید، در اسرع وقت با شما تماس میگیریم.< / p >
< form onsubmit = "handleSubmit(event)" >
< div class = "form-row" >
< div class = "form-group" >
< label > نام< / label >
< input type = "text" placeholder = "نام شما" required / >
< / div >
< div class = "form-group" >
< label > نام خانوادگی< / label >
< input type = "text" placeholder = "نام خانوادگی" required / >
< / div >
< / div >
< div class = "form-group" >
< label > شماره موبایل< / label >
< input type = "tel" placeholder = "09XX-XXX-XXXX" required / >
< / div >
< div class = "form-group" >
< label > نوع خدمت مورد نظر< / label >
< select >
< option value = "" disabled selected > انتخاب خدمت< / option >
< option > مراقبت و درمان پوست< / option >
< option > بوتاکس و فیلر< / option >
< option > لیزر درمانی< / option >
< option > مزوتراپی< / option >
< option > پاکسازی عمیق پوست< / option >
< option > مشاوره زیبایی< / option >
< option > سایر< / option >
< / select >
< / div >
< div class = "form-group" >
< label > توضیحات (اختیاری)< / label >
< textarea placeholder = "مشکل پوستی یا سوالات خود را اینجا بنویسید..." > < / textarea >
< / div >
< button type = "submit" class = "form-submit" > ارسال و رزرو نوبت< / button >
< / form >
< / div >
< / div >
< / div >
< / section >
<!-- ══════ FOOTER ══════ -->
< footer >
< p > © ۱۴۰۳ دکتر سوسن آلطه — تمامی حقوق محفوظ است.< / p >
< p style = "margin-top:0.5rem; font-size:0.78rem; opacity:0.5;" > طراحی شده با ❤ برای سلامت و زیبایی شما< / p >
< / footer >
<!-- ══════ SCRIPTS ══════ -->
< script >
// Scroll animations
const observer = new IntersectionObserver ( ( entries ) => {
entries . forEach ( entry => {
if ( entry . isIntersecting ) {
entry . target . classList . add ( 'visible' ) ;
}
} ) ;
} , { threshold : 0.1 } ) ;
document . querySelectorAll ( '.fade-in' ) . forEach ( el => observer . observe ( el ) ) ;
2026-06-01 23:59:57 +03:30
// Gallery — load from API
let allGalleryItems = [ ] ;
function renderGallery ( items ) {
const grid = document . getElementById ( 'galleryGrid' ) ;
if ( ! items . length ) {
grid . innerHTML = '<p style="color:var(--mid);text-align:center;grid-column:1/-1;padding:2rem">تصویری یافت نشد.</p>' ;
return ;
}
grid . innerHTML = items . map ( g => {
const hasBoth = g . beforeImageUrl && g . afterImageUrl ;
const hasImg = g . imageUrl ;
if ( hasBoth ) {
return ` <div class="gallery-item before-after fade-in" data-cat=" ${ g . category || '' } ">
<div class="ba-half">
<img src=" ${ g . beforeImageUrl } " alt="قبل" loading="lazy"/>
<span class="ba-label">قبل</span>
</div>
<div class="ba-divider"></div>
<div class="ba-half">
<img src=" ${ g . afterImageUrl } " alt="بعد" loading="lazy"/>
<span class="ba-label">بعد</span>
</div>
${ g . caption ? ` <div class="gallery-caption"> ${ g . caption } </div> ` : '' }
<div class="gallery-item-overlay"></div>
</div> ` ;
}
if ( hasImg ) {
return ` <div class="gallery-item fade-in" data-cat=" ${ g . category || '' } ">
<img src=" ${ g . imageUrl } " alt=" ${ g . caption || 'گالری' } " loading="lazy"/>
${ g . caption ? ` <div class="gallery-caption"> ${ g . caption } </div> ` : '' }
<div class="gallery-item-overlay"></div>
</div> ` ;
}
return '' ;
} ) . join ( '' ) ;
grid . querySelectorAll ( '.fade-in' ) . forEach ( el => observer . observe ( el ) ) ;
}
async function loadGallery ( category ) {
try {
const url = category && category !== 'همه' ? ` /api/gallery?category= ${ encodeURIComponent ( category ) } ` : '/api/gallery' ;
const res = await fetch ( url ) ;
if ( ! res . ok ) return ;
const data = await res . json ( ) ;
allGalleryItems = data ;
renderGallery ( data ) ;
} catch ( e ) { /* silent — placeholders stay hidden */ }
}
loadGallery ( ) ;
2026-05-31 00:42:08 +03:30
// Tab buttons
document . querySelectorAll ( '.tab-btn' ) . forEach ( btn => {
btn . addEventListener ( 'click' , ( ) => {
document . querySelectorAll ( '.tab-btn' ) . forEach ( b => b . classList . remove ( 'active' ) ) ;
btn . classList . add ( 'active' ) ;
2026-06-01 23:59:57 +03:30
loadGallery ( btn . textContent . trim ( ) ) ;
2026-05-31 00:42:08 +03:30
} ) ;
} ) ;
// Mobile menu
function toggleMenu ( ) {
const nav = document . querySelector ( 'nav' ) ;
nav . style . display = nav . style . display === 'flex' ? 'none' : 'flex' ;
nav . style . flexDirection = 'column' ;
nav . style . position = 'absolute' ;
nav . style . top = '70px' ;
nav . style . right = '0' ;
nav . style . left = '0' ;
nav . style . background = '#FAFAF7' ;
nav . style . padding = '1rem 2rem 2rem' ;
nav . style . borderBottom = '1px solid #E8E2D9' ;
nav . style . gap = '1rem' ;
}
// Form submission
function handleSubmit ( e ) {
e . preventDefault ( ) ;
const btn = e . target . querySelector ( '.form-submit' ) ;
btn . textContent = '✓ درخواست شما ثبت شد' ;
btn . style . background = '#2D7A4F' ;
setTimeout ( ( ) => {
btn . textContent = 'ارسال و رزرو نوبت' ;
btn . style . background = '' ;
e . target . reset ( ) ;
} , 3000 ) ;
}
// Active nav link on scroll
const sections = document . querySelectorAll ( 'section[id]' ) ;
window . addEventListener ( 'scroll' , ( ) => {
const scrollY = window . scrollY ;
sections . forEach ( section => {
const sectionTop = section . offsetTop - 100 ;
const sectionH = section . offsetHeight ;
const id = section . getAttribute ( 'id' ) ;
const link = document . querySelector ( ` nav a[href="# ${ id } "] ` ) ;
if ( link && scrollY > sectionTop && scrollY <= sectionTop + sectionH ) {
document . querySelectorAll ( 'nav a' ) . forEach ( a => a . style . color = '' ) ;
link . style . color = '#B8955A' ;
}
} ) ;
} ) ;
< / script >
< / body >
< / html >
