/* ژیار — 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 STRIPS — کامێران and ژُمار ══════════════════════════════════ Named and linked, never described. Night strips on the Paper section give the products real presence instead of leaving a stray sentence in white space, and they pay a little of the 30% Night budget. Both are live, so both are solid — but side by side, not stacked: two full-width Night blocks would spend that budget twice over. */ .products { margin-block-start: clamp(28px, 3.5vw, 46px); display: grid; gap: clamp(12px, 1.4vw, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 860px) { .products { grid-template-columns: 1fr; } } .product { 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); } a.product:hover, a.product:focus-visible { border-end-end-radius: 52px; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .product { transition: none; } a.product:hover, a.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); } a.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: flex; flex-direction: column; gap: var(--sp-7); max-inline-size: 1080px; margin-inline: auto; align-items: stretch; margin-block-start: var(--sp-8); } .contact__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); box-sizing: border-box; } .form-footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-block-start: var(--sp-5); inline-size: 100%; box-sizing: border-box; } /* 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, 3.5vw, 40px); display: grid; gap: var(--sp-5); } .contact__card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sp-6); align-items: start; } /* 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(18px, 2.2vw, 24px)/1.4 var(--font-latin); color: var(--orange-300); text-decoration-line: underline; text-decoration-color: rgba(255, 170, 77, 0.45); text-underline-offset: 6px; text-decoration-thickness: 1px; letter-spacing: .01em; /* LATIN ONLY — never applied to Persian */ display: inline-block; transition: color var(--dur-fast), text-decoration-color var(--dur-fast); } .mailto:hover, .mailto:focus-visible { color: var(--white); text-decoration-color: var(--orange); } .surface-paper .mailto { color: var(--orange-700); text-decoration-color: rgba(142, 82, 16, 0.35); } .surface-paper .mailto:hover, .surface-paper .mailto:focus-visible { color: var(--text); text-decoration-color: var(--orange-700); } .contact__card .mailto, .surface-night .mailto { color: var(--orange-300) !important; text-decoration-color: rgba(255, 170, 77, 0.45) !important; } .contact__card .mailto:hover, .surface-night .mailto:hover, .contact__card .mailto:focus-visible, .surface-night .mailto:focus-visible { color: var(--white) !important; text-decoration-color: var(--orange) !important; } .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; } .contact__postal-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); padding-block-start: var(--sp-4); border-block-start: 1px solid rgba(255, 255, 255, 0.1); margin-block-start: var(--sp-2); } .contact__postal-meta { display: flex; align-items: center; gap: var(--sp-2); } .contact__postal-label { font-size: 0.9375rem; color: var(--night-100); } .contact__postal-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .contact__card .btn--ghost { background-color: rgba(255, 255, 255, 0.05); color: var(--white); border-color: rgba(255, 255, 255, 0.18); transition: all var(--dur-fast); } .contact__card .btn--ghost:hover { background-color: var(--night-700); border-color: var(--orange-300); color: var(--orange-300); } .postal { display: inline-flex; direction: ltr; gap: clamp(4px, 0.8vw, 6px); flex-wrap: nowrap; align-items: center; max-inline-size: 100%; } .postal__c { inline-size: clamp(24px, 2.8vw, 32px); aspect-ratio: 1; display: grid; place-items: center; background: var(--night-700); color: var(--paper); /* 12.04:1 ✓ */ border-radius: var(--r-xs); border: 1px solid rgba(255, 255, 255, 0.1); font: var(--fw-bold) clamp(0.875rem, 1.1vw, 1rem)/1 var(--font-fa); font-style: normal; transition: border-color var(--dur-fast), transform var(--dur-fast); } .postal:hover .postal__c { border-color: rgba(255, 170, 77, 0.35); } @media (max-width: 600px) { .contact__postal-row { flex-direction: column; align-items: stretch; gap: var(--sp-3); } .contact__postal-actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); } .postal { justify-content: center; gap: 4px; inline-size: 100%; overflow-x: auto; } .postal__c { inline-size: 24px; aspect-ratio: 1; font-size: 0.8125rem; flex-shrink: 0; } } /* 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__cert { display: flex; flex-direction: column; } .footer__cert-link { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; max-inline-size: 13.5rem; padding-block: var(--sp-2); padding-inline: var(--sp-3); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .footer__cert-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .footer__cert-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .footer__cert-img { inline-size: 100%; block-size: auto; max-block-size: 3rem; object-fit: contain; display: block; } .footer__base { margin-block-start: var(--sp-6); 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; } /* ══════════════════════════════════════════════════════════════════════════ MULTI-PAGE NAVIGATION & MOBILE DRAWER ══════════════════════════════════════════════════════════════════════════ */ .nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); position: relative; } .nav__links-desktop { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; } .nav__links-desktop .nav__link { position: relative; display: inline-flex; align-items: center; padding-inline: var(--sp-3); padding-block: var(--sp-2); border-radius: var(--r-md); font-weight: var(--fw-medium); font-size: var(--fs-small); color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .nav__links-desktop .nav__link:hover { color: var(--text); background-color: rgb(210 129 31 / 0.08); } .nav__links-desktop .nav__link[aria-current="page"] { color: var(--text-strong); font-weight: var(--fw-bold); background-color: rgb(210 129 31 / 0.12); } .nav__links-desktop .nav__link[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--sp-3); inset-block-end: 2px; block-size: 2px; background-color: var(--orange); border-radius: 2px; } html.nav-over-hero .nav__links-desktop .nav__link { color: var(--night-100); } html.nav-over-hero .nav__links-desktop .nav__link:hover { color: var(--white); background-color: rgb(255 255 255 / 0.1); } html.nav-over-hero .nav__links-desktop .nav__link[aria-current="page"] { color: var(--white); background-color: rgb(255 255 255 / 0.15); } .nav__actions { display: inline-flex; align-items: center; gap: var(--sp-3); } .nav__btn-portal { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.875rem; font-weight: var(--fw-bold); padding-inline: var(--sp-3); padding-block: 0.45rem; border-radius: var(--r-md); background-color: var(--orange); color: var(--night-900); text-decoration: none; box-shadow: 0 2px 8px rgb(210 129 31 / 0.3); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .nav__btn-portal:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgb(210 129 31 / 0.45); } /* Mobile Nav Toggle */ .nav__toggle { display: none; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); cursor: pointer; padding: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } html.nav-over-hero .nav__toggle { border-color: rgb(255 255 255 / 0.25); color: var(--white); } .nav__toggle-icon { display: flex; flex-direction: column; gap: 5px; inline-size: 20px; pointer-events: none; } .nav__toggle-icon span { display: block; inline-size: 100%; block-size: 2px; background-color: currentColor; border-radius: 2px; pointer-events: none; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav__toggle[aria-expanded="true"] .nav__toggle-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-icon span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__toggle-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Drawer */ .nav__drawer-overlay { position: fixed; inset: 0; background: rgb(13 11 28 / 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: calc(var(--z-drawer, 200) - 1); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--dur-normal) var(--ease-out), visibility 0s linear var(--dur-normal); } .nav__drawer-overlay.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity var(--dur-normal) var(--ease-out), visibility 0s; } .nav__drawer { position: fixed; top: 0; bottom: 0; right: 0; left: auto; inline-size: min(84vw, 340px); background-color: var(--night-900); color: var(--paper); z-index: var(--z-drawer, 200); transform: translateX(100%); -webkit-transform: translateX(100%); visibility: hidden; opacity: 0; pointer-events: none; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0s linear 0.28s; -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0s linear 0.28s; box-shadow: -8px 0 32px rgb(0 0 0 / 0.5); display: flex; flex-direction: column; padding: var(--sp-6) var(--sp-5); overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav__drawer.is-open { transform: translateX(0); -webkit-transform: translateX(0); visibility: visible; opacity: 1; pointer-events: auto; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0s; -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0s; } .nav__drawer-head { display: flex; align-items: center; justify-content: space-between; padding-block-end: var(--sp-5); border-block-end: 1px solid var(--night-700); margin-block-end: var(--sp-4); } .nav__drawer-close { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--r-md); border: 1px solid var(--night-700); background: transparent; color: var(--paper); cursor: pointer; } .nav__drawer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); } .nav__drawer-link { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); color: var(--night-100); text-decoration: none; font-weight: var(--fw-medium); font-size: 1rem; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav__drawer-link:hover, .nav__drawer-link[aria-current="page"] { background-color: var(--night-700); color: var(--white); } .nav__drawer-link[aria-current="page"] { border-inline-start: 3px solid var(--orange); } .nav__drawer-footer { margin-block-start: auto; padding-block-start: var(--sp-6); border-block-start: 1px solid var(--night-700); display: grid; gap: var(--sp-3); } @media (min-width: 961px) { .nav__drawer, .nav__drawer-overlay, .nav__toggle { display: none !important; } } @media (max-width: 960px) { .nav__links-desktop { display: none; } .nav__toggle { display: inline-flex; } } /* ══════════════════════════════════════════════════════════════════════════ INNER PAGE HERO & BREADCRUMB ══════════════════════════════════════════════════════════════════════════ */ .hero--inner { position: relative; background-color: var(--night); color: var(--paper); padding-block: clamp(100px, 14vh, 150px) var(--sp-8); overflow: clip; } .hero--inner .hero__inner { min-block-size: auto; padding: 0; } .hero-badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.25rem 0.75rem; background-color: rgb(210 129 31 / 0.15); border: 1px solid rgb(210 129 31 / 0.35); border-radius: var(--r-full); color: var(--orange-300); font-size: 0.8125rem; font-weight: var(--fw-medium); margin-block-end: var(--sp-4); } .hero-badge__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background-color: var(--orange); box-shadow: 0 0 8px var(--orange); animation: pulse-dot 2s infinite ease-in-out; } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.6; } } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-4) 0; font-size: 0.8125rem; color: var(--night-300); } .breadcrumb a { color: var(--night-300); text-decoration: none; transition: color var(--dur-fast); } .breadcrumb a:hover { color: var(--orange-300); text-decoration: underline; } .breadcrumb__sep { opacity: 0.5; font-size: 0.75rem; } .breadcrumb__current { color: var(--paper); font-weight: var(--fw-medium); } /* ══════════════════════════════════════════════════════════════════════════ AI PILLARS & ARCHITECTURE STYLES ══════════════════════════════════════════════════════════════════════════ */ .ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--sp-6); margin-block-start: var(--sp-6); } .ai-card { position: relative; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); } .ai-card:hover { transform: translateY(-4px); border-color: var(--orange-300); box-shadow: 0 12px 28px -8px rgb(23 20 50 / 0.12); } .surface-night .ai-card { background-color: var(--night-900); border-color: var(--night-700); color: var(--paper); } .surface-night .ai-card:hover { border-color: var(--orange); box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.5); } .ai-card__tag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 0.75rem; font-weight: var(--fw-bold); padding: 0.2rem 0.6rem; border-radius: var(--r-sm); background-color: rgb(210 129 31 / 0.12); color: var(--orange-700); max-inline-size: fit-content; margin-block-end: var(--sp-3); } .surface-night .ai-card__tag { background-color: rgb(210 129 31 / 0.2); color: var(--orange-300); } .ai-card__icon { inline-size: 48px; block-size: 48px; display: grid; place-items: center; border-radius: var(--r-lg); background-color: rgb(210 129 31 / 0.1); color: var(--orange-700); margin-block-end: var(--sp-4); } .surface-night .ai-card__icon { background-color: var(--night-700); color: var(--orange-300); } .ai-card__title { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--text); margin-block-end: var(--sp-3); } .surface-night .ai-card__title { color: var(--white); } .ai-card__desc { font-size: 0.9375rem; line-height: 1.75; color: var(--text-muted); margin-block-end: var(--sp-4); } .surface-night .ai-card__desc { color: var(--night-100); } .ai-card__specs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); margin-block-end: var(--sp-5); margin-block-start: auto; } .ai-card__spec-item { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 0.875rem; color: var(--text); } .surface-night .ai-card__spec-item { color: var(--night-100); } .ai-card__spec-item svg { flex-shrink: 0; margin-block-start: 3px; color: var(--orange); } /* ══════════════════════════════════════════════════════════════════════════ 2-COLUMN FEATURE SPLIT (AI PILLARS & STORY SECTIONS) ══════════════════════════════════════════════════════════════════════════ */ .feature-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); align-items: center; } .feature-split--reversed { grid-template-columns: 1fr 1.2fr; } .feature-split__title { font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: var(--fw-bold); line-height: 1.35; margin-block: var(--sp-2); } @media (max-width: 860px) { .feature-split, .feature-split--reversed { grid-template-columns: 1fr; gap: var(--sp-6); } /* When stacked on mobile, ensure textual explanation comes first */ .feature-split--reversed > :first-child { order: 2; } .feature-split--reversed > :last-child { order: 1; } } /* ══════════════════════════════════════════════════════════════════════════ INTERACTIVE AI PIPELINE EXPLORER ══════════════════════════════════════════════════════════════════════════ */ .pipeline-explorer { background-color: var(--night-900); border: 1px solid var(--night-700); border-radius: var(--r-xl); overflow: clip; box-shadow: 0 16px 40px -10px rgb(0 0 0 / 0.5); margin-block-start: var(--sp-6); } .pipeline-header { padding: var(--sp-5) var(--sp-6); border-block-end: 1px solid var(--night-700); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); background-color: rgb(23 20 50 / 0.7); } .pipeline-title { font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--white); display: flex; align-items: center; gap: var(--sp-3); } .pipeline-stepper { display: flex; overflow-x: auto; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); background-color: var(--night); border-block-end: 1px solid var(--night-700); scrollbar-width: thin; } .pipeline-step-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--night-700); background: transparent; color: var(--night-300); font-family: var(--font-fa); font-size: 0.8125rem; cursor: pointer; white-space: nowrap; transition: all var(--dur-fast) var(--ease-out); } .pipeline-step-btn:hover { background-color: var(--night-700); color: var(--white); } .pipeline-step-btn.is-active { background-color: var(--orange); border-color: var(--orange); color: var(--night-900); font-weight: var(--fw-bold); } .pipeline-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-6); padding: clamp(20px, 3vw, 32px); } @media (max-width: 860px) { .pipeline-body { grid-template-columns: 1fr; } } .pipeline-console { background-color: #06050b; border: 1px solid var(--night-700); border-radius: var(--r-lg); padding: var(--sp-4); font-family: var(--font-mono); font-size: 0.8125rem; color: #a8a3c2; overflow-x: auto; direction: ltr; text-align: left; line-height: 1.6; } .pipeline-console pre { margin: 0; white-space: pre-wrap; word-break: break-all; } .pipeline-info { display: flex; flex-direction: column; justify-content: center; } .pipeline-info__title { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--white); margin-block-end: var(--sp-3); } .pipeline-info__desc { font-size: 0.9375rem; line-height: 1.8; color: var(--night-100); margin-block-end: var(--sp-5); } .pipeline-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-block-start: auto; } .pipeline-metric-card { background-color: var(--night-700); border-radius: var(--r-md); padding: var(--sp-3); text-align: center; } .pipeline-metric-val { font-family: var(--font-latin); font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--orange-300); direction: ltr; } .pipeline-metric-lbl { font-size: 0.6875rem; color: var(--night-300); margin-block-start: 2px; } /* ══════════════════════════════════════════════════════════════════════════ PRODUCTS HUB & PRODUCT PAGES ══════════════════════════════════════════════════════════════════════════ */ .product-showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-block-start: var(--sp-8); } @media (max-width: 920px) { .product-showcase-grid { grid-template-columns: 1fr; } } .product-hero-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: clip; display: flex; flex-direction: column; box-shadow: var(--shadow-md); transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); } .product-hero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .surface-night .product-hero-card { background-color: var(--night-900); border-color: var(--night-700); color: var(--paper); } .product-hero-card__banner { padding: clamp(28px, 4vw, 44px); background: radial-gradient(circle at 100% 0%, rgb(210 129 31 / 0.15) 0%, transparent 70%), var(--night); color: var(--paper); position: relative; } .product-hero-card__body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; flex: 1; } .product-feature-tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-4); } .product-feature-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; padding: 0.3rem 0.75rem; border-radius: var(--r-full); background-color: var(--surface-sunk); color: var(--text); border: 1px solid var(--border); } .surface-night .product-feature-tag { background-color: var(--night-700); color: var(--night-100); border-color: var(--night-500); } /* Docs Callout Banner */ .doc-callout { background: linear-gradient(135deg, var(--night-900) 0%, var(--night) 100%); border: 1px solid rgb(210 129 31 / 0.4); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); color: var(--paper); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-6); box-shadow: 0 8px 24px -6px rgb(0 0 0 / 0.4); margin-block: var(--sp-8); } @media (max-width: 780px) { .doc-callout { grid-template-columns: 1fr; } } .doc-callout__icon { inline-size: 64px; block-size: 64px; display: grid; place-items: center; border-radius: var(--r-lg); background-color: rgb(210 129 31 / 0.15); color: var(--orange-300); } .doc-callout__title { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--white); margin-block-end: var(--sp-2); } .doc-callout__desc { font-size: 0.9375rem; color: var(--night-100); line-height: 1.7; margin: 0; } /* ══════════════════════════════════════════════════════════════════════════ CUSTOMER PORTAL GUIDE & 6-STAGE WORKFLOW ══════════════════════════════════════════════════════════════════════════ */ .workflow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-5); margin-block-start: var(--sp-6); } .workflow-step-card { position: relative; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; transition: transform var(--dur-fast), border-color var(--dur-fast); } .workflow-step-card:hover { transform: translateY(-3px); border-color: var(--orange); } .surface-night .workflow-step-card { background-color: var(--night-900); border-color: var(--night-700); color: var(--paper); } .workflow-step-num { font-family: var(--font-latin); font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--orange); line-height: 1; margin-block-end: var(--sp-3); display: flex; align-items: center; justify-content: space-between; } .workflow-step-title { font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--text); margin-block-end: var(--sp-2); } .surface-night .workflow-step-title { color: var(--white); } .workflow-step-desc { font-size: 0.875rem; line-height: 1.7; color: var(--text-muted); } .surface-night .workflow-step-desc { color: var(--night-100); } /* Support SLA Tiers */ .support-tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-block-start: var(--sp-6); } @media (max-width: 860px) { .support-tiers-grid { grid-template-columns: 1fr; } } .support-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; } .support-card--featured { border-color: var(--orange); box-shadow: 0 8px 24px -4px rgb(210 129 31 / 0.25); position: relative; } .support-card__badge { display: inline-block; font-size: 0.75rem; font-weight: var(--fw-bold); padding: 0.25rem 0.75rem; border-radius: var(--r-full); background-color: var(--orange); color: var(--night-900); margin-block-end: var(--sp-3); max-inline-size: fit-content; } /* ══════════════════════════════════════════════════════════════════════════ INTERACTIVE CONTACT FORM & ESTIMATOR ══════════════════════════════════════════════════════════════════════════ */ .contact-form-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 3.5vw, 36px); box-shadow: var(--shadow-md); box-sizing: border-box; inline-size: 100%; max-inline-size: 100%; } form[data-contact-form] { display: block; inline-size: 100%; max-inline-size: 100%; margin: 0; padding: 0; box-sizing: border-box; } .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; } @media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; gap: var(--sp-4); } } .form-field { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; } .form-field--full { grid-column: 1 / -1; min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; } .form-label { font-size: 0.875rem; font-weight: var(--fw-medium); color: var(--text); } .form-input, .form-select, .form-textarea { display: block; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; box-sizing: border-box; font-family: var(--font-fa); font-size: 0.9375rem; padding: 0.75rem 1rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background-color: var(--surface); color: var(--text); outline: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(210 129 31 / 0.18); } .form-textarea { min-block-size: 130px; resize: vertical; } .topic-selector { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; } .topic-chip { display: inline-flex; align-items: center; padding: 0.4rem 0.9rem; border-radius: var(--r-full); border: 1px solid var(--border-strong); background-color: var(--surface); color: var(--text-muted); font-family: var(--font-fa); font-size: 0.8125rem; cursor: pointer; transition: all var(--dur-fast); } .topic-chip:hover { border-color: var(--orange); color: var(--text); } .topic-chip.is-active { background-color: var(--orange); border-color: var(--orange); color: var(--night-900); font-weight: var(--fw-bold); } .turnstile-wrapper { inline-size: 100%; max-inline-size: 100%; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box; overflow: visible; } .turnstile-wrapper .cf-turnstile { max-inline-size: 100%; } .form-toast { display: none; padding: var(--sp-4); border-radius: var(--r-md); margin-block-start: var(--sp-4); font-size: 0.875rem; line-height: 1.6; } .form-toast.is-success { display: block; background-color: rgb(47 107 79 / 0.12); border: 1px solid var(--success); color: var(--success); } .form-toast.is-error { display: block; background-color: rgb(220 53 69 / 0.12); border: 1px solid #dc3545; color: #c92a2a; } .surface-night .form-toast.is-error { background-color: rgb(220 53 69 / 0.2); border-color: #ff6b6b; color: #ff8787; } /* ══════════════════════════════════════════════════════════════════════════ UTILITY & SHARED ELEMENTS ══════════════════════════════════════════════════════════════════════════ */ .badge-orange { display: inline-flex; align-items: center; gap: 4px; padding: 0.2rem 0.6rem; border-radius: var(--r-sm); background-color: rgb(210 129 31 / 0.12); color: var(--orange-700); font-size: 0.75rem; font-weight: var(--fw-bold); } .surface-night .badge-orange { background-color: rgb(210 129 31 / 0.25); color: var(--orange-300); } .feature-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); } .feature-check-item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 0.9375rem; line-height: 1.7; } .feature-check-item svg { flex-shrink: 0; color: var(--orange); margin-block-start: 4px; } .btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } }