|
|
| خط ۱: |
خط ۱: |
| <html> | | <html> |
|
| |
| <div class="positive-donation-page"> | | <div class="positive-donation-page"> |
|
| |
|
| <style> | | <style> |
| | .positive-donation-page { |
| | --purple: #583174; |
| | --purple-dark: #3f2058; |
| | --purple-light: #eee3f5; |
|
| |
|
| /* =========================================================
| | --pink: #e85b9b; |
| POSITIVE DONATION - BAKHSHANDEH
| | --pink-dark: #d84788; |
| MOBILE FIRST
| | --pink-light: #fce8f1; |
| ========================================================= */
| |
| | |
| .positive-donation-page{
| |
| | |
| --purple:#583174;
| |
| --purple-dark:#3f2058;
| |
| --purple-light:#eee3f5;
| |
| | |
| --pink:#e85b9b; | |
| --pink-dark:#d84788; | |
| --pink-light:#fce8f1; | |
| | |
| --lavender:#f7f0fa;
| |
| --lavender-2:#eee2f4;
| |
| | |
| --text:#3d3443;
| |
| --muted:#706575;
| |
| | |
| --white:#fff;
| |
| --border:#e8dce9;
| |
| | |
| --gold:#c9a04a;
| |
| | |
| --shadow:0 10px 35px rgba(88,49,116,.10);
| |
| --shadow-soft:0 6px 22px rgba(88,49,116,.08);
| |
| | |
| direction:rtl;
| |
| width:100%;
| |
| max-width:1500px;
| |
| margin:auto;
| |
| | |
| padding:7px;
| |
| | |
| font-family:
| |
| IRANSans,
| |
| "Vazirmatn",
| |
| Tahoma,
| |
| Arial,
| |
| sans-serif;
| |
| | |
| color:var(--text);
| |
| | |
| font-size:16px;
| |
| | |
| line-height:1.9;
| |
| }
| |
| | |
| .positive-donation-page *,
| |
| .positive-donation-page *::before,
| |
| .positive-donation-page *::after{
| |
| box-sizing:border-box;
| |
| }
| |
| | |
| .positive-donation-page img{
| |
| display:block;
| |
| width:100%;
| |
| max-width:100%;
| |
| }
| |
| | |
| .positive-donation-page a{
| |
| text-decoration:none;
| |
| color:inherit;
| |
| }
| |
| | |
| .pd-container{
| |
| width:100%;
| |
| max-width:1280px;
| |
| margin:auto;
| |
| }
| |
| | |
| .pd-section{
| |
| width:100%;
| |
| margin-top:30px;
| |
| }
| |
| | |
| .pd-title{
| |
| text-align:center;
| |
| margin-bottom:20px;
| |
| }
| |
| | |
| .pd-title span{
| |
| display:inline-flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| padding:5px 15px;
| |
| | |
| background:var(--pink-light);
| |
| color:var(--pink-dark);
| |
| | |
| border-radius:30px;
| |
| | |
| font-size:.85rem;
| |
| font-weight:800;
| |
| | |
| margin-bottom:7px;
| |
| }
| |
| | |
| .pd-title h2{
| |
| margin:0;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:1.45rem;
| |
| line-height:1.65;
| |
| | |
| font-weight:900;
| |
| }
| |
| | |
| .pd-title p{
| |
| max-width:700px;
| |
| | |
| margin:6px auto 0;
| |
| | |
| color:var(--muted);
| |
| | |
| font-size:.88rem;
| |
| | |
| line-height:1.9;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| HEADER
| |
| ========================================================= */
| |
| | |
| .pd-header{
| |
| | |
| background:#fff;
| |
| | |
| border:1px solid var(--border);
| |
| | |
| border-radius:23px;
| |
| | |
| padding:11px 14px;
| |
| | |
| display:flex;
| |
| align-items:center;
| |
| justify-content:space-between;
| |
| | |
| gap:10px;
| |
| | |
| box-shadow:var(--shadow-soft);
| |
| }
| |
| | |
| .pd-brand{
| |
| | |
| display:flex;
| |
| align-items:center;
| |
| | |
| gap:10px;
| |
| }
| |
| | |
| .pd-logo{
| |
| | |
| width:47px;
| |
| height:47px;
| |
| | |
| flex:0 0 47px;
| |
| | |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| border-radius:16px;
| |
| | |
| background:
| |
| linear-gradient(
| |
| 145deg,
| |
| var(--purple),
| |
| var(--pink)
| |
| );
| |
| | |
| color:#fff;
| |
| | |
| font-size:1.55rem;
| |
| font-weight:900;
| |
| }
| |
| | |
| .pd-brand-text strong{
| |
| | |
| display:block;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:.95rem;
| |
| | |
| line-height:1.5;
| |
| }
| |
| | |
| .pd-brand-text small{
| |
| | |
| display:block;
| |
| | |
| color:var(--muted);
| |
| | |
| font-size:.72rem;
| |
| }
| |
| | |
| .pd-menu{
| |
| display:none;
| |
| }
| |
| | |
| .pd-header-btn{
| |
| display:none;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| HERO
| |
| ========================================================= */
| |
| | |
| .pd-hero{
| |
| | |
| position:relative;
| |
| | |
| margin-top:12px;
| |
| | |
| min-height:310px;
| |
| | |
| overflow:hidden;
| |
| | |
| border-radius:30px;
| |
| | |
| background:
| |
| | |
| linear-gradient(
| |
| 90deg,
| |
| rgba(63,32,88,.88),
| |
| rgba(88,49,116,.55),
| |
| rgba(232,91,155,.18)
| |
| ),
| |
| | |
| url("YOUR-BANNER-IMAGE-URL")
| |
| center center / cover no-repeat;
| |
| | |
| box-shadow:var(--shadow);
| |
| }
| |
| | |
| .pd-hero::before{
| |
| | |
| content:"";
| |
| | |
| position:absolute;
| |
| | |
| width:240px;
| |
| height:240px;
| |
| | |
| border-radius:50%;
| |
| | |
| background:
| |
| rgba(232,91,155,.20);
| |
| | |
| top:-110px;
| |
| right:-80px;
| |
| }
| |
| | |
| .pd-hero-content{
| |
| | |
| position:relative;
| |
| z-index:2;
| |
| | |
| min-height:310px;
| |
| | |
| padding:28px 20px;
| |
| | |
| display:flex;
| |
| | |
| flex-direction:column;
| |
| | |
| justify-content:center;
| |
| | |
| align-items:flex-start;
| |
| }
| |
| | |
| .pd-hero-badge{
| |
| | |
| display:inline-flex;
| |
| | |
| padding:6px 14px;
| |
| | |
| border-radius:30px;
| |
| | |
| background:
| |
| rgba(255,255,255,.15);
| |
| | |
| border:
| |
| 1px solid
| |
| rgba(255,255,255,.4);
| |
| | |
| color:#fff;
| |
| | |
| font-size:.78rem;
| |
| | |
| margin-bottom:9px;
| |
| }
| |
| | |
| .pd-hero h1{
| |
| | |
| margin:0;
| |
| | |
| color:#fff;
| |
| | |
| font-size:1.8rem;
| |
| | |
| line-height:1.65;
| |
| | |
| max-width:700px;
| |
| }
| |
| | |
| .pd-hero h1 strong{
| |
| color:#f7a9ca;
| |
| }
| |
| | |
| .pd-hero p{
| |
| | |
| max-width:650px;
| |
| | |
| margin:8px 0 16px;
| |
| | |
| color:
| |
| rgba(255,255,255,.94);
| |
| | |
| font-size:.88rem;
| |
| | |
| line-height:2;
| |
| }
| |
| | |
| .pd-buttons{
| |
| | |
| display:flex;
| |
| | |
| flex-wrap:wrap;
| |
| | |
| gap:8px;
| |
| }
| |
| | |
| .pd-btn{
| |
| | |
| min-height:44px;
| |
| | |
| display:inline-flex;
| |
| | |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| padding:8px 18px;
| |
| | |
| border-radius:14px;
| |
| | |
| font-size:.78rem;
| |
| | |
| font-weight:900;
| |
| }
| |
| | |
| .pd-btn-main{
| |
| | |
| background:#fff;
| |
| | |
| color:var(--purple);
| |
| }
| |
| | |
| .pd-btn-light{
| |
| | |
| color:#fff;
| |
| | |
| border:
| |
| 1px solid
| |
| rgba(255,255,255,.45);
| |
| | |
| background:
| |
| rgba(255,255,255,.12);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| QUICK SERVICES
| |
| ========================================================= */
| |
|
| |
|
| .pd-quick{
| | --lavender: #f7f0fa; |
| | --lavender-2: #eee2f4; |
|
| |
|
| display:grid; | | --text: #3d3443; |
| | --muted: #706575; |
|
| |
|
| grid-template-columns: | | --white: #fff; |
| repeat(2,1fr);
| | --border: #e8dce9; |
|
| |
|
| gap:10px; | | color: var(--text); |
| } | | } |
|
| |
|
| .pd-quick-card{ | | .positive-donation-page img { |
| | | display: block; |
| min-height:115px;
| | max-width: 100%; |
| | |
| background:#fff;
| |
| | |
| border:
| |
| 1px solid
| |
| var(--border);
| |
| | |
| border-radius:21px;
| |
| | |
| display:flex; | |
| | |
| flex-direction:column;
| |
| | |
| align-items:center;
| |
| | |
| justify-content:center;
| |
| | |
| text-align:center; | |
| | |
| padding:11px;
| |
| | |
| box-shadow:var(--shadow-soft);
| |
| } | | } |
|
| |
|
| .pd-quick-icon{ | | /* Hero Slider */ |
| | | .pd-hero { |
| width:44px; | | position: relative; |
| height:44px; | | margin-top: 12px; |
| | | overflow: hidden; |
| border-radius:15px;
| | border-radius: 30px; |
| | | box-shadow: var(--shadow); |
| display:flex; | |
| | |
| align-items:center; | |
| justify-content:center; | |
| | |
| background:var(--purple-light);
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:1.15rem;
| |
| | |
| margin-bottom:5px;
| |
| } | | } |
|
| |
|
| .pd-quick-card:nth-child(2) | | .pd-hero-slider { |
| .pd-quick-icon{
| | position: relative; |
| | | min-height: 360px; |
| background:var(--pink-light); | | background: var(--purple); |
| | | isolation: isolate; |
| color:var(--pink); | |
| } | | } |
|
| |
|
| .pd-quick-card strong{ | | .pd-hero-slides { |
| | | position: absolute; |
| color:var(--purple); | | inset: 0; |
| | |
| font-size:.85rem; | |
| } | | } |
|
| |
|
| .pd-quick-card small{ | | .pd-hero-slide { |
| | | position: absolute; |
| color:var(--muted); | | inset: 0; |
| | | opacity: 0; |
| font-size:.72rem; | | visibility: hidden; |
| | pointer-events: none; |
| | transition: opacity .45s ease; |
| } | | } |
|
| |
|
| | | .pd-hero-slide.is-active { |
| /* =========================================================
| | opacity: 1; |
| START
| | visibility: visible; |
| ========================================================= */
| | pointer-events: auto; |
| | |
| .pd-start{ | |
| | |
| padding:23px 16px;
| |
| | |
| background:
| |
| linear-gradient(
| |
| 135deg,
| |
| #fff,
| |
| var(--lavender)
| |
| );
| |
| | |
| border:
| |
| 1px solid
| |
| var(--border);
| |
| | |
| border-radius:27px; | |
| | |
| box-shadow:var(--shadow-soft); | |
| | |
| text-align:center; | |
| } | | } |
|
| |
|
| .pd-start h2{ | | .pd-hero-slide > img { |
| | | position: absolute; |
| margin:0; | | inset:; |
| | | object-position: center 100%; |
| color:var(--purple); | | height: 100%; |
| | | object-fit: cover; |
| font-size:1.25rem; | | object-position: center; |
| } | | } |
|
| |
|
| .pd-start p{ | | .pd-hero-overlay { |
| | | position: absolute; |
| margin:6px auto 15px; | | inset: 0; |
| | | background: linear-gradient( |
| color:var(--muted); | | 90deg, |
| | | rgba(63,32,88,.9), |
| font-size:.82rem; | | rgba(88,49,116,.62), |
| | | rgba(232,91,155,.18) |
| max-width:650px; | | ); |
| | z-index: 1; |
| } | | } |
|
| |
|
| .pd-start-options{ | | .pd-hero-slider .pd-hero-content { |
| | | position: relative; |
| display:grid; | | z-index: 2; |
| | | min-height: 360px; |
| grid-template-columns: | | padding: 30px 24px 46px; |
| repeat(2,1fr);
| | display: flex; |
| | | flex-direction: column; |
| gap:9px; | | justify-content: flex-end; |
| | align-items: flex-start; |
| } | | } |
|
| |
|
| .pd-start-option{ | | .pd-hero-badge { |
| | | display: inline-flex; |
| padding:13px 8px; | | background: rgba(255,255,; |
| | | border-radius: 30px; |
| background:#fff; | | background: rgba(255,255,255,.15); |
| | | border: 1px solid rgba(255,255,255,.4); |
| border: | | color: #fff; |
| 1px solid
| | font-size: .78rem; |
| var(--border);
| | margin-bottom: 9px; |
| | |
| border-radius:18px; | |
| | |
| color:var(--purple); | |
| | |
| font-size:.76rem; | |
| | |
| font-weight:900; | |
| } | | } |
|
| |
|
| | | .pd-hero h1 { |
| /* =========================================================
| | margin: 0; |
| DONATION SERVICES
| | color: #fff; |
| ========================================================= */
| | font-size: 1.8rem; |
| | | line-height: 1.65; |
| .pd-donation{ | | max-width: 700px; |
| | |
| position:relative; | |
| | |
| overflow:hidden; | |
| | |
| padding:27px 8px 22px; | |
| | |
| border-radius:34px; | |
| | |
| background: | |
| linear-gradient(
| |
| 180deg,
| |
| #fff,
| |
| #fff8fc
| |
| );
| |
| } | | } |
|
| |
|
| .pd-donation::before{ | | .pd-hero h1 strong { |
| | | color: #f7a9ca; |
| content:"";
| |
| | |
| position:absolute;
| |
| | |
| width:390px;
| |
| height:390px;
| |
| | |
| border-radius:
| |
| 48% 52% 62% 38% /
| |
| 42% 39% 61% 58%;
| |
| | |
| background:
| |
| | |
| radial-gradient(
| |
| circle at 35% 30%,
| |
| rgba(232,91,155,.30),
| |
| rgba(232,91,155,.11) 45%,
| |
| transparent 70%
| |
| );
| |
| | |
| top:-110px;
| |
| right:-100px;
| |
| | |
| transform:rotate(-15deg);
| |
| | |
| pointer-events:none; | |
| } | | } |
|
| |
|
| .pd-donation::after{ | | .pd-hero p { |
| | | max-width: 650px; |
| content:"";
| | margin: 8px 0 0; |
| | | color: rgba(255,255,255,.94: .88rem; |
| position:absolute;
| | .88rem; |
| | | line-height: 2; |
| width:320px; | |
| height:280px; | |
| | |
| border-radius: | |
| 60% 40% 42% 58% /
| |
| 55% 45% 55% 45%;
| |
| | |
| background:
| |
| rgba(88,49,116,.09);
| |
| | |
| bottom:-125px;
| |
| left:-90px;
| |
| | |
| transform:rotate(15deg);
| |
| | |
| pointer-events:none; | |
| } | | } |
|
| |
|
| .pd-donation .pd-title, | | .pd-buttons { |
| .pd-donation-grid{
| | margin-top: 18px; |
| | | display: flex; |
| position:relative; | | flex-wrap: wrap; |
| | | gap: 8px; |
| z-index:2; | |
| } | | } |
|
| |
|
| .pd-donation-grid{ | | .pd-btn { |
| | | min-height: 44px; |
| display:grid; | | display: inline-flex; |
| | | align-items: center; |
| grid-template-columns:1fr; | | justify-content: center; |
| | | padding: 8px 18px; |
| gap:13px; | | border-radius: 14px; |
| | font-size: .78rem; |
| | font-weight: 900; |
| | text-decoration: none; |
| } | | } |
|
| |
|
| .pd-donation-card{ | | .pd-btn-main { |
| | | background: #fff; |
| position:relative;
| | color: var(--purple); |
| | |
| min-height:270px;
| |
| | |
| overflow:hidden;
| |
| | |
| background:#fff; | |
| | |
| border: | |
| 1px solid
| |
| rgba(232,91,155,.22);
| |
| | |
| border-radius:29px;
| |
| | |
| box-shadow:
| |
| 0 12px 30px
| |
| rgba(88,49,116,.11);
| |
| | |
| padding:15px;
| |
| | |
| display:flex;
| |
| | |
| flex-direction:column;
| |
| | |
| justify-content:flex-end;
| |
| } | | } |
|
| |
|
| .pd-donation-image{ | | .pd-btn-light { |
| | | color: #fff; |
| position:absolute; | | border: 1px solid rgba(255,255,255,.45); |
| | | background: rgba(255,255,255,.12); |
| inset:0; | |
| | |
| z-index:0; | |
| } | | } |
|
| |
|
| .pd-donation-image img{ | | .pd-hero-arrow { |
| | | position: absolute; |
| width:100%; | | z-index: 5; |
| height:100%; | | top: 50%; |
| | | transform: translateY(-50%); |
| object-fit:cover; | | width: 48px; |
| | | height: 48px; |
| object-position:center; | | border: 1px solid rgba(255,255,255,.35); |
| | border-radius: 50%; |
| | background: rgba(63,32,88,.58); |
| | color: #fff; |
| | font-size: 2rem; |
| | line-height: 1; |
| | cursor: pointer; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| } | | } |
|
| |
|
| .pd-donation-image::after{ | | .pd-hero-prev { |
| | | right: 14px; |
| content:""; | |
| | |
| position:absolute;
| |
| | |
| inset:0;
| |
| | |
| background:
| |
| linear-gradient(
| |
| 180deg,
| |
| rgba(63,32,88,.02) 15%,
| |
| rgba(63,32,88,.82) 100%
| |
| );
| |
| } | | } |
|
| |
|
| .pd-donation-content{ | | .pd-hero-next { |
| | | left: 14px; |
| position:relative;
| |
| | |
| z-index:2;
| |
| | |
| padding:5px;
| |
| | |
| color:#fff; | |
| } | | } |
|
| |
|
| .pd-donation-icon{ | | .pd-hero-dots { |
| | | position: absolute; |
| width:47px; | | z-index: 5; |
| height:47px; | | bottom: 16px; |
| | | left: 50%; |
| border-radius:16px; | | transform: translateX(-50%); |
| | | display: flex; |
| background: | | gap: 8px; |
| rgba(255,255,255,.93);
| | direction: ltr; |
| | |
| color:var(--purple); | |
| | |
| display:flex; | |
| | |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| font-size:1.2rem; | |
| | |
| margin-bottom:7px; | |
| } | | } |
|
| |
|
| .pd-donation-card h3{ | | .pd-hero-dots button { |
| | | width: 11px; |
| margin:0; | | height: 11px; |
| | | border: 1px solid rgba(255,255,255,.75); |
| font-size:1.12rem; | | border-radius: 50%; |
| | | background: rgba(255,255,255,.35); |
| color:#fff; | | padding: 0; |
| | cursor: pointer; |
| } | | } |
|
| |
|
| .pd-donation-card p{ | | .pd-hero-dots button.is-active { |
| | | width: 28px; |
| margin:5px 0 10px; | | border-radius { |
| | | 20px; |
| color: | | background: #fff; |
| rgba(255,255,255,.94);
| |
| | |
| font-size:.78rem;
| |
| | |
| line-height:1.9; | |
| } | | } |
|
| |
|
| .pd-donation-actions{ | | /* Image cards */ |
| | | .pd-image-slider { |
| display:flex; | | display: grid; |
| | | grid-template-columns: 1fr; |
| gap:7px; | | gap: 13px; |
| | | width: 100%; |
| flex-wrap:wrap; | |
| } | | } |
|
| |
|
| .pd-donation-actions a{ | | .pd-image-slide { |
| | | width: 100%; |
| background: | | min-width: 0; |
| rgba(255,255,255,.94);
| | height: 230px; |
| | | position: relative; |
| color:var(--purple); | | overflow: hidden; |
| | | border-radius: 26px; |
| padding:6px 10px; | | background: var(--purple); |
| | | box-shadow: var(--shadow-soft); |
| border-radius:12px; | |
| | |
| font-size:.68rem; | |
| | |
| font-weight:900; | |
| } | | } |
|
| |
|
| | | .pd-image-slide img { |
| /* =========================================================
| | width: 100%; |
| RECEIVER / DONOR
| | height: 100%; |
| ========================================================= */
| | object-fit: cover; |
| | | object-position: center; |
| .pd-choice{ | |
| | |
| display:grid; | |
| | |
| grid-template-columns:1fr; | |
| | |
| gap:12px; | |
| } | | } |
|
| |
|
| .pd-choice-card{ | | .pd-image-slide::after { |
| | | content: ""; |
| position:relative;
| | position: absolute; |
| | | inset: 0; |
| overflow:hidden;
| | background: linear-gradient( |
| | | transparent 30%, |
| min-height:185px; | | rgba(63,32,88,.75) |
| | | ); |
| border-radius:27px; | |
| | |
| padding:21px; | |
| | |
| display:flex; | |
| | |
| flex-direction:column;
| |
| | |
| justify-content:flex-end;
| |
| | |
| box-shadow:var(--shadow);
| |
| | |
| color:#fff; | |
| } | | } |
|
| |
|
| .pd-choice-card:first-child{ | | .pd-image-slide span { |
| | | position: absolute; |
| background: | | z-index: 2; |
| linear-gradient(
| | right: 16px; |
| 135deg,
| | bottom: 13px; |
| var(--purple),
| | color: #fff; |
| #80509c
| | font-size: .82rem; |
| );
| | font-weight: 900; |
| } | | } |
|
| |
|
| .pd-choice-card:last-child{ | | .pd-article-image { |
| | | width: 100%; |
| background: | | height: 230px; |
| linear-gradient(
| | background: var(--lavender); |
| 135deg,
| |
| var(--pink),
| |
| #ef83b1
| |
| );
| |
| } | | } |
|
| |
|
| .pd-choice-card::before{ | | .pd-article-image img { |
| | | width: 100%; |
| content:"";
| | height: 100%; |
| | | object-fit: cover; |
| position:absolute;
| | object-position: center; |
| | |
| width:150px; | |
| height:150px; | |
| | |
| border-radius:50%; | |
| | |
| background: | |
| rgba(255,255,255,.10);
| |
| | |
| top:-60px;
| |
| left:-40px;
| |
| } | | } |
|
| |
|
| .pd-choice-card h3{
| | @media (min-width: 700px) { |
| | | .pd-hero-slider, |
| position:relative;
| | .pd-hero-slider .pd-hero-content { |
| | | min-height: 450px; |
| margin:0;
| |
| | |
| font-size:1.12rem;
| |
| }
| |
| | |
| .pd-choice-card p{
| |
| | |
| position:relative;
| |
| | |
| margin:5px 0 11px;
| |
| | |
| font-size:.78rem;
| |
| | |
| color:
| |
| rgba(255,255,255,.93);
| |
| }
| |
| | |
| .pd-choice-card a{
| |
| | |
| position:relative;
| |
| | |
| width:max-content;
| |
| | |
| padding:7px 12px;
| |
| | |
| border-radius:13px;
| |
| | |
| background:#fff;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:.68rem;
| |
| | |
| font-weight:900;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| همراهی و آگاهی
| |
| MOBILE = VERTICAL
| |
| ========================================================= */
| |
| | |
| .pd-image-slider{
| |
| | |
| display:grid;
| |
| | |
| grid-template-columns:1fr;
| |
| | |
| gap:13px;
| |
| | |
| width:100%;
| |
| }
| |
| | |
| .pd-image-slide{
| |
| | |
| width:100%;
| |
| | |
| min-width:0;
| |
| | |
| height:190px;
| |
| | |
| position:relative;
| |
| | |
| overflow:hidden;
| |
| | |
| border-radius:26px;
| |
| | |
| background:var(--purple);
| |
| | |
| box-shadow:var(--shadow-soft);
| |
| }
| |
| | |
| .pd-image-slide img{
| |
| | |
| width:100%;
| |
| height:100%;
| |
| | |
| object-fit:cover;
| |
| | |
| object-position:center; | |
| }
| |
| | |
| .pd-image-slide::after{ | |
| | |
| content:"";
| |
| | |
| position:absolute;
| |
| | |
| inset:0;
| |
| | |
| background:
| |
| linear-gradient(
| |
| transparent 30%,
| |
| rgba(63,32,88,.75)
| |
| );
| |
| }
| |
| | |
| .pd-image-slide span{
| |
| | |
| position:absolute;
| |
| | |
| z-index:2;
| |
| | |
| right:16px;
| |
| bottom:13px;
| |
| | |
| color:#fff;
| |
| | |
| font-size:.82rem;
| |
| | |
| font-weight:900;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| BENEFITS
| |
| ========================================================= */
| |
| | |
| .pd-benefits{
| |
| | |
| display:grid;
| |
| | |
| grid-template-columns:
| |
| repeat(2,1fr);
| |
| | |
| gap:10px; | |
| }
| |
| | |
| .pd-benefit{ | |
| | |
| background:#fff;
| |
| | |
| border:
| |
| 1px solid
| |
| var(--border);
| |
| | |
| border-radius:22px;
| |
| | |
| padding:16px 9px;
| |
| | |
| text-align:center;
| |
| | |
| box-shadow:var(--shadow-soft);
| |
| }
| |
| | |
| .pd-benefit-icon{ | |
| | |
| width:44px;
| |
| height:44px;
| |
| | |
| margin:0 auto 7px;
| |
| | |
| border-radius:15px;
| |
| | |
| background:var(--purple-light);
| |
| | |
| color:var(--purple);
| |
| | |
| display:flex;
| |
| | |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| font-size:1rem;
| |
| }
| |
| | |
| .pd-benefit:nth-child(even)
| |
| .pd-benefit-icon{
| |
| | |
| background:var(--pink-light);
| |
| | |
| color:var(--pink);
| |
| }
| |
| | |
| .pd-benefit strong{
| |
| | |
| display:block;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:.8rem;
| |
| }
| |
| | |
| .pd-benefit small{
| |
| | |
| color:var(--muted);
| |
| | |
| font-size:.68rem;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| STEPS
| |
| ========================================================= */
| |
| | |
| .pd-steps{
| |
| | |
| display:grid;
| |
| | |
| grid-template-columns:1fr;
| |
| | |
| gap:9px;
| |
| }
| |
| | |
| .pd-step{
| |
| | |
| background:#fff;
| |
| | |
| border:
| |
| 1px solid
| |
| var(--border); | |
| | |
| border-radius:21px;
| |
| | |
| padding:14px;
| |
| | |
| display:flex;
| |
| | |
| align-items:center;
| |
| | |
| gap:12px;
| |
| | |
| box-shadow:var(--shadow-soft);
| |
| }
| |
| | |
| .pd-step-number{
| |
| | |
| width:44px;
| |
| height:44px;
| |
| | |
| flex:0 0 44px;
| |
| | |
| border-radius:15px;
| |
| | |
| background:var(--purple);
| |
| | |
| color:#fff;
| |
| | |
| display:flex;
| |
| | |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| font-weight:900;
| |
| | |
| font-size:.9rem;
| |
| }
| |
| | |
| .pd-step:nth-child(2)
| |
| .pd-step-number{
| |
| background:var(--pink);
| |
| }
| |
| | |
| .pd-step:nth-child(3)
| |
| .pd-step-number{
| |
| background:#9b70b3;
| |
| }
| |
| | |
| .pd-step:nth-child(4)
| |
| .pd-step-number{
| |
| background:var(--gold);
| |
| }
| |
| | |
| .pd-step strong{
| |
| | |
| display:block;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:.8rem;
| |
| }
| |
| | |
| .pd-step small{
| |
| | |
| color:var(--muted);
| |
| | |
| font-size:.68rem;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| مجله اهدای مثبت
| |
| MOBILE = VERTICAL
| |
| ========================================================= */
| |
| | |
| .pd-articles{
| |
| | |
| display:grid;
| |
| | |
| grid-template-columns:1fr;
| |
| | |
| gap:14px;
| |
| | |
| width:100%;
| |
| }
| |
| | |
| .pd-article{
| |
| | |
| width:100%;
| |
| | |
| min-width:0;
| |
| | |
| overflow:hidden;
| |
| | |
| background:#fff;
| |
| | |
| border:
| |
| 1px solid
| |
| var(--border);
| |
| | |
| border-radius:26px;
| |
| | |
| box-shadow:var(--shadow-soft);
| |
| }
| |
| | |
| .pd-article-image{
| |
| | |
| width:100%;
| |
| | |
| height:180px;
| |
| | |
| background:var(--lavender);
| |
| }
| |
| | |
| .pd-article-image img{
| |
| | |
| width:100%;
| |
| height:100%;
| |
| | |
| object-fit:cover;
| |
| | |
| object-position:center;
| |
| }
| |
| | |
| .pd-article-body{
| |
| | |
| padding:15px;
| |
| }
| |
| | |
| .pd-article-body small{
| |
| | |
| color:var(--pink-dark);
| |
| | |
| font-size:.68rem;
| |
| | |
| font-weight:900;
| |
| }
| |
| | |
| .pd-article-body h3{
| |
| | |
| margin:5px 0;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:.9rem;
| |
| | |
| line-height:1.8;
| |
| }
| |
| | |
| .pd-article-body p{
| |
| | |
| margin:0;
| |
| | |
| color:var(--muted);
| |
| | |
| font-size:.7rem;
| |
| | |
| line-height:1.9;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| FAQ
| |
| ========================================================= */
| |
| | |
| .pd-faq{
| |
| | |
| display:grid;
| |
| | |
| gap:9px;
| |
| }
| |
| | |
| .pd-faq details{
| |
| | |
| background:#fff;
| |
| | |
| border:
| |
| 1px solid
| |
| var(--border);
| |
| | |
| border-radius:19px;
| |
| | |
| padding:13px 15px;
| |
| | |
| box-shadow:var(--shadow-soft);
| |
| }
| |
| | |
| .pd-faq summary{
| |
| | |
| cursor:pointer;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:.78rem;
| |
| | |
| font-weight:900;
| |
| }
| |
| | |
| .pd-faq p{
| |
| | |
| color:var(--muted);
| |
| | |
| font-size:.72rem;
| |
| | |
| line-height:2;
| |
| | |
| margin:9px 0 0;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| CTA
| |
| ========================================================= */
| |
| | |
| .pd-cta{
| |
| | |
| position:relative;
| |
| | |
| overflow:hidden;
| |
| | |
| padding:32px 18px;
| |
| | |
| border-radius:31px;
| |
| | |
| text-align:center;
| |
| | |
| background:
| |
| | |
| radial-gradient(
| |
| circle at 85% 15%,
| |
| rgba(232,91,155,.34),
| |
| transparent 30%
| |
| ),
| |
| | |
| linear-gradient(
| |
| 135deg,
| |
| var(--purple-dark),
| |
| var(--purple)
| |
| );
| |
| | |
| box-shadow:var(--shadow);
| |
| }
| |
| | |
| .pd-cta::before{
| |
| | |
| content:"♥";
| |
| | |
| position:absolute;
| |
| | |
| font-size:160px;
| |
| | |
| color:
| |
| rgba(255,255,255,.04);
| |
| | |
| left:-10px;
| |
| bottom:-65px;
| |
| }
| |
| | |
| .pd-cta h2{
| |
| | |
| position:relative;
| |
| | |
| margin:0 0 6px;
| |
| | |
| color:#fff;
| |
| | |
| font-size:1.35rem;
| |
| }
| |
| | |
| .pd-cta p{
| |
| | |
| position:relative;
| |
| | |
| max-width:650px;
| |
| | |
| margin:0 auto 15px;
| |
| | |
| color:
| |
| rgba(255,255,255,.88);
| |
| | |
| font-size:.76rem;
| |
| | |
| line-height:2;
| |
| }
| |
| | |
| .pd-cta a{
| |
| | |
| position:relative;
| |
| | |
| display:inline-flex;
| |
| | |
| padding:9px 19px;
| |
| | |
| border-radius:15px;
| |
| | |
| background:#fff;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:.74rem;
| |
| | |
| font-weight:900;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| FOOTER
| |
| ========================================================= */
| |
| | |
| .pd-footer{
| |
| | |
| margin-top:30px;
| |
| | |
| padding:24px 15px;
| |
| | |
| background:
| |
| var(--lavender);
| |
| | |
| border:
| |
| 1px solid
| |
| var(--border);
| |
| | |
| border-radius:26px;
| |
| | |
| padding-bottom:90px;
| |
| }
| |
| | |
| .pd-footer-grid{
| |
| | |
| display:grid;
| |
| | |
| grid-template-columns:1fr;
| |
| | |
| gap:20px;
| |
| }
| |
| | |
| .pd-footer h3{
| |
| | |
| margin:0 0 7px;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:.86rem;
| |
| }
| |
| | |
| .pd-footer p,
| |
| .pd-footer li{
| |
| | |
| color:var(--muted);
| |
| | |
| font-size:.68rem;
| |
| | |
| line-height:2;
| |
| }
| |
| | |
| .pd-footer ul{
| |
| | |
| list-style:none;
| |
| | |
| padding:0;
| |
| margin:0;
| |
| }
| |
| | |
| .pd-footer li{
| |
| margin:4px 0;
| |
| }
| |
| | |
| .pd-footer-bottom{
| |
| | |
| margin-top:17px;
| |
| | |
| padding-top:13px;
| |
| | |
| border-top:
| |
| 1px solid
| |
| var(--border);
| |
| | |
| text-align:center;
| |
| | |
| color:var(--muted);
| |
| | |
| font-size:.62rem;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| MOBILE BOTTOM NAV
| |
| ========================================================= */
| |
| | |
| .pd-mobile-nav{
| |
| | |
| position:fixed;
| |
| | |
| z-index:99999;
| |
| | |
| right:7px;
| |
| left:7px;
| |
| bottom:7px;
| |
| | |
| height:67px;
| |
| | |
| display:flex;
| |
| | |
| align-items:center;
| |
| justify-content:space-around;
| |
| | |
| background:
| |
| rgba(63,32,88,.97);
| |
| | |
| border:
| |
| 1px solid
| |
| rgba(255,255,255,.13);
| |
| | |
| border-radius:22px;
| |
| | |
| box-shadow:
| |
| 0 8px 35px
| |
| rgba(63,32,88,.28);
| |
| | |
| direction:rtl;
| |
| }
| |
| | |
| .pd-mobile-nav a{
| |
| | |
| min-width:55px;
| |
| | |
| height:58px;
| |
| | |
| display:flex;
| |
| | |
| flex-direction:column;
| |
| | |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| gap:1px;
| |
| | |
| border-radius:16px;
| |
| | |
| color:
| |
| rgba(255,255,255,.76);
| |
| | |
| font-size:.58rem;
| |
| | |
| font-weight:800;
| |
| | |
| transition:.2s ease;
| |
| }
| |
| | |
| .pd-mobile-nav a span{
| |
| | |
| width:30px;
| |
| height:30px;
| |
| | |
| display:flex;
| |
| | |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| border-radius:11px;
| |
| | |
| font-size:1rem;
| |
| }
| |
| | |
| .pd-mobile-nav a.active{
| |
| | |
| color:#fff;
| |
| }
| |
| | |
| .pd-mobile-nav a.active span{
| |
| | |
| background:var(--pink);
| |
| | |
| color:#fff;
| |
| | |
| box-shadow:
| |
| 0 5px 15px
| |
| rgba(232,91,155,.35);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| TABLET
| |
| ========================================================= */
| |
| | |
| @media (min-width:700px){
| |
| | |
| .positive-donation-page{
| |
| padding:15px;
| |
| font-size:16px;
| |
| }
| |
| | |
| .pd-header{
| |
| padding:13px 18px;
| |
| }
| |
| | |
| .pd-menu{
| |
| | |
| display:flex;
| |
| | |
| align-items:center;
| |
| | |
| gap:3px;
| |
| | |
| margin-right:auto;
| |
| } | | } |
|
| |
|
| .pd-menu a{ | | .pd-hero-slider .pd-hero-content { |
| | | padding: 55px 70px 60px; |
| padding:8px 10px;
| |
| | |
| border-radius:12px;
| |
| | |
| color:var(--purple);
| |
| | |
| font-size:.72rem; | |
| | |
| font-weight:900;
| |
| } | | } |
|
| |
|
| .pd-header-btn{ | | .pd-hero h1 { |
| | | font-size: 2.6rem; |
| display:inline-flex;
| |
| | |
| padding:8px 14px;
| |
| | |
| border-radius:13px;
| |
| | |
| background:var(--purple);
| |
| | |
| color:#fff;
| |
| | |
| font-size:.7rem; | |
| | |
| font-weight:900;
| |
| } | | } |
|
| |
|
| .pd-hero{ | | .pd-hero p { |
| min-height:400px; | | font-size: 1.08rem; |
| } | | } |
|
| |
|
| .pd-hero-content{ | | .pd-btn { |
| min-height:400px; | | font-size: .95rem; |
| padding:45px; | | min-height: 50px; |
| | padding: 10px 22px; |
| } | | } |
|
| |
|
| .pd-hero h1{ | | .pd-image-slider { |
| font-size:2.25rem; | | grid-template-columns: repeat(4, 1fr); |
| | gap: 12px; |
| } | | } |
|
| |
|
| .pd-hero p{ | | .pd-image-slide { |
| font-size:.95rem; | | height: 260px; |
| } | | } |
|
| |
|
| .pd-quick{ | | .pd-article-image { |
| grid-template-columns: | | height: 260px; |
| repeat(4,1fr);
| |
| } | | } |
| | } |
|
| |
|
| .pd-start-options{
| | @media (min-width: 1050px) { |
| grid-template-columns:
| | .pd-hero-slider, |
| repeat(4,1fr);
| | .pd-hero-slider .pd-hero-content { |
| }
| | min-height: 520px; |
| | |
| .pd-donation-grid{
| |
| grid-template-columns:
| |
| repeat(3,1fr);
| |
| }
| |
| | |
| .pd-donation-card{
| |
| min-height:320px;
| |
| }
| |
| | |
| .pd-choice{
| |
| grid-template-columns:
| |
| repeat(2,1fr);
| |
| }
| |
| | |
| .pd-choice-card{
| |
| min-height:215px;
| |
| }
| |
| | |
| /* دسکتاپ چندستونه */
| |
| | |
| .pd-image-slider{ | |
| | |
| grid-template-columns:
| |
| repeat(4,1fr);
| |
| | |
| gap:12px;
| |
| }
| |
| | |
| .pd-image-slide{ | |
| | |
| height:205px;
| |
| }
| |
| | |
| .pd-benefits{
| |
| | |
| grid-template-columns:
| |
| repeat(3,1fr);
| |
| }
| |
| | |
| .pd-steps{
| |
| | |
| grid-template-columns: | |
| repeat(4,1fr);
| |
| } | | } |
|
| |
|
| .pd-step{ | | .pd-hero-slider .pd-hero-content { |
| | | padding: 70px 85px 74px; |
| display:block; | |
| | |
| text-align:center;
| |
| } | | } |
|
| |
|
| .pd-step-number{ | | .pd-hero h1 { |
| | | font-size: 3.05rem; |
| margin:0 auto 8px; | |
| } | | } |
|
| |
|
| .pd-articles{ | | .pd-hero p { |
| | | font-size: 1.12rem; |
| grid-template-columns: | |
| repeat(3,1fr);
| |
| } | | } |
|
| |
|
| .pd-footer-grid{ | | .pd-image-slide { |
| | | height: 290px; |
| grid-template-columns: | |
| 1.5fr 1fr 1fr;
| |
| } | | } |
|
| |
|
| /* حذف منوی موبایل */
| | .pd-article-image { |
| | | height: 275px; |
| .pd-mobile-nav{ | |
| display:none; | |
| } | | } |
|
| |
|
| .pd-footer{ | | .pd-hero-arrow { |
| padding-bottom:24px; | | width: 54px; |
| | height: 54px; |
| } | | } |
| } | | } |
|
| |
|
| | | @media (max-width: 480px) { |
| /* =========================================================
| | .pd-hero-slider, |
| DESKTOP
| | .pd-hero-slider .pd-hero-content { |
| ========================================================= */
| | min-height: 430px; |
| | |
| @media (min-width:1050px){ | |
| | |
| .pd-section{ | |
| margin-top:46px;
| |
| }
| |
| | |
| .pd-title{ | |
| margin-bottom:26px;
| |
| }
| |
| | |
| .pd-title h2{
| |
| font-size:1.7rem;
| |
| }
| |
| | |
| .pd-title p{
| |
| font-size:.9rem;
| |
| }
| |
| | |
| .pd-hero{
| |
| | |
| min-height:470px; | |
| | |
| border-radius:38px;
| |
| } | | } |
|
| |
|
| .pd-hero-content{ | | .pd-hero-slider .pd-hero-content { |
| | | padding: 28px 52px 38px; |
| min-height:470px;
| |
| | |
| padding:60px;
| |
| }
| |
| | |
| .pd-hero h1{
| |
| | |
| font-size:2.7rem; | |
| } | | } |
|
| |
|
| .pd-hero p{ | | .pd-hero h1 { |
| | | font-size: 2rem; |
| font-size:1rem; | |
| } | | } |
|
| |
|
| .pd-donation{ | | .pd-hero p { |
| | | font-size: .98rem; |
| padding:37px 20px 30px; | | line-height: 2.05; |
| | |
| border-radius:40px; | |
| } | | } |
|
| |
|
| .pd-donation::before{ | | .pd-hero-badge { |
| | | font-size: .88rem; |
| width:520px;
| |
| height:470px; | |
| | |
| top:-155px;
| |
| right:-120px;
| |
| } | | } |
|
| |
|
| .pd-donation::after{ | | .pd-btn { |
| | | font-size: .88rem; |
| width:430px; | | padding: 9px 14px; |
| height:350px; | |
| | |
| bottom:-160px;
| |
| left:-120px;
| |
| } | | } |
|
| |
|
| .pd-donation-card{ | | .pd-hero-arrow { |
| | | width: 38px; |
| min-height:390px; | | height: 38px; |
| | | font-size: 1.6rem; |
| border-radius:33px; | |
| } | | } |
|
| |
|
| .pd-donation-card h3{ | | .pd-hero-prev { |
| | | right: 8px; |
| font-size:1.2rem; | |
| } | | } |
|
| |
|
| .pd-donation-card p{ | | .pd-hero-next { |
| | | left: 8px; |
| font-size:.8rem; | |
| } | | } |
|
| |
|
| .pd-image-slide{ | | .pd-image-slide { |
| | | height: 240px; |
| height:230px; | |
| | |
| border-radius:29px;
| |
| } | | } |
|
| |
|
| .pd-benefits{ | | .pd-article-image { |
| | | height: 230px; |
| grid-template-columns: | |
| repeat(6,1fr);
| |
| } | | } |
| | } |
|
| |
|
| .pd-article-image{ | | @media (max-width: 390px) { |
| | | .positive-donation-page { |
| height:185px; | | font-size: 17px; |
| } | | } |
|
| |
|
| .pd-article-body h3{ | | .pd-hero-slider, |
| | | .pd-hero-slider .pd-hero-content { |
| font-size:.95rem; | | min-height: 400px; |
| } | | } |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| HOVER
| |
| ========================================================= */
| |
|
| |
| @media (hover:hover){
| |
|
| |
|
| .pd-quick-card, | | .pd-hero-slider .pd-hero-content { |
| .pd-donation-card,
| | padding: 24px 46px 34px; |
| .pd-choice-card,
| |
| .pd-benefit,
| |
| .pd-step,
| |
| .pd-article{
| |
| | |
| transition: | |
| transform .22s ease,
| |
| box-shadow .22s ease;
| |
| } | | } |
|
| |
|
| .pd-quick-card:hover, | | .pd-hero h1 { |
| .pd-donation-card:hover,
| | font-size: 1.78rem; |
| .pd-choice-card:hover,
| |
| .pd-benefit:hover,
| |
| .pd-step:hover,
| |
| .pd-article:hover{
| |
| | |
| transform:translateY(-4px);
| |
| | |
| box-shadow: | |
| 0 18px 38px
| |
| rgba(88,49,116,.15);
| |
| } | | } |
|
| |
|
| .pd-menu a:hover{ | | .pd-hero p { |
| | | font-size: .9rem; |
| background:var(--pink-light); | |
| | |
| color:var(--pink-dark);
| |
| } | | } |
| } | | } |
|
| |
|
| | | @media (prefers-reduced-motion: reduce) { |
| /* =========================================================
| | .pd-hero-slide { |
| VERY SMALL MOBILE
| | transition: none; |
| ========================================================= */
| |
| | |
| @media (max-width:390px){ | |
| | |
| .positive-donation-page{
| |
| padding:6px;
| |
| }
| |
| | |
| .pd-brand-text strong{
| |
| font-size:.84rem;
| |
| }
| |
| | |
| .pd-brand-text small{
| |
| font-size:.65rem;
| |
| }
| |
| | |
| .pd-hero{
| |
| min-height:285px;
| |
| }
| |
| | |
| .pd-hero-content{ | |
| min-height:285px; | |
| padding:23px 16px;
| |
| }
| |
| | |
| .pd-hero h1{
| |
| font-size:1.5rem;
| |
| }
| |
| | |
| .pd-hero p{
| |
| font-size:.8rem;
| |
| }
| |
| | |
| .pd-donation-card{
| |
| min-height:240px;
| |
| }
| |
| | |
| .pd-mobile-nav{
| |
| height:64px;
| |
| }
| |
| | |
| .pd-mobile-nav a{
| |
| min-width:49px;
| |
| font-size:.54rem;
| |
| } | | } |
| } | | } |
|
| |
| </style>
| |
| <style>
| |
| /* =========================================================
| |
| ACCESSIBLE LARGE TYPE + RESPONSIVE HERO SLIDER OVERRIDES
| |
| ========================================================= */
| |
| .positive-donation-page{font-size:18px;line-height:2;}
| |
| .positive-donation-page .pd-title h2{font-size:1.75rem;}
| |
| .positive-donation-page .pd-title span{font-size:1rem;padding:7px 17px;}
| |
| .positive-donation-page .pd-title p{font-size:1rem;}
| |
| .positive-donation-page .pd-brand-text strong{font-size:1.08rem;}
| |
| .positive-donation-page .pd-brand-text small{font-size:.86rem;}
| |
| .positive-donation-page .pd-quick-card strong{font-size:1rem;}
| |
| .positive-donation-page .pd-quick-card small{font-size:.86rem;}
| |
| .positive-donation-page .pd-start h2{font-size:1.5rem;}
| |
| .positive-donation-page .pd-start p{font-size:1rem;}
| |
| .positive-donation-page .pd-start-option{font-size:.95rem;}
| |
| .positive-donation-page .pd-donation-card h3{font-size:1.3rem;}
| |
| .positive-donation-page .pd-donation-card p{font-size:.95rem;}
| |
| .positive-donation-page .pd-donation-actions a{font-size:.82rem;padding:8px 12px;}
| |
| .positive-donation-page .pd-choice-card h3{font-size:1.3rem;}
| |
| .positive-donation-page .pd-choice-card p{font-size:.95rem;}
| |
| .positive-donation-page .pd-choice-card a{font-size:.82rem;}
| |
| .positive-donation-page .pd-image-slide{height:230px;}
| |
| .positive-donation-page .pd-image-slide span{font-size:1rem;}
| |
| .positive-donation-page .pd-benefit strong{font-size:.95rem;}
| |
| .positive-donation-page .pd-benefit small{font-size:.82rem;}
| |
| .positive-donation-page .pd-step strong{font-size:.95rem;}
| |
| .positive-donation-page .pd-step small{font-size:.82rem;}
| |
| .positive-donation-page .pd-article-image{height:230px;}
| |
| .positive-donation-page .pd-article-body small{font-size:.8rem;}
| |
| .positive-donation-page .pd-article-body h3{font-size:1.08rem;}
| |
| .positive-donation-page .pd-article-body p{font-size:.88rem;}
| |
| .positive-donation-page .pd-faq summary{font-size:.95rem;}
| |
| .positive-donation-page .pd-faq p{font-size:.88rem;}
| |
| .positive-donation-page .pd-cta h2{font-size:1.55rem;}
| |
| .positive-donation-page .pd-cta p{font-size:.95rem;}
| |
| .positive-donation-page .pd-footer h3{font-size:1rem;}
| |
| .positive-donation-page .pd-footer p,.positive-donation-page .pd-footer li{font-size:.82rem;}
| |
|
| |
| .pd-hero-slider{position:relative;min-height:360px;background:var(--purple);isolation:isolate;}
| |
| .pd-hero-slides{position:absolute;inset:0;}
| |
| .pd-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease;}
| |
| .pd-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;}
| |
| .pd-hero-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
| |
| .pd-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(63,32,88,.9),rgba(88,49,116,.62),rgba(232,91,155,.18));z-index:1;}
| |
| .pd-hero-slider .pd-hero-content{position:relative;z-index:2;min-height:360px;padding:30px 24px;justify-content:center;align-items:flex-start;}
| |
| .pd-hero-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(63,32,88,.58);color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
| |
| .pd-hero-prev{right:14px;}
| |
| .pd-hero-next{left:14px;}
| |
| .pd-hero-dots{position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;direction:ltr;}
| |
| .pd-hero-dots button{width:11px;height:11px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.35);padding:0;cursor:pointer;}
| |
| .pd-hero-dots button.is-active{width:28px;border-radius:20px;background:#fff;}
| |
|
| |
| @media (min-width:700px){
| |
| .positive-donation-page{font-size:18px;}
| |
| .positive-donation-page .pd-title h2{font-size:2rem;}
| |
| .positive-donation-page .pd-title p{font-size:1.05rem;}
| |
| .positive-donation-page .pd-menu a{font-size:.9rem;}
| |
| .positive-donation-page .pd-header-btn{font-size:.88rem;}
| |
| .pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:450px;}
| |
| .pd-hero-slider .pd-hero-content{padding:55px 70px;}
| |
| .positive-donation-page .pd-hero h1{font-size:2.6rem;}
| |
| .positive-donation-page .pd-hero p{font-size:1.08rem;}
| |
| .positive-donation-page .pd-btn{font-size:.95rem;min-height:50px;padding:10px 22px;}
| |
| .positive-donation-page .pd-image-slide{height:260px;}
| |
| .positive-donation-page .pd-article-image{height:260px;}
| |
| }
| |
| @media (min-width:1050px){
| |
| .positive-donation-page{font-size:19px;}
| |
| .positive-donation-page .pd-title h2{font-size:2.15rem;}
| |
| .pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:520px;}
| |
| .pd-hero-slider .pd-hero-content{padding:70px 85px;}
| |
| .positive-donation-page .pd-hero h1{font-size:3.05rem;}
| |
| .positive-donation-page .pd-hero p{font-size:1.12rem;}
| |
| .positive-donation-page .pd-image-slide{height:290px;}
| |
| .positive-donation-page .pd-article-image{height:275px;}
| |
| .pd-hero-arrow{width:54px;height:54px;}
| |
| }
| |
| @media (max-width:480px){
| |
| .pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:430px;}
| |
| .pd-hero-slider .pd-hero-content{padding:28px 52px 38px 52px;}
| |
| .positive-donation-page .pd-hero h1{font-size:2rem;}
| |
| .positive-donation-page .pd-hero p{font-size:.98rem;line-height:2.05;}
| |
| .positive-donation-page .pd-hero-badge{font-size:.88rem;}
| |
| .positive-donation-page .pd-btn{font-size:.88rem;padding:9px 14px;}
| |
| .pd-hero-arrow{width:38px;height:38px;font-size:1.6rem;}
| |
| .pd-hero-prev{right:8px;} .pd-hero-next{left:8px;}
| |
| .positive-donation-page .pd-image-slide{height:240px;}
| |
| .positive-donation-page .pd-article-image{height:230px;}
| |
| }
| |
| @media (max-width:390px){
| |
| .positive-donation-page{font-size:17px;}
| |
| .pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:400px;}
| |
| .pd-hero-slider .pd-hero-content{padding:24px 46px 34px;}
| |
| .positive-donation-page .pd-hero h1{font-size:1.78rem;}
| |
| .positive-donation-page .pd-hero p{font-size:.9rem;}
| |
| }
| |
| @media (prefers-reduced-motion:reduce){.pd-hero-slide{transition:none;}}
| |
| </style> | | </style> |
|
| |
|
| |
|
| |
| <!-- =======================================================
| |
| HEADER
| |
| ======================================================= -->
| |
|
| |
| <header class="pd-header">
| |
|
| |
| <a href="#" class="pd-brand">
| |
|
| |
| <span class="pd-logo">
| |
| +
| |
| </span>
| |
|
| |
| <span class="pd-brand-text">
| |
|
| |
| <strong>
| |
| گروه اهدای مثبت بخشنده
| |
| </strong>
| |
|
| |
| <small>
| |
| با مدیریت آقای بخشنده
| |
| </small>
| |
|
| |
| </span>
| |
|
| |
| </a>
| |
|
| |
|
| |
| <nav class="pd-menu">
| |
|
| |
| <a href="#donation">
| |
| خدمات اهدا
| |
| </a>
| |
|
| |
| <a href="#choice">
| |
| مسیر خدمات
| |
| </a>
| |
|
| |
| <a href="#about">
| |
| درباره ما
| |
| </a>
| |
|
| |
| <a href="#articles">
| |
| مجله
| |
| </a>
| |
|
| |
| <a href="#faq">
| |
| سوالات متداول
| |
| </a>
| |
|
| |
| </nav>
| |
|
| |
|
| |
| <a href="#contact"
| |
| class="pd-header-btn">
| |
| درخواست مشاوره
| |
| </a>
| |
|
| |
| </header>
| |
|
| |
|
| |
| <!-- =======================================================
| |
| HERO
| |
| ======================================================= -->
| |
|
| |
|
| <section class="pd-hero pd-hero-slider" aria-label="بنرهای گروه اهدای مثبت بخشنده"> | | <section class="pd-hero pd-hero-slider" aria-label="بنرهای گروه اهدای مثبت بخشنده"> |
| | <div class="pd-hero-slides"> |
|
| |
|
| <div class="pd-hero-slides">
| |
| <article class="pd-hero-slide is-active" data-slide="0"> | | <article class="pd-hero-slide is-active" data-slide="0"> |
| <img src="https://dl.faraghaib.ir/m/260009-01/baner-01-01.png" alt="گروه اهدای مثبت بخشنده - اهدای تخمک، اهدای جنین و رحم جایگزین" loading="eager"> | | <img |
| | src="https://dl.faraghaib.ir/m/260009-01/baner-01-01.png" |
| | alt="گروه اهدای مثبت بخشنده - اهدای تخمک، اهدای جنین و رحم جایگزین" |
| | loading="eager" |
| | > |
| <div class="pd-hero-overlay"></div> | | <div class="pd-hero-overlay"></div> |
| <div class="pd-hero-content"> | | <div class="pd-hero-content"> |
| <span class="pd-hero-badge">همراه شما در مسیر تشکیل خانواده</span> | | <span class="pd-hero-badge">همراه شما در مسیر تشکیل خانواده</span> |
| <h1><br></h1>
| |
| <p><br></p>
| |
| <div class="pd-buttons"> | | <div class="pd-buttons"> |
| <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات اهدا</a> | | <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات اهدا</a> |
| خط ۲٬۱۰۱: |
خط ۴۴۳: |
|
| |
|
| <article class="pd-hero-slide" data-slide="1"> | | <article class="pd-hero-slide" data-slide="1"> |
| <img src="https://dl.faraghaib.ir/m/260009-01/baner-01-02.png" alt="اهدای تخمک و راهنمایی تخصصی" loading="lazy"> | | <img |
| | src="https://dl.faraghaib.ir/m/260009-01/baner-01-02.png" |
| | alt="اهدای تخمک و راهنمایی تخصصی" |
| | loading="lazy" |
| | > |
| <div class="pd-hero-overlay"></div> | | <div class="pd-hero-overlay"></div> |
| <div class="pd-hero-content"> | | <div class="pd-hero-content"> |
| <span class="pd-hero-badge">آگاهی پیش از تصمیمگیری</span> | | <span class="pd-hero-badge">آگاهی پیش از تصمیمگیری</span> |
| <h1><br><br></h1>
| |
| <p><br></p>
| |
| <div class="pd-buttons"> | | <div class="pd-buttons"> |
| <a href="#egg" class="pd-btn pd-btn-main">آشنایی با اهدای تخمک</a> | | <a href="#egg" class="pd-btn pd-btn-main">آشنایی با اهدای تخمک</a> |
| خط ۲٬۱۱۵: |
خط ۴۵۹: |
|
| |
|
| <article class="pd-hero-slide" data-slide="2"> | | <article class="pd-hero-slide" data-slide="2"> |
| <img src="https://dl.faraghaib.ir/m/260009-01/baner-01-03.png" alt="اهدای جنین و رحم جایگزین" loading="lazy"> | | <img |
| | src="https://dl.faraghaib.ir/m/260009-01/baner-01-03.png" |
| | alt="اهدای جنین و رحم جایگزین" |
| | loading="lazy" |
| | > |
| <div class="pd-hero-overlay"></div> | | <div class="pd-hero-overlay"></div> |
| <div class="pd-hero-content"> | | <div class="pd-hero-content"> |
| <span class="pd-hero-badge">مسیر روشنتر برای خانواده</span> | | <span class="pd-hero-badge">مسیر روشنتر برای خانواده</span> |
| <h1><br></h1>
| |
| <p><br></p>
| |
| <div class="pd-buttons"> | | <div class="pd-buttons"> |
| <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات</a> | | <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات</a> |
| خط ۲٬۱۲۷: |
خط ۴۷۳: |
| </div> | | </div> |
| </article> | | </article> |
| | |
| </div> | | </div> |
|
| |
|
| خط ۲٬۱۳۹: |
خط ۴۸۶: |
| </section> | | </section> |
|
| |
|
| | <script> |
| | (function () { |
| | const root = document.querySelector('.positive-donation-page'); |
| | if (!root) return; |
|
| |
|
| <!-- =======================================================
| | const slides = [...root.querySelectorAll('.pd-hero-slide')]; |
| QUICK SERVICES
| | const dots = [...root.querySelectorAll('.pd-hero-dots button')]; |
| ======================================================= --> | | const prev = root.querySelector('.pd-hero-prev'); |
| | const next = root.querySelector('.pd-hero-next'); |
|
| |
|
| <section class="pd-section">
| | if (!slides.length) return; |
|
| |
|
| <div class="pd-container">
| | const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; |
| | let index = 0; |
| | let timer = null; |
|
| |
|
| <div class="pd-quick">
| | function show(i) { |
| | index = (i + slides.length) % slides.length; |
|
| |
|
| <a href="#egg"
| | slides.forEach((s, n) => s.classList.toggle('is-active', n === index)); |
| class="pd-quick-card">
| | dots.forEach((d, n) => d.classList.toggle('is-active', n === index)); |
| | } |
|
| |
|
| <span class="pd-quick-icon">
| | function start() { |
| ♡
| | clearInterval(timer); |
| </span>
| | if (reduceMotion) return; |
| | timer = setInterval(() => show(index + 1), 5500); |
| | } |
|
| |
|
| <strong>
| | function restart() { |
| اهدای تخمک
| | clearInterval(timer); |
| </strong>
| | start(); |
| | | } |
| <small>
| |
| شرایط و مراحل
| |
| </small>
| |
| | |
| </a>
| |
| | |
| | |
| <a href="#embryo"
| |
| class="pd-quick-card">
| |
| | |
| <span class="pd-quick-icon">
| |
| ✦
| |
| </span>
| |
| | |
| <strong>
| |
| اهدای جنین
| |
| </strong>
| |
| | |
| <small>
| |
| راهنمای دریافت
| |
| </small>
| |
| | |
| </a>
| |
| | |
| | |
| <a href="#surrogacy"
| |
| class="pd-quick-card">
| |
| | |
| <span class="pd-quick-icon">
| |
| ♧
| |
| </span>
| |
| | |
| <strong>
| |
| رحم جایگزین
| |
| </strong>
| |
| | |
| <small>
| |
| آشنایی با مسیر
| |
| </small>
| |
| | |
| </a>
| |
| | |
| | |
| <a href="#contact"
| |
| class="pd-quick-card">
| |
| | |
| <span class="pd-quick-icon">
| |
| ☎
| |
| </span>
| |
| | |
| <strong>
| |
| مشاوره
| |
| </strong>
| |
| | |
| <small>
| |
| شروع گفتوگو
| |
| </small>
| |
| | |
| </a>
| |
| | |
| </div>
| |
| | |
| </div> | |
| | |
| </section>
| |
| | |
| | |
| <!-- =======================================================
| |
| START
| |
| ======================================================= -->
| |
| | |
| <section class="pd-section">
| |
| | |
| <div class="pd-container"> | |
| | |
| <div class="pd-start">
| |
| | |
| <h2>
| |
| از کدام مسیر میخواهید شروع کنید؟
| |
| </h2>
| |
| | |
| <p>
| |
| مسیر مناسب خود را انتخاب کنید تا اطلاعات
| |
| موردنیاز را سادهتر پیدا کنید.
| |
| </p>
| |
| | |
| <div class="pd-start-options">
| |
| | |
| <a href="#choice"
| |
| class="pd-start-option">
| |
| من گیرنده هستم
| |
| </a>
| |
| | |
| <a href="#choice"
| |
| class="pd-start-option">
| |
| من اهداکننده هستم
| |
| </a>
| |
| | |
| <a href="#articles"
| |
| class="pd-start-option">
| |
| میخواهم بیشتر بدانم
| |
| </a>
| |
| | |
| <a href="#contact"
| |
| class="pd-start-option">
| |
| مشاوره میخواهم
| |
| </a>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </section>
| |
| | |
| | |
| <!-- =======================================================
| |
| DONATION SERVICES
| |
| ======================================================= -->
| |
| | |
| <section class="pd-section"
| |
| id="donation">
| |
| | |
| <div class="pd-container">
| |
| | |
| <div class="pd-donation">
| |
| | |
| <div class="pd-title">
| |
| | |
| <span>
| |
| خدمات اهدای مثبت
| |
| </span>
| |
| | |
| <h2>
| |
| خدمات اهدا
| |
| </h2>
| |
| | |
| <p>
| |
| اطلاعات و راهنمایی برای اهدای تخمک،
| |
| اهدای جنین و رحم جایگزین
| |
| </p>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-donation-grid">
| |
| | |
| | |
| <article class="pd-donation-card"
| |
| id="egg">
| |
| | |
| <div class="pd-donation-image">
| |
| | |
| <img
| |
| src="https://dl.faraghaib.ir/m/260009-01/260009-01-15.jpg"
| |
| alt="اهدای تخمک"
| |
| loading="lazy"
| |
| >
| |
| | |
| </div>
| |
| | |
| <div class="pd-donation-content">
| |
| | |
| <div class="pd-donation-icon">
| |
| ♡
| |
| </div>
| |
| | |
| <h3>
| |
| اهدای تخمک
| |
| </h3>
| |
| | |
| <p>
| |
| آشنایی با شرایط اهدای تخمک،
| |
| مراحل دریافت و نکات مهم پیش از تصمیمگیری.
| |
| </p>
| |
| | |
| <div class="pd-donation-actions">
| |
| | |
| <a href="#">
| |
| من گیرنده هستم
| |
| </a>
| |
| | |
| <a href="#">
| |
| من اهداکننده هستم
| |
| </a>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </article>
| |
| | |
| | |
| <article class="pd-donation-card"
| |
| id="embryo">
| |
| | |
| <div class="pd-donation-image">
| |
| | |
| <img
| |
| src="https://dl.faraghaib.ir/m/260009-01/260009-01-36.png"
| |
| alt="اهدای جنین"
| |
| loading="lazy"
| |
| >
| |
| | |
| </div>
| |
| | |
| <div class="pd-donation-content">
| |
| | |
| <div class="pd-donation-icon">
| |
| ✦
| |
| </div>
| |
| | |
| <h3>
| |
| اهدای جنین
| |
| </h3>
| |
| | |
| <p>
| |
| آشنایی با مفهوم اهدای جنین،
| |
| شرایط دریافت و مراحل این مسیر.
| |
| </p>
| |
| | |
| <div class="pd-donation-actions">
| |
| | |
| <a href="#">
| |
| شرایط دریافت
| |
| </a>
| |
| | |
| <a href="#">
| |
| مشاوره
| |
| </a>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </article>
| |
| | |
| | |
| <article class="pd-donation-card"
| |
| id="surrogacy">
| |
| | |
| <div class="pd-donation-image">
| |
| | |
| <img
| |
| src="https://dl.faraghaib.ir/m/260009-01/260009-01-94.jpg"
| |
| alt="رحم جایگزین"
| |
| loading="lazy"
| |
| >
| |
| | |
| </div>
| |
| | |
| <div class="pd-donation-content">
| |
| | |
| <div class="pd-donation-icon">
| |
| ♧
| |
| </div>
| |
| | |
| <h3>
| |
| رحم جایگزین
| |
| </h3>
| |
| | |
| <p>
| |
| آشنایی با مفهوم رحم جایگزین،
| |
| شرایط و مراحل این مسیر.
| |
| </p>
| |
| | |
| <div class="pd-donation-actions">
| |
| | |
| <a href="#">
| |
| آشنایی بیشتر
| |
| </a>
| |
| | |
| <a href="#">
| |
| مشاوره
| |
| </a>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </article>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </section>
| |
| | |
| | |
| <!-- =======================================================
| |
| RECEIVER / DONOR
| |
| ======================================================= -->
| |
| | |
| <section class="pd-section"
| |
| id="choice">
| |
| | |
| <div class="pd-container">
| |
| | |
| <div class="pd-title">
| |
| | |
| <span>
| |
| انتخاب مسیر
| |
| </span>
| |
| | |
| <h2>
| |
| شما در کدام گروه قرار میگیرید؟
| |
| </h2>
| |
| | |
| <p>
| |
| برای دریافت اطلاعات متناسب با شرایط خود،
| |
| یکی از مسیرهای زیر را انتخاب کنید.
| |
| </p>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-choice">
| |
| | |
| <div class="pd-choice-card">
| |
| | |
| <h3>
| |
| من گیرنده هستم
| |
| </h3>
| |
| | |
| <p>
| |
| برای آشنایی با خدمات و مسیر دریافت
| |
| خدمات اهدا.
| |
| </p>
| |
| | |
| <a href="#">
| |
| مشاهده راهنمای گیرندگان
| |
| </a>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-choice-card">
| |
| | |
| <h3>
| |
| من اهداکننده هستم
| |
| </h3>
| |
| | |
| <p>
| |
| برای آشنایی با شرایط و مراحل
| |
| اهدای تخمک، جنین یا سایر خدمات.
| |
| </p>
| |
| | |
| <a href="#">
| |
| مشاهده راهنمای اهداکنندگان
| |
| </a>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </section>
| |
| | |
| | |
| <!-- =======================================================
| |
| همراهی و آگاهی
| |
| MOBILE VERTICAL
| |
| ======================================================= -->
| |
| | |
| <section class="pd-section">
| |
| | |
| <div class="pd-container">
| |
| | |
| <div class="pd-title">
| |
| | |
| <span>
| |
| همراهی و آگاهی
| |
| </span>
| |
| | |
| <h2>
| |
| مسیر آگاهانه، تصمیم مطمئنتر
| |
| </h2>
| |
| | |
| <p>
| |
| اطلاعات درست و همراهی مناسب میتواند
| |
| مسیر تصمیمگیری را روشنتر کند.
| |
| </p>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-image-slider">
| |
| | |
| <a href="#" class="pd-image-slide">
| |
| | |
| <img
| |
| src="https://dl.faraghaib.ir/m/260009-01/260009-01-13.jpg"
| |
| alt="مشاوره اهدای تخمک"
| |
| loading="lazy"
| |
| >
| |
| | |
| <span>
| |
| مشاوره اهدای تخمک
| |
| </span>
| |
| | |
| </a>
| |
| | |
| | |
| <a href="#" class="pd-image-slide">
| |
| | |
| <img
| |
| src="https://dl.faraghaib.ir/m/260009-01/260009-01-11.jpg"
| |
| alt="اهدای جنین"
| |
| loading="lazy"
| |
| >
| |
| | |
| <span>
| |
| آشنایی با اهدای جنین
| |
| </span>
| |
| | |
| </a>
| |
| | |
| | |
| <a href="#" class="pd-image-slide">
| |
| | |
| <img
| |
| src="https://dl.faraghaib.ir/m/260009-01/260009-01-12.jpg"
| |
| alt="رحم جایگزین"
| |
| loading="lazy"
| |
| >
| |
| | |
| <span>
| |
| رحم جایگزین
| |
| </span>
| |
| | |
| </a>
| |
| | |
| | |
| <a href="#" class="pd-image-slide">
| |
| | |
| <img
| |
| src="https://dl.faraghaib.ir/m/260009-01/260009-01-100.jpg"
| |
| alt="گروه اهدای مثبت بخشنده"
| |
| loading="lazy"
| |
| >
| |
| | |
| <span>
| |
| همراهی گروه اهدای مثبت
| |
| </span>
| |
| | |
| </a>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </section>
| |
| | |
| | |
| <!-- =======================================================
| |
| BENEFITS
| |
| ======================================================= -->
| |
| | |
| <section class="pd-section"
| |
| id="about">
| |
| | |
| <div class="pd-container">
| |
| | |
| <div class="pd-title">
| |
| | |
| <span>
| |
| چرا اهدای مثبت؟
| |
| </span>
| |
| | |
| <h2>
| |
| همراهی با احترام و حفظ حریم خصوصی
| |
| </h2>
| |
| | |
| <p>
| |
| هدف گروه اهدای مثبت بخشنده،
| |
| ایجاد مسیری روشن و آگاهانه برای مراجعین است.
| |
| </p>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-benefits">
| |
| | |
| <div class="pd-benefit">
| |
| | |
| <div class="pd-benefit-icon">
| |
| ✓
| |
| </div>
| |
| | |
| <strong>
| |
| مشاوره
| |
| </strong>
| |
| | |
| <small>
| |
| راهنمایی پیش از تصمیم
| |
| </small>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-benefit">
| |
| | |
| <div class="pd-benefit-icon">
| |
| 🔒
| |
| </div>
| |
| | |
| <strong>
| |
| محرمانگی
| |
| </strong>
| |
| | |
| <small>
| |
| احترام به حریم خصوصی
| |
| </small>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-benefit">
| |
| | |
| <div class="pd-benefit-icon">
| |
| ♡
| |
| </div>
| |
| | |
| <strong>
| |
| همراهی
| |
| </strong>
| |
| | |
| <small>
| |
| در طول مسیر
| |
| </small>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-benefit">
| |
| | |
| <div class="pd-benefit-icon">
| |
| ✦
| |
| </div>
| |
| | |
| <strong>
| |
| آگاهی
| |
| </strong>
| |
| | |
| <small>
| |
| اطلاعات قابل فهم
| |
| </small>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-benefit">
| |
| | |
| <div class="pd-benefit-icon">
| |
| ☎
| |
| </div>
| |
| | |
| <strong>
| |
| پاسخگویی
| |
| </strong>
| |
| | |
| <small>
| |
| ارتباط و راهنمایی
| |
| </small>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-benefit">
| |
| | |
| <div class="pd-benefit-icon">
| |
| +
| |
| </div>
| |
| | |
| <strong>
| |
| مسیر روشن
| |
| </strong>
| |
| | |
| <small>
| |
| مرحله به مرحله
| |
| </small>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </section>
| |
| | |
| | |
| <!-- =======================================================
| |
| STEPS
| |
| ======================================================= -->
| |
| | |
| <section class="pd-section">
| |
| | |
| <div class="pd-container">
| |
| | |
| <div class="pd-title">
| |
| | |
| <span>
| |
| چگونه شروع کنیم؟
| |
| </span>
| |
| | |
| <h2>
| |
| مسیر دریافت خدمات
| |
| </h2>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-steps">
| |
| | |
| <div class="pd-step">
| |
| | |
| <div class="pd-step-number">
| |
| ۱
| |
| </div>
| |
| | |
| <div>
| |
| | |
| <strong>
| |
| مشاوره اولیه
| |
| </strong>
| |
| | |
| <small>
| |
| بررسی نیاز و شرایط
| |
| </small>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-step">
| |
| | |
| <div class="pd-step-number">
| |
| ۲
| |
| </div>
| |
| | |
| <div>
| |
| | |
| <strong>
| |
| بررسی شرایط
| |
| </strong>
| |
| | |
| <small>
| |
| شناخت مسیر مناسب
| |
| </small>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-step">
| |
| | |
| <div class="pd-step-number">
| |
| ۳
| |
| </div>
| |
| | |
| <div>
| |
| | |
| <strong>
| |
| انتخاب مسیر
| |
| </strong>
| |
| | |
| <small>
| |
| تصمیمگیری آگاهانه
| |
| </small>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| | |
| <div class="pd-step">
| |
| | |
| <div class="pd-step-number">
| |
| ۴
| |
| </div>
| |
| | |
| <div>
| |
| | |
| <strong>
| |
| ادامه مسیر
| |
| </strong>
| |
| | |
| <small>
| |
| همراهی و راهنمایی
| |
| </small>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </section>
| |
| | |
| | |
| <!-- =======================================================
| |
| مجله اهدای مثبت
| |
| MOBILE VERTICAL
| |
| ======================================================= -->
| |
| | |
| <section class="pd-section"
| |
| id="articles">
| |
| | |
| <div class="pd-container">
| |
| | |
| <div class="pd-title">
| |
| | |
| <span>
| |
| مجله اهدای مثبت
| |
| </span>
| |
| | |
| <h2>
| |
| دانستنیهای باروری و اهدا
| |
| </h2>
| |
| | |
| <p>
| |
| محتوای آموزشی کوتاه و کاربردی برای تصمیمگیری آگاهانه.
| |
| </p>
| |
| | |
| </div>
| |
|
| |
|
| | prev && prev.addEventListener('click', () => { |
| | show(index - 1); |
| | restart(); |
| | }); |
|
| |
|
| <div class="pd-articles">
| | next && next.addEventListener('click', () => { |
| | show(index + 1); |
| | restart(); |
| | }); |
|
| |
|
| | dots.forEach((d) => { |
| | d.addEventListener('click', () => { |
| | show(Number(d.dataset.go)); |
| | restart(); |
| | }); |
| | }); |
|
| |
|
| <article class="pd-article">
| | root.addEventListener('mouseenter', () => clearInterval(timer)); |
| | root.addEventListener('mouseleave', start); |
|
| |
|
| <div class="pd-article-image">
| |
|
| |
| <img
| |
| src="https://dl.faraghaib.ir/m/260009-01/260009-01-18.jpg"
| |
| alt="سن مناسب برای اهدای تخمک"
| |
| loading="lazy"
| |
| >
| |
|
| |
| </div>
| |
|
| |
| <div class="pd-article-body">
| |
|
| |
| <small>
| |
| اهدای تخمک
| |
| </small>
| |
|
| |
| <h3>
| |
| سن مناسب برای اهدای تخمک
| |
| </h3>
| |
|
| |
| <p>
| |
| آشنایی با شرایط سنی و نکات مهم پیش از اهدا.
| |
| </p>
| |
|
| |
| </div>
| |
|
| |
| </article>
| |
|
| |
|
| |
| <article class="pd-article">
| |
|
| |
| <div class="pd-article-image">
| |
|
| |
| <img
| |
| src="IMAGE-ARTICLE-2"
| |
| alt="اهدای جنین چیست"
| |
| loading="lazy"
| |
| >
| |
|
| |
| </div>
| |
|
| |
| <div class="pd-article-body">
| |
|
| |
| <small>
| |
| اهدای جنین
| |
| </small>
| |
|
| |
| <h3>
| |
| اهدای جنین چیست؟
| |
| </h3>
| |
|
| |
| <p>
| |
| آشنایی با مفهوم اهدای جنین و مسیر دریافت.
| |
| </p>
| |
|
| |
| </div>
| |
|
| |
| </article>
| |
|
| |
|
| |
| <article class="pd-article">
| |
|
| |
| <div class="pd-article-image">
| |
|
| |
| <img
| |
| src="IMAGE-ARTICLE-3"
| |
| alt="رحم جایگزین چیست"
| |
| loading="lazy"
| |
| >
| |
|
| |
| </div>
| |
|
| |
| <div class="pd-article-body">
| |
|
| |
| <small>
| |
| رحم جایگزین
| |
| </small>
| |
|
| |
| <h3>
| |
| رحم جایگزین چیست؟
| |
| </h3>
| |
|
| |
| <p>
| |
| آشنایی اولیه با مفهوم و مراحل رحم جایگزین.
| |
| </p>
| |
|
| |
| </div>
| |
|
| |
| </article>
| |
|
| |
| </div>
| |
|
| |
| </div>
| |
|
| |
| </section>
| |
|
| |
|
| |
| <!-- =======================================================
| |
| FAQ
| |
| ======================================================= -->
| |
|
| |
| <section class="pd-section"
| |
| id="faq">
| |
|
| |
| <div class="pd-container">
| |
|
| |
| <div class="pd-title">
| |
|
| |
| <span>
| |
| سوالات متداول
| |
| </span>
| |
|
| |
| <h2>
| |
| پاسخ به سوالات شما
| |
| </h2>
| |
|
| |
| </div>
| |
|
| |
|
| |
| <div class="pd-faq">
| |
|
| |
| <details>
| |
|
| |
| <summary>
| |
| اهدای تخمک چیست؟
| |
| </summary>
| |
|
| |
| <p>
| |
| اهدای تخمک فرایندی است که در آن تخمک
| |
| فرد اهداکننده برای استفاده در درمان ناباروری
| |
| در اختیار گیرنده قرار میگیرد.
| |
| </p>
| |
|
| |
| </details>
| |
|
| |
|
| |
| <details>
| |
|
| |
| <summary>
| |
| شرایط اهدای تخمک چیست؟
| |
| </summary>
| |
|
| |
| <p>
| |
| شرایط اهدا باید بر اساس معیارهای پزشکی،
| |
| قانونی و ارزیابیهای تخصصی بررسی شود.
| |
| </p>
| |
|
| |
| </details>
| |
|
| |
|
| |
| <details>
| |
|
| |
| <summary>
| |
| اهدای جنین چگونه انجام میشود؟
| |
| </summary>
| |
|
| |
| <p>
| |
| شرایط و مراحل دریافت یا اهدای جنین
| |
| نیازمند بررسی تخصصی و طی مراحل قانونی مربوط است.
| |
| </p>
| |
|
| |
| </details>
| |
|
| |
|
| |
| <details>
| |
|
| |
| <summary>
| |
| رحم جایگزین چیست؟
| |
| </summary>
| |
|
| |
| <p>
| |
| رحم جایگزین روشی است که در آن بارداری
| |
| توسط فرد دیگری برای متقاضیان انجام میشود
| |
| و جزئیات آن باید به صورت تخصصی بررسی شود.
| |
| </p>
| |
|
| |
| </details>
| |
|
| |
|
| |
| <details>
| |
|
| |
| <summary>
| |
| چگونه برای مشاوره اقدام کنم؟
| |
| </summary>
| |
|
| |
| <p>
| |
| میتوانید از طریق اطلاعات تماس مجموعه
| |
| برای دریافت راهنمایی اولیه اقدام کنید.
| |
| </p>
| |
|
| |
| </details>
| |
|
| |
| </div>
| |
|
| |
| </div>
| |
|
| |
| </section>
| |
|
| |
|
| |
| <!-- =======================================================
| |
| CTA
| |
| ======================================================= -->
| |
|
| |
| <section class="pd-section"
| |
| id="contact">
| |
|
| |
| <div class="pd-container">
| |
|
| |
| <div class="pd-cta">
| |
|
| |
| <h2>
| |
| برای شروع مسیر خود تنها نیستید
| |
| </h2>
| |
|
| |
| <p>
| |
| برای آشنایی بیشتر با اهدای تخمک،
| |
| اهدای جنین و رحم جایگزین با ما در ارتباط باشید.
| |
| </p>
| |
|
| |
| <a href="#">
| |
| درخواست مشاوره
| |
| </a>
| |
|
| |
| </div>
| |
|
| |
| </div>
| |
|
| |
| </section>
| |
|
| |
|
| |
| <!-- =======================================================
| |
| FOOTER
| |
| ======================================================= -->
| |
|
| |
| <footer class="pd-footer">
| |
|
| |
| <div class="pd-footer-grid">
| |
|
| |
| <div>
| |
|
| |
| <h3>
| |
| گروه اهدای مثبت بخشنده
| |
| </h3>
| |
|
| |
| <p>
| |
| گروه اهدای مثبت بخشنده با مدیریت آقای بخشنده،
| |
| در زمینه راهنمایی و ارائه اطلاعات مرتبط با
| |
| اهدای تخمک، اهدای جنین و رحم جایگزین فعالیت میکند.
| |
| </p>
| |
|
| |
| </div>
| |
|
| |
|
| |
| <div>
| |
|
| |
| <h3>
| |
| خدمات
| |
| </h3>
| |
|
| |
| <ul>
| |
|
| |
| <li>
| |
| <a href="#egg">
| |
| اهدای تخمک
| |
| </a>
| |
| </li>
| |
|
| |
| <li>
| |
| <a href="#embryo">
| |
| اهدای جنین
| |
| </a>
| |
| </li>
| |
|
| |
| <li>
| |
| <a href="#surrogacy">
| |
| رحم جایگزین
| |
| </a>
| |
| </li>
| |
|
| |
| <li>
| |
| <a href="#contact">
| |
| مشاوره
| |
| </a>
| |
| </li>
| |
|
| |
| </ul>
| |
|
| |
| </div>
| |
|
| |
|
| |
| <div>
| |
|
| |
| <h3>
| |
| ارتباط با ما
| |
| </h3>
| |
|
| |
| <ul>
| |
|
| |
| <li>
| |
| تلفن: شماره تماس مجموعه
| |
| </li>
| |
|
| |
| <li>
| |
| ایمیل: ایمیل مجموعه
| |
| </li>
| |
|
| |
| <li>
| |
| آدرس: آدرس مجموعه
| |
| </li>
| |
|
| |
| </ul>
| |
|
| |
| </div>
| |
|
| |
| </div>
| |
|
| |
|
| |
| <div class="pd-footer-bottom">
| |
|
| |
| © تمامی حقوق برای گروه اهدای مثبت بخشنده محفوظ است.
| |
|
| |
| </div>
| |
|
| |
| </footer>
| |
|
| |
|
| |
| <!-- =======================================================
| |
| MOBILE BOTTOM NAV
| |
| ======================================================= -->
| |
|
| |
| <nav class="pd-mobile-nav"
| |
| aria-label="منوی اصلی موبایل">
| |
|
| |
| <a href="#donation"
| |
| class="active">
| |
|
| |
| <span>
| |
| ♡
| |
| </span>
| |
|
| |
| خدمات اهدا
| |
|
| |
| </a>
| |
|
| |
|
| |
| <a href="#choice">
| |
|
| |
| <span>
| |
| ◉
| |
| </span>
| |
|
| |
| مسیر خدمات
| |
|
| |
| </a>
| |
|
| |
|
| |
| <a href="#about">
| |
|
| |
| <span>
| |
| ✦
| |
| </span>
| |
|
| |
| درباره ما
| |
|
| |
| </a>
| |
|
| |
|
| |
| <a href="#articles">
| |
|
| |
| <span>
| |
| ▣
| |
| </span>
| |
|
| |
| مجله
| |
|
| |
| </a>
| |
|
| |
|
| |
| <a href="#contact">
| |
|
| |
| <span>
| |
| ☎
| |
| </span>
| |
|
| |
| تماس
| |
|
| |
| </a>
| |
|
| |
| </nav>
| |
|
| |
|
| |
|
| |
| <script>
| |
| (function(){
| |
| const root=document.querySelector('.positive-donation-page');
| |
| if(!root) return;
| |
| const slides=[...root.querySelectorAll('.pd-hero-slide')];
| |
| const dots=[...root.querySelectorAll('.pd-hero-dots button')];
| |
| const prev=root.querySelector('.pd-hero-prev');
| |
| const next=root.querySelector('.pd-hero-next');
| |
| if(!slides.length) return;
| |
| let index=0,timer;
| |
| function show(i){
| |
| index=(i+slides.length)%slides.length;
| |
| slides.forEach((s,n)=>s.classList.toggle('is-active',n===index));
| |
| dots.forEach((d,n)=>d.classList.toggle('is-active',n===index));
| |
| }
| |
| function start(){timer=setInterval(()=>show(index+1),5500);}
| |
| function restart(){clearInterval(timer);start();}
| |
| prev&&prev.addEventListener('click',()=>{show(index-1);restart();});
| |
| next&&next.addEventListener('click',()=>{show(index+1);restart();});
| |
| dots.forEach(d=>d.addEventListener('click',()=>{show(Number(d.dataset.go));restart();}));
| |
| root.addEventListener('mouseenter',()=>clearInterval(timer));
| |
| root.addEventListener('mouseleave',start);
| |
| start(); | | start(); |
| })(); | | })(); |
| </script> | | </script> |
| | |
| </div> | | </div> |
|
| |
| </html> | | </html> |
