/* ============================================================================ PUBLIC SITE — premium theme layer (Frontend Phase 6, Version 2.0 UI). ---------------------------------------------------------------------------- Loaded on EVERY public page (layouts.public). Scoped to `.sds-l-page` so it only touches the public website — never the admin or portal shells. It recolours the SDS tokens to the Phase-6 palette and upgrades buttons, cards, page headers, article typography and the footer to a world-class NGO look. The homepage layers `home.css` on top for its hero + sections. No duplicated HTML, no backend changes. ============================================================================ */ .sds-l-page { /* Core brand palette (Premium Light) — mirrors premium.css / site.css */ --home-primary: #C61F26; /* links / primary buttons (text-safe) */ --home-primary-700: #A81920; --home-primary-900: #7E1418; --home-teal: #D89B2D; /* decorative gold */ --home-saffron: #F05A28; /* Donate / accent */ --home-saffron-600: #D94A1E; --home-success: #2E8B57; --home-bg: #FAF8F3; --home-ink: #1E1E1E; --home-muted: #6E6459; --home-line: #ECE3D6; --home-radius: 20px; --home-shadow: 0 18px 48px -12px rgba(30, 20, 12, 0.16), 0 6px 16px -8px rgba(30, 20, 12, 0.10); --home-gradient: linear-gradient(125deg, #1E1E1E 0%, #7E2417 52%, #C1381C 115%); --home-gradient-warm: linear-gradient(120deg, #F5732E 0%, #F05A28 100%); --home-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Remap SDS tokens so every sds() component adopts the palette on the site */ --sds-color-action: var(--home-primary); /* crimson primary buttons */ --sds-color-action-hover: var(--home-primary-700); --sds-color-accent: var(--home-saffron); /* orange Donate/accent */ --sds-color-accent-hover: var(--home-saffron-600); --sds-color-bg-app: var(--home-bg); --sds-color-link: var(--home-primary); --sds-color-surface-tint: #FFF4E6; --sds-radius-lg: 16px; /* Force LIGHT surfaces/text on the public site, regardless of OS dark mode or what theme.js sets on — these win by proximity (set on the body). */ --sds-color-surface: #FFFFFF; --sds-color-surface-raised: #FFFFFF; --sds-color-surface-sunken: #FFF4E6; --sds-color-text: #555555; --sds-color-text-strong: var(--home-ink); --sds-color-text-muted: #6E6459; --sds-color-border: #ECE3D6; --sds-color-border-subtle: #F3EBDF; --sds-color-border-strong: #D9CDBB; --sds-color-overlay: rgba(30, 20, 12, 0.55); color-scheme: light; background: var(--home-bg); -webkit-font-smoothing: antialiased; } /* Links: no default underline on the premium chrome; keep it only in prose. */ .sds-l-page a { text-decoration: none; } .sds-l-page article .sds-text a, .sds-l-page .sds-richtext a, .sds-l-page .sds-prose a { text-decoration: underline; text-underline-offset: 2px; } /* Premium listing header band (activities/projects/news/gallery/reports) */ .listing-hero { background: var(--home-gradient); padding-block: clamp(2.5rem, 6vw, 4rem); margin-bottom: clamp(1.75rem, 3vw, 2.75rem); } .listing-hero .sds-overline { color: #F3C77A; } .listing-hero .sds-h1, .listing-hero h1 { color: #fff; } .listing-hero .sds-lead { color: rgba(255, 255, 255, .9); margin-top: 8px; } .listing-hero .sds-breadcrumb, .listing-hero .sds-breadcrumb a { color: rgba(255, 255, 255, .85); } /* --------------------------------------------------------------- TYPOGRAPHY */ .sds-l-page .sds-h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.14; } .sds-l-page .sds-h2 { font-weight: 800; letter-spacing: -0.02em; } .sds-l-page .sds-h3 { font-weight: 700; letter-spacing: -0.01em; } .sds-l-page .sds-lead { color: var(--home-muted); } /* ------------------------------------------------------------------ BUTTONS */ .sds-l-page .sds-btn { border-radius: 999px; font-weight: 600; letter-spacing: .01em; transition: transform .25s var(--home-ease), box-shadow .25s var(--home-ease), background .25s var(--home-ease); } .sds-l-page .sds-btn--accent { background: var(--home-gradient-warm); color: #3b2400; box-shadow: 0 10px 24px -10px rgba(245,158,11,.55); } .sds-l-page .sds-btn--accent:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(245,158,11,.7); } .sds-l-page .sds-btn--primary:hover, .sds-l-page .sds-btn--outline:hover, .sds-l-page .sds-btn--secondary:hover { transform: translateY(-2px); box-shadow: var(--home-shadow); } /* -------------------------------------------------------------------- CARDS */ /* Premium cards for content grids (listing, related, home). Sidebar cards stay calm (no lift). Media sits flush; body is padded. */ .sds-l-page .sds-l-grid .sds-card, .sds-l-page .sds-card--interactive { border-radius: var(--home-radius); border-color: var(--home-line); padding: 0; overflow: clip; box-shadow: 0 1px 2px rgba(16,30,54,.06); transition: transform .4s var(--home-ease), box-shadow .4s var(--home-ease), border-color .4s var(--home-ease); } .sds-l-page .sds-l-grid .sds-card:hover, .sds-l-page .sds-card--interactive:hover { transform: translateY(-6px); box-shadow: var(--home-shadow); border-color: transparent; } .sds-l-page .sds-l-grid .sds-card :is(img, .sds-card__media) { transition: transform .6s var(--home-ease); } .sds-l-page .sds-l-grid .sds-card:hover :is(img, .sds-card__media) { transform: scale(1.06); } .sds-l-page .sds-l-grid .sds-card > :not(img):not(.sds-card__media) { padding-inline: 20px; } .sds-l-page .sds-l-grid .sds-card > :not(img):not(.sds-card__media):first-child { padding-top: 18px; } .sds-l-page .sds-l-grid .sds-card > :not(img):not(.sds-card__media):last-child { padding-bottom: 20px; } .sds-l-page .sds-l-grid { gap: 28px; } /* Stat cards */ .sds-l-page .sds-stat { border-radius: var(--home-radius); text-align: center; transition: transform .4s var(--home-ease), box-shadow .4s var(--home-ease); } .sds-l-page .sds-stat:hover { transform: translateY(-4px); box-shadow: var(--home-shadow); } .sds-l-page .sds-stat__value { background: var(--home-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .sds-l-page .sds-stat__label { justify-content: center; } /* -------------------------------------------------------------- PAGE HEADER */ /* Give inner listing/detail pages an elegant page head with a soft rule. */ .sds-l-page-head { align-items: flex-end; gap: 20px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--home-line); } .sds-l-page .sds-l-page-head .sds-muted { font-size: 1.05rem; } /* Listing toolbar polish */ .sds-l-page .sds-toolbar { margin-bottom: 24px; } .sds-l-page .sds-search input, .sds-l-page .sds-select { border-radius: 999px; } /* Breadcrumb */ .sds-l-page .sds-breadcrumb { font-size: var(--sds-fs-body-sm); color: var(--home-muted); } /* ---------------------------------------------------------- DETAIL / ARTICLE */ .sds-l-page .sds-l-hero { background: var(--home-gradient); padding-block: clamp(2.5rem, 6vw, 4.25rem); position: relative; } .sds-l-page .sds-l-hero > img { border-radius: 0; } /* White text on the gradient page banner (About, listings, detail heroes) */ .sds-l-page .sds-l-hero :is(h1, h2, .sds-h1, .sds-h2, .sds-display, .sds-h3) { color: #fff; } .sds-l-page .sds-l-hero :is(p, .sds-lead, .sds-muted, .sds-caption, .sds-overline) { color: rgba(255, 255, 255, .9); } .sds-l-page .sds-l-hero .sds-breadcrumb, .sds-l-page .sds-l-hero .sds-breadcrumb a { color: rgba(255, 255, 255, .85); } /* Premium light cards across all public pages (About, detail, listings) */ .sds-l-page .sds-card { background: #fff; border-radius: var(--home-radius); border: 1px solid var(--home-line); box-shadow: 0 1px 2px rgba(16, 30, 54, .05); } .sds-l-page .sds-card :is(.sds-card__title, h1, h2, h3, h4) { color: var(--home-ink); } .sds-l-page .sds-card .sds-muted, .sds-l-page .sds-muted { color: var(--home-muted); } /* Rounded, elevated hero banner image on detail pages */ .sds-l-page .sds-l-detail { gap: clamp(28px, 4vw, 56px); } .sds-l-page article .sds-text { font-size: 1.12rem; line-height: 1.75; color: #555555; } .sds-l-page article .sds-text :is(h2, h3) { color: var(--home-ink); letter-spacing: -0.01em; margin-top: 1.6em; } .sds-l-page article .sds-text img { border-radius: var(--home-radius); box-shadow: var(--home-shadow); margin-block: 1.2em; } .sds-l-page article .sds-text :is(p, li) { max-width: 72ch; } .sds-l-page article .sds-text blockquote, .sds-l-page .sds-blockquote { border-inline-start: 4px solid var(--home-saffron); background: var(--sds-color-surface-tint); border-radius: 10px; padding: 14px 20px; } .sds-l-page aside .sds-card { border-radius: var(--home-radius); } /* ------------------------------------------------------------------ FOOTER */ .sds-l-page .sds-l-footer { background: var(--home-primary-900); color: rgba(255,255,255,.72); border-top: 0; } .sds-l-page .sds-l-footer h3 { color: #fff; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; } .sds-l-page .sds-l-footer a { color: rgba(255,255,255,.72); } .sds-l-page .sds-l-footer a:hover { color: #fff; } .sds-l-page .sds-l-footer .sds-caption { color: rgba(255,255,255,.6); } .sds-l-page .sds-l-footer__bottom { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.55); } .sds-l-page .sds-l-social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: rgba(255,255,255,.8); margin-inline-end: 8px; transition: background .25s, color .25s, transform .25s var(--home-ease); } .sds-l-page .sds-l-social a:hover { background: var(--home-saffron); color: #3b2400; transform: translateY(-2px); border-color: transparent; } /* --------------------------------------------------------------- A11Y/MOTION */ .sds-l-page :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(198,31,38,.38); border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .sds-l-page * { scroll-behavior: auto; } .sds-l-page .sds-btn, .sds-l-page .sds-card, .sds-l-page .sds-stat { transition: none; } } /* Premium listing toolbar */ .sds-l-page .listing-body .sds-toolbar { background: #fff; border: 1px solid var(--home-line); border-radius: 16px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(16,30,54,.05); align-items: center; } .sds-l-page .listing-body { padding-top: 0; padding-bottom: clamp(3rem, 6vw, 5rem); } /* Tighten the breadcrumb bar so the hero sits close under it */ .sds-l-page > .sds-container:first-child, .sds-l-page main > .sds-container:first-child { padding-block: 10px; }