/* * NGL v2 — inner pages drawn in Figma after the homepage (design/labs: the Labs page; the Lab Details * and Technical inspection frames use the same pieces): the page under a solid header, breadcrumb * trail, eyebrow, page title and intro, FAQ and the closing "expert advice" section. * * Desktop values are the 1440px frame's and scale down with clamp(). Logical properties throughout, so * RTL (fa, ar) and LTR (en) share every rule; nothing has a fixed width that a longer translation * could overflow (buttons have a minimum width, not a width). */ .nglv2-ipage { --nglv2-igap: clamp(40px, 4.4445vw, 64px); /* between the page's blocks: 64 at 1440 */ display: block; padding-top: calc(var(--nglv2-header-h) + clamp(24px, 2.78vw, 40px)); padding-bottom: clamp(24px, 2.78vw, 40px); background: var(--nglv2-bg); color: var(--nglv2-ink); overflow-wrap: break-word; /* a long word in a translation wraps instead of being cut off */ overflow-x: clip; outline: none; } /* The fixed header sits under the admin bar (chrome.css). */ .admin-bar .nglv2-ipage { padding-top: calc(var(--nglv2-header-h) + 32px + clamp(24px, 2.78vw, 40px)); } @media (max-width: 782px) { .admin-bar .nglv2-ipage { padding-top: calc(var(--nglv2-header-h) + 46px + 24px); } } /* Betheme hides horizontal overflow on at phone widths, which makes body a scroll container; * clip hides it the same way without one (see pages.css). */ html body.nglv2-inner-page { overflow-x: clip; } /* ---------------------------------------------------------------------------------------------- * Breadcrumb trail (Figma 154:12937) * ------------------------------------------------------------------------------------------- */ .nglv2 .nglv2-trail ol { display: flex; flex-wrap: wrap; align-items: center; font-weight: 500; font-size: 14px; line-height: 24px; /* Darker than drawn (#9cd7a9 / #28a745 fail WCAG AA on this background: 1.6 and 3.0): the design's grey-green (5.1:1) for the links, a darker shade of its green for the current page (4.9:1). The separators keep the drawn light green. */ color: #557063; } .nglv2 .nglv2-trail li { display: flex; align-items: center; } .nglv2 .nglv2-trail li + li::before { content: "/"; flex: 0 0 23px; color: #9cd7a9; /* Green/green-200 */ font-family: Roboto, Arial, sans-serif; font-size: 16px; letter-spacing: 0.15px; text-align: center; } .nglv2 .nglv2-trail a { color: inherit; transition: color 0.25s; } .nglv2 .nglv2-trail a:hover, .nglv2 .nglv2-trail [aria-current] { color: #1e7e34; /* Green/green-700 (the design's green-500 #28a745 is 3.0:1) */ } .nglv2 .nglv2-trail a:focus-visible { outline: 2px solid var(--nglv2-green); outline-offset: 2px; } /* ---------------------------------------------------------------------------------------------- * Eyebrow: the short label with a green bar at its start (Figma "Text" 160:13597) * ------------------------------------------------------------------------------------------- */ .nglv2 .nglv2-eyebrow { display: flex; align-items: center; gap: 12px; min-height: 20px; font-weight: 700; font-size: 13px; line-height: 19.5px; color: #557063; } .nglv2 .nglv2-eyebrow::before { content: ""; flex: 0 0 42px; height: 2px; background: #84b92b; } /* ---------------------------------------------------------------------------------------------- * Page head: breadcrumbs, eyebrow, title, intro (Figma 149:10830) * ------------------------------------------------------------------------------------------- */ .nglv2-ihead__text { display: flex; flex-direction: column; gap: clamp(20px, 2.2223vw, 32px); margin-top: clamp(20px, 2.2223vw, 32px); } .nglv2 .nglv2-ihead__title { font-family: var(--nglv2-font-cta); /* Vazirmatn ExtraBold, as drawn */ font-weight: 800; font-size: clamp(32px, calc(16px + 2.222vw), 48px); line-height: 1.3333; color: var(--nglv2-ink); } .nglv2 .nglv2-ihead__intro { font-size: clamp(17px, calc(8px + 1.111vw), 24px); line-height: 1.6667; color: var(--nglv2-grey); } .nglv2 .nglv2-ihead__intro > * { max-width: 1128px; /* the design's line length, inside the quote bar */ } .nglv2 .nglv2-ihead__intro > * + * { margin-top: 12px; } /* ---------------------------------------------------------------------------------------------- * FAQ (Figma 165:17308) — square white rows; the chevron points up when open * ------------------------------------------------------------------------------------------- */ .nglv2-faq { margin-top: var(--nglv2-igap); } .nglv2-faq > .nglv2-container { display: flex; flex-direction: column; gap: 24px; } .nglv2-faq__list { display: flex; flex-direction: column; gap: 14px; } .nglv2-faq__item { background: #fff; } .nglv2 .nglv2-faq__btn { display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 18px 24px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--nglv2-ink); font-family: var(--nglv2-font); font-weight: 600; font-size: clamp(16px, calc(11px + 0.486vw), 18px); line-height: 1.2; text-align: start; text-transform: none; letter-spacing: normal; cursor: pointer; transition: color 0.25s; } .nglv2 .nglv2-faq__btn:hover { color: var(--nglv2-green-dark); } .nglv2 .nglv2-faq__btn:focus-visible { outline: 2px solid var(--nglv2-green); outline-offset: -2px; } .nglv2-faq__text { flex: 1 1 auto; min-width: 0; } .nglv2-faq__icon { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; color: var(--nglv2-green); transition: transform 0.35s var(--nglv2-ease); } .nglv2 .nglv2-faq__icon .nglv2-icon { width: 13.5px; height: 7.5px; } .nglv2-faq__item.is-open .nglv2-faq__icon { transform: rotate(180deg); } /* Height animates between 0fr and 1fr: no measuring in JavaScript. */ .nglv2-faq__a { display: grid; grid-template-rows: 1fr; } .nglv2-faq__inner { min-height: 0; overflow: hidden; } .nglv2 .nglv2-faq__answer { padding: 0 24px 18px; font-size: clamp(16px, calc(11px + 0.486vw), 18px); line-height: 1.4; color: var(--nglv2-grey); } .nglv2 .nglv2-faq__answer > * + * { margin-top: 10px; } .nglv2 .nglv2-faq__answer a { color: #538212; /* secondary-shade700: readable on white */ font-weight: 600; transition: color 0.25s; } .nglv2 .nglv2-faq__answer a:hover { color: var(--nglv2-green-dark); } .nglv2-js .nglv2-faq__a { transition: grid-template-rows 0.45s var(--nglv2-ease), visibility 0s linear 0.45s; } .nglv2-js .nglv2-faq__item:not(.is-open) .nglv2-faq__a { grid-template-rows: 0fr; visibility: hidden; } .nglv2-js .nglv2-faq__item.is-open .nglv2-faq__a { transition: grid-template-rows 0.45s var(--nglv2-ease), visibility 0s; } /* Without JavaScript every answer is open: no chevron that would do nothing. */ html:not(.nglv2-js) .nglv2-faq__icon { display: none; } /* ---------------------------------------------------------------------------------------------- * Closing "expert advice" section (Figma 165:16663) * ------------------------------------------------------------------------------------------- */ .nglv2-consult { margin-top: var(--nglv2-igap); } .nglv2-consult > .nglv2-container { display: flex; flex-direction: column; gap: 24px; } .nglv2-consult__copy { display: flex; flex-direction: column; gap: 16px; } .nglv2 .nglv2-consult__title { font-weight: 700; font-size: clamp(24px, calc(8px + 1.667vw), 32px); line-height: 2; color: var(--nglv2-ink); } .nglv2 .nglv2-consult__text { font-size: clamp(16px, calc(9px + 0.764vw), 20px); line-height: 1.48; color: var(--nglv2-grey); } .nglv2-consult__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 32px; } .nglv2 .nglv2-btn--consult, .nglv2 .nglv2-btn--totop { min-width: 240px; height: 56px; margin: 0; box-shadow: none; font-size: 16px; font-weight: 600; line-height: normal; text-transform: none; } .nglv2 .nglv2-btn--consult { padding: 0 32px; border-radius: 20px; background: var(--nglv2-green); color: #f7fcfe; } .nglv2 .nglv2-btn--consult:hover { background: var(--nglv2-green-dark); color: #fff; box-shadow: 0 12px 28px rgba(129, 201, 29, 0.28); } .nglv2 .nglv2-btn--totop { padding: 0 24px; border-color: var(--nglv2-green); border-radius: 16px; background: transparent; color: var(--nglv2-green); } .nglv2 .nglv2-btn--totop:hover { border-color: var(--nglv2-green-dark); background: var(--nglv2-green-50); color: var(--nglv2-green-dark); } .nglv2 .nglv2-btn--totop .nglv2-icon { width: 24px; height: 24px; transition: transform 0.35s var(--nglv2-ease); } .nglv2 .nglv2-btn--totop:hover .nglv2-icon { transform: translateY(-3px); } @media (max-width: 479px) { .nglv2 .nglv2-btn--consult, .nglv2 .nglv2-btn--totop { flex: 1 1 100%; } }