/* * NGL v2 — inner pages (accreditations, licenses, scope of services, test list). * * Figma only has the homepage; these pages reuse its tokens (base.css) and vocabulary: the navy of * the hero/footer for the title band, white cards on the page background, green accents, the quote * bar beside intro text. Logical properties throughout, so RTL and LTR share every rule. */ .nglv2-page { display: block; background: var(--nglv2-bg); color: var(--nglv2-ink); overflow-x: clip; padding-bottom: var(--nglv2-gap-sm); outline: none; } .nglv2-page [hidden] { display: none !important; } /* Betheme hides horizontal overflow on at phone widths ("responsive-overflow-x-mobile"), * which turns body into a scroll container and silently breaks position: sticky (the filter bar). * clip hides the overflow the same way without creating a scroll container. */ html body.nglv2-inner-page { overflow-x: clip; } .nglv2-page .nglv2-cta { margin-top: var(--nglv2-gap-sm); } /* ---------------------------------------------------------------------------------------------- * Title band * ------------------------------------------------------------------------------------------- */ .nglv2-phero { position: relative; padding: calc(var(--nglv2-header-h) + clamp(32px, 4.44vw, 64px)) 0 clamp(40px, 5vw, 72px); background: radial-gradient(900px 360px at 88% -20%, rgba(109, 190, 69, 0.2), transparent 65%), linear-gradient(180deg, var(--nglv2-navy) 0%, var(--nglv2-navy-2) 100%); color: #f7fcfe; } html:not([dir="rtl"]) .nglv2-phero { background: radial-gradient(900px 360px at 12% -20%, rgba(109, 190, 69, 0.2), transparent 65%), linear-gradient(180deg, var(--nglv2-navy) 0%, var(--nglv2-navy-2) 100%); } .admin-bar .nglv2-phero { padding-top: calc(var(--nglv2-header-h) + 32px + clamp(32px, 4.44vw, 64px)); } .nglv2-phero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(129, 201, 29, 0.45), transparent); } .nglv2-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 1.6; color: #94a3b8; } .nglv2-crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: #475569; } .nglv2-crumbs a { color: #cbd5e1; transition: color 0.25s; } .nglv2-crumbs a:hover { color: var(--nglv2-green); } .nglv2-phero__main { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(32px, 5vw, 80px); margin-top: clamp(20px, 2.2vw, 32px); } .nglv2-phero__text { flex: 1 1 auto; max-width: 780px; } .nglv2 .nglv2-phero__title { font-weight: 800; font-size: clamp(30px, calc(14px + 2.5vw), 52px); line-height: 1.3; color: #fff; } .nglv2 .nglv2-phero__intro { margin-top: 20px; font-size: clamp(16px, calc(12px + 0.5vw), 19px); line-height: 1.85; color: #cbd5e1; } html[dir="rtl"] .nglv2 .nglv2-phero__intro { text-align: justify; } .nglv2 .nglv2-phero__intro p + p { margin-top: 12px; } .nglv2-phero__facts { display: flex; flex: 0 0 auto; gap: clamp(24px, 3vw, 44px); } .nglv2-phero__fact { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 16px; border-inline-start: 2px solid rgba(129, 201, 29, 0.55); } .nglv2-phero__value { font-weight: 800; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.1; color: #fff; } .nglv2-phero__label { font-size: 14px; line-height: 1.5; color: #94a3b8; white-space: nowrap; } /* ---------------------------------------------------------------------------------------------- * Shared * ------------------------------------------------------------------------------------------- */ .nglv2-psection { margin-top: clamp(40px, 5vw, 72px); } .nglv2 .nglv2-empty { padding: 40px 24px; border: 1px dashed #cbd5e1; border-radius: 20px; text-align: center; font-size: 17px; line-height: 1.8; color: var(--nglv2-grey); } .nglv2 .nglv2-chip { display: inline-flex; align-items: center; padding: 5px 14px; border: 1px solid transparent; border-radius: 999px; background: #f1f5f9; font-size: 14px; font-weight: 500; line-height: 1.7; color: #334155; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .nglv2 .nglv2-chip--link { border-color: #dbe3ea; background: #fff; white-space: nowrap; } .nglv2 .nglv2-chip--link:hover, .nglv2 .nglv2-chip--link:focus-visible { border-color: var(--nglv2-green); background: var(--nglv2-green-50); color: var(--nglv2-green-dark); outline: none; } .nglv2 .nglv2-chip.is-match { border-color: var(--nglv2-accent); background: var(--nglv2-green-50); color: #3f6d12; } /* Standard codes keep Latin digits (the child theme's ss01 would draw them Persian). */ .nglv2 .nglv2-chip--code { font-family: "JetBrains Mono", var(--nglv2-font); font-size: 13px; font-weight: 400; font-feature-settings: normal; cursor: default; } .nglv2-field { padding: 22px 24px 24px; border: 1px solid #e3e9ef; border-radius: 18px; background: #fff; transition: border-color 0.3s, box-shadow 0.3s; } .nglv2-field:hover { border-color: rgba(109, 190, 69, 0.45); box-shadow: 0 14px 34px rgba(25, 36, 49, 0.06); } .nglv2 .nglv2-field__title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-weight: 700; font-size: 17px; line-height: 1.6; color: var(--nglv2-ink); } .nglv2 .nglv2-field__title::before { content: ""; flex: 0 0 auto; width: 4px; height: 18px; border-radius: 2px; background: var(--nglv2-accent); } .nglv2 .nglv2-field__title a { color: inherit; transition: color 0.25s; } .nglv2 .nglv2-field__title a:hover { color: var(--nglv2-green-dark); } .nglv2-field__items { display: flex; flex-wrap: wrap; gap: 8px; } /* Long product names wrap to two lines; a pill shape would turn them into blobs. */ .nglv2 .nglv2-field__items .nglv2-chip { border-radius: 12px; } /* ---------------------------------------------------------------------------------------------- * Accreditations / licenses * ------------------------------------------------------------------------------------------- */ .nglv2-certgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; } .nglv2-cert { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 28px; border: 1px solid #e3e9ef; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: transform 0.4s var(--nglv2-ease), box-shadow 0.4s, border-color 0.4s; } .nglv2-cert::before { content: ""; position: absolute; top: -1px; inset-inline: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--nglv2-accent); transform: scaleX(0); transition: transform 0.4s var(--nglv2-ease); } .nglv2-cert:hover { transform: translateY(-4px); border-color: rgba(109, 190, 69, 0.4); box-shadow: 0 20px 44px rgba(25, 36, 49, 0.09); } .nglv2-cert:hover::before { transform: scaleX(1); } .nglv2-cert__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--nglv2-navy); color: var(--nglv2-accent); } .nglv2-cert__icon .nglv2-icon { width: auto; height: 26px; } .nglv2 .nglv2-cert__title { font-weight: 700; font-size: 19px; line-height: 1.6; color: var(--nglv2-ink); } .nglv2-cert__meta { display: flex; flex-direction: column; margin: 0; margin-top: auto; } .nglv2-cert__row { display: flex; flex-direction: column; gap: 2px; padding-block: 10px; border-top: 1px dashed #e3e9ef; } .nglv2 .nglv2-cert__row dt { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--nglv2-grey); } .nglv2 .nglv2-cert__row dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.6; color: #334155; } /* Codes printed with Latin letters keep Latin digits (see ngl_v2_code()). */ .nglv2 .nglv2-latin { font-feature-settings: normal; } .nglv2 .nglv2-cert__more { font-size: 16px; } .nglv2-cert.is-expired { border-color: #fdba74; } .nglv2 .nglv2-cert__warn { padding: 10px 12px; border: 1px solid #fed7aa; border-radius: 12px; background: #fff7ed; font-size: 13px; line-height: 1.7; color: #9a3412; } .nglv2 .nglv2-cert__warn a { font-weight: 700; color: inherit; text-decoration: underline; } /* ---------------------------------------------------------------------------------------------- * Scope of services * ------------------------------------------------------------------------------------------- */ .nglv2-scope__bar { position: sticky; z-index: 20; top: var(--nglv2-header-h); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: clamp(28px, 3vw, 40px); padding-block: 14px; background: rgba(247, 252, 254, 0.94); /* Full-bleed background behind a container-wide bar. */ box-shadow: 0 0 0 100vmax rgba(247, 252, 254, 0.94); clip-path: inset(0 -100vmax); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .admin-bar .nglv2-scope__bar { top: calc(var(--nglv2-header-h) + 32px); } @media (max-width: 782px) { .admin-bar .nglv2-scope__bar { top: calc(var(--nglv2-header-h) + 46px); } } .nglv2-filter { position: relative; flex: 0 1 380px; min-width: min(100%, 260px); } .nglv2-filter__icon { position: absolute; top: 50%; inset-inline-start: 16px; width: 20px; height: 20px; color: var(--nglv2-grey); transform: translateY(-50%); pointer-events: none; } .nglv2 .nglv2-filter__input { width: 100%; height: 52px; margin: 0; padding: 0 16px; padding-inline-start: 48px; border: 1px solid #d6dee6; border-radius: 14px; background: #fff; box-shadow: none; font-family: var(--nglv2-font); font-size: 16px; color: var(--nglv2-ink); transition: border-color 0.2s, box-shadow 0.2s; } .nglv2 .nglv2-filter__input:focus { border-color: var(--nglv2-green); box-shadow: 0 0 0 4px rgba(129, 201, 29, 0.18); outline: none; } .nglv2-scope__labs { flex: 1 1 400px; min-width: 0; } .nglv2-scope__labs ul { display: flex; gap: 8px; overflow-x: auto; padding-block: 2px; padding-inline-end: 40px; scrollbar-width: none; /* Fade the end edge so a cut-off chip reads as "scroll for more". */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px); mask-image: linear-gradient(to right, transparent 0, #000 48px); } html:not([dir="rtl"]) .nglv2-scope__labs ul { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 48px); mask-image: linear-gradient(to left, transparent 0, #000 48px); } .nglv2-scope__labs ul::-webkit-scrollbar { display: none; } .nglv2 .nglv2-filter__status { flex: 1 0 100%; font-size: 14px; color: var(--nglv2-grey); } .nglv2 .nglv2-filter__status:empty { display: none; } .nglv2-lab { scroll-margin-top: calc(var(--nglv2-header-h) + 150px); } .nglv2-lab + .nglv2-lab { margin-top: clamp(48px, 5vw, 72px); } .nglv2-lab__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #e3e9ef; } .nglv2-lab__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: var(--nglv2-navy); color: var(--nglv2-accent); } .nglv2-lab__icon .nglv2-icon { width: 28px; height: 28px; } .nglv2 .nglv2-lab__icon img { width: 36px; height: 36px; object-fit: contain; } .nglv2-lab__heading { flex: 1 1 auto; min-width: 0; } .nglv2 .nglv2-lab__title { font-weight: 800; font-size: clamp(22px, calc(14px + 1.1vw), 30px); line-height: 1.4; color: var(--nglv2-ink); } .nglv2 .nglv2-lab__count { margin-top: 2px; font-size: 14px; color: var(--nglv2-grey); } .nglv2 .nglv2-lab__more { font-size: 16px; } /* Fields differ a lot in length (1 to 100+ products): columns pack them without tall gaps. */ .nglv2-lab__fields { columns: 2 340px; column-gap: 20px; } .nglv2-lab__fields .nglv2-field { break-inside: avoid; margin-bottom: 20px; } /* ---------------------------------------------------------------------------------------------- * Test list * ------------------------------------------------------------------------------------------- */ .nglv2-tests__block + .nglv2-tests__block { margin-top: clamp(56px, 6vw, 88px); } .nglv2-tests__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; } .nglv2 .nglv2-tests__title { font-weight: 800; font-size: clamp(22px, calc(14px + 1.1vw), 30px); line-height: 1.4; color: var(--nglv2-ink); } .nglv2 .nglv2-tests__tip { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.7; color: var(--nglv2-grey); } .nglv2-tests__tip .nglv2-icon { width: 18px; height: 18px; color: var(--nglv2-accent); } .nglv2-stdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; } .nglv2-tests__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(48px, 5vw, 72px); padding: 24px clamp(20px, 3vw, 36px); border: 1px solid rgba(109, 190, 69, 0.35); border-radius: 22px; background: #fff; } .nglv2 .nglv2-tests__actions p { font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; color: var(--nglv2-ink); } /* ---------------------------------------------------------------------------------------------- * Responsive * ------------------------------------------------------------------------------------------- */ @media (max-width: 1023px) { .nglv2-phero__main { flex-direction: column; align-items: stretch; } .nglv2-phero__facts { flex-wrap: wrap; } } @media (max-width: 767px) { .nglv2-scope__bar { gap: 10px; padding-block: 10px; } .nglv2-filter { flex-basis: 100%; } .nglv2 .nglv2-filter__input { height: 46px; } .nglv2-lab__head { flex-wrap: wrap; } .nglv2-lab__icon { width: 48px; height: 48px; border-radius: 14px; } .nglv2 .nglv2-lab__more { flex-basis: 100%; } .nglv2-cert { padding: 22px; } .nglv2-tests__actions .nglv2-btn { width: 100%; } }