/* Homepage (owner request, 2026-11-03; became the homepage 2026-11-09). Styles for the homepage sections. Everything is scoped to .hp so nothing leaks into the live homepage. Colours follow AGENTS.md: widget tints for product areas, purple text links, pink buttons on ink and purple buttons on light. */ #home2 .hp { --hp-ink: #1E085D; --hp-purple: #4705D0; --hp-pink: #FEBBCC; --hp-text: #1E085D; --hp-muted: #4A4458; } #home2 .hp h2 { text-wrap: balance; } #home2 .hp-eyebrow { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-purple); } #home2 .hp-lead { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--hp-muted); } /* ---------- 1. Manage your life: words on the left stay, cards on the right stack ---------- */ #home2 .hp-life { background: #F4F2ED; padding: 96px 0 72px; } #home2 .hp-life-grid { display: grid; gap: 40px; } #home2 .hp-life-intro h2 { margin: 0; color: var(--hp-ink); } /* A Humble holding a heart for "life" (owner, 2026-11-03). A work section can use the Humble with a briefcase (/public/brand/avatars/humble-workshop.svg) the same way. */ #home2 .hp-title-row { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; } #home2 .hp-title-pic { width: 3.5rem; height: 3.5rem; flex-shrink: 0; } /* small enough that the title stays on two lines */ @media (max-width: 30em) { #home2 .hp-title-pic { width: 3.5rem; height: 3.5rem; } } #home2 .hp-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } #home2 .hp-card { border-radius: 24px; border: 1px solid var(--hp-line); background: var(--hp-tint); box-shadow: 0 -10px 24px -20px rgba(30, 8, 93, .45); scroll-margin-top: 6rem; position: relative; } #home2 .hp-card--tasks { --hp-head: #DBE8C6; --hp-tint: #F3F7EC; --hp-line: #C9DAAE; } #home2 .hp-card--notes { --hp-head: #F3E28A; --hp-tint: #FBF6DD; --hp-line: #E3CF6A; } #home2 .hp-card--time { --hp-head: #FEBBCC; --hp-tint: #FDF1F4; --hp-line: #F2A3B7; } #home2 .hp-card--people { --hp-head: #A8DFF7; --hp-tint: #EDF8FD; --hp-line: #8ACDEB; } #home2 .hp-card--links { --hp-head: #DDD5F3; --hp-tint: #F5F2FC; --hp-line: #C7BBEB; } #home2 .hp-card-head { display: flex; align-items: center; gap: 12px; min-height: 3.5rem; padding: 10px 20px; background: var(--hp-head); border-radius: 23px 23px 0 0; } #home2 .hp-card-num { width: 1.5rem; height: 1.5rem; color: var(--hp-ink); display: grid; place-items: center; flex-shrink: 0; } #home2 .hp-card-num svg { width: 100%; height: 100%; } #home2 .hp-card-head h3 { margin: 0; font-size: 1.5rem; line-height: 1.25; color: var(--hp-ink); } #home2 .hp-card-tag { margin-left: auto; font-size: 0.8125rem; font-weight: 700; color: var(--hp-ink); background: rgba(253, 252, 250, .7); padding: 4px 10px; border-radius: 999px; } #home2 .hp-card-body { padding: 20px; display: grid; gap: 18px; } #home2 .hp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } #home2 .hp-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 1.0625rem; line-height: 1.45; color: var(--hp-text); } #home2 .hp-ticks li span { text-wrap: pretty; } /* no single word left alone on a line */ #home2 .hp-tick { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.1em; color: var(--hp-purple); } #home2 .hp-card-side { display: grid; gap: 14px; } #home2 .hp-card-pic { max-width: 34rem; width: 100%; margin: 0 auto; } #home2 .hp-card--links .hp-card-pic { max-width: 30rem; } #home2 .hp-card-pic .tp-app { box-shadow: 0 16px 32px -24px rgba(30, 8, 93, .5); } /* Stacking on phones and small tablets (same idea as /setup/): each card stops under the menu and the next slides over it, leaving its coloured edge, so you can see which ones you have passed. */ @media (max-width: 56em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-cards { gap: 16px; padding-bottom: 2rem; } #home2 .hp-card { position: sticky; top: calc(4.75rem + var(--i, 0) * 3.25rem); } #home2 .hp-card-head { min-height: 3.25rem; padding: 8px 16px; } #home2 .hp-card-head h3 { font-size: 1.1875rem; } #home2 .hp-card-tag { display: none; } #home2 .hp-card-body { padding: 16px; gap: 14px; } /* Keep each card shorter than the screen, so nothing is hidden under the next card */ #home2 .hp-card-pic { max-height: 14rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); } } /* On computers: the words and the list on the left stay still, and the cards stack on the right. */ @media (min-width: 56.01em) { #home2 .hp-life-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } } /* Every card is cut to end on the same line (42rem from the top of the screen, or just above the bottom of a shorter screen), and the words on the left end on that line too. So nothing is squashed when the section ends: the whole block leaves together. Card i starts at 5.5rem + i x 3.25rem. The stack works on screens 40em tall and up, like the other scroll stories, so it also runs on laptops with display scaling (2026-11-09). */ @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-life { --hp-end: min(42rem, 100vh - 1.5rem); } #home2 .hp-life-intro { position: sticky; top: 7rem; min-height: calc(var(--hp-end) - 7rem); } #home2 .hp-cards { gap: 40vh; padding-bottom: 0; } #home2 .hp-cards::after { content: ""; height: 30vh; } /* lets the last card rest before the block leaves */ #home2 .hp-card { position: sticky; top: calc(5.5rem + var(--i, 0) * 3.25rem); height: calc(var(--hp-end) - 5.5rem - var(--i, 0) * 3.25rem); } #home2 .hp-card-body { align-content: start; } #home2 .hp-card-pic { max-height: calc(var(--hp-end) - 11.5rem - var(--i, 0) * 3.25rem); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent); mask-image: linear-gradient(to bottom, #000 85%, transparent); } #home2 .hp-card--links .hp-card-pic { max-width: 27rem; } } /* ---------- 2. Organise it from anywhere ---------- */ #home2 .hp-anywhere { background: #EEE9FB; padding: 96px 0 0; color: var(--hp-ink); } /* the tools strip at the end gives the bottom space */ #home2 .hp-anywhere .hp-eyebrow { color: var(--hp-purple); } #home2 .hp-anywhere h2 { margin: 0 0 16px; color: var(--hp-ink); } #home2 .hp-anywhere .hp-lead { color: var(--hp-muted); } #home2 .hp-head { max-width: 760px; margin: 0 auto 48px; text-align: center; } /* AI chat mock: plays once when it comes into view; reduced motion and no-JS show the finished chat */ #home2 .hp-chat { background: #FDFCFA; border: 1px solid #E6E1D8; border-radius: 14px; overflow: hidden; font-size: 0.8125rem; } #home2 .hp-chat-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #EEEAE2; font-weight: 700; color: #3D3929; } #home2 .hp-chat-bar img { width: 16px; height: 16px; } #home2 .hp-chat-msgs { padding: 12px; display: grid; gap: 10px; } #home2 .hp-chat-you { justify-self: end; max-width: 85%; background: #EDE9E0; border-radius: 14px 14px 4px 14px; padding: 8px 12px; color: #1E2230; } #home2 .hp-chat-tool { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E2DDF0; border-radius: 999px; padding: 4px 10px 4px 4px; color: #4A4458; font-weight: 600; } #home2 .hp-chat-tool img { width: 18px; height: 18px; border-radius: 5px; } #home2 .hp-chat-ai { max-width: 90%; color: #1E2230; line-height: 1.5; } #home2 .hp-chat-in { margin: 0 12px 12px; border: 1px solid #E6E1D8; border-radius: 12px; padding: 8px 12px; color: #6B665F; } #home2 .hp-chat.is-waiting .hp-chat-msgs > * { opacity: 0; transform: translateY(6px); } #home2 .hp-chat.is-playing .hp-chat-msgs > * { animation: hp-in .4s ease forwards; } #home2 .hp-chat.is-playing .hp-chat-msgs > :nth-child(2) { animation-delay: 1.1s; } #home2 .hp-chat.is-playing .hp-chat-msgs > :nth-child(3) { animation-delay: 2s; } #home2 .hp-chat.is-playing .hp-chat-msgs > :nth-child(4) { animation-delay: 2.9s; } @keyframes hp-in { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #home2 .hp-chat.is-waiting .hp-chat-msgs > * { opacity: 1; transform: none; } } /* Phone mock */ #home2 .hp-phone { width: 12.5rem; margin: 0 auto; border: 7px solid #1E2230; border-radius: 28px; background: #F4F2EC; overflow: hidden; } #home2 .hp-phone-top { height: 18px; display: grid; place-items: center; background: #1E2230; } #home2 .hp-phone-top i { width: 48px; height: 6px; border-radius: 999px; background: #3A3F4D; } #home2 .hp-phone-head { background: #DBE8C6; padding: 8px 10px; font-size: 0.8125rem; font-weight: 800; color: #1E2230; display: flex; justify-content: space-between; } #home2 .hp-phone-body { padding: 8px; display: grid; gap: 6px; } #home2 .hp-phone-body span { background: #FDFCFA; border: 1px solid #E6E4DD; border-radius: 8px; padding: 6px 8px; font-size: 0.75rem; color: #1E2230; display: flex; align-items: center; gap: 6px; } #home2 .hp-phone-body span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid #8A9A6E; flex-shrink: 0; } #home2 .hp-phone-body span.is-done::before { background: #8A9A6E; } #home2 .hp-phone-body span.is-done { color: #5F646C; text-decoration: line-through; } #home2 .hp-phone-mic { margin: 4px 8px 10px; padding: 6px 8px; border-radius: 999px; background: #FDFCFA; border: 1px solid #E6E4DD; font-size: 0.75rem; color: #6B665F; } #home2 .hp-os { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } #home2 .hp-os li { display: inline-flex; align-items: center; gap: 8px; background: #FDFCFA; color: var(--hp-ink); border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 0.875rem; font-weight: 700; } #home2 .hp-os img { width: 20px; height: 20px; object-fit: contain; } /* ---------- 2b. Capture from anywhere: the scroll story ---------- */ /* Plain version first (phones, short screens, reduced motion, no JavaScript): each source is a card, then the Humble Home card with everything in it. */ #home2 .hp-srcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } #home2 .hp-src { min-width: 0; background: #FDFCFA; border: 1px solid #DDD5F3; border-radius: 24px; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } #home2 .hp-src-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.5rem; line-height: 1.25; color: var(--hp-ink); } #home2 .hp-src-title img, #home2 .hp-src-title svg { width: 2rem; height: 2rem; padding: 5px; border-radius: 10px; background: #EEE9FB; color: #1E085D; object-fit: contain; flex-shrink: 0; } #home2 .hp-src-text { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--hp-muted); } #home2 .hp-src-pic { margin-top: 6px; max-width: 32rem; min-width: 0; overflow: hidden; } #home2 .hp-src--devices .hp-src-title { font-size: 1.5rem; } #home2 .hp-hub { margin-top: 16px; } #home2 .hp-hub-label { margin: 32px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.3; color: var(--hp-purple); } #home2 .hp-hub-lines, #home2 .hp-dock { display: none; } #home2 .hp-hub-home { background: #FDFCFA; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(30, 8, 93, .55); max-width: 26rem; } #home2 .hp-hub-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #DDD5F3; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: #1E085D; } #home2 .hp-hub-head img { width: 26px; height: 26px; border-radius: 7px; } #home2 .hp-hub-list { padding: 8px 12px 12px; display: grid; } #home2 .hp-hub-item { display: grid; grid-template-rows: 1fr; } #home2 .hp-hub-item > div { overflow: hidden; display: flex; align-items: center; gap: 10px; min-height: 0; } #home2 .hp-hub-item > div { padding: 6px 0; border-bottom: 1px solid #EEEAE2; } #home2 .hp-hub-item:last-child > div { border-bottom: 0; } #home2 .hp-hub-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: #1E2230; } #home2 .hp-hub-ic svg { width: 16px; height: 16px; } #home2 .hp-hub-txt { font-size: 0.875rem; font-weight: 700; color: #1E2230; line-height: 1.3; } #home2 .hp-hub-txt small { display: block; font-size: 0.75rem; font-weight: 500; color: #5F646C; } /* Slack mock */ #home2 .hp-slack { background: #FDFCFA; border: 1px solid #E6E1D8; border-radius: 14px; overflow: hidden; font-size: 0.875rem; color: #1D1C1D; } #home2 .hp-slack-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #EEEAE2; font-weight: 800; } #home2 .hp-slack-bar img { width: 20px; height: 20px; border-radius: 5px; } #home2 .hp-slack small { font-size: 0.6875rem; font-weight: 700; color: #5F646C; background: #EEEAE2; padding: 1px 5px; border-radius: 4px; } #home2 .hp-slack-msgs { padding: 12px 14px; display: grid; gap: 14px; } #home2 .hp-slack-msg { display: flex; gap: 10px; } #home2 .hp-slack-msg p { margin: 2px 0 0; line-height: 1.45; } #home2 .hp-slack-av { width: 34px; height: 34px; border-radius: 8px; background: #DBE8C6; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; flex-shrink: 0; } #home2 .hp-slack-in { margin: 0 14px 14px; border: 1px solid #D9D5CC; border-radius: 10px; padding: 9px 12px; color: #6B665F; } #home2 .hp-phone-body span.is-new { border-color: #4705D0; box-shadow: 0 0 0 1px #4705D0; } /* The scroll story (computers with a tall enough screen). The section is tall; the stage sticks under the menu while you scroll through it, and preview.js sets data-step from 0 to 4. */ @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-flow.is-on { padding: 0; } #home2 .hp-flow.is-on .hp-flow-track { height: calc(100vh + 5 * 65vh); } #home2 .hp-flow.is-on .hp-flow-stage { position: sticky; top: 4rem; height: calc(100vh - 4rem); display: flex; flex-direction: column; justify-content: center; padding-top: 16px; padding-bottom: 16px; box-sizing: border-box; } #home2 .hp-flow.is-on .hp-flow-head { margin-bottom: clamp(16px, 4vh, 40px); } #home2 .hp-flow.is-on .hp-flow-head h2 { margin-bottom: 8px; } #home2 .hp-flow.is-on .hp-flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } /* Left: one source at a time, all in the same spot */ #home2 .hp-flow.is-on .hp-srcs { display: grid; gap: 0; } #home2 .hp-flow.is-on .hp-hub-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; } /* the map says it on computers; kept for screen readers */ #home2 .hp-flow.is-on .hp-src { grid-area: 1 / 1; align-self: center; background: none; border: 0; padding: 0; opacity: 0; transform: translateY(32px); transition: opacity .45s ease, transform .6s cubic-bezier(.4, 0, .2, 1); pointer-events: none; } #home2 .hp-flow.is-on .hp-src.is-current { opacity: 1; transform: none; pointer-events: auto; } #home2 .hp-flow.is-on .hp-src-title img, #home2 .hp-flow.is-on .hp-src-title svg { background: #FDFCFA; } /* A source you have scrolled past shrinks into its icon on the map */ #home2 .hp-flow.is-on .hp-src.is-docked { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.12); transition: opacity .5s ease .1s, transform .6s cubic-bezier(.4, 0, .2, 1); } #home2 .hp-flow.is-on .hp-src-pic { max-height: 46vh; overflow: hidden; } /* Right: the map. The icons stand in one column on its left, and every arrow lands in Humble Home from that side */ #home2 .hp-flow.is-on .hp-hub { position: relative; margin: 0; width: 100%; max-width: 34rem; justify-self: center; aspect-ratio: 100 / 86; max-height: 60vh; } #home2 .hp-flow.is-on .hp-hub-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #home2 .hp-hub-line { fill: none; stroke: #4705D0; stroke-width: .7; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; opacity: 0; transition: stroke-dashoffset .5s ease-out .45s, opacity .2s ease .45s; } #home2 .hp-hub-line.is-on { stroke-dashoffset: 0; opacity: 1; } #home2 .hp-flow.is-on .hp-dock { display: grid; justify-items: center; gap: 6px; position: absolute; transform: translate(-50%, -50%); } #home2 .hp-dock-in { width: 3.75rem; height: 3.75rem; border-radius: 16px; background: #FDFCFA; display: grid; place-items: center; color: #1E085D; box-shadow: 0 12px 24px -12px rgba(30, 8, 93, .55); transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .3s; } #home2 .hp-dock-in img, #home2 .hp-dock-in svg { width: 1.75rem; height: 1.75rem; } #home2 .hp-dock small { font-size: 0.8125rem; font-weight: 700; color: var(--hp-ink); opacity: 0; transition: opacity .3s ease .45s; } #home2 .hp-dock.is-on .hp-dock-in { transform: none; } #home2 .hp-dock.is-on small { opacity: 1; } #home2 .hp-flow.is-on .hp-hub-home { position: absolute; left: 66%; top: 50%; transform: translate(-50%, -50%); width: 56%; min-width: 15rem; max-width: none; z-index: 1; } #home2 .hp-flow.is-on .hp-hub-item { grid-template-rows: 0fr; transition: grid-template-rows .45s ease .7s; } #home2 .hp-flow.is-on .hp-hub-item > div { border-bottom-width: 0; padding: 0; transition: padding .45s ease .7s, background-color .6s ease 1.1s; border-radius: 8px; } #home2 .hp-flow.is-on .hp-hub-item.is-on, #home2 .hp-flow.is-on .hp-hub-item.is-base { grid-template-rows: 1fr; } #home2 .hp-flow.is-on .hp-hub-item.is-on > div, #home2 .hp-flow.is-on .hp-hub-item.is-base > div { padding: 6px 4px; } #home2 .hp-flow.is-on .hp-hub-item.is-new > div { background: #EEE9FB; } } #home2 .hp-center { text-align: center; margin: 32px 0 0; } /* ---------- 4. Use cases ---------- */ #home2 .hp-uses { background: #F4F2ED; padding: 96px 0; } #home2 .hp-uses h2 { margin: 0 0 16px; color: var(--hp-ink); } #home2 .hp-use-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } @media (min-width: 44em) { .hp-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 68em) { .hp-use-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hp-use { grid-column: span 2; } .hp-use:nth-child(4) { grid-column: 2 / span 2; } } #home2 .hp-use { background: #FDFCFA; border: 1px solid #E6E1D8; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 12px; } #home2 .hp-use:hover { border-color: #C7BBEB; box-shadow: 0 14px 30px -24px rgba(30, 8, 93, .6); } #home2 .hp-use-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #1E085D; } #home2 .hp-use-ic svg { width: 22px; height: 22px; } #home2 .hp-use-q { margin: 0; font-family: 'Newsreader', serif; font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: #4A4458; } #home2 .hp-use h3 { margin: 0; font-size: 1.375rem; line-height: 1.3; } #home2 .hp-use h3 a { color: var(--hp-ink); } #home2 .hp-use .link-card-arrow { opacity: 0; transition: opacity .15s ease; } #home2 .hp-use:hover .link-card-arrow, #home2 .hp-use:focus-within .link-card-arrow { opacity: 1; } @media (hover: none) { .hp-use .link-card-arrow { opacity: 1; } } #home2 .hp-use > p:last-child { margin: 0; color: var(--hp-muted); line-height: 1.55; } /* ---------- 5. Teams call-out ---------- */ #home2 .hp-team { background: #F4F2ED; padding: 0 0 96px; } #home2 .hp-team-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; background: #EEE9FB; border: 1px solid #DDD5F3; border-radius: 24px; padding: 28px 32px; } #home2 .hp-team-box h2 { margin: 0 0 6px; font-size: 1.5rem; color: var(--hp-ink); } #home2 .hp-team-box p { margin: 0; color: var(--hp-muted); line-height: 1.55; max-width: 40rem; } #home2 .hp-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--hp-purple); color: #FDFCFA; font-weight: 700; text-decoration: none; } #home2 .hp-btn:hover { background: var(--hp-ink); color: #FDFCFA; } #home2 .hp-btn:focus-visible { outline: 3px solid var(--hp-ink); outline-offset: 3px; } /* Handwritten notes (owner, 2026-11-03): a human line on each card, in purple, written out as if by hand, then an arrow is drawn into the card. On phones the note sits inside its card and is written once, when the card comes to the front. On computers it sits in the empty space left of the cards, only the card in front shows its note, and it is written again each time that card comes back. Reduced motion and no JavaScript show the notes still. */ #home2 .hp-card-side > p.hp-scribble { position: relative; margin: -4px 0 0; padding-right: 64px; font-family: 'Patrick Hand', 'Segoe Print', 'Bradley Hand', cursive; font-size: 1.875rem; line-height: 1.15; color: #4705D0; transform: rotate(-2deg); transform-origin: left center; } #home2 .hp-scribble-line { display: inline-block; } #home2 .hp-scribble-arrow { position: absolute; right: 0; bottom: -18px; width: 52px; height: 32px; transform: rotate(80deg); overflow: visible; } #home2 .hp-scribble-arrow path { fill: none; stroke: #4705D0; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #home2 .hp-arrow-line { stroke-dasharray: 90; } #home2 .hp-arrow-head { stroke-dasharray: 30; } #home2 .hp-anim .hp-scribble-line { clip-path: inset(-20% 100% -20% -6%); } #home2 .hp-anim .hp-arrow-line { stroke-dashoffset: 90; } #home2 .hp-anim .hp-arrow-head { stroke-dashoffset: 30; } #home2 .hp-anim .hp-card.is-written .hp-scribble-line { animation: hp-write .8s ease-in-out .15s both; } #home2 .hp-anim .hp-card.is-written .hp-scribble-line + .hp-scribble-line { animation-delay: .95s; } #home2 .hp-anim .hp-card.is-written .hp-arrow-line { animation: hp-draw .45s ease-out 1.8s both; } #home2 .hp-anim .hp-card.is-written .hp-arrow-head { animation: hp-draw .2s ease-out 2.25s both; } @keyframes hp-write { from { clip-path: inset(-20% 100% -20% -6%); } to { clip-path: inset(-20% -6% -20% -6%); } } @keyframes hp-draw { to { stroke-dashoffset: 0; } } /* Computers: the ticks and the note move out to the left of the card, under the heading, and stay in the same place on screen for every card (each card sits 3.25rem lower, so its side panel sits 3.25rem higher). The arrow points from the note into the card. */ @media (min-width: 56.01em) { #home2 .hp-card-side { position: absolute; right: calc(100% + 64px); top: calc(16rem - var(--i, 0) * 3.25rem); width: calc((min(100vw, 1200px) - 128px) * 0.4); gap: 28px; } /* exactly the left column: the grid gap is 64px and the column is 0.8 of 2 parts */ #home2 .hp-ticks li { font-size: clamp(1rem, 1.35vw, 1.125rem); } /* capped so each tick stays on one line on smaller laptops */ #home2 .hp-card-side > p.hp-scribble { margin: 0; padding: 0; width: fit-content; max-width: 100%; margin-left: auto; text-align: right; font-size: clamp(1.75rem, 2.4vw, 2.25rem); } #home2 .hp-scribble-line { display: block; } #home2 .hp-scribble-arrow { right: auto; left: calc(100% + 6px); bottom: auto; top: 0.35em; width: 80px; height: 48px; transform: none; } } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-anim .hp-card-side { transition: opacity .25s ease; } #home2 .hp-anim .hp-card:not(.is-front) .hp-card-side { opacity: 0; } /* opacity only, so screen readers still read every list */ #home2 .hp-anim .hp-card:not(.is-front) .hp-scribble-line, #home2 .hp-anim .hp-card:not(.is-front) .hp-arrow-line, #home2 .hp-anim .hp-card:not(.is-front) .hp-arrow-head { animation: none; } } @media (min-width: 56.01em) and (max-width: 80em) { #home2 .hp-card-side > p.hp-scribble { font-size: 1.75rem; } } @media (max-width: 30em) { #home2 .hp-ticks li { font-size: 1rem; } } /* phones: 16px, the smallest body size, so more ticks fit on one line */ /* The last card (owner, 2026-11-03): ink, with the Humble logo, so you know the tour is finished. When it comes to the front the logo gives one small hop. */ #home2 .hp-card--done { --hp-tint: #1E085D; --hp-line: #1E085D; color: #FCFAF7; } #home2 .hp-card--done .hp-card-body { height: 100%; align-content: center; } #home2 .hp-done { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 24px 12px; } #home2 .hp-done-logo { width: 5.5rem; height: 5.5rem; border-radius: 22px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); } #home2 .hp-done h3 { margin: 8px 0 0; font-size: 1.75rem; line-height: 1.2; color: #FEBBCC; } #home2 .hp-done p { margin: 0; max-width: 26rem; font-size: 1.0625rem; line-height: 1.55; color: rgba(252, 250, 247, .88); } #home2 .hp-done-btn { margin-top: 8px; display: inline-flex; align-items: center; min-height: 48px; padding: 12px 28px; border-radius: 999px; background: #FEBBCC; color: #1E085D; font-weight: 700; text-decoration: none; } #home2 .hp-done-btn:hover { background: #FDFCFA; color: #1E085D; } #home2 .hp-done-btn:focus-visible { outline: 3px solid #FEBBCC; outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { #home2 .hp-anim .hp-card--done.is-front .hp-done-logo { animation: hp-hop .7s cubic-bezier(.3, 1.6, .5, 1) .2s both; } } @keyframes hp-hop { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-14px) rotate(-6deg); } 70% { transform: translateY(0) rotate(3deg); } 100% { transform: none; } } @media (max-width: 56em) { #home2 .hp-card--done .hp-card-side { display: none; } } /* on phones the ink card speaks for itself */ /* Overview strip: each step title jumps to its section (owner, 2026-11-03) */ #home2 .steps3-jump { color: inherit; text-decoration: none; } #home2 .steps3-jump:hover { color: var(--hp-purple, #4705D0); text-decoration: underline; text-underline-offset: 4px; } #home2 .steps3-jump:focus-visible { outline: 3px solid #4705D0; outline-offset: 3px; border-radius: 4px; } /* Step 1 ends with the other tools Humble brings in (the integrations section folded in here) */ #home2 .hp-plugs { padding-top: 24px; padding-bottom: 96px; text-align: center; } #home2 .hp-plugs-label { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--hp-ink); } #home2 .hp-plugs-list { list-style: none; margin: 0 auto; padding: 0; max-width: 72rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } #home2 .hp-plugs-list li { display: inline-flex; align-items: center; gap: 8px; background: #FDFCFA; color: #1E085D; border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 0.875rem; font-weight: 700; } #home2 .hp-plugs-list img { width: 20px; height: 20px; object-fit: contain; } #home2 .hp-plugs-all { display: inline-block; margin-top: 20px; color: var(--hp-purple); font-weight: 700; } /* ---------- Step 2, Organise: link, file, share ---------- */ #home2 .hp-org { background: #FDE8EE; padding: 96px 0; } #home2 .hp-org h2, #home2 .hp-redis h2 { margin: 0 0 16px; color: var(--hp-ink); } #home2 .hp-org-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 56em) { #home2 .hp-org-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #home2 .hp-org-card { background: #FDFCFA; border: 1px solid #E6E1D8; border-radius: 24px; padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 10px; } #home2 .hp-org-card h3 { margin: 6px 0 0; font-size: 1.375rem; line-height: 1.3; color: var(--hp-ink); } #home2 .hp-org-card > p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--hp-muted); } #home2 .hp-org-pic { background: #F4F2ED; border-radius: 16px; padding: 20px; min-height: 13rem; display: grid; align-items: center; } #home2 .hp-mini { background: #FDFCFA; border: 1px solid #E6E1D8; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 28px -22px rgba(30, 8, 93, .6); } #home2 .hp-mini-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 0.8125rem; font-weight: 700; color: #1E2230; background: #EEE9FB; } #home2 .hp-mini--note .hp-mini-head { background: #F3E28A; } #home2 .hp-mini--task .hp-mini-head { background: #DBE8C6; } #home2 .hp-mini-head svg { width: 16px; height: 16px; } #home2 .hp-mini-body { padding: 12px; display: grid; gap: 8px; font-size: 0.875rem; color: #1E2230; } #home2 .hp-mini-body > b { font-size: 0.9375rem; } #home2 .hp-mini-label { margin: 2px 0 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5F646C; } #home2 .hp-chips { display: flex; flex-wrap: wrap; gap: 6px; } #home2 .hp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid #E2DDF0; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; background: #FDFCFA; } #home2 .hp-chip svg { width: 14px; height: 14px; } #home2 .hp-chip-av { width: 22px; height: 22px; border-radius: 50%; background: #EEE9FB; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 800; color: #1E085D; flex-shrink: 0; } #home2 .hp-folders { gap: 6px; } #home2 .hp-folder { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #F4F2EC; font-weight: 600; } #home2 .hp-folder svg { width: 16px; height: 16px; color: #4705D0; } #home2 .hp-folder small { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: #5F646C; } #home2 .hp-folder.is-new { background: #EEE9FB; box-shadow: inset 0 0 0 1.5px #4705D0; } #home2 .hp-share { display: grid; gap: 6px; } #home2 .hp-share-row { display: flex; align-items: center; gap: 8px; font-weight: 600; } #home2 .hp-share-row small { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: #5F646C; background: #F4F2EC; padding: 2px 8px; border-radius: 999px; } /* ---------- Step 3, Rediscover ---------- */ #home2 .hp-redis { background: #F1F7D9; padding: 96px 0; } #home2 .hp-pane-text { margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--hp-text); } #home2 .hp-remind { display: flex; align-items: center; gap: 12px; max-width: 26rem; margin: 0 auto; padding: 14px 16px; background: #FDFCFA; border: 1px solid #E6E1D8; border-radius: 16px; box-shadow: 0 16px 32px -20px rgba(30, 8, 93, .55); } #home2 .hp-remind-ic img { width: 36px; height: 36px; border-radius: 9px; display: block; } #home2 .hp-remind-main { display: grid; gap: 2px; } #home2 .hp-remind-main b { font-size: 0.9375rem; color: #1E2230; } #home2 .hp-remind-main span { font-size: 0.8125rem; color: #5F646C; } #home2 .hp-remind small { margin-left: auto; align-self: flex-start; font-size: 0.75rem; font-weight: 700; color: #5F646C; } /* Step colours (owner, 2026-11-04): one colour per step, used everywhere for that step: the overview card, the big number and the section background. Step 1 lilac #EEE9FB, Step 2 pink #FDE8EE, Step 3 lime #F1F7D9 (the /setup/ step set). A pale number would not show, so each number is filled with its step colour and drawn with an ink outline and a small ink shadow, like the ink-framed folder tabs. Ink is 15:1 on the band behind. */ #home2 .steps3-item-num { -webkit-text-stroke: 2px #1E085D; paint-order: stroke fill; text-shadow: 4px 4px 0 #1E085D; } #home2 .steps3-item--g1 .steps3-item-num { color: #EEE9FB; } #home2 .steps3-item--g2 .steps3-item-num { color: #FDE8EE; } #home2 .steps3-item--g3 .steps3-item-num { color: #F1F7D9; } #home2 .hp-org .hp-org-card { border-color: #F7CFDB; } #home2 .hp-org .hp-org-pic { background: #FDF3F6; } /* Item icon tints in the Humble Home list (each widget's own colour) */ #home2 .hp-ic-task { background: #DBE8C6; } #home2 .hp-ic-note { background: #F3E28A; } #home2 .hp-ic-cal { background: #FEBBCC; } /* Overview cards (owner, 2026-11-04): picture and title are one card in the step's colour, with no line of text under the title. The whole card is one link to its section. */ #home2 #how-it-works .steps3-item { position: relative; padding: 0 0 22px; border-radius: 24px; overflow: hidden; border: 1px solid var(--g-line); background: var(--g); transition: box-shadow .15s ease; } #home2 #how-it-works .steps3-item--g1 { --g: var(--sw-g1); --g-line: var(--sw-g1-line); } #home2 #how-it-works .steps3-item--g2 { --g: var(--sw-g2); --g-line: var(--sw-g2-line); } #home2 #how-it-works .steps3-item--g3 { --g: var(--sw-g3); --g-line: var(--sw-g3-line); } #home2 #how-it-works .steps3-item .steps3-item-pic { background: var(--g); border: 0; border-bottom: 1px solid var(--g-line); border-radius: 0; margin: 0 0 18px; } /* picture runs edge to edge, so it keeps its full width */ #home2 #how-it-works .steps3-item-head { margin: 0; padding: 0 22px; align-items: center; } #home2 #how-it-works .steps3-item-head h3 { margin: 0; } #home2 #how-it-works .steps3-jump::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } #home2 #how-it-works .steps3-item:hover { box-shadow: 0 16px 30px -22px rgba(30, 8, 93, .6); } #home2 #how-it-works .steps3-item:has(.steps3-jump:focus-visible) { outline: 3px solid #4705D0; outline-offset: 3px; } #home2 #how-it-works .steps3-jump:focus-visible { outline: none; } /* Browser mock that plays (owner, 2026-11-04): Andie's LinkedIn page; the Humble icon turns green (the page has related context, as in the product), the cursor clicks it and the Humble sidebar slides over the page with what you know about her. One fixed height, so it takes less room than the old side-by-side mock. Without JavaScript or with reduced motion it shows the end: icon green, sidebar open, no cursor. */ #home2 .hp-brx { background: #FDFCFA; border: 1px solid #E6E1D8; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 32px -24px rgba(30, 8, 93, .5); } #home2 .hp-brx-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #EEEAE2; } #home2 .hp-brx-dots { display: flex; gap: 5px; } #home2 .hp-brx-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E5675A; } #home2 .hp-brx-dots i:nth-child(2) { background: #E9B949; } #home2 .hp-brx-dots i:nth-child(3) { background: #63B95A; } #home2 .hp-brx-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0; background: #FDFCFA; border-radius: 999px; padding: 4px 10px; font-size: 0.75rem; color: #5F646C; white-space: nowrap; overflow: hidden; } #home2 .hp-brx-url b { color: #1E2230; font-weight: 600; } #home2 .hp-brx-url img { width: 14px; height: 14px; margin-right: 6px; } #home2 .hp-brx-ext { position: relative; width: 26px; height: 26px; flex-shrink: 0; } #home2 .hp-brx-ext img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; } #home2 .hp-brx-ext-off { opacity: 0; } #home2 .hp-brx-body { position: relative; height: 15rem; overflow: hidden; background: #F3F2EF; } #home2 .hp-brx-li { position: absolute; inset: 12px auto 12px 12px; width: calc(100% - 24px); background: #FDFCFA; border: 1px solid #E6E4DD; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; padding: 0 14px 14px; font-size: 0.8125rem; color: #5F646C; } #home2 .hp-brx-banner { height: 3.25rem; margin: 0 -14px; background: linear-gradient(90deg, #A9B9BC, #C8D3D4); } #home2 .hp-brx-av { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 3px solid #FDFCFA; margin-top: -1.75rem; background: #5BB8E8; } #home2 .hp-brx-li b { margin-top: 6px; font-size: 1rem; color: #1E2230; } #home2 .hp-brx-li small { margin-top: 2px; font-size: 0.75rem; } #home2 .hp-brx-side { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; background: #F4F2EC; border-left: 1px solid #E2DED4; box-shadow: -14px 0 28px -20px rgba(30, 8, 93, .6); padding: 10px; display: grid; align-content: start; gap: 8px; } #home2 .hp-brx-side-head { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 800; color: #1E2230; } #home2 .hp-brx-side-head img { width: 20px; height: 20px; border-radius: 5px; } #home2 .hp-brx-item { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #FDFCFA; border-left: 4px solid var(--c); font-size: 0.8125rem; color: #1E2230; } #home2 .hp-brx-item span { font-size: 0.75rem; color: #5F646C; } #home2 .hp-brx-item--note { --c: #E3CF6A; background: #FAF3D3; } #home2 .hp-brx-item--task { --c: #A9C486; } #home2 .hp-brx-item--met { --c: #F2A3B7; } #home2 .hp-brx-cursor { position: absolute; width: 22px; height: 22px; opacity: 0; pointer-events: none; } /* Start state, only when the animation can play (preview.js adds .is-ready) */ #home2 .hp-brx.is-ready .hp-brx-ext-off { opacity: 1; } #home2 .hp-brx.is-ready .hp-brx-ext-on { opacity: 0; transform: scale(.6); } #home2 .hp-brx.is-ready .hp-brx-side { transform: translateX(105%); } #home2 .hp-brx.is-ready .hp-brx-item { opacity: 0; transform: translateY(6px); } #home2 .hp-brx.is-ready .hp-brx-cursor { left: 30%; top: 75%; } /* Playing: 0.6s icon turns green, 0.9s cursor moves to it, 1.8s click, 2.0s sidebar slides in, notes follow */ #home2 .hp-brx.is-playing .hp-brx-ext-off { animation: hp-brx-out .25s ease .7s forwards; } #home2 .hp-brx.is-playing .hp-brx-ext-on { animation: hp-brx-pop .4s cubic-bezier(.3, 1.6, .5, 1) .6s forwards; } #home2 .hp-brx.is-playing .hp-brx-cursor { animation: hp-brx-move 1.6s ease-in-out .9s forwards; } #home2 .hp-brx.is-playing .hp-brx-side { animation: hp-brx-slide .5s cubic-bezier(.2, .8, .2, 1) 2.05s forwards; } #home2 .hp-brx.is-playing .hp-brx-item { animation: hp-in .35s ease forwards; } #home2 .hp-brx.is-playing .hp-brx-item:nth-of-type(1) { animation-delay: 2.5s; } #home2 .hp-brx.is-playing .hp-brx-item:nth-of-type(2) { animation-delay: 2.75s; } #home2 .hp-brx.is-playing .hp-brx-item:nth-of-type(3) { animation-delay: 3s; } @keyframes hp-brx-out { to { opacity: 0; } } @keyframes hp-brx-pop { to { opacity: 1; transform: none; } } @keyframes hp-brx-slide { to { transform: none; } } /* the cursor travels from the page up to the icon (just above the body, top right), clicks, then fades */ @keyframes hp-brx-move { 0% { opacity: 0; left: 30%; top: 75%; transform: scale(1); } 10% { opacity: 1; } 55% { left: calc(100% - 22px); top: -14px; transform: scale(1); } 62% { transform: scale(.8); } 70% { transform: scale(1); opacity: 1; } 100% { left: calc(100% - 22px); top: -14px; opacity: 0; } } #home2 .hp-brx-body { overflow: visible; } /* the cursor reaches up to the icon */ #home2 .hp-brx { position: relative; } #home2 .hp-brx-li, #home2 .hp-brx-side { overflow: hidden; } #home2 .hp-brx-body { clip-path: inset(-40px 0 0 0); } /* the sidebar stays inside the frame; the cursor may rise into the bar */ @media (max-width: 30em) { #home2 .hp-brx-body { height: 14rem; } #home2 .hp-brx-side { width: 72%; } #home2 .hp-brx-item--met { display: none; } } /* two notes fit a phone */ /* Life cards without a second header (owner, 2026-11-04): the card's own coloured header names the area, so the app picture inside drops its "My Tasks" / "My Notes" header and container. The items sit straight in the card as white cards, each with a small icon in its widget colour, so there is one coloured band per card, not two. */ #home2 .hp-card-pic .tp-app { background: transparent; border: 0; box-shadow: none; overflow: visible; } #home2 .hp-card-pic .tp-app-head { display: none; } #home2 .hp-card-pic .tp-app-body { padding: 0; } #home2 .hp-card-pic .tp-task, #home2 .hp-card-pic .tp-note { position: relative; background: #FDFCFA; border: 1px solid #E6E1D8; box-shadow: 0 6px 14px -12px rgba(30, 8, 93, .5); } #home2 .hp-card-pic .tp-task { padding-left: 54px; } #home2 .hp-card-pic .tp-note { padding-left: 54px; } #home2 .hp-item-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #1E2230; } #home2 .hp-card-pic .tp-note .hp-item-ic { top: 14px; transform: none; } #home2 .hp-item-ic svg { width: 16px; height: 16px; } /* Slack picture (owner, 2026-11-04): looks like Slack, with the dark window bar, the aubergine sidebar with the Humble app selected, and messages with square avatars. Built on the shared .ucx-slack mock in css/styles.css. The shared mock hides its sidebar on phones; here a slim sidebar stays, as it is what makes it read as Slack. */ #home2 .hp-slackwin { border-radius: 12px; overflow: hidden; border: 1px solid #E6E1D8; box-shadow: 0 16px 32px -24px rgba(30, 8, 93, .5); background: #FFFFFF; } #home2 .hp-slackwin-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #350D36; } #home2 .hp-slackwin-bar i { width: 9px; height: 9px; border-radius: 50%; } #home2 .hp-slackwin-bar span { flex: 1; margin: 0 20px; height: 18px; border-radius: 5px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); font-size: 0.6875rem; display: flex; align-items: center; padding: 0 8px; } #home2 .hp-slackwin .ucx-slack { border-radius: 0; min-height: 0; } #home2 .hp-slack-badge { font-size: 0.625rem; font-weight: 700; color: #616061; background: #EEEEEE; border-radius: 3px; padding: 1px 4px; } #home2 .hp-slack-msgs { gap: 14px; } #home2 .hp-slack-row { display: flex; gap: 8px; line-height: 1.45; } #home2 .hp-slack-row b { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; } #home2 .hp-slack-row b small:not(.hp-slack-badge) { font-weight: 400; font-size: 0.6875rem; color: #616061; } #home2 .hp-slack-row p { margin: 1px 0 0; } #home2 .hp-slack-av { width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 800; color: #1D1C1D; } #home2 .hp-slack-card { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 10px; border: 1px solid #DDDDDD; border-left: 4px solid #E3CF6A; border-radius: 6px; font-size: 0.75rem; font-weight: 600; } #home2 .hp-slack-card svg { width: 14px; height: 14px; } @media (max-width: 32.5em) { #home2 .hp-slackwin .ucx-slack { grid-template-columns: 6.25rem minmax(0, 1fr); } #home2 .hp-slackwin .ucx-slack-side { display: flex; padding: 10px 6px; font-size: 0.75rem; } #home2 .hp-slackwin-bar span { margin: 0 8px; } } /* Step panels (owner, 2026-11-04): Steps 2 and 3 open over the page from their "How Humble works" card, so you never leave the homepage. Native : Esc closes it, focus stays inside and goes back to the card on close. Computers: a panel slides in from the right. Phones: a sheet slides up from the bottom. Reduced motion: no slide. */ #home2 .hp-panel { position: fixed; inset: 0 0 0 auto; width: min(60rem, 78vw); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 0 40px; border: 0; border-radius: 28px 0 0 28px; overflow-y: auto; overscroll-behavior: contain; box-shadow: -24px 0 60px -20px rgba(30, 8, 93, .45); } #home2 .hp-panel.hp-org { background: #FDE8EE; } #home2 .hp-panel.hp-redis { background: #F1F7D9; } #home2 .hp-panel::backdrop { background: rgba(30, 8, 93, .45); } #home2 .hp-panel .site { padding-top: 8px; } #home2 .hp-panel .hp-head { margin-bottom: 32px; } #home2 .hp-panel-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: inherit; } #home2 .hp-panel-step { font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4A4458; } #home2 .hp-panel-close { display: grid; place-items: center; width: 52px; height: 52px; margin: -12px -12px -12px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #1E085D; cursor: pointer; } /* just the X, large so it is obvious; the 52px area keeps it easy to tap */ #home2 .hp-panel-close svg { width: 36px; height: 36px; } #home2 .hp-panel-close:hover { color: #4705D0; } #home2 .hp-panel-close:focus-visible { outline: 3px solid #4705D0; outline-offset: 2px; } #home2 .hp-panel-foot { margin: 32px 0 0; text-align: center; font-weight: 700; } #home2 .hp-panel-foot a:not([class]) { color: #4705D0; } #home2 .hp-panel .hp-org-grid { grid-template-columns: minmax(0, 1fr); } @media (min-width: 64em) { #home2 .hp-panel .hp-org-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 48em) { #home2 .hp-panel { inset: auto 0 0 0; width: 100%; height: 92%; border-radius: 24px 24px 0 0; box-shadow: 0 -20px 50px -20px rgba(30, 8, 93, .5); } #home2 .hp-panel-bar { padding: 22px 16px 12px; } #home2 .hp-panel-bar::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: rgba(30, 8, 93, .25); } /* the sheet handle */ } @media (prefers-reduced-motion: no-preference) { #home2 .hp-panel[open] { animation: hp-panel-in .35s cubic-bezier(.2, .8, .2, 1); } #home2 .hp-panel[open]::backdrop { animation: hp-fade .3s ease; } @media (max-width: 48em) { #home2 .hp-panel[open] { animation-name: hp-sheet-in; } } } @keyframes hp-panel-in { from { transform: translateX(100%); } to { transform: none; } } @keyframes hp-sheet-in { from { transform: translateY(100%); } to { transform: none; } } @keyframes hp-fade { from { opacity: 0; } to { opacity: 1; } } html.hp-panel-open { overflow: hidden; } /* the page behind stays still */ /* Step 2 pictures (owner, 2026-11-06): one note about Andie, filed, linked and shared, showing the outcome rather than the clicks. At rest each shows its finished picture. It plays from the start when the panel opens (one after another) and again when you hover over or tab to its card. Reduced motion: never plays. */ #home2 .hp-org-pic { min-height: 14.5rem; } /* Filed by your AI app */ #home2 .hp-fold { display: grid; gap: 10px; width: 100%; } #home2 .hp-fold-ai { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: #FDFCFA; border: 1px solid #E6E1D8; font-size: 0.75rem; color: #4A4458; justify-self: start; } #home2 .hp-fold-ai img { width: 16px; height: 16px; } #home2 .hp-fold-ai b { color: #1E2230; } #home2 .hp-fold-row { display: grid; gap: 4px; } #home2 .hp-folder small { position: relative; display: inline-grid; } #home2 .hp-folder small i { font-style: normal; grid-area: 1 / 1; } #home2 .hp-c-old { opacity: 0; } #home2 .hp-fold-note { display: grid; grid-template-rows: 1fr; } #home2 .hp-fold-note > span { overflow: hidden; display: flex; align-items: center; gap: 6px; margin-left: 22px; padding: 4px 8px; border-radius: 8px; background: #FDFCFA; border: 1px solid #E6E1D8; font-size: 0.75rem; font-weight: 600; color: #1E2230; } #home2 .hp-fold-note svg { width: 13px; height: 13px; flex-shrink: 0; color: #8A7A2A; } #home2 .hp-fold .hp-folder.is-new { box-shadow: none; } /* Linked to anything: the note in the middle, four real things around it */ #home2 .hp-web { position: relative; width: 100%; aspect-ratio: 1 / .9; } #home2 .hp-web-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #home2 .hp-web-lines path { fill: none; stroke: #8C6CE8; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; } #home2 .hp-web-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46%; display: grid; gap: 3px; padding: 7px 9px 9px; border-radius: 12px; background: #FDFCFA; border: 2px solid #4705D0; box-shadow: 0 10px 20px -14px rgba(30, 8, 93, .6); font-size: 0.75rem; color: #1E2230; text-align: left; } #home2 .hp-web-hub b { font-size: 0.75rem; line-height: 1.3; } #home2 .hp-web-hub-head { display: flex; align-items: center; gap: 5px; font-weight: 700; color: #5F646C; font-size: 0.6875rem; } #home2 .hp-web-hub-head svg { width: 12px; height: 12px; } #home2 .hp-web-node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; max-width: 24%; font-size: 0.6875rem; font-weight: 700; color: #1E2230; text-align: center; line-height: 1.2; } #home2 .hp-web-av, #home2 .hp-web-ic { width: 34px; height: 34px; border-radius: 50%; background: #FDFCFA; border: 2px solid #FDFCFA; box-shadow: 0 6px 14px -8px rgba(30, 8, 93, .6); display: grid; place-items: center; color: #1E085D; } #home2 .hp-web-av { object-fit: cover; background: #5BB8E8; } #home2 .hp-web-ic svg, #home2 .hp-web-ic img { width: 16px; height: 16px; } #home2 .hp-web-ic.hp-ic-task { background: #DBE8C6; } /* Shared: your note, then the same note in Priya's Humble */ #home2 .hp-shr { display: grid; justify-items: center; gap: 2px; width: 100%; } #home2 .hp-shr-card { width: 100%; display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: #FDFCFA; border: 1px solid #E6E1D8; font-size: 0.75rem; color: #1E2230; box-shadow: 0 8px 16px -14px rgba(30, 8, 93, .6); } #home2 .hp-shr-card b { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; } #home2 .hp-shr-card b svg { width: 13px; height: 13px; flex-shrink: 0; color: #8A7A2A; } #home2 .hp-shr-who { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5F646C; } #home2 .hp-shr-who .hp-chip-av, #home2 .hp-shr-to .hp-chip-av { width: 18px; height: 18px; font-size: 0.5625rem; } #home2 .hp-shr-to { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: #5F646C; } #home2 .hp-shr-card--theirs { border: 2px solid #4705D0; } #home2 .hp-shr-badge { justify-self: start; padding: 2px 8px; border-radius: 999px; background: #EEE9FB; color: #1E085D; font-size: 0.6875rem; font-weight: 700; } #home2 .hp-shr-arrow { width: 14px; height: 24px; } #home2 .hp-shr-arrow path { fill: none; stroke: #4705D0; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #home2 .hp-shr-mail { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.6875rem; font-weight: 600; color: #4A4458; } #home2 .hp-shr-mail svg { width: 14px; height: 14px; } /* Playing: each runs from its start to the finished picture */ @media (prefers-reduced-motion: no-preference) { #home2 .hp-fold.is-playing .hp-fold-ai { animation: hp-in .4s ease both; } #home2 .hp-fold.is-playing .hp-fold-note { animation: hp-grow .45s ease both; } #home2 .hp-fold.is-playing .hp-fold-row--a .hp-fold-note { animation-delay: .5s; } #home2 .hp-fold.is-playing .hp-fold-row--b .hp-fold-note { animation-delay: .85s; } #home2 .hp-fold.is-playing .hp-fold-row--a .hp-folder, #home2 .hp-fold.is-playing .hp-fold-row--b .hp-folder { animation: hp-flash .9s ease both; } #home2 .hp-fold.is-playing .hp-fold-row--a .hp-folder { animation-delay: .45s; } #home2 .hp-fold.is-playing .hp-fold-row--b .hp-folder { animation-delay: .8s; } #home2 .hp-fold.is-playing .hp-fold-row--a .hp-c-old, #home2 .hp-fold.is-playing .hp-fold-row--b .hp-c-old { animation: hp-out .2s ease both; } #home2 .hp-fold.is-playing .hp-fold-row--a .hp-c-new, #home2 .hp-fold.is-playing .hp-fold-row--b .hp-c-new { animation: hp-swap .2s ease both; } #home2 .hp-fold.is-playing .hp-fold-row--a .hp-c-old, #home2 .hp-fold.is-playing .hp-fold-row--a .hp-c-new { animation-delay: .6s; } #home2 .hp-fold.is-playing .hp-fold-row--b .hp-c-old, #home2 .hp-fold.is-playing .hp-fold-row--b .hp-c-new { animation-delay: .95s; } #home2 .hp-web.is-playing .hp-web-lines path { animation: hp-out-rev .35s ease-out both; } #home2 .hp-web.is-playing .hp-web-node { animation: hp-node .35s cubic-bezier(.3, 1.6, .5, 1) both; } #home2 .hp-web.is-playing .hp-web-lines path:nth-child(1), #home2 .hp-web.is-playing .hp-web-node--1 { animation-delay: .15s; } #home2 .hp-web.is-playing .hp-web-lines path:nth-child(2), #home2 .hp-web.is-playing .hp-web-node--2 { animation-delay: .45s; } #home2 .hp-web.is-playing .hp-web-lines path:nth-child(3), #home2 .hp-web.is-playing .hp-web-node--3 { animation-delay: .75s; } #home2 .hp-web.is-playing .hp-web-lines path:nth-child(4), #home2 .hp-web.is-playing .hp-web-node--4 { animation-delay: 1.05s; } #home2 .hp-web.is-playing .hp-web-node--1 { animation-delay: .4s; } #home2 .hp-web.is-playing .hp-web-node--2 { animation-delay: .7s; } #home2 .hp-web.is-playing .hp-web-node--3 { animation-delay: 1s; } #home2 .hp-web.is-playing .hp-web-node--4 { animation-delay: 1.3s; } #home2 .hp-shr.is-playing .hp-shr-to { animation: hp-in .35s ease .15s both; } #home2 .hp-shr.is-playing .hp-shr-arrow { animation: hp-in .3s ease .45s both; } #home2 .hp-shr.is-playing .hp-shr-card--theirs { animation: hp-in .45s ease .7s both; } #home2 .hp-shr.is-playing .hp-shr-badge { animation: hp-pop .35s cubic-bezier(.3, 1.6, .5, 1) 1.1s both; } #home2 .hp-shr.is-playing .hp-shr-mail { animation: hp-in .35s ease 1.4s both; } } @keyframes hp-grow { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } } @keyframes hp-flash { 0% { background: #F4F2EC; box-shadow: none; } 35% { background: #EEE9FB; box-shadow: inset 0 0 0 1.5px #4705D0; } 100% { background: #F4F2EC; box-shadow: none; } } @keyframes hp-out { from { opacity: 1; } to { opacity: 0; } } @keyframes hp-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes hp-out-rev { from { opacity: 0; } to { opacity: 1; } } @keyframes hp-node { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } #home2 .hp-shr-badge { transform-origin: left center; } @keyframes hp-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } /* Life card details (owner, 2026-11-06): a note can sit in a shared space (spaces are shared; folders never are), a note can be linked to the person it is about, and a company shows as a company link, not a "#" tag. */ #home2 .hp-pill-space { color: #1E085D; background: #EEE9FB; border-color: #DDD5F3; } #home2 .hp-pill-person { display: inline-flex; align-items: center; gap: 6px; padding-left: 3px; } #home2 .hp-pill-av { width: 18px; height: 18px; border-radius: 50%; background: #A8DFF7; display: grid; place-items: center; font-size: 0.5625rem; font-weight: 800; color: #1E085D; } #home2 .hp-rel-company i { background: #E3EEF5; color: #2C5A73; } /* Share card that plays (owner, 2026-11-06). At rest: the note is shared with Priya and Jo, it is in Priya's Humble and Jo has an email. Playing (about 3.6s): a plain note, the Humble hand presses the add-person icon, the share box picks Priya (on Humble) and adds Jo (not on Humble yet), the hand presses Add, then the note lands in both places. Someone without an account gets the email and can join to open the note (owner, 2026-11-06). Picture-like, so its positions are fixed in px. */ #home2 .hp-sh { position: relative; width: 100%; height: 280px; font-size: 0.75rem; color: #1E2230; } #home2 .hp-sh-note { position: absolute; inset: 0 0 auto 0; padding: 10px 46px 10px 10px; border-radius: 12px; background: #FDFCFA; border: 1px solid #E6E1D8; box-shadow: 0 8px 16px -14px rgba(30, 8, 93, .6); display: grid; gap: 6px; } #home2 .hp-sh-note b { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; line-height: 1.3; } #home2 .hp-sh-note b svg { width: 13px; height: 13px; flex-shrink: 0; color: #8A7A2A; } #home2 .hp-sh-add { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #1E085D; display: grid; place-items: center; color: #1E085D; background: #FDFCFA; } #home2 .hp-sh-add svg { width: 15px; height: 15px; } #home2 .hp-sh-shared { display: flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 600; color: #4A4458; } #home2 .hp-sh-shared .hp-chip-av, #home2 .hp-sh .hp-chip-av { width: 20px; height: 20px; font-size: 0.5625rem; } #home2 .hp-sh-av-grey { background: #E3E0D8 !important; color: #4A4458 !important; } #home2 .hp-sh-box { position: absolute; top: 86px; left: 0; right: 0; height: 186px; padding: 10px; border-radius: 14px; background: #ECEAE4; display: grid; align-content: start; gap: 6px; opacity: 0; } #home2 .hp-sh-box-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5F646C; } #home2 .hp-sh-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 9px; background: #FDFCFA; font-weight: 600; } #home2 .hp-sh-who { min-width: 0; display: grid; gap: 2px; justify-items: start; } #home2 .hp-sh-who > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #home2 .hp-sh-row small { font-size: 0.625rem; font-weight: 700; color: #4E6B3A; background: #E4EDD6; padding: 1px 6px; border-radius: 999px; } #home2 .hp-sh-row small.hp-sh-new { color: #6B4A00; background: #FBF1BF; } #home2 .hp-sh-btn { justify-self: end; margin-top: 2px; padding: 4px 14px; border-radius: 999px; background: #4705D0; color: #FDFCFA; font-weight: 700; } #home2 .hp-sh-out { position: absolute; top: 86px; left: 0; right: 0; display: grid; gap: 8px; } #home2 .hp-sh-dest { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #FDFCFA; border: 1px solid #E6E1D8; } #home2 .hp-sh-dest--1 { border: 2px solid #4705D0; } #home2 .hp-sh-dest > span:last-child { display: grid; gap: 1px; font-size: 0.6875rem; color: #5F646C; } #home2 .hp-sh-dest b { font-size: 0.75rem; color: #1E2230; } #home2 .hp-sh-mail { width: 20px; height: 20px; border-radius: 6px; background: #EEE9FB; display: grid; place-items: center; color: #1E085D; flex-shrink: 0; } #home2 .hp-sh-mail svg { width: 13px; height: 13px; } #home2 .hp-sh-hand { position: absolute; width: 34px; height: 34px; opacity: 0; pointer-events: none; z-index: 2; } #home2 .hp-sh-hand svg { display: block; transform-origin: 15px 3px; } @media (prefers-reduced-motion: no-preference) { #home2 .hp-sh.is-playing .hp-sh-shared { animation: hp-sh-in .3s ease 2.95s both; } #home2 .hp-sh.is-playing .hp-sh-box { animation: hp-sh-box 3s linear both; } #home2 .hp-sh.is-playing .hp-sh-row--1 { animation: hp-sh-in .3s ease 1.4s both; } #home2 .hp-sh.is-playing .hp-sh-row--2 { animation: hp-sh-in .3s ease 1.9s both; } #home2 .hp-sh.is-playing .hp-sh-btn { animation: hp-sh-press .3s ease 2.65s both; } #home2 .hp-sh.is-playing .hp-sh-add { animation: hp-sh-press .3s ease .95s both; } #home2 .hp-sh.is-playing .hp-sh-dest { animation: hp-sh-in .35s ease both; } #home2 .hp-sh.is-playing .hp-sh-dest--1 { animation-delay: 3.15s; } #home2 .hp-sh.is-playing .hp-sh-dest--2 { animation-delay: 3.45s; } #home2 .hp-sh.is-playing .hp-sh-hand { animation: hp-sh-hand 3s ease-in-out both; } #home2 .hp-sh.is-playing .hp-sh-hand svg { animation: hp-sh-tap 3s linear both; } } @keyframes hp-sh-box { 0%, 36% { opacity: 0; transform: translateY(8px); } 42%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } } @keyframes hp-sh-press { 0% { transform: scale(1); } 40% { transform: scale(.88); background: #EEE9FB; } 100% { transform: none; } } /* the fingertip lands on the add-person icon (about 1s) and then on Add (about 2.7s) */ @keyframes hp-sh-hand { 0% { opacity: 0; left: 40%; top: 150px; } 8% { opacity: 1; } 30%, 36% { left: calc(100% - 37px); top: 19px; } 80%, 92% { left: calc(100% - 52px); top: 240px; opacity: 1; } 100% { left: calc(100% - 52px); top: 240px; opacity: 0; } } @keyframes hp-sh-tap { 0%, 31% { transform: none; } 33% { transform: scale(.82); } 36%, 88% { transform: none; } 90% { transform: scale(.82); } 93%, 100% { transform: none; } } @keyframes hp-sh-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* a start state, so delayed items stay hidden until their turn */ /* Step 1 in a panel (owner, 2026-11-06). Wider than the other panels, so the scroll story keeps its two columns. The close bar has a fixed height, and the stage sticks just under it while you scroll inside the panel. */ #home2 .hp-panel-bar { box-sizing: border-box; min-height: 64px; } #home2 .hp-panel.hp-anywhere { width: min(78rem, 94vw); padding: 0; background: #EEE9FB; } #home2 .hp-panel.hp-anywhere .hp-plugs { padding-bottom: 48px; } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-panel.hp-flow.is-on .hp-flow-stage { top: 64px; height: calc(100vh - 64px); } } @media (max-width: 48em) { #home2 .hp-panel.hp-anywhere { width: 100%; } } /* Down-arrow button in the Step 1 panel (owner, 2026-11-06): a white circle that bounces gently while there is more to see, and moves the story on one place when clicked. The owner asked for this movement as an exception to "nothing moves on its own"; it stops on the last step, and reduced motion keeps it still (the story is off then anyway). */ #home2 .hp-flow-next { display: none; } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-flow.is-on .hp-flow-next { display: grid; place-items: center; width: 52px; height: 52px; margin: 18px auto 0; padding: 0; border: 0; border-radius: 50%; background: #FDFCFA; color: #1E085D; box-shadow: 0 10px 24px -12px rgba(30, 8, 93, .55); cursor: pointer; animation: hp-bounce 1.6s ease-in-out infinite; transition: opacity .3s ease; } #home2 .hp-flow.is-on .hp-flow-next svg { width: 24px; height: 24px; } #home2 .hp-flow.is-on .hp-flow-next:hover { color: #4705D0; } #home2 .hp-flow.is-on .hp-flow-next:focus-visible { outline: 3px solid #4705D0; outline-offset: 3px; } #home2 .hp-flow.is-on[data-step="4"] .hp-flow-next { opacity: 0; pointer-events: none; animation: none; } } @keyframes hp-bounce { 0%, 100% { transform: none; } 50% { transform: translateY(7px); } } /* Phone arrows on the life cards (owner, 2026-11-06): preview.js draws each arrow from just after the last handwritten word, curving down to the top middle of the picture below. Each line is marked 100 long (pathLength), so the dash always matches and the arrow still draws itself in. Computers keep the arrow beside the note, pointing into the card. */ @media (max-width: 56em) { #home2 .hp-card-side > p.hp-scribble { padding-right: 0; margin-bottom: 40px; } /* room for the arrow to drop down */ #home2 .hp-scribble-arrow.is-drawn { right: auto; bottom: auto; transform: none; } #home2 .hp-scribble-arrow.is-drawn .hp-arrow-line { stroke-dasharray: 100; } #home2 .hp-scribble-arrow.is-drawn .hp-arrow-head { stroke-dasharray: 100; } #home2 .hp-anim .hp-scribble-arrow.is-drawn .hp-arrow-line { stroke-dashoffset: 100; } #home2 .hp-anim .hp-scribble-arrow.is-drawn .hp-arrow-head { stroke-dashoffset: 100; } } /* "How Humble works" cards look clickable (owner, 2026-11-07): the whole card opens its step, and a bold ink arrow sits right after the title on every screen (no circle). On hover the arrow nudges right and the card lifts; pressing dips the card slightly. */ #home2 #how-it-works .steps3-go { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; color: #1E085D; transition: transform .2s ease; } #home2 #how-it-works .steps3-item { transition: box-shadow .15s ease, transform .15s ease; } @media (hover: hover) { #home2 #how-it-works .steps3-item:hover { transform: translateY(-3px); } #home2 #how-it-works .steps3-item:hover .steps3-go { transform: translateX(4px); } } #home2 #how-it-works .steps3-item:active { transform: scale(.985); } @media (prefers-reduced-motion: reduce) { #home2 #how-it-works .steps3-item, #home2 #how-it-works .steps3-go { transition: none; transform: none !important; } } #home2 #how-it-works .steps3-jump:hover { color: inherit; text-decoration: none; } /* the lift and the arrow nudge show it is clickable */ /* Link card that plays (owner, 2026-11-07): the real note (yellow header, cream body, Related items row). Andie, Tidewell, the proposal and her LinkedIn page float in one at a time: each starts small on the right, circles round as it grows, then drops into the note and becomes a pill. The pink Humble by the note gives a small hop as each one lands. At rest, and with reduced motion, the note shows its four pills. Picture-like, so positions are fixed. */ #home2 .hp-lnk { position: relative; width: 100%; height: 290px; } #home2 .hp-lnk-note { position: absolute; left: 0; top: 30px; width: 80%; border-radius: 14px; overflow: hidden; background: #FAF3D3; box-shadow: 0 14px 28px -20px rgba(30, 8, 93, .55); } #home2 .hp-lnk-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #F3E28A; font-size: 0.75rem; font-weight: 700; color: #1E2230; } #home2 .hp-lnk-head svg { width: 14px; height: 14px; } #home2 .hp-lnk-body { display: grid; gap: 4px; padding: 9px 10px 11px; font-size: 0.75rem; color: #1E2230; } #home2 .hp-lnk-body b { font-size: 0.8125rem; line-height: 1.3; } #home2 .hp-lnk-sub { color: #6B6352; } #home2 .hp-lnk-label { margin-top: 4px; font-size: 0.625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B6352; } #home2 .hp-lnk-pills { gap: 5px; } #home2 .hp-lnk-pill { font-size: 0.6875rem; } #home2 .hp-lnk-pill > span { padding: 4px 7px; max-width: 9rem; } #home2 .hp-lnk-pill i { padding: 0 5px; } #home2 .hp-lnk-pill i img { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; } #home2 .hp-lnk-k--company i { background: #E3EEF5; color: #2C5A73; } #home2 .hp-lnk-k--task i { background: #E4EDD6; color: #4E6B3A; } #home2 .hp-lnk-k--person i { background: #EEE9FB; } #home2 .hp-lnk-k--link i { background: #EEF3F8; } #home2 .hp-lnk-humble { position: absolute; left: calc(80% - 30px); top: 6px; width: 44px; height: 44px; transform: rotate(8deg); } #home2 .hp-lnk-orb { position: absolute; left: 82%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; display: grid; place-items: center; background: #FDFCFA; box-shadow: 0 8px 18px -10px rgba(30, 8, 93, .6); color: #1E085D; opacity: 0; } #home2 .hp-lnk-orb svg { width: 18px; height: 18px; } #home2 .hp-lnk-orb img { width: 22px; height: 22px; object-fit: contain; } #home2 .hp-lnk-orb.hp-lnk-k--person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } #home2 .hp-lnk-orb.hp-lnk-k--company { background: #E3EEF5; color: #2C5A73; } #home2 .hp-lnk-orb.hp-lnk-k--task { background: #E4EDD6; color: #4E6B3A; } @media (max-width: 30em) { #home2 .hp-lnk { height: 250px; } #home2 .hp-lnk-note { width: 74%; } #home2 .hp-lnk-humble { left: calc(74% - 30px); } } @media (prefers-reduced-motion: no-preference) { #home2 .hp-lnk.is-playing .hp-lnk-orb { animation: hp-lnk-orbit 1.5s cubic-bezier(.45, 0, .3, 1) both; } #home2 .hp-lnk.is-playing .hp-lnk-pill { animation: hp-lnk-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; } #home2 .hp-lnk.is-playing .hp-lnk-orb--1 { animation-delay: .2s; } #home2 .hp-lnk.is-playing .hp-lnk-pill--1 { animation-delay: 1.6s; } #home2 .hp-lnk.is-playing .hp-lnk-orb--2 { animation-delay: .95s; } #home2 .hp-lnk.is-playing .hp-lnk-pill--2 { animation-delay: 2.35s; } #home2 .hp-lnk.is-playing .hp-lnk-orb--3 { animation-delay: 1.7s; } #home2 .hp-lnk.is-playing .hp-lnk-pill--3 { animation-delay: 3.1s; } #home2 .hp-lnk.is-playing .hp-lnk-orb--4 { animation-delay: 2.45s; } #home2 .hp-lnk.is-playing .hp-lnk-pill--4 { animation-delay: 3.85s; } #home2 .hp-lnk.is-playing .hp-lnk-humble { animation: hp-lnk-hop 4.3s ease both; } } /* small on the right, up and round the top as it grows, then down into the Related items row and shrinking away */ @keyframes hp-lnk-orbit { 0% { left: 92%; top: 92%; transform: scale(.35); opacity: 0; } 20% { left: 93%; top: 55%; transform: scale(.75); opacity: 1; } 45% { left: 76%; top: 6%; transform: scale(1.05); opacity: 1; } 70% { left: 50%; top: 30%; transform: scale(.95); opacity: 1; } 100% { left: 32%; top: 72%; transform: scale(.3); opacity: 0; } } @keyframes hp-lnk-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } /* a hop as each item lands (about 1.6s, 2.35s, 3.1s and 3.85s into 4.3s) */ @keyframes hp-lnk-hop { 0%, 34% { transform: rotate(8deg) translateY(0); } 37% { transform: rotate(-4deg) translateY(-6px); } 40%, 52% { transform: rotate(8deg) translateY(0); } 55% { transform: rotate(-4deg) translateY(-6px); } 58%, 69% { transform: rotate(8deg) translateY(0); } 72% { transform: rotate(-4deg) translateY(-6px); } 75%, 86% { transform: rotate(8deg) translateY(0); } 89% { transform: rotate(-8deg) translateY(-10px); } 94%, 100% { transform: rotate(8deg) translateY(0); } } /* ---------- Steps 2 and 3, one at a time (owner, 2026-11-07) ---------- Like the Step 1 panel: on computers with a tall enough screen, each panel shows one thing large at a time. Step 2 goes folders, link, share. Step 3 goes Humble Home, browser, AI briefing, reminders (it used to be tabs). Scroll, or press the bouncing down arrow, to move on; each picture plays as it arrives. Phones, short screens and reduced motion get the plain list. preview.js turns this on with .is-on and marks the one showing with .is-current. */ #home2 .hp-rd-slides { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } #home2 .hp-rd-slide { background: #FDFCFA; border: 1px solid #DCE8B5; border-radius: 24px; padding: 20px 20px 24px; display: grid; gap: 16px; } #home2 .hp-rd-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.375rem; line-height: 1.3; color: var(--hp-ink); } #home2 .hp-rd-ic svg { display: block; width: 26px; height: 26px; } #home2 .hp-rd-slide .hp-pane-text { margin: 8px 0 0; font-size: 1rem; color: var(--hp-muted); } #home2 .hp-rd-pic { border-radius: 16px; padding: 20px; } #home2 .hp-rd-slide--met .hp-rd-pic { background: #FDE3EA; } #home2 .hp-rd-slide--contacts .hp-rd-pic { background: #D3ECF9; } #home2 .hp-rd-slide--ai .hp-rd-pic { background: #E4DAFA; } #home2 .hp-rd-slide--notes .hp-rd-pic { background: #FBF1BF; } #home2 .hp-rd-pic .tp-annotated { max-width: 36rem; margin: 0 auto; } #home2 .hp-rd-pic .hp-chat { font-size: 0.875rem; } #home2 .hp-seq-next { display: none; } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-seq.is-on { padding-bottom: 0; } #home2 .hp-seq.is-on .hp-seq-track { height: calc(100vh + var(--hp-seq-n, 3) * 60vh); } #home2 .hp-seq.is-on .hp-seq-stage { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; padding-top: 8px; padding-bottom: 16px; box-sizing: border-box; } #home2 .hp-seq.is-on .hp-head { margin-bottom: clamp(16px, 3vh, 32px); } #home2 .hp-seq.is-on .hp-seq-slides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } #home2 .hp-seq.is-on .hp-seq-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; column-gap: 36px; row-gap: 10px; align-items: start; align-self: center; padding: 28px; opacity: 0; transform: translateY(32px); transition: opacity .45s ease, transform .6s cubic-bezier(.4, 0, .2, 1); pointer-events: none; } #home2 .hp-seq.is-on .hp-seq-slide.is-current { opacity: 1; transform: none; pointer-events: auto; } /* Step 2: words on the left, the picture large on the right */ #home2 .hp-seq.is-on .hp-org-card .hp-org-pic { grid-column: 2; grid-row: 1 / 3; min-height: 17rem; } #home2 .hp-seq.is-on .hp-org-card h3 { grid-column: 1; grid-row: 1; margin: 0; font-size: 1.625rem; } #home2 .hp-seq.is-on .hp-org-card > p { grid-column: 1; grid-row: 2; font-size: 1.0625rem; } /* Step 3: the same, with the way it comes back as the title */ #home2 .hp-seq.is-on .hp-rd-text { grid-column: 1; grid-row: 1 / 3; } #home2 .hp-seq.is-on .hp-rd-title { font-size: 1.625rem; } #home2 .hp-seq.is-on .hp-rd-slide .hp-pane-text { font-size: 1.0625rem; } #home2 .hp-seq.is-on .hp-rd-pic { grid-column: 2; grid-row: 1 / 3; padding: 24px; } #home2 .hp-seq.is-on .hp-rd-pic .tp-browser-body { min-height: 0; } /* no empty space under the profile, so it fits shorter screens */ #home2 .hp-seq.is-on .hp-rd-pic, #home2 .hp-seq.is-on .hp-org-card .hp-org-pic { align-self: center; } #home2 .hp-seq.is-on .hp-seq-next { display: grid; place-items: center; width: 52px; height: 52px; margin: 18px auto 0; padding: 0; border: 0; border-radius: 50%; background: #FDFCFA; color: #1E085D; box-shadow: 0 10px 24px -12px rgba(30, 8, 93, .55); cursor: pointer; animation: hp-bounce 1.6s ease-in-out infinite; transition: opacity .3s ease; flex-shrink: 0; } #home2 .hp-seq.is-on .hp-seq-next svg { width: 24px; height: 24px; } #home2 .hp-seq.is-on .hp-seq-next:hover { color: #4705D0; } #home2 .hp-seq.is-on .hp-seq-next:focus-visible { outline: 3px solid #4705D0; outline-offset: 3px; } #home2 .hp-seq.is-on.is-last .hp-seq-next { opacity: 0; pointer-events: none; animation: none; } } /* "Play again" (owner, 2026-11-07): each picture plays once; then this button shows in the middle of it. It is large and see-through (white at 40% with a light blur; owner asked for more see-through), so the finished picture shows through. The text is 19px bold (large text, needs 3:1): ink stays above 3:1 even over the darkest part of a picture and is about 9:1 over the light parts it usually sits on. The hover state is less see-through. 56px tall so it is easy to tap. */ #home2 .hp-has-replay { position: relative; } #home2 .hp-replay { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 26px 0 20px; border: 1px solid rgba(30, 8, 93, .12); border-radius: 999px; background: rgba(253, 252, 250, .4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: #1E085D; font: inherit; font-size: 1.1875rem; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 24px -16px rgba(30, 8, 93, .45); cursor: pointer; animation: hp-fade .3s ease; } #home2 .hp-replay[hidden] { display: none; } #home2 .hp-replay svg { width: 24px; height: 24px; flex-shrink: 0; } #home2 .hp-replay:hover { color: #4705D0; background: rgba(253, 252, 250, .85); } #home2 .hp-replay:focus-visible { outline: 3px solid #4705D0; outline-offset: 2px; } /* Content that softly appears as you scroll (owner, 2026-11-07). preview.js adds .hp-rv to blocks below the fold and .is-in as each arrives; both go once it has settled. Never with reduced motion, and print shows it all. */ @media (prefers-reduced-motion: no-preference) { #home2 .hp-rv { opacity: 0 !important; transform: translateY(28px) !important; transition: opacity .7s ease var(--hp-rv-d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--hp-rv-d, 0ms) !important; } #home2 .hp-rv.is-in { opacity: 1 !important; transform: none !important; } } @media print { #home2 .hp-rv { opacity: 1 !important; transform: none !important; } } /* Inside the step panels, the parts arrive like the page's soft scroll-in (owner, 2026-11-07). On computers each part of the one-at-a-time story now comes in as the title, then the words, then the picture, each rising a little as it fades in (same distance and timing as the page). The part leaving simply fades out. The panel heading does the same when the panel opens. Never with reduced motion (the story is off then anyway). */ @keyframes hp-rv-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { #home2 .hp-panel[open] .hp-head > * { animation: hp-rv-in .8s cubic-bezier(.2, .7, .2, 1) both; } #home2 .hp-panel[open] .hp-head > :nth-child(2) { animation-delay: .1s; } #home2 .hp-panel[open] .hp-head > :nth-child(3) { animation-delay: .2s; } } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-seq.is-on .hp-seq-slide { transform: none; transition: opacity .4s ease; } #home2 .hp-flow.is-on .hp-src:not(.is-docked) { transform: none; } #home2 .hp-flow.is-on .hp-src.is-current > *, #home2 .hp-seq.is-on .hp-org-card.is-current > *, #home2 .hp-seq.is-on .hp-rd-slide.is-current .hp-rd-title, #home2 .hp-seq.is-on .hp-rd-slide.is-current .hp-pane-text, #home2 .hp-seq.is-on .hp-rd-slide.is-current > .hp-rd-pic { animation: hp-rv-in .8s cubic-bezier(.2, .7, .2, 1) .15s both; } #home2 .hp-flow.is-on .hp-src.is-current > .hp-src-text, #home2 .hp-seq.is-on .hp-org-card.is-current > p, #home2 .hp-seq.is-on .hp-rd-slide.is-current .hp-pane-text { animation-delay: .3s; } #home2 .hp-flow.is-on .hp-src.is-current > .hp-src-pic, #home2 .hp-seq.is-on .hp-org-card.is-current > .hp-org-pic, #home2 .hp-seq.is-on .hp-rd-slide.is-current > .hp-rd-pic { animation-delay: .45s; } } /* ---------- Use cases in pop-ups (owner, 2026-11-08) ---------- Each "What people use Humble for" card opens its use case in a panel, like the "How Humble works" steps, so you do not leave the page. The four steps come from the use case's own page and show one at a time on computers (scroll, or press the bouncing arrow); phones get the steps as a list. Each panel takes the pale version of its card's icon colour. Ink text is at least 14.5:1 and the purple eyebrow and links at least 8.2:1 on all five. */ #home2 .hp-panel.hp-uc { background: var(--uc-bg); } #home2 .hp-uc--inbox { --uc-bg: #EEF5E3; --uc-pic: #DBE8C6; } #home2 .hp-uc--meet { --uc-bg: #E4F4FC; --uc-pic: #C6E9F9; } #home2 .hp-uc--ideas { --uc-bg: #FBF5D8; --uc-pic: #F6EAAE; } #home2 .hp-uc--cal { --uc-bg: #FFEAF0; --uc-pic: #FED3DE; } #home2 .hp-uc--people { --uc-bg: #F0ECFA; --uc-pic: #E2DBF6; } #home2 .hp-uc h2 { margin: 0 0 16px; color: var(--hp-ink); } #home2 .hp-uc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } #home2 .hp-uc .hp-uc-slide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; background: #FDFCFA; border-radius: 24px; padding: 24px; } #home2 .hp-uc .hp-uc-slide .ucx-step-text { justify-self: start; max-width: none; } #home2 .hp-uc .hp-uc-slide .ucx-step-pic { order: 0; border-radius: 16px; background: var(--uc-pic); } #home2 .hp-uc .hp-uc-slide .ucx-step-pic::before { display: none; } /* the tinted box replaces the page's circle */ #home2 .hp-uc .ucx-prompt .copy-field-text { max-height: 8.5rem; overflow-y: auto; font-size: 0.9375rem; } /* long prompts scroll in their box */ #home2 .hp-uc-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-seq.is-on .hp-uc-slide .ucx-step-text { grid-column: 1; grid-row: 1 / 3; align-self: center; } #home2 .hp-seq.is-on .hp-uc-slide .ucx-step-pic { grid-column: 2; grid-row: 1 / 3; align-self: center; } #home2 .hp-seq.is-on .hp-uc-slide.is-current > .ucx-step-text > * { animation: hp-rv-in .8s cubic-bezier(.2, .7, .2, 1) .15s both; } #home2 .hp-seq.is-on .hp-uc-slide.is-current > .ucx-step-text > :nth-child(n+3) { animation-delay: .3s; } #home2 .hp-seq.is-on .hp-uc-slide.is-current > .ucx-step-pic { animation: hp-rv-in .8s cubic-bezier(.2, .7, .2, 1) .45s both; } } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-seq.is-on.hp-uc .hp-lead { font-size: 1rem; } /* a little smaller, so the steps get the room */ #home2 .hp-seq.is-on .hp-uc-slide .ucx-step-pic { padding: 24px; } } #home2 .hp-uc .ucx-step h3 { margin: 0 0 10px; } /* Sections alternate (owner, 2026-11-08; docs/arch/colour-system.md): the light sections in the middle of the page take turns between greige #F4F2ED and the lighter #F9F8F4. Life cards greige, How Humble works lighter, use cases greige; the teams box runs on from the use cases with no gap, so it keeps their colour. */ #home2 #how-it-works { background: #F9F8F4; } /* Step dots and the guide button (owner, 2026-11-08). In each one-at-a-time story a row of dots sits under the pictures: one per step, the current one a filled ink pill, the others ink rings (ink on the panel colours is at least 14:1). Each dot is a 24px button that jumps to its step. The guide link is a secondary button right under the steps: on computers it takes the down arrow's place on the last step, so you never scroll to find it; on phones it ends the list. */ #home2 .hp-dots { display: none; } #home2 .hp-panel-foot a:not([class]) { color: #4705D0; } #home2 .hp-uc-foot { align-items: center; } #home2 .hp-foot-story { display: none; } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-seq.is-on .hp-dots, #home2 .hp-flow.is-on .hp-dots { display: flex; justify-content: center; gap: 2px; margin: 14px 0 0; } #home2 .hp-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; } #home2 .hp-dot::before { content: ""; width: 10px; height: 10px; border-radius: 999px; border: 2px solid #1E085D; box-sizing: border-box; transition: width .25s ease, background-color .25s ease; } #home2 .hp-dot[aria-current]::before { width: 22px; background: #1E085D; } #home2 .hp-dot:hover::before { background: #4705D0; border-color: #4705D0; } #home2 .hp-dot:focus-visible { outline: 3px solid #4705D0; outline-offset: 1px; } /* the guide button replaces the arrow on the last step */ #home2 .hp-seq.is-on .hp-seq-stage .hp-panel-foot { display: none; margin: 18px 0 0; } #home2 .hp-seq.is-on.is-last .hp-seq-stage .hp-panel-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 28px; animation: hp-fade .4s ease; } #home2 .hp-seq.is-on.is-last .hp-seq-next { display: none; } #home2 .hp-flow.is-on[data-step="4"] .hp-foot-story { display: block; margin: 18px 0 0; text-align: center; animation: hp-fade .4s ease; } #home2 .hp-flow.is-on[data-step="4"] .hp-flow-next { display: none; } } /* Step numbers in the use case pop-ups (owner, 2026-11-08): purple is for things to click, so the number is no longer a purple circle. It is a small, thin "01" above the step's title, in a soft ink (#4A4458, 9.1:1 on the card). The use case pages themselves are unchanged. */ #home2 .hp-uc .ucx-step-num { display: block; width: auto; height: auto; margin: 0 0 6px; border-radius: 0; background: none; font-family: 'Lexend', sans-serif; font-size: 0.875rem; font-weight: 400; letter-spacing: .12em; line-height: 1.2; color: #4A4458; } /* Up next, Previous and Get started (owner, 2026-11-08). At the end of each pop-up an "Up next" card opens the next use case (or the next step of "How Humble works") in place, like the next video at the end of one. Previous goes back one. The last use case offers all use cases; Step 3 ends with Get started. The full guide is a small link under each pop-up's intro, and every pop-up has Get started in its top bar. Ink on the white card is at least 9:1; purple links at least 8.2:1 on the panel colours. */ #home2 .hp-guide-link { margin: 10px 0 0; font-size: 0.9375rem; font-weight: 700; } #home2 .hp-guide-link a { color: #4705D0; } #home2 .hp-end { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: left; } #home2 .hp-upnext { display: flex; align-items: center; gap: 14px; width: min(100%, 30rem); box-sizing: border-box; padding: 14px 18px; border-radius: 18px; background: #FDFCFA; border: 1px solid rgba(30, 8, 93, .12); color: #1E085D; text-decoration: none; box-shadow: 0 12px 26px -20px rgba(30, 8, 93, .6); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } #home2 .hp-upnext:hover { border-color: #1E085D; box-shadow: 0 16px 30px -20px rgba(30, 8, 93, .7); } #home2 .hp-upnext:focus-visible { outline: 3px solid #4705D0; outline-offset: 3px; } #home2 .hp-upnext-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #1E085D; } #home2 .hp-upnext-ic svg { width: 22px; height: 22px; } #home2 .hp-upnext-main { display: grid; gap: 2px; min-width: 0; flex: 1; } #home2 .hp-upnext-label { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4A4458; } #home2 .hp-upnext-title { font-family: 'Lexend', sans-serif; font-size: 1.125rem; font-weight: 700; line-height: 1.3; } #home2 .hp-upnext-sub { font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: #4A4458; } #home2 .hp-upnext-go { flex-shrink: 0; width: 22px; height: 22px; transition: transform .2s ease; } #home2 .hp-prev { font-size: 0.9375rem; font-weight: 700; color: #4705D0; } #home2 .hp-end-cta { min-height: 52px; padding: 14px 32px; font-size: 1.0625rem; } #home2 .hp-bar-cta { margin-left: auto; min-height: 40px; padding: 8px 18px; font-size: 0.9375rem; } #home2 .hp-panel-bar .hp-panel-close { margin-left: 4px; } @media (prefers-reduced-motion: no-preference) { #home2 .hp-upnext:hover { transform: translateY(-2px); } #home2 .hp-upnext:hover .hp-upnext-go { transform: translateX(3px); } } @media (max-width: 30em) { #home2 .hp-bar-cta { padding: 8px 14px; font-size: 0.875rem; } } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-seq.is-on.is-last .hp-seq-stage .hp-end { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; margin: 16px 0 0; } #home2 .hp-flow.is-on[data-step="4"] .hp-foot-story { display: flex; } } @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-seq.is-on .hp-upnext, #home2 .hp-flow.is-on .hp-upnext { padding: 10px 16px; } #home2 .hp-seq.is-on .hp-upnext-ic { width: 38px; height: 38px; } #home2 .hp-seq.is-on .hp-head, #home2 .hp-flow.is-on .hp-flow-head { margin-bottom: clamp(12px, 2.5vh, 32px); } } @media (min-width: 56.01em) and (max-height: 56em) and (prefers-reduced-motion: no-preference) { #home2 .hp-seq.is-on .hp-upnext-sub { display: none; } /* shorter screens: the title is enough */ } @media (min-width: 56.01em) and (max-height: 52em) and (prefers-reduced-motion: no-preference) { /* shorter laptop screens: the small label above the title goes (the title says it), and the gaps tighten */ #home2 .hp-seq.is-on .hp-head .hp-eyebrow, #home2 .hp-flow.is-on .hp-flow-head .hp-eyebrow { display: none; } #home2 .hp-seq.is-on .hp-dots, #home2 .hp-flow.is-on .hp-dots { margin-top: 8px; } #home2 .hp-seq.is-on.is-last .hp-seq-stage .hp-end { margin-top: 10px; } #home2 .hp-flow.is-on[data-step="4"] .hp-foot-story { margin-top: 10px; } } /* if a story is ever taller than the screen, keep its title in view rather than cutting the top off (owner, 2026-11-08) */ @media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { #home2 .hp-seq.is-on .hp-seq-stage, #home2 .hp-panel.hp-flow.is-on .hp-flow-stage { justify-content: safe center; } } #home2 .hp-end.hp-foot-story { display: none; } /* Step 1: Up next shows on its last step only (the rule above turns it on) */ /* Keep scrolling into the next pop-up (owner, 2026-11-08): the Up next card fills from the left as you carry on scrolling at the bottom (preview.js sets --pull from 0 to 1). Step 1 also keeps its Up next at the very bottom, under the other tools, so there is one to scroll into. */ #home2 .hp-upnext { position: relative; overflow: hidden; } #home2 .hp-upnext::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--pull, 0) * 100%); background: #1E085D; transition: width .15s ease-out; } /* Centred hero (owner, 2026-11-09): the quotes are gone, so the words sit in one centred column. */ #home2 .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } #home2 .hero-grid .hero-copy { max-width: 56rem; display: flex; flex-direction: column; align-items: center; } #home2 .hero-grid h1 { max-width: none; } #home2 .hero p.sub { margin-left: auto; margin-right: auto; } #home2 .hero .actions { justify-content: center; } /* Intro film section (owner, 2026-11-09): the film under the hero, in its own centred section on the film's dark purple. */ #home2 .hp-film { background: var(--purple-800, #1E085D); padding: 72px 0 80px; text-align: center; } #home2 .hp-film-title { margin: 0 0 32px; color: #FCFAF7; font-size: clamp(1.75rem, 3.4vw, 2.5rem); text-wrap: balance; } #home2 .hp-film .ih { margin: 0 auto; } @media (max-width: 48em) { #home2 .hp-film { padding: 48px 0 56px; } #home2 .hp-film-title { margin-bottom: 20px; } }