/* ========================================================================== Rabeie Holding One stylesheet serves English (LTR) and Persian (RTL). All directional rules use logical properties, so nothing is duplicated. Fonts are bundled locally — no CDN, so it works on any host. ========================================================================== */ @font-face{ font-family:'Playfair Display'; src:url('assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'Vazirmatn'; src:url('assets/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'Vazirmatn'; src:url('assets/fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap; } @font-face{ font-family:'Vazirmatn'; src:url('assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap; } @font-face{ font-family:'Vazirmatn'; src:url('assets/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap; } :root{ --ink:#0E100C; --dark:#161911; --dark-2:#1F2318; --cream:#F6F3EA; --cream-2:#EFEBDF; --paper:#FFFFFF; --olive:#4A5238; --olive-2:#6B7554; --muted:#6C6E60; --line:#E3DED0; --gold:#B99C5B; --gold-soft:#D9C593; --maxw:1240px; --serif:'Playfair Display',Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --fa:'Vazirmatn','IRANSans',Tahoma,Arial,sans-serif; --ease:cubic-bezier(.22,.61,.24,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--cream);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.78; -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* Persian typography */ html[lang="fa"] body{font-family:var(--fa);line-height:1.88;font-size:16.5px} html[lang="fa"] .serif{font-family:var(--fa)} /* height:auto is REQUIRED once width/height attributes are on the markup. Those attributes are presentational hints for the width AND height CSS properties. Setting only `width` in CSS leaves the height hint live, so the image renders at its attribute height and stretches. */ img{max-width:100%;display:block;height:auto} a{color:inherit} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(22px,5vw,52px)} .serif{font-family:var(--serif);font-weight:400} /* ========================================================================== PER-ELEMENT LANGUAGE Persian text appears inside the English page (the language switch, the division subtitles) and Latin text appears inside the Persian page. Without these rules that text inherits the wrong stack and the browser substitutes a default system face, which looks nothing like the rest of the site. ========================================================================== */ [lang="fa"]{ font-family:var(--fa); } [lang="en"]{ font-family:var(--sans); } /* the language switch button */ .lang[lang="fa"]{ font-family:var(--fa); letter-spacing:0; font-size:14.5px; line-height:1.4; padding-block:6px; } .lang[lang="en"]{ font-family:var(--sans); letter-spacing:.09em; } /* division subtitles: tracking and uppercase are Latin devices */ .card .altname[lang="fa"]{ font-family:var(--fa); letter-spacing:0; text-transform:none; font-size:.92rem; } .card .altname[lang="en"]{ font-family:var(--sans); } /* footer + any inline switch links */ footer a[lang="fa"], .foot-bar a[lang="fa"]{ font-family:var(--fa); letter-spacing:0; } footer a[lang="en"], .foot-bar a[lang="en"]{ font-family:var(--sans); } /* ---------- reveal on scroll ---------- Content is VISIBLE by default. The hidden state is only applied once JS has confirmed IntersectionObserver exists (it adds .js-reveal to ). Previously .reveal was opacity:0 up front, so any browser without IO — or one that threw on NodeList.forEach — left most of the page permanently blank. */ .js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .js-reveal .reveal.in{opacity:1;transform:none} /* ========================================================================== HEADER ========================================================================== */ header.site{ position:fixed;inset-block-start:0;inset-inline:0;z-index:60; padding-block:20px;transition:background .45s var(--ease),padding .45s var(--ease),box-shadow .45s var(--ease); } header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px} header.site .mark{display:flex;align-items:center;gap:13px;text-decoration:none} header.site .mark img{height:44px;width:auto;transition:height .45s var(--ease)} header.site .mark span{ font-family:var(--serif);color:#fff;font-size:16px; letter-spacing:.30em;text-transform:uppercase; } html[lang="fa"] header.site .mark span{font-family:var(--fa);letter-spacing:0} header.site nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)} header.site nav a{ color:rgba(255,255,255,.82);text-decoration:none;font-size:13.5px; letter-spacing:.13em;text-transform:uppercase;transition:color .25s; } html[lang="fa"] header.site nav a{letter-spacing:0;text-transform:none;font-size:15px} header.site nav a:hover{color:#fff} header.site .lang{ border:1px solid rgba(255,255,255,.42);padding:8px 17px; color:#fff;text-decoration:none;font-size:13px;letter-spacing:.09em; transition:background .3s,border-color .3s; } header.site .lang:hover{background:rgba(255,255,255,.16);border-color:#fff} header.site.stuck{ background:rgba(14,16,12,.94);backdrop-filter:blur(14px); padding-block:12px;box-shadow:0 1px 0 rgba(255,255,255,.09); } header.site.stuck .mark img{height:36px} @media (max-width:860px){ header.site nav .navlinks{display:none} } /* ========================================================================== HERO ========================================================================== */ .hero{ position:relative; /* was 100vh — too much dead black before any content. */ min-height:clamp(420px,58vh,600px); /* fallback: Safari < 15.4 / Chrome < 108 */ min-height:clamp(420px,58svh,600px); display:grid;place-items:center; text-align:center;color:#fff;overflow:hidden; background:var(--ink); } .hero .bg{ position:absolute;inset:0; background:url('assets/hero-laurel.png') center/cover no-repeat; transform:scale(1.06); animation:heroDrift 26s ease-in-out infinite alternate; } @keyframes heroDrift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(0,-1.5%,0)}} .hero::after{ content:"";position:absolute;inset:0;z-index:1; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(8,10,6,.18) 0%, rgba(8,10,6,.72) 62%, rgba(8,10,6,.93) 100%), linear-gradient(to bottom, rgba(8,10,6,.66) 0%, rgba(8,10,6,0) 26%, rgba(8,10,6,0) 62%, rgba(8,10,6,.9) 100%); } .hero .inner{position:relative;z-index:2;max-width:880px;padding:56px 24px 40px} .hero img.logo{ width:clamp(112px,12vw,138px);margin-inline:auto;margin-block-end:18px; filter:drop-shadow(0 10px 44px rgba(0,0,0,.6)); } .hero .kicker{ font-size:11.5px;letter-spacing:.4em;text-transform:uppercase; color:var(--gold-soft);margin:0 0 16px;font-weight:500; } html[lang="fa"] .hero .kicker{letter-spacing:0;font-size:14px} .hero h1{ font-family:var(--serif);font-weight:400; font-size:clamp(1.8rem,4.4vw,3.1rem);line-height:1.16; margin:0 0 20px;letter-spacing:-.018em; } html[lang="fa"] .hero h1{font-family:var(--fa);line-height:1.6;font-weight:500;letter-spacing:0} .hero .divider{ width:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:0 auto 20px;animation:growLine 1.6s .5s var(--ease) forwards; } @keyframes growLine{to{width:190px}} .hero p.lede{ font-size:clamp(.95rem,1.6vw,1.08rem);color:rgba(255,255,255,.84); margin:0 auto;max-width:70ch;line-height:1.72; } .scrollcue{ position:absolute;inset-block-end:22px;inset-inline:0;z-index:3; display:flex;flex-direction:column;align-items:center;gap:10px; color:rgba(255,255,255,.55);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase; } .scrollcue i{display:block;width:1px;height:36px;background:linear-gradient(rgba(255,255,255,.55),transparent);animation:cue 2.4s var(--ease) infinite} @keyframes cue{0%{transform:scaleY(.25);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.25);transform-origin:bottom}} /* ========================================================================== SECTIONS ========================================================================== */ section{padding-block:clamp(76px,10vw,148px);position:relative} .section-head{max-width:66ch;margin-block-end:clamp(44px,5.5vw,74px)} .section-head.center{margin-inline:auto;text-align:center} .eyebrow{ display:inline-flex;align-items:center;gap:12px; text-transform:uppercase;letter-spacing:.28em;font-size:.7rem; color:var(--olive);font-weight:600;margin:0 0 20px; } .eyebrow::before{content:"";width:32px;height:1px;background:var(--gold)} .section-head.center .eyebrow::after{content:"";width:32px;height:1px;background:var(--gold)} html[lang="fa"] .eyebrow{letter-spacing:0;font-size:.85rem;font-weight:600} h2{ font-family:var(--serif);font-weight:400; font-size:clamp(1.75rem,3.8vw,2.9rem);line-height:1.2; margin:0 0 20px;letter-spacing:-.016em; } html[lang="fa"] h2{font-family:var(--fa);line-height:1.55;font-weight:500;letter-spacing:0} .section-head p{color:var(--muted);margin:0;font-size:1.06rem;line-height:1.9} /* ---------- manifesto strip ---------- */ .manifesto{background:var(--paper);text-align:center} .manifesto blockquote{ font-family:var(--serif);font-size:clamp(1.3rem,2.9vw,2.05rem); line-height:1.5;margin:0 auto;max-width:24ch;color:var(--ink); } html[lang="fa"] .manifesto blockquote{font-family:var(--fa);line-height:1.8;max-width:34ch;font-weight:500} .manifesto .sig{margin-block-start:28px;color:#8A6D28;letter-spacing:.26em;text-transform:uppercase;font-size:.68rem} html[lang="fa"] .manifesto .sig{letter-spacing:0;font-size:.85rem} /* ---------- divisions ---------- */ .divisions{background:var(--cream)} .grid{display:grid;gap:clamp(30px,3.6vw,52px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .card{position:relative;background:transparent} .card .shot{ position:relative;overflow:hidden;background:var(--cream-2); aspect-ratio:4/5;margin-block-end:24px; border-radius:3px; box-shadow:0 1px 2px rgba(20,22,16,.05), 0 16px 36px -22px rgba(20,22,16,.45); transition:box-shadow .7s var(--ease), transform .7s var(--ease); } .card:hover .shot{ transform:translateY(-7px); box-shadow:0 4px 10px rgba(20,22,16,.08), 0 34px 62px -26px rgba(20,22,16,.6); } .card .shot img{ width:100%;height:100%;object-fit:cover; filter:saturate(.93) contrast(1.03); transition:transform 1.3s var(--ease),filter .8s var(--ease); } .card:hover .shot img{transform:scale(1.07);filter:saturate(1.05) contrast(1.05)} /* scrim: gives the index numeral something to sit on, and stops the images reading as flat pasted rectangles */ .card .shot::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to bottom, rgba(14,16,12,.26) 0%, rgba(14,16,12,0) 22%, rgba(14,16,12,0) 68%, rgba(14,16,12,.14) 100%); } /* inset hairline frame that draws itself in on hover */ .card .shot::before{ content:"";position:absolute;inset:11px;z-index:3;pointer-events:none; border:1px solid rgba(255,255,255,.42); opacity:0;transform:scale(1.035); transition:opacity .6s var(--ease),transform .6s var(--ease); } .card:hover .shot::before{opacity:1;transform:scale(1)} html[lang="fa"] .card .num{font-family:var(--fa);letter-spacing:0} .card .num{ position:absolute;inset-block-start:15px;inset-inline-start:17px;z-index:4; font-family:var(--serif);font-size:.8rem;letter-spacing:.14em; color:var(--gold-soft);text-shadow:0 1px 12px rgba(0,0,0,.7); } .card h3{ font-family:var(--serif);font-weight:400;font-size:1.42rem; margin:0 0 5px;line-height:1.3; } html[lang="fa"] .card h3{font-family:var(--fa);font-size:1.3rem;line-height:1.7;font-weight:600} .card .altname{ font-size:.76rem;color:var(--olive-2);letter-spacing:.18em; text-transform:uppercase;margin:0 0 14px; } html[lang="fa"] .card .altname{letter-spacing:0;text-transform:none;font-size:.88rem} .card p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.82} html[lang="fa"] .card p{line-height:1.95} /* Eight divisions must read as two even rows of four on a wide screen. auto-fit could not promise that — it lays down as many 300px tracks as happen to fit, which gave 3 + 3 + 2 and a ragged last row. Explicit track counts instead, scoped to .divisions so the generic .grid stays free for anything else that wants it. 1 column below 620px · 2 up to 1100px · 4 above. */ .divisions .grid{grid-template-columns:1fr;gap:clamp(28px,3vw,44px)} @media (min-width:620px){ .divisions .grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1100px){ .divisions .grid{grid-template-columns:repeat(4,minmax(0,1fr))} /* At 4-up a card is ~250px wide instead of ~350px, so the type comes down with it — otherwise the longer division names wrap to three lines and the blurbs read as a narrow column of fragments. */ .divisions .card h3{font-size:1.22rem;line-height:1.32} html[lang="fa"] .divisions .card h3{font-size:1.14rem;line-height:1.72} .divisions .card .altname{font-size:.68rem;letter-spacing:.13em;margin-block-end:11px} html[lang="fa"] .divisions .card .altname{font-size:.8rem;letter-spacing:0} .divisions .card p{font-size:.92rem;line-height:1.78} .divisions .card .shot{margin-block-end:20px} } /* ---------- feature spotlights ---------- */ .feature{background:var(--paper);padding-block:0} .feature .row{ display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); align-items:center;gap:0; } .feature .row + .row{border-block-start:1px solid var(--line)} .feature .media{position:relative;overflow:hidden;aspect-ratio:5/4;background:var(--cream-2)} .feature .media img{ width:100%;height:100%;object-fit:cover; filter:saturate(.93) contrast(1.03); transition:transform 1.6s var(--ease),filter .9s var(--ease); } .feature .row:hover .media img{transform:scale(1.06);filter:saturate(1.05) contrast(1.05)} .feature .media::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(120deg, rgba(14,16,12,.16) 0%, rgba(14,16,12,0) 46%); } .feature .media::before{ content:"";position:absolute;inset:18px;z-index:2;pointer-events:none; border:1px solid rgba(255,255,255,.34); opacity:0;transform:scale(1.02); transition:opacity .7s var(--ease),transform .7s var(--ease); } .feature .row:hover .media::before{opacity:1;transform:scale(1)} .feature .body{padding:clamp(38px,6vw,86px)} .feature .body .eyebrow{margin-block-end:16px} .feature .body h3{ font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.9vw,2.15rem); line-height:1.24;margin:0 0 18px; } html[lang="fa"] .feature .body h3{font-family:var(--fa);line-height:1.6;font-weight:500} .feature .body p{color:var(--muted);margin:0;font-size:1.02rem;line-height:1.92} .feature .row:nth-child(even) .media{order:2} @media (max-width:719px){ .feature .row:nth-child(even) .media{order:0} } /* ---------- stats band ---------- */ .stats{background:var(--dark);color:#fff;text-align:center} .stats .grid3{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .stats .item{position:relative;padding-block:8px} .stats .item + .item::before{ content:"";position:absolute;inset-block:14% ;inset-inline-start:calc(-1 * clamp(16px,2.5vw,32px)); width:1px;background:rgba(255,255,255,.14); } @media (max-width:719px){ .stats .item + .item::before{display:none} } .stats .n{ display:block;font-family:var(--serif);font-size:clamp(3rem,7vw,4.6rem); line-height:1;color:var(--gold);margin-block-end:14px; } html[lang="fa"] .stats .n{font-family:var(--fa);font-weight:500} .stats .l{color:rgba(255,255,255,.66);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase} html[lang="fa"] .stats .l{letter-spacing:0;text-transform:none;font-size:1rem} /* ---------- about ---------- */ .about{background:var(--cream)} .about-grid{display:grid;gap:clamp(34px,5vw,80px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start} .about p{margin:0 0 22px;font-size:1.04rem;line-height:1.95} .about p:last-child{margin:0} .about .pull{ border-inline-start:2px solid var(--gold);padding-inline-start:26px; font-family:var(--serif);font-size:1.28rem;line-height:1.6;color:var(--ink); } html[lang="fa"] .about .pull{font-family:var(--fa);line-height:1.9;font-size:1.12rem} /* ---------- contact ---------- */ .contact{background:var(--ink);color:#fff} .contact h2{color:#fff} .contact .eyebrow{color:var(--gold-soft)} .contact .eyebrow::before,.contact .eyebrow::after{background:var(--gold)} /* The offices: one column on a phone, two side by side from 760px. Explicit tracks rather than auto-fit — auto-fit collapses its empty tracks, so a single office would stretch its address across the whole 1240px. */ .contact-grid{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr} @media (min-width:760px){ .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } .contact-grid address{max-width:40ch} .contact .block{border-block-start:1px solid rgba(255,255,255,.17);padding-block-start:26px} .contact .label{ text-transform:uppercase;letter-spacing:.22em;font-size:.68rem; color:var(--gold);margin:0 0 14px;font-weight:600; } html[lang="fa"] .contact .label{letter-spacing:0;text-transform:none;font-size:.86rem} .contact address{font-style:normal;color:rgba(255,255,255,.86);line-height:2} .contact .units{color:rgba(255,255,255,.56);font-size:.93rem;margin-block-start:12px;line-height:1.8} .contact a{ color:#fff;text-decoration:none; background-image:linear-gradient(var(--gold),var(--gold)); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; padding-block-end:3px;transition:background-size .4s var(--ease); } .contact a:hover{background-size:0% 1px} /* ---------- contact: telephone ---------- Five bare tel: links in a stack read as a data dump. They are sorted into mobiles and office lines, each number carries a line icon, and the whole block spans the full width under the addresses so the two groups can sit side by side. */ .contact .tel-block{margin-block-start:clamp(30px,4vw,54px)} .telgroups{display:grid;gap:clamp(24px,3.4vw,52px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .telgroup .teltype{ display:flex;align-items:center;gap:12px;margin:0 0 14px; font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600; color:rgba(255,255,255,.5); } /* hairline running out from the label to the end of the column: the same device as the section eyebrows, which is what ties this block to the rest */ .telgroup .teltype::after{content:"";flex:1 1 auto;height:1px;background:rgba(255,255,255,.13)} html[lang="fa"] .telgroup .teltype{letter-spacing:0;text-transform:none;font-size:.86rem} .contact .phones{list-style:none;margin:0;padding:0} .contact .phones li{display:flex;align-items:center;gap:13px;line-height:1.9} .contact .phones li + li{margin-block-start:9px} .contact .phones .ico{ flex:0 0 auto;color:var(--gold);opacity:.82; transition:opacity .35s var(--ease),transform .35s var(--ease); } .contact .phones li:hover .ico{opacity:1;transform:translateY(-1px)} /* tabular figures keep the numbers on a common grid down the column */ .contact .phones a{ display:inline-block;font-size:1.02rem; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; } html[lang="fa"] .contact .phones a{font-size:1.06rem} /* ---------- Instagram ---------- One link, three homes: the company account in the contact section and again in the footer, and a division's own account on its card. The base rule below is shared so the three cannot drift apart; only colour and scale differ, because the cards sit on cream and the other two on near-black. All spacing is `gap` and logical properties, so the Persian layout mirrors without a single RTL override — the icon simply leads from the right. */ .ig{display:inline-flex;align-items:center;gap:11px;text-decoration:none} .ig .ico{flex:0 0 auto;transition:opacity .35s var(--ease),transform .35s var(--ease)} /* the handle is Latin whichever page it is on: @rabiei_holding must not be set in the Persian face just because the paragraph around it is */ .ig-handle{font-family:var(--sans);letter-spacing:.02em} /* contact section — its own block under the telephone numbers, carrying the same hairline rule and gold label as the address and telephone blocks */ .contact .social-block{margin-block-start:clamp(30px,4vw,54px)} .contact .socials{list-style:none;margin:0;padding:0} /* Now a list of three rather than a single link, so the rows need air between them and the caption needs somewhere to sit. wrap + column-gap keeps the caption beside the handle on a wide column and drops it underneath on a narrow one, instead of squeezing the handle. */ .contact .socials li{ display:flex;align-items:baseline;flex-wrap:wrap; column-gap:12px;line-height:1.9;margin-block-start:9px; } .contact .socials li:first-child{margin-block-start:0} /* Which account this is. Quieter than the handle — the handle is the thing being linked to; this only says who it belongs to. */ .contact .socials .ig-for{ font-family:var(--sans);font-size:.83rem;letter-spacing:.04em; text-transform:uppercase;opacity:.5; } /* Persian division names are not uppercase-able and the tracking that flatters Latin small caps only spaces the letters out. */ html[lang="fa"] .contact .socials .ig-for{text-transform:none;letter-spacing:0;font-size:.88rem} .contact .socials .ico{color:var(--gold);opacity:.82} .contact .socials .ig:hover .ico{opacity:1;transform:translateY(-1px)} /* The underline device from `.contact a` belongs on the handle alone — run across the whole link it would strike through the icon as well. */ .contact .ig{background-image:none;padding-block-end:0;font-size:1.02rem} .contact .socials .ig-handle{ background-image:linear-gradient(var(--gold),var(--gold)); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; padding-block-end:3px;transition:background-size .4s var(--ease); } .contact .socials .ig:hover .ig-handle{background-size:0% 1px} /* footer — last item of the contact column, under the telephone number */ .foot-grid li.social{margin-block-start:16px} .foot-grid .ig{gap:10px} .foot-grid .ig .ico{width:17px;height:17px;color:var(--gold);opacity:.85} .foot-grid .ig:hover .ico{opacity:1} /* division card — only rendered for the divisions that run an account. var(--gold) is the accent everywhere else, but it is a dark-background gold: on the cream cards it falls to about 2.3:1, too thin for a 17px line icon beside 12px type. This is the deeper tone the manifesto signature already uses on the same background, so the card stays in the same gold family. */ .card .card-social{margin:15px 0 0} .card .card-social .ig{ gap:9px;color:#8A6D28; font-size:.82rem;letter-spacing:.08em; transition:color .3s var(--ease); } .card .card-social .ico{width:17px;height:17px;opacity:.92} .card .card-social .ig:hover{color:var(--olive)} .card .card-social .ig:hover .ico{transform:translateY(-1px)} html[lang="fa"] .card .card-social .ig{letter-spacing:0;font-size:.86rem} /* ---------- contact: maps + form ---------- */ .contact-main{ display:grid;gap:clamp(34px,4.5vw,64px); grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); align-items:start;margin-block-end:clamp(44px,6vw,76px); } /* one office or several — the maps stack in the column beside the form */ .maps{display:grid;gap:clamp(18px,2.2vw,28px);align-content:start} .mapcard{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03)} .mapcard .frame{position:relative;aspect-ratio:4/3;background:#11130E;overflow:hidden} /* two maps at 4:3 would tower over the form; shorter frames keep the column roughly the height of the enquiry form beside it */ .maps.two .mapcard .frame{aspect-ratio:16/10} .mapcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .mapcard .foot{ display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; padding:16px 20px;border-block-start:1px solid rgba(255,255,255,.14); font-size:.86rem;color:rgba(255,255,255,.66); } .mapcard .foot a{font-size:.84rem} .maplinks{display:flex;gap:16px;flex-wrap:wrap} /* form */ .enquiry .field{margin-block-end:20px} .enquiry label{ display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);margin-block-end:9px;font-weight:600; } html[lang="fa"] .enquiry label{letter-spacing:0;text-transform:none;font-size:.88rem} .enquiry input,.enquiry select,.enquiry textarea{ width:100%;background:rgba(255,255,255,.045);color:#fff; border:1px solid rgba(255,255,255,.2);border-radius:0; padding:14px 16px;font:inherit;font-size:.98rem; transition:border-color .3s var(--ease),background .3s var(--ease); } html[lang="fa"] .enquiry input,html[lang="fa"] .enquiry select,html[lang="fa"] .enquiry textarea{font-family:var(--fa)} .enquiry textarea{min-height:132px;resize:vertical;line-height:1.75} .enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{ outline:none;border-color:var(--gold);background:rgba(255,255,255,.08); } .enquiry input::placeholder,.enquiry textarea::placeholder{color:rgba(255,255,255,.58)} .enquiry select option{background:#161911;color:#fff} .enquiry .row2{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* Honeypot: clip-based hiding, not position:absolute — the form is not a positioned ancestor, so left:-9999px would resolve against the page and can introduce horizontal overflow. This never affects layout. */ .enquiry .hp{ position:absolute!important;width:1px;height:1px; clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap; border:0;padding:0;margin:-1px; } .enquiry input[aria-invalid="true"],.enquiry textarea[aria-invalid="true"]{border-color:#D98A8A} .btn{ display:inline-flex;align-items:center;gap:12px;cursor:pointer; background:transparent;color:#fff;border:1px solid var(--gold); padding:15px 38px;font:inherit;font-size:.76rem;letter-spacing:.22em; text-transform:uppercase;font-weight:600; transition:background .35s var(--ease),color .35s var(--ease); } html[lang="fa"] .btn{letter-spacing:0;text-transform:none;font-size:.95rem} .btn:hover{background:var(--gold);color:var(--ink)} .btn[disabled]{opacity:.55;cursor:progress} .formnote{margin:14px 0 0;font-size:.84rem;color:rgba(255,255,255,.66);line-height:1.7} .formstatus{margin:18px 0 0;padding:14px 18px;font-size:.93rem;display:none;line-height:1.7} .formstatus.show{display:block} .formstatus.ok{background:rgba(122,168,116,.14);border:1px solid rgba(122,168,116,.5);color:#CFE6CB} .formstatus.bad{background:rgba(200,110,110,.12);border:1px solid rgba(200,110,110,.45);color:#F0CFCF} /* ---------- footer ---------- */ footer{background:#0A0C08;color:rgba(255,255,255,.46);padding-block:clamp(48px,6vw,72px) 0;font-size:.9rem} .foot-grid{ display:grid;gap:clamp(30px,4vw,56px); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); padding-block-end:clamp(38px,5vw,56px); } .foot-grid h4{ font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold); margin:0 0 18px;font-weight:600; } html[lang="fa"] .foot-grid h4{letter-spacing:0;text-transform:none;font-size:.88rem} .foot-grid ul{list-style:none;margin:0;padding:0} .foot-grid li{margin-block-end:9px;line-height:1.7} /* separates one office's address lines from the next in the contact column */ .foot-grid li.gap{margin-block-start:16px} .foot-grid a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .25s} .foot-grid a:hover{color:#fff} .foot-grid img{height:96px;width:auto;opacity:.9;margin-block-end:20px} .foot-grid .blurb{color:rgba(255,255,255,.64);line-height:1.8;font-size:.88rem;margin:0} .foot-bar{ border-block-start:1px solid rgba(255,255,255,.1);padding-block:22px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center; font-size:.84rem;color:rgba(255,255,255,.62); } .foot-bar a{color:rgba(255,255,255,.66);text-decoration:none} .foot-bar a:hover{color:#fff} /* ---------- mobile nav ---------- */ .navtoggle{ display:none;background:none;border:0;cursor:pointer;padding:8px; flex-direction:column;gap:5px; position:relative;z-index:10; /* must sit ABOVE the overlay or it cannot be clicked to close */ } .navtoggle span{display:block;width:24px;height:1.5px;background:#fff;transition:transform .3s var(--ease),opacity .3s} .navtoggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .navtoggle.open span:nth-child(2){opacity:0} .navtoggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} @media (max-width:860px){ .navtoggle{display:flex} header.site .navlinks{ position:fixed;inset-block-start:0;inset-inline:0; background:rgba(10,12,8,.985);backdrop-filter:blur(16px); flex-direction:column!important;align-items:center;justify-content:center; height:100vh; /* fallback for Safari < 15.4 / Chrome < 108 */ height:100svh; gap:26px!important; opacity:0;pointer-events:none;transition:opacity .4s var(--ease),visibility .4s; visibility:hidden; /* keeps links out of the tab order and a11y tree when closed */ z-index:4; } header.site .navlinks.open{opacity:1;pointer-events:auto;visibility:visible} header.site .navlinks a{font-size:1.15rem;letter-spacing:.16em} html[lang="fa"] header.site .navlinks a{font-size:1.25rem;letter-spacing:0} } /* ---------- skip link ---------- */ .skip{ position:absolute;inset-block-start:-100px;inset-inline-start:16px;z-index:200; background:var(--gold);color:var(--ink);padding:12px 20px;text-decoration:none; font-size:.85rem;transition:inset-block-start .25s; } .skip:focus{inset-block-start:16px} @media (max-width:640px){ body{font-size:16px} .hero{min-height:88svh} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} .hero .divider{width:190px} }