/* Rahmah identity, Phase 2: landing page and sign-up screens only.
* Source of truth: docs/bym/rahmah (designer handoff v1.0, 8 Oct 2026).
* Owner decision, 2026-10-08: the handoff wins on corners (4px for inputs and
* buttons, 8px for contained media, everything else square).
*
* SCOPE: four screens in index.html, chosen through the :is(...) list below
* #screen-landing (incl. its header) #screen-account-auth (sign up / log in)
* #screen-reset-password #screen-link-error
* The rest of the app keeps its current look (Phase 3, not started).
*
* TO ADD A SCREEN: add its id to every :is(...) list (search "SCOPE").
* TO REVERT: delete the one in index.html's
* . (The logo/lang markup edits in #screen-landing are harmless on their own.)
*
* Tokens come from bym/styles/rahmah.css (--bym-*), loaded before this file.
* Fonts: self-hosted copies under their own family names ("BYM Afacad", ...),
* so nothing outside the scoped screens changes font.
*/
@font-face { font-family: "BYM Afacad"; src: url("/bym/fonts/AfacadFlux-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BYM Afacad"; src: url("/bym/fonts/AfacadFlux-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "BYM Afacad"; src: url("/bym/fonts/AfacadFlux-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "BYM Noto Sans Arabic"; src: url("/bym/fonts/NotoSansArabic-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* ---- 1. Tokens: the app already draws fonts, corners, lines and muted text from these ---- */
/* SCOPE */
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) {
--font-display: "BYM Afacad", "Afacad Flux", "Avenir Next", Arial, sans-serif;
--font-body: var(--font-display); --font-ui: var(--font-display); --font-mono: var(--font-display);
--r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-pill: 0px;
--line: var(--bym-rule); --line-soft: var(--bym-rule); --line-faint: var(--bym-rule);
--text: var(--bym-text); --muted: var(--bym-text-muted); --muted-2: var(--bym-text-muted); --faint: var(--bym-text-muted);
--surface: var(--bym-surface);
font-family: var(--font-display); font-size: var(--bym-text-base); line-height: 1.55; color: var(--bym-text);
}
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) :lang(ar), :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [lang="ar"] { font-family: "BYM Noto Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif; line-height: 1.8; letter-spacing: 0; font-style: normal; }
/* ---- 2. No shadows, glows or text shadows. Corners are square except where set below. ---- */
/* SCOPE */
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) *, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) *::before, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) *::after {
border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important;
}
/* gradients: the pack allows none */
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-btn-primary, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn-gold, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn { background-image: none !important; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-hero::before, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-hero::after { display: none; }
/* ---- 3. Controls: 4px radius, 44px+ targets, Semibold labels, Fig focus ---- */
/* SCOPE */
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-btn-primary, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-btn-ghost, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn-outline, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn-small {
border-radius: var(--bym-radius-control) !important; min-height: var(--bym-target-min);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-ui); font-weight: 600; font-size: var(--bym-text-sm); letter-spacing: 0; text-transform: none;
transform: none; transition: background-color var(--bym-fast) var(--bym-ease), color var(--bym-fast) var(--bym-ease), border-color var(--bym-fast) var(--bym-ease);
}
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-btn-primary, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn-gold { background-color: var(--bym-primary); color: var(--bym-on-primary); border: 1px solid var(--bym-primary); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn:hover:not(:disabled), :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-btn-primary:hover:not(:disabled) { background-color: #2f1f2e; color: var(--bym-on-primary); transform: none; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn-outline, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-btn-ghost { background-color: transparent; color: var(--bym-primary); border: 1px solid var(--bym-primary); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn-outline:hover:not(:disabled), :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-btn-ghost:hover:not(:disabled) { background-color: var(--bym-surface-soft); color: var(--bym-primary); border-color: var(--bym-primary); transform: none; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .btn:disabled { opacity: 1; background-color: var(--bym-rule); border-color: var(--bym-rule); color: var(--bym-text-muted); cursor: not-allowed; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--bym-focus); outline-offset: 2px; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .input {
border: 1px solid var(--bym-border); border-radius: var(--bym-radius-control) !important; background: var(--bym-surface);
min-height: var(--bym-control-height); font-size: var(--bym-text-base); color: var(--bym-text);
}
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .input:focus { border-color: var(--bym-focus); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .input::placeholder { color: var(--bym-text-muted); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .form-group label, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) label { font-size: var(--bym-text-xs); font-weight: 600; color: var(--bym-text); }
/* ---- 4. Links read as links; copper is not used for small text ---- */
/* SCOPE */
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) a:not(.btn) { color: var(--bym-primary) !important; text-decoration: underline; text-underline-offset: 2px; }
/* inline style="font-size:11-13px" and inline copper/low-contrast text on these screens: lift to the pack's 14px minimum and the muted token */
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [style*="font-size:11"], :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [style*="font-size:12"], :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [style*="font-size:13"], :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [style*="font-size: 11"], :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [style*="font-size: 12"], :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [style*="font-size: 13"] { font-size: var(--bym-text-xs) !important; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [style*="color:#B88355"], :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [style*="color: #B88355"], :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) [style*="color:#7A6678"] { color: var(--bym-text-muted) !important; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-header-links a { display: inline-flex; align-items: center; min-height: var(--bym-target-min); font-size: var(--bym-text-sm); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .leave-link { display: inline-flex; align-items: center; min-height: var(--bym-target-min); color: var(--bym-primary); text-decoration: underline; font-size: var(--bym-text-sm); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-toggle-link { min-height: var(--bym-target-min); display: inline-flex; align-items: center; color: var(--bym-primary); font-size: var(--bym-text-sm); }
/* ---- 5. Structure: fine rules, square surfaces ---- */
/* SCOPE */
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .session-card, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-trust-item, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-card, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-toggle-panel {
border: 1px solid var(--bym-rule); background: var(--bym-surface);
}
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-chip, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-status { border: 1px solid var(--bym-rule); font-size: var(--bym-text-xs); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-journey-circle { border: 1px solid var(--bym-primary); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-journey::before { border-top: 1px solid var(--bym-rule); }
@media (max-width: 760px) { :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-journey::before { border-top: none; border-left: 1px solid var(--bym-rule); } }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-video-card, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-video-card video { border-radius: var(--bym-radius-media) !important; overflow: hidden; }
/* ---- 6. Landing header (brand lockup is an image; never live text) ---- */
#screen-landing .landing-header { backdrop-filter: none; background: var(--bym-canvas); border-bottom: 1px solid var(--bym-rule); }
#screen-landing .landing-header-brand img { display: block; height: 38px; width: auto; }
/* Phones: the pack says to use the mark (not the lockup) when the lockup would be under 180px.
The in index.html swaps the source at 480px; this keeps brand + links + Sign Up on one row. */
@media (max-width: 480px) {
#screen-landing .landing-header { padding: 8px 16px; flex-wrap: nowrap; gap: 12px; }
#screen-landing .landing-header-links { gap: 4px 14px; flex-wrap: nowrap; margin-left: auto; }
#screen-landing .landing-header .btn { padding: 0 16px; }
}
#screen-landing .landing-header-links { font-size: var(--bym-text-sm); gap: 8px 20px; flex-wrap: wrap; }
#screen-landing .landing-header .btn { padding: 0 20px; font-size: var(--bym-text-sm); }
#screen-landing .gh-logo-mark img { display: block; height: 64px; width: auto; margin: 0 auto; }
#screen-landing .gh-logo-mark img.gh-logo-name { height: 32px; margin: 12px auto 0; }
/* ---- 7. Type: quieter, readable, sentence case ---- */
/* SCOPE */
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-eyebrow { font-size: var(--bym-text-sm); letter-spacing: 0; text-transform: none; color: var(--bym-text-muted); font-weight: 500; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-tagline { font-size: var(--bym-text-sm); letter-spacing: 0; color: var(--bym-text-muted); font-style: normal; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-headline { font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; font-size: var(--bym-text-title); color: var(--bym-primary); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-headline-accent { color: var(--bym-accent); } /* large text only: Copper on Cream is 3.02:1 */
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .gh-sub, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-sub { font-size: var(--bym-text-base); line-height: 1.6; color: var(--bym-text); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-privacy-line { font-size: var(--bym-text-xs); color: var(--bym-text-muted); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-trust-item { font-size: var(--bym-text-sm); font-weight: 500; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-journey-lead, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-head h2 { font-weight: 600; letter-spacing: -0.02em; font-size: var(--bym-text-lg); color: var(--bym-primary); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-journey-sub, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-head p, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-toggle-desc, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-bio, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-meta, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-footnote, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-divider { font-size: var(--bym-text-xs); line-height: 1.55; color: var(--bym-text-muted); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-journey-label, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .bym-toggle-title, :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-name { font-size: var(--bym-text-sm); font-weight: 600; color: var(--bym-text); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) .landing-preview-ribbon { font-size: var(--bym-text-xs); letter-spacing: 0; text-transform: none; font-weight: 600; }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) #account-auth-heading { font-weight: 600; letter-spacing: -0.035em; font-size: var(--bym-text-xl); color: var(--bym-primary); }
:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) #account-auth-copy { font-size: var(--bym-text-sm) !important; line-height: 1.6; color: var(--bym-text-muted) !important; }
/* ---- 8. "Report an issue" pill and dialog (report-issue.js) while a scoped screen is showing.
They are appended to , outside the scoped screens, hence :has(). ---- */
/* SCOPE */
body:has(:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error).active) .bym-ri-btn {
border-radius: var(--bym-radius-control) !important; box-shadow: none !important; min-height: var(--bym-target-min); padding: 0 16px;
font-size: var(--bym-text-sm); background: var(--bym-canvas); color: var(--bym-primary); border: 1px solid var(--bym-primary);
}
/* Phones: instead of floating over the text, the button sits at the end of the page as a normal button. */
@media (max-width: 760px) {
body:has(:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error).active) .bym-ri-btn {
position: static; display: block; margin: 24px auto 32px; z-index: auto;
}
}
body:has(:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error).active) .bym-ri-btn:hover { background: var(--bym-surface-soft); color: var(--bym-primary); }
body:has(:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error).active) :is(.bym-ri-box) { border-radius: var(--bym-radius-control) !important; box-shadow: none !important; }
body:has(:is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error).active) :is(.bym-ri-box button, .bym-ri-box textarea, .bym-ri-box input[type=email]) { border-radius: var(--bym-radius-control) !important; }
@media (prefers-reduced-motion: reduce) { :is(#screen-landing, #screen-account-auth, #screen-reset-password, #screen-link-error) * { transition: none !important; animation: none !important; } }
/* First-screen fixes (CSS only): on a phone the sign-up card no longer wastes
80px above and 40px at each side, and the "check your email" message after
sending a login link is a clear box rather than small grey text. */
@media (max-width: 480px) {
#screen-account-auth .session-card { margin: 16px auto; padding: 24px 16px; }
}
#screen-account-auth #account-auth-status:not(:empty) { padding: 12px 14px; border: 1px solid var(--bym-primary); border-radius: var(--bym-radius-control); background: var(--bym-canvas); font-size: var(--bym-text-sm); font-weight: 600; line-height: 1.5; }