/* ========================================================================== منصة إحقاق — النظام البصري فاتح بالكامل، مبني على تركوازي الشعار #21919C ========================================================================== */ :root { --paper: #FFFFFF; --ground: #F2F6F7; --band: #E7EFF0; --tint: #E6F2F3; --ink: #0C1F24; --ink-2: #3A5459; --ink-3: #4C6A70; --ink-faint: #9FB6BC; --line: rgba(12, 31, 36, 0.14); --line-2: rgba(12, 31, 36, 0.26); --teal: #21919C; /* علامة الشعار — للخطوط والزوايا فقط (3.75:1) */ --teal-deep: #176E77; /* النصوص والأزرار (5.9:1) */ --bronze: #8A6D28; --bronze-ink: #755A1C; --bronze-txt: #5C4715; --bronze-bg: rgba(138, 109, 40, 0.09); --radius: 4px; --gutter: 120px; --content: 1200px; /* أقصى عرض للمحتوى في الصفحات الداخلية */ /* الخلفيات تمتد بعرض الشاشة، والمحتوى يتوسّط عند هذا الحد */ --bleed-pad: max(var(--gutter), calc((100% - var(--content)) / 2)); --ease: cubic-bezier(0.4, 0, 0.2, 1); --f-display: 'Readex Pro', 'Segoe UI', Tahoma, sans-serif; --f-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; } /* --------------------------------------------------------------- base --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; /* الاتجاه يأتي من سمة dir على — لا تثبّته هنا */ background: var(--ground); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.85; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; margin: 0; line-height: 1.3; } p { margin: 0; text-wrap: pretty; } ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; display: block; } a { color: var(--teal-deep); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--teal); } button { font-family: inherit; } :where(a, button, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; } .skip-link { position: absolute; top: -60px; inset-inline-start: 16px; z-index: 200; background: var(--teal-deep); color: #fff; padding: 12px 20px; border-radius: var(--radius); font-weight: 600; } .skip-link:focus { top: 12px; color: #fff; } .shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* الصفحة الرئيسية: يجب أن يتمدّد main لتملأ الشاشة، وإلا بقي الانقسام بارتفاعه الأدنى */ .shell--fill > main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } /* ------------------------------------------------------------ bits ------ */ .eyebrow { display: flex; align-items: center; gap: 14px; } .eyebrow::before { content: ""; width: 44px; height: 2px; background: var(--teal); flex-shrink: 0; } .eyebrow--bronze::before { background: var(--bronze); } .eyebrow span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--ink-3); } .tick { position: absolute; top: -1px; inset-inline-start: auto; inset-inline-end: -1px; width: 16px; height: 16px; border-top: 2px solid var(--teal); border-inline-end: 2px solid var(--teal); } .tick--bronze { border-color: var(--bronze); } .mono { font-family: var(--f-mono); } .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 52px; padding: 0 28px; border-radius: var(--radius); border: 1px solid transparent; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .btn--primary { background: var(--teal-deep); color: #fff; } .btn--primary:hover { background: #12595F; color: #fff; } .btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); } .btn--ghost:hover { border-color: var(--teal-deep); color: var(--teal-deep); } .btn--bronze { background: var(--bronze); color: #fff; } .btn--bronze:hover { background: #6F571F; color: #fff; } .btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; } .chip { display: inline-block; padding: 6px 14px; border-radius: 3px; font-size: 13px; font-weight: 500; border: 1px solid; } .chip--liq { background: var(--tint); color: var(--teal-deep); border-color: rgba(33,145,156,.36); } .chip--reorg { background: #F7F1E2; color: var(--bronze-ink); border-color: rgba(138,109,40,.34); } .chip--data { background: #F1F4F5; color: var(--ink-2); border-color: rgba(12,31,36,.20); } .chip--tag { background: var(--tint); border: 1px solid rgba(33,145,156,.34); font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--teal-deep); } .notice { padding: 16px 22px; border-inline-start: 2px solid var(--bronze); background: var(--bronze-bg); font-size: 15px; line-height: 1.8; color: var(--bronze-txt); } .notice strong { font-weight: 600; } .notice--spaced { margin-top: 24px; } .notice a { color: var(--bronze-ink); text-decoration: underline; } /* --------------------------------------------------------- masthead ----- */ .masthead { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; } .masthead__in { min-height: 88px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .shell--page .masthead__in { padding-inline: var(--bleed-pad); } .masthead__start { display: flex; align-items: center; gap: 30px; } .logo img { height: 40px; width: auto; } .masthead__tag { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--ink-3); } .nav { display: flex; align-items: center; gap: 26px; } .nav a { color: var(--ink-2); font-size: 15px; font-weight: 500; white-space: nowrap; } .nav a:hover { color: var(--teal-deep); } .masthead__end { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; width: 46px; height: 46px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; } .nav-toggle span { width: 18px; height: 1.5px; background: var(--ink-2); display: block; } .nav-toggle span:last-child { width: 12px; align-self: flex-end; margin-inline-end: 14px; background: var(--teal); } /* ------------------------------------------------------------ chooser --- */ .chooser-intro { padding: 44px var(--gutter) 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-shrink: 0; } .chooser-intro h1 { font-size: clamp(28px, 2.6vw, 44px); margin-top: 14px; letter-spacing: -.01em; } .chooser-intro p { max-width: 420px; font-size: 15px; color: var(--ink-3); margin-bottom: 8px; } .split { flex: 1 1 auto; display: flex; position: relative; border-top: 1px solid var(--line); min-height: 460px; } /* شبكة شعرية خفيفة تعطي الإحساس الهندسي */ .split::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background-image: repeating-linear-gradient(to right, rgba(12,31,36,.045) 0 1px, transparent 1px 120px); } .split__half { position: relative; overflow: hidden; flex: 2 1 0; display: flex; flex-direction: column; justify-content: center; padding: 56px var(--gutter); background: var(--paper); transition: flex-grow .5s var(--ease), background-color .5s ease; } .split__half + .split__half { border-inline-start: 1px solid var(--line); } .split:hover .split__half { flex-grow: 1; } .split:hover .split__half:hover { flex-grow: 3; } .split__half:hover { background: #FBFDFD; } /* الصورة شريط سفلي متلاشٍ — لا تغطّي النص */ .split__bg { position: absolute; inset-inline: 0; bottom: 0; z-index: 0; width: 100%; height: 52%; object-fit: cover; object-position: 50% 28%; filter: grayscale(1) contrast(.92); opacity: .16; -webkit-mask-image: linear-gradient(to top, #000 22%, transparent 100%); mask-image: linear-gradient(to top, #000 22%, transparent 100%); transition: opacity .5s ease, filter .5s ease; } .split__half:hover .split__bg { opacity: .40; filter: grayscale(.25) contrast(1); } /* رقم كبير باهت كعنصر تثبيت بصري */ .split__index { position: absolute; z-index: 1; top: 34px; inset-inline-end: var(--gutter); font-family: var(--f-display); font-size: clamp(64px, 7vw, 116px); font-weight: 300; line-height: 1; color: rgba(33,145,156,.13); transition: color .5s ease; user-select: none; } .split__half:hover .split__index { color: rgba(33,145,156,.26); } .split__bar { position: absolute; top: 0; inset-inline: 0; z-index: 3; height: 3px; background: var(--teal); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); } .split__half:hover .split__bar { transform: scaleX(1); } .split__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; max-width: 560px; } .split__kicker { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--teal-deep); } .split__kicker::before { content: ""; width: 28px; height: 2px; background: var(--teal); } .split__body h2 { font-size: clamp(26px, 2.9vw, 44px); line-height: 1.24; letter-spacing: -.01em; } .split__body p { color: var(--ink-2); font-size: 16px; } .split__go { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; align-self: flex-start; min-height: 48px; padding: 0 22px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 15px; font-weight: 600; color: var(--teal-deep); transition: background .3s ease, border-color .3s ease, color .3s ease; } .split__half:hover .split__go { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; } .split__go svg { transition: transform .3s var(--ease); } .split__half:hover .split__go svg { transform: translateX(-6px); } /* -------------------------------------------------------------- hero ---- */ .hero { background: var(--paper); padding-block: 72px 64px; padding-inline: var(--bleed-pad); } .hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; } .hero__copy { display: flex; flex-direction: column; gap: 24px; } .hero__copy h1 { font-size: clamp(30px, 3.6vw, 52px); } .hero__copy p { max-width: 620px; font-size: 18px; line-height: 1.9; color: var(--ink-2); } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; } .hero__actions .btn { min-height: 56px; padding: 0 32px; } .framed { position: relative; } .framed img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius); } .framed::before, .framed::after { content: ""; position: absolute; width: 56px; height: 56px; } .framed::before { top: -10px; inset-inline-start: -10px; border-top: 2px solid var(--teal); border-inline-start: 2px solid var(--teal); } .framed::after { bottom: -10px; inset-inline-end: -10px; border-bottom: 2px solid var(--teal); border-inline-end: 2px solid var(--teal); } /* ------------------------------------------------------------- strip ---- */ .strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: var(--bleed-pad); background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .strip__cell { padding: 26px 40px; } .strip__cell + .strip__cell { border-inline-start: 1px solid var(--line); } .strip__num { font-family: var(--f-display); font-size: 28px; font-weight: 600; } .strip__num--mono { font-family: var(--f-mono); font-size: 22px; font-weight: 500; color: var(--bronze-ink); } .strip__label { margin-top: 4px; font-size: 13px; color: var(--ink-3); } .strip__cell--icon { display: flex; align-items: center; gap: 14px; } .strip__cell--icon svg { flex-shrink: 0; } .strip__cell--icon span { font-size: 14px; line-height: 1.7; } /* ----------------------------------------------------------- section ---- */ .section { padding-block: 88px; padding-inline: var(--bleed-pad); } .section--paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section--ground { background: var(--ground); } .section--grid { position: relative; overflow: hidden; } .section--grid::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, rgba(12,31,36,.05) 0 1px, transparent 1px 120px); pointer-events: none; } .section > * { position: relative; } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; } .section__head h2 { font-size: clamp(26px, 3vw, 44px); margin-top: 14px; } .section__head p { max-width: 460px; color: var(--ink-3); margin-bottom: 6px; } .section__head--stack { display: block; } /* ------------------------------------------------------------- cards ---- */ .cards { display: grid; gap: 24px; } .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { position: relative; padding: 32px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; } .card__num { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--teal-deep); } .card h3 { font-size: 20px; } .card p { font-size: 14px; color: var(--ink-3); } /* hairline grid of tiles */ .tiles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { background: var(--paper); padding: 30px 26px; display: flex; flex-direction: column; gap: 10px; } .tile__num { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--teal); } .tile h3 { font-size: 17px; } .tile p { font-size: 14px; color: var(--ink-3); line-height: 1.8; } .tile--row { flex-direction: row; align-items: flex-start; gap: 14px; padding: 22px 24px; } .tile--row .tile__num { margin-top: 3px; flex-shrink: 0; font-size: 12px; } .tile--row svg { flex-shrink: 0; margin-top: 2px; } .tile--row span { font-size: 15px; line-height: 1.8; } .tile--span2 { grid-column: span 2; } /* ------------------------------------------------------------- steps ---- */ .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line-2); } .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .step { padding: 28px 24px 0; display: flex; flex-direction: column; gap: 12px; } .step + .step { border-inline-start: 1px solid var(--line); } .step::before { content: ""; width: 10px; height: 10px; background: var(--teal); margin-top: -33px; } .step--last::before { background: var(--bronze); } .step__n { font-family: var(--f-display); font-size: 34px; font-weight: 300; color: var(--ink-faint); } .step h3 { font-size: 18px; } .step p { font-size: 14px; color: var(--ink-3); line-height: 1.8; } /* -------------------------------------------------------- procedures ---- */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--line-2); } .filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--radius); background: var(--paper); color: var(--ink-2); border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .filter:hover { border-color: var(--teal-deep); color: var(--teal-deep); } .filter[aria-pressed="true"] { background: var(--teal-deep); color: #fff; border-color: var(--teal-deep); } .filter .mono { opacity: .75; } .proc-list { display: flex; flex-direction: column; } .proc { display: flex; align-items: center; gap: 28px; padding: 24px 8px; border-bottom: 1px solid rgba(12,31,36,.12); } .proc[hidden] { display: none; } .proc__n { font-family: var(--f-mono); font-size: 13px; color: var(--ink-3); width: 24px; flex-shrink: 0; } .proc__logo { width: 108px; height: 60px; flex-shrink: 0; padding: 8px; background: var(--paper); border: 1px solid rgba(12,31,36,.12); border-radius: 3px; display: flex; align-items: center; justify-content: center; } .proc__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .proc__info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; } .proc__name { font-family: var(--f-display); font-size: 19px; font-weight: 500; } .proc__desc { font-size: 14px; color: var(--ink-3); } .proc__kind { width: 150px; flex-shrink: 0; } .proc__ref { width: 170px; flex-shrink: 0; font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); line-height: 1.6; } .proc .btn { flex-shrink: 0; } .proc-empty { padding: 32px 8px; color: var(--ink-3); } /* ---------------------------------------------------------- cta band ---- */ .band { padding-block: 72px; padding-inline: var(--bleed-pad); background: var(--tint); border-top: 1px solid rgba(33,145,156,.30); border-bottom: 1px solid rgba(33,145,156,.30); } .band--bronze { background: #FAF6EC; border-color: rgba(138,109,40,.28); } .band__in { display: flex; align-items: center; justify-content: space-between; gap: 64px; } .band__copy { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .band__copy h2 { font-size: clamp(24px, 2.6vw, 36px); } .band__copy p { color: var(--ink-2); } .band .btn { flex-shrink: 0; min-height: 56px; padding: 0 36px; } /* ------------------------------------------------------------ split2 ---- */ .duo { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: start; } .duo--even { grid-template-columns: 1fr 1.1fr; } .duo__copy { display: flex; flex-direction: column; gap: 18px; } .duo__copy h2 { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.35; } .duo__copy p { color: var(--ink-2); line-height: 1.9; } /* ------------------------------------------------------------ footer ---- */ .site-footer { background: var(--paper); border-top: 1px solid var(--line); padding-block: 56px 0; padding-inline: var(--bleed-pad); margin-top: auto; } .site-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 48px; padding-bottom: 44px; } .site-footer__brand { display: flex; flex-direction: column; gap: 18px; } .site-footer__brand img { height: 36px; width: auto; } .site-footer__brand p { max-width: 320px; font-size: 14px; color: var(--ink-3); } .site-footer__col { display: flex; flex-direction: column; gap: 14px; } .site-footer__h { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-3); } .site-footer__col a { font-size: 14px; color: var(--ink-2); } .site-footer__col a:hover { color: var(--teal-deep); } .site-footer__meta { font-size: 14px; line-height: 1.9; color: var(--ink-2); } .site-footer__lic { font-family: var(--f-mono); font-size: 13px; line-height: 1.9; color: var(--ink-3); } .site-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); } .site-footer__bar nav { display: flex; gap: 24px; } .site-footer__bar a { color: var(--ink-3); } .mini-footer { background: var(--paper); border-top: 1px solid var(--line); min-height: 60px; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--ink-3); } .mini-footer .mono { font-size: 12px; } /* ------------------------------------------------------------- modal ---- */ .modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 18, 22, .55); visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s ease; } .modal.is-open { visibility: visible; opacity: 1; } .modal__box { position: relative; width: 100%; max-width: 900px; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--paper); border: 1px solid rgba(12,31,36,.16); border-radius: var(--radius); box-shadow: 0 30px 70px rgba(12,31,36,.20); } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 32px 40px 24px; border-bottom: 1px solid var(--line); } .modal__head h2 { font-size: 26px; margin-top: 12px; } .modal__head p { margin-top: 12px; font-size: 15px; color: var(--ink-3); } .modal__close { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; } .modal__notice { padding: 24px 40px 0; } .form { padding: 24px 40px 32px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; } .field--wide { grid-column: span 2; } .field label { font-size: 14px; font-weight: 500; color: var(--ink-2); } .field label .opt { color: var(--ink-3); font-weight: 400; } .field input, .field textarea { min-height: 52px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1.8; } .field textarea { resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #8BA2A8; } .field input:focus, .field textarea:focus { border-color: var(--teal-deep); outline: none; box-shadow: 0 0 0 3px rgba(33,145,156,.18); } .field input[type="text"].mono { font-family: var(--f-mono); } .form__foot { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 4px; } .form__foot p { font-size: 13px; color: var(--ink-3); } .form__foot .btn { min-height: 54px; padding: 0 40px; } /* ----------------------------------------------------- lang switch ----- */ .lang-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1; transition: border-color .2s ease, color .2s ease, background .2s ease; } .lang-switch:hover { border-color: var(--teal-deep); color: var(--teal-deep); background: var(--tint); } .lang-switch svg { flex-shrink: 0; opacity: .75; } .lang-switch span { white-space: nowrap; } /* ------------------------------------------------- direction: LTR ------ */ [dir="ltr"] .notice { text-align: left; } [dir="ltr"] .split__bar { transform-origin: 0 50%; } /* السهم يشير يسارًا في العربية ويمينًا في الإنجليزية */ [dir="ltr"] .split__go svg { transform: scaleX(-1); } [dir="ltr"] .split__half:hover .split__go svg { transform: scaleX(-1) translateX(-6px); } [dir="ltr"] .nav-toggle span:last-child { align-self: flex-start; margin-inline-end: 0; margin-inline-start: 14px; } /* التسميات اللاتينية لا تحتاج تباعد حروف عربي */ [dir="ltr"] .eyebrow span, [dir="ltr"] .masthead__tag { letter-spacing: .14em; } /* ========================================================== responsive === */ @media (max-width: 1400px) { .nav { gap: 20px; } .nav a { font-size: 14px; } .masthead__start { gap: 22px; } } @media (max-width: 1240px) { :root { --gutter: 64px; } .hero__grid { gap: 48px; } .site-footer__cols { grid-template-columns: 1.4fr 1fr 1.2fr; } .site-footer__col--extra { display: none; } } @media (max-width: 1180px) { .masthead__in { min-height: 76px; } .nav, .masthead__end .btn--ghost, .masthead__tag { display: none; } .lang-switch { padding: 0 12px; } .nav-toggle { display: flex; } .masthead.is-open .nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; inset-inline: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 0; box-shadow: 0 12px 24px rgba(12,31,36,.08); } .masthead.is-open .nav a { padding: 14px var(--gutter); } .masthead { position: relative; } .cards--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .tiles--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .steps, .steps--4 { grid-template-columns: repeat(2, minmax(0,1fr)); border-top: none; } .step { border-top: 1px solid var(--line-2); padding-top: 28px; } .step::before { margin-top: -33px; } .step + .step { border-inline-end: none; } .duo, .duo--even { grid-template-columns: 1fr; gap: 36px; } .section__head { flex-direction: column; align-items: flex-start; gap: 16px; } .band__in { flex-direction: column; align-items: flex-start; gap: 28px; } } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { order: -1; } .framed img { height: 280px; } .strip { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); } .strip__cell { background: var(--band); } .strip__cell + .strip__cell { border: none; } .proc { flex-wrap: wrap; gap: 16px; } .proc__info { flex-basis: 100%; order: 3; } .proc__kind, .proc__ref { width: auto; } .proc .btn { width: 100%; order: 4; } } @media (max-width: 760px) { :root { --gutter: 20px; } body { font-size: 15px; } .masthead__end { gap: 8px; } .masthead__end .btn { display: none; } .masthead__start .chip--tag { display: none; } .lang-switch { min-height: 42px; padding: 0 10px; font-size: 13px; } .lang-switch svg { display: none; } .chooser-intro { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 28px; } .chooser-intro p { max-width: none; } .split { flex-direction: column; min-height: 0; } .split::before { background-size: 60px 100%; } .split__half { padding: 32px 20px; flex: 1 1 auto; min-height: 250px; justify-content: flex-end; } .split__half + .split__half { border-inline-end: none; border-top: 1px solid var(--line); } .split:hover .split__half, .split:hover .split__half:hover { flex-grow: 1; } .split__half:hover { background: var(--paper); } .split__bar { inset-inline: auto 0; top: 0; bottom: 0; width: 3px; height: auto; transform: none; } .split__index { top: 22px; inset-inline-end: 20px; font-size: 56px; } .split__bg { height: 60%; opacity: .14; filter: grayscale(1); } .split__half:hover .split__bg { opacity: .14; filter: grayscale(1); } .split__body { gap: 12px; } .split__go { margin-top: 6px; } .hero { padding-block: 40px; } .section { padding-block: 48px; } .band { padding-block: 40px; } .cards--3, .cards--4 { grid-template-columns: 1fr; } .tiles--4, .tiles--2 { grid-template-columns: 1fr; } .tile--span2 { grid-column: auto; } .steps, .steps--4 { grid-template-columns: 1fr; } .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 16px; } .filter { flex-shrink: 0; } .proc { gap: 12px; padding: 20px 0; } .proc__logo { width: 74px; height: 44px; } .site-footer { padding-block: 40px 0; } .site-footer__cols { grid-template-columns: 1fr; gap: 28px; } .site-footer__col--extra { display: flex; } .site-footer__bar { flex-direction: column; align-items: flex-start; gap: 12px; } .mini-footer { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px var(--gutter); } .modal { padding: 0; align-items: stretch; } .modal__box { max-width: none; max-height: 100vh; border-radius: 0; border: none; } .modal__head { padding: 24px 20px 20px; } .modal__notice { padding: 20px 20px 0; } .form { padding: 20px 20px 28px; grid-template-columns: 1fr; } .field--wide, .form__foot { grid-column: auto; } .form__foot { flex-direction: column; align-items: stretch; gap: 16px; } .form__foot .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }