/* The landing page, built to docs/design/01-landing-page.png. * * Every colour comes from a token, so the audience switch in the nav repaints * the whole page by setting one attribute on . Nothing here hardcodes * raspberry. */ /* ------------------------------------------------------------------- nav --- */ .nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px var(--gutter); background: color-mix(in srgb, var(--tint) 72%, transparent); backdrop-filter: blur(14px); } .nav-brand { display: flex; align-items: center; gap: 12px; } .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 22px; } .nav-right a { color: var(--ink); font-weight: 600; font-size: 15px; } .nav-right a:hover { color: var(--accent); } /* The audience switch sits dead centre, per the board. */ .switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--card) 70%, transparent); } .switch button { border: 0; background: none; padding: 9px 18px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; } .switch button[aria-pressed='true'] { background: var(--card); color: var(--ink); } .nav .btn { min-height: 44px; padding: 0 20px; font-size: 15px; } @media (max-width: 860px) { .nav { grid-template-columns: 1fr auto; gap: 10px; } .switch { order: 3; grid-column: 1 / -1; justify-self: center; margin-top: 6px; } /* Hide the text links, never the call to action. Dropping the button left a phone with no way into the product from the nav at all. */ .nav-right a:not(.btn) { display: none; } .nav .btn { min-height: 40px; padding: 0 16px; font-size: 14px; } .wordmark { font-size: 17px; } } /* ------------------------------------------------------------------ hero --- */ .hero { position: relative; text-align: center; padding: 64px var(--gutter) 0; background: var(--wash); overflow: hidden; } /* The phone mock is a screenshot of the product, not part of the centred hero copy, so it does not inherit the centring. */ .hero .phone, .message .phone { text-align: left; } /* Confetti has nowhere safe to live on a phone: the text column runs the full width minus a 20px gutter, so any dot in the margin is within 24px of copy, and the direction forbids that outright. Desktop has real margins; a phone does not, so the dots simply do not appear there. */ @media (max-width: 900px) { .hero > .confetti { display: none; } } .hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; } .hero h1 { margin: 18px 0 0; } .hero p.lede { margin: 18px auto 0; color: var(--muted); font-size: 18px; max-width: 52ch; } .hero-actions { display: flex; gap: 22px; align-items: center; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .text-link { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; } /* The phone with photos drifting around it. The photos are decorative and sit behind the phone; on a narrow screen they are hidden rather than crushed, because a tilted photo tile under a headline is worse than none. */ .hero-stage { position: relative; margin: 52px auto 0; max-width: 1100px; min-height: 420px; display: grid; place-items: end center; } .phone { position: relative; z-index: 3; width: 280px; border-radius: 40px; padding: 10px; background: var(--ink); box-shadow: 0 30px 70px rgba(var(--ink-rgb), .28); } .phone-screen { border-radius: 32px; overflow: hidden; background: var(--ground); } .float { position: absolute; z-index: 1; width: 190px; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px rgba(var(--ink-rgb), .18); animation: drift 7s ease-in-out infinite alternate; } /* The aspect ratio lives on the slot, not the image, so a slot with no photo in it yet still holds its shape instead of collapsing to a bar. */ .float [data-slot] { aspect-ratio: 3 / 4; } [data-slot] > img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .float { display: none; } } /* --------------------------------------------------------------- sections --- */ .section { padding: var(--section) var(--gutter) 0; } .section-head { text-align: center; max-width: 720px; margin: 0 auto 42px; } .section-head .eyebrow { margin-bottom: 16px; } .section-head p { margin: 16px auto 0; color: var(--muted); } .wrap { max-width: 1180px; margin: 0 auto; } .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } } .feature { padding: 22px; display: flex; flex-direction: column; gap: 14px; } .feature .shot { border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 4 / 3; background: var(--tint); } .feature h3 { font-size: 22px; } .feature p { color: var(--muted); font-size: 15px; } /* A pill, not a number. The direction bans 01/02/03 markers outright. */ .pill { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); background: var(--tint); color: var(--accent); } .pill.dark { background: var(--ink); color: #fff; } /* ------------------------------------------------------------- the fan --- */ .fan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 940px; margin: 0 auto; } .fan .list { padding: 22px; } .fan .list:nth-child(1) { transform: rotate(-3deg); } .fan .list:nth-child(2) { transform: translateY(-14px); background: var(--ink); color: #fff; } .fan .list:nth-child(3) { transform: rotate(3deg); } .fan .list h4 { margin: 12px 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; } .fan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .fan li { display: flex; gap: 10px; align-items: center; font-size: 15px; } .fan .dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; background: var(--tint); } .fan .list:nth-child(2) .dot { background: rgba(255, 255, 255, .18); } .fan .list:nth-child(2) .muted { color: rgba(255, 255, 255, .62); } @media (max-width: 900px) { .fan { grid-template-columns: 1fr; } .fan .list { transform: none !important; } } /* ------------------------------------------------------------- message --- */ .message { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 52px; border-radius: var(--r-card); background: linear-gradient(120deg, var(--tint), var(--second-soft)); } .message h2 { font-size: 40px; } .message p { margin-top: 16px; color: var(--muted); } @media (max-width: 900px) { .message { grid-template-columns: 1fr; padding: 30px; } .message h2 { font-size: 30px; } } /* ------------------------------------------------------------- keepsake --- */ .keepsake { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } @media (max-width: 900px) { .keepsake { grid-template-columns: 1fr; } } .keepsake .card { padding: 22px; } .mosaic-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mosaic-4 [data-slot] { aspect-ratio: 1; border-radius: var(--r-chip); overflow: hidden; } /* The two keepsake cards are the same height, and the side card fills it: the three rows take the space they need and the closing block sits at the bottom rather than leaving the lower third of the card empty. */ .keepsake { align-items: stretch; } .keepsake .card { display: flex; flex-direction: column; } /* The rows take the spare height rather than being pushed to the ends of it. `space-between` on the card put the gap in the middle, which is the same hole in a different place. */ .keepsake-side .rows { flex: 1; justify-content: space-evenly; margin-top: 0; } .keepsake-side .rows .r { padding: 18px 0; } .keepsake-close { margin-top: 18px; padding-top: 20px; border-top: 1px solid rgba(var(--ink-rgb), .07); } .keepsake-close h3 { margin-bottom: 6px; } .keepsake-close p { font-size: 15px; } .rows { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .rows .r { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(var(--ink-rgb), .07); } .rows .r:last-child { border-bottom: 0; } .rows .r .muted { font-size: 14px; } .rows .tile-icon { width: 38px; height: 38px; flex: 0 0 auto; background-size: 19px 19px; } /* -------------------------------------------------------------- pricing --- */ /* Three tiers, same white card system as everything else. * * The recommended one is tint rather than accent: accent belongs to the button, * and a card that is entirely accent competes with the thing it is asking you * to press. It is also the only one whose button is solid, for the same reason. */ .tiers { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } @media (max-width: 900px) { .tiers { grid-template-columns: 1fr; max-width: 460px; } } .tier { position: relative; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 30px 26px 28px; display: flex; flex-direction: column; } .tier.recommended { background: var(--tint); } .tier-flag { position: absolute; top: -12px; left: 26px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); } .tier h3 { font-size: 22px; margin-bottom: 10px; } .tier .amount { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .tier .per { color: var(--muted); font-size: 14px; margin-top: 8px; min-height: 40px; } .tier-cta { margin: 18px 0 22px; } .tier-cta .btn { width: 100%; justify-content: center; } .tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .tier li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; } .tier .tick { color: var(--accent); font-weight: 800; flex: 0 0 auto; } .tiers-foot { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: 14px; } /* ----------------------------------------------------------- questions --- */ .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 42px; } .faq-grid article { padding: 24px 0; border-top: 1px solid rgba(var(--ink-rgb), .1); } .faq-grid h3 { font-size: 20px; line-height: 1.25; } .faq-grid p { margin-top: 9px; color: var(--muted); font-size: 16px; } @media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; gap: 0; } } /* --------------------------------------------------------------- closer --- */ .closer { text-align: center; padding: var(--section) var(--gutter); } .closer h2 { max-width: 16ch; margin: 0 auto 30px; } .foot { padding: 40px var(--gutter) 60px; text-align: center; color: var(--muted); font-size: 14px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; } .foot a { color: var(--muted); } .foot a:hover { color: var(--accent); } /* Photo slots with nothing in them yet. Not a grey box with a caption: a tinted panel that reads as part of the design until real frames land. */ .awaiting { display: grid; place-items: center; height: 100%; background: var(--tint); color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; min-height: 100%; } /* Under each paid tier. A gift code is a thing somebody was given, and the one moment they need to be told it works is while they are looking at a price. */ .tier-code { margin: -6px 0 14px; font-size: 13px; line-height: 1.35; color: var(--muted); } /* Early access, while hosting is invite only. */ dialog.early-access { width: min(460px, calc(100vw - 40px)); border: 0; border-radius: 28px; padding: 34px 30px 28px; background: var(--card); color: var(--ink); box-shadow: 0 1px 0 rgba(15, 42, 51, .04), 0 24px 60px rgba(15, 42, 51, .12); } dialog.early-access::backdrop { background: rgba(15, 42, 51, .38); } dialog.early-access h2 { margin: 6px 0 18px; font-size: 30px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; } .early-access-close { position: absolute; top: 12px; right: 14px; margin: 0; } .early-access-close button { border: 0; background: none; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; } .early-access-form { display: grid; gap: 8px; } .early-note { min-height: 1.5em; margin: 0; font-weight: 600; } .early-invite { margin: 14px 0 0; font-size: 14px; }