/* =========================
Font: Persian Google Font
========================= */
/*
اگر میخواهید حتماً از Google Fonts استفاده کنید،
این خط را در فایل HTML بگذارید:
اگر نمیخواهید HTML را تغییر دهید، میتوانید @import زیر را فعال کنید:
*/
/* @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap'); */
/* =========================
Root Variables
Light Luxury Theme
========================= */
:root {
--bg-olive: #f6f1e8;
--bg-olive-soft: #fffaf2;
--accent-black: #2b241c;
--gold: #b9924b;
--gold-deep: #8f6b2f;
--gold-light: #e6d2a3;
--gold-soft: rgba(185, 146, 75, 0.16);
--text-light: #2b241c;
--text-muted: #74695b;
--text-dim: #9a8f80;
--surface-glass: rgba(255, 255, 255, 0.42);
--surface-glass-strong: rgba(255, 255, 255, 0.56);
--border-gold: rgba(185, 146, 75, 0.26);
--border-soft: rgba(255, 255, 255, 0.34);
--shadow-soft: 0 10px 30px rgba(89, 67, 35, 0.10);
--shadow-luxury: 0 18px 42px rgba(89, 67, 35, 0.16);
--radius-lg: 22px;
--radius-md: 14px;
--page-max: 450px;
}
/* =========================
Base Reset
========================= */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
direction: rtl;
scroll-behavior: smooth;
}
body {
font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
color: var(--text-light);
line-height: 1.8;
padding-top: 50px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
position: relative;
background-color: #f6f1e8;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
background:
/* این اعداد را اگر کمتر کنید، عکس شفافتر میشود */
linear-gradient(rgba(255, 250, 242, 0.01), rgba(246, 241, 232, 0.01)),
url("forest-bg.jpg") center center / cover no-repeat;
filter: blur(0px) saturate(1.9);
transform: scale(1.06);
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at top, rgba(230, 210, 163, 0.22), transparent 35%),
rgba(255, 250, 242, 0.18);
pointer-events: none;
}
p.public {
color: #000 !important;
text-align: center !important;
font-weight: bold !important;
}
img {
max-width: 100%;
}
button,
input,
textarea,
select {
font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
}
/* =========================
Mobile Frame on Desktop
========================= */
@media (min-width: 768px) {
body {
max-width: var(--page-max);
margin: 0 auto;
border-left: 1px solid rgba(185, 146, 75, 0.24);
border-right: 1px solid rgba(185, 146, 75, 0.24);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.55),
0 24px 70px rgba(62, 47, 29, 0.18);
position: relative;
}
}
/* =========================
Fixed Header
========================= */
.fixed-header {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background: rgba(255, 250, 242, 0.48);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
border-bottom: 1px solid rgba(255, 255, 255, 0.34);
box-shadow: 0 8px 24px rgba(96, 72, 38, 0.10);
}
@media (min-width: 768px) {
.fixed-header {
max-width: var(--page-max);
}
}
.header-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
.brand-container {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
max-width: 100%;
padding: 0 12px;
}
.brand {
font-size: 1.32rem;
font-weight: 900;
letter-spacing: 4px;
color: var(--gold-deep);
line-height: 1;
text-shadow: 0 1px 0 rgba(255,255,255,0.85);
}
.brand-tagline {
font-size: 1rem;
color: #6c5a3a;
font-weight: 500;
letter-spacing: 0;
border-right: 1px solid rgba(185, 146, 75, 0.38);
padding-right: 8px;
line-height: 1.4;
}
/* =========================
Hero
========================= */
.villa-hero {
margin-top: 0;
}
.hero-image-container {
position: relative;
width: 100%;
height: 45vh;
min-height: 310px;
max-height: 460px;
overflow: hidden;
background: #eee3d3;
}
.hero-image-container::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,250,242,0.16)),
linear-gradient(to top, rgba(246,241,232,0.72), transparent 48%);
pointer-events: none;
}
.hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* اگر تصویر هدر خیلی کمکنتراست بود، این را فعال کنید */
/*
.hero-image-container img {
filter: saturate(1.04) contrast(1.03) brightness(1.03);
}
*/
.price-tag {
z-index: 2;
color: gold;
padding: 7px 16px;
border-radius: 9px;
font-weight: 900;
font-size: 1.86rem;
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow:
0 10px 24px rgba(80, 58, 25, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* =========================
Villa Info
========================= */
.villa-info {
padding: 21px 15px 5px;
margin: 34px 12px 8px;
text-align: center;
background: rgba(255, 255, 255, 0.34);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 22px;
box-shadow: 0 16px 34px rgba(96, 72, 38, 0.10);
}
.villa-info h1 {
font-size: 1.55rem;
line-height: 1.6;
margin-bottom: 10px;
color: #2b241c;
font-weight: 900;
}
.gold {
color: var(--gold-deep);
}
.quick-specs {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 9px 12px;
font-size: 1.1rem;
color: var(--text-muted);
margin-top: 8px;
}
.quick-specs span {
display: inline-flex;
color: #000;
align-items: center;
justify-content: center;
}
.quick-specs .break-line {
flex-basis: 100%;
}
/* =========================
Minimal Gold Icon
========================= */
.icon {
display: inline-block;
width: 11px;
height: 11px;
background: linear-gradient(135deg, #d8bd7b, #9b7434);
border-radius: 50%;
margin-left: 6px;
box-shadow: 0 0 8px rgba(185, 146, 75, 0.45);
flex: 0 0 auto;
}
/* =========================
Story Section
========================= */
.story-section {
padding: 38px 22px;
margin: 44px 12px 1px;
background: rgba(255, 255, 255, 0.30);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 22px;
box-shadow: 0 16px 34px rgba(96, 72, 38, 0.10);
}
.story-content {
text-align: center;
width: 100%;
max-width: 390px;
margin: 0 auto;
}
.story-content p {
font-size: 1.1rem;
font-weight: 500;
text-align: justify;
color: #554a3d;
line-height: 2.15;
margin-bottom: 16px;
}
.story-content p:last-child {
margin-bottom: 0;
}
.story-content span {
display: inline-flex;
color: #000;
align-items: center;
justify-content: center;
display: block;
font-size: 1rem;
font-weight: 500;
}
.story-content .break-line {
flex-basis: 100%;
}
/* =========================
Gallery
========================= */
.villa-gallery {
padding: 20px 0 12px;
background: rgba(255, 255, 255, 0.10);
}
.gallery-wrapper {
position: relative;
width: 100%;
margin: 10px 0 4px;
}
.scroll-container {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
padding: 0 16px 12px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scroll-container::-webkit-scrollbar {
display: none;
}
.scroll-item {
flex: 0 0 320px;
width: 320px;
scroll-snap-align: start;
}
.scroll-item img {
width: 100%;
aspect-ratio: 1068 / 1448;
object-fit: cover;
display: block;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.42);
background: rgba(255, 255, 255, 0.24);
box-shadow:
0 14px 34px rgba(96, 72, 38, 0.16),
0 0 0 3px rgba(255, 255, 255, 0.18);
}
.scroll-hint {
margin: 6px 0 0;
padding: 0 16px;
font-size: 0.82rem;
color: rgba(85, 74, 61, 0.72);
text-align: center;
}
@media (max-width: 370px) {
.scroll-item {
flex-basis: 290px;
width: 290px;
}
}
@media (min-width: 768px) {
.scroll-item {
flex-basis: 360px;
width: 360px;
}
.scroll-container {
padding-bottom: 14px;
}
.scroll-hint {
display: none;
}
}
/* =========================
Gallery Arrows
========================= */
.gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
background: rgba(255, 250, 242, 0.34);
color: #000;
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: 50%;
font-size: 20px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: all 0.2s ease;
user-select: none;
box-shadow: 0 8px 22px rgba(96, 72, 38, 0.14);
}
.gallery-arrow.prev {
left: 8px;
}
.gallery-arrow.next {
right: 8px;
}
.gallery-arrow:active {
background: rgba(231, 210, 157, 0.72);
transform: translateY(-50%) scale(0.92);
}
@media (min-width: 768px) {
.gallery-arrow {
width: 44px;
height: 44px;
font-size: 24px;
}
.gallery-arrow.prev {
left: 14px;
}
.gallery-arrow.next {
right: 14px;
}
.gallery-arrow:hover {
background: rgba(231, 210, 157, 0.7);
border-color: rgba(143, 107, 47, 0.62);
}
}
/* =========================
Lead Section / Form
========================= */
.lead-section {
padding: 44px 12px 44px;
background: transparent;
text-align: center;
width: 100%;
/* max-width: 390px; -- این خط را اگر میخواهید lead-section هم عرض form باشد، نگه دارید */
margin: 12px auto;
}
.glass-form {
width: 100%;
max-width: 390px;
margin: 10px auto; /* تغییر از margin: 10px 2px 8px; */
background: rgba(255, 255, 255, 0.32);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border: 1px solid rgba(255, 255, 255, 0.38);
padding: 34px 22px 26px; /* تغییر از padding: 34px 20px 26px; */
border-radius: 24px;
text-align: center;
box-shadow:
0 18px 42px rgba(96, 72, 38, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.56);
}
.glass-form h2 {
margin-bottom: 8px;
color: var(--gold-deep);
font-size: 1.33rem;
line-height: 1.7;
font-weight: 900;
text-align: center;
}
.glass-form p {
max-width: 310px;
margin: 0 auto 24px;
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.9;
text-align: center;
}
.glass-form form {
width: 100%;
max-width: 330px;
margin: 0 auto;
}
.glass-form input {
display: block;
width: 100%;
height: 54px;
padding: 0 15px;
margin: 0 0 13px;
border-radius: 13px;
border: 1px solid rgba(255, 255, 255, 0.42);
background: rgba(255, 255, 255, 0.44);
color: #2b241c;
font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
font-size: 1rem;
font-weight: 500;
outline: none;
text-align: right;
direction: rtl;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.72),
0 6px 16px rgba(96, 72, 38, 0.06);
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.glass-form input::placeholder {
color: rgba(85, 74, 61, 0.48);
}
.glass-form input:focus {
border-color: rgba(185, 146, 75, 0.50);
background: rgba(255, 255, 255, 0.62);
box-shadow:
0 0 0 4px rgba(185, 146, 75, 0.10),
0 8px 18px rgba(96, 72, 38, 0.08);
}
.submit-btn {
display: block;
width: 100%;
height: 56px;
padding: 0 16px;
background: linear-gradient(135deg, rgba(231,210,157,0.92), rgba(185,146,75,0.95), rgba(143,107,47,0.95));
color: #2b241c;
border: 1px solid rgba(255,255,255,0.34);
border-radius: 13px;
font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
font-weight: 900;
font-size: 1.05rem;
cursor: pointer;
box-shadow:
0 12px 26px rgba(143, 107, 47, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.48);
transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.submit-btn:active {
transform: translateY(1px) scale(0.99);
}
.submit-btn:hover {
filter: brightness(1.04);
box-shadow:
0 14px 30px rgba(143, 107, 47, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.58);
}
.confidential-note {
max-width: 320px;
margin: 15px auto 0 !important;
font-size: 0.72rem !important;
color: var(--text-dim) !important;
font-weight: 400;
line-height: 1.9;
text-align: center !important;
}
/* =========================
Form Message
========================= */
.form-message {
width: 100%;
max-width: 330px;
margin: 16px auto 0;
padding: 13px 16px;
border-radius: 14px;
font-size: 0.92rem;
line-height: 1.8;
text-align: center;
display: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(185, 146, 75, 0.25);
box-shadow: 0 8px 24px rgba(96, 72, 38, 0.12);
animation: fadeInMessage 0.35s ease;
}
.form-message.success {
background: rgba(185, 146, 75, 0.12);
color: #7b5a24;
border-color: rgba(185, 146, 75, 0.38);
}
.form-message.error {
background: rgba(180, 40, 40, 0.08);
color: #a13737;
border-color: rgba(180, 40, 40, 0.22);
}
@keyframes fadeInMessage {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================
Footer
========================= */
.simple-footer {
text-align: center;
padding: 20px 20px;
/* حذف گرادینت تیره و جایگزینی با شیشه */
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-top: 1px solid rgba(255, 255, 255, 0.6);
/* اضافه کردن سایه ملایم برای جداسازی */
box-shadow: 0 -4px 20px rgba(96, 72, 38, 0.05);
position: sticky; /* عنصر را استیکی میکند */
bottom: 0; /* در پایینترین نقطه viewport قرار میگیرد */
width: 100%; /* عرض کامل را میگیرد */
z-index: 100; /* اطمینان از اینکه روی محتوای دیگر قرار میگیرد */
/* -------------------------------- */
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.footer-content p {
font-size: 0.82rem;
/* رنگ متن را کمی تیرهتر کردیم تا روی شیشه شفاف، خوانا باشد */
color: #4a4135;
margin: 0;
line-height: 1.7;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}