/* * The home page, on top of legal.css. * * Colour does the work here. The legal pages are deliberately plain because * they are documents; this page has about four seconds to say "this is warm, * it is for families and classrooms, and it is not a real bank", and a wall of * black text on white says none of that. * * Each audience gets its own colour and its own illustrated scene, so the * three of them read as three different rooms rather than three paragraphs. * * The artwork is inline SVG rather than photography: nothing to fetch, nothing * to go stale in a CDN, no licence to keep track of, and it stays sharp at any * size. Swapping in real photos is a matter of replacing each `.scene` with an * -- the layout does not care which it is. * * The *large* splash artwork stays desktop-only, as originally asked. The * small per-card scenes are a few hundred bytes each and appear everywhere, * because a phone screen is exactly where a bland page looks worst. */ :root { --sky: #e0efff; --sky-deep: #1d4ed8; --teal: #0f766e; --teal-soft: #d5f2ee; /* A darker teal for text on the light tint. --teal is picked for the gradient and does not have the contrast for small type. */ --teal-ink: #115e59; --amber: #b45309; --amber-soft: #fef3c7; --rose: #be123c; --rose-soft: #ffe4e9; --violet: #6d28d9; --violet-soft: #ede9fe; --leaf: #047857; --leaf-soft: #d9f5e6; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { /* Tints go dark and desaturated; the ink on them goes light. The pairing has to be redefined together or the cards lose contrast. */ --sky: #17243d; --sky-deep: #93b4fd; --teal: #5eead4; --teal-soft: #0f2e2b; --teal-ink: #5eead4; --amber: #fcd34d; --amber-soft: #33270a; --rose: #fda4af; --rose-soft: #3b1119; --violet: #c4b5fd; --violet-soft: #241a45; --leaf: #6ee7b7; --leaf-soft: #0a2b1e; } } .home main { /* Wider than a legal document: this page has two-column sections. */ max-width: 66rem; padding-top: 0; } .bar nav { display: flex; align-items: center; gap: 1.25rem; } /* Navigation links other than the button are noise on a phone; the button is the only thing anybody taps up there. */ @media (max-width: 46rem) { .bar nav a:not(.button-link) { display: none; } } /* * `.bar nav a` in legal.css is three selectors deep, so a bare `.button-link` * loses to it however late it is loaded — which left the header button with * muted grey text on a blue ground. Matched at the same depth so the white * wins on specificity rather than on load order. */ .button, .bar nav a.button-link { display: inline-block; background: var(--brand); color: #fff; border-radius: 10px; padding: 0.75rem 1.25rem; font-weight: 600; text-decoration: none; line-height: 1.2; } .bar nav a.button-link { padding: 0.5rem 0.9rem; font-size: 1rem; } .button:hover, .bar nav a.button-link:hover { filter: brightness(1.08); color: #fff; } .button.ghost { background: transparent; color: var(--brand); border: 1px solid var(--borderStrong, var(--border)); } /* ------------------------------------------------------------------ hero */ .hero { padding: 3.5rem 0 3rem; } /* * The tinted ground behind the hero. * * Painted as the body's own background rather than a full-bleed * pseudo-element. The pseudo-element version used `inset: 0 -50vw` to escape * the measure, which reaches past the viewport and gave the whole page a * horizontal scrollbar -- and hiding that overflow would have clipped the * tint back to the column it was trying to escape. A background on * spans the full width by definition and cannot overflow anything. */ body.home { background-color: var(--surface, #fff); background-image: radial-gradient(60rem 30rem at 18% -6rem, var(--sky) 0%, transparent 70%), radial-gradient(50rem 26rem at 88% 6rem, var(--teal-soft) 0%, transparent 70%); background-repeat: no-repeat; /* Only behind the hero; the rest of the page is plain. */ background-size: 100% 38rem; background-position: top center; } h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.02em; } /* One coloured phrase in the headline. Any more and it stops being emphasis. */ h1 .accent { color: var(--sky-deep); } .lede { font-size: 1.2rem; color: var(--ink-muted); max-width: 34rem; } .lede.centered { margin-left: auto; margin-right: auto; text-align: center; } .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0.75rem; } .fineprint { font-size: 0.95rem; color: var(--ink-muted); } .fineprint.centered { text-align: center; } /* * The large artwork exists only from this width up. Below it the element is * not rendered at all, so the hero is one column and nothing big is painted * on a phone. */ .hero-art, .feature-art { display: none; } @media (min-width: 60rem) { .hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3rem; } .hero-art, .feature-art { display: block; } .hero-art svg, .feature-art svg { width: 100%; height: auto; } .feature { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; } /* Artwork on the left instead, so consecutive feature blocks alternate rather than marching down one side of the page. */ .feature.reversed { grid-template-columns: 1fr 1.1fr; } .feature.reversed .feature-copy { order: 2; } .feature.reversed .feature-art { order: 1; } } /* --------------------------------------------------------- audience cards */ .audiences { display: grid; gap: 1.25rem; grid-template-columns: 1fr; padding: 3rem 0 1rem; } /* Two up on a tablet, four across on a wide screen. Three columns with four cards leaves one stranded on its own row. */ @media (min-width: 40rem) { .audiences { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (min-width: 66rem) { .audiences { grid-template-columns: repeat(4, 1fr); } } .audience { border-radius: 18px; padding: 1.5rem 1.5rem 1.25rem; /* Each card carries its own tint and ink, set per-card below. */ background: var(--tint); border: 1px solid transparent; } .audience.family { --tint: var(--amber-soft); --pen: var(--amber); } .audience.classroom { --tint: var(--sky); --pen: var(--sky-deep); } .audience.club { --tint: var(--violet-soft); --pen: var(--violet); } .audience.shop { --tint: var(--teal-soft); --pen: var(--teal-ink); } .audience h3 { margin: 0.85rem 0 0.35rem; font-size: 1.15rem; color: var(--pen); } .audience p { margin: 0; color: var(--ink); font-size: 1rem; } /* The small illustrated scene at the top of each card. Unlike the hero artwork this is cheap enough to show everywhere. */ .scene { display: block; width: 100%; height: auto; border-radius: 12px; } /* ----------------------------------------------------------------- steps */ .steps { padding: 3.5rem 0 1rem; } .steps ol { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.75rem; } @media (min-width: 46rem) { .steps ol { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } } .steps li { counter-increment: step; margin: 0; } .steps li h3 { margin: 0.5rem 0 0.35rem; font-size: 1.1rem; } .steps li p { margin: 0; color: var(--ink-muted); font-size: 1rem; } .steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--sky-deep); color: #fff; font-weight: 700; font-size: 1rem; } /* Each step takes the colour of the card above it, so the eye carries the three audiences down into the three steps. */ .steps li:nth-child(1)::before { background: var(--amber); } .steps li:nth-child(2)::before { background: var(--sky-deep); } .steps li:nth-child(3)::before { background: var(--violet); } /* --------------------------------------------------------------- feature */ .feature { padding: 3.5rem 0; margin: 2rem 0; } .feature-copy p { color: var(--ink-muted); } .feature-copy h2 { margin-top: 0; } /* A short coloured rule instead of a border, to break the section without drawing a box around it. Each section takes its own colour. */ .feature-copy h2::after { content: ''; display: block; width: 3rem; height: 4px; border-radius: 2px; background: var(--leaf); margin-top: 0.75rem; } .feature.reversed .feature-copy h2::after { background: var(--violet); } /* --------------------------------------------------------------- support */ /* * The donation section. * * Set on a warm tint rather than the brand blue, and placed above the closing * call to action rather than at the end: the last thing on the page should be * "open the app", not "give me money". Somebody who has read this far is * deciding whether to try the product, and an ask is a poor final word. */ .support { padding: 2.5rem 1.75rem; margin: 2rem 0 1rem; border-radius: 20px; background: var(--amber-soft); border: 1px solid transparent; } .support h2 { margin-top: 0; color: var(--amber); } .support p { max-width: 44rem; } .support-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 1.25rem; } /* On the amber tint the ghost button's default border is nearly invisible. */ .support .button.ghost { background: rgba(255, 255, 255, 0.65); border-color: var(--amber); color: var(--amber); } .support .fineprint { max-width: 44rem; margin-bottom: 0; } /* ------------------------------------------------------------------- cta */ .cta { text-align: center; padding: 3rem 1.5rem 3.25rem; margin: 1rem 0 3rem; border-radius: 20px; background: linear-gradient(135deg, var(--sky-deep), var(--teal)); } /* The band is dark in both themes, so its text is set explicitly rather than inherited from a palette that flips. */ .cta h2, .cta p { color: #fff; } .cta h2 { margin-top: 0; margin-bottom: 0.5rem; } .cta p { opacity: 0.9; margin-bottom: 1.5rem; } .cta .button { background: #fff; color: var(--sky-deep); } .cta .button:hover { color: var(--sky-deep); } /* Dark mode turns --sky-deep into a pale blue, which would be invisible on white. Pin the band's own colours instead of deriving them. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .cta { background: linear-gradient(135deg, #1e3a8a, #115e59); } :root:not([data-theme='light']) .cta .button { color: #1e3a8a; } }