/* Foundation layer for the React-derived website styles. * * Ported from `frontend/shared/src/website/styles/index.css` plus the handful of * base-layer rules in `frontend/shared/src/index.css` that survive into the * rendered page. The React app reaches these through Tailwind's `@layer base` * and `@apply`; Tailwind is not shipped here because the website's JSX uses CSS * modules exclusively — every `className` in the website pages is `styles.x`, * with no utility classes to generate. Only `body`'s three applied utilities * mattered, and they are written out literally below. * * The values are measured, not inferred: the React app's own `styles/index.css` * overrides the Tailwind base, so a page renders on white with `#262019` text * rather than the `bg-surface` `#f7f3ee` the utility would suggest. Confirmed by * reading getComputedStyle off the running site. * * Everything is scoped to the website body classes. These rules reset margins, * box sizing and scrollbars, so left global they would reach straight into * Frappe Desk, which shares the same document. Nothing here may match outside a * page this app owns. */ /* ── Scope wrappers ─────────────────────────────────────────────────────── * Each ported stylesheet is scoped to a class that one wrapper element carries, * standing in for the local scope Vite gives a CSS module. The wrappers must not * exist as far as layout is concerned: `.header` is `position: sticky`, and a * real box would become its containing block — a wrapper only as tall as the * header itself, so it would unstick the moment the page scrolled. `display: * contents` generates no box at all, so the header still resolves against the * body while the class remains available to the selectors. Verified by scrolling * both variants in a browser, not assumed. * * This is also why the scopes are NOT all put on : `container`, * `ctaButton`, `searchInput` and `logo` are each defined by more than one module, * and with every scope an ancestor of every element the page's `.container` rule * would win over the header's on load order alone. One wrapper per region is what * keeps them apart. */ .rp-scope { display: contents; } /* Frappe's is a flex column with a fixed height, so a child that can shrink gets compressed to the viewport and everything after it — the footer — lays out on top of the content. website.css already guards its own top-level blocks against this; a ported page needs the same guard, but `.rp-scope` is `display: contents` and generates no box, so the real flex item is the element inside it. Found on /fundraise, where the footer's link columns rendered in the middle of the page. */ body > .rp-scope > * { flex-shrink: 0; width: 100%; } .airce-marketing, .airce-portal-shell { /* `body` in the source. */ background-color: white; color: #262019; margin: 0; -webkit-text-size-adjust: 100%; /* `@apply font-body` -> tailwind.config.js fontFamily.body */ font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* `html { overflow-x: hidden }` in the source. Applied to the page rather than the document so Desk keeps its own scrolling. */ overflow-x: hidden; } /* Root variables — AIRCE theme. Scoped for the same reason: `--primary` is a name Frappe also uses. */ .airce-marketing, .airce-portal-shell { --primary: #dc6b1f; --secondary: #727272; } /* Prevent horizontal overflow globally */ .airce-marketing *, .airce-marketing *::before, .airce-marketing *::after, .airce-portal-shell *, .airce-portal-shell *::before, .airce-portal-shell *::after { box-sizing: border-box; } .airce-marketing img, .airce-marketing video, .airce-marketing svg, .airce-portal-shell img, .airce-portal-shell video, .airce-portal-shell svg { max-width: 100%; height: auto; } /* Ensure inputs don't break layout on mobile */ .airce-marketing input, .airce-marketing textarea, .airce-marketing select, .airce-marketing button, .airce-portal-shell input, .airce-portal-shell textarea, .airce-portal-shell select, .airce-portal-shell button { max-width: 100%; font-family: inherit; } /* Force visible form fields - prevents OS/browser dark-mode inference */ .airce-marketing input, .airce-marketing textarea, .airce-marketing select, .airce-portal-shell input, .airce-portal-shell textarea, .airce-portal-shell select { background-color: #fff; color: #261f18; color-scheme: light; } /* Date/time inputs - always light color-scheme */ .airce-marketing input[type="date"], .airce-marketing input[type="datetime-local"], .airce-marketing input[type="time"], .airce-marketing input[type="month"], .airce-marketing input[type="week"], .airce-portal-shell input[type="date"], .airce-portal-shell input[type="datetime-local"], .airce-portal-shell input[type="time"], .airce-portal-shell input[type="month"], .airce-portal-shell input[type="week"] { color: #191512; color-scheme: light; } /* ── Scrollbar colours (orange) ─────────────────────────── */ .airce-marketing::-webkit-scrollbar, .airce-portal-shell::-webkit-scrollbar { width: 6px; height: 6px; } .airce-marketing::-webkit-scrollbar-track, .airce-portal-shell::-webkit-scrollbar-track { background: #fff7ed; } .airce-marketing::-webkit-scrollbar-thumb, .airce-portal-shell::-webkit-scrollbar-thumb { background: #dc6b1f; border-radius: 3px; } .airce-marketing::-webkit-scrollbar-thumb:hover, .airce-portal-shell::-webkit-scrollbar-thumb:hover { background: #dc6b1f; } .airce-marketing, .airce-portal-shell { scrollbar-color: #dc6b1f #fff7ed; } /* ── Scrollbar hide ─────────────────────────────────────── */ .airce-marketing .scrollbar-hide, .airce-portal-shell .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .airce-marketing .scrollbar-hide::-webkit-scrollbar, .airce-portal-shell .scrollbar-hide::-webkit-scrollbar { display: none; } /* ── Skeleton loader ─────────────────────────────────────── */ .airce-marketing .skeleton, .airce-portal-shell .skeleton { border-radius: 6px; background: linear-gradient(90deg, #f5f1ea 25%, #e9e2d9 50%, #f5f1ea 75%); background-size: 600px 100%; animation: airce-shimmer 1.5s infinite; } @keyframes airce-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } /* ── The `hidden` attribute must win ─────────────────────── */ /* React unmounts elements it does not want on screen; this port keeps them in the DOM and toggles `hidden` instead. The browser's own `[hidden]` rule is a bare attribute selector, so any ported component rule outranks it — which is how `.rp-header .searchExpanded { display: flex }` kept the header search box permanently open, stealing ~263px and wrapping every multi-word nav label onto two lines. Scoped to the ported markup so Frappe's own UI is untouched. */ .airce-marketing [hidden], .airce-portal-shell [hidden], .rp-header [hidden], .rp-footer [hidden] { display: none !important; }