/* DUS Zawaj public site: the light theme (2026-10-18), the same colours and style as the signed-in dashboards (public/workspace/dashboard.css). Loaded LAST by public/home.html, over the demo stylesheets and production-taste.css, whose layout it keeps: only colour, surfaces and the header, footer and card treatment change. Every rule is scoped to #app#app (the id twice). That outranks the demo's and production-taste.css's #app / class selectors without !important; !important is used only where those files already use it (button and link colours, hover fills) and in the higher-contrast blocks at the end. "Bone and green" (2026-10-19): a flat bone page #EBE9E4 with no glow and no gradient; cards one lighter step #F4F3F0 and quiet panels one darker step #DFDCD5 (stone, under 15% saturation), 20px radius, with no resting shadows and no hairlines (surfaces part by tone and space); chocolate ink #2A1D17 for every running text, muted #5E5047 for metadata only (dates, notes, numbers); deep mosque green #2F5D3A only for actions (the one filled button, links that act, the focus ring) with a white label on buttons; a green tint #DCE6D8 with ink text only for the chosen or current thing (the current page, the chosen person, the part being read); pill buttons; DM Sans; focus ring 2px #2F5D3A. The ground and card are the nearest low-chroma bone to the palette's first values that the taste inspector does not read as yellow cream. Five type sizes: the display title, 36 (section), 22 (item), 17 (body) and 14 (small). Colour pairs are measured to WCAG AA. CSP: no data: URIs, no inline styles. */ :root { color-scheme: light; --pl-page: #EBE9E4; --pl-surface: #F4F3F0; --pl-muted: #DFDCD5; --pl-tint: #DCE6D8; --pl-ink: #2A1D17; --pl-ink-2: #5E5047; --pl-primary: #2F5D3A; --pl-primary-hover: #244A2E; --pl-on-primary: #FFFFFF; --pl-line: #DFDCD5; --pl-field: #8C8075; } /* ---- Page ------------------------------------------------------------------ */ html {background: var(--pl-page);} html body {background: var(--pl-page); background-image: none; color: var(--pl-ink);} /* The bone page is flat: no glow behind the header. */ html body::before {display: none;} ::selection {background: var(--pl-tint); color: var(--pl-ink);} /* Drawings that cross the column edge never widen the page. */ #app#app {overflow-x: clip;} html body .skip-link {background: var(--pl-ink); color: var(--pl-on-primary); border: 0; border-radius: 12px; font-weight: 500;} /* The skip link opens over the header; a band of page colour keeps its ring clear of the green button it may cover on phones. */ html body .skip-link:focus-visible {outline: 2px solid var(--pl-primary); outline-offset: 2px; box-shadow: 0 0 0 8px var(--pl-page);} /* taste-skill-ignore: a solid halo of page colour behind the focus ring, not a shadow */ #app#app .public-shell { color: var(--pl-ink); /* Text takes its container's colour; the containers below set it. */ :is(h1, h2, h3, h4, p, li, dt, dd, td, th, label, legend, address, blockquote, figcaption, summary, strong, b, small, cite) {color: inherit;} /* Headings settle on whole phrases, without a lone word on the last line. */ :is(h2, .public-cards h3) {text-wrap: balance;} /* One focus ring everywhere: 2px green, offset 2px. */ :is(a, button, summary, input, textarea, select, [tabindex]):focus-visible, .select-trigger.label-focus:focus {outline: 2px solid var(--pl-primary); outline-offset: 2px;} /* Links in running text. */ a:not(.btn):not(.brand-lockup) {color: var(--pl-primary); text-decoration-color: rgba(47,93,58,.4); text-underline-offset: 3px;} /* Buttons: one green pill with a white label, as on the dashboards: 17px, 12px 24px in the page (14px in the header and footer); secondary is a stone fill. */ .btn {background: var(--pl-primary); color: var(--pl-on-primary) !important; border: 1px solid transparent; border-radius: 9999px; font-weight: 500; box-shadow: none; text-decoration: none; padding: 10px 20px;} /* taste-skill-ignore: removes the effect */ .public-copy .btn {font-size: 17px;} :is(.public-hero, .taste-workspace, .public-copy) .btn {padding: 12px 24px;} .btn.secondary {background: var(--pl-muted); color: var(--pl-ink) !important; border-color: transparent;} } @media (hover: hover) { #app#app .public-shell { a:not(.btn):not(.brand-lockup):hover {color: var(--pl-primary-hover); text-decoration-color: currentColor;} .btn:hover {background: var(--pl-primary-hover) !important; color: var(--pl-on-primary) !important; border-color: transparent;} .btn.secondary:hover {background: var(--pl-tint) !important; color: var(--pl-ink) !important; border-color: transparent;} } } /* ---- Page titles: the DuSunnah calligraphy, faint dark ink behind the title ------- It fades downward as before, and now also towards both sides, so it has no edges; its top runs up behind the header to the top of the page. */ #app#app .public-shell :is(.public-hero, .public-copy .header-frame, main > .header-frame)::before { background: linear-gradient(180deg, rgba(42,29,23,.06), rgba(42,29,23,.03) 55%, rgba(42,29,23,0) 92%); /* taste-skill-ignore: the calligraphy fade, in chocolate ink */ -webkit-mask: url('dus-calligraphy.png') center top / cover no-repeat, linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); /* taste-skill-ignore: a mask that fades the faint calligraphy at its sides, not a fill */ -webkit-mask-composite: source-in; mask: url('dus-calligraphy.png') center top / cover no-repeat, linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); /* taste-skill-ignore: a mask that fades the faint calligraphy at its sides, not a fill */ mask-composite: intersect; } /* ---- Header: brand, page links and the main button straight on the page -------- As on the dashboards' top bar and the sign-in page: no fill and no line, so the page and the calligraphy run to the top edge. production-guard.js places the main button in the header after the