/*
Anthropogenic Landscapes – consolidated stylesheet
(cleaned, deduplicated, with mobile 3-line header)
*/
/* -------------------- Colour variables -------------------- */
:root{
--primary:#5f2a2a;
--secondary:#d4b080;
--accent:#0e6ea8;
--background:#f9f5ed;
--text:#222;
--light-text:#fff;
--card-bg:#fff;
--card-border:#e0e0e0;
}
/* -------------------- Base -------------------- */
*{box-sizing:border-box}
html,
body{
height:100%;
overflow-x:hidden;
}
body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
line-height:1.6;
background:var(--background);
color:var(--text);
}
p{text-align:justify}
/* -------------------- Nav -------------------- */
.main-nav{
background:var(--primary);
color:var(--light-text);
position:sticky;top:0;z-index:1000;
box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.main-nav .nav-container{
display:flex;align-items:center;justify-content:space-between;
max-width:1200px;margin:0 auto;padding:.5rem 1rem;
}
.main-nav .nav-brand{font-weight:700;font-size:1.4rem;color:var(--light-text)}
.main-nav nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.main-nav nav a{
color:var(--light-text);text-decoration:none;font-weight:700;
font-size:1.2rem;padding:.5rem;transition:background .2s,color .2s;
}
.main-nav nav a:hover,.main-nav nav a:focus{
background:var(--secondary);color:var(--primary);border-radius:4px;
}
/* dropdown */
.main-nav ul li.dropdown{position:relative}
.main-nav ul li .dropdown-menu{
position:absolute;top:100%;left:0;background:var(--primary);
list-style:none;margin:0;padding:.5rem 0;display:none;min-width:180px;
box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:999
}
.main-nav ul li .dropdown-menu li a{
display:block;padding:.5rem 1rem;color:var(--light-text);font-size:1rem;text-decoration:none;white-space:nowrap
}
.main-nav ul li .dropdown-menu li a:hover{background:var(--secondary);color:var(--primary)}
.main-nav ul li:hover>.dropdown-menu{display:block}
.caret{font-size:.9rem;margin:0 .2rem}
.main-nav .lang-toggle a{font-size:.9rem;color:var(--light-text);margin-left:1rem;text-decoration:none}
.main-nav .lang-toggle a:hover{text-decoration:underline}
/* -------------------- Hero (home) -------------------- */
.hero{
height:100vh;color:var(--light-text);
display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
padding:4rem 2rem;position:relative;
background:
linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 80%, rgba(0,0,0,.6) 100%),
url('../assets/hero-bg.jpg') center/cover no-repeat fixed;
}
.hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 35%);
}
.hero-content{
position:relative;z-index:2;max-width:48rem;
/* قرارگیری نسبتاً پایین مطابق نسخههای قبلی */
margin-top:60vh;
}
.hero-logo{
width:140px;height:auto;margin-bottom:1rem;
opacity:0;transform:translateY(-20px);
animation:logoFadeIn 1s ease forwards;animation-delay:.8s;
}
@keyframes logoFadeIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.hero h1{
margin:0;color:#fff;font-weight:800;line-height:1.1;letter-spacing:.02em;
text-shadow:0 2px 4px rgba(0,0,0,.35);max-width:28ch;
font-size:clamp(2rem,4vw + .5rem,3.2rem);
}
.hero h1 span{display:block}
.hero h1 span:last-child{letter-spacing:.08em}
/* third line (subtitle) – desktop & tablet */
.hero-subtitle{
margin:.35em 0 0;color:#fff;font-weight:800;line-height:1.2;letter-spacing:.03em;
text-shadow:0 2px 4px rgba(0,0,0,.35);max-width:50ch;
font-size:clamp(1.1rem,1.6vw + .4rem,1.8rem);
}
.hero .date{font-size:1.4rem;margin-top:.5rem;font-weight:600}
.hero .type-label{font-size:1.2rem;margin-top:.3rem;color:var(--secondary);font-weight:600}
.scroll-indicator{display:block;font-size:2rem;text-align:center;color:#fff;text-decoration:none;animation:bounce 1.5s infinite;margin-top:.3rem}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
/* -------------------- Page hero (internal pages) -------------------- */
.page-hero{
position:relative;height:60vh;width:100%;
background-size:cover;background-position:center;background-repeat:no-repeat;
display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
color:var(--light-text);
}
.page-hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);z-index:0}
.page-hero *{position:relative;z-index:1}
.page-hero h1{font-size:2.4rem;margin:0;line-height:1.2;font-weight:700}
/* مینیهرو: پایین-چپ ثابت برای همه زبانها */
.hero-mini{
position:relative;z-index:2;max-width:800px;margin-top:0;display:flex;flex-direction:column;align-items:flex-start;color:var(--light-text)
}
.page-hero .hero-mini{
position:absolute;bottom:1rem;left:1rem;right:auto;margin-top:0;text-align:left
}
.hero-mini img{width:100px;height:auto;margin-bottom:.8rem;opacity:0;transform:translateY(-20px);animation:logoFadeIn 1s ease forwards;animation-delay:.8s}
.hero-mini h1{margin:0;font-size:2.2rem;line-height:1.2;font-weight:700;text-transform:uppercase}
.hero-mini h1 span{display:block}
.hero-mini h1 span:last-child{letter-spacing:.08em}
.hero-mini .date{font-size:1.1rem;margin-top:.5rem;color:var(--light-text)}
.hero-mini .type-label{display:inline-block;margin-top:.5rem;font-size:.9rem;background:var(--secondary);color:var(--primary);padding:.2rem .6rem;border-radius:4px}
/* خط سوم برای صفحات داخلی */
.page-hero .hero-subtitle{
margin:.35em 0 0;color:#fff;font-weight:800;line-height:1.2;letter-spacing:.03em;
text-shadow:0 2px 4px rgba(0,0,0,.35);max-width:50ch;
font-size:clamp(1.1rem,1.6vw + .4rem,1.8rem);
}
/* -------------------- Sections & cards -------------------- */
.cta-section{
display:flex;flex-wrap:wrap;gap:1.5rem;margin:2rem auto;max-width:1200px;padding:0 1rem
}
.cta-card{
position:relative;flex:1;min-width:280px;height:360px;border-radius:4px;overflow:hidden;
background-size:cover;background-position:center;color:var(--light-text);display:flex;align-items:flex-end;
}
.cta-card::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45)}
.cta-card .cta-content{position:relative;padding:1rem;width:100%}
.cta-card h3{margin:0 0 .5rem 0;font-size:1.5rem;color:var(--light-text)}
.cta-card p{margin:0 0 .5rem 0;font-size:.95rem}
.cta-card a{display:inline-block;background:var(--accent);color:var(--light-text);padding:.5rem 1rem;border-radius:4px;text-decoration:none;font-weight:bold;transition:background .2s}
.cta-card a:hover{background:var(--secondary);color:var(--primary)}
.info-section{max-width:1200px;margin:3rem auto;padding:0 1rem;text-align:center}
.info-section h2{font-size:1.8rem;color:var(--secondary);margin-bottom:.5rem}
.info-section p{max-width:700px;margin:0 auto 2rem auto;color:var(--text)}
.info-cards{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}
.info-card{
background:var(--card-bg);border:1px solid var(--card-border);border-radius:4px;
flex:1;min-width:260px;max-width:350px;display:flex;flex-direction:column;overflow:hidden
}
.info-card .info-image{background-size:cover;background-position:center;height:180px}
.info-card .info-body{padding:1rem;flex:1;text-align:left}
.info-card h3{margin-top:0;margin-bottom:.5rem;font-size:1.3rem;color:var(--primary)}
.info-card p{margin:0 0 1rem 0;color:#555;font-size:.95rem}
.info-card a{display:inline-block;background:var(--accent);color:var(--light-text);padding:.5rem 1rem;border-radius:4px;text-decoration:none;font-weight:bold;transition:background .2s}
.info-card a:hover{background:var(--secondary);color:var(--primary)}
/* -------------------- Logos -------------------- */
.institution-logos{
display:flex;justify-content:center;align-items:center;gap:1.5rem;margin:1.5rem auto;flex-wrap:wrap
}
.institution-logos img{
width:180px;height:45px;object-fit:contain;opacity:0;transform:translateY(20px);
animation:logosFadeUp 1s ease forwards;animation-delay:1.2s
}
@keyframes logosFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* -------------------- Countdown -------------------- */
.countdown{
display:flex;justify-content:center;align-items:flex-start;gap:2rem;margin:2rem auto;max-width:800px;font-family:inherit
}
.countdown div{text-align:center}
.countdown div span{display:block;font-size:2.2rem;font-weight:700;color:var(--secondary)}
.countdown div small{display:block;font-size:.9rem;margin-top:.25rem;color:var(--primary);letter-spacing:.02em}
/* -------------------- Timeline -------------------- */
.timeline{list-style:none;padding-left:0;border-left:3px solid var(--secondary);margin:2rem 0}
.timeline li{padding-left:1rem;margin-bottom:1.5rem;position:relative}
.timeline li::before{content:'';position:absolute;left:-7px;top:.4rem;width:12px;height:12px;background:var(--primary);border-radius:50%}
/* -------------------- Forms -------------------- */
form{display:flex;flex-direction:column;gap:.75rem;max-width:500px}
form label{font-weight:bold}
form input,form textarea{padding:.5rem;border:1px solid var(--card-border);border-radius:4px;font-size:1rem}
form button{width:fit-content;background:var(--primary);color:var(--light-text);border:none;padding:.6rem 1.2rem;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .2s}
form button:hover{background:var(--secondary);color:var(--primary)}
/* -------------------- Footer -------------------- */
footer{background:var(--primary);color:var(--light-text);text-align:center;padding:1rem;margin-top:2rem;font-size:.9rem}
footer .footer-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;margin:2rem 0 0}
footer .footer-links a{color:var(--secondary);font-weight:600;text-decoration:none;font-size:.95rem}
footer .footer-links a:hover{text-decoration:underline}
/* -------------------- Responsive -------------------- */
@media (max-width: 768px){
/* Nav */
.main-nav .nav-container{flex-direction:column;align-items:flex-start;padding:.5rem}
.main-nav .nav-brand{font-size:1.2rem;margin-bottom:.5rem}
.main-nav nav ul{flex-direction:column;align-items:flex-start;gap:.5rem;margin-top:.5rem}
.main-nav nav a{font-size:1rem;padding:.4rem 0}
.main-nav .lang-toggle{margin-top:.5rem;align-self:flex-start}
/* Home hero – بدون پارالاکس و متن بالا */
.hero{
height:70vh;min-height:70vh;padding:1rem;justify-content:flex-start;align-items:flex-start;
background:
linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,0) 60%),
url('../assets/hero-bg.jpg') center top/cover no-repeat;
background-attachment:scroll;
}
.hero-content{margin-top:0;padding-top:.5rem;padding-left:1rem;padding-right:1rem}
.scroll-indicator{display:none}
/* 2+1 lines: h1 بزرگتر، سابتایتل کوچکتر */
.hero .hero-content h1{font-size:1.35rem;line-height:1.15;max-width:24ch}
.hero .hero-subtitle{font-size:.95rem;line-height:1.25;max-width:28ch;margin-top:.3rem}
.hero-logo{width:100px}
.hero .date{font-size:1rem}
.hero .type-label{font-size:.9rem}
/* internal page hero height */
.page-hero{background-size:cover;background-position:center top;background-repeat:no-repeat;height:45vh;min-height:45vh}
.hero-mini img{width:70px;margin-bottom:.4rem}
.hero-mini h1{font-size:1.6rem}
.hero-mini .date{font-size:.9rem;margin-top:.3rem}
.hero-mini .type-label{font-size:.75rem;margin-top:.3rem}
.page-hero .hero-mini h1{font-size:1.35rem;line-height:1.15;max-width:24ch}
.page-hero .hero-subtitle{font-size:.95rem;line-height:1.25;max-width:28ch;margin-top:.3rem}
/* layout blocks */
.cta-section{flex-direction:column;align-items:stretch}
.cta-card{height:280px}
.info-cards{flex-direction:column;align-items:stretch}
footer .footer-links{flex-direction:column;gap:1rem}
.institution-logos img{width:120px;height:auto}
}
@media (max-width:480px){
.hero .hero-content h1{font-size:1.2rem}
.hero .hero-subtitle{font-size:.9rem}
.hero-logo{width:80px}
.hero .date{font-size:.9rem}
.hero .type-label{font-size:.8rem}
.page-hero .hero-mini h1{font-size:1.2rem}
.page-hero .hero-subtitle{font-size:.9rem}
.hero-mini img{width:60px}
.cta-card{height:240px}
.countdown div span{font-size:1.6rem}
.institution-logos img{width:100px;height:auto;margin-bottom:.5rem}
}
/* کنترل محل شکست تیتر در دسکتاپ */
.hero-content h1 {
max-width: 28ch;
}
/* کنترل محل شکست تیتر در موبایل */
@media (max-width: 768px) {
.hero-content h1 {
max-width: 24ch;
}
}
/* --- 3-line equal width header --- */
.hero-title {
display: inline-block;
text-align: left;
max-width: 30ch; /* طول ثابت همه خطوط */
}
.hero-title .line {
display: block;
color: #fff;
font-weight: 800;
line-height: 1.1;
letter-spacing: .02em;
text-shadow: 0 2px 4px rgba(0,0,0,.35);
font-size: clamp(2rem, 4vw + .5rem, 3.2rem); /* دسکتاپ */
}
.hero-subtitle {
display: block;
max-width: 30ch; /* همان عرض تیتر */
color: #fff;
font-weight: 800;
line-height: 1.2;
letter-spacing: .03em;
text-shadow: 0 2px 4px rgba(0,0,0,.35);
font-size: clamp(1.1rem, 1.6vw + .4rem, 1.8rem); /* کوچیکتر */
margin-top: 0.35em;
}
/* موبایل */
@media (max-width: 768px) {
.hero-title { max-width: 24ch; }
.hero-title .line { font-size: 1.35rem; }
.hero-subtitle {
max-width: 24ch;
font-size: .95rem;
}
}
@media (max-width: 480px) {
.hero-title { max-width: 22ch; }
.hero-title .line { font-size: 1.2rem; }
.hero-subtitle {
max-width: 22ch;
font-size: .9rem;
}
}
/* ====== 3-line equal-width header (FINAL OVERRIDE) ====== */
/* پایه: هر خط یک بلاک تکخطی */
.hero .hero-title { display: inline-block; text-align: left; }
.hero .hero-title .line { display: block; white-space: nowrap; }
/* همهی خطوط دقیقاً همعرض باشند (دسکتاپ) */
.hero .hero-title,
.hero .hero-subtitle {
width: 40ch; /* یک ستون ثابت؛ اگر خواستی 38–42ch امتحان کن */
max-width: min(90vw, 40ch); /* از عرض صفحه بیرون نزند */
}
/* تایپوگرافی خطوط اصلی (غلبه بر قوانین قبلی) */
.hero .hero-title .line {
font-size: clamp(1.9rem, 4vw + .3rem, 3rem) !important;
font-weight: 800;
line-height: 1.1;
letter-spacing: .02em;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.35);
}
/* خط سوم (سابتایتل): کوچکتر ولی همعرض */
.hero .hero-subtitle {
display: block;
font-size: clamp(1rem, 1.6vw + .25rem, 1.6rem) !important;
font-weight: 800;
line-height: 1.2;
letter-spacing: .02em;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.35);
margin-top: .35em;
}
/* حذف اِفکتِ عریضکنندهی قبلی روی آخرین span که باعث شکست میشد */
.hero h1 span:last-child { letter-spacing: .02em !important; }
/* ——— موبایل ——— */
@media (max-width: 768px){
/* ستون باریکتر ولی همچنان همعرض */
.hero .hero-title,
.hero .hero-subtitle {
width: 26ch;
max-width: min(92vw, 26ch);
}
.hero .hero-title .line { font-size: 1.35rem !important; line-height: 1.15; }
.hero .hero-subtitle { font-size: .95rem !important; line-height: 1.25; }
}
@media (max-width: 480px){
.hero .hero-title,
.hero .hero-subtitle {
width: 22ch;
max-width: min(94vw, 22ch);
}
.hero .hero-title .line { font-size: 1.2rem !important; }
.hero .hero-subtitle { font-size: .9rem !important; }
}
/* ===== FINAL HEADER FIX: 3 lines, equal width, desktop + mobile ===== */
/* ساختار:
Dynamic Interplays In
The Iranian Highlands
In Searching For Anthropogenic Landscapes
*/
/* پایه: هر خط یک بلاک تکخطی */
.hero .hero-title { display:inline-block; text-align:left; }
.hero .hero-title .line { display:block; white-space:nowrap; }
/* دسکتاپ/تبلت: سه خط با یک ستون دقیقاً همعرض */
.hero .hero-title,
.hero .hero-subtitle {
width: 40ch; /* ستون ثابت؛ اگر لازم شد 38–42ch امتحان کن */
max-width: min(90vw, 40ch);
}
/* تایپوگرافی دو خط اول (اوورراید قطعی) */
.hero .hero-title .line{
font-size: clamp(1.9rem, 4vw + .3rem, 3rem) !important;
font-weight: 800;
line-height: 1.12;
letter-spacing: .02em;
color:#fff;
text-shadow: 0 2px 4px rgba(0,0,0,.35);
}
/* خط سوم: کوچکتر اما همعرض ستون */
.hero .hero-subtitle{
display:block; white-space:nowrap;
font-size: clamp(1rem, 1.6vw + .25rem, 1.6rem) !important;
font-weight:800; line-height:1.2;
letter-spacing:.08em; /* کمی کشیدگی تا طول مساوی شود */
color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35);
margin-top:.4em;
}
/* هر افزایش فاصلهحروفِ قدیمی که خط دوم را میشکست را خنثی کن */
.hero h1 span:last-child{ letter-spacing:.02em !important; }
/* ——— موبایل ——— */
@media (max-width: 768px){
/* ستون باریکتر؛ باز هم سه خط دقیقاً همعرض */
.hero .hero-title,
.hero .hero-subtitle{
width: 26ch;
max-width: min(92vw, 26ch);
}
.hero .hero-title .line{ font-size: 1.35rem !important; line-height:1.15; }
.hero .hero-subtitle{ font-size: .95rem !important; line-height:1.25; letter-spacing:.10em; }
/* هدر موبایل بالا بیاید و پارالاکس مزاحم نشود (اگر قبلاً ست نشده) */
.hero{ height:70vh; min-height:70vh; padding:1rem; justify-content:flex-start; align-items:flex-start;
background-attachment:scroll; background-position:center top; }
.hero-content{ margin-top:0; padding-top:.5rem; }
.scroll-indicator{ display:none; }
}
@media (max-width: 480px){
.hero .hero-title,
.hero .hero-subtitle{
width: 22ch;
max-width: min(94vw, 22ch);
}
.hero .hero-title .line{ font-size: 1.2rem !important; }
.hero .hero-subtitle{ font-size: .9rem !important; letter-spacing:.12em; }
}
/* === Mobile fix: let subtitle wrap (only mobile) === */
@media (max-width: 768px){
/* دو خط اول همون یکخطی بمونن، فقط برای یادآوری */
.hero .hero-title .line { white-space: nowrap; }
/* خط سوم اجازهی شکست و چندخطی داشته باشه */
.hero .hero-subtitle{
white-space: normal !important; /* شکستن مجاز */
overflow-wrap: anywhere; /* اگر کلمه طولانی بود هم بشکنه */
word-break: normal;
width: auto !important; /* از ستون ثابت آزاد بشه */
max-width: 92vw !important; /* تو عرض موبایل جا بگیره */
font-size: .95rem !important; /* کمی کوچکتر برای جا شدن */
line-height: 1.25;
letter-spacing: .02em !important; /* کشیدگی اضافی حذف شود */
margin-top: .35em;
}
/* برای صفحات داخلی هم همین رفتار */
.page-hero .hero-subtitle{
white-space: normal !important;
overflow-wrap: anywhere;
word-break: normal;
width: auto !important;
max-width: 92vw !important;
font-size: .9rem !important;
line-height: 1.25;
}
/* اطمینان از اینکه هدر کوتاه نمیشود و متن بریده نمیماند */
.hero{
height: 70vh;
min-height: 70vh;
background-attachment: scroll;
background-position: center top;
}
.hero-content{ margin-top: 0; }
}
@media (max-width: 480px){
.hero .hero-subtitle{ font-size: .9rem !important; }
.page-hero .hero-subtitle{ font-size: .85rem !important; }
}
/* ==== Internal pages: 2-line title + smaller subtitle (same as home) ==== */
/* تیتر داخلی: دو خط ثابت، هر span یک خط */
.page-hero .hero-mini h1{
margin: 0;
font-weight: 800;
line-height: 1.1;
letter-spacing: .02em;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.35);
font-size: clamp(2rem, 3.6vw, 2.6rem);
max-width: 30ch; /* عرض کنترلشده برای دو خط مرتب */
text-transform: none; /* اگر قبلاً Uppercase بود، غیرفعال شود */
}
.page-hero .hero-mini h1 > span{
display: block; /* هر span = یک خط قطعی */
white-space: nowrap; /* نشکنند (در دسکتاپ/تبلت) */
}
/* زیرتیتر داخلی: کوچکتر، همچینش با تیتر */
.page-hero .hero-mini .hero-subtitle{
margin-top: .35em;
color: #fff;
font-weight: 800;
line-height: 1.2;
letter-spacing: .02em;
text-shadow: 0 2px 4px rgba(0,0,0,.35);
font-size: clamp(1.1rem, 1.6vw + .2rem, 1.6rem);
max-width: 30ch; /* همعرض با تیتر روی دسکتاپ */
}
/* — موبایل: Subtitle آزادانه بشکند که کامل دیده شود — */
@media (max-width: 768px){
.page-hero{ height:45vh; min-height:45vh; background-position:center top; }
.page-hero .hero-mini h1{
font-size: 1.35rem;
max-width: 24ch; /* دو خط تیتر مرتب */
}
.page-hero .hero-mini h1 > span{
white-space: nowrap; /* هنوز هر span یک خط بماند */
}
.page-hero .hero-mini .hero-subtitle{
font-size: .95rem;
max-width: 92vw; /* از ستون ثابت آزاد شود تا جا بگیرد */
white-space: normal !important;
overflow-wrap: anywhere;
word-break: normal;
}
.hero-mini .date{ font-size: .9rem; }
.hero-mini .type-label{ font-size: .75rem; } /* رنگ/پسزمینهاش دست نخورَد */
}
@media (max-width: 480px){
.page-hero .hero-mini h1{ font-size: 1.2rem; max-width: 22ch; }
.page-hero .hero-mini .hero-subtitle{ font-size: .9rem; max-width: 92vw; }
}
/* ===== Internal pages: keep subtitle on ONE line (desktop), wrap on mobile ===== */
/* دسکتاپ/تبلت: زیرتیتر یکخطی بماند */
.page-hero .hero-mini .hero-subtitle{
white-space: nowrap; /* نگذار بشکند */
max-width: none; /* محدودیت عرض را بردار */
width: auto; /* به اندازهٔ محتوا */
letter-spacing: .02em; /* کمی فشردهتر تا راحتتر جا شود */
font-size: clamp(1.05rem, 1.4vw + .3rem, 1.6rem); /* کمی کوچکتر از تیتر */
}
/* دو خط تیتر هم هر span دقیقاً یک خط بماند */
.page-hero .hero-mini h1 > span{
display:block;
white-space:nowrap;
}
/* موبایل: اجازه بده زیرتیتر برای جا شدن بشکند */
@media (max-width: 768px){
.page-hero .hero-mini .hero-subtitle{
white-space: normal !important;
max-width: 92vw !important;
overflow-wrap: anywhere;
word-break: normal;
}
}
/* === INTERNAL HERO: 2-line title + 1-line subtitle (mobile wraps) === */
/* دو خط اول: هر span یک خط ثابت، با عرض یکسان */
.page-hero .hero-mini h1{
margin:0;
font-weight:800;
line-height:1.12;
letter-spacing:.02em;
text-transform:none; /* اگر جایی Uppercase بوده، خنثی شود */
color:#fff;
text-shadow:0 2px 4px rgba(0,0,0,.35);
font-size:clamp(2rem,3.6vw,2.6rem);
width:30ch; /* عرض مشترک دو خط */
max-width:min(90vw,30ch);
}
.page-hero .hero-mini h1 > span{display:block;white-space:nowrap;}
/* جلوگیری از کشیدگی اضافی خط دوم در استایلهای قبلی */
.page-hero .hero-mini h1 span:last-child{letter-spacing:.02em !important;}
/* خط سوم: یکخطی روی دسکتاپ، همعرض با تیتر */
.page-hero .hero-mini .hero-subtitle{
margin-top:.35em;
font-weight:800;
line-height:1.2;
letter-spacing:.02em;
color:#fff;
text-shadow:0 2px 4px rgba(0,0,0,.35);
font-size:clamp(1.1rem,1.6vw + .2rem,1.6rem);
white-space:nowrap; /* دسکتاپ: نشکند */
width:30ch; /* همعرض با تیتر */
max-width:min(90vw,30ch);
}
/* --- موبایل: زیرتیتر آزادانه بشکند و کامل دیده شود --- */
@media (max-width:768px){
.page-hero{height:45vh;min-height:45vh;background-position:center top;}
.page-hero .hero-mini h1{
font-size:1.35rem;
width:24ch;
max-width:min(92vw,24ch);
}
.page-hero .hero-mini .hero-subtitle{
font-size:.95rem;
white-space:normal !important;
width:auto; /* آزادی عرض */
max-width:92vw !important;
overflow-wrap:anywhere;
word-break:normal;
}
}
@media (max-width:480px){
.page-hero .hero-mini h1{font-size:1.2rem;width:22ch;max-width:min(94vw,22ch);}
.page-hero .hero-mini .hero-subtitle{font-size:.9rem;max-width:92vw;}
}
/* --- ALL CAPS برای تیتر اصلی (دو خط اول) --- */
.hero-content h1 span {
text-transform: uppercase;
}
/* حالت معمول برای زیرتیتر (خط سوم) */
.hero-subtitle {
text-transform: none;
}
/* === ALL CAPS برای دو خط تیتر در همه صفحات (خانه + داخلی) === */
.hero-content h1 span,
.page-hero .hero-mini h1 > span {
text-transform: uppercase;
}
/* اگر جایی کل h1 را قبلاً Uppercase کردهایم، خنثی کن تا فقط spanها کپیتال شوند */
.page-hero .hero-mini h1 {
text-transform: none !important;
}
/* زیرتیتر همیشه حالت عادی داشته باشد (همه صفحات) */
.hero-subtitle,
.page-hero .hero-mini .hero-subtitle {
text-transform: none !important;
}
/* === All Caps برای هر دو خط تیتر در همه صفحات === */
.hero-content h1 span,
.page-hero.hero-bg .hero-mini h1 span {
text-transform: uppercase !important;
}
/* جلوگیری از کپیتال شدن کل h1 به جز spanها */
.hero-content h1,
.page-hero.hero-bg .hero-mini h1 {
text-transform: none !important;
}
/* زیرتیتر همیشه نرمال */
.hero-subtitle,
.page-hero.hero-bg .hero-mini .hero-subtitle {
text-transform: none !important;
}
/* === 1) Internal hero safe area (no edge-hugging) === */
.page-hero .hero-mini{
left: 2rem; /* فاصله از لبه چپ */
padding-right: 2rem; /* فاصله از لبه راست تصویر */
max-width: min(56rem, 90vw);/* کل بلوک متن از لبهها فاصله داشته باشد */
}
@media (min-width: 1200px){
.page-hero .hero-mini{ left: 3rem; padding-right: 3rem; }
}
@media (max-width: 768px){
.page-hero .hero-mini{ left: 1rem; padding-right: 1rem; max-width: 92vw; }
}
/* عرض معقول برای تیتر و زیرتیترِ صفحات داخلی (دسکتاپ) */
.page-hero .hero-mini h1,
.page-hero .hero-mini .hero-subtitle{
max-width: 34ch; /* نه خیلی عریض، نه فشرده */
}
/* موبایل: زیرتیتر آزادانه بشکند و کامل دیده شود (قبلاً خواسته بودی) */
@media (max-width: 768px){
.page-hero .hero-mini .hero-subtitle{
max-width: 92vw !important;
white-space: normal !important;
overflow-wrap: anywhere;
word-break: normal;
}
}
/* === 2) Restore Speakers grid/cards (was missing) === */
.cards{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.2rem;
}
.card{
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.card .card-image{
height: 200px;
background: #d7d7d7;
display: flex; align-items: center; justify-content: center;
color: var(--primary); font-style: italic;
}
.card .card-body{ padding: 1rem; }
.card .card-body h3{ margin: 0 0 .4rem; font-size: 1.1rem; color: var(--primary); }
.card .card-body p{ margin: .25rem 0; color: #555; font-size: .95rem; }
/* === Internal hero: safe area + proper widths (all content pages) === */
.page-hero .hero-mini{
position: absolute;
bottom: 1rem;
left: 2rem; /* فاصله از لبه چپ */
padding-right: 2rem; /* فاصله از لبه راست */
max-width: min(56rem, 92vw);
align-items: flex-start;
text-align: left;
}
@media (min-width: 1200px){
.page-hero .hero-mini{ left: 3rem; padding-right: 3rem; }
}
@media (max-width: 768px){
.page-hero .hero-mini{ left: 1rem; padding-right: 1rem; max-width: 92vw; }
}
/* دو خط اول: هر span یک خط و طول کنترلشده (دسکتاپ/تبلت) */
.page-hero .hero-mini h1{
margin: 0;
font-weight: 800;
line-height: 1.12;
letter-spacing: .02em;
text-transform: none !important;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.35);
font-size: clamp(2rem, 3.6vw, 2.6rem);
}
.page-hero .hero-mini h1 > span{
display: block;
white-space: nowrap;
max-width: 34ch; /* طول منطقی برای هر خط */
}
.page-hero .hero-mini h1 span:last-child{ letter-spacing: .02em !important; }
/* خط سوم: همردیف، اما یکخطی در دسکتاپ/تبلت */
.page-hero .hero-mini .hero-subtitle{
margin-top: .35em;
font-weight: 800;
line-height: 1.2;
letter-spacing: .02em;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.35);
font-size: clamp(1.1rem, 1.6vw + .2rem, 1.6rem);
white-space: nowrap; /* دسکتاپ: نشکند */
max-width: 34ch;
}
/* موبایل: زیرتیتر آزادانه بشکند و کامل دیده شود */
@media (max-width: 768px){
.page-hero{ height: 45vh; min-height: 45vh; background-position: center top; }
.page-hero .hero-mini h1{ font-size: 1.35rem; }
.page-hero .hero-mini h1 > span{
max-width: 24ch; /* دو خط تیتر مرتب */
}
.page-hero .hero-mini .hero-subtitle{
font-size: .95rem;
white-space: normal !important;
max-width: 92vw !important;
overflow-wrap: anywhere;
word-break: normal;
}
}
@media (max-width: 480px){
.page-hero .hero-mini h1{ font-size: 1.2rem; }
.page-hero .hero-mini h1 > span{ max-width: 22ch; }
.page-hero .hero-mini .hero-subtitle{ font-size: .9rem; }
}
/* === Speakers grid fix: responsive columns === */
.cards{
display: grid;
gap: 1.2rem;
grid-template-columns: 1fr; /* موبایل: 1 ستون */
}
@media (min-width: 640px){
.cards{ grid-template-columns: repeat(2, 1fr); } /* تبلت: 2 ستون */
}
@media (min-width: 992px){
.cards{ grid-template-columns: repeat(3, 1fr); } /* دسکتاپ: 3 ستون */
}
.card{
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 6px;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.card .card-image{
height: 200px; background:#d7d7d7;
display:flex; align-items:center; justify-content:center;
color: var(--primary); font-style: italic;
}
.card .card-body{ padding: 1rem; }
.card .card-body h3{ margin:0 0 .4rem; font-size:1.1rem; color:var(--primary); }
.card .card-body p{ margin:.25rem 0; color:#555; font-size:.95rem; }
/* ================== INTERNAL HERO — HARD FIX (put at very end) ================== */
/* safe area: متن از لبهها فاصله داشته باشد و وسط عکس جا بگیرد */
.page-hero.hero-bg > .hero-mini{
position:absolute; bottom:1rem; left:2rem; right:auto;
padding-right:2rem;
max-width:min(56rem,92vw);
align-items:flex-start; text-align:left;
}
/* دو خط اول: هر span دقیقاً یک خط، طول کنترلشده، حروف بزرگ طبق خواسته */
.page-hero.hero-bg > .hero-mini h1{
margin:0;
font-weight:800; line-height:1.12; letter-spacing:.02em;
color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35);
font-size:clamp(2rem,3.6vw,2.6rem);
text-transform:none !important; /* فقط spanها upper شوند */
}
.page-hero.hero-bg > .hero-mini h1 > span{
display:block; white-space:nowrap !important; /* جلوی شکستن تصادفی را بگیرد */
max-width:34ch !important; /* طول یکسان دو خط */
text-transform:uppercase; /* ALL CAPS فقط روی خطها */
}
/* خط دوم کشیده نشود */
.page-hero.hero-bg > .hero-mini h1 > span:last-child{ letter-spacing:.02em !important; }
/* خط سوم: همعرض با دو خط اول و روی دسکتاپ «یک خط» بماند */
.page-hero.hero-bg > .hero-mini .hero-subtitle{
margin-top:.35em;
font-weight:800; line-height:1.2; letter-spacing:.02em;
color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35);
font-size:clamp(1.1rem,1.6vw + .2rem,1.6rem);
white-space:nowrap !important; /* دسکتاپ: یک خط */
max-width:34ch !important;
text-transform:none !important; /* زیرتیتر کپیتال نشود */
}
/* ——— mobile/tablet: زیرتیتر فقط اینجا اجازهی شکستن دارد ——— */
@media (max-width: 768px){
.page-hero.hero-bg{ height:45vh; min-height:45vh; background-position:center top; }
.page-hero.hero-bg > .hero-mini{ left:1rem; padding-right:1rem; max-width:92vw; }
.page-hero.hero-bg > .hero-mini h1{ font-size:1.35rem; }
.page-hero.hero-bg > .hero-mini h1 > span{
max-width:24ch !important;
}
.page-hero.hero-bg > .hero-mini .hero-subtitle{
font-size:.95rem;
white-space:normal !important; /* این یکی مجاز به شکستن */
max-width:92vw !important;
overflow-wrap:anywhere; word-break:normal;
}
}
@media (max-width: 480px){
.page-hero.hero-bg > .hero-mini h1{ font-size:1.2rem; }
.page-hero.hero-bg > .hero-mini h1 > span{ max-width:22ch !important; }
.page-hero.hero-bg > .hero-mini .hero-subtitle{ font-size:.9rem; }
}
/* =============== SPEAKERS GRID — 1/2/3 ستون استاندارد =============== */
.cards{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
background:var(--card-bg); border:1px solid var(--card-border);
border-radius:6px; overflow:hidden;
display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.card .card-image{ height:200px; background:#d7d7d7;
display:flex; align-items:center; justify-content:center; color:var(--primary); font-style:italic; }
.card .card-body{ padding:1rem; }
.card .card-body h3{ margin:0 0 .4rem; font-size:1.1rem; color:var(--primary); }
.card .card-body p{ margin:.25rem 0; color:#555; font-size:.95rem; }
/* ================== CLEAN-UP: خنثیسازی قوانین مزاحم ================== */
/* هر چیزی که قبلاً .page-hero .hero-mini … را کشیده/فولویدث کرده، اینجا بیاثر میشود */
.page-hero .hero-mini h1,
.page-hero .hero-mini .hero-subtitle{ width:auto !important; }
/* فقط span های تیتر upper شوند؛ خود h1 نه */
.page-hero .hero-mini h1{ text-transform:none !important; }
/* ===== FIX 1: container (متن وسط و فاصله از لبه) ===== */
.container{
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}
/* ===== FIX 2: internal hero (دو خط اول همعرض، زیرتیتر یکخط در دسکتاپ) ===== */
.page-hero.hero-bg > .hero-mini{
position: absolute;
bottom: 1rem;
left: 2rem;
padding-right: 2rem;
max-width: min(56rem, 92vw);
align-items: flex-start;
text-align: left;
}
.page-hero.hero-bg > .hero-mini h1{
margin: 0 !important;
font-weight: 800; line-height: 1.12; letter-spacing: .02em;
color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.35);
font-size: clamp(2rem, 3.6vw, 2.6rem);
text-transform: none !important; /* فقط spanها کپیتال شوند */
}
.page-hero.hero-bg > .hero-mini h1 > span{
display: block !important;
white-space: nowrap !important;
max-width: 34ch !important; /* طولِ یکسان دو خط */
text-transform: uppercase !important;
}
.page-hero.hero-bg > .hero-mini h1 > span:last-child{ letter-spacing: .02em !important; }
.page-hero.hero-bg > .hero-mini .hero-subtitle{
margin-top: .35em;
font-weight: 800; line-height: 1.2; letter-spacing: .02em;
color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.35);
font-size: clamp(1.1rem, 1.6vw + .2rem, 1.6rem);
white-space: nowrap !important; /* دسکتاپ: یک خط */
max-width: 34ch !important;
text-transform: none !important;
}
/* موبایل: زیرتیتر اجازهی شکستن داشته باشد */
@media (max-width: 768px){
.page-hero.hero-bg > .hero-mini{
left: 1rem; padding-right: 1rem; max-width: 92vw;
}
.page-hero.hero-bg > .hero-mini h1{ font-size: 1.35rem; }
.page-hero.hero-bg > .hero-mini h1 > span{ max-width: 24ch !important; }
.page-hero.hero-bg > .hero-mini .hero-subtitle{
font-size: .95rem;
white-space: normal !important;
max-width: 92vw !important;
overflow-wrap: anywhere; word-break: normal;
}
}
@media (max-width: 480px){
.page-hero.hero-bg > .hero-mini h1{ font-size: 1.2rem; }
.page-hero.hero-bg > .hero-mini h1 > span{ max-width: 22ch !important; }
.page-hero.hero-bg > .hero-mini .hero-subtitle{ font-size: .9rem; }
}
/* ===== FIX 3: speakers grid استاندارد ===== */
.cards{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
background: var(--card-bg); border:1px solid var(--card-border);
border-radius:6px; overflow:hidden; display:flex; flex-direction:column;
box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.card .card-image{
height:200px; background:#d7d7d7;
display:flex; align-items:center; justify-content:center;
color:var(--primary); font-style:italic;
}
.card .card-body{ padding:1rem; }
.card .card-body h3{ margin:0 0 .4rem; font-size:1.1rem; color:var(--primary); }
.card .card-body p{ margin:.25rem 0; color:#555; font-size:.95rem; }
/* === CTA buttons (palette-aware) === */
.btn {
display:inline-block; padding:.6rem 1rem; border-radius:6px;
font-weight:700; text-decoration:none; line-height:1;
border:1px solid transparent; transition:background .2s, color .2s, border-color .2s, transform .05s;
}
.btn:active { transform: translateY(1px); }
/* primary intent: normal = accent; hover = primary/secondary */
.btn-cta {
background: var(--accent); color: var(--light-text);
border-color: var(--accent);
}
.btn-cta:hover, .btn-cta:focus {
background: var(--primary); color: var(--secondary);
border-color: var(--primary);
}
/* ghost style (outlined) – useful for secondary actions */
.btn-ghost {
background: transparent; color: var(--accent);
border-color: var(--accent);
}
.btn-ghost:hover, .btn-ghost:focus {
background: var(--primary); color: var(--secondary);
border-color: var(--primary);
}
/* inline CTA used برای «here/اینجا» داخل جمله */
.inline-cta {
display:inline-block; padding:.15rem .5rem; margin-inline:.15rem;
border-radius:4px; font-weight:700; text-decoration:none;
background: var(--accent); color: var(--light-text); border:1px solid var(--accent);
}
.inline-cta:hover, .inline-cta:focus {
background: var(--primary); color: var(--secondary); border-color: var(--primary);
}
/* BBB banners (top/bottom of page) */
.bbb-banner {
margin: 1rem 0; padding: .9rem 1rem; border:1px solid var(--accent);
background: rgba(14,110,168,.08); border-radius:8px;
display:flex; align-items:center; gap:.75rem;
}
.bbb-banner .bbb-title { font-weight:800; color: var(--primary); margin:0; }
.bbb-banner .bbb-text { margin:0; }
.bbb-banner .bbb-actions { margin-left:auto; display:flex; gap:.5rem; }
@media (max-width: 600px){
.bbb-banner{ flex-direction:column; align-items:flex-start; }
.bbb-banner .bbb-actions{ margin-left:0; }
}
/* Programme buttons container (stacked + centered) */
.programme-cta {
display:flex; flex-direction:column; align-items:center; gap:.6rem; margin:1rem auto; text-align:center;
}
/* Speakers grid */
.speakers-grid{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap:1rem;
}
/* Static placeholders (HTML) و کارتهای داینامیک */
.speaker, .speaker-card{
background: var(--card-bg);
border:1px solid var(--card-border);
border-radius:12px;
padding:1rem;
text-align:center;
transition: box-shadow .2s;
}
.speaker:hover, .speaker-card:hover{
box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.speaker img{ width:100%; height:auto; border-radius:8px; }
/* Media wrapper for dynamic cards */
.speaker-media{
display:flex; align-items:center; justify-content:center;
min-height: 140px; background: rgba(14,110,168,.06);
border-radius:8px; overflow:hidden; margin-bottom:.5rem;
}
.speaker-media img{ width:100%; height:100%; object-fit:cover; }
/* Avatar when no photo */
.speaker-avatar{
width:90px; height:90px; border-radius:50%;
background: var(--accent); color: var(--light-text);
display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:1.5rem; letter-spacing:.02em;
}
.speaker-content{ display:flex; flex-direction:column; gap:.35rem; }
.speaker-content h3{ margin:0; font-size:1.06rem; line-height:1.2; }
.speaker-affil{ margin:0; color:#555; font-size:.95rem; }
.speaker-talk{ margin:0; color:#333; font-size:.96rem; }
/* Buttons palette override */
.btn-cta{ background: var(--accent); color: var(--light-text); border:1px solid var(--accent); }
.btn-cta:hover,.btn-cta:focus{ background: var(--primary); color: var(--secondary); border-color: var(--primary); }
.btn-ghost{ background: transparent; color: var(--accent); border:1px solid var(--accent); }
.btn-ghost:hover,.btn-ghost:focus{ background: var(--primary); color: var(--secondary); border-color: var(--primary); }
/* ===== Speakers: Badges + subtle elevation (Stage B) ===== */
.speakers-grid .speaker-card{
border: 1px solid var(--card-border, #e0e0e0);
border-radius: 1rem;
background: var(--card-bg, #fff);
box-shadow: 0 6px 18px rgba(0,0,0,.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.speakers-grid .speaker-card:hover{
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.speakers-grid .speaker-media{
aspect-ratio: 4/3;
overflow: hidden;
background: rgba(14,110,168,.06);
border-radius: .75rem;
}
.speakers-grid .speaker-media img{
width:100%; height:100%; object-fit:cover;
transition: transform .35s ease;
}
.speakers-grid .speaker-card:hover .speaker-media img{
transform: scale(1.04);
}
/* Content + link */
.speakers-grid .speaker-content h3{
margin: .35rem 0 .25rem;
font-weight: 800;
line-height: 1.2;
color: var(--text, #222);
}
.speakers-grid .speaker-link{ color: inherit; text-decoration: none; }
.speakers-grid .speaker-link:hover{ text-decoration: underline; }
.speakers-grid .speaker-affil{ margin: 0 0 .15rem; opacity:.86; }
.speakers-grid .speaker-talk{ margin: 0; opacity:.92; }
/* Badges */
.badge{
display:inline-block;
padding: .28rem .6rem;
font-size: .78rem;
font-weight: 700;
border-radius: 999px;
letter-spacing: .01em;
border: 1px solid transparent;
margin-bottom: .5rem;
}
.badge--keynote{
background: var(--primary, #5f2a2a);
color: var(--light-text, #fff);
}
.badge--contrib{
background: var(--secondary, #d4b080);
color: #222;
}
/* Avatar fallback */
.speaker-avatar{
width: 90px; height: 90px; border-radius: 50%;
display: grid; place-items: center;
font-weight: 800;
background: #ddd;
color: #333;
}
/* -- Speaker cards tidy-up -- */
.cards .card .card-image{ overflow: hidden; }
.cards .card .card-image img{ display:block; width:100%; height:auto; }
.cards .card .card-body .badge{ display:inline-block; margin-bottom:.5rem; }
/* Hide placeholders by default; show only when section is empty via JS */
.section-placeholder{ display:none; }
/* ============ Speakers: Layout & Polish ============ */
/* Grid: 3 / 2 / 1 columns scoped to speakers page */
#keynote-grid.cards,
#contrib-grid.cards {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
#keynote-grid .card,
#contrib-grid .card { grid-column: span 4; } /* desktop: 3 per row */
@media (max-width:1024px){
#keynote-grid .card,
#contrib-grid .card { grid-column: span 6; } /* tablet: 2 per row */
}
@media (max-width:640px){
#keynote-grid .card,
#contrib-grid .card { grid-column: span 12; } /* mobile: 1 per row */
}
/* Card tidy */
.cards .card .card-image{ overflow:hidden; }
.cards .card .card-image img{ display:block; width:100%; height:auto; }
.cards .card .card-body .badge{ display:inline-block; margin-bottom:.5rem; }
/* Badges: color scheme per request */
.badge{
padding:.28rem .6rem; font-size:.78rem; font-weight:700;
border-radius:999px; border:1px solid transparent; letter-spacing:.01em;
}
.badge--keynote{
background: var(--primary,#5f2a2a);
color: var(--secondary,#d4b080);
border-color: rgba(212,176,128,.55);
text-shadow: 0 0 .5px rgba(0,0,0,.25);
}
.badge--contrib{
background: var(--secondary,#d4b080);
color: var(--primary,#5f2a2a);
border-color: rgba(95,42,42,.25);
}
/* Typography hierarchy */
.speaker-content h3{ margin:.35rem 0 .25rem; font-weight:800; color:var(--text,#222); }
.speaker-talk{ font-weight:600; color:var(--text,#222); opacity:.95; margin:0 0 .1rem; }
.speaker-affil{ font-weight:400; opacity:.85; margin:0 0 .25rem; }
/* Clamp long talk titles (desktop 2 lines, mobile 3) */
.speaker-talk{
display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
-webkit-line-clamp:2;
}
@media (max-width:640px){
.speaker-talk{ -webkit-line-clamp:3; }
}
/* Hide placeholders by default; JS shows them if section is empty */
.section-placeholder{ display:none; }
/* ===== Speaker talk tooltip (CSS-only) ===== */
.speaker-card .card-body{ position: relative; }
.speaker-talk[data-full]{ position: relative; cursor: help; }
/* Bubble */
.speaker-talk[data-full]:hover::after{
content: attr(data-full);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
margin-bottom: 10px;
z-index: 50;
max-width: min(460px, 85vw);
padding: 8px 10px;
border-radius: 8px;
background: rgba(0,0,0,.88);
color: #fff;
line-height: 1.35;
text-align: start; /* LTR: left / RTL: right */
white-space: normal; /* اجازهی چند خطی */
box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
/* Small arrow */
.speaker-talk[data-full]:hover::before{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: calc(100% - 4px);
border: 6px solid transparent;
border-top-color: rgba(0,0,0,.88);
z-index: 51;
}
/* Footer logos: staggered delays & reduced-motion respect */
.institution-logos img:nth-child(1){ animation-delay: .05s; }
.institution-logos img:nth-child(2){ animation-delay: .12s; }
.institution-logos img:nth-child(3){ animation-delay: .19s; }
.institution-logos img:nth-child(4){ animation-delay: .26s; }
.institution-logos img:nth-child(5){ animation-delay: .33s; }
.institution-logos img:nth-child(6){ animation-delay: .40s; }
@media (prefers-reduced-motion: reduce){
.institution-logos img{
animation: none !important;
opacity: 1;
transform: none;
}
}
/* ===== Code of Conduct (palette + anchors) ===== */
:root {
/* اگر در پروژهات توکن رنگی داری، میتونی اینها را با آنها هماهنگ کنی */
--coc-crimson: #9b1c31; /* crimson */
--coc-gold: #c9a227; /* gold */
--coc-teal: #1f8a8a; /* teal */
}
.coc-wrap { margin-top: 1.5rem; }
.coc-jump {
border: 1px solid rgba(0,0,0,.08);
border-left: 4px solid var(--coc-gold);
padding: .75rem 1rem;
margin: 1rem 0 1.5rem;
background: rgba(201,162,39,.06);
border-radius: .5rem;
}
.coc-jump h3 {
margin: 0 0 .5rem;
font-size: 1rem;
color: var(--coc-crimson);
letter-spacing: .2px;
}
.coc-jump ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.coc-jump li a { text-decoration: none; border-bottom: 1px dashed transparent; }
.coc-jump li a:hover { border-color: currentColor; }
.coc h2, .coc h3 {
scroll-margin-top: 90px; /* تا زیر ناوبری ثابت صفحه پنهان نشود */
}
.coc h2 {
color: var(--coc-crimson);
border-bottom: 2px solid var(--coc-gold);
padding-bottom: .25rem;
margin-top: 2rem;
}
.coc h3 {
color: var(--coc-teal);
margin-top: 1.25rem;
}
.coc p { line-height: 1.7; }
.coc-section {
border-left: 3px solid rgba(31,138,138,.25);
padding-left: 1rem;
margin: 1rem 0 1.25rem;
}
.coc ul { margin: .5rem 0 1rem 1.25rem; }
.coc li { margin: .25rem 0; }
/* اسکرول نرم برای لینکهای داخلی */
html { scroll-behavior: smooth; }
/* نسخه RTL */
[dir="rtl"] .coc-jump { border-left: none; border-right: 4px solid var(--coc-gold); }
[dir="rtl"] .coc-section { border-left: none; border-right: 3px solid rgba(31,138,138,.25); padding-left: 0; padding-right: 1rem; }
/* ===== FAQ styling (crimson/gold/teal) ===== */
:root{
--coc-crimson:#9b1c31; /* crimson */
--coc-gold:#c9a227; /* gold */
--coc-teal:#1f8a8a; /* teal */
}
/* FAQ heading */
.faq-heading{
color:var(--coc-crimson);
border-bottom:2px solid var(--coc-gold);
padding-bottom:.25rem;
margin-top:3rem;
}
/* FAQ cards */
.faq-item{
border:1px solid rgba(0,0,0,.10);
border-left:4px solid var(--coc-teal);
background:#fff;
padding:1rem 1.25rem;
margin:1rem 0;
border-radius:.5rem;
box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.faq-item h3{
margin:.25rem 0 .5rem;
color:var(--coc-crimson);
font-size:1.1rem;
line-height:1.35;
}
.faq-item h3::before{
content:"❓ ";
color:var(--coc-gold);
}
.faq-item p{ margin:0; line-height:1.7; }
.faq-item + .faq-item{ margin-top:1rem; }
/* RTL tweaks */
[dir="rtl"] .faq-item{
border-left:none;
border-right:4px solid var(--coc-teal);
}
/* ===== Palette adapter for CoC & FAQ ===== */
/* سعی میکنیم از توکنهای پروژه استفاده کنیم؛ اگر نبودند، fallback داریم */
:root{
/* primary (crimson) */
--coc-crimson: var(--primary, var(--color-primary, #9b1c31));
/* accent (gold) */
--coc-gold: var(--accent, var(--color-accent, #c9a227));
/* secondary (teal) */
--coc-teal: var(--secondary, var(--color-secondary, #1f8a8a));
/* لینکها را به accent متصل میکنیم */
--coc-link: var(--accent, var(--color-accent, #1f8a8a));
}
/* لینکهای داخل CoC/FAQ به رنگ accent پروژه */
.coc a,
.coc-jump a,
.faq-item a{
color: var(--coc-link);
text-decoration: none;
border-bottom: 1px dashed transparent;
}
.coc a:hover,
.coc-jump a:hover,
.faq-item a:hover{
border-bottom-color: currentColor;
}
/* هدرهای CoC همچنان روی پالت پروژه سوار میشوند */
.coc h2{
color: var(--coc-crimson);
border-bottom: 2px solid var(--coc-gold);
}
.coc h3{ color: var(--coc-teal); }
/* باکس Jump to با پسزمینهٔ روشن مبتنی بر accent */
/* برای مرورگرهای قدیمی: یک fallback روشن ثابت */
.coc-jump{
background: #fff8e1; /* fallback */
background: color-mix(in srgb, var(--coc-gold), #ffffff 88%);
border-left: 4px solid var(--coc-gold);
}
/* RTL */
[dir="rtl"] .coc-jump{ border-left:none; border-right:4px solid var(--coc-gold); }
/* کارتهای FAQ روی secondary پروژه */
.faq-item{
border-left: 4px solid var(--coc-teal);
}
[dir="rtl"] .faq-item{ border-left:none; border-right:4px solid var(--coc-teal); }
.faq-heading{
color: var(--coc-crimson);
border-bottom: 2px solid var(--coc-gold);
}
.faq-item h3::before{ color: var(--coc-gold); }
.container .coc a,
.container .coc-jump a{ color: var(--coc-link) !important; }
.top-jump{ margin:.5rem 0 1rem; }
.top-jump .jump-link{
display:inline-block; padding:.4rem .75rem; border-radius:999px;
background:#f5ebd6;
background: color-mix(in srgb, var(--secondary, #d4b080), #ffffff 82%);
border:1px solid var(--secondary, #d4b080);
color:var(--accent, #0e6ea8); text-decoration:none; font-weight:600; line-height:1;
}
.top-jump .jump-link:hover{ filter:brightness(.96); border-color:var(--accent, #0e6ea8); }
/* === Unify FAQ jump button with global buttons (ghost style) === */
.top-jump .jump-link{
display:inline-block;
padding:.6rem 1rem;
border-radius:999px; /* شکل قرصی */
background:transparent;
border:1px solid var(--accent);
color:var(--accent);
font-weight:700;
line-height:1;
text-decoration:none;
transition:background .2s, color .2s, border-color .2s, transform .05s;
}
.top-jump .jump-link:hover,
.top-jump .jump-link:focus{
background:var(--primary);
color:var(--secondary);
border-color:var(--primary);
}
.top-jump .jump-link:active{ transform:translateY(1px); }
/* ===== Constrain FAQ width & center ===== */
/* این سلکتورها طیفی از نامهای رایج را پوشش میدهند تا حتماً یکی بخورد */
main #faq,
main .faq,
main .faq-section,
main .faq-list,
main .accordion,
main [class*="faq"],
main [id*="faq"]{
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 12px; /* کمی نفس برای لبهها */
padding-right: 12px;
}
/* خود کارتهای سؤال کمی جمعوجورتر و گردتر شوند */
main [class*="faq"] .accordion-item,
main [class*="faq"] .faq-item,
main .accordion .accordion-item{
border-radius: 12px;
overflow: hidden;
margin-block: 10px;
}
/* تیتر سؤال پررنگتر شود */
main [class*="faq"] .accordion-header,
main [class*="faq"] .faq-title{
font-weight: 700;
}
/* ریسپانسیو: تبلت کمی باریکتر؛ موبایل تمام عرض */
@media (max-width: 992px){
main #faq,
main .faq,
main .faq-section,
main .faq-list,
main .accordion,
main [class*="faq"],
main [id*="faq"]{
max-width: 780px !important;
}
}
@media (max-width: 768px){
main #faq,
main .faq,
main .faq-section,
main .faq-list,
main .accordion,
main [class*="faq"],
main [id*="faq"]{
max-width: 100% !important;
}
}
/* === Restore scroll indicator on the HOME hero only === */
header .hero { position: relative; }
.hero .scroll-indicator{
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
display: block !important; /* خنثیکردن display:none قبلی */
text-decoration: none;
font-size: 2rem;
line-height: 1;
color: var(--secondary);
animation: bounce 1.5s infinite;
}
/* روی صفحات داخلی (page-hero) حتماً مخفی باشد */
.page-hero .scroll-indicator{ display:none !important; }
@media (max-width: 768px){
.hero .scroll-indicator{ font-size:1.6rem; bottom:10px; }
}
/* === Scroll indicator alignment fix on hero === */
.hero .type-label{
margin-bottom: 2.5rem; /* پایینتر بیاد تا فلش جا داشته باشه */
display: block;
}
.hero .scroll-indicator{
position: absolute;
left: 50%;
bottom: 12px; /* همیشه کمی فاصله از لبه پایین */
transform: translateX(-50%);
display: block !important;
font-size: 2rem;
color: var(--secondary);
animation: bounce 1.5s infinite;
z-index: 5; /* روی عکس و نوشتهها قرار بگیره */
}
@media (max-width: 768px){
.hero .scroll-indicator{
font-size: 1.6rem;
bottom: 8px;
}
.hero .type-label{
margin-bottom: 2rem;
}
}
/* === FORCE SHOW: Home hero scroll indicator === */
header .hero{ position: relative; } /* مرجعِ absolute */
:where(header .hero) a.scroll-indicator{
position: absolute;
left: 50%;
bottom: 16px; /* کمی فاصله از لبه */
transform: translateX(-50%);
display: flex !important; /* خنثی کردن display:none */
align-items: center;
justify-content: center;
width: 46px; height: 46px; /* دایرهای تمیز */
border-radius: 999px;
text-decoration: none;
font-size: 22px; line-height: 1;
color: var(--secondary);
border: 1px solid var(--secondary);
background: rgba(0,0,0,.25); /* خوانایی روی عکس */
backdrop-filter: blur(2px);
box-shadow: 0 2px 10px rgba(0,0,0,.25);
animation: bounce 1.5s infinite;
z-index: 50; /* بالاتر از اوورلِی/منو */
pointer-events: auto;
}
/* اگر صفحه داخلی است، قطعاً مخفی باشد */
.page-hero .scroll-indicator{ display: none !important; }
/* فاصله دادن به لیبل تا با فلش تداخل نکند */
.hero .type-label{ display:block; margin-bottom: 2.4rem; }
@media (max-width: 768px){
:where(header .hero) a.scroll-indicator{ width: 40px; height: 40px; font-size: 20px; bottom: 12px; }
.hero .type-label{ margin-bottom: 2rem; }
}
/* === Minimal scroll arrow: no pill, clearly visible, higher above bottom === */
header .hero { position: relative; }
/* نشاندادنِ اجباری و جابهجایی به بالا */
header .hero .scroll-indicator{
position: absolute;
left: 50%;
bottom: 56px; /* ← از لبه پایین بالا میآید؛ اگر باز هم کم است، 64–72px کن */
transform: translateX(-50%);
display: block !important; /* خنثی کردن display:none های قبلی */
font-size: 2.2rem; /* فلش بزرگتر */
line-height: 1;
color: #fff;
text-decoration: none;
text-shadow: 0 2px 4px rgba(0,0,0,.45); /* خوانایی روی عکس */
animation: bounce 1.5s infinite;
z-index: 50; /* بالای اورلی و نوار منو */
background: none; /* بدون دایره/قرص */
border: none;
}
/* کمی فضا زیر لیبل بده تا با فلش تداخل نکند */
.hero .type-label{ display:block; margin-bottom: 2.8rem; }
@media (max-width: 768px){
header .hero .scroll-indicator{ font-size: 1.8rem; bottom: 48px; }
.hero .type-label{ margin-bottom: 2.2rem; }
}
/* ================================
RTL fixes for Persian pages
================================ */
html[lang="fa"] .hero .hero-content,
html[lang="fa"] .page-hero .hero-content {
text-align: right !important;
direction: rtl !important;
}
html[lang="fa"] .hero .hero-title,
html[lang="fa"] .page-hero .hero-title,
html[lang="fa"] .hero .hero-subtitle,
html[lang="fa"] .page-hero .hero-subtitle {
text-align: right !important;
direction: rtl !important;
}
/* ==== Persian (RTL) global hero alignment – applies to ALL /fa/ pages ==== */
/* Home hero (already ok, keep for safety) */
html[lang="fa"] .hero .hero-content{
text-align:right !important;
direction:rtl !important;
}
html[lang="fa"] .hero .hero-title,
html[lang="fa"] .hero .hero-subtitle{
text-align:right !important;
direction:rtl !important;
}
/* Internal pages use .page-hero .hero-mini */
html[lang="fa"] .page-hero .hero-mini{
text-align:right !important;
direction:rtl !important;
right:2rem !important; /* به راست بچسبد */
left:auto !important; /* چپ را خنثی کن */
align-items:flex-end !important; /* آیتمهای داخل مینیهرو راستچین شوند */
}
/* متنهای داخل مینیهرو */
html[lang="fa"] .page-hero .hero-mini h1,
html[lang="fa"] .page-hero .hero-mini .hero-title,
html[lang="fa"] .page-hero .hero-mini .hero-subtitle,
html[lang="fa"] .page-hero .hero-mini .date,
html[lang="fa"] .page-hero .hero-mini .type-label{
text-align:right !important;
direction:rtl !important;
}
/* موبایل: کمی فاصله امن از راست */
@media (max-width:768px){
html[lang="fa"] .page-hero .hero-mini{ right:1rem !important; }
}
/* Persian internal pages hero fix */
html[lang="fa"] .page-hero .hero-mini {
text-align: right !important;
direction: rtl !important;
margin-left: auto !important; /* ← کل باکس رو هل بده سمت راست */
margin-right: 2rem !important; /* فاصله امن از لبه راست */
max-width: 600px; /* برای اینکه کش نیاد کل صفحه رو پر کنه */
}
/* ==== Global FA fixes: internal page hero ==== */
/* 1) جای درست باکس مینیهرو در RTL: به راست پین شود */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini{
left: auto !important;
right: 2rem !important; /* فاصلهٔ امن از لبهٔ راست */
text-align: right !important;
direction: rtl !important;
align-items: flex-end !important; /* لوگو/تیتر/تاریخ همگی راستچین شوند */
}
/* 2) متنهای داخل باکس (لوگو تاثیری از text-align نمیگیرد، بقیه میگیرند) */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .date,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .type-label{
text-align: right !important;
direction: rtl !important;
}
/* 3) کمک برای موبایل */
@media (max-width: 768px){
html[lang="fa"][dir="rtl"] .page-hero .hero-mini{ right: 1rem !important; }
}
/* 4) (هوم) همین راستچینسازی برای هدر صفحهٔ اصلی فارسی */
html[lang="fa"][dir="rtl"] .hero .hero-content,
html[lang="fa"][dir="rtl"] .hero .hero-title,
html[lang="fa"][dir="rtl"] .hero .hero-subtitle{
text-align: right !important;
direction: rtl !important;
}
/* اگر جایی از قبل بهاشتباه .hero-logo را هدف گرفتهای،
برای لوگوی هدر فارسی این را هم اضافه کن: */
html[lang="fa"][dir="rtl"] .header-logo{
align-self: flex-end !important;
}
/* ==== FINAL: Persian (/fa/) global hero fix – internal pages & home ==== */
/* صفحهٔ اصلی (هوم) – برای اطمینان */
html[lang="fa"] .hero .hero-content,
html[lang="fa"] .hero .hero-title,
html[lang="fa"] .hero .hero-subtitle{
text-align: right !important;
direction: rtl !important;
}
/* صفحات داخلی: باکس مینیهرو را از «وسط» به «راست» ببریم */
html[lang="fa"] .page-hero .hero-mini{
/* راستچینسازی متن و جهت */
direction: rtl !important;
text-align: right !important;
/* کشتن قوانین مرکزچین قبلی */
left: auto !important;
right: 2rem !important; /* فاصلهٔ امن از لبهٔ راست */
transform: none !important; /* اگر قبلاً translateX(-50%) بوده */
margin: 0 !important;
/* چینش داخلی مرتب کنار راست */
display: flex !important;
flex-direction: column;
align-items: flex-end !important; /* لوگو/تیتر/تاریخ/دکمه راستچین شوند */
gap: .5rem;
/* پهنای معقول روی دسکتاپ */
max-width: clamp(420px, 48vw, 680px);
}
/* همهٔ فرزندان مینیهرو هم راستچین بمانند */
html[lang="fa"] .page-hero .hero-mini > *{
text-align: right !important;
direction: rtl !important;
}
/* تاریخ/لیبل/دکمه را کنار راست بچسبان */
html[lang="fa"] .page-hero .hero-mini .date,
html[lang="fa"] .page-hero .hero-mini .type-label,
html[lang="fa"] .page-hero .hero-mini .btn{
align-self: flex-end !important;
}
/* موبایل: فاصلهٔ کمتر و پهنای بیشتر */
@media (max-width: 768px){
html[lang="fa"] .page-hero .hero-mini{
right: 1rem !important;
max-width: 90vw;
}
}
/* ==== FINAL PATCH — Persian (/fa/) hero, all internal pages ==== */
/* باکس مینیهِرو را از چپ/مرکز به راست پین کن و چینش داخلی را راستچین کن */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini{
/* کشتن تنظیمات قبلی که آن را چپ/مرکزی میکردند */
left: auto !important;
right: 2rem !important;
transform: none !important;
margin: 0 !important;
/* راستچین واقعی */
direction: rtl !important;
text-align: right !important;
/* ترازبندی عناصر داخل باکس */
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: .5rem;
max-width: clamp(420px, 48vw, 680px);
}
/* همهٔ فرزندها (لوگو، عنوان، تاریخ، لیبل، دکمه) راستچین و کنار راست */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini > *{
text-align: right !important;
direction: rtl !important;
align-self: flex-end !important;
}
/* موبایل: فاصلهٔ امن از راست و پهنای مناسب */
@media (max-width: 768px){
html[lang="fa"][dir="rtl"] .page-hero .hero-mini{
right: 1rem !important;
max-width: 92vw;
}
}
/* هوم قبلاً درست شد؛ برای اطمینان این دو تا نگه داشته شود */
html[lang="fa"][dir="rtl"] .hero .hero-content,
html[lang="fa"][dir="rtl"] .hero .hero-title,
html[lang="fa"][dir="rtl"] .hero .hero-subtitle{
text-align: right !important;
direction: rtl !important;
}
/* ==== FINAL RTL PATCH — applies to ALL Persian pages (/fa/) ==== */
/* 1) کل باکس مینیهرو را در صفحات داخلی به راست پین کن (حتی از .hero-bg هم قویتر) */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
left: auto !important;
right: 2rem !important;
transform: none !important;
margin: 0 !important;
/* راستچین واقعی داخل باکس */
direction: rtl !important;
text-align: right !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: .5rem;
}
/* 2) همه اجزای داخل (لوگو، تیتر، زیرتیتر، تاریخ، دکمه) کنارِ راست و راستچین */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini > *,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .date,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .type-label,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .btn{
text-align: right !important;
direction: rtl !important;
align-self: flex-end !important;
}
/* 3) فارسی: حروف بزرگ اجباری و کشیدگی اضافی را خنثی کن */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1 > span{
text-transform: none !important;
letter-spacing: .02em !important;
}
/* 4) هدر صفحهٔ اصلی فارسی هم راستچین بماند */
html[lang="fa"][dir="rtl"] .hero .hero-content,
html[lang="fa"][dir="rtl"] .hero .hero-title,
html[lang="fa"][dir="rtl"] .hero .hero-subtitle{
direction: rtl !important;
text-align: right !important;
}
/* 5) موبایل: فاصلهٔ امن از راست */
@media (max-width: 768px){
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
right: 1rem !important;
max-width: 92vw;
}
}
/* === ATOMIC RTL FIX for all Persian internal heroes === */
/* خودِ باکس مینیهرو را به راست پین کن و همهٔ مرکز/چپکردنهای قبلی را نابود کن */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
/* تمام پوزیشنهای قبلی را بیاثر کن */
left: auto !important;
right: auto !important;
inset-inline-start: auto !important; /* منطقمحور (LTR/RTL) */
inset-inline-end: 2rem !important; /* = right در RTL */
transform: none !important; /* اگر translateX(-50%) بود */
margin: 0 !important;
/* راستچین واقعی */
direction: rtl !important;
text-align: right !important;
/* چینش داخلی مرتب در کنار راست */
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: .5rem;
max-width: clamp(420px, 48vw, 680px);
}
/* متن و عناصر داخل باکس (لوگو، تیتر، زیرتیتر، تاریخ، دکمه) */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini > *,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .date,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .type-label,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .btn{
text-align: right !important;
direction: rtl !important;
align-self: flex-end !important;
}
/* صفحهٔ اصلی (برای اینکه پایدار بماند) */
html[lang="fa"][dir="rtl"] .hero .hero-content,
html[lang="fa"][dir="rtl"] .hero .hero-title,
html[lang="fa"][dir="rtl"] .hero .hero-subtitle{
text-align: right !important;
direction: rtl !important;
}
/* موبایل: فاصله امن و پهنای مناسب */
@media (max-width: 768px){
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
inset-inline-end: 1rem !important;
max-width: 92vw;
}
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1 > span{
text-transform: none !important;
letter-spacing: .02em !important;
}
/* === RTL fix: pin internal hero box to RIGHT on all Persian pages === */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
left: auto !important;
right: 2rem !important; /* به راستِ تصویر بچسبد */
transform: none !important; /* اگر translateX(-50%) بوده */
margin: 0 !important;
direction: rtl !important;
text-align: right !important;
display: flex !important;
flex-direction: column;
align-items: flex-end; /* لوگو/تیتر/تاریخ/دکمه کنار راست */
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini > *{
align-self: flex-end !important;
text-align: right !important;
}
/* (اختیاری) موبایل: کمی فاصله کمتر */
@media (max-width:768px){
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
right: 1rem !important;
}
}
/* === FINAL FORCE-RTL for ALL Persian internal heroes === */
/* کل باکس مینیهرو را به راست پین کن و هر مرکز/چپ قبلی را خنثی کن */
html[lang="fa"][dir="rtl"] .page-hero{ position: relative !important; }
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
position: absolute !important;
/* فقط راست؛ چپ را کامل خاموش کن */
right: 2rem !important;
left: auto !important;
inset-inline-end: 2rem !important;
inset-inline-start: auto !important;
bottom: 1.5rem !important;
/* هرگونه مرکزچین قبلی */
transform: none !important;
margin: 0 !important;
/* راستچین واقعی داخل باکس */
direction: rtl !important;
text-align: right !important;
/* چینش داخلی یکدست کنار راست */
display: grid !important;
justify-items: end !important;
align-content: center !important;
gap: .5rem;
max-width: clamp(420px, 48vw, 720px);
}
/* همهٔ اجزا (لوگو، تیتر، زیرتیتر، تاریخ، دکمه) با یک لبهٔ راست مشترک */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini > *{
justify-self: end !important;
align-self: end !important;
text-align: right !important;
direction: rtl !important;
margin: 0 !important;
padding: 0 !important;
}
/* خودِ لوگو هم به راست بچسبد (اگر کلاس hero-logo یا img است) */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-logo,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini img{
justify-self: end !important;
align-self: center !important; /* عمودی وسط، افقی راست */
display: block !important;
}
/* قوانین بدِ تایپو برای فارسی را خنثی کن */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1{ text-transform: none !important; letter-spacing:.02em !important; }
/* موبایل: کمی فاصلهٔ کمتر از راست */
@media (max-width:768px){
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
right: 1rem !important;
inset-inline-end: 1rem !important;
max-width: 92vw;
}
}
/* هوم هم پایدار راستچین بماند */
html[lang="fa"][dir="rtl"] .hero .hero-content,
html[lang="fa"][dir="rtl"] .hero .hero-title,
html[lang="fa"][dir="rtl"] .hero .hero-subtitle{
direction: rtl !important;
text-align: right !important;
}
/* === FINAL RTL FIX for ALL Persian pages (/fa/) === */
/* اطمینان از موقعیت مرجع */
html[lang="fa"][dir="rtl"] .page-hero { position: relative !important; }
/* خودِ باکس هدرِ صفحات داخلی */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
position: absolute !important;
inset-inline-end: 2rem !important; /* = right در RTL */
inset-inline-start: auto !important; /* = left را خاموش کن */
bottom: 1.5rem !important;
/* هر مرکز/چپ قبلی را نابود کن */
right: 2rem !important;
left: auto !important;
transform: none !important;
margin: 0 !important;
/* چینش داخلی یکپارچه کنار راست (مثل هوم) */
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: .5rem !important;
direction: rtl !important;
text-align: right !important;
max-width: clamp(420px, 48vw, 720px);
}
/* اجزای داخل باکس: لوگو، تیتر، زیرتیتر، تاریخ، دکمه — همه راستچسب */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini > *,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-logo,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini img,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .date,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .btn{
align-self: flex-end !important;
justify-self: end !important;
text-align: right !important;
direction: rtl !important;
margin: 0 !important;
padding: 0 !important;
}
/* تایپو: قوانین مناسبِ فارسی */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini h1 > span{
text-transform: none !important;
letter-spacing: .02em !important;
}
/* هدر صفحهٔ اصلی فارسی */
html[lang="fa"][dir="rtl"] .hero .hero-content,
html[lang="fa"][dir="rtl"] .hero .hero-title,
html[lang="fa"][dir="rtl"] .hero .hero-subtitle{
direction: rtl !important;
text-align: right !important;
}
/* موبایل: فاصلهٔ امن از راست */
@media (max-width:768px){
html[lang="fa"][dir="rtl"] .page-hero .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini{
inset-inline-end: 1rem !important;
right: 1rem !important;
max-width: 92vw;
}
}
/* =====================================================================
FINAL FIX — Persian internal pages hero (align like home page)
Place at END of css/style.css (this block uses higher specificity).
===================================================================== */
/* 1) Base: internal page hero mini-box sticks to bottom‑right on FA/RTL */
html[lang="fa"][dir="rtl"] .page-hero.hero-bg > .hero-mini,
html[lang="fa"][dir="rtl"] .page-hero > .hero-mini{
position: absolute !important;
bottom: 1.25rem !important;
right: 1.25rem !important; /* fallback */
inset-inline-end: 1.25rem !important; /* logical */
left: auto !important;
inset-inline-start: auto !important;
max-width: 48rem !important;
text-align: right !important;
direction: rtl !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
transform: none !important;
margin: 0 !important;
}
/* 2) Logo inside hero-mini should hug the right edge (like home) */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .header-logo{
align-self: flex-end !important;
margin: 0 0 .8rem 0 !important;
width: 140px !important;
height: auto !important;
}
/* 3) Typography: same visual rhythm as home page */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title{
margin: 0 !important;
color: #fff !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: .02em !important;
text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
max-width: 28ch !important;
font-size: clamp(2rem, 4vw + .5rem, 3.2rem) !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title span{display:block}
/* 3b) Third line (subtitle) smaller than title lines */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle{
margin: .35em 0 0 !important;
color: #fff !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: .03em !important;
text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
max-width: 50ch !important;
font-size: clamp(1.1rem, 1.6vw + .4rem, 1.8rem) !important;
}
/* 3c) Date + label follow the right edge */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .date,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .type-label{
text-align: right !important;
direction: rtl !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .type-label{
display:inline-block !important;
margin-top:.4rem !important;
}
/* 4) Mobile behavior — mirror home page */
@media (max-width: 768px){
html[lang="fa"][dir="rtl"] .page-hero{
height: 70vh !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini{
inset-inline-end: 1rem !important;
right: 1rem !important;
max-width: 92vw !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .header-logo{width: 120px !important}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title{
font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
line-height: 1.15 !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle{
font-size: clamp(1rem, 3.3vw, 1.3rem) !important;
line-height: 1.25 !important;
}
}
/* 5) Guard against any unintended center/left rules from earlier */
html[lang="fa"][dir="rtl"] .page-hero{
text-align: right !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini *{
text-align: right !important;
direction: rtl !important;
}
/* ===================================================================== */
/* === FINAL FIX: Internal FA pages hero alignment === */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini {
position: absolute !important;
bottom: 1.5rem !important;
inset-inline-end: 1.5rem !important;
inset-inline-start: auto !important;
left: auto !important;
right: 1.5rem !important;
text-align: right !important;
direction: rtl !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
transform: none !important;
margin: 0 !important;
max-width: 48rem !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .header-logo {
align-self: flex-end !important;
margin: 0 0 1rem 0 !important;
width: 140px !important;
height: auto !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title {
margin: 0 !important;
color: #fff !important;
font-weight: 800 !important;
line-height: 1.1 !important;
font-size: clamp(2rem, 4vw + .5rem, 3rem) !important;
text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title span {
display: block;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle {
margin-top: .5rem !important;
font-size: clamp(1.1rem, 2.5vw, 1.6rem) !important;
color: #fff !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
@media (max-width: 768px) {
html[lang="fa"][dir="rtl"] .page-hero .hero-mini {
inset-inline-end: 1rem !important;
right: 1rem !important;
max-width: 92vw !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .header-logo {
width: 110px !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title {
font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle {
font-size: clamp(1rem, 3.5vw, 1.3rem) !important;
}
}
/* ===== HARD OVERRIDE — FA internal pages align like home (bottom-right) ===== */
/* 0) Parent containers of hero: stop centering and allow right packing */
html[lang="fa"][dir="rtl"] .page-hero,
html[lang="fa"][dir="rtl"] .page-hero .container,
html[lang="fa"][dir="rtl"] .page-hero .wrapper {
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important; /* vertical: bottom */
align-items: flex-end !important; /* horizontal: right */
text-align: right !important;
direction: rtl !important;
}
/* 1) Kill any legacy centering on hero box */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini {
position: absolute !important;
bottom: 1.5rem !important;
inset-inline-end: 1.5rem !important; /* right in RTL */
inset-inline-start: auto !important;
right: 1.5rem !important; /* physical fallback */
left: auto !important;
transform: none !important;
margin: 0 !important;
max-width: 48rem !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
text-align: right !important;
direction: rtl !important;
}
/* 1b) If any generic .center/.centered class is present inside hero, neutralize it */
html[lang="fa"][dir="rtl"] .page-hero .center,
html[lang="fa"][dir="rtl"] .page-hero .centered {
left: auto !important;
right: auto !important;
transform: none !important;
text-align: right !important;
margin: 0 !important;
}
/* 2) Logo hugs right */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .header-logo{
align-self: flex-end !important;
margin: 0 0 .9rem 0 !important;
width: 140px !important;
height: auto !important;
}
/* 3) Typography like home */
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title{
margin: 0 !important;
color: #fff !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: .02em !important;
text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
font-size: clamp(2rem, 4vw + .5rem, 3.2rem) !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title span{display:block}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle{
margin: .4rem 0 0 !important;
color: #fff !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: .03em !important;
text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
font-size: clamp(1.05rem, 1.6vw + .4rem, 1.7rem) !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .date,
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .type-label{
text-align: right !important;
direction: rtl !important;
}
/* 4) Mobile mirror */
@media (max-width: 768px){
html[lang="fa"][dir="rtl"] .page-hero{ height: 70vh !important; }
html[lang="fa"][dir="rtl"] .page-hero .hero-mini{
inset-inline-end: 1rem !important;
right: 1rem !important;
max-width: 92vw !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .header-logo{ width: 116px !important; }
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-title{
font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
line-height: 1.15 !important;
}
html[lang="fa"][dir="rtl"] .page-hero .hero-mini .hero-subtitle{
font-size: clamp(1rem, 3.3vw, 1.3rem) !important;
}
}
/* ===== KILL-CENTER OVERRIDE (FA internal pages) — place as LAST lines ===== */
/* 0) Force hero parents to pack bottom-right (no centering) */
html[lang="fa"] .page-hero,
html[lang="fa"] .page-hero .container,
html[lang="fa"] .page-hero .wrapper {
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important; /* bottom */
align-items: flex-end !important; /* right */
text-align: right !important;
direction: rtl !important;
}
/* 1) Nuke any centering on the hero box itself (handles generic classnames too) */
html[lang="fa"] .page-hero .hero-mini,
html[lang="fa"] .page-hero [class*="hero-mini"] {
position: absolute !important;
bottom: 1.5rem !important;
inset-inline-end: 1.5rem !important; /* RTL logical right */
inset-inline-start: auto !important;
right: 1.5rem !important; /* physical fallback */
left: auto !important;
transform: none !important;
margin: 0 !important;
max-width: 48rem !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
text-align: right !important;
direction: rtl !important;
}
/* 1b) If any .center/.centered class is present inside hero, neutralize it */
html[lang="fa"] .page-hero .center,
html[lang="fa"] .page-hero .centered {
left: auto !important;
right: auto !important;
transform: none !important;
text-align: right !important;
margin: 0 !important;
}
/* 2) Logo hugs the right edge */
html[lang="fa"] .page-hero .hero-mini .header-logo,
html[lang="fa"] .page-hero [class*="hero-mini"] .header-logo {
align-self: flex-end !important;
margin: 0 0 .9rem 0 !important;
width: 140px !important;
height: auto !important;
}
/* 3) Typography like home */
html[lang="fa"] .page-hero .hero-mini .hero-title{
margin: 0 !important;
color: #fff !important;
font-weight: 800 !important;
line-height: 1.1 !important;
text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
font-size: clamp(2rem, 4vw + .5rem, 3.2rem) !important;
}
html[lang="fa"] .page-hero .hero-mini .hero-title span{display:block}
html[lang="fa"] .page-hero .hero-mini .hero-subtitle{
margin-top: .4rem !important;
color: #fff !important;
font-weight: 800 !important;
line-height: 1.2 !important;
text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
font-size: clamp(1.05rem, 1.6vw + .4rem, 1.7rem) !important;
}
/* 4) Mobile mirror (like home) */
@media (max-width: 768px){
html[lang="fa"] .page-hero{ height: 70vh !important; }
html[lang="fa"] .page-hero .hero-mini{
inset-inline-end: 1rem !important;
right: 1rem !important;
max-width: 92vw !important;
}
html[lang="fa"] .page-hero .hero-mini .header-logo{ width: 116px !important; }
html[lang="fa"] .page-hero .hero-mini .hero-title{
font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
}
html[lang="fa"] .page-hero .hero-mini .hero-subtitle{
font-size: clamp(1rem, 3.3vw, 1.3rem) !important;
}
}
/* ==== RTL dropdown fix (FA) – place at END of css/style.css ==== */
.main-nav .dropdown { position: relative; }
.main-nav > .nav-container > nav > ul > li { position: relative; }
.main-nav .dropdown-menu {
position: absolute;
right: 0; /* برای RTL */
top: 100%;
display: none;
background: #5b2622; /* همان رنگ پسزمینهٔ نوار ناوبری */
padding: .5rem 0;
border-radius: .5rem;
box-shadow: 0 6px 16px rgba(0,0,0,.15);
z-index: 1000; /* بالاتر از آیتمهای بعدی */
}
.main-nav .dropdown:hover .dropdown-menu { display: block; }
/* جلوگیری از همپوشانی hoverها در کنار هم */
.main-nav .dropdown-menu li a {
display: block;
white-space: nowrap;
padding: .45rem 1rem;
}
/* ==== Speakers FA layout fix ==== */
#keynote-grid, #contrib-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(1, 1fr); /* موبایل */
}
@media (min-width: 640px) {
#keynote-grid, #contrib-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
#keynote-grid, #contrib-grid { grid-template-columns: repeat(3, 1fr); }
}
/* کارتها تمامقد و بدون کشیدگی افقی */
.speaker-card { height: 100%; }
/* Placeholderهای پهن (سهستونه را میشکنند) را در نسخهٔ FA پنهان کن */
html[lang="fa"] .speakers-section .placeholder,
html[lang="fa"] .speakers-section .section-placeholder { display: none; }
/* اگر جایی کلاس قدیمی .speaker بهجای .speaker-card داشت */
html[lang="fa"] .speakers-grid .speaker { width: 100%; }
/* === FINAL OVERRIDES: FA speakers grid === */
html[lang="fa"] #keynote-grid.cards,
html[lang="fa"] #contrib-grid.cards{
display:grid !important;
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
gap:1.25rem;
}
@media (max-width: 1024px){
html[lang="fa"] #keynote-grid.cards,
html[lang="fa"] #contrib-grid.cards{
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px){
html[lang="fa"] #keynote-grid.cards,
html[lang="fa"] #contrib-grid.cards{
grid-template-columns: 1fr !important;
}
}
/* خنثیسازی هر span اجباری که تمامعرض میکرد */
html[lang="fa"] #keynote-grid .card,
html[lang="fa"] #contrib-grid .card{
grid-column: auto !important;
}
/* ===== Balanced title lines (final version) ===== */
/* صفحه اصلی */
.hero-title .line-1 {
white-space: nowrap;
display: inline-block;
letter-spacing: 0.032em; /* فاصله طبیعی بین حروف */
word-spacing: 0.05em; /* خیلی کم، فقط برای طبیعی بودن */
}
.hero-title .line-2 {
letter-spacing: 0.01em; /* اندکی برای همخوانی */
}
/* صفحات داخلی (.page-hero) */
.page-hero .hero-mini h1 span:first-child {
white-space: nowrap;
display: inline-block;
letter-spacing: 0.032em;
word-spacing: 0.05em;
}
.page-hero .hero-mini h1 span:last-child {
letter-spacing: 0.01em;
}
/* موبایل: اجازه شکست و سادهتر */
@media (max-width: 768px){
.hero-title .line-1,
.page-hero .hero-mini h1 span:first-child {
white-space: normal;
letter-spacing: 0.018em;
word-spacing: 0.02em;
}
}
/* Home */
.hero-title .line-1{
white-space: nowrap;
display: inline-block;
letter-spacing: 0.034em; /* قبلی را 0.002–0.004em زیاد کن */
word-spacing: 0.02em; /* خیلی کم و طبیعی */
}
.hero-title .line-2{ letter-spacing: 0.008em; } /* بسیار جزئی برای همخوانی */
/* صفحات داخلی */
.page-hero .hero-mini h1 span:first-child{
white-space: nowrap;
display: inline-block;
letter-spacing: 0.032em; /* کمی کمتر از هوم تا تیتر نرم بماند */
word-spacing: 0.02em;
}
.page-hero .hero-mini h1 span:last-child{ letter-spacing: 0.008em; }
/* سابتایتل: کنترل طول برای همه صفحات بدون تغییر ساختار .page-hero */
.hero-subtitle{ max-width: 36ch; } /* اگر Home کوتاهتر شد: 38ch کن */
/* Speakers – CTA */
.abstract-cta { margin-top: .5rem; }
.btn.btn-xs { padding: .3rem .6rem; font-size: .9rem; line-height: 1.1; }
.btn.btn-xs:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* === Abstracts list layout === */
#abstracts-list { margin-top: 1rem; }
.abstract-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.abstract-row .text { flex: 1 1 auto; min-width: 0; }
.abstract-title { margin: 0 0 .35rem; font-size: 1.2rem; line-height: 1.3; }
.abstract-sub { margin: 0; color: #555; font-size: .96rem; }
.abstract-actions { flex: 0 0 auto; align-self: center; }
.btn.btn-lg { padding: .7rem 1.25rem; font-size: 1.05rem; line-height: 1.1; }
/* disabled state (اگر PDF نبود) */
a.btn.disabled { pointer-events: none; opacity: .55; }
/* موبایل: دکمه بیاید زیر متن */
@media (max-width: 700px) {
.abstract-row { flex-direction: column; align-items: stretch; }
.abstract-actions { margin-top: .5rem; align-self: flex-start; }
}
/* Avoid first-paint flash on keyed heroes (e.g., abstracts) */
.page-hero.hero-bg[data-hero-key]{
background-image: none; /* جلوی عکس پیشفرض را میگیرد */
background-color: #f2f2f2; /* جایگزین آرام تا عکس بیاید */
background-image: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.12));
}
/* اختیاری: یک محوشدن خیلی لطیف هنگام جاگذاری تصویر نهایی */
.page-hero.hero-bg[data-hero-key]{
transition: background-image .15s ease-in, background-color .2s ease-in;
}
/* Subtle grey fallback for all heroes before image loads */
:root{
--hero-fallback-bg: #f2f2f2; /* پسزمینهی روشن */
--hero-fallback-grad-top: rgba(0,0,0,.05); /* خیلی ملایم */
--hero-fallback-grad-bot: rgba(0,0,0,.12);
}
.page-hero.hero-bg{
background-color: var(--hero-fallback-bg);
background-image: linear-gradient(
180deg,
var(--hero-fallback-grad-top),
var(--hero-fallback-grad-bot)
);
transition: background-image .15s ease-in, background-color .2s ease-in;
}
/* === INTERNAL HERO: adjustable height (final override) === */
:root{
--internal-hero-desktop: 75vh; /* این را تغییر بده و تست کن (مثلاً 64–80vh) */
--internal-hero-mobile: 52vh; /* برای موبایل، مثلاً 48–60vh */
}
.page-hero,
.page-hero.hero-bg{
height: var(--internal-hero-desktop) !important;
min-height: var(--internal-hero-desktop) !important;
background-size: cover; /* همان رفتار قبلی: پرِ کادر */
background-position: center center;/* اگر سوژه بالا میرود، کنارش کن: center 35% */
}
@media (max-width: 768px){
.page-hero,
.page-hero.hero-bg{
height: var(--internal-hero-mobile) !important;
min-height: var(--internal-hero-mobile) !important;
background-position: center top; /* مثل قبل، سوژه کمی بالاتر بماند */
}
}
/* === FOOTER LINKS vs LOGOS SPACING === */
footer .footer-links {
margin-bottom: 100px; /* فاصله بین لینکها و لوگوها */
}
footer .institution-logos {
margin-top: 20px; /* اطمینان از جدا بودن لوگوها */
}
footer .institution-logos img {
margin: 0 10px; /* فاصله افقی بین خودِ لوگوها */
max-height: 70px; /* اگر خواستی ارتفاع لوگوها محدود شه */
}
/* === Featured Booklet Button (palette-aligned) === */
.programme-cta.booklet{
margin-bottom: 18px;
text-align: center;
}
.btn-booklet{
display: inline-block;
padding: 14px 32px;
font-size: 1.15rem;
font-weight: 700;
background: var(--primary); /* #5f2a2a */
color: var(--light-text); /* خوانایی بهتر روی primary */
border: 2px solid var(--secondary); /* نوار طلایی هماهنگ */
border-radius: 8px;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0,0,0,.15);
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .05s;
}
.btn-booklet:hover,
.btn-booklet:focus{
background: var(--secondary); /* #d4b080 */
color: var(--primary); /* الگوی سایت در hover */
border-color: var(--secondary);
transform: translateY(-2px);
}
/* === Programme CTAs: consistent sizing & spacing (EN/FA) === */
.programme-cta,
.programme-cta.booklet{
display: flex;
flex-direction: column; /* دکمهها زیر هم */
align-items: center; /* وسطچین */
gap: 10px; /* فاصله یکنواخت بین دکمهها */
}
/* پایهی یکنواخت برای همه دکمهها */
.programme-cta .btn,
.programme-cta .btn-cta,
.programme-cta .btn-ghost,
.programme-cta.booklet .btn-booklet{
line-height: 1.15;
border-radius: 8px;
white-space: nowrap; /* جلوگیری از رفتن به خط بعدی در فارسی */
}
/* سلسلهمراتب اندازهها (پلهای) – پیشفرض عمومی */
.btn-booklet { /* بزرگتر */
padding: 14px 32px;
font-size: 1.15rem;
}
.programme-cta .btn-cta { /* متوسط */
padding: 12px 24px;
font-size: 1rem;
}
.programme-cta .btn-ghost { /* کوچکتر */
padding: 10px 20px;
font-size: 0.95rem;
}
/* بهینهسازی برای فارسی (به خاطر متریک فونت RTL) */
html[lang="fa"] .btn-booklet {
font-size: 1.12rem; /* کمی جمعوجورتر تا نسبتها شبیه EN شود */
padding: 14px 30px;
}
html[lang="fa"] .programme-cta .btn-cta {
font-size: 0.98rem;
padding: 12px 22px;
}
html[lang="fa"] .programme-cta .btn-ghost {
font-size: 0.93rem;
padding: 10px 18px;
}
/* ===== SPEAKERS CARD TIDY ===== */
/* گرید کارتها همقد شوند */
.cards {
align-items: stretch;
}
.cards .card {
height: 100%;
}
/* بدنهٔ کارت فلکسی: CTA پایین بچسبد، تیتر/متن بالا مرتب */
.speaker-card .card-body,
.speaker-card .speaker-content {
display: flex;
flex-direction: column;
}
/* بج (Keynote/Contributed) یکدست و جدا از متن */
.speaker-card .badge {
align-self: center;
margin-bottom: 0.5rem;
}
/* نام ارائهدهنده: خطکش و جلوگیری از شکستهای بد */
.speaker-card .name {
margin: 0 0 0.25rem 0;
line-height: 1.2;
overflow-wrap: anywhere;
hyphens: auto;
}
/* وابستگی: یک خط بیشتر نشان نده */
.speaker-card .speaker-affil {
margin: 0 0 0.35rem 0;
line-height: 1.25;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
/* عنوان ارائه: 2–3 خط ثابت، با حداقل ارتفاع؛ یکنواختی ارتفاع کارتها */
.speaker-card .speaker-talk {
margin: 0 0 0.75rem 0;
line-height: 1.35;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* اگر 2 خط میخواهی: 2 */
overflow: hidden;
min-height: calc(1.35em * 3); /* همارتفاع با 3 خط */
overflow-wrap: anywhere;
hyphens: auto;
}
/* CTA همیشه پایین کارت بنشیند */
.speaker-card .abstract-cta {
margin-top: auto;
}
/* ریزبهبود فاصلهها در موبایل */
@media (max-width: 768px) {
.speaker-card .speaker-talk { -webkit-line-clamp: 2; min-height: calc(1.35em * 2); }
}
/* --- fix weird gaps in speaker talk titles --- */
.speaker-card .speaker-talk,
.speaker-card p.speaker-talk {
text-align: start; /* LTR/RTL-aware */
text-justify: auto;
word-spacing: normal;
letter-spacing: normal;
white-space: normal;
}
/* === Centered layout for speaker cards === */
.speaker-card .speaker-content {
align-items: center; /* آیتمهای داخل بدنه کارت وسطچین عمودی */
text-align: center; /* متنها وسطچین */
}
.speaker-card .name,
.speaker-card .speaker-affil,
.speaker-card .speaker-talk {
text-align: center;
}
/* لینک نام را بلاک کن تا وسطچین کامل شود */
.speaker-card .name a {
display: inline-block;
}
/* همچنان CTA پایین کارت بماند */
.speaker-card .abstract-cta {
margin-top: auto;
}
/* برای متنهای خیلی بلند، شکست کلمه حفظ شود */
.speaker-card .speaker-talk,
.speaker-card .speaker-affil {
overflow-wrap: anywhere;
hyphens: auto;
}
/* اگر دوست داری عنوان کمی برجستهتر شود (اختیاری) */
.speaker-card .name {
font-weight: 700;
}
/* --- center a readable text column inside each speaker card --- */
.speaker-card .name,
.speaker-card .speaker-affil,
.speaker-card .speaker-talk {
max-width: 28ch; /* عرضِ تایپوگرافیک ستون متن؛ میتونی 26–32ch تست کنی */
margin-inline: auto; /* ستون متن وسطِ کارت قرار میگیرد */
text-align: center; /* همجهت با مرکز کردن ستون */
}
/* در موبایل ستون را تمامعرض کن تا نشکند */
@media (max-width: 768px) {
.speaker-card .name,
.speaker-card .speaker-affil,
.speaker-card .speaker-talk {
max-width: 100%;
}
}
/* === Center each line of talk title exactly like Word === */
.speaker-card .speaker-talk {
text-align: center !important; /* override any start/justify */
margin-inline: auto; /* بلوک عنوان وسط کارت */
max-width: 32ch; /* ستون خوانا؛ در صورت نیاز 28–36ch تست کن */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* تعداد خطوط ثابت */
overflow: hidden;
word-spacing: normal;
letter-spacing: normal;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere; /* از کشآمدن فاصلهها جلوگیری میکند */
hyphens: none; /* قطع هیفن خودکار که باعث ناهمگنی میشود */
}
/* نام و افیلیشن هم اگر میخواهی دقیقاً وسط کارت باشند */
.speaker-card .name,
.speaker-card .speaker-affil {
text-align: center;
margin-inline: auto;
max-width: 32ch;
}
/* Page heading like Programme */
.page-heading {
max-width: 1100px;
margin: 1.25rem auto 0.25rem;
padding: 0 12px;
}
.page-heading .kicker {
font-size: 1.35rem;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
/* Keep section headings compact to avoid duplication */
.speakers-section > h2 {
font-size: 1.15rem;
font-weight: 700;
margin: .5rem 0 .75rem;
}
/* ---- Fix Speaker Card Images ---- */
.cards .card .card-image img {
width: 100%;
height: auto;
object-fit: contain !important;
background-color: #f2f2f2;
padding: 4px;
}
/* --- Fix images inside fixed-height speaker cards --- */
.cards .card .card-image,
.card .card-image {
height: 240px !important; /* ارتفاع ثابت برای یکنواختی کارتها */
background-color: #f2f2f2;
display: flex;
align-items: center; /* عمودی وسط */
justify-content: center; /* افقی وسط */
}
.cards .card .card-image img,
.card .card-image img {
width: auto !important;
height: 100% !important;
max-width: 100% !important;
object-fit: contain !important; /* بدون بریدگی */
}
/* Remove scroll indicator arrow on mobile */
@media (max-width: 768px) {
header .scroll-indicator,
.scroll-indicator {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
height: 0 !important;
pointer-events: none !important;
}
}
/* Mobile: dropdown opens upward */
@media (max-width: 768px) {
nav.main-nav .dropdown-menu {
top: auto !important;
bottom: 100% !important; /* بجای پایین → بالا */
left: 0 !important;
transform: none !important; /* از کدهای قبلی پاک شود */
margin: 0 !important;
position: absolute !important;
}
nav.main-nav .dropdown {
position: relative !important;
}
}
/* Footer logos – safe scaling for PNG + SVG */
.institution-logos img {
max-height: 70px !important;
height: auto !important;
width: auto !important;
object-fit: contain;
display: inline-block;
vertical-align: middle;
margin: 0 12px;
}
@media (max-width: 600px) {
.program-table,
.program-table thead,
.program-table tbody,
.program-table tr {
display: block;
width: 100%;
}
.program-table thead {
display: none; /* هدر جدول در موبایل حذف */
}
.program-table tr {
margin-bottom: 16px;
padding: 12px;
border: 1px solid #d1d1d1;
border-radius: 6px;
background: #fff;
}
.program-table td {
display: block;
width: 100%;
padding: 6px 0;
border: none;
text-align: left;
}
/* CET label */
.program-table td:first-child::before {
content: "CET: ";
font-weight: 600;
color: #5b2622;
}
/* Tehran label */
.program-table td:nth-child(2)::before {
content: "Tehran: ";
font-weight: 600;
color: #5b2622;
}
}
@media (max-width: 600px) {
html[lang="fa"] .program-table td {
text-align: right;
}
html[lang="fa"] .program-table td::before {
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 600px) {
html[lang="fa"] body {
overflow-x: hidden;
}
html[lang="fa"] .program-day,
html[lang="fa"] .program-table,
html[lang="fa"] .program-table tr {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
/* FINAL – works 100% */
.speaker-card .speaker-talk[title] {
cursor: help;
border-bottom: 1px dotted transparent;
}
.speaker-card .speaker-talk[title]:hover {
color: #6b2e2e;
border-bottom-color: #6b2e2e;
}
/* === Speaker title tooltip – FORCE FIX === */
.speaker-card .speaker-talk .talk-tooltip {
cursor: help !important;
color: inherit;
}
.speaker-card .speaker-talk .talk-tooltip:hover {
color: #6b2e2e;
text-decoration: underline dotted;
text-underline-offset: 3px;
}
/* REAL FIX — hover on card, affect title */
.speaker-card:hover .talk-tooltip {
cursor: help;
color: #6b2e2e;
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.talk-tooltip {
pointer-events: auto;
}