/* mcp.islamiccontent.org — page styles ("MCP Index v4" design) Centered, warm layout on the Islamic Content SA tokens (tokens.css). Responsive strategy: one fluid gutter and fluid section rhythm drive most of the scaling (clamp), so the page adapts continuously instead of jumping at breakpoints. Media queries are reserved for changes of structure — the header splitting into two rows, strips becoming scrollable, and grids collapsing to one column. Logical properties throughout: dir="rtl" on flips the page. */ :root { --gutter: clamp(18px, 5vw, 28px); /* side padding, shared by .wrap and full-bleed strips */ --sec-pad: clamp(56px, 9vw, 88px); /* vertical rhythm between sections */ --grid-gap: clamp(28px, 4vw, 40px); --header-h: 64px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: #fff; color: var(--text-primary); font-family: var(--font-primary); font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; } a { color: var(--color-brand-gold-hover); text-decoration: none; } a:hover { color: var(--text-primary); text-decoration: underline; } code, pre { font-family: var(--font-mono); } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--color-brand-gold); outline-offset: 2px; } [hidden] { display: none !important; } h1, h2, h3 { margin: 0; } p { margin: 0; } section[id] { scroll-margin-top: calc(var(--header-h) + 16px); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: 1320px; } /* The nav and the client switcher become full-bleed scrollable strips below their breakpoints: they cancel the gutter with a negative margin, then scroll. See the structural breakpoints at the end of this file. */ /* Section headers */ .sec-head { text-align: center; max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } .sec-head--wide { max-width: 680px; } .kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand-gold-hover); font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; } .sec-head h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.3; margin-bottom: 12px; text-wrap: pretty; } .sec-head p { font-size: 15px; color: var(--color-neutral-700); } /* Header */ .site-header { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-neutral-100); } .site-header .wrap { padding-block: 10px; display: flex; align-items: center; gap: 10px 24px; } .brand { display: flex; align-items: center; text-decoration: none; flex: 0 1 auto; min-width: 0; } .brand:hover { text-decoration: none; } .brand img { height: clamp(28px, 6vw, 40px); width: auto; } .site-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 600; margin-inline-start: auto; } .site-nav a { flex: 0 0 auto; color: var(--color-neutral-700); text-decoration: none; transition: color .15s ease; } .site-nav a:hover, .site-nav a.is-active, .site-nav a[aria-current] { color: var(--color-brand-dark); text-decoration: none; } .lang-toggle { flex: 0 0 auto; border: 1px solid var(--color-brand-dark); background: transparent; color: var(--color-brand-dark); border-radius: 9999px; padding: 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; } .lang-toggle:hover { background: var(--color-brand-dark); color: #fff; } /* Hero */ .hero { position: relative; overflow: hidden; padding: clamp(56px, 10vw, 96px) var(--gutter) clamp(48px, 8vw, 72px); text-align: center; background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--color-brand-gold-pale) 0%, rgba(245, 237, 212, 0) 70%), #fff; } .hero__band { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: var(--pattern-band) center bottom / auto 100% repeat-x; opacity: .08; pointer-events: none; } .hero__inner { max-width: 860px; margin-inline: auto; position: relative; display: flex; flex-direction: column; align-items: center; } .hero__logo { width: clamp(118px, 26vw, 170px); height: auto; margin-bottom: clamp(20px, 3.5vw, 28px); } .badge { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; justify-content: center; border: 1px solid var(--color-neutral-200); color: var(--color-warning); border-radius: 9999px; padding: 4px 14px; font-size: 12px; font-weight: 600; background: #fff; max-width: 100%; } .badge__live { display: inline-flex; align-items: center; gap: 6px; } .badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-live); } .hero h1 { font-size: clamp(28px, 5.2vw, 56px); font-weight: 700; line-height: 1.22; margin: clamp(16px, 2.6vw, 22px) 0 16px; text-wrap: balance; } .hero__sub { font-size: clamp(15px, 1.6vw, 17px); color: var(--color-neutral-700); max-width: 620px; margin-bottom: clamp(24px, 3.5vw, 30px); text-wrap: pretty; } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; min-height: 44px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .pill:hover { text-decoration: none; } .pill--dark { background: var(--color-brand-dark); color: #fff; padding: 10px 26px; border: 0; } .pill--dark:hover { background: var(--color-brand-gold); color: var(--color-brand-dark); } .pill--light { border: 1px solid var(--color-neutral-200); color: var(--color-brand-dark); padding: 10px 24px; background: #fff; } .pill--light:hover { border-color: var(--color-brand-gold); color: var(--color-brand-dark); } .stats { display: flex; margin-top: clamp(32px, 5vw, 52px); border: 1px solid var(--color-neutral-200); border-radius: 16px; overflow: hidden; background: #fff; flex-wrap: wrap; width: 100%; } .stats > div { padding: 16px clamp(18px, 3vw, 32px); display: flex; flex-direction: column; gap: 2px; border-inline-start: 1px solid var(--color-neutral-200); flex: 1 1 150px; min-width: 0; } .stats > div:first-child { border-inline-start: 0; } .stats b { font-size: clamp(21px, 2.4vw, 24px); font-weight: 700; line-height: 1.1; } .stats span { font-size: 12px; color: var(--color-neutral-500); text-wrap: pretty; } /* 01 — What to ask */ .ask { padding-block: calc(var(--sec-pad) + 16px) 32px; display: flex; flex-direction: column; gap: var(--grid-gap); } .examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .bubble { width: 100%; height: 100%; text-align: start; color: inherit; cursor: pointer; background: var(--surface-subtle); border: 0; border-radius: 20px 20px 20px 6px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; transition: background .2s ease, transform .2s ease; } [dir="rtl"] .bubble { border-radius: 20px 20px 6px 20px; } .bubble:hover { background: var(--color-brand-gold-pale); transform: translateY(-2px); } .bubble:active { transform: scale(.98); } .bubble__cat { font-size: 11px; font-weight: 600; color: var(--color-brand-gold-hover); letter-spacing: .08em; text-transform: uppercase; } .bubble__prompt { font-size: 16px; font-weight: 600; line-height: 1.55; flex: 1; text-wrap: pretty; } .bubble__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; font-size: 13px; color: var(--color-neutral-500); width: 100%; } .bubble__foot b { color: var(--color-brand-dark); font-weight: 600; white-space: nowrap; } /* Pillars */ .pillars { padding-block: 40px var(--sec-pad); } .pillars__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; } .pillars__grid li { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; } .pillar__n { font-size: 14px; font-weight: 700; color: var(--color-brand-gold); letter-spacing: .1em; } .pillar__bar { width: 32px; height: 2px; background: var(--color-brand-gold); } .pillar__title { font-size: 17px; font-weight: 700; margin-top: 4px; text-wrap: balance; } .pillars__grid p { font-size: 14px; color: var(--color-neutral-700); text-wrap: pretty; } /* 02 — Sources */ .sources { padding-block: var(--sec-pad); } .sources .sec-head { margin-bottom: var(--grid-gap); } .source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; } .source-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; border-top: 2px solid var(--color-brand-gold); background: var(--surface-subtle); border-radius: 0 0 18px 18px; color: inherit; text-decoration: none; transition: background .2s ease; } .source-card:hover { background: var(--color-brand-gold-pale); text-decoration: none; color: inherit; } .source-card__kind { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-gold-hover); font-weight: 600; } .source-card__name { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; } .source-card__host { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--color-neutral-500); text-align: start; overflow-wrap: anywhere; } .source-card p { color: var(--color-neutral-700); font-size: 14px; text-wrap: pretty; } .source-card__stat { font-size: clamp(17px, 1.7vw, 19px); font-weight: 700; color: var(--color-brand-gold); margin-top: auto; } /* 03 — Connect */ .connect { padding-block: var(--sec-pad); display: flex; flex-direction: column; gap: var(--grid-gap); } .client-tabs-wrap { display: flex; justify-content: center; } .client-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; background: var(--surface-subtle); border-radius: 9999px; border: 1px solid var(--color-neutral-100); } .client-tab { border: 0; background: transparent; color: var(--color-neutral-700); border-radius: 9999px; padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; min-height: 40px; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .client-tab svg { width: 16px; height: 16px; display: block; fill: currentColor; flex: none; } .client-tab:hover { background: #fff; color: var(--color-brand-dark); } .client-tab[aria-selected="true"] { background: var(--color-brand-dark); color: #fff; box-shadow: 0 2px 8px rgba(34, 31, 31, .18); } .client-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); border: 1px solid var(--color-neutral-200); border-radius: 24px; overflow: hidden; background: #fff; } .client-panel__steps { padding: clamp(24px, 4vw, 36px); min-width: 0; } .client-panel__hint { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); font-weight: 600; margin-bottom: 22px; } .steps { margin: 0; padding: 0; list-style: none; } .steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: clamp(12px, 2vw, 18px); align-items: start; } .steps__rail { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: stretch; } .steps__n { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--color-brand-dark); color: var(--color-brand-gold-light); display: grid; place-items: center; font-weight: 700; font-size: 13px; } .steps__line { flex: 1; width: 1px; background: var(--color-neutral-200); display: block; min-height: 22px; } .steps li:last-child .steps__line { display: none; } .steps p { margin: 0 0 26px; font-size: 15px; color: var(--color-brand-dark); line-height: 1.7; padding-top: 6px; text-wrap: pretty; } .steps li:last-child p { margin-bottom: 0; } .client-panel__code { background: var(--color-brand-dark); padding: clamp(22px, 4vw, 36px); min-width: 0; display: flex; flex-direction: column; gap: 18px; justify-content: center; } .code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .code-head__dots { display: flex; gap: 6px; flex: none; } .code-head__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-neutral-700); } .code-head__dots span:last-child { background: var(--color-brand-gold); } .code-head__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-400); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client-panel__code pre { margin: 0; font-size: clamp(12px, 1.1vw, 13px); line-height: 1.7; color: var(--color-neutral-200); white-space: pre-wrap; overflow-wrap: anywhere; background: #2A2626; border: 1px solid var(--color-brand-dark-muted); border-radius: 12px; padding: clamp(14px, 2.4vw, 18px) clamp(14px, 2.6vw, 20px); } .btn-gold { align-self: flex-start; background: var(--color-brand-gold); color: var(--color-brand-dark); border: 0; border-radius: 9999px; padding: 10px 20px; min-height: 44px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .1s ease; } .btn-gold:hover { background: var(--color-brand-gold-light); } .btn-gold:active { transform: scale(.97); } /* 04 — Developers */ .dev { background: var(--color-brand-gold-50); padding-block: var(--sec-pad); } .dev .wrap { display: flex; flex-direction: column; gap: var(--grid-gap); } .dev .sec-head { gap: 14px; } .dev .sec-head h2, .dev .sec-head .kicker { margin-bottom: 0; } .facts { display: flex; gap: 10px 24px; flex-wrap: wrap; justify-content: center; margin: 6px 0 0; padding: 0; list-style: none; } .facts li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--color-neutral-700); max-width: 300px; text-align: start; } .facts li::before { content: ""; flex: none; margin-top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-gold); } .dev-link { margin-top: 6px; color: var(--color-brand-dark); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--color-brand-gold); padding-bottom: 2px; } .dev-link:hover { border-color: var(--color-brand-dark); text-decoration: none; color: var(--color-brand-dark); } .arch { display: flex; flex-direction: column; min-width: 0; font-size: 13px; } .arch__row { display: grid; grid-template-columns: minmax(120px, .8fr) 40px minmax(0, 2fr); align-items: center; } .arch__link { height: 1px; background: var(--color-brand-gold); } .arch__box { border: 1px solid var(--color-neutral-200); border-radius: 12px; padding: 14px 16px; background: var(--color-brand-gold-50); display: flex; flex-direction: column; gap: 6px; min-width: 0; } .arch__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); font-weight: 600; } .arch__names { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 600; } .arch__names i { color: var(--color-neutral-300); font-style: normal; } .arch__hub { border: 1px solid var(--color-brand-dark); border-radius: 12px; padding: 14px 16px; background: var(--color-brand-dark); color: #fff; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .arch__hub-top { display: flex; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; align-items: baseline; } .arch__hub-top code { font-size: 13px; color: var(--color-brand-gold-light); } .arch__hub-top span { font-size: 11px; color: var(--color-neutral-400); } .chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .chips code { font-size: 12px; border-radius: 6px; padding: 3px 8px; max-width: 100%; overflow-wrap: anywhere; } .arch__hub .chips code { background: var(--color-brand-dark-hover); border: 1px solid var(--color-neutral-700); color: #fff; } .arch__hub-note { font-size: 12px; color: var(--color-neutral-300); text-wrap: pretty; } .arch__drop { height: 28px; margin-inline-start: 24px; border-inline-start: 1px solid var(--color-brand-gold); } .arch__branches { margin-inline-start: 24px; border-inline-start: 1px solid var(--color-brand-gold); display: flex; flex-direction: column; gap: 18px; min-width: 0; } .branch { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; } .branch__card { border: 1px solid var(--color-neutral-200); border-radius: 12px; background: #fff; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(150px, 1fr); min-width: 0; } .branch__tools { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .branch__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand-gold-hover); font-weight: 600; } .branch__tools .chips code { background: var(--color-brand-gold-50); border: 1px solid var(--color-neutral-200); color: var(--color-brand-dark); } .branch__src { border-inline-start: 1px dashed var(--color-brand-gold); padding: 12px 14px; background: var(--color-brand-gold-50); border-start-end-radius: 12px; border-end-end-radius: 12px; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px; justify-content: center; min-width: 0; transition: background .15s ease; } .branch__src:hover { background: var(--color-brand-gold-pale); text-decoration: none; color: inherit; } .branch__src b { font-weight: 700; font-size: 14px; } .branch__src code { font-size: 11px; color: var(--color-neutral-500); text-align: start; overflow-wrap: anywhere; } .branch__src small { font-size: 11px; color: var(--color-neutral-400); } .arch__legend { margin-top: 14px; display: flex; gap: 10px 18px; flex-wrap: wrap; font-size: 12px; color: var(--color-neutral-500); padding-inline-start: 24px; } .arch__legend span { display: inline-flex; align-items: center; gap: 6px; } .arch__legend i { width: 18px; height: 0; border-top: 1px solid var(--color-brand-gold); display: inline-block; flex: none; } .arch__legend i.dashed { border-top-style: dashed; } /* 05 — FAQ */ .faq { padding-block: var(--sec-pad); display: flex; flex-direction: column; gap: var(--grid-gap); } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; align-items: start; } .faq-grid details { background: var(--surface-subtle); border-radius: 14px; padding: 16px 20px; } .faq-grid summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style-position: inside; text-wrap: pretty; } .faq-grid details p { margin-top: 10px; color: var(--color-neutral-700); font-size: 14px; max-width: 720px; text-wrap: pretty; } /* Final call */ .final { max-width: 1120px; margin: 0 auto -60px; padding-inline: var(--gutter); position: relative; z-index: 2; } .final__card { background: var(--color-brand-gold); color: var(--color-brand-dark); border-radius: 24px; padding: clamp(32px, 5.5vw, 56px) clamp(22px, 4.5vw, 48px); box-shadow: 0 30px 60px -30px rgba(34, 31, 31, .4); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; } .final__pattern { position: absolute; inset: 0; background: var(--pattern-band) center / auto 120px repeat; opacity: .07; pointer-events: none; } .final__text { max-width: 560px; position: relative; } .final__text h2 { font-size: clamp(21px, 2.2vw, 24px); font-weight: 700; margin-bottom: 8px; line-height: 1.3; text-wrap: balance; } .final__text p { color: var(--color-neutral-700); font-size: 15px; text-wrap: pretty; } .final__btn { position: relative; background: var(--color-brand-dark); color: #fff; border: 0; border-radius: 12px; padding: 14px clamp(18px, 2.5vw, 26px); font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-height: 48px; transition: background .15s ease; max-width: 100%; } .final__btn:hover { background: var(--color-brand-dark-hover); } .final__btn code { font-size: clamp(13px, 1.3vw, 14px); color: var(--color-brand-gold-light); overflow-wrap: anywhere; } /* Footer */ .site-footer { background: var(--color-brand-dark); color: var(--color-neutral-300); padding-block: clamp(84px, 11vw, 110px) 44px; } .site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; } .site-footer__logo { height: clamp(72px, 9vw, 96px); width: auto; filter: brightness(0) invert(1); } .site-footer nav { display: flex; gap: 14px 22px; flex-wrap: wrap; font-size: 14px; } .site-footer nav a { color: var(--color-neutral-200); } .site-footer nav a:hover { color: #fff; } .site-footer__note { max-width: 1320px; margin: 28px auto 0; padding-inline: var(--gutter); font-size: 13px; color: var(--color-neutral-500); text-wrap: pretty; } /* Toast */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); opacity: 0; transition: transform .2s ease, opacity .2s ease; background: var(--color-brand-dark); color: #fff; border: 1px solid var(--color-brand-gold); border-radius: 9999px; padding: 10px 20px; font-size: 15px; font-weight: 600; pointer-events: none; z-index: 50; max-width: calc(100vw - 32px); text-align: center; } .toast.is-on { transform: translateX(-50%) translateY(0); opacity: 1; } /* Legal pages */ .legal { max-width: 800px; margin-inline: auto; padding: clamp(40px, 7vw, 64px) var(--gutter) 40px; } .legal h1 { font-size: clamp(28px, 3.8vw, 40px); font-weight: 700; margin-bottom: 8px; line-height: 1.25; text-wrap: balance; } .legal .meta { color: var(--text-secondary); font-size: 14px; margin-bottom: clamp(24px, 4vw, 34px); text-wrap: pretty; } .legal h2 { font-size: clamp(18px, 2vw, 20px); font-weight: 600; margin: 32px 0 8px; } .legal p, .legal li { color: var(--color-neutral-700); font-size: clamp(15px, 1.5vw, 16px); line-height: 1.75; text-wrap: pretty; } .legal p { margin: 0 0 14px; } .legal ul { margin: 0 0 14px; padding-inline-start: 22px; } .legal li + li { margin-top: 6px; } .legal strong { color: var(--text-primary); font-weight: 600; } .legal a { text-decoration: underline; text-decoration-color: rgba(138, 112, 48, .35); overflow-wrap: anywhere; } /* ── Structural breakpoints ───────────────────────────────────── */ /* Laptop and below: the legal links live in the footer, so drop them from the top nav. Matched on `.site-nav a` so it still wins against the touch-target rule below. */ @media (max-width: 1000px) { .site-nav a.site-nav__legal { display: none; } } /* The nav no longer fits beside the logo: give it its own scrollable row, and turn the client switcher into a scrollable strip instead of a wrapped blob. */ @media (max-width: 880px) { :root { --header-h: 116px; } .site-header .wrap { flex-wrap: wrap; row-gap: 2px; } .brand { flex: 1 1 auto; order: 1; } .lang-toggle { order: 2; min-height: 44px; } .site-nav { order: 3; flex: 1 0 100%; margin-inline-start: 0; gap: 20px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { display: flex; align-items: center; min-height: 44px; } .client-tabs-wrap { justify-content: flex-start; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .client-tabs-wrap::-webkit-scrollbar { display: none; } .client-tabs { flex-wrap: nowrap; border-radius: 14px; } .client-tab { flex: 0 0 auto; min-height: 44px; } } /* Federation diagram: stack, and turn the horizontal connectors vertical. */ @media (max-width: 760px) { .arch__row { grid-template-columns: minmax(0, 1fr); } .arch__row--rail > div:empty { display: none; } .arch__row > .arch__link { width: 1px; height: 22px; justify-self: start; margin-inline-start: 24px; } .branch__card { grid-template-columns: minmax(0, 1fr); } .branch__src { border-inline-start: 0; border-top: 1px dashed var(--color-brand-gold); border-radius: 0 0 12px 12px; } } /* Phone: stacked stats need horizontal rules, and full-width actions. */ @media (max-width: 620px) { .stats { flex-direction: column; } .stats > div { flex: 1 1 auto; border-inline-start: 0; border-block-start: 1px solid var(--color-neutral-200); padding-block: 14px; } .stats > div:first-child { border-block-start: 0; } .hero__cta { width: 100%; } .hero__cta .pill { flex: 1 1 200px; } .final__card { justify-content: stretch; } .final__btn { width: 100%; } .btn-gold { align-self: stretch; } .site-footer .wrap { flex-direction: column; align-items: flex-start; gap: 20px; } .toast { white-space: normal; bottom: 16px; } } /* Small phones: trim the last of the horizontal padding. */ @media (max-width: 380px) { .bubble { padding: 16px 18px; } .source-card { padding: 22px 18px; } .faq-grid details { padding: 14px 16px; } .client-tab { padding-inline: 14px; } } /* Short landscape viewports: the hero should not fill the whole screen. */ @media (max-height: 520px) and (orientation: landscape) { .hero { padding-block: 40px 32px; } .hero__logo { width: clamp(90px, 14vw, 120px); margin-bottom: 14px; } .stats { margin-top: 24px; } } /* Motion: hero entrance + reveal on scroll (CSS only, gated on JS and reduced-motion) */ @keyframes icUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes icFade { from { opacity: 0; } to { opacity: 1; } } @keyframes icPop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .hero__logo { animation: icPop .8s ease both; } .hero .badge { animation: icUp .6s ease .1s both; } .hero h1 { animation: icUp .7s ease .2s both; } .hero__sub { animation: icUp .7s ease .3s both; } .hero__cta { animation: icUp .7s ease .4s both; } .stats { animation: icFade .8s ease .6s both; } .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .js [data-reveal][data-shown] { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bubble, .pill, .btn-gold { transition: none; } } /* RTL */ [dir="rtl"] .kicker, [dir="rtl"] .bubble__cat, [dir="rtl"] .source-card__kind, [dir="rtl"] .client-panel__hint, [dir="rtl"] .code-head__label, [dir="rtl"] .arch__label, [dir="rtl"] .branch__label, [dir="rtl"] .pillar__n { letter-spacing: 0; } [dir="rtl"] body { line-height: 1.9; }