/*------------------------------------------------------------------------- # Variables -------------------------------------------------------------------------*/ :root { --bg: #ffffff; --bg-2: #ffffff; --fg: #06233D; /* Brand navy (logo text) */ --muted: #637089; /* Subtle text on white */ --accent: #69E5D8; /* Logo teal */ --accent-2: #DC8EB7; /* Logo pink */ --card: #ffffff; --border: #E5E7EB; /* Light gray on white */ --focus: #7dd3fc; --maxw: 1000px; } /*------------------------------------------------------------------------- # Base / Reset -------------------------------------------------------------------------*/ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; line-height: 1.6; color: var(--fg); background: #ffffff; background: linear-gradient(270deg,rgba(220, 142, 183, 0.07) 0%, rgba(105, 229, 216, 0.07) 100%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; /* Swap path to your file location */ } /*------------------------------------------------------------------------- # Animated Background Gradient — Seamless & Soft # Usage: … -------------------------------------------------------------------------*/ :root{ --pink-a: rgba(220, 142, 183, 0.08); /* from logo pink */ --teal-a: rgba(105, 229, 216, 0.08); /* from logo teal */ } /*------------------------------------------------------------------------- # Animated Background Gradient (subtle, slower) — Privaicy colors -------------------------------------------------------------------------*/ .bg-gradient-animated { background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(220, 142, 183, 0.08), rgba(105, 229, 216, 0.08), rgba(220, 142, 183, 0.06), rgba(105, 229, 216, 0.06) ); background-size: 600% 600%; animation: gradient 48s ease-in-out infinite; min-height: 100vh; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce){ .bg-gradient-animated { animation: none; } } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /*------------------------------------------------------------------------- # Layout Wrappers -------------------------------------------------------------------------*/ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 24px; } /*------------------------------------------------------------------------- # Header -------------------------------------------------------------------------*/ header { display: flex; align-items: center; justify-content: center; padding: 24px 0; border-bottom: 1px solid var(--border); } /*------------------------------------------------------------------------- # Logo -------------------------------------------------------------------------*/ .logo { display: block; margin: 0 auto; max-width: 400px; } .logo img { width: 100%; height: auto; display: block; min-width: 300px; } /*------------------------------------------------------------------------- # Hero -------------------------------------------------------------------------*/ .hero { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: 48px 0 28px; text-align: center; } h1 { margin: 30px 0 0 0; /*font-size: clamp(2rem, 3.2vw + 1rem, 3.5rem);*/ font-size: 32px; line-height: 1.15; font-weight: 700; } h1 span { white-space: nowrap; } .tagline { /*font-size: clamp(1.05rem, .5vw + 1rem, 1.25rem);*/ font-size: 16px; color: var(--muted); margin: 30px 0; text-wrap-style: balance; } /*------------------------------------------------------------------------- # Hero Card -------------------------------------------------------------------------*/ .hero-card { position: relative; margin: 0 auto; width: min(760px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: 0 8px 30px rgba(2, 35, 62, 0.06); backdrop-filter: blur(2px); } .teaser { color: var(--muted); margin: 0 auto 8px; max-width: 58ch; } .cta-label { font-weight: 600; color: var(--muted); margin: 12px 0 0 0; font-size: 21px; } /*------------------------------------------------------------------------- # Form Embed (Brevo) -------------------------------------------------------------------------*/ .form-embed { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; } .brevo-iframe { width: 100%; min-height: 300px; /* adjust after you know your form height */ border: 0; border-radius: 10px; background: transparent; } .hint { font-size: .9rem; color: var(--muted); margin-top: 10px; } .sib-form { padding: 0; } @font-face { font-display: block; font-family: Roboto; src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff") } @font-face { font-display: fallback; font-family: Roboto; font-weight: 600; src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff") } @font-face { font-display: fallback; font-family: Roboto; font-weight: 700; src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff") } #sib-container input:-ms-input-placeholder { text-align: left; font-family: Helvetica, sans-serif; color: #c0ccda; } #sib-container input::placeholder { text-align: left; font-family: Helvetica, sans-serif; color: #c0ccda; } #sib-container textarea::placeholder { text-align: left; font-family: Helvetica, sans-serif; color: #c0ccda; } #sib-container a { text-decoration: underline; color: #2BB2FC; } .sib-form .entry__field { border: 0; border-radius: 6px; -webkit-box-shadow: 0px 0px 19px -1px rgba(0,0,0,0.14); box-shadow: 0px 0px 19px -1px rgba(0,0,0,0.14); } .sib-form .entry__error { padding: 1em 1.5em; } .sib-form-block__button { font-size: 16px!important; } /*------------------------------------------------------------------------- # Buttons -------------------------------------------------------------------------*/ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #04291f; border: none; padding: 12px 18px; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 28px rgba(0,0,0,.12); cursor: pointer; } .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /*------------------------------------------------------------------------- # Success States (DOI) -------------------------------------------------------------------------*/ .thanks { display: none; margin: 28px auto 0; padding: 18px 16px; width: min(720px, 100%); border-radius: 14px; border: 1px solid var(--border); background: var(--card); } .thanks.is-visible { display: flex; flex-direction: column; justify-content: center; margin-top: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 0; } /*------------------------------------------------------------------------- # Confetti Canvas (global overlay) -------------------------------------------------------------------------*/ #confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } /*------------------------------------------------------------------------- # Footer -------------------------------------------------------------------------*/ footer { border-top: 1px solid var(--border); margin-top: 48px; padding: 24px 0 60px; color: #999999; } .footline { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } footer a { color: #999999; } .project-by { text-align: center; margin-top: 8px; font-size: .95rem; } /*------------------------------------------------------------------------- # Accessibility / Motion -------------------------------------------------------------------------*/ @media (prefers-reduced-motion: reduce) { .confetti { display: none !important; } }