/* ژیار — page styles. Appends to tokens.css's layers. Logical properties only. No physical left/right anywhere. */ @layer components { /* ═══ UTILITY — no inline style attributes anywhere (CSP: style-src 'self') ═ */ .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; } .page-center { min-block-size: 100svh; display: grid; place-items: center; } /* ═══ HERO ════════════════════════════════════════════════════════════════ */ .hero { position: relative; isolation: isolate; background-color: var(--night); overflow: hidden; overflow: clip; padding: 0; /* MUST stay 0 — canvas/mark are absolute against the border box */ /* The sticky nav keeps its --nav-h of flow at the top of , so without this the hero would start BELOW the bar and `html.nav-over-hero` would be painting Paper-coloured text onto the Paper page background — invisible. Pulling the hero up by exactly the nav height puts it behind the bar. Applied unconditionally, not under .nav-over-hero: if it were conditional, removing that class mid-scroll would jump the page by --nav-h. The no-JS state stays correct — an opaque Paper bar over the Night hero, and .hero__inner's padding-block already clears it. */ margin-block-start: calc(-1 * var(--nav-h)); } /* no-JS / pre-JS lattice: real Night-700 squares from two gradients. No image, no request, zero bytes. */ .hero__fallback { position: absolute; inset: 0; z-index: 0; background-color: var(--night); background-image: repeating-linear-gradient(to bottom, transparent 0 var(--zh-tile, 28px), var(--night) var(--zh-tile, 28px) var(--zh-pitch, 34px)), repeating-linear-gradient(to right, var(--night-700) 0 var(--zh-tile, 28px), transparent var(--zh-tile, 28px) var(--zh-pitch, 34px)); } .hero[data-zh-live="1"] .hero__fallback { display: none; } .hero__field { position: absolute; inset: 0; z-index: 1; display: block; } .hero__mark { position: absolute; z-index: 2; inline-size: var(--zh-mark-size, min(30vw, 44vh)); block-size: var(--zh-mark-size, min(30vw, 44vh)); inset-inline-end: var(--zh-mark-ie, 7vw); /* inline-END = the LEFT in RTL */ inset-block-start: var(--zh-mark-bs, 26%); opacity: var(--zh-mark-reveal, 1); /* 1 = the no-JS resting state */ } .hero__inner { position: relative; z-index: 3; min-block-size: min(80svh, 820px); /* the 60/30/10 ratio depends on this */ display: grid; align-items: center; justify-items: start; /* inline-start = the RIGHT in RTL */ padding-block: clamp(96px, 13vh, 148px); /* clears the sticky nav */ padding-inline: var(--gutter); } .hero__stage { display: grid; grid-template-areas: "content"; inline-size: min(52ch, 54%); } .hero__scrim, .hero__content { grid-area: content; } /* Guide p10: "a Night layer at 60% opacity under the text — not a coloured gradient." The negative margin is exactly one lattice module: the logo's clear-space rule, applied to the words. LOAD-BEARING — do not remove. */ .hero__scrim { margin: calc(-1 * var(--zh-pitch, 34px)); background: rgb(23 20 50 / 0.6); } .hero__content { position: relative; display: grid; gap: clamp(14px, 1.6vh, 22px); } .hero__eyebrow { font: var(--fw-body) var(--fs-small)/var(--lh-small) var(--font-fa); color: var(--night-100); display: flex; align-items: center; gap: var(--sp-3); } .hero__marker { inline-size: 10px; block-size: 10px; background: var(--orange); flex: none; } .hero__title { font-family: var(--font-fa); font-weight: var(--fw-bold); font-size: var(--fs-hero); line-height: var(--lh-hero); /* 1.3 — headings follow the type scale */ color: var(--paper); text-wrap: balance; } .hero__slogan { font-family: var(--font-fa); font-weight: var(--fw-bold); font-size: var(--fs-section); line-height: var(--lh-section); color: var(--orange-300); /* 9.54:1 — only ever on Night */ } .hero__lead { font: var(--fw-body) var(--fs-subtitle)/var(--lh-lead) var(--font-fa); color: var(--night-300); max-inline-size: 44ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-block-start: var(--sp-2); } /* WCAG 2.2.2 — the in-page motion stop. hero.js wires it. */ .hero__motion { min-block-size: 44px; padding-inline: var(--sp-3); color: var(--night-300); text-decoration-line: underline; } .hero__motion:hover { color: var(--paper); } .hero__motion[hidden] { display: none; } @media (max-width: 859px) { .hero__inner { align-items: start; justify-items: stretch; min-block-size: min(92svh, 780px); } .hero__stage { inline-size: 100%; } /* the fallback inside calc() is mandatory — a bare var() is invalid at computed-value time */ .hero__mark { inset-inline-end: calc((100% - var(--zh-mark-size, min(30vw, 44vh))) / 2); } } /* ═══ SERVICES ════════════════════════════════════════════════════════════ */ .svc { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1080px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .svc { grid-template-columns: 1fr; } } .svc__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: var(--sp-4); transition: border-color var(--dur-base) var(--rv-ease), transform var(--dur-base) var(--rv-ease), border-end-end-radius 320ms var(--rv-ease); } /* The hover moment: the end-end corner (bottom-left in RTL — the only empty one) morphs square → quarter circle. The brand's whole shape vocabulary, expressed as a state change. */ .svc__card:hover, .svc__card:focus-within { border-color: var(--night-100); transform: translateY(-2px); border-end-end-radius: 44px; } @media (prefers-reduced-motion: reduce) { .svc__card { transition: none; } .svc__card:hover, .svc__card:focus-within { transform: none; } } .svc__icon { color: var(--text); display: block; flex: none; } .svc__name { font: var(--fw-medium) var(--fs-subtitle)/var(--lh-subtitle) var(--font-fa); color: var(--text); } .svc__text { color: var(--text-muted); } .svc__meta { margin-block-start: auto; padding-block-start: var(--sp-3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); } /* ═══ PRODUCT STRIP — the one کامیران mention ═════════════════════════════ Named and linked, never described. A Night strip on the Paper section: it gives the product real presence instead of leaving a stray sentence in white space, and it pays a little of the 30% Night budget. */ .product { margin-block-start: clamp(28px, 3.5vw, 46px); display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 30px); background: var(--night); color: var(--paper); border-radius: var(--r-xl); padding: clamp(20px, 2.4vw, 30px) clamp(22px, 3vw, 38px); text-decoration: none; transition: border-end-end-radius 320ms var(--rv-ease), transform var(--dur-base) var(--rv-ease); } .product:hover, .product:focus-visible { border-end-end-radius: 52px; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .product { transition: none; } .product:hover, .product:focus-visible { transform: none; } } .product__mark { inline-size: 44px; block-size: 44px; flex: none; color: var(--paper); } .product__text { display: grid; gap: 3px; } .product__eyebrow { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--grey-300); } .product__name { font-family: var(--font-fa); font-weight: var(--fw-bold); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.4; color: var(--paper); } .product__sub { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--grey-300); } .product__go { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--orange-300); /* 9.56:1 on Night ✓ */ min-block-size: 44px; } .product__url { font-family: var(--font-latin); font-weight: var(--fw-medium); font-size: 1.0625rem; letter-spacing: .04em; /* LATIN ONLY */ text-decoration-line: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } /* the arrow points at the inline-end, which is the LEFT in RTL */ .product__arrow { flex: none; transition: transform var(--dur-base) var(--rv-ease); } .product:hover .product__arrow { transform: translateX(-4px); } @media (prefers-reduced-motion: reduce) { .product__arrow { transition: none; } } @media (max-width: 560px) { .product__go { margin-inline-start: 0; } } /* ═══ آرمان — the town from above ═════════════════════════════════════════ */ .mission__grid { display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 88px); } @media (max-width: 900px) { .mission__grid { grid-template-columns: 1fr; gap: 44px; } } .mission__quote { font-family: var(--font-fa); font-weight: var(--fw-medium); font-size: var(--fs-section); /* Display-scale Persian: --lh-section (1.4) is tuned for one-line headings and leaves too little room for descenders across a wrapped sentence. 1.55 is the compromise — short of the 1.7 prose floor because this is set at heading size, but well clear of collision. */ line-height: 1.55; color: var(--paper); margin: 0; max-inline-size: 22ch; text-wrap: balance; } .mission__text > * + * { margin-block-start: var(--sp-5); } .mission__body { font: var(--fw-body) var(--fs-subtitle)/var(--lh-lead) var(--font-fa); color: var(--night-100); max-inline-size: 46ch; } .mission__beat { color: var(--orange-300); font-weight: var(--fw-medium); } .mission__map { margin: 0; } /* 12 columns at EVERY breakpoint. Reflowing to 6 on mobile would scramble the composition and destroy the three-node row. Cells just get smaller. */ .mg { direction: ltr; /* decorative, contains no text — LOAD-BEARING */ display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(4px, 0.85vw, 11px); inline-size: 100%; } .mg__c { aspect-ratio: 1; background: var(--night-700); } .mg__c.is-void { background: transparent; } .mg__c--qtl { border-radius: 100% 0 0 0; } /* physical order TL TR BR BL — the */ .mg__c--qtr { border-radius: 0 100% 0 0; } /* container is direction:ltr, so */ .mg__c--qbr { border-radius: 0 0 100% 0; } /* physical == authored */ .mg__c--qbl { border-radius: 0 0 0 100%; } .mg__c--n1, .mg__c--n2, .mg__c--n3 { background: var(--orange); } .mg__cap { direction: rtl; margin-block-start: 18px; font: var(--fw-body) var(--fs-small)/var(--lh-small) var(--font-fa); color: var(--grey-400); /* 5.56:1 on Night ✓ */ } /* the three nodes breathe — opacity only, no glow, no scale, no colour shift. .is-live is toggled by an IntersectionObserver, so the animation does not exist while the section is off screen. */ @media (prefers-reduced-motion: no-preference) { .mg.is-live .mg__c--n1, .mg.is-live .mg__c--n2, .mg.is-live .mg__c--n3 { animation: mg-breathe 4.8s ease-in-out infinite; } .mg.is-live .mg__c--n1 { animation-delay: 1.2s; } .mg.is-live .mg__c--n2 { animation-delay: 2.8s; } .mg.is-live .mg__c--n3 { animation-delay: 4.4s; } } @keyframes mg-breathe { 0%, 100% { opacity: 1 } 46% { opacity: .52 } } .values { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding-block-start: clamp(28px, 3vw, 40px); border-block-start: 1px solid var(--night-700); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .values__item { font: var(--fw-medium) 1.125rem/var(--lh-small) var(--font-fa); color: var(--paper); display: flex; align-items: center; gap: var(--sp-3); } .values__item::before { content: ""; inline-size: 10px; block-size: 10px; background: var(--orange); flex: none; } @media (max-width: 640px) { .values { grid-template-columns: 1fr; gap: var(--sp-4); } } /* ═══ COMPANY — the registry block ════════════════════════════════════════ */ .facts { background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 42px); display: grid; gap: 0; margin-block-start: var(--sp-8); } .facts__row { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: var(--sp-3) var(--sp-6); padding-block: var(--sp-5); border-block-start: 1px solid var(--border); } .facts__row:first-child { border-block-start: 0; padding-block-start: 0; } .facts__k { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); } .facts__v { color: var(--text); margin: 0; } @media (max-width: 640px) { .facts__row { grid-template-columns: 1fr; gap: var(--sp-2); } } /* ═══ CONTACT ═════════════════════════════════════════════════════════════ */ .contact__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 4vw, 56px); max-inline-size: 1080px; align-items: start; margin-block-start: var(--sp-8); } @media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } } .contact__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); } /* the ONE Night card on a Paper section — where #contact pays part of the 30% Night budget without turning the whole section dark */ .contact__card { background: var(--night); color: var(--paper); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); display: grid; gap: var(--sp-5); } /* prose, not a heading — the brand's 1.7 Persian floor applies */ .contact__visit { font: var(--fw-medium) var(--fs-subtitle)/1.7 var(--font-fa); color: var(--paper); } .mailto { font: var(--fw-medium) clamp(20px, 2.4vw, 26px)/1.4 var(--font-latin); color: var(--text); text-decoration-line: underline; text-decoration-color: var(--night-300); text-underline-offset: 6px; text-decoration-thickness: 1px; letter-spacing: .01em; /* LATIN ONLY — never applied to Persian */ display: inline-block; } .mailto:hover, .mailto:focus-visible { color: var(--text); text-decoration-color: var(--accent-text); } .loc { display: block; flex: none; } .addr { font: var(--fw-body) 0.9375rem/1.95 var(--font-fa); color: var(--night-100); font-style: normal; display: grid; gap: 2px; } .postal { display: inline-flex; direction: ltr; gap: 5px; flex-wrap: wrap; } .postal__c { inline-size: clamp(26px, 3.2vw, 34px); aspect-ratio: 1; display: grid; place-items: center; background: var(--night-700); color: var(--paper); /* 12.04:1 ✓ */ font: var(--fw-medium) 0.9375rem/1 var(--font-fa); font-style: normal; } /* 1px of real area so IntersectionObserver has something to measure, pulled back by 1px so it costs no layout. Sits exactly on the hero's bottom edge. */ .nav-sentinel { block-size: 1px; margin-block-start: -1px; } /* ═══ NAV — the scrolled state must actually read as a bar ════════════════ tokens.css gives the resting nav 90% Paper + a 1px hairline. Over a Paper section that is indistinguishable from the page, so once you scroll off the hero the sticky bar looks like floating text. Make it solid and give it a real edge. */ html:not(.nav-over-hero) .nav { background-color: var(--paper); box-shadow: 0 1px 0 var(--hair-paper), 0 8px 24px -16px rgb(23 20 50 / 0.38); } /* Over the hero, tokens.css makes the bar fully transparent — but the lattice underneath contains lit orange cells, and a nav link landing on one drops to ~3.8:1. Guide p10 prescribes the fix for exactly this case: "a Night layer at 60% opacity under the text — not a coloured gradient." Flat 60% Night holds the worst case (Paper on Orange-500 through the scrim) at 8.4:1. */ html.nav-over-hero .nav { background-color: rgb(23 20 50 / 0.6); } /* ═══ FOOTER LOCKUP ═══════════════════════════════════════════════════════ The footer logo deliberately does NOT reuse .nav__brand. tokens.css has `html.nav-over-hero .nav__brand { color: var(--paper) }` — unscoped — so any element carrying that class went Paper-on-Paper while the user was at the top of the page, which silently hid the footer logo. Giving the footer its own class removes the conflict instead of out-specifying it. */ .footer__brand { display: inline-flex; align-items: center; flex: none; min-block-size: 44px; text-decoration: none; color: var(--text); } /* ═══ TEAM — the two cards must be the SAME HEIGHT ════════════════════════ */ /* tokens.css sets align-items:start, which lets each card shrink to its own bio length. The client wants a matched pair, so stretch them to the tallest in the row. The avatar frame is already identical (aspect-ratio 4/5 with an absolutely-positioned child), so the real photo and the placeholder are the same size by construction; only the text below them varies. */ .team { align-items: stretch; } .person__bio { margin-block-end: auto; } /* forced-colors: set the custom properties, not `fill` — a `fill` rule cannot cross the shadow boundary, but inherited custom properties can. */ @media (forced-colors: active) { .logo__mark { --logo-module: CanvasText; --logo-body: CanvasText; } } /* ═══ TOUCH TARGETS — WCAG 2.5.8, minimum 44×44 ═══════════════════════════ */ .nav__brand { min-block-size: 44px; } .footer__list a, .footer__addr a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; padding-inline-end: var(--sp-2); } .mailto { display: inline-flex; align-items: center; min-block-size: 44px; } .facts__v a { display: inline-flex; align-items: center; min-block-size: 44px; } /* ═══ FOOTER ══════════════════════════════════════════════════════════════ */ .footer { border-block-start: 1px solid var(--hair-paper); } .footer__base { margin-block-start: clamp(32px, 4vw, 52px); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--hair-paper); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-6); } .footer__base .footer__latin { margin-inline-start: auto; } @media (max-width: 640px) { .footer__base .footer__latin { margin-inline-start: 0; } } .footer__latin { font-family: var(--font-latin); font-weight: var(--fw-medium); letter-spacing: 0.3em; margin-inline-end: -0.3em; /* LATIN ONLY */ color: var(--accent-text); /* #8E5210 on Paper = 5.89:1 ✓ */ direction: ltr; unicode-bidi: isolate; } }