/* ═══════════════════════════════════════════════════════ KNOWLEDGE PRISM — v4 Design System Off-white · Logo-derived palette · Baskerville Fonts loaded via in HTML for performance (avoids @import's render-blocking fetch waterfall) ═══════════════════════════════════════════════════════ */ :root { --bg: #FAF6ED; /* warm off-white */ --bg2: #F1E9D8; /* deeper cream — alternating sections/footer */ --panel: #FFFFFF; /* card surfaces */ --line: rgba(40,32,20,.10); --line2: rgba(40,32,20,.18); --txt: #223752; /* logo navy — headings, prominent text */ --txt2: #4E5B6B; /* softer navy-gray — subheadings, body copy */ --txt3: #696457; /* warm gray — tertiary/labels (darkened for AA contrast) */ --amber: #AE5A32; /* logo flame orange, darkened for AA on both bg and as button fill */ --amber2: #8A4525; /* deeper orange — secondary accent text, AA-passing */ --teal: #55755E; /* logo sage green — checks/success, AA-passing */ --blue: #223752; /* alias of navy for legacy references */ --grad: linear-gradient(120deg, #AE5A32 0%, #EB8B5D 100%); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--txt2); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: inherit; border: none; outline: none; } input, select, textarea { font-family: inherit; outline: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible, .nav-btn:focus-visible, .form-submit:focus-visible, .float-donate:focus-visible { outline: 2.5px solid var(--txt); outline-offset: 3px; } input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } ::selection { background: var(--amber); color: #fff; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--txt); border-radius: 100px; } ::-webkit-scrollbar-thumb:hover { background: var(--amber); } .serif { font-family: 'Libre Baskerville', Georgia, serif !important; } .mono { font-family: 'Space Grotesk', monospace !important; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; } /* ── glow orbs — soft warm accents on the cream background ── */ .orb { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; opacity: .5; } .orb-amber { background: rgba(174,90,50,.14); } .orb-teal { background: rgba(85,117,94,.12); } .orb-blue { background: rgba(34,55,82,.08); } /* ═══ NAV — glass ═══ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250,246,237,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); height: 64px; display: flex; align-items: center; transition: background .3s; } .nav.scrolled { background: rgba(250,246,237,.94); } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; } .nav-brand { display: flex; align-items: center; gap: 11px; } .nav-brand img { width: 36px; height: 36px; object-fit: contain; border-radius: 9px; } .nav-name { font-family: 'Libre Baskerville', serif; font-size: 1.08rem; font-weight: 700; color: var(--txt); line-height: 1; letter-spacing: -.01em; } .nav-sub { font-family: 'Space Grotesk', monospace; font-size: .52rem; color: var(--txt3); letter-spacing: .22em; text-transform: uppercase; margin-top: 3px; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-link { font-size: .8rem; font-weight: 500; color: var(--txt2); transition: color .2s; position: relative; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1.5px; background: var(--amber); transition: width .25s; } .nav-link:hover, .nav-link.active { color: var(--txt); } .nav-link.active::after, .nav-link:hover::after { width: 100%; } .nav-btn { background: var(--amber); color: #fff; font-size: .8rem; font-weight: 700; padding: 10px 22px; border-radius: 100px; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 18px rgba(174,90,50,.3); } .nav-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(174,90,50,.45); } .nav-ham { display: none; background: none; padding: 6px; color: var(--txt); } .nav-mob { display: none; position: fixed; top: 64px; left: 0; right: 0; background: rgba(250,246,237,.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); padding: 8px 24px 18px; flex-direction: column; z-index: 99; } .nav-mob.open { display: flex; } .nav-mob a { display: block; padding: 13px 0; font-size: .92rem; font-weight: 500; color: var(--txt2); border-bottom: 1px solid var(--line); } .nav-mob a:last-child { border-bottom: none; color: var(--amber); font-weight: 700; } /* ═══ TYPE ═══ */ .display { font-family: 'Libre Baskerville', Georgia, serif; font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; color: var(--txt); } .display em { font-style: italic; font-weight: 400; color: var(--txt2); } .display strong { font-weight: 700; font-style: normal; } .display .grad-text { color: var(--amber); font-weight: 700; } .eyebrow { font-family: 'Space Grotesk', monospace; font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; display: block; width: 26px; height: 1px; background: var(--amber); } .h2 { font-family: 'Libre Baskerville', Georgia, serif; font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.18; letter-spacing: -.005em; color: var(--txt); } .h2 em { font-style: italic; color: var(--txt2); font-weight: 400; } .lead { font-size: .95rem; color: var(--txt2); line-height: 1.85; font-weight: 300; } /* kinetic reveal */ .k-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; } .k-line > span { display: block; transform: translateY(110%); animation: kup .9s cubic-bezier(.19,1,.22,1) forwards; } .k-line:nth-child(1) > span { animation-delay: .1s; } .k-line:nth-child(2) > span { animation-delay: .22s; } .k-line:nth-child(3) > span { animation-delay: .34s; } .k-line:nth-child(4) > span { animation-delay: .46s; } @keyframes kup { to { transform: translateY(0); } } /* scroll reveal */ .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1); } .rv.in { opacity: 1; transform: none; } .rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; } /* ═══ BUTTONS ═══ */ .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; border-radius: 100px; transition: transform .2s, box-shadow .25s, background .2s; } .btn-amber { background: var(--amber); color: #fff; padding: 15px 32px; font-size: .88rem; box-shadow: 0 6px 20px rgba(174,90,50,.28); } .btn-amber:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(174,90,50,.4); } .btn-ghost { background: rgba(34,55,82,.04); color: var(--txt); border: 1px solid var(--line2); padding: 14px 28px; font-size: .85rem; font-weight: 600; backdrop-filter: blur(8px); } .btn-ghost:hover { background: rgba(34,55,82,.08); border-color: rgba(34,55,82,.3); } /* ═══ BENTO ═══ */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; } .b-cell { border-radius: 18px; overflow: hidden; position: relative; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(40,32,20,.05); transition: transform .35s cubic-bezier(.19,1,.22,1), border-color .3s, box-shadow .3s; } .b-cell:hover { transform: translateY(-4px); border-color: var(--line2); box-shadow: 0 10px 28px rgba(40,32,20,.1); } .b-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.19,1,.22,1), filter .4s; filter: saturate(.96); } .b-cell:hover img { transform: scale(1.045); filter: saturate(1.05); } .b-cell .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px; background: linear-gradient(to top, rgba(10,12,10,.85), transparent); font-family: 'Space Grotesk', monospace; font-size: .68rem; font-weight: 500; color: rgba(250,246,237,.92); letter-spacing: .04em; } .b-tall { grid-row: span 2; } .b-wide { grid-column: span 2; } .b-stat { display: flex; flex-direction: column; justify-content: center; padding: 26px; } .b-stat-n { font-family: 'Libre Baskerville', serif; font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--txt); } .b-stat-n.amber { color: var(--amber); } .b-stat-n.teal { color: var(--teal); } .b-stat-l { font-family: 'Space Grotesk', monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--txt3); margin-top: 10px; } /* ═══ GLASS CARD ═══ */ .glass { background: rgba(255,255,255,.82); border: 1px solid var(--line2); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-radius: 22px; box-shadow: 0 16px 50px rgba(40,32,20,.1); } /* ═══ SECTIONS ═══ */ .section { padding: 110px 0; position: relative; } .section-tight { padding: 80px 0; position: relative; } /* ═══ MARQUEE quote ═══ */ .mq-strip { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; background: var(--bg2); } .mq-track { display: flex; white-space: nowrap; animation: tick 34s linear infinite; } .mq-track span { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 400; font-size: .85rem; color: var(--txt3); padding: 0 32px; position: relative; letter-spacing: .01em; } .mq-track span::after { content: '·'; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); color: var(--txt3); font-size: .85rem; } @keyframes tick { to { transform: translateX(-50%); } } /* ═══ DONATE WIDGET ═══ */ .d-type { display: flex; gap: 8px; margin-bottom: 18px; } .d-type-btn { flex: 1; padding: 11px; border-radius: 100px; font-size: .78rem; font-weight: 600; background: transparent; color: var(--txt3); border: 1px solid var(--line2); transition: all .2s; text-align: center; } .d-type-btn.on { background: var(--txt); border-color: var(--txt); color: #fff; } .d-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 9px; } .d-amt { padding: 14px 6px; border-radius: 15px; text-align: center; border: 1px solid var(--line2); background: rgba(34,55,82,.02); transition: all .2s; color: var(--txt); } .d-amt:hover { border-color: rgba(174,90,50,.5); } .d-amt.on { border-color: var(--amber); background: rgba(174,90,50,.08); box-shadow: 0 0 0 3px rgba(174,90,50,.1); } .d-amt-n { font-family: 'Libre Baskerville', serif; font-size: 1.16rem; font-weight: 700; display: block; } .d-amt.on .d-amt-n { color: var(--amber); } .d-amt-w { font-family: 'Space Grotesk', monospace; font-size: .55rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); display: block; margin-top: 3px; opacity: .9; } .d-amt-l { font-size: .63rem; color: var(--txt3); display: block; margin-top: 1px; } .d-custom { width: 100%; padding: 14px; border-radius: 15px; text-align: center; border: 1px solid var(--line2); background: rgba(34,55,82,.02); font-size: .92rem; font-weight: 600; color: var(--txt); margin-bottom: 12px; transition: border-color .2s; } .d-custom:focus { border-color: var(--amber); } .d-custom::placeholder { font-weight: 400; font-size: .82rem; color: var(--txt3); } .d-impact { background: rgba(174,90,50,.08); border: 1px solid rgba(174,90,50,.24); border-radius: 15px; padding: 14px 18px; margin-bottom: 18px; } .d-impact-l { font-family: 'Space Grotesk', monospace; font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; } .d-impact-t { font-family: 'Libre Baskerville', serif; font-size: 1.02rem; font-weight: 400; color: var(--amber2); line-height: 1.55; } /* form fields */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field.full { grid-column: 1/-1; } .form-field label { font-family: 'Space Grotesk', monospace; font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); } .form-field label .req { color: var(--amber); } .form-field input, .form-field select, .form-field textarea { padding: 13px 16px; border-radius: 13px; border: 1px solid var(--line2); background: rgba(34,55,82,.02); font-size: .89rem; color: var(--txt); transition: border-color .2s; width: 100%; } .form-field input:focus, .form-field textarea:focus { border-color: var(--amber); } .form-submit { width: 100%; padding: 17px; border-radius: 100px; background: var(--amber); color: #fff; font-size: .95rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; transition: transform .2s, box-shadow .25s; box-shadow: 0 6px 22px rgba(174,90,50,.3); } .form-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(174,90,50,.42); } .form-note { font-family: 'Space Grotesk', monospace; font-size: .62rem; color: var(--txt3); text-align: center; margin-top: 11px; letter-spacing: .04em; } /* ═══ CAMPAIGN BAR ═══ */ .cc-bar-wrap { height: 8px; background: rgba(34,55,82,.08); border-radius: 100px; overflow: hidden; margin-bottom: 10px; } .cc-bar { height: 100%; width: 0%; background: var(--grad); border-radius: 100px; transition: width 1.9s cubic-bezier(.22,1,.36,1); position: relative; } .cc-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: shim 2.6s infinite; } @keyframes shim { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ═══ FAQ ═══ */ .faq-item { border-bottom: 1px solid var(--line); } .faq-btn { width: 100%; text-align: left; background: none; font-size: .88rem; font-weight: 600; color: var(--txt); display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 17px 0; } .faq-ic { color: var(--amber); font-size: 1.1rem; transition: transform .25s; flex-shrink: 0; } .faq-btn.open .faq-ic { transform: rotate(45deg); } .faq-ans { font-size: .84rem; color: var(--txt2); line-height: 1.8; padding-bottom: 17px; display: none; font-weight: 300; } .faq-ans.open { display: block; } /* ═══ WHATSAPP ═══ */ .wa-cta { display: flex; gap: 13px; align-items: center; padding: 15px 17px; background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.25); border-radius: 17px; transition: transform .2s, border-color .2s; } .wa-cta:hover { transform: translateY(-2px); border-color: rgba(34,197,94,.5); } .wa-ic { width: 38px; height: 38px; border-radius: 50%; background: #22c55e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wa-t { font-size: .84rem; font-weight: 700; color: #15803d; } .wa-s { font-family: 'Space Grotesk', monospace; font-size: .66rem; color: rgba(21,128,61,.65); margin-top: 2px; } /* ═══ FLOATING DONATE ═══ */ .float-donate { position: fixed; bottom: 22px; right: 22px; z-index: 90; display: flex; align-items: center; gap: 8px; background: var(--amber); color: #fff; font-size: .84rem; font-weight: 800; padding: 15px 26px; border-radius: 100px; box-shadow: 0 8px 28px rgba(174,90,50,.4); transition: transform .2s; animation: fIn .6s ease 1.2s both; } .float-donate:hover { transform: translateY(-3px) scale(1.03); } @keyframes fIn { from { transform: translateY(90px); opacity: 0; } to { transform: none; opacity: 1; } } /* ═══ PAGE HERO (inner) ═══ */ .page-hero { padding: 148px 0 76px; position: relative; overflow: hidden; } .page-hero .display { margin: 22px 0 18px; } .page-hero .lead { max-width: 560px; } /* ═══ MODAL ═══ */ .modal-bg { position: fixed; inset: 0; background: rgba(20,16,10,.55); backdrop-filter: blur(8px); z-index: 999; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal-box { background: var(--panel); border: 1px solid var(--line2); border-radius: 24px; padding: 46px 38px; max-width: 400px; width: 100%; text-align: center; box-shadow: 0 30px 80px rgba(20,16,10,.25); } .modal-icon { width: 62px; height: 62px; border-radius: 50%; background: rgba(85,117,94,.12); border: 1px solid rgba(85,117,94,.35); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .modal-h { font-family: 'Libre Baskerville', serif; font-size: 1.9rem; font-weight: 700; color: var(--txt); margin-bottom: 10px; } .modal-p { font-size: .86rem; color: var(--txt2); line-height: 1.8; margin-bottom: 26px; font-weight: 300; } .modal-btn { background: var(--txt); color: #fff; font-weight: 700; font-size: .88rem; padding: 13px 36px; border-radius: 100px; } /* ═══ FOOTER ═══ */ footer { background: var(--bg2); border-top: 1px solid var(--line); padding: 60px 0 0; position: relative; } .footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.4fr; gap: 36px; margin-bottom: 46px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .footer-brand img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; } .footer-brand-n { font-family: 'Libre Baskerville', serif; font-size: 1.02rem; font-weight: 700; color: var(--txt); } .footer-brand-s { font-family: 'Space Grotesk', monospace; font-size: .5rem; color: var(--txt3); letter-spacing: .22em; text-transform: uppercase; margin-top: 3px; } .footer-desc { font-size: .78rem; color: var(--txt3); line-height: 1.9; max-width: 250px; font-weight: 300; } .footer-col h4 { font-family: 'Space Grotesk', monospace; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--txt3); margin-bottom: 15px; } .footer-col a, .footer-col span { display: block; font-size: .8rem; color: var(--txt2); margin-bottom: 10px; transition: color .2s; font-weight: 300; } .footer-col a:hover { color: var(--amber); } .footer-socials { display: flex; gap: 8px; margin-top: 16px; } .footer-social { width: 34px; height: 34px; border-radius: 10px; background: rgba(34,55,82,.05); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--txt3); transition: all .2s; } .footer-social:hover { color: var(--amber); border-color: rgba(174,90,50,.4); } .footer-bottom { border-top: 1px solid var(--line); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .footer-copy { font-family: 'Space Grotesk', monospace; font-size: .62rem; color: var(--txt3); letter-spacing: .04em; } .footer-leg { display: flex; gap: 18px; } .footer-leg a { font-family: 'Space Grotesk', monospace; font-size: .6rem; color: var(--txt3); transition: color .2s; } .footer-leg a:hover { color: var(--txt2); } /* ═══ RESPONSIVE ═══ */ @media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .section { padding: 80px 0; } } @media (max-width: 768px) { .wrap{ width:100%; max-width:100%; padding:0 16px; box-sizing:border-box; } .nav-inner{ width:100%; max-width:100%; padding:0 16px; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; } .nav-links { display: none; } .nav-ham { display: flex; } .nav-brand{ flex:1; min-width:0; } .nav-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav-ham{ display:flex; flex-shrink:0; margin-left:12px; } .bento { grid-auto-rows: 150px; gap: 9px; } .form-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 26px; } .float-donate { padding: 13px 21px; font-size: .78rem; bottom: 16px; right: 16px; } .section { padding: 64px 0; } .d-amounts { grid-template-columns: repeat(2, 1fr); } .page-hero { padding: 150px 0 60px; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; } .b-tall, .b-wide { grid-row: auto !important; grid-column: auto !important; } .b-cell { min-height: 160px; } .b-cell.b-stat { min-height: auto !important; padding: 24px !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } html, body{ overflow-x:hidden; width:100%; max-width:100%; } *, *::before, *::after{ box-sizing:border-box; }