/* ============================================================= Zagros Star — single bidirectional stylesheet One sheet serves both fa (RTL) and en (LTR) via CSS logical properties. Only differs between pages. ============================================================= */ /* ---------- 0. IRANSansX (Persian face) ---------- Self-hosted from assets/fonts/ — IRANSansX is a commercial family from fontiran.com, so it is neither on Google Fonts nor on any public CDN. Converted from the supplied TTF kit to woff2 (487 KB -> 159 KB). Only the five weights the stylesheet uses are shipped; see assets/fonts/README.txt before adding or replacing any. Because these are self-hosted, the Persian pages make no external font requests at all — which matters here, as Google Fonts is unreliable from inside Iran. */ @font-face { font-family: 'IRANSansX'; src: url('../fonts/IRANSansX-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANSansX'; src: url('../fonts/IRANSansX-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANSansX'; src: url('../fonts/IRANSansX-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANSansX'; src: url('../fonts/IRANSansX-DemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANSansX'; src: url('../fonts/IRANSansX-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- 1. Tokens ---------- */ :root { /* palette — from color palet.txt */ --navy: #0e1f31; --gold: #c9a34a; --tan: #dabd91; --white: #ffffff; /* derived surfaces */ --navy-deep: #0a1725; --navy-soft: #16293d; --navy-line: #1d3247; --line: rgba(201, 163, 74, .18); --line-soft: rgba(255, 255, 255, .09); --muted: rgba(255, 255, 255, .62); --muted-strong: rgba(255, 255, 255, .82); /* typography — overridden per language below */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-latin: 'Montserrat', system-ui, 'Segoe UI', sans-serif; --ls-label: .18em; --ls-wordmark: .2em; --lh-body: 1.85; /* side of the hero scrim that carries the headline (mirrored for RTL) */ --scrim-x: to right; /* transform-origin takes no logical keyword, so every gold rule that draws itself from the inline start needs this mirrored by hand */ --origin-inline: left; /* layout */ --maxw: 1280px; --gutter: clamp(1.25rem, 4vw, 4rem); --header-h: 84px; --ease: cubic-bezier(.22, .61, .36, 1); } /* Persian: connected script — letter-spacing would break the joins, and Playfair has no Persian glyphs. IRANSansX covers everything. */ html[lang="fa"] { --font-display: 'IRANSansX', Tahoma, system-ui, sans-serif; --font-body: 'IRANSansX', Tahoma, system-ui, sans-serif; /* also the Latin face here: the numerals in .area__num / .service__num are Persian digits (۰۱), which Montserrat has no glyphs for. */ --font-latin: 'IRANSansX', Tahoma, system-ui, sans-serif; --ls-label: 0; --ls-wordmark: 0; --lh-body: 2.05; } html[dir="rtl"] { --scrim-x: to left; --origin-inline: right; } /* ---------- 2. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-block-start: var(--header-h); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--navy); color: var(--white); font-family: var(--font-body); font-size: clamp(.95rem, .35vw + .88rem, 1.03rem); font-weight: 400; line-height: var(--lh-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.18; } p { margin: 0; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--gold); color: var(--navy-deep); } .latin { font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; } .skip { position: absolute; inset-block-start: -100px; inset-inline-start: 1rem; z-index: 200; padding: .8rem 1.4rem; background: var(--gold); color: var(--navy-deep); font-weight: 600; transition: inset-block-start .2s; } .skip:focus { inset-block-start: 1rem; } /* ---------- 3. Layout primitives ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: clamp(4.5rem, 9vw, 8.5rem); } .section--alt { background: var(--navy-deep); } .section--line { border-block-start: 1px solid var(--line-soft); } .section__head { max-width: 62ch; margin-block-end: clamp(2.5rem, 5vw, 4rem); } .section__title { font-family: var(--font-display); font-size: clamp(1.85rem, 3.6vw, 3.1rem); letter-spacing: var(--ls-display, normal); } .section__intro { margin-block-start: 1.5rem; color: var(--muted); max-width: 60ch; } /* small gold label with a leading rule — the reference's eyebrow */ .eyebrow { display: flex; align-items: center; gap: 1rem; margin-block-end: 1.75rem; color: var(--gold); font-size: .72rem; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; } html[lang="fa"] .eyebrow { font-size: .84rem; text-transform: none; } .eyebrow::before { content: ""; inline-size: clamp(2rem, 5vw, 3.75rem); block-size: 1px; background: var(--gold); opacity: .6; flex: none; } .gold { color: var(--gold); } .tan { color: var(--tan); } /* the reference sets one word of the headline in gold italic */ .accent { color: var(--tan); font-style: italic; } html[lang="fa"] .accent { font-style: normal; color: var(--gold); } /* ---------- 4. Buttons ---------- */ .btn { --btn-fg: var(--white); display: inline-flex; align-items: center; gap: .85rem; padding: 1.05rem 2.1rem; border: 1px solid var(--line); color: var(--btn-fg); font-size: .74rem; font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; position: relative; overflow: hidden; transition: color .35s var(--ease), border-color .35s var(--ease); } html[lang="fa"] .btn { font-size: .88rem; text-transform: none; font-weight: 500; } .btn::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } /* transform-origin has no logical keyword — mirror it for RTL */ html[dir="rtl"] .btn::before { transform-origin: right; } .btn > * { position: relative; z-index: 1; } .btn:hover { color: var(--navy-deep); border-color: var(--gold); } .btn:hover::before { transform: scaleX(1); } .btn__arrow { transition: transform .35s var(--ease); flex: none; } /* arrow points along the reading direction */ html[dir="rtl"] .btn__arrow { transform: scaleX(-1); } .btn:hover .btn__arrow { transform: translateX(5px); } html[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(5px); } .btn--gold { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); } .btn--gold::before { background: var(--white); } .btn--gold:hover { color: var(--navy-deep); border-color: var(--white); } /* quiet text link with an animated underline */ .tlink { display: inline-flex; align-items: center; gap: .7rem; color: var(--gold); font-size: .76rem; font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; padding-block-end: .35rem; background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: var(--bgp, 0) 100%; background-size: 100% 1px; transition: background-size .4s var(--ease), color .3s; } html[dir="rtl"] .tlink { --bgp: 100%; } html[lang="fa"] .tlink { font-size: .9rem; text-transform: none; font-weight: 500; } .tlink:hover { background-size: 0 1px; color: var(--tan); } /* ---------- 5. Header ---------- */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; block-size: var(--header-h); display: flex; align-items: center; /* No backdrop of its own: the hero scrim's top band carries the nav. A header-height gradient ended mid-sky and its edge read as a hard line across the frame. Only the scrolled state paints a bar. */ background: transparent; border-block-end: 1px solid transparent; transition: background .4s var(--ease), block-size .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s; } .site-header.is-scrolled { --header-h: 68px; background: rgba(10, 23, 37, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block-end-color: var(--line-soft); } /* Full-bleed: the brand sits hard against one edge and the actions against the other, rather than being pulled into the 1280px content column. */ .site-header__inner { width: 100%; padding-inline: clamp(1.25rem, 3vw, 3rem); display: flex; align-items: center; gap: 2rem; } /* Brand: the supplied logo lockup (wordmark already outlined in the SVG, so it needs no webfont and renders identically in both languages). */ .brand { display: flex; align-items: center; flex: none; } .brand__logo { block-size: clamp(26px, 2.6vw, 34px); inline-size: auto; transition: block-size .4s var(--ease); } .site-header.is-scrolled .brand__logo { block-size: clamp(23px, 2.2vw, 28px); } /* still used for the footer's text wordmark */ .brand__name { font-family: var(--font-latin); font-size: .95rem; font-weight: 700; letter-spacing: var(--ls-wordmark); color: var(--white); } html[lang="fa"] .brand__name { font-family: var(--font-body); font-size: 1.05rem; } /* ---------- 6. Navigation ---------- */ .nav { margin-inline-start: auto; } .nav__list { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.9rem); } .nav__link { position: relative; font-size: .74rem; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-strong); padding-block: .4rem; transition: color .3s; } html[lang="fa"] .nav__link { font-size: .92rem; text-transform: none; } .nav__link::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 0; block-size: 1px; background: var(--gold); transition: inline-size .35s var(--ease); } .nav__link:hover { color: var(--white); } .nav__link:hover::after { inline-size: 100%; } .nav__link[aria-current="page"] { color: var(--gold); } .nav__link[aria-current="page"]::after { inline-size: 100%; } .header-actions { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); } .lang { position: relative; } .lang__toggle { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--line-soft); font-family: var(--font-latin); font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--muted-strong); transition: color .3s, border-color .3s; } .lang__toggle:hover { color: var(--gold); border-color: var(--line); } .lang__flag { inline-size: 18px; block-size: 12px; flex: none; border-radius: 1px; } .lang__opt { display: flex; align-items: center; gap: .6rem; } .lang__caret { flex: none; transition: transform .3s var(--ease); } .lang__toggle[aria-expanded="true"] { color: var(--gold); border-color: var(--line); } .lang__toggle[aria-expanded="true"] .lang__caret { transform: rotate(180deg); } .lang__menu { position: absolute; inset-block-start: calc(100% + .6rem); inset-inline-end: 0; min-inline-size: 9.5rem; padding: .4rem; background: rgba(10, 23, 37, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-soft); display: grid; gap: .15rem; opacity: 0; visibility: hidden; transform: translateY(-6px); /* same trick as the drawer: visibility flips in immediately on open so the first option can take focus, and is held back on close for the fade-out. */ transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; z-index: 10; } .lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear 0s; } .lang__opt { padding: .6rem .8rem; font-size: .82rem; color: var(--muted-strong); white-space: nowrap; transition: color .25s, background .25s; } .lang__opt:hover { color: var(--white); background: rgba(201, 163, 74, .12); } .lang__opt.is-active { color: var(--gold); } .header-cta { display: none; } /* burger */ .burger { display: grid; gap: 5px; padding: .5rem; margin-inline-end: -.5rem; } .burger span { display: block; inline-size: 24px; block-size: 1.5px; background: var(--white); transition: transform .35s var(--ease), opacity .25s; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; gap: 2rem; background: var(--navy-deep); opacity: 0; visibility: hidden; /* visibility flips instantly on open (so the first link can take focus in the same tick) but is held back on close until the fade-out finishes. */ transition: opacity .4s var(--ease), visibility 0s linear .4s; } .drawer.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s linear 0s; } .drawer__list { display: grid; gap: 1.75rem; text-align: center; } .drawer__link { font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--white); transition: color .3s; } .drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--gold); } body.is-locked { overflow: hidden; } /* ---------- 7. Hero ---------- */ .hero { position: relative; min-block-size: 100svh; display: flex; align-items: center; /* Heavier top padding drops the block clear of the sky, which is the only part of the frame too bright for white text. */ padding-block: calc(var(--header-h) + clamp(4rem, 11vh, 8rem)) clamp(2rem, 5vh, 4rem); /* Keeps the hero a self-contained stacking context so the media, particles, straps and copy stay in a predictable order. */ isolation: isolate; background: radial-gradient(120% 90% at 78% 12%, rgba(201, 163, 74, .1), transparent 58%), radial-gradient(90% 70% at 10% 88%, rgba(22, 41, 61, .8), transparent 60%), var(--navy-deep); overflow: hidden; } .hero--sub { min-block-size: auto; padding-block: calc(var(--header-h) + clamp(5rem, 12vh, 8rem)) clamp(4rem, 8vw, 7rem); } /* ---- Background footage ---- The poster image is the reliable layer: it is the element background, so it shows on mobile and when reduced motion is on (where main.js never gives the