/* =========================================================================== BISHER & PARTNERS · IDENTITY TOKEN LAYER بشر وشركاؤه · طبقة الرموز --------------------------------------------------------------------------- Single source of truth for both editions (ar/ and en/). Values marked SITE are lifted verbatim from bishernp-website/public/css/main.css and must not be edited here; change them there and re-sync, or the manual and the product drift again. Values marked NEW are decided by this manual and do not exist on the site yet; they are the manual's own rulings and should be back-ported. ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap"); /* --------------------------------------------------------------------------- THMANYAH · خط ثمانية The unicode-range is copied from the site: Thmanyah claims only Arabic, Arabic-Indic numerals and « », so Latin inside Arabic copy falls through to Manrope per character, with no markup and no JavaScript. The family has NO 600: Bold claims 600-800 so no UA synthesises a fake. ------------------------------------------------------------------------- */ @font-face{font-family:"Thmanyah Display";src:url("fonts/thmanyah/serif-display-400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+00AB,U+00BB,U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF} @font-face{font-family:"Thmanyah Display";src:url("fonts/thmanyah/serif-display-500.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+00AB,U+00BB,U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF} @font-face{font-family:"Thmanyah Display";src:url("fonts/thmanyah/serif-display-700.woff2") format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+00AB,U+00BB,U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF} @font-face{font-family:"Thmanyah Display";src:url("fonts/thmanyah/serif-display-900.woff2") format("woff2");font-weight:900;font-display:swap;unicode-range:U+00AB,U+00BB,U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF} @font-face{font-family:"Thmanyah Text";src:url("fonts/thmanyah/serif-text-300.woff2") format("woff2");font-weight:300;font-display:swap;unicode-range:U+00AB,U+00BB,U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF} @font-face{font-family:"Thmanyah Text";src:url("fonts/thmanyah/serif-text-400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+00AB,U+00BB,U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF} @font-face{font-family:"Thmanyah Text";src:url("fonts/thmanyah/serif-text-500.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+00AB,U+00BB,U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF} @font-face{font-family:"Thmanyah Text";src:url("fonts/thmanyah/serif-text-700.woff2") format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+00AB,U+00BB,U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF} :root{ /* ═══ 1. THE UNIT ═══════════════════════════════════════════════════════ X is the gold notch's height in the mark's own coordinate space. The symbol is 51 × 70.16; the notch is 12.22 × 12.14. RULING: the notch angle is ratified to exactly 45.000°. Measured it is 44.812°; correcting the vertical leg from 12.14 to 12.22 costs 0.114% of the mark's height (below any perceptual threshold) and buys perfect closure on every rotation, tile and rosette in the system. NEW */ --X: 12.22; --x: 12.22px; /* X as a drawable length at 1:1 */ --kerf-angle: 45deg; --mark-h: 70.16; /* symbol height in X-space */ --mark-w: 51; /* symbol width */ --logo-w: 187.5; /* full lockup width */ --X-of-H: 0.17418; /* 12.22 / 70.16 · the notch's share of height */ /* ═══ 2. THE GOLD ══════════════════════════════════════════════════════ ONE gold. #D6B37F is the mark's own colour: it is what both logo SVGs and the favicon actually contain. #d2af7d (the Word theme) and #d4af37 (three React components) are drift and are retired by this manual. */ --gold: #D6B37F; /* SITE */ --gold-rgb: 214, 179, 127; /* NEW */ /* The ramp. Hue held at 36°; saturation eased at the extremes so the pale and deep steps do not turn chalky or muddy. NEW */ --gold-050: #F5EFE6; --gold-100: #ECDFCA; --gold-200: #E4CDAA; --gold-300: #DDBB88; --gold-400: #D6A55C; --gold-500: #D6B37F; /* canonical */ --gold-600: #C2995B; --gold-700: #9F7941; --gold-800: #6A522F; /* first step that carries text on paper: 6.14:1 */ --gold-900: #3E311E; /* Gold cannot carry text on a light ground: #D6B37F on #EEEAE8 is 1.66:1. These two aliases exist so no one has to remember that. NEW */ --gold-on-ink: var(--gold-500); /* 9.69:1 on #0f0f0f · AAA */ --gold-on-paper: var(--gold-800); /* 6.14:1 on #EEEAE8 · AA */ --on-gold: #111111; /* 9.62:1 · NEVER white (1.98:1) */ /* ═══ 3. GROUNDS ═══════════════════════════════════════════════════════ */ --ink: #0f0f0f; /* SITE */ --ink-tint: #171719; /* SITE */ --ink-black: #000000; /* SITE */ --paper: #EEEAE8; /* SITE */ --paper-tint: #F9F7F7; /* SITE */ --paper-white: #ffffff; /* SITE */ /* Elevation. The site has four surface steps and says nothing about what each is for. This is the ruling. NEW */ --surface-0: var(--ink); /* the page itself */ --surface-1: var(--ink-tint); /* cards, panels, raised content */ --surface-2: #1e1e21; /* modals, popovers, the thing on top */ --surface-sunk: var(--ink-black);/* wells, code, inset media */ /* ═══ 4. TEXT ══════════════════════════════════════════════════════════ */ --on-dark-1: #FFFFFF; /* SITE */ --on-dark-2: #8e93a1; /* SITE */ --on-dark-3: #6b6d76; /* SITE value #36363c is 1.60:1, unusable. NEW */ --on-light-1: #121212; /* SITE */ --on-light-2: #575960; /* SITE */ --on-light-3: #6e7078; /* SITE value #7d7f89 is 3.33:1, lifted. NEW */ /* ═══ 5. STROKES ═══════════════════════════════════════════════════════ */ --rule-light: #b7b2b1; /* SITE */ --rule-light-2: #949291; /* SITE */ --rule-dark: #1f2124; /* SITE */ --rule-dark-2: #313336; /* SITE */ --hairline: 0.5px; --rule-w: 1px; --bar-w: calc(var(--x) * 0.25); /* ═══ 6. THE FIVE ARMS ═════════════════════════════════════════════════ Hues spread evenly across the arc the gold does not occupy (50° apart), with saturation capped at 0.44 so none reads as a technology-startup accent. Every value clears AA on its own ground and sits at least 1.35:1 from the gold so it can never be mistaken for a wrong gold. LAW: colour is never the sole carrier of arm identity. Every arm mark pairs its colour with its notch count (Digital 1 … Horizon 5), because the deuteranopic separation of a five-hue set is 41 and that is not enough to bet a document on. NEW */ --arm-digital: #4499AA; --arm-digital-lt: #1D6270; /* L2 ▸ */ --arm-grc: #8888BC; --arm-grc-lt: #4B4BBA; /* L3 ▸▸ */ --arm-pmo: #409E5F; --arm-pmo-lt: #1B6734; /* L4 ▸▸▸ */ --arm-capital: #B57586; --arm-capital-lt: #993852; /* L5 ▸▸▸▸ */ --arm-horizon: #C28CCC; --arm-horizon-lt: #8D2EA0; /* L6 ▸▸▸▸▸ */ /* Layer 1 (Diagnosis & Design) is owned by the platform and has NO colour. It is the frame, not a band. See the Stratum device. */ /* ═══ 7. STATE ═════════════════════════════════════════════════════════ Desaturated to sit inside this palette. --warning is deliberately a vivid amber 65 RGB-units from the brand gold: a warning that looks like the brand colour is not a warning. NEW */ --success: #7BC198; --success-lt: #297047; --warning: #E99449; --warning-lt: #A0520D; --danger: #CD8B84; --danger-lt: #8C362C; --info: #8BADC6; --info-lt: #315D7D; /* ═══ 8. DATA VISUALISATION ════════════════════════════════════════════ Doctrine: ONE gold series carries the argument; every other series is grey context. A chart exists to make one point. The categorical set below is used only when the data is genuinely nominal (the five arms, five sectors, five stages) and never to decorate a comparison. NEW */ --dv-1: var(--gold-500); --dv-2: #4499AA; --dv-3: #8888BC; --dv-4: #409E5F; --dv-5: #B57586; --dv-6: #C28CCC; --dv-grey-1: #8e93a1; --dv-grey-2: #5d616b; --dv-grey-3: #3d4048; --dv-grid: rgba(255,255,255,.08); /* ═══ 9. ALPHA ═════════════════════════════════════════════════════════ One ramp. The site currently uses twelve unrelated alphas. NEW */ --a-04: .04; --a-08: .08; --a-16: .16; --a-24: .24; --a-40: .40; --a-60: .60; --a-80: .80; --a-90: .90; /* ═══ 10. THE SPINE RHYTHM ═════════════════════════════════════════════ The spacing scale is measured off the B's own vertical anatomy, which is deliberately uneven: notch band 12.14, upper counter 18.90, waist 8.83, lower counter 20.09, foot 10.20, summing to exactly 70.16. A letterform is not a geometric progression and neither is this. NEW */ --sp-xs: calc(var(--x) * 0.7273); /* 8.9 the waist */ --sp-sm: calc(var(--x) * 0.8402); /* 10.3 the foot */ --sp-md: calc(var(--x) * 1.0000); /* 12.2 the notch */ --sp-lg: calc(var(--x) * 1.5568); /* 19.0 upper counter */ --sp-xl: calc(var(--x) * 1.6549); /* 20.2 lower counter */ --sp-2xl: calc(var(--x) * 2.5568); --sp-3xl: calc(var(--x) * 3.2841); --sp-4xl: calc(var(--x) * 4.9390); --sp-5xl: calc(var(--x) * 5.7792); /* the full mark height */ --baseline: calc(var(--x) / 4); /* ═══ 11. RADII ════════════════════════════════════════════════════════ The brand is sharp-cornered. The only softening permitted anywhere is the Kerf: a 45° cut, never a fillet. */ --r-0: 0; --r-hair: 2px; /* form controls only, never brand surfaces */ /* ═══ 12. TYPE ═════════════════════════════════════════════════════════ */ --ff-latin: "Manrope", system-ui, -apple-system, sans-serif; /* SITE */ --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* SITE */ --ff-ar-dis: "Thmanyah Display", "Manrope", sans-serif; /* SITE */ --ff-ar-txt: "Thmanyah Text", "Manrope", sans-serif; /* SITE */ /* The three Latin voices. Arabic has only two until the manual nominates a third: see the Query Line device. */ --tr-display: -0.035em; /* Manrope 600-700, tight */ --tr-body: 0; --tr-label: 0.05em; /* JetBrains Mono 600, uppercase, open */ /* ═══ 13. MOTION ═══════════════════════════════════════════════════════ */ --ease-settle: cubic-bezier(0.23, 0.65, 0.74, 1.09); /* SITE */ --ease-cut: cubic-bezier(0.85, 0, 0.15, 1); /* the bevel wipe NEW */ --t-fast: 0.1s; /* SITE */ --t-med: 0.3s; /* SITE */ --t-slow: 0.6s; /* SITE */ /* ═══ 14. FOCUS ════════════════════════════════════════════════════════ The site sets outline:none sitewide with no replacement. This is the replacement, and it is not optional. NEW */ --focus: var(--gold-500); --focus-ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold-500); } /* ── Ground-scoped overrides ────────────────────────────────────────────── Put .on-paper on any subtree sitting on a light ground and every token that has a light-ground twin swaps itself. This is what stops gold text appearing on paper at 1.66:1. */ .on-paper{ --gold-text: var(--gold-on-paper); --t1: var(--on-light-1); --t2: var(--on-light-2); --t3: var(--on-light-3); --rule: var(--rule-light); --rule-2: var(--rule-light-2); --ground: var(--paper); --arm-digital-c: var(--arm-digital-lt); --arm-grc-c: var(--arm-grc-lt); --arm-pmo-c: var(--arm-pmo-lt); --arm-capital-c: var(--arm-capital-lt); --arm-horizon-c: var(--arm-horizon-lt); color: var(--on-light-1); } .on-ink{ --gold-text: var(--gold-on-ink); --t1: var(--on-dark-1); --t2: var(--on-dark-2); --t3: var(--on-dark-3); --rule: var(--rule-dark); --rule-2: var(--rule-dark-2); --ground: var(--ink); --arm-digital-c: var(--arm-digital); --arm-grc-c: var(--arm-grc); --arm-pmo-c: var(--arm-pmo); --arm-capital-c: var(--arm-capital); --arm-horizon-c: var(--arm-horizon); color: var(--on-dark-1); } *{box-sizing:border-box} html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{margin:0;font-family:var(--ff-latin);text-rendering:optimizeLegibility} img{max-width:100%} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* ── Direction ──────────────────────────────────────────────────────────── The Arabic edition sets dir="rtl" on and adds .ed-ar. Everything below keys off that rather than off a language attribute, so a stray English word inside Arabic copy does not flip a layout. */ .ed-ar{ --ff-body: var(--ff-ar-txt); --ff-head: var(--ff-ar-dis); } .ed-en{ --ff-body: var(--ff-latin); --ff-head: var(--ff-latin); } /* Arabic sets no letter-spacing, ever. Thmanyah is drawn joined; tracking an Arabic word breaks the joins. This overrides the Latin ladder. */ .ed-ar h1,.ed-ar h2,.ed-ar h3,.ed-ar h4,.ed-ar h5,.ed-ar h6, .ed-ar p,.ed-ar li,.ed-ar td,.ed-ar th{letter-spacing:0}