/* ========================================================================== In-app WebView theme tokens. Contract: the native Android/iOS apps inject and call their own window.setAppTheme(theme), which sets data-theme="light|dark|system" on . This stylesheet only CONSUMES that attribute — it defines no JS. Values mirror the `webviews` Laravel project (resources/sass/app.scss and public/css/remittance-partner.css). Keep both in sync. Loaded ONLY on in-app pages: - main-blank pages -> via app\assets\InAppThemeAsset (depends on AppAsset, so it lands after site.css) - main-blank-rebrand -> via a plain in the layout, because that layout has no $this->head() call and must NOT pull in AppAsset (bootstrap/site.css are deliberately absent from /legal) It must never load on the public website. Body-class families — the two in-app layouts have different base palettes, so the typography rules are split: .inapp-page every in-app page: canvas + color-scheme only .inapp-blank main-blank pages (Bootstrap 3 + mainpages.css palette) .inapp-tc .inapp-faq .inapp-soc .inapp-rebrand main-blank-rebrand pages (webflow palette) .inapp-legal Behaviour matrix: data-theme="light" -> light data-theme="dark" -> dark data-theme="system" -> follows prefers-color-scheme attribute absent -> follows prefers-color-scheme (no white flash before native calls in) garbage value -> light (selectors below are value-case-sensitive, so "Dark"/""/"blue" match nothing and fall through to the :root light block) ========================================================================== */ /* -------------------------------------------------------------------------- LIGHT TOKENS IMPORTANT — these are NOT all the Design System light values. Per the "light mode must not change" rule, the light column reproduces what these in-app pages render TODAY. Where the current value differs from the DS light value, the DS value is noted so design can flip it in a separate, reviewed change. Divergences are marked [DS: #xxxxxx]. The --np-legal-* group exists because /legal inherits a different base palette (webflow) from the main-blank pages (Bootstrap 3 + mainpages.css). One token name cannot carry two different light values, so the legal page gets its own names. All of them need design sign-off. -------------------------------------------------------------------------- */ :root { --np-color-scheme: light; /* Surfaces */ --np-app-bg: #ffffff; --np-surface-elevated: #ffffff; /* cards, dialogs, callout boxes */ /* Text — current main-blank value is #000, inherited from web/css/mainpages.css `body { color: #000 }`. */ --np-text-primary: #000000; /* [DS: #181818] */ --np-text-secondary: #000000; /* [DS: #6d6d6d] */ --np-text-header-title: #381d2a; /* [DS: #423940] SoC .heading-18 today */ --np-text-highlighted: #337ab7; /* [DS: #6e4bf1] Bootstrap 3 link blue */ --np-text-muted: #818181; /* DS value; nothing consumes it yet */ /* Lines & borders — Bootstrap 3 `hr { border-top: 1px solid #eeeeee }` */ --np-card-stroke: #eeeeee; /* [DS: #b6b6b6] */ /* Icons */ --np-icon-default: #787878; --np-icon-primary: #381d2a; /* Form controls — no in-app page in scope contains a form. Defined for parity with the webviews project; currently unconsumed. */ --np-input-label: #381d2a; --np-input-text: #212529; --np-input-bg: #ffffff; --np-input-border: #a8a8a8; --np-input-placeholder: #6d6d6d; /* Buttons — currently unconsumed (no buttons on these pages). */ --np-button-primary-bg: #2c1a28; --np-button-text-primary: #f3eff1; /* Status — currently unconsumed. */ --np-success: #23ce7e; --np-success-bg: #d6f6e7; --np-error: #a94442; --np-error-bg: #f2dede; --np-error-border: #ebccd1; --np-focus-ring: rgba(110, 75, 241, 0.35); /* ---- Tokens invented for this project — NEED DESIGN SIGN-OFF ---- No equivalent exists in the DS list, but these colours are already on the pages and the "no hardcoded colours" rule forbids leaving them. */ --np-text-highlighted-hover: #23527c; /* Bootstrap 3 a:hover/:focus */ --np-brand-accent: #ff5018; /* SoC .heading-19, .btn-green, partial urdu/english toggles */ --np-button-text-on-accent: #ffffff; /* .btn-green text */ --np-faq-step-heading: #4ade93; /* FAQ h3 green */ /* ---- /legal (main-blank-rebrand, webflow palette) ---- Light values are today's rendering; all need design sign-off. */ --np-legal-body-text: #333333; /* webflow.css body { color: #333 } */ --np-legal-text: #1e141e; /* .terms-and-conditions */ --np-legal-link: #0077ff; /* was #07f — identical colour */ --np-legal-muted: #808080; /* was `grey` — identical colour */ --np-legal-tab-stroke: #d9d2d5; /* tab strip bottom rule */ --np-legal-tab-active-bg: #d9d2d5; /* active + hover tab */ --np-legal-tab-mobile-stroke: #dfdcdc; /* per-tab border under 800px */ --np-legal-sticky-bg: #ffffff; /* fixed Download bar */ --np-legal-table-border: #808080; /* cd-resolution table rules */ --np-legal-plain-link: #000000; /* a.no-hyperlinked (has !important) */ /* ---- NOTE: there are deliberately NO --np-soc-* tokens here ---- The Schedule of Charges sheet (/inapp/soc) is an Illustrator SVG that is re-exported and re-uploaded whenever the charges change, with different auto-generated class names and slightly different hex values each time. app\components\SocSvg inlines it and rewrites every colour to var(--np-soc-, ). Leaving these tokens UNDEFINED in light is the whole trick: var() falls back to the file's own colour, so light stays pixel-identical for any future export with no code change. They are defined only in the dark blocks below. Do not add light values here. */ } /* -------------------------------------------------------------------------- DARK TOKENS — Design System values, verbatim, plus the invented ones. NOTE: this block is intentionally duplicated in the prefers-color-scheme media query below. Plain CSS has no mixins, and the selectors have to match distinct attribute states, so the duplication is unavoidable. KEEP THE TWO COPIES IDENTICAL or the "system"/no-attribute fallback will silently drift from explicit dark mode. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --np-color-scheme: dark; --np-app-bg: #140e12; --np-surface-elevated: #241b21; --np-text-primary: #f3eff1; --np-text-secondary: #d6c5d6; --np-text-header-title: #ede3e8; --np-text-highlighted: #997dff; --np-text-muted: #b9b2b9; --np-card-stroke: #453e44; --np-icon-default: #8c808c; --np-icon-primary: #d4c9ce; --np-input-label: #e4d4db; --np-input-text: #f3eff1; --np-input-bg: transparent; --np-input-border: #918291; --np-input-placeholder: #b9b2b9; --np-button-primary-bg: #f3eff1; --np-button-text-primary: #2c1a28; --np-success: #23ce7e; --np-success-bg: #0e2b1d; --np-error: #f28b82; --np-error-bg: #2a1516; --np-error-border: #4a2323; --np-focus-ring: rgba(153, 125, 255, 0.35); /* Invented tokens — NEED DESIGN SIGN-OFF (see light block). */ --np-text-highlighted-hover: #b3a0ff; /* lightened from #997dff */ --np-brand-accent: #ff5018; /* brand orange, unchanged */ --np-button-text-on-accent: #ffffff; /* still on orange, unchanged */ --np-faq-step-heading: #4ade93; /* already high-contrast on dark */ /* /legal */ --np-legal-body-text: #f3eff1; --np-legal-text: #f3eff1; --np-legal-link: #997dff; --np-legal-muted: #b9b2b9; --np-legal-tab-stroke: #453e44; --np-legal-tab-active-bg: #241b21; --np-legal-tab-mobile-stroke: #453e44; --np-legal-sticky-bg: #241b21; --np-legal-table-border: #453e44; --np-legal-plain-link: #f3eff1; /* Schedule of Charges sheet — dark only, on purpose. See the note in the light block. Roles are assigned per colour by SocSvg from lightness and chroma, never from class names, so re-exports keep working. */ --np-soc-surface: #241b21; /* the white/near-white card rects */ --np-soc-ink: #f3eff1; /* text, exported as outlined paths */ --np-soc-rule: #6d646d; /* leader lines and table rules */ } /* "system" mode, and the pre-call window before native sets the attribute. ---- START duplicated dark block — keep identical to the copy above ---- */ @media (prefers-color-scheme: dark) { :root[data-theme="system"], :root:not([data-theme]) { --np-color-scheme: dark; --np-app-bg: #140e12; --np-surface-elevated: #241b21; --np-text-primary: #f3eff1; --np-text-secondary: #d6c5d6; --np-text-header-title: #ede3e8; --np-text-highlighted: #997dff; --np-text-muted: #b9b2b9; --np-card-stroke: #453e44; --np-icon-default: #8c808c; --np-icon-primary: #d4c9ce; --np-input-label: #e4d4db; --np-input-text: #f3eff1; --np-input-bg: transparent; --np-input-border: #918291; --np-input-placeholder: #b9b2b9; --np-button-primary-bg: #f3eff1; --np-button-text-primary: #2c1a28; --np-success: #23ce7e; --np-success-bg: #0e2b1d; --np-error: #f28b82; --np-error-bg: #2a1516; --np-error-border: #4a2323; --np-focus-ring: rgba(153, 125, 255, 0.35); --np-text-highlighted-hover: #b3a0ff; --np-brand-accent: #ff5018; --np-button-text-on-accent: #ffffff; --np-faq-step-heading: #4ade93; --np-legal-body-text: #f3eff1; --np-legal-text: #f3eff1; --np-legal-link: #997dff; --np-legal-muted: #b9b2b9; --np-legal-tab-stroke: #453e44; --np-legal-tab-active-bg: #241b21; --np-legal-tab-mobile-stroke: #453e44; --np-legal-sticky-bg: #241b21; --np-legal-table-border: #453e44; --np-legal-plain-link: #f3eff1; --np-soc-surface: #241b21; --np-soc-ink: #f3eff1; --np-soc-rule: #6d646d; } } /* ---- END duplicated dark block ---- */ /* ========================================================================== APPLIED RULES — all scoped to a body class so the public site is unaffected even if a data-theme attribute somehow appears on . ========================================================================== */ /* Root canvas — kills the white overscroll fringe on iOS rubber-band scroll. :has() needs iOS 15.4+ / Chrome 105+. On older WebViews the canvas stays default white; the body still themes correctly, so the only symptom is a white fringe when overscrolling. */ html:has(body.inapp-page) { background-color: var(--np-app-bg); } /* color-scheme is what turns browser-owned UI dark: scrollbars, form control defaults, the on-screen keyboard. Scoped so the public site is untouched. */ body.inapp-page { background-color: var(--np-app-bg); color-scheme: var(--np-color-scheme); } body.inapp-page :focus-visible { outline: 2px solid var(--np-focus-ring); outline-offset: 2px; } /* ========================================================================== FAMILY: main-blank (T&C en/ur, FAQ, SoC) Base palette today = Bootstrap 3 + web/css/mainpages.css. ========================================================================== */ body.inapp-blank { color: var(--np-text-primary); } /* Section headings. The T&C pages open with an

, which per the token mapping is a section heading, not a page title. / body.inapp-blank h1, body.inapp-blank h2, body.inapp-blank h3, body.inapp-blank h4, body.inapp-blank h5, body.inapp-blank h6 { color: var(--np-text-primary); } body.inapp-blank p, body.inapp-blank ul, body.inapp-blank ol, body.inapp-blank li { color: var(--np-text-secondary); } / Bold / lead text and definition terms sit a step brighter than body copy. / body.inapp-blank strong, body.inapp-blank b { color: var(--np-text-primary); } / Only the colour is tokenised — width/style stay as Bootstrap sets them so no geometry changes. / body.inapp-blank hr { border-top-color: var(--np-card-stroke); } body.inapp-blank a { color: var(--np-text-highlighted); } body.inapp-blank a:hover, body.inapp-blank a:focus { color: var(--np-text-highlighted-hover); } / Callout boxes / cards, if these pages ever grow one. Unconsumed today. / body.inapp-blank .np-card { background-color: var(--np-surface-elevated); border-color: var(--np-card-stroke); } / -------------------------------------------------------------------------- Schedule of Charges (/inapp/soc) views/inapp/nayapay-soc.php is ALSO rendered as a partial by SiteController::actionSocArchive for the public /archive/30062025/soc page, so its inline