/* An editorial, paper-and-ink page rather than a single flat colour: a light sheet to read on, white cards raised off it, hairline rules doing the dividing instead of borders everywhere, and colour used only where it carries meaning -- debit, credit, and the one gold accent that ties back to the application. */ :root { --paper: #f4f6f9; /* the page */ --sheet: #ffffff; /* cards raised off it */ --ink: #0b1b33; /* headings, the dark anchor */ --ink-2: #33455f; /* body text */ --muted: #64748b; /* captions */ --rule: #dde3ec; /* hairlines */ --rule-soft: #eef1f6; --gold: #a8802f; /* the accent carried over from the app */ --gold-soft: #f6efe0; --debit: #0b6b5a; /* green: money in */ --credit: #9a5b2a; /* bronze: money out */ --radius: 14px; --page: 1160px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 88px; /* The paper colour lives on so body::before can sit behind the page's own background layer without disappearing under it. */ background: var(--paper); } body { position: relative; color: var(--ink-2); font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.8; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--ink); line-height: 1.35; font-weight: 600; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ink); text-decoration: none; } /* Figures read left-to-right even on an RTL page, and line up in columns. */ .num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .wrap { max-width: var(--page); margin-inline: auto; padding-inline: 24px; } /* ---------- the mark behind the page ---------- */ /* The logo sits behind the top of the page, large enough to read as a watermark and faint enough that nobody reads it instead of the headline. Absolutely positioned rather than fixed, so it does not flicker in and out as the white .on-sheet bands scroll over it. */ body::before { content: ""; position: absolute; top: 96px; inset-inline: 0; height: 680px; z-index: -1; pointer-events: none; background: url("assets/brb-mark.webp") no-repeat center top; background-size: min(880px, 92vw) auto; opacity: .055; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: rgb(244 246 249 / 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 72px; padding-block: 12px; } .wordmark { display: inline-flex; align-items: baseline; gap: 8px; font-family: "Readex Pro", system-ui, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: 0.02em; color: var(--ink); direction: ltr; } .wordmark-mark { height: 30px; width: auto; } /* The mark carries "BRB" already; "ERP" stays as text so it is still legible at header size, where three letters inside the image would be ~5px tall. */ .wordmark-erp { color: var(--gold); font-size: 14px; letter-spacing: 0.24em; font-weight: 600; } .header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1.5px solid var(--ink); padding: 10px 20px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .16s, color .16s, border-color .16s; white-space: nowrap; } .btn-lg { padding: 14px 30px; font-size: 17px; } .btn-primary { background: var(--ink); color: #fff; } .btn-primary:hover { background: #16294a; color: #fff; } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: #fff; } .btn-quiet { border-color: var(--rule); background: var(--sheet); color: var(--ink-2); font-weight: 500; } .btn-quiet:hover { border-color: var(--ink); color: var(--ink); } /* ---------- hero ---------- */ .hero { padding: 68px 0 84px; } .hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; } .eyebrow { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--gold); background: var(--gold-soft); border-radius: 999px; padding: 4px 14px; margin-bottom: 18px; } .hero h1 { font-size: clamp(32px, 4.5vw, 52px); font-weight: 700; letter-spacing: -.01em; } .lead { font-size: 19px; color: var(--ink-2); max-width: 36em; margin: 20px 0 30px; } .cta { display: flex; flex-wrap: wrap; gap: 12px; } .hero-note { margin-top: 20px; font-size: 14px; color: var(--muted); } /* ---------- the ledger: the page's signature element ---------- */ .ledger { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgb(11 27 51 / 0.35); } .ledger-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 22px; background: var(--ink); color: #fff; } .ledger-head strong { font-family: "Readex Pro", sans-serif; font-weight: 500; font-size: 15px; } .ledger-head small { opacity: .72; font-size: 13px; } .ledger-source { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 22px; border-bottom: 1px dashed var(--rule); font-size: 14px; color: var(--ink-2); } .ledger-source b { color: var(--ink); font-weight: 600; } .ledger-scroll { overflow-x: auto; } .ledger table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; } .ledger th { font-weight: 500; color: var(--muted); font-size: 12.5px; text-align: start; padding: 10px 22px; border-bottom: 1px solid var(--rule); } .ledger th.amt, .ledger td.amt { text-align: end; width: 22%; } .ledger td { padding: 10px 22px; border-bottom: 1px solid var(--rule-soft); color: var(--ink-2); } /* The credited account is indented under the debited one, as it is written by hand in a real journal. */ .ledger td.acct-cr { padding-inline-start: 44px; } .ledger td.amt.dr { color: var(--debit); font-weight: 600; } .ledger td.amt.cr { color: var(--credit); font-weight: 600; } .ledger tfoot td { border-bottom: 0; background: #f7f9fb; font-weight: 700; color: var(--ink); } /* The lines post one after another, which is the whole claim of the page acted out rather than asserted. */ .ledger tbody tr { opacity: 0; transform: translateY(6px); animation: post .45s ease forwards; } .ledger tbody tr:nth-child(1) { animation-delay: .45s; } .ledger tbody tr:nth-child(2) { animation-delay: .85s; } .ledger tbody tr:nth-child(3) { animation-delay: 1.25s; } .ledger tbody tr:nth-child(4) { animation-delay: 1.8s; } .ledger tbody tr:nth-child(5) { animation-delay: 2.2s; } .balanced { display: flex; align-items: center; gap: 8px; padding: 13px 22px; color: var(--debit); font-weight: 600; font-size: 14px; border-top: 1px solid var(--rule); opacity: 0; animation: post .5s ease 2.8s forwards; } .balanced svg { flex: none; } @keyframes post { to { opacity: 1; transform: none; } } /* ---------- sections ---------- */ section { padding: 84px 0; } .on-sheet { background: var(--sheet); border-block: 1px solid var(--rule); } .sec-head { max-width: 42em; margin-bottom: 44px; } .sec-head h2 { font-size: clamp(26px, 3.2vw, 37px); } .sec-head p { color: var(--ink-2); margin-top: 14px; font-size: 18px; } /* ---------- who it is for ---------- */ .fit { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--sheet); } .fit > div { padding: 32px; } .fit > div + div { border-inline-start: 1px solid var(--rule); } .fit-maker { background: linear-gradient(180deg, var(--gold-soft), var(--sheet) 60%); } .fit h3 { font-size: 21px; margin-bottom: 6px; } .fit .fit-lede { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; } /* ---------- lists with a ruled marker ---------- */ .ruled { list-style: none; display: grid; gap: 11px; } .ruled li { position: relative; padding-inline-start: 22px; font-size: 15.5px; color: var(--ink-2); } .ruled li::before { content: ""; position: absolute; inset-inline-start: 0; top: 13px; width: 10px; height: 2px; background: var(--gold); } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; } .step { border-top: 2px solid var(--rule); padding-top: 20px; } .step .n { font-family: "Readex Pro", sans-serif; font-size: 13px; color: var(--muted); letter-spacing: .08em; } .step h3 { font-size: 20px; margin: 6px 0 8px; } .step p { font-size: 15.5px; } /* The payoff step is the one the product rests on, so it is marked. */ .step-key { border-top-color: var(--gold); } .step-key .n { color: var(--gold); } /* ---------- modules ---------- */ .mod-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--rule); } .mod { padding: 30px 0; border-bottom: 1px solid var(--rule); } .mod:nth-child(odd) { padding-inline-end: 36px; } .mod:nth-child(even) { padding-inline-start: 36px; border-inline-start: 1px solid var(--rule); } .mod h3 { font-size: 20px; margin-bottom: 12px; } /* ---------- manufacturing depth ---------- */ .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .fact { background: var(--sheet); padding: 28px 26px; } .fact h3 { font-size: 18px; margin-bottom: 10px; } .fact p { font-size: 15.5px; } /* ---------- documents ---------- */ .docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .doc { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; } .doc h3 { font-size: 17px; margin-bottom: 8px; } .doc p { font-size: 15.5px; } /* ---------- video ---------- */ .video-frame { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--sheet); aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -34px rgb(11 27 51 / 0.3); } .video-frame video { width: 100%; height: 100%; display: block; } .video-placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); } /* ---------- closing on ink ---------- */ .final { background: var(--ink); color: #c3cee0; padding: 92px 0; } .final h2 { color: #fff; font-size: clamp(27px, 3.4vw, 40px); max-width: 17em; } .final p { margin-top: 14px; max-width: 36em; } .final-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; flex-wrap: wrap; } .final .btn-primary { background: #fff; color: var(--ink); border-color: #fff; } .final .btn-primary:hover { background: #dde5f0; color: var(--ink); } .final .btn-ghost { color: #fff; border-color: #43587a; } .final .btn-ghost:hover { background: #16294a; color: #fff; } /* ---------- footer ---------- */ .site-footer { background: var(--ink); color: #8c99ae; border-top: 1px solid #1b2a42; padding: 26px 0; font-size: 14px; } .site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .site-footer a { color: #c3cee0; } .site-footer .wordmark { color: #fff; font-size: 18px; } .site-footer .wordmark-mark { height: 22px; } .site-footer .wordmark-erp { font-size: 11px; } /* ---------- narrow screens ---------- */ @media (max-width: 960px) { .hero { padding: 44px 0 60px; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .steps { grid-template-columns: repeat(2, 1fr); gap: 26px; } .facts { grid-template-columns: repeat(2, 1fr); } .docs { grid-template-columns: repeat(2, 1fr); } .mod-grid { grid-template-columns: 1fr; } .mod:nth-child(odd), .mod:nth-child(even) { padding-inline: 0; border-inline-start: 0; } section { padding: 60px 0; } } @media (max-width: 640px) { body { font-size: 16px; } /* Narrower column, so the watermark has to step back further to stay behind the headline rather than competing with it. */ body::before { top: 72px; height: 340px; background-size: 78vw auto; opacity: .04; } .wordmark-mark { height: 26px; } .wrap { padding-inline: 16px; } .btn { padding: 9px 16px; font-size: 14.5px; } .btn-lg { padding: 13px 24px; font-size: 16px; } .fit { grid-template-columns: 1fr; } .fit > div + div { border-inline-start: 0; border-top: 1px solid var(--rule); } .steps, .facts, .docs { grid-template-columns: 1fr; } .cta .btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ledger tbody tr, .balanced { animation: none; opacity: 1; transform: none; } * { transition: none !important; } }