Stylesheet

A quick-reference guide to your website's styling settings and features.

Colors Used:

Dark Gray #333333

Light Gray #CCCCCC

Accent Yellow #FFC829

Accent Blue #4872AE

Accent Red #DA1A00

Accessible Color Combinations:

accessible color palette

Photo Specs:

Use these throughout your site

Half Page Photos: 1080 px x 720 px OR
560 px x 530 px. Half page photos have 10px white border around photo, with slight shadow behind. Copy style from the example to the right. Add «photo-effect» to the CSS Class in the advanced tab to add the photo color effect on hover.

Blog and Event Featured Images: 1080 px x 720 px

Smaller on-page photos: 432 px x 243 px

Content Styling:

All font styles throughout are weight variations of "Raleway"

This is a primary headline. Use this for page openings.

This is a secondary heading. Use this for page subtitles.

Third Level Bold Headings

This style is called "Bold Body Text Headlines." Use this for Body Copy Headings.

Paragraph text is magical. In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. In fact, at the high risk of stating the obvious, you are reading one now.

You can add color to any headline style as well!

By selecting the Heading widget and editing the options under the Style tab, you can add any color to your headline. We recommend sticking to the colors in the Global Color selector, however you can choose any color from the hue selector by clicking inside the color swatch.

Bullets and Lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { // ✅ Seguridad: aceptar solo Donar Online embed if (event.origin !== "https://embed.donaronline.org") return; // ✅ Validación básica if (!event.data || typeof event.data !== "object") return; const { type, data } = event.data; console.log("📩 DonarOnline Event:", type, data); // ✅ Tracking de pasos if (type === "properties:step") { console.log("Paso:", data.step, "-", data.name); updateHeader(data.name); } // ✅ Donación exitosa if (type === "donation:success") { console.log("✅ Donación completada"); // Aquí puedes disparar tracking externo // gtag("event", "conversion", {...}) } } function updateHeader(stepName) { const titles = { donation: "Selecciona tu aporte 💙", donor: "Completa tus datos 👤", payment_method: "Elige tu método de pago 💳", thanks: "Gracias por apoyar a las familias 💛" }; const el = document.getElementById("donation-title"); if (el) { el.innerText = titles[stepName] || "Fundación Casa Ronald"; } }