/* Shiksha Abhiyan — Design Tokens Palette variants driven by [data-palette] on Photo treatment via [data-photo] on */ :root { /* Default palette: International NGO — warm ivory, deep forest, marigold, rust. Inspired by the tonal discipline of Oxfam / Room to Read / CARE. */ --c-bg: #F6F1E7; --c-surface: #FFFFFF; --c-surface-2: #ECE4D1; --c-ink: #0F1713; --c-ink-2: #2E352F; --c-muted: #6A6F69; --c-line: #DED5BE; --c-line-strong: #0F1713; --c-primary: #0B3B2E; /* deep forest */ --c-primary-ink: #FFFFFF; --c-accent: #E9B44C; /* marigold */ --c-accent-ink: #0F1713; --c-rust: #B23A1F; /* rust red */ --c-sky: #2F5B86; /* Semantic cause colors — each cause page recolors --c-primary */ --cause-shiksha: #C1432A; /* education — rust */ --cause-maitri: #8E3B66; /* women — berry */ --cause-prakriti: #2F6B3A; /* environment — forest green */ --cause-anti: #1B3A5B; /* legal — indigo blue */ /* Type scale (editorial) */ --font-display: "Fraunces", "Source Serif 4", Georgia, serif; --font-body: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --fs-0: 12px; --fs-1: 14px; --fs-2: 16px; --fs-3: 18px; --fs-4: 22px; --fs-5: 28px; --fs-6: 36px; --fs-7: 48px; --fs-8: 64px; --fs-9: 84px; --fs-10: 112px; /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Radii — editorial = subtle */ --r-1: 2px; --r-2: 6px; --r-3: 12px; --r-4: 20px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(20,20,20,0.06), 0 4px 12px rgba(20,20,20,0.04); --shadow-2: 0 4px 20px rgba(20,20,20,0.08), 0 24px 60px rgba(20,20,20,0.10); --maxw: 1240px; --gutter: clamp(20px, 4vw, 56px); } /* ===== Palette variants ===== */ [data-palette="editorial"] { /* default — already above */ } [data-palette="hopeful"] { --c-bg: #FFF7EC; --c-surface: #FFFFFF; --c-surface-2: #FFE7CC; --c-ink: #141414; --c-line: #F0E1C7; --c-primary: #1B3A5B; --c-primary-ink: #FFFFFF; --c-accent: #E07A3B; --c-rust: #C1432A; } [data-palette="bold"] { --c-bg: #F6F2EC; --c-surface: #FFFFFF; --c-surface-2: #E8DCC4; --c-ink: #0E0E0E; --c-line: #DED5C3; --c-primary: #111111; --c-primary-ink: #FFFFFF; --c-accent: #D94F2A; } [data-palette="night"] { --c-bg: #0E1116; --c-surface: #151A22; --c-surface-2: #1E252F; --c-ink: #F4EFE6; --c-ink-2: #C9C3B7; --c-muted: #8A8478; --c-line: #2A313B; --c-line-strong: #F4EFE6; --c-primary: #F4B223; --c-primary-ink: #0E1116; --c-accent: #2DB07A; } /* ===== Photo treatment ===== */ [data-photo="color"] .photo img, [data-photo="color"] img.photo { filter: none; } [data-photo="duotone"] .photo img, [data-photo="duotone"] img.photo { filter: grayscale(1) contrast(1.05) sepia(0.4) hue-rotate(-20deg); } [data-photo="bw"] .photo img, [data-photo="bw"] img.photo { filter: grayscale(1) contrast(1.08); } /* ===== Base ===== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-ink); } body { font-family: var(--font-body); font-size: var(--fs-2); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--c-ink); text-wrap: balance; } h1 { font-size: clamp(44px, 7vw, var(--fs-9)); } h2 { font-size: clamp(32px, 4.8vw, var(--fs-7)); } h3 { font-size: clamp(24px, 2.8vw, var(--fs-5)); } h4 { font-size: var(--fs-4); } p { margin: 0 0 1em; color: var(--c-ink-2); } p.lede { font-size: var(--fs-4); color: var(--c-ink); text-wrap: pretty; } a { color: inherit; } img { max-width: 100%; display: block; } /* Utility */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .eyebrow { font-family: var(--font-body); font-size: var(--fs-1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 500; font-size: var(--fs-2); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); } .btn--primary:hover { background: var(--c-ink); border-color: var(--c-ink); } .btn--accent { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); } .btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); } .btn--ghost:hover { background: var(--c-ink); color: var(--c-bg); } .btn--sm { padding: 8px 14px; font-size: var(--fs-1); } .btn--lg { padding: 18px 28px; font-size: var(--fs-3); } .btn--block { width: 100%; justify-content: center; } .btn svg { width: 16px; height: 16px; } /* Cards */ .card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); overflow: hidden; } /* Tag / Badge */ .tag { display: inline-block; padding: 4px 10px; background: var(--c-surface-2); color: var(--c-ink); border-radius: var(--r-pill); font-size: var(--fs-0); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } /* Divider */ .divider { height: 1px; background: var(--c-line); width: 100%; } /* Section spacing */ section { padding: clamp(64px, 9vw, 128px) 0; } section.tight { padding: clamp(40px, 6vw, 80px) 0; } /* Grid helpers */ .grid { display: grid; gap: var(--s-5); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } } /* Photo frame */ .photo { overflow: hidden; background: var(--c-surface-2); } .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .3s ease; } .photo:hover img { transform: scale(1.03); } /* Focus */ :focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; } /* Scrollbars polish */ ::selection { background: var(--c-accent); color: var(--c-accent-ink); } /* Subtle entrance */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; } [data-reveal].in { opacity: 1; transform: none; } /* Forms */ input, select, textarea { font: inherit; color: inherit; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2); padding: 12px 14px; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-primary) 18%, transparent); } label { font-size: var(--fs-1); color: var(--c-ink-2); font-weight: 500; display: block; margin-bottom: 6px; } /* Accessibility helpers */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }