/* =========================================================
NEGAREH PARSIAN CONTACT — V2
Full-page background + mobile email visibility
========================================================= *//* 1) FULL PAGE BACKGROUND
JS adds .np-contact-active to only on the contact page.
*/
body.np-contact-active,
body.np-contact-active #wrap_all,
body.np-contact-active #main {
background:
radial-gradient(circle at 8% 10%, rgba(146, 13, 18, .075), transparent 28rem),
radial-gradient(circle at 92% 45%, rgba(146, 13, 18, .045), transparent 34rem),
linear-gradient(180deg, #ffffff 0%, #fdf9f8 52%, #faf6f5 100%) !important;
background-attachment: fixed !important;
}/* Make Enfold page sections transparent so the same background continues
from header through content to footer. */
body.np-contact-active #header,
body.np-contact-active #header_main,
body.np-contact-active .header_bg,
body.np-contact-active .av_minimal_header .header_bg,
body.np-contact-active .main_color,
body.np-contact-active .alternate_color,
body.np-contact-active #footer,
body.np-contact-active #socket,
body.np-contact-active .footer_color,
body.np-contact-active .socket_color,
body.np-contact-active .container_wrap,
body.np-contact-active .avia-section {
background-color: transparent !important;
background-image: none !important;
}/* Optional ultra-subtle grid over the whole page */
body.np-contact-active #wrap_all {
position: relative;
}body.np-contact-active #wrap_all::before {
content: „“;
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .34;
background-image:
linear-gradient(rgba(101, 9, 13, .022) 1px, transparent 1px),
linear-gradient(90deg, rgba(101, 9, 13, .022) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 65%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 65%, transparent 100%);
}/* Keep page content above the decorative grid */
body.np-contact-active #header,
body.np-contact-active #main,
body.np-contact-active #footer,
body.np-contact-active #socket {
position: relative;
z-index: 1;
}/* =========================================================
CONTACT COMPONENT
========================================================= */.np-contact,
.np-contact * {
box-sizing: border-box;
}.np-contact {
–np-red: #920d12;
–np-red-deep: #65090d;
–np-red-bright: #b4131b;
–np-ink: #171313;
–np-muted: #71696a;
–np-line: rgba(101, 9, 13, .12);
–np-soft: #fbf8f7;
–np-white: #fff;
–np-wa: #25d366;
–np-wa-dark: #1dbb59;position: relative;
width: 100%;
padding: clamp(64px, 8vw, 112px) 0;
color: var(–np-ink);/* IMPORTANT: transparent so the page-wide background is visible */
background: transparent !important;
}.np-contact a {
color: inherit;
text-decoration: none;
}.np-contact__shell {
width: min(1180px, calc(100% – 40px));
margin-inline: auto;
}.np-contact__hero {
display: grid;
justify-items: center;
max-width: 860px;
margin: 0 auto clamp(42px, 6vw, 72px);
text-align: center;
}.np-contact__badge {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 34px;
padding: 0 13px;
margin-bottom: 22px;
border: 1px solid rgba(146,13,18,.12);
border-radius: 999px;
background: rgba(255,255,255,.72);
color: var(–np-red);
font-size: 11px;
font-weight: 750;
letter-spacing: .14em;
box-shadow: 0 8px 28px rgba(63,23,25,.04);
backdrop-filter: blur(12px);
}.np-contact__pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(–np-red);
box-shadow: 0 0 0 5px rgba(146,13,18,.08);
}.np-contact__title {
max-width: 820px;
margin: 0;
font-size: clamp(40px, 6.4vw, 82px);
font-weight: 650;
line-height: .98;
letter-spacing: -.055em;
text-wrap: balance;
}.np-contact__title span {
color: var(–np-red);
font-style: italic;
font-weight: 560;
}.np-contact__lead {
max-width: 620px;
margin: 24px auto 0;
color: var(–np-muted);
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.8;
text-wrap: balance;
}.np-contact__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}.np-panel {
–mx: 50%;
–my: 50%;
position: relative;
overflow: hidden;
min-width: 0;
padding: clamp(24px, 3.2vw, 34px);
border: 1px solid var(–np-line);
border-radius: 24px;
background:
radial-gradient(circle at var(–mx) var(–my), rgba(146,13,18,.065), transparent 16rem),
rgba(255,255,255,.88);
box-shadow: 0 18px 50px rgba(35,16,17,.045);
backdrop-filter: blur(14px);
transition:
transform .32s cubic-bezier(.2,.8,.2,1),
border-color .32s ease,
box-shadow .32s ease;
}.np-panel::after {
content: „“;
position: absolute;
top: 0;
left: clamp(24px, 3vw, 34px);
width: 56px;
height: 2px;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg, var(–np-red), #d79a9d);
}@media (hover:hover) {
.np-panel:hover {
transform: translateY(-5px);
border-color: rgba(146,13,18,.22);
box-shadow: 0 26px 68px rgba(57,18,20,.09);
}
}.np-panel–emails,
.np-panel–address {
grid-column: 1 / -1;
}.np-panel__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 30px;
}.np-panel__head h2 {
margin: 5px 0 0;
font-size: clamp(21px, 2vw, 27px);
font-weight: 650;
letter-spacing: -.025em;
}.np-kicker {
display: block;
color: var(–np-red);
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
}.np-panel__index {
color: rgba(101,9,13,.28);
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
}.np-email-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}.np-email {
display: grid;
grid-template-columns: 36px minmax(0,1fr) auto;
align-items: center;
gap: 11px;
min-height: 58px;
padding: 8px 12px 8px 10px;
border: 1px solid rgba(25,20,20,.07);
border-radius: 15px;
background: rgba(255,255,255,.66);
transition:
transform .25s ease,
background-color .25s ease,
border-color .25s ease,
color .25s ease;
}.np-email__icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
color: var(–np-red);
background: rgba(146,13,18,.06);
}.np-email svg,
.np-btn svg,
.np-address-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}.np-email__text {
min-width: 0;
font-size: 14px;
font-weight: 580;
letter-spacing: -.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.np-email__arrow {
color: #a59a9b;
font-size: 15px;
}@media (hover:hover) {
.np-email:hover {
transform: translateY(-2px);
border-color: rgba(146,13,18,.18);
background: #fff;
color: var(–np-red);
}
}.np-phone-card {
min-height: 255px;
display: flex;
flex-direction: column;
}.np-number {
display: inline-block;
margin: auto 0 24px;
width: fit-content;
direction: ltr;
font-size: clamp(25px, 3.2vw, 38px);
font-weight: 620;
letter-spacing: -.035em;
font-variant-numeric: tabular-nums;
}.np-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}.np-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 50px;
padding: 0 18px;
border-radius: 13px;
font-size: 13px;
font-weight: 750;
transition: transform .22s ease, box-shadow .22s ease;
}.np-btn–call {
color: #fff !important;
background: linear-gradient(135deg, var(–np-red-deep), var(–np-red));
box-shadow: 0 10px 24px rgba(146,13,18,.16);
}.np-btn–wa {
color: #fff !important;
background: linear-gradient(135deg, var(–np-wa-dark), var(–np-wa));
box-shadow: 0 10px 24px rgba(37,211,102,.15);
}.np-btn–wa svg {
fill: currentColor;
stroke: none;
}.np-panel–address {
display: grid;
grid-template-columns: 50px minmax(0,1fr) auto;
align-items: center;
gap: 18px;
}.np-address-icon {
display: grid;
place-items: center;
width: 50px;
height: 50px;
border: 1px solid rgba(146,13,18,.1);
border-radius: 15px;
color: var(–np-red);
background: rgba(146,13,18,.055);
}.np-address-copy p {
max-width: 740px;
margin: 7px 0 0;
color: #3d3738;
font-size: 15px;
line-height: 1.65;
}/* =========================================================
TABLET
========================================================= */@media (max-width: 900px) {
.np-contact__shell {
width: min(760px, calc(100% – 32px));
}.np-contact__grid {
grid-template-columns: 1fr;
}.np-panel–emails,
.np-panel–address {
grid-column: auto;
}.np-email-grid {
grid-template-columns: 1fr;
}
}/* =========================================================
MOBILE
========================================================= */@media (max-width: 600px) {
.np-contact {
padding: 52px 0 64px;
}.np-contact__shell {
width: calc(100% – 24px);
}.np-contact__hero {
margin-bottom: 34px;
}.np-contact__title {
font-size: clamp(38px, 12vw, 54px);
}.np-contact__lead {
margin-top: 18px;
font-size: 14px;
}.np-contact__grid {
gap: 12px;
}.np-panel {
padding: 21px 16px;
border-radius: 19px;
}.np-panel::after {
left: 16px;
}/* CRITICAL FIX:
Email address is fully visible; no ellipsis/truncation.
*/
.np-email {
grid-template-columns: 34px minmax(0,1fr);
gap: 9px;
min-height: 60px;
padding: 10px;
}.np-email__icon {
width: 34px;
height: 34px;
}.np-email__text {
display: block;
width: 100%;
min-width: 0;
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
font-size: clamp(11.5px, 3.35vw, 13px);
line-height: 1.45;
}/* Hide arrow on very narrow screens to reserve space for email */
.np-email__arrow {
display: none;
}.np-phone-card {
min-height: 235px;
}.np-number {
margin-bottom: 20px;
font-size: 28px;
}.np-actions {
grid-template-columns: 1fr;
}.np-btn {
min-height: 52px;
}.np-panel–address {
grid-template-columns: 46px minmax(0,1fr);
}.np-panel–address .np-panel__index {
display: none;
}.np-address-icon {
width: 46px;
height: 46px;
}/* Avoid fixed background performance issues on mobile */
body.np-contact-active,
body.np-contact-active #wrap_all,
body.np-contact-active #main {
background-attachment: scroll !important;
}
}@media (prefers-reduced-motion: reduce) {
.np-contact *,
.np-contact *::before,
.np-contact *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}(() => {
const root = document.querySelector(‚.np-contact‘);if (!root) return;/*
* Add a page-specific class to .
* The CSS uses this class to extend the same background
* across the entire page: header → content → footer.
*/
document.body.classList.add(’np-contact-active‘);/*
* Detect whether the device actually supports hover.
* This prevents desktop-only pointer effects from running
* on touch devices such as phones and tablets.
*/
const supportsHover = window.matchMedia(
‚(hover: hover) and (pointer: fine)‘
).matches;/*
* Respect the user’s accessibility preference.
* If reduced motion is enabled, skip interactive motion effects.
*/
const reducedMotion = window.matchMedia(
‚(prefers-reduced-motion: reduce)‘
).matches;/*
* The page-wide background remains active even when
* hover effects are disabled.
*/
if (!supportsHover || reducedMotion) return;/*
* Subtle interactive light effect for contact cards.
* The pointer position is passed to CSS variables:
*
* –mx = horizontal pointer position
* –my = vertical pointer position
*
* CSS uses these values inside a radial-gradient.
*/
const panels = root.querySelectorAll(‚.np-panel‘);panels.forEach((panel) => {panel.addEventListener(‚pointermove‘, (event) => {
const rect = panel.getBoundingClientRect();const x = event.clientX – rect.left;
const y = event.clientY – rect.top;panel.style.setProperty(‚–mx‘, `${x}px`);
panel.style.setProperty(‚–my‘, `${y}px`);
});/*
* Reset the highlight to the center when
* the pointer leaves the card.
*/
panel.addEventListener(‚pointerleave‘, () => {
panel.style.setProperty(‚–mx‘, ‚50%‘);
panel.style.setProperty(‚–my‘, ‚50%‘);
});});})();
+43 664 93039993
+98 912 139 7702
CONTACT NEGAREH PARSIAN
Let’s make something meaningful.
For academy inquiries, collaborations, orders and general information, choose the most convenient way to reach us.
DIRECT EMAIL
Academy emails
AUSTRIA
Vienna contact
IRAN
Tehran contact
TEHRAN OFFICE
5 floor, no 246, deaviz alley, north mirzaye shirazi blv, tehran, Iran.