/* ========================================================================== fundbuddy.com.au — shared styles Brand tokens live in :root. Critical above-the-fold rules are duplicated inline in each page's ; this file carries everything else. ========================================================================== */ :root { --cream: #FFF9EE; --plum: #4A3B66; --plum-muted: #6B5E85; --lavender: #A99BD8; --peach: #F3B48C; --mint: #8FCBA8; --gold: #F5D77A; --tint-lavender: #EDE8F8; --tint-peach: #FBE9DC; --tint-mint: #E3F2E9; --tint-mist: #ECEAF1; --white: #FFFFFF; --shadow-sm: 0 2px 6px rgba(74, 59, 102, 0.08); --shadow-md: 0 10px 30px rgba(74, 59, 102, 0.10), 0 2px 6px rgba(74, 59, 102, 0.06); --shadow-lg: 0 24px 60px rgba(74, 59, 102, 0.14), 0 6px 16px rgba(74, 59, 102, 0.06); --font-head: "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px; --radius: 20px; --radius-lg: 28px; --measure: 70ch; --wrap: 1120px; } /* ---- Fonts (self-hosted, latin subset) --------------------------------- */ @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/baloo2-600-latin.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); } /* ---- Reset / base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s4); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--cream); color: var(--plum); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, picture, svg { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.1; margin: 0 0 var(--s2); color: var(--plum); letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 2rem + 3.2vw, 4.5rem); } h2 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem); } h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); } p { margin: 0 0 var(--s2); } a { color: var(--plum); text-decoration-color: var(--lavender); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { text-decoration-color: var(--plum); } :focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--lavender); color: var(--plum); } .muted { color: var(--plum-muted); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Skip link ---------------------------------------------------------- */ .skip-link { position: absolute; left: var(--s2); top: -100px; z-index: 100; background: var(--plum); color: var(--cream); padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; } .skip-link:focus { top: var(--s2); } /* ---- Layout ------------------------------------------------------------- */ .wrap { width: min(100% - 2 * var(--s3), var(--wrap)); margin-inline: auto; } @media (min-width: 768px) { .wrap { width: min(100% - 2 * var(--s6), var(--wrap)); } } .section { padding-block: var(--s10); } @media (min-width: 768px) { .section { padding-block: var(--s16); } } /* ---- Header ------------------------------------------------------------- */ .site-header { position: relative; z-index: 5; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 80px; } .wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.01em; color: var(--plum); text-decoration: none; line-height: 1; display: inline-flex; align-items: center; gap: 10px; } .wordmark img { width: 34px; height: 34px; } .site-nav a { font-weight: 500; text-decoration: none; padding: 10px 16px; border-radius: 999px; color: var(--plum); transition: background-color .2s ease; } .site-nav a:hover { background: var(--tint-lavender); } .site-nav a:active { background: var(--lavender); } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 1.1875rem; line-height: 1; color: var(--plum); background: var(--lavender); border: 0; border-radius: 999px; padding: 18px 32px; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(74, 59, 102, 0.16), inset 0 -2px 0 rgba(74, 59, 102, 0.12); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .btn:hover { background: #B5A8E0; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(74, 59, 102, 0.22), inset 0 -2px 0 rgba(74, 59, 102, 0.12); } .btn:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(74, 59, 102, 0.18), inset 0 2px 0 rgba(74, 59, 102, 0.12); background: #9D8FD0; } .btn:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; } .btn--secondary { background: var(--white); box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--tint-lavender); } .btn--secondary:hover { background: var(--tint-lavender); } .btn--secondary:active { background: var(--lavender); } .btn[disabled] { opacity: .7; cursor: progress; transform: none; } /* ---- Hero --------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--s6) var(--s12); background-color: var(--cream); } .hero__bg { position: absolute; inset: 0; z-index: -3; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero::before { /* soften the texture so type stays crisp */ content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(255,249,238,.35) 0%, rgba(255,249,238,.55) 60%, var(--cream) 100%); } .blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); pointer-events: none; } .blob--lavender { width: 44vw; height: 44vw; max-width: 560px; max-height: 560px; right: -8vw; top: -6vw; background: rgba(169,155,216,.55); } .blob--peach { width: 30vw; height: 30vw; max-width: 380px; max-height: 380px; left: -6vw; bottom: 14%; background: rgba(243,180,140,.5); } .blob--mint { width: 24vw; height: 24vw; max-width: 300px; max-height: 300px; right: 18%; bottom: 10%; background: rgba(143,203,168,.45); } .hero__grid { display: grid; gap: var(--s4); align-items: center; } .hero__art { position: relative; margin-inline: auto; width: min(72vw, 400px); aspect-ratio: 1; order: -1; } .hero__art img { width: 100%; height: 100%; } .hero__copy { text-align: center; } .hero__sub { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); color: var(--plum-muted); max-width: 30ch; margin-inline: auto; margin-bottom: var(--s4); } .hero__note { margin-top: var(--s2); font-size: .9375rem; color: var(--plum-muted); } @media (min-width: 900px) { .hero { padding-block: var(--s8) var(--s16); } .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s6); } .hero__copy { text-align: left; order: 1; } .hero__sub { margin-inline: 0; } .hero__art { order: 2; width: min(44vw, 620px); } } @media (prefers-reduced-motion: no-preference) { .float { animation: float 7s ease-in-out infinite; will-change: transform; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-1.2deg); } } } /* ---- Ease strip --------------------------------------------------------- */ .ease { margin-top: calc(-1 * var(--s8)); position: relative; z-index: 2; padding-block: 0 var(--s10); } @media (min-width: 768px) { .ease { margin-top: calc(-1 * var(--s10)); } } .cards { display: grid; gap: var(--s3); list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); gap: var(--s3); } } .card { background: var(--white); border-radius: var(--radius-lg); padding: var(--s4); box-shadow: var(--shadow-md); transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .chip { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: var(--s3); color: var(--plum); } .chip svg { width: 28px; height: 28px; } .chip--lavender { background: var(--tint-lavender); } .chip--peach { background: var(--tint-peach); } .chip--mint { background: var(--tint-mint); } .card h3 { margin-bottom: var(--s1); } .card p { margin: 0; color: var(--plum-muted); } /* ---- Sound familiar (chat) --------------------------------------------- */ .familiar { position: relative; overflow: hidden; } .familiar .wrap { position: relative; } .familiar__intro { text-align: center; max-width: 42ch; margin: 0 auto var(--s8); } .familiar__intro p { color: var(--plum-muted); font-size: 1.125rem; } .thread { display: flex; flex-direction: column; gap: var(--s3); max-width: 760px; margin-inline: auto; list-style: none; padding: 0; } .msg { display: flex; gap: 12px; align-items: flex-end; max-width: 88%; } .msg--them { align-self: flex-start; } .msg--us { align-self: flex-end; flex-direction: row-reverse; } .msg__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .9375rem; color: var(--plum); overflow: hidden; } .msg--us .msg__avatar { background: var(--white); box-shadow: var(--shadow-sm); } .msg--us .msg__avatar img { width: 32px; height: 32px; } .av--peach { background: var(--tint-peach); } .av--mint { background: var(--tint-mint); } .av--mist { background: var(--tint-mist); } .av--lavender { background: var(--tint-lavender); } .bubble { padding: 14px 18px; border-radius: 22px; box-shadow: var(--shadow-sm); font-size: 1.0625rem; line-height: 1.5; } .msg--them .bubble { background: var(--tint-mist); color: var(--plum-muted); border-bottom-left-radius: 6px; } .msg--us .bubble { background: var(--tint-lavender); color: var(--plum); font-weight: 500; border-bottom-right-radius: 6px; } @media (min-width: 768px) { .msg { max-width: 72%; } } /* Split visual */ .split { margin-top: var(--s10); display: grid; gap: var(--s3); align-items: stretch; } @media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s12); } } .panel { border-radius: var(--radius-lg); padding: var(--s4); min-height: 300px; display: flex; flex-direction: column; justify-content: center; } .panel--sheet { background: #F3F1F4; color: #8A8592; box-shadow: inset 0 0 0 1px #E1DDE6; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .75rem; overflow: hidden; /* the fake spreadsheet is decorative — clip it rather than let it spill */ } @media (max-width: 640px) { .panel { padding: var(--s3); min-height: 0; } .panel--sheet { font-size: .625rem; } /* fixed layout + full width makes all five columns share the space and ellipsis the overflow, so nothing is cut off at the right edge */ .sheet { table-layout: fixed; width: 100%; } .sheet th, .sheet td { max-width: none; padding: 5px 4px; } .sheet caption { font-size: .75rem; } .panel--buddy img { width: 140px; height: 140px; } } .sheet { width: 100%; border-collapse: collapse; } .sheet th, .sheet td { border: 1px solid #DCD7E2; padding: 6px 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; } .sheet th { background: #E9E6EE; font-weight: 600; color: #7E7889; } .sheet caption { text-align: left; padding-bottom: 8px; font-family: var(--font-body); font-size: .8125rem; color: #8A8592; } .panel--buddy { background: var(--white); box-shadow: var(--shadow-md); align-items: center; text-align: center; gap: var(--s2); position: relative; overflow: hidden; } .panel--buddy::before { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(closest-side, var(--tint-mint), transparent); z-index: 0; } .panel--buddy > * { position: relative; z-index: 1; } .panel--buddy img { width: 180px; height: 180px; } .safe { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: var(--tint-mint); color: var(--plum); border-radius: 18px; padding: 12px 24px; } .safe b { font-family: var(--font-head); font-size: 2rem; line-height: 1; } .safe span { font-size: .8125rem; font-weight: 500; } .split__caption { text-align: center; max-width: 48ch; margin: var(--s8) auto 0; } .split__caption h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); } .split__caption p { color: var(--plum-muted); } /* ---- Signup ------------------------------------------------------------- */ .signup { position: relative; overflow: hidden; } .signup__card { background: var(--white); border-radius: 36px; box-shadow: var(--shadow-lg); padding: var(--s5) var(--s3); display: grid; gap: var(--s4); align-items: center; position: relative; overflow: hidden; } .signup__card::after { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; top: -200px; background: radial-gradient(closest-side, var(--tint-peach), transparent); z-index: 0; } .signup__card > * { position: relative; z-index: 1; } .signup__art { width: min(60vw, 260px); margin-inline: auto; aspect-ratio: 1; } @media (min-width: 900px) { .signup__art { width: 300px; } } .signup__art img { width: 100%; height: 100%; } .signup__copy { text-align: center; } .signup__copy h2 { margin-bottom: var(--s1); } .signup__copy > p { color: var(--plum-muted); margin-bottom: var(--s3); } .form { display: grid; gap: var(--s2); } .form label { font-weight: 600; font-size: .9375rem; } .form__row { display: grid; gap: 12px; } .input { width: 100%; font: inherit; font-size: 1.0625rem; color: var(--plum); background: var(--cream); border: 2px solid var(--tint-lavender); border-radius: 999px; padding: 16px 22px; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .input::placeholder { color: #8F86A3; } .input:hover { border-color: var(--lavender); } .input:focus { outline: none; border-color: var(--plum); background: var(--white); box-shadow: 0 0 0 4px var(--tint-lavender); } .input[aria-invalid="true"] { border-color: #C2582F; } .form__hint { font-size: .875rem; color: var(--plum-muted); margin: 0; } .form__msg { font-weight: 500; margin: 0; } .form__msg--error { color: #8A3A1F; background: var(--tint-peach); border-radius: 14px; padding: 12px 16px; } .form__msg[hidden] { display: none; } .signup__success { text-align: center; grid-column: 1 / -1; max-width: 46ch; margin-inline: auto; } .signup__success picture { width: min(60vw, 260px); margin: 0 auto var(--s2); } .signup__success img { width: 100%; height: auto; } .signup__success p { font-size: 1.25rem; font-weight: 500; } @media (min-width: 560px) { .form__row { grid-template-columns: 1fr auto; } } @media (min-width: 900px) { .signup__card { grid-template-columns: 300px 1fr; padding: var(--s8); gap: var(--s6); } .signup__copy { text-align: left; } } /* ---- Footer ------------------------------------------------------------- */ .site-footer { padding-block: var(--s8) var(--s6); border-top: 1px solid var(--tint-mist); } .site-footer .wrap { display: grid; gap: var(--s3); } .footer__top { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; } .footer__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; padding: 0; margin: 0; } .footer__nav a { text-decoration: none; font-weight: 500; padding: 6px 0; } .footer__nav a:hover { text-decoration: underline; } .footer__tag { color: var(--plum-muted); margin: 0; } .footer__legal { font-size: .875rem; color: var(--plum-muted); max-width: 70ch; } .footer__legal a { color: var(--plum-muted); } .footer__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .875rem; color: var(--plum-muted); margin: 0; } /* ---- Reveal on scroll (JS-enhanced; static when no JS or reduced motion) */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); } .js .reveal.is-visible { opacity: 1; transform: none; } } /* ---- Document pages (privacy / terms / support) ------------------------- */ .doc-hero { padding-block: var(--s6) var(--s4); } .doc-hero p { color: var(--plum-muted); font-size: 1.125rem; max-width: 60ch; } .doc-hero .meta { font-size: .9375rem; } .doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-bottom: var(--s12); } @media (min-width: 1024px) { .doc-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s10); } } .toc { display: none; } @media (min-width: 1024px) { .toc { display: block; position: sticky; top: var(--s4); align-self: start; } .toc__box { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--s3); } .toc h2 { font-family: var(--font-body); font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--plum-muted); margin-bottom: var(--s2); } .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .toc a { display: block; text-decoration: none; font-size: .9375rem; padding: 6px 10px; border-radius: 10px; color: var(--plum-muted); } .toc a:hover { background: var(--tint-lavender); color: var(--plum); } } .doc { max-width: var(--measure); min-width: 0; } .doc h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-top: var(--s8); scroll-margin-top: var(--s4); } .doc h2:first-of-type { margin-top: 0; } .doc h3 { margin-top: var(--s4); } .doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 var(--s2); } .doc li { margin-bottom: 6px; } .doc li::marker { color: var(--lavender); } .callout { background: var(--white); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow-sm); margin: var(--s3) 0; } .callout--mint { background: var(--tint-mint); box-shadow: none; } .callout--lavender { background: var(--tint-lavender); box-shadow: none; } .callout p:last-child { margin-bottom: 0; } .ph { /* placeholder Andrew must replace */ background: var(--gold); color: var(--plum); font-weight: 600; padding: 2px 8px; border-radius: 8px; outline: 2px dashed var(--plum); outline-offset: 1px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; } .doc table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: .9375rem; } .doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--tint-mist); vertical-align: top; } .doc th { font-weight: 600; background: var(--tint-lavender); } .table-scroll { overflow-x: auto; } /* Support page */ .support-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 var(--s4); } .support-actions .btn { white-space: normal; text-align: center; overflow-wrap: anywhere; } @media (max-width: 480px) { .support-actions .btn { width: 100%; } } .faq { display: grid; gap: var(--s2); } .faq details { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); border-radius: var(--radius); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-body); font-weight: 600; font-size: 1.4rem; color: var(--plum-muted); flex: 0 0 auto; transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { background: var(--tint-lavender); } .faq summary:focus-visible { outline: 3px solid var(--plum); outline-offset: -3px; } .faq .faq__body { padding: 0 22px 20px; color: var(--plum-muted); } .faq .faq__body p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---- Wide tables become stacked cards on phones ------------------------- Below 640px the 4-column provider table cannot fit, so each row becomes a card and each cell is prefixed with its column name from data-label. The content therefore stays self-describing when linearised; above 640px it is an ordinary table with full semantics. */ @media (max-width: 640px) { .table-scroll { overflow-x: visible; } .doc .stack-table, .doc .stack-table thead, .doc .stack-table tbody, .doc .stack-table tr, .doc .stack-table th, .doc .stack-table td { display: block; width: 100%; } .doc .stack-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .doc .stack-table tr { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--s2) var(--s3); margin-bottom: var(--s2); } .doc .stack-table td { border: 0; padding: 6px 0; } .doc .stack-table td + td { border-top: 1px solid var(--tint-mist); padding-top: 10px; margin-top: 4px; } .doc .stack-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-weight: 600; font-size: .8125rem; color: var(--plum-muted); } }