/* Reset & base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Layout: a 1160px content column with a 24px gutter either side. */ :root { --contentMax: 1160px; --gutter: 24px; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; overflow-x: hidden; font-family: 'Nunito', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; background-image: var(--bg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; color: var(--pageInk); transition: background-color .3s ease, color .3s ease; } h1, h2, p { margin: 0; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Focus & hover -------------------------------------------------------- */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Theme tokens ---------------------------------------------------------- Every per-theme value lives here, keyed by [data-theme]. Set on this drives the whole page; set locally on a control (see the theme switcher and theme cards) it scopes just that element's subtree, so a card can preview a theme's colours without touching the active one. */ :root, [data-theme="tradie"] { --bg: linear-gradient(180deg,#F6F4F1 0%,#EFEBE6 100%); --pageInk:#1E1B18; --pageMuted:#5E5750; --pageLine:#DDD7CF; --pill:#E8E3DD; --surface:#FFFFFF; --ink:#1E1B18; --muted:#5E5750; --line:#E6E1DB; --soft:#F3E6E8; --accent:#7A1F2B; --accentInk:#FFFFFF; --hero:#7A1F2B; --heroInk:#FFFFFF; --heroSub:#F1D9DC; --ctaBg:#FFFFFF; --ctaInk:#7A1F2B; --brandInk:#7A1F2B; --logoCase:#7A1F2B; } [data-theme="island"] { --bg: linear-gradient(180deg,#7FD0EE 0%,#BFE7F6 45%,#E6EEDD 100%); --pageInk:#123A4A; --pageMuted:#2F5566; --pageLine:#9DD2E6; --pill:#A9DDEE; --surface:#FCF8EE; --ink:#3A2414; --muted:#6B5440; --line:#EBDDBE; --soft:#D6F0F8; --accent:#D9472B; --accentInk:#FFFFFF; --hero:#1FA3C2; --heroInk:#0F3444; --heroSub:#0F3444; --ctaBg:#FCF8EE; --ctaInk:#123A4A; --brandInk:#123A4A; --logoCase:#7A4A26; } [data-theme="takeaway"] { --bg: linear-gradient(180deg,#FFC93D 0%,#FFE08A 40%,#FFF4DE 100%); --pageInk:#3B1A0C; --pageMuted:#6A3E22; --pageLine:#EFC25A; --pill:#F6C95A; --surface:#FFFAF0; --ink:#3B1A0C; --muted:#6E4A33; --line:#F0D7A8; --soft:#FDEBC8; --accent:#C8231B; --accentInk:#FFFFFF; --hero:#B8652B; --heroInk:#FFF4DC; --heroSub:#FFE3B0; --ctaBg:#FFFAF0; --ctaInk:#C8231B; --brandInk:#5A230E; --logoCase:#C8231B; } [data-theme="space"] { --bg: radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,transparent 51%), radial-gradient(1.5px 1.5px at 78% 9%,#fff 50%,transparent 51%), radial-gradient(2px 2px at 44% 32%,#C3C7E8 50%,transparent 51%), radial-gradient(1.5px 1.5px at 90% 46%,#fff 50%,transparent 51%), radial-gradient(1.5px 1.5px at 22% 64%,#C3C7E8 50%,transparent 51%), radial-gradient(2px 2px at 64% 78%,#fff 50%,transparent 51%), radial-gradient(1.5px 1.5px at 8% 90%,#fff 50%,transparent 51%), linear-gradient(180deg,#0E1130 0%,#1B1F4B 50%,#262A5E 100%); --pageInk:#FFFFFF; --pageMuted:#C3C7E8; --pageLine:#2D3266; --pill:#E6E8F5; --surface:#ECEEF8; --ink:#1C1E3F; --muted:#4E5278; --line:#CDD1EA; --soft:#DADFF2; --accent:#E9542B; --accentInk:#FFFFFF; --hero:#232A66; --heroInk:#FFFFFF; --heroSub:#C3C7E8; --ctaBg:#E9542B; --ctaInk:#FFFFFF; --brandInk:#FFFFFF; --logoCase:#E9542B; } /* Fun-theme banner overlay text: font, size, position and colour, all per theme so the component rules below never name a theme themselves. */ [data-theme="island"], [data-theme="takeaway"] { --bannerTextLeft: 5cqw; --bannerTextTop: 2.78cqw; --bannerTitleFont: 'Pacifico', cursive; --bannerTitleWeight: 400; --bannerTitleSize: clamp(18px, 8.3cqw, 40px); --bannerTitleLine: 1.2; --bannerTaglineFont: 'Fredoka', sans-serif; --bannerTaglineWeight: 600; --bannerTaglineSize: clamp(9px, 3.05cqw, 13px); --bannerTaglineSpacing: clamp(0.4px, 0.56cqw, 2px); } [data-theme="island"] { --bannerTitleColor: #0B4F66; --bannerTaglineColor: #1D6F86; --bannerTaglineMarginTop: -0.3cqw; } [data-theme="takeaway"] { --bannerTitleColor: #5C1A0E; --bannerTaglineColor: #8A3A16; --bannerTaglineMarginTop: 0.3cqw; } [data-theme="space"] { --bannerTextLeft: 5cqw; --bannerTextTop: 6.11cqw; --bannerTitleFont: 'Michroma', sans-serif; --bannerTitleWeight: 400; --bannerTitleSize: clamp(14px, 7.22cqw, 32px); --bannerTitleLine: 1.19; --bannerTitleColor: #F1F2FF; --bannerTaglineFont: 'Michroma', sans-serif; --bannerTaglineWeight: 400; --bannerTaglineSize: clamp(7px, 2.36cqw, 11px); --bannerTaglineSpacing: clamp(0.3px, 0.28cqw, 1px); --bannerTaglineColor: #B9BEE8; --bannerTaglineMarginTop: 1.67cqw; } /* Top bar ------------------------------------------------------------ */ .site-header { max-width: calc(var(--contentMax) + 2 * var(--gutter)); margin: 0 auto; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { display: block; flex-shrink: 0; } .brand-word { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: 0.04em; color: var(--brandInk); } .theme-switch { display: flex; align-items: center; gap: 10px; } .theme-switch-label { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--pageMuted); } .theme-pill { display: flex; gap: 2px; background: var(--pill); border-radius: 999px; padding: 4px; } .pill-btn { border: none; border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 14px; cursor: pointer; background: transparent; color: #1E1B18; transition: background-color .15s ease; } .pill-btn:hover { background: rgba(30, 27, 24, 0.08); } .pill-btn[aria-pressed="true"] { background: var(--accent); color: var(--accentInk); } .pill-btn[aria-pressed="true"]:hover { filter: brightness(0.94); } /* Main / sections ------------------------------------------------------ */ main { max-width: calc(var(--contentMax) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 40px; display: flex; flex-direction: column; gap: 96px; } .eyebrow { font-size: 13px; font-weight: 900; letter-spacing: 0.14em; color: var(--accent); } .section-intro { display: flex; flex-direction: column; gap: 10px; max-width: 640px; } .section-intro h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; font-weight: 900; text-wrap: balance; } /* Hero ------------------------------------------------------------------ */ .hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; padding-top: 40px; } .hero-copy { display: flex; flex-direction: column; gap: 24px; } .eyebrow-pill { align-self: flex-start; background: var(--surface); color: var(--accent); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 800; } .hero-copy h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; font-weight: 900; letter-spacing: -0.02em; text-wrap: balance; } .lead { font-size: 20px; line-height: 1.5; color: var(--pageMuted); max-width: 520px; text-wrap: pretty; } .get { display: flex; flex-direction: column; gap: 12px; max-width: 520px; } .cta-primary { background: var(--accent); color: var(--accentInk); border-radius: 14px; padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: filter .15s ease, transform .15s ease; } .cta-primary:hover { filter: brightness(0.92); transform: translateY(-2px); } .cta-primary-text { display: flex; flex-direction: column; gap: 2px; } .cta-primary-title { font-weight: 900; font-size: 18px; } .cta-primary-sub { font-size: 14px; font-weight: 600; opacity: 0.85; } .cta-arrow { font-size: 22px; font-weight: 900; } .get-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .option-card { border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } a.option-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } a.option-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(30, 20, 10, 0.35); } a.option-card.ua-match { border-color: var(--accent); box-shadow: 0 10px 24px -14px rgba(30, 20, 10, 0.45); } .option-card-dashed { background: transparent; color: var(--pageMuted); border: 1px dashed var(--pageLine); } .option-card-head { display: flex; align-items: center; gap: 8px; } .option-card-title { font-weight: 900; font-size: 17px; } .option-card-title-static { color: var(--pageInk); } .option-card-sub { font-size: 14px; color: var(--muted); } .option-card-dashed .option-card-sub { color: inherit; } .badge { font-size: 11px; font-weight: 900; letter-spacing: 0.1em; border-radius: 999px; padding: 3px 8px; } .badge-fill { background: var(--soft); color: var(--accent); } .badge-outline { border: 1px solid var(--pageLine); padding: 2px 8px; } .android-note { background: var(--surface); border-radius: 14px; padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); } .android-note-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #E2AE22; color: #1E1B18; font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; } .android-note-text { font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } .android-note-text strong { color: var(--ink); } /* Phone preview card ----------------------------------------------------- */ .phone-card { background: var(--surface); border-radius: 28px; padding: 14px; box-shadow: 0 30px 60px -30px rgba(40, 20, 10, 0.35); display: flex; flex-direction: column; gap: 12px; max-width: 460px; justify-self: center; width: 100%; } .phone-banner { border-radius: 18px; overflow: hidden; } .banner-variant { display: none; width: 100%; } :root:not([data-theme]) .banner-tradie, :root[data-theme="tradie"] .banner-tradie { display: flex; } :root[data-theme="island"] .banner-variant[data-variant="island"] { display: block; } :root[data-theme="takeaway"] .banner-variant[data-variant="takeaway"] { display: block; } :root[data-theme="space"] .banner-variant[data-variant="space"] { display: block; } .banner-frame { position: relative; width: 100%; aspect-ratio: 2.25 / 1; overflow: hidden; container-type: inline-size; box-sizing: border-box; } .banner-tradie { flex-direction: column; border: 1px solid var(--line); box-sizing: border-box; } .banner-tradie-top { background: #FFFFFF; padding: 16px 18px; display: flex; align-items: center; gap: 12px; } .banner-tradie-wordblock { display: flex; flex-direction: column; line-height: 1.1; } .banner-tradie-word { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.04em; color: #7A1F2B; } .banner-tradie-tagline { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 13px; color: #5E5750; } .banner-tradie-band { background: #7A1F2B; padding: 14px; text-align: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.04em; color: #FFFFFF; background-image: linear-gradient(170deg, transparent 78%, #5C1520 78%, #5C1520 100%); } .banner-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; } .banner-fun-text { position: absolute; left: var(--bannerTextLeft); top: var(--bannerTextTop); display: flex; flex-direction: column; } .banner-fun-title { margin: 0; font-family: var(--bannerTitleFont); font-weight: var(--bannerTitleWeight); font-size: var(--bannerTitleSize); line-height: var(--bannerTitleLine); color: var(--bannerTitleColor); } .banner-fun-tagline { margin: 0; margin-top: var(--bannerTaglineMarginTop); font-family: var(--bannerTaglineFont); font-weight: var(--bannerTaglineWeight); font-size: var(--bannerTaglineSize); letter-spacing: var(--bannerTaglineSpacing); color: var(--bannerTaglineColor); } .tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tool-tile { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 2px; } .tool-tile-title { font-weight: 900; font-size: 16px; color: var(--ink); } .tool-tile-sub { font-size: 13px; color: var(--muted); } .result-strip { background: var(--soft); border-radius: 14px; padding: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .result-label { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); } .result-value { font-size: 30px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; } .result-unit { font-size: 16px; color: var(--muted); } /* What it handles -------------------------------------------------------- */ .feature-section { display: flex; flex-direction: column; gap: 28px; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; } .feature-card { background: var(--surface); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 16px; } .feature-card-title { font-size: 22px; font-weight: 900; color: var(--ink); } .feature-card-intro { font-size: 16px; line-height: 1.5; color: var(--muted); } .feature-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .feature-row { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; } .feature-row:last-child { border-bottom: none; } .feature-row-name { font-weight: 800; color: var(--ink); } .feature-row-desc { color: var(--muted); font-size: 15px; text-align: right; } /* How it works ------------------------------------------------------------ */ .how-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; align-items: start; } .steps { display: flex; flex-direction: column; gap: 14px; grid-column: span 2; } .step { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--pageLine); } .step:last-child { border-bottom: none; } .step-num { font-size: 40px; font-weight: 900; line-height: 1; color: var(--accent); min-width: 48px; } .step-body { display: flex; flex-direction: column; gap: 4px; } .step-title { font-size: 21px; font-weight: 900; } .step-desc { font-size: 17px; line-height: 1.5; color: var(--pageMuted); } /* Themes ------------------------------------------------------------------ */ .themes-section { background: var(--surface); border-radius: 28px; padding: clamp(28px, 5vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; align-items: center; } .themes-intro { display: flex; flex-direction: column; gap: 12px; } .themes-intro h2 { font-size: clamp(28px, 3.6vw, 38px); line-height: 1.1; font-weight: 900; color: var(--ink); text-wrap: balance; } .themes-intro p { font-size: 17px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } .theme-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .theme-card { background: var(--surface); border: 3px solid transparent; border-radius: 18px; padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-align: left; font-family: inherit; transition: transform .15s ease, box-shadow .15s ease; } .theme-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(20, 15, 10, 0.35); } .theme-card[aria-pressed="true"] { border-color: var(--accent); } .theme-card-art { width: 100%; } .theme-card-art-tradie { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: #FFFFFF; border-bottom: 10px solid var(--accent); } .theme-card-art-word { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; color: var(--brandInk); } .theme-card-label { padding: 10px 14px; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; color: var(--ink); } /* FAQ ----------------------------------------------------------------------- */ .faq-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; align-items: start; } .faq-list { display: flex; flex-direction: column; gap: 10px; grid-column: span 2; } .faq-item { background: var(--surface); border-radius: 18px; padding: 0 22px; } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 18px; font-weight: 900; color: var(--ink); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { content: ""; } .faq-item summary:hover { color: var(--accent); } .faq-plus { font-size: 26px; line-height: 1; color: var(--accent); transition: transform .2s ease; flex-shrink: 0; } .faq-item[open] .faq-plus { transform: rotate(45deg); } .faq-item p { padding: 0; margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--muted); } /* Closing CTA ---------------------------------------------------------------- */ .cta-section { background: var(--hero); border-radius: 28px; padding: clamp(32px, 6vw, 64px); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } .cta-section h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; font-weight: 900; color: var(--heroInk); text-wrap: balance; } .cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .cta-solid, .cta-outline { border-radius: 14px; padding: 16px 28px; font-weight: 900; font-size: 17px; transition: filter .15s ease, transform .15s ease, background-color .15s ease; } .cta-solid { background: var(--ctaBg); color: var(--ctaInk); } .cta-solid:hover { filter: brightness(0.94); transform: translateY(-2px); } .cta-outline { background: transparent; color: var(--heroInk); border: 2px solid var(--heroSub); } .cta-outline:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .cta-note { font-size: 15px; font-weight: 700; color: var(--heroSub); } /* Footer ---------------------------------------------------------------------- */ .site-footer { max-width: calc(var(--contentMax) + 2 * var(--gutter)); margin: 0 auto; padding: 24px var(--gutter) 48px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--pageMuted); border-top: 1px solid var(--pageLine); }