/* ========================================================================== Design System — International site Central tokens + reusable components. Loaded after custom.rtl.css (Bootstrap 5 RTL) so it can override defaults. ========================================================================== */ :root { /* Brand colors (formalizes the ad-hoc header vars that used to live only in _Layout.cshtml and were never reused anywhere else on the site) */ --color-primary-900: #023047; --color-primary-700: #03557D; --color-primary-300: #8ECAE6; --color-accent-orange: #FF9900; --color-accent-orange-light: #FFAC2F; --color-accent-teal: #21C6CB; --color-link-hover: #1D4ED8; /* Backwards-compatible aliases (existing inline styles/scripts reference these var names directly) */ --header-blue-light: var(--color-primary-300); --header-blue-dark: var(--color-primary-700); --header-bar: #023047CC; --brand-orange: var(--color-accent-orange); --accent-teal: var(--color-accent-teal); --link-hover: var(--color-link-hover); /* Neutrals */ --color-white: #FFFFFF; --color-surface: #F7F9FA; --color-surface-alt: #F2F5F5; --color-border: #E7ECEF; --color-text: #23343F; --color-text-muted: #64748B; /* Feedback */ --color-success: #16A34A; --color-danger: #DC2626; /* Typography */ --font-family-base: 'IRANSans', Tahoma, sans-serif; --fs-h1: 2rem; --fs-h2: 1.625rem; --fs-h3: 1.375rem; --fs-h4: 1.125rem; --fs-body: 0.9375rem; --fs-small: 0.8125rem; --lh-base: 1.8; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 30px; --radius-pill: 999px; /* Shadow */ --shadow-card: 0 8px 24px rgba(2, 48, 71, 0.08), 0 2px 6px rgba(2, 48, 71, 0.06); --shadow-card-hover: 0 16px 36px rgba(2, 48, 71, 0.16), 0 4px 10px rgba(2, 48, 71, 0.08); --shadow-header: 0 2px 12px rgba(2, 48, 71, 0.18); /* Page background (soft off-white instead of stark white) */ --color-page-bg: #FAFAFA; } body { font-family: var(--font-family-base); color: var(--color-text); line-height: var(--lh-base); background: var(--color-page-bg); } /* Campus-photo parallax — only on pages that opt into the full-bleed hero header (currently just the homepage, via ViewData["HeroHeader"] / the .has-hero-header body class). Every other page keeps the plain light background so its default black text stays legible — applying the dark photo tint to globally made text on every non-homepage page nearly unreadable. */ body.has-hero-header { background: linear-gradient(180deg, rgba(2, 48, 71, .32) 0%, rgba(2, 48, 71, .55) 100%), url('/images/campus-bg.jpg') center / cover no-repeat fixed; } /* iOS Safari doesn't support fixed backgrounds well (they detach/jitter on scroll) — fall back to a normal scrolling background there instead of a broken parallax. */ @media (max-width: 767px), (hover: none) and (pointer: coarse) { body.has-hero-header { background-attachment: scroll; } } /* Frosted panel: lets the fixed campus photo behind the body show through page sections while keeping their content reliably legible. */ .glass-panel { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* ---- Floating glass header (used on pages with a full-bleed hero, e.g. the homepage) — header overlays the hero instead of pushing it down, scrolling away with the page like a normal document-flow element. */ .header-overlay { position: absolute; top: 0; right: 0; left: 0; width: 100%; background: linear-gradient(180deg, rgba(2, 48, 71, .62) 0%, rgba(2, 48, 71, .4) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 24px -8px rgba(2, 48, 71, .35); z-index: 1000; } /* ---- Typography helpers -------------------------------------------------- */ .section-title { position: relative; font-size: var(--fs-h3); font-weight: 700; color: var(--color-primary-900); padding-bottom: var(--space-3); margin-bottom: var(--space-5); } .section-title::after { content: ""; position: absolute; bottom: 0; right: 0; width: 64px; height: 3px; border-radius: var(--radius-pill); background: var(--color-accent-orange); } .section-title--center { text-align: center; } .section-title--center::after { right: 50%; transform: translateX(50%); } .text-muted-ds { color: var(--color-text-muted); } .text-brand { color: var(--color-primary-700); } /* ---- Buttons -------------------------------------------------------------- */ .btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--color-accent-orange); color: var(--color-white); border: none; border-radius: var(--radius-pill); padding: 10px 28px; font-weight: 600; font-size: var(--fs-body); text-decoration: none; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; } .btn-brand:hover { background: #E68A00; color: var(--color-white); transform: translateY(-1px); box-shadow: var(--shadow-card); } .btn-brand-outline { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: transparent; color: var(--color-primary-700); border: 1px solid var(--color-primary-300); border-radius: var(--radius-pill); padding: 9px 24px; font-weight: 600; font-size: var(--fs-body); text-decoration: none; transition: all .2s ease; } .btn-brand-outline:hover { background: var(--color-primary-700); color: var(--color-white); border-color: var(--color-primary-700); } .btn-archive { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-primary-700); color: var(--color-white); font-size: var(--fs-small); font-weight: 600; text-decoration: none; transition: background-color .2s ease; } .btn-archive:hover { background: var(--color-primary-900); color: var(--color-white); } /* ---- Cards / surfaces ------------------------------------------------------ */ .card-surface { background: var(--color-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); transition: box-shadow .25s ease, transform .25s ease; } .card-surface--hoverable:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } .badge-pill-ds { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: var(--radius-pill); background: var(--color-primary-300); color: var(--color-primary-900); font-size: var(--fs-small); font-weight: 600; } /* ---- Form components ------------------------------------------------------- */ .form-field { margin-bottom: var(--space-5); } .form-label-ds { display: block; font-weight: 600; color: var(--color-primary-900); margin-bottom: var(--space-2); font-size: var(--fs-body); } .form-required { color: var(--color-danger); margin-right: 4px; } .form-error { color: var(--color-danger); font-size: var(--fs-small); margin-top: var(--space-1); } .form-control, .form-select { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: var(--fs-body); background-color: var(--color-white); } .form-control:focus, .form-select:focus { border-color: var(--color-primary-300); box-shadow: 0 0 0 3px rgba(142, 202, 230, 0.35); } .form-check-input:checked { background-color: var(--color-primary-700); border-color: var(--color-primary-700); } /* ---- Swiper / carousel skin (shared across every slider on the site) ------ */ .swiper-nav-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; color: var(--color-primary-700); transition: background-color .2s ease, color .2s ease; } .swiper-nav-btn:hover { background: var(--color-accent-orange); color: var(--color-white); } .swiper-button-next:after, .swiper-button-prev:after { font-size: 16px !important; } .swiper-pagination-bullet-active { background: var(--color-accent-orange) !important; } /* ---- Site header / footer chrome ------------------------------------------ */ .site-topbar { background: var(--color-primary-900); } .site-header-main { background: linear-gradient(0deg, var(--color-primary-300) 0%, var(--color-primary-700) 100%); box-shadow: var(--shadow-header); } .nav-link-main { color: var(--color-white); font-weight: 500; font-size: var(--fs-body); transition: opacity .2s ease; } .nav-link-main:hover { opacity: .85; } .mega-menu { border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); overflow: hidden; } .mega-menu-link { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; padding: var(--space-1) 0; transition: color .2s ease; } .mega-menu-link:hover { color: var(--color-link-hover); } .mega-menu-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-700); transition: background-color .2s ease; flex-shrink: 0; } .mega-menu-link:hover .mega-menu-dot { background: var(--color-link-hover); } .mega-menu-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); padding: var(--space-5) var(--space-6); } .mega-menu-col-title { font-size: var(--fs-body); padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 2px solid var(--color-accent-teal); white-space: nowrap; } .site-footer { background: linear-gradient(180deg, var(--color-primary-700) 0%, var(--color-primary-900) 99%); color: var(--color-white); } .footer-heading { color: var(--color-accent-orange); font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--space-3); } .footer-contact-row { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--fs-body); margin-top: var(--space-2); } .social-icon-link { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); align-items: center; justify-content: center; transition: background-color .2s ease, transform .2s ease; } .social-icon-link:hover { background: var(--color-accent-orange); transform: translateY(-2px); } .social-icon-link img { width: 20px; height: 20px; } /* ---- Utility: fluid media (replaces fixed per-breakpoint pixel heights) --- */ .media-cover { width: 100%; height: 100%; object-fit: cover; } .aspect-hero { aspect-ratio: 2.6 / 1; width: 100%; object-fit: cover; object-position: center; } @media (max-width: 767px) { .aspect-hero { aspect-ratio: 4 / 3; } }