/* * Plarma landing — page styles. * * Extracted from index.html. These rules depend on the design tokens in * styles.css (the :root custom properties), which MUST be linked before this * file. Keep that load order in the . */ /* ============ Reset & base ============ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 66px; } body { font-family: var(--pl-font); color: var(--pl-text); background: var(--pl-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } h1, h2, h3 { color: var(--pl-ink); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; } p { text-wrap: pretty; } .wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; } /* ============ Buttons ============ */ .btn { font-family: var(--pl-font); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 0.95rem; line-height: 1; border: 1px solid transparent; border-radius: var(--pl-radius-pill); cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .1s, color .15s, border-color .15s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--pl-primary); color: #fff; padding: 13px 22px; box-shadow: 0 6px 18px -6px rgba(255, 107, 61, .55); } .btn-primary:hover { background: var(--pl-primary-light); box-shadow: 0 10px 26px -8px rgba(255, 107, 61, .6); } .btn-primary.lg { padding: 16px 28px; font-size: 1.02rem; } .btn-ghost { background: transparent; color: var(--pl-text); padding: 11px 16px; } .btn-ghost:hover { background: rgba(0, 0, 0, .05); } /* ============ Nav ============ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .5); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-bottom: 1px solid rgba(15, 23, 42, .07); } .nav-inner { display: flex; align-items: center; gap: 28px; height: 66px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.25rem; color: var(--pl-ink); } .brand-tile { width: 32px; height: 32px; border-radius: 9px; background: var(--pl-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.15rem; box-shadow: 0 2px 6px -1px rgba(255, 107, 61, .5); } .nav-links { display: flex; gap: 4px; margin-left: auto; } .nav-links a { color: var(--pl-text-muted); font-size: 0.92rem; font-weight: 500; padding: 8px 14px; border-radius: var(--pl-radius-pill); transition: color .15s, background .15s; } .nav-links a:hover { color: var(--pl-text); background: rgba(0, 0, 0, .04); } .nav-cta { margin-left: 6px; } .nav-toggle { display: none; } /* ============ Hero ============ */ .hero { padding: 28px 0 36px; text-align: center; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(64% 56% at 50% 0%, rgba(255, 107, 61, .30), transparent 75%), linear-gradient(180deg, #fff 0%, var(--pl-bg) 60%); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #ffe7de; color: #d4490f; font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: var(--pl-radius-pill); margin-bottom: 24px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pl-primary); box-shadow: 0 0 0 3px rgba(255, 107, 61, .22); } .hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 700; max-width: 14ch; margin: 0 auto; } .hero .sub { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--pl-text-muted); max-width: 56ch; margin: 22px auto 0; } .hero-cta { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 32px; flex-wrap: wrap; } .trustline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; color: var(--pl-text-muted); font-size: 0.86rem; } .trustline .sep { width: 4px; height: 4px; border-radius: 50%; background: #c3c7cd; } /* Browser frame */ .frame { background: #fff; border-radius: 14px; box-shadow: 0 40px 80px -32px rgba(15, 23, 42, .4), var(--pl-elevation); overflow: hidden; border: 1px solid rgba(15, 23, 42, .06); } .frame-bar { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 14px; background: #f6f7f9; border-bottom: 1px solid #eceef1; } .frame-dots { display: flex; gap: 7px; } .frame-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; } .frame-dots i:nth-child(1) { background: #ff5f57; } .frame-dots i:nth-child(2) { background: #febc2e; } .frame-dots i:nth-child(3) { background: #28c840; } .frame-url { flex: 1; max-width: 320px; height: 22px; background: #eceef1; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; gap: 7px; color: #9aa0a6; font-size: 0.72rem; } .frame-url svg { width: 11px; height: 11px; flex-shrink: 0; } .frame img { width: 100%; display: block; } /* ============ Connect carousel (showcase: how to connect) ============ */ .connect-carousel { position: relative; aspect-ratio: 1440 / 935; background: #f6f7f9; overflow: hidden; } .cc-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; } .cc-slide.cc-on { opacity: 1; visibility: visible; } .cc-pad { position: absolute; inset: 0; padding: clamp(16px, 3.4%, 36px); display: flex; flex-direction: column; } .cc-title { font-weight: 700; font-size: clamp(.9rem, 1.5vw, 1.15rem); color: var(--pl-text); margin-bottom: clamp(10px, 2%, 18px); } /* provider grid (slides 1 & 3) */ .cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4%, 14px); align-content: start; } .cc-prov { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: 10px; padding: clamp(8px, 1.4%, 14px); } .cc-prov img { width: clamp(20px, 2.4vw, 28px); height: clamp(20px, 2.4vw, 28px); object-fit: contain; border-radius: 6px; flex-shrink: 0; } .cc-prov > span { font-weight: 600; font-size: clamp(.72rem, 1.1vw, .92rem); color: var(--pl-text); flex: 1; } .cc-btn { font-size: clamp(.66rem, 1vw, .82rem); font-weight: 600; padding: clamp(4px, .8%, 8px) clamp(9px, 1.5%, 15px); border-radius: 7px; background: #eef1f5; color: var(--pl-text-muted); white-space: nowrap; } .cc-btn-hot { background: var(--pl-primary); color: #fff; box-shadow: 0 4px 14px -4px var(--pl-primary); } .cc-btn-ghost { background: transparent; border: 1px solid rgba(15, 23, 42, .14); } .cc-pill { font-size: clamp(.66rem, 1vw, .82rem); font-weight: 600; padding: clamp(4px, .8%, 8px) clamp(9px, 1.5%, 15px); border-radius: 7px; background: #d1fae5; color: #047857; white-space: nowrap; } .cc-prov-done { border-color: #6ee7b7; background: #f0fdf9; } /* consent (slide 2) */ .cc-consent { align-items: center; justify-content: center; text-align: center; background: #fff; } .cc-logos { display: flex; align-items: center; gap: clamp(10px, 2vw, 18px); margin-bottom: clamp(10px, 2%, 18px); } .cc-logos img { width: clamp(34px, 5vw, 54px); height: clamp(34px, 5vw, 54px); object-fit: contain; border-radius: 10px; } .cc-arrows { color: var(--pl-text-muted); font-size: clamp(1rem, 2vw, 1.5rem); } .cc-consent-title { font-weight: 700; font-size: clamp(.85rem, 1.5vw, 1.15rem); color: var(--pl-text); max-width: 22em; margin-bottom: clamp(12px, 2.4%, 22px); } .cc-scopes { display: grid; gap: clamp(6px, 1.2%, 11px); margin-bottom: clamp(14px, 2.8%, 24px); text-align: left; } .cc-scope { display: flex; align-items: center; gap: 9px; font-size: clamp(.72rem, 1.1vw, .92rem); color: var(--pl-text); } .cc-scope svg { width: clamp(13px, 1.6vw, 17px); height: clamp(13px, 1.6vw, 17px); color: #047857; flex-shrink: 0; } .cc-actions { display: flex; gap: 10px; } /* success toast (slide 3) */ .cc-toast { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-weight: 600; font-size: clamp(.74rem, 1.1vw, .92rem); padding: clamp(7px, 1.2%, 12px) clamp(11px, 1.8%, 16px); border-radius: 9px; margin-bottom: clamp(10px, 2%, 18px); } .cc-toast-ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #047857; color: #fff; font-size: .7rem; flex-shrink: 0; } /* step dots */ .cc-dots { position: absolute; left: 0; right: 0; bottom: clamp(8px, 1.6%, 16px); display: flex; justify-content: center; gap: 7px; z-index: 2; } .cc-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(15, 23, 42, .2); cursor: pointer; transition: background .25s, width .25s; } .cc-dot-on { background: var(--pl-primary); width: 20px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .cc-slide { transition: none; } } .hero-shot { max-width: 1040px; margin: 56px auto 0; } /* ============ Live board mock (recreated NotificationsView, no chrome) ============ */ .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; background: var(--pl-bg); } .bc { display: flex; flex-direction: column; border-radius: var(--pl-radius); overflow: hidden; box-shadow: var(--pl-elevation-sm); min-width: 0; text-align: left; } .bc-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #fff; } .bc-ico { width: 22px; height: 22px; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .bc-ico img { width: 14px; height: 14px; object-fit: contain; } .bc-name { font-weight: 700; font-size: 0.9rem; letter-spacing: -0.01em; } .bc-new { margin-left: auto; background: rgba(255, 255, 255, .92); color: #1d4ed8; font-size: 0.62rem; font-weight: 700; line-height: 1; padding: 3px 8px; border-radius: var(--pl-radius-pill); flex-shrink: 0; } .bc-body { display: flex; flex-direction: column; gap: 12px; padding: 12px; flex: 1; } /* Provider accents: gradient header + ~12% tinted column body + card top border */ .bc-asana .bc-head { background: linear-gradient(135deg, var(--pl-asana), #f06a6acc); } .bc-asana .bc-body { background: rgba(240, 106, 106, .12); } .bc-asana .nc { border-top-color: var(--pl-asana); } .bc-slack .bc-head { background: linear-gradient(135deg, var(--pl-slack), #4a154bcc); } .bc-slack .bc-body { background: rgba(74, 21, 75, .12); } .bc-slack .nc { border-top-color: var(--pl-slack); } .bc-gcal .bc-head { background: linear-gradient(135deg, var(--pl-gcal), #4285f4cc); } .bc-gcal .bc-body { background: rgba(66, 133, 244, .12); } .bc-gcal .nc { border-top-color: var(--pl-gcal); } .bc-jira .bc-head { background: linear-gradient(135deg, var(--pl-jira), #0052cccc); } .bc-jira .bc-body { background: rgba(0, 82, 204, .10); } .bc-jira .nc { border-top-color: var(--pl-jira); /* Blue "view registered" flash tint for this column's cards */ --flash-bg: rgba(0, 82, 204, .16); --flash-head: rgba(0, 82, 204, .24); } .bc-clickup .bc-head { background: linear-gradient(135deg, #7b68ee, #7b68eecc); } .bc-clickup .bc-body { background: rgba(123, 104, 238, .10); } .bc-clickup .nc { border-top-color: #7b68ee; } /* Notification card */ .nc { background: #fff; border-top: 3px solid #cbd5e1; border-radius: var(--pl-radius-sm); box-shadow: var(--pl-elevation); overflow: hidden; } .nc-head { padding: 6px 8px 7px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 5px; } .nc-head-top { display: flex; align-items: center; gap: 6px; } .nc-label { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 700; line-height: 1.3; color: #1e293b; } .nc-context { display: flex; flex-wrap: wrap; gap: 4px; } .nc-chip { background: #e2e8f0; color: #475569; font-size: 0.6rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.02em; } .nc-body { padding: 11px 12px; } .nc-content { font-size: 0.82rem; line-height: 1.5; color: #475569; } .nc-content b { color: #1e293b; font-weight: 700; } .nc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .nc-tag { font-size: 0.6rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.02em; } .t-assigned { background: #e0e7ff; color: #3730a3; } .t-comment { background: #dbeafe; color: #1d4ed8; } .t-mention { background: #fee2e2; color: #b91c1c; } .t-added { background: #dcfce7; color: #166534; } .nc-time { margin-left: auto; color: #94a3b8; font-size: 0.68rem; } .nc-time.sched { color: var(--pl-gcal); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .nc-time .ico-cal { width: 11px; height: 11px; flex-shrink: 0; } .nc-fav svg { width: 15px; height: 15px; fill: var(--pl-warning); display: block; } .nc-unread { background: var(--pl-danger); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: var(--pl-radius-pill); flex-shrink: 0; } .nc-stack { display: inline-flex; align-items: center; gap: 5px; color: #2563eb; font-size: 0.7rem; font-weight: 700; margin-bottom: 8px; } .nc-stack svg { width: 12px; height: 12px; flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { .nc-unread { animation: pulse-live 2.4s ease-in-out infinite; } } @keyframes pulse-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); } 50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); } } /* "View registered" flash — like the app when an unseen notification is seen. Washes the card + header with a translucent provider tint, then back. The tint here is the Slack column accent (var(--pl-slack)); JS adds .seen-flash. */ .nc-flash { --flash-bg: rgba(74, 21, 75, .18); --flash-head: rgba(74, 21, 75, .26); } .nc.seen-flash { animation: seen-flash-card 2.2s ease-out; } .nc.seen-flash .nc-head { animation: seen-flash-header 2.2s ease-out; } @keyframes seen-flash-card { 0% { background-color: #fff; } 25% { background-color: var(--flash-bg); } 100% { background-color: #fff; } } @keyframes seen-flash-header { 0% { background-color: #f8fafc; } 25% { background-color: var(--flash-head); } 100% { background-color: #f8fafc; } } /* ============ Live Jira demo board (showcase) ============ */ /* A single column inside the browser frame. Its cards start hidden and are played in one-by-one by JS (.arrived) when the column scrolls into view, each flashing (.seen-flash) as it lands — like notifications streaming in. */ .demo-board { display: flex; justify-content: center; padding: 24px; background: var(--pl-bg); } .demo-board .bc { width: 100%; max-width: 340px; } /* Cards stack from the top; collapsed cards take no space, so each new arrival expands above the others and pushes them down — newest on top. */ /* Fixed height = reserves room for all three cards up front, so the column never grows (and never shoves the page) as the last card lands. flex: none is required — the base .bc-body sets flex: 1 (flex-basis: 0%), which otherwise overrides height and collapses the empty body to 0. */ .demo-board .bc-body { flex: none; gap: 0; height: 440px; overflow: hidden; } .demo-board .nc { max-height: 0; margin-bottom: 0; opacity: 0; overflow: hidden; transform: translateY(-6px); transition: max-height .6s ease, margin-bottom .6s ease, opacity .45s ease, transform .45s ease; } .demo-board .nc.arrived { max-height: 280px; margin-bottom: 12px; opacity: 1; transform: none; } .demo-board .nc:last-child.arrived { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .demo-board .nc { max-height: none; margin-bottom: 12px; opacity: 1; transform: none; transition: none; } .demo-board .nc:last-child { margin-bottom: 0; } } /* On small phones the column drops below its 340px max-width (the wrap + board padding no longer leave room), so each card's text wraps onto more lines and the three stacked cards outgrow the 440px reserve — clipping the last one. Reserve a taller column there so all three fit. */ @media (max-width: 440px) { .demo-board .bc-body { height: 490px; } } /* On narrow screens the board scrolls horizontally, like the real app */ @media (max-width: 720px) { .board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; /* Without this, scroll-snap-align:start pulls the snapped column flush to the scrollport edge and eats the board's 16px gutter, so the first column (bc-asana) sticks to the left. Inset the snap area to match the padding so each snapped column keeps its gutter. */ scroll-padding-inline: 16px; } .bc { scroll-snap-align: start; } } /* ============ Section heads ============ */ .section-head { text-align: center; max-width: 60ch; margin: 0 auto 52px; } .kicker { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-primary); margin-bottom: 14px; } .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; } .section-head p { color: var(--pl-text-muted); font-size: 1.08rem; margin-top: 16px; } /* ============ Hero conveyor belt ============ */ /* Provider tiles ride a running belt from the left and dissolve into the Plarma inbox on the right - replaces the old static logo strip. */ .conveyor { margin: 30px auto 4px; max-width: 600px; display: flex; align-items: center; justify-content: center; } .belt { position: relative; flex: 1; min-width: 0; height: 62px; border-radius: 14px 5px 5px 14px; overflow: hidden; background: repeating-linear-gradient(90deg, #e7eaee 0 15px, #dfe3e8 15px 30px); box-shadow: inset 0 2px 5px rgba(15, 23, 42, .10), inset 0 -2px 5px rgba(15, 23, 42, .06); animation: beltTexture 1.4s linear infinite; /* Each tile fades out on its own as it reaches either edge - so icons dissolve one by one into the inbox instead of vanishing as a block. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 44px), transparent 100%); } /* top / bottom rails */ .belt::before, .belt::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; z-index: 3; } .belt::before { top: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .12), transparent); } .belt::after { bottom: 0; background: linear-gradient(0deg, rgba(15, 23, 42, .12), transparent); } .belt-track { position: absolute; top: 50%; left: 0; display: flex; align-items: center; gap: 20px; width: max-content; padding-left: 20px; will-change: transform; animation: beltRun 40s linear infinite; } .belt-tile { width: 38px; height: 38px; border-radius: 10px; background: #fff; box-shadow: var(--pl-elevation-sm), inset 0 0 0 1px rgba(15, 23, 42, .05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .belt-tile img { height: 19px; width: auto; object-fit: contain; display: block; } .belt-inbox { position: relative; z-index: 4; flex-shrink: 0; margin-left: -12px; width: 72px; height: 72px; border-radius: 20px; background: var(--pl-primary); box-shadow: 0 14px 28px -10px rgba(255, 107, 61, .6), inset 0 0 0 1px rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 40px; line-height: 1; } @keyframes beltRun { from { transform: translate(-50%, -50%); } to { transform: translate(0, -50%); } } @keyframes beltTexture { from { background-position-x: 0; } to { background-position-x: 30px; } } @media (prefers-reduced-motion: reduce) { .belt, .belt-track { animation: none; } .belt-track { transform: translate(-50%, -50%); } } @media (max-width: 560px) { .belt { height: 54px; } .belt-inbox { width: 60px; height: 60px; border-radius: 16px; font-size: 34px; } } .ptab-logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; border-radius: 3px; } .prov-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; flex-shrink: 0; background: #fff; box-shadow: var(--pl-elevation-sm); padding: 3px; } /* ============ Problem ============ */ .problem { padding: 110px 0; text-align: center; } .problem h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; max-width: 16ch; margin: 0 auto; } .problem p { color: var(--pl-text-muted); font-size: 1.15rem; max-width: 54ch; margin: 24px auto 0; } .problem-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 40px; opacity: .75; } .ptab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e6e8eb; border-radius: var(--pl-radius-pill); padding: 9px 16px; font-size: 0.86rem; color: var(--pl-text-muted); font-weight: 500; } .ptab .ucount { background: var(--pl-danger); color: #fff; font-size: 0.68rem; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } /* ============ Features ============ */ .features { padding: 100px 0; } .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .feature { background: var(--pl-surface); border-radius: var(--pl-radius-lg); box-shadow: var(--pl-elevation); padding: 32px; transition: transform .2s, box-shadow .2s; } .feature:hover { transform: translateY(-3px); box-shadow: var(--pl-elevation-hover); } .feature-ico { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #ffe7de; color: var(--pl-primary); margin-bottom: 20px; } .feature-ico svg { width: 23px; height: 23px; } .feature h3 { font-size: 1.28rem; font-weight: 700; } .feature p { color: var(--pl-text-muted); margin-top: 10px; font-size: 0.98rem; } /* ============ Showcase ============ */ .showcase { padding: 60px 0 100px; } .show-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; padding: 50px 0; } .show-row.flip .show-text { order: 2; } .show-row.flip .show-media { order: 1; } .show-text .kicker { margin-bottom: 16px; } .show-text h3 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 700; } .show-text p { color: var(--pl-text-muted); font-size: 1.05rem; margin-top: 16px; } .show-list { list-style: none; margin-top: 22px; display: grid; gap: 12px; } .show-list li { display: flex; align-items: flex-start; gap: 11px; color: var(--pl-text); font-size: 0.98rem; } .show-list .tick { width: 20px; height: 20px; border-radius: 50%; background: #d1fae5; color: #047857; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .show-list .tick svg { width: 12px; height: 12px; } .show-media .frame { box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .35), var(--pl-elevation); } /* ============ Visual customization (showcase: same board, three looks) ============ */ /* Two-column board so it sits comfortably in the narrower show-media slot. Kept above the 720px breakpoint where the base .board switches to the horizontal scroll-snap layout (this selector would otherwise out-specify it). */ @media (min-width: 721px) { .cust-demo .board { grid-template-columns: repeat(2, 1fr); } } .cust-switch { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 18px auto 0; padding: 5px; background: #eef0f3; border-radius: var(--pl-radius-pill); } .cust-tab { padding: 8px 20px; border: 0; background: transparent; border-radius: var(--pl-radius-pill); font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--pl-text-muted); cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, box-shadow .2s ease; } .cust-tab:hover { color: var(--pl-ink); } .cust-tab-on, .cust-tab-on:hover { background: #fff; color: var(--pl-ink); box-shadow: var(--pl-elevation-sm); } .cust-demo .frame { box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .35), var(--pl-elevation); } /* The board reuses the hero markup; ease the swap between the three looks */ .cust-demo .bc-head, .cust-demo .bc-body, .cust-demo .nc, .cust-demo .nc-chip { transition: background .25s ease, border-color .25s ease, color .25s ease; } /* While the board height is being measured (it is briefly forced to the tallest look), suppress the colour transition so the swap stays invisible */ .cust-demo.cust-notrans .bc-head, .cust-demo.cust-notrans .bc-body, .cust-demo.cust-notrans .nc, .cust-demo.cust-notrans .nc-chip { transition: none; } /* Variant 1 - full colour: context chips pick up the app's pastel palette */ .cust-v1 .nc-chip.cc-a { background: #ede9fe; color: #6d28d9; } .cust-v1 .nc-chip.cc-b { background: #dbeafe; color: #1d4ed8; } .cust-v1 .nc-chip.cc-c { background: #dcfce7; color: #166534; } .cust-v1 .nc-chip.cc-d { background: #fef3c7; color: #b45309; } .cust-v1 .nc-chip.cc-e { background: #fce7f3; color: #be185d; } .cust-v1 .nc-chip.cc-f { background: #ccfbf1; color: #0f766e; } /* Variant 2 - focused: one near-black palette, no context, muted tags - only the mention stays red so the signal that matters still jumps out */ .cust-v2 .bc-head { background: linear-gradient(135deg, #4b4b4b, #333333); } .cust-v2 .bc-body { background: rgba(63, 63, 63, .08); } .cust-v2 .nc { border-top-color: #3f3f3f; } .cust-v2 .bc-new { color: #3f3f3f; } .cust-v2 .nc-context { display: none; } .cust-v2 .nc-tag { background: #e9edf5; color: #5b6472; } .cust-v2 .nc-tag.t-mention { background: #fee2e2; color: #b91c1c; } /* Variant 3 - minimal: white columns, no tags, no context */ .cust-v3 .bc-head { background: #fff; color: #1e293b; } .cust-v3 .bc-body { background: #fff; } .cust-v3 .bc-ico { background: #f1f5f9; } .cust-v3 .bc-new { background: #f1f5f9; color: #475569; } .cust-v3 .nc { border-top-color: #fff; } .cust-v3 .nc-context { display: none; } .cust-v3 .nc-tag { display: none; } /* ============ Integrations deep-dive ============ */ .deep { padding: 100px 0; background: #fff; border-top: 1px solid rgba(15, 23, 42, .06); } .prov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .prov { background: var(--pl-surface); border-radius: var(--pl-radius-lg); box-shadow: var(--pl-elevation); padding: 24px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; } .prov:hover { transform: translateY(-3px); box-shadow: var(--pl-elevation-hover); } .prov-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .prov-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .prov-head .mark { width: 34px; height: 34px; border-radius: 9px; font-size: 0.95rem; } .prov-head h3 { font-size: 1.12rem; font-weight: 700; } .prov ul { list-style: none; display: grid; gap: 9px; } .prov li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--pl-text-muted); } .prov li .b { width: 5px; height: 5px; border-radius: 50%; background: var(--pl-primary); flex-shrink: 0; } .prov.soon { background: var(--pl-bg); box-shadow: none; border: 1px dashed #cdd1d6; } .prov.soon .mark, .prov.soon h3 { opacity: .55; } .soon-badge { position: absolute; top: 18px; right: 18px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #047857; background: #d1fae5; padding: 4px 9px; border-radius: 999px; } .opt { font-size: 0.72rem; color: #9aa0a6; font-style: italic; } /* "More on the way" - a gray coming-soon card that sits in the prov grid */ .prov-soon { background: var(--pl-bg); box-shadow: var(--pl-elevation-sm); border: 1px dashed rgba(15, 23, 42, .16); } .prov-accent-soon { background: repeating-linear-gradient(180deg, var(--pl-primary) 0 7px, transparent 7px 13px); opacity: .55; } .prov-soon-ico { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--pl-primary); color: #fff; font-weight: 800; font-size: 1.5rem; line-height: 1; box-shadow: 0 6px 16px -8px rgba(255, 107, 61, .6); } .prov-soon-text { font-size: 0.9rem; color: var(--pl-text-muted); margin: 0; } /* ============ How it works ============ */ .how { padding: 110px 0; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; } .step { background: var(--pl-surface); border-radius: var(--pl-radius-lg); box-shadow: var(--pl-elevation); padding: 34px 30px; position: relative; } /* Number + title share a row at the top of each step card. */ .step-head { display: flex; align-items: center; gap: 14px; } .step-num { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--pl-radius-pill); background: var(--pl-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; } .step h3 { font-size: 1.25rem; font-weight: 700; } .step p { color: var(--pl-text-muted); margin-top: 10px; font-size: 0.98rem; } /* Each step shows the real product element it describes, framed in an inset "screen". Fixed height keeps the three mockups aligned so the headings below them sit on the same line. */ .step-stage { display: flex; align-items: center; justify-content: center; min-height: 124px; margin: 18px 0 22px; padding: 18px; background: var(--pl-bg); border: 1px solid rgba(15, 23, 42, .06); border-radius: 14px; } /* Faux "Continue with Google" button — mirrors the app login screen. */ .gbtn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--pl-radius-pill); background: var(--pl-primary); color: #fff; font-weight: 600; font-size: .95rem; box-shadow: 0 6px 18px -6px var(--pl-primary); } .gbtn-ic { width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; flex-shrink: 0; } /* The provider tile and notification card fill the stage like a real screenshot. */ .step-prov, .step-nc { width: 100%; } /* ============ QoL grid ============ */ .qol { padding: 100px 0; background: #fff; border-top: 1px solid rgba(15, 23, 42, .06); } .qol-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .qol-item { flex: 1 1 230px; max-width: 260px; background: var(--pl-bg); border-radius: var(--pl-radius); padding: 22px; transition: background .2s, transform .2s; } .qol-item:hover { background: #fff; box-shadow: var(--pl-elevation-sm); transform: translateY(-2px); } .qol-ico { width: 38px; height: 38px; border-radius: 10px; background: #fff; box-shadow: var(--pl-elevation-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--pl-primary); margin-bottom: 14px; } .qol-ico svg { width: 19px; height: 19px; } .qol-item h4 { font-size: 0.98rem; font-weight: 700; color: var(--pl-ink); } .qol-item p { font-size: 0.84rem; color: var(--pl-text-muted); margin-top: 5px; } /* ============ Security band ============ */ /* The security section runs dark for gravitas — a deep "vault" panel that stands apart from the light sections around it. */ .security { padding: 100px 0; background: radial-gradient(120% 120% at 50% -10%, #1b2433 0%, #0e131c 62%); color: #fff; } .security .section-head h2 { color: #fff; } .security .section-head p { color: rgba(255, 255, 255, .62); } /* "Built on" infrastructure logos — monochrome white wordmark + brand mark. */ .sec-logos { text-align: center; margin-bottom: 50px; } .sec-logos-label { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .38); margin-bottom: 24px; } .sec-logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(28px, 6vw, 66px); } .sec-logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.16rem; letter-spacing: .01em; color: rgba(255, 255, 255, .82); } .sec-logo img { height: 26px; width: auto; opacity: .9; } .sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .sec-line { display: flex; align-items: flex-start; gap: 13px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--pl-radius); padding: 22px; } .sec-line .si { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 107, 61, .15); color: var(--pl-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sec-line .si svg { width: 18px; height: 18px; } .sec-line strong { display: block; font-size: 0.96rem; color: #fff; font-weight: 700; } .sec-line span { font-size: 0.86rem; color: rgba(255, 255, 255, .6); } /* ============ Final CTA ============ */ .final { padding: 40px 0 110px; } .final-band { background: linear-gradient(135deg, #fff3ee 0%, #ffe7de 100%); border: 1px solid rgba(255, 107, 61, .18); border-radius: 28px; padding: 72px 40px; text-align: center; position: relative; overflow: hidden; } .final-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% 0%, rgba(255, 107, 61, .18), transparent 70%); } .final-band > * { position: relative; } .final-band h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; max-width: 18ch; margin: 0 auto; } .final-band p { color: var(--pl-text-muted); font-size: 1.1rem; margin: 18px auto 0; max-width: 48ch; } .final-band .hero-cta { margin-top: 34px; } /* ============ Footer ============ */ footer { background: var(--pl-ink); color: #fff; padding: 30px 0 20px; } .foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 1rem; } .foot-brand { max-width: 300px; } .foot-brand .brand { color: #fff; } .foot-brand p { color: rgba(255, 255, 255, .55); font-size: 0.92rem; margin-top: 16px; } .foot-cols { display: flex; gap: 64px; flex-wrap: wrap; } .foot-col h5 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .45); margin-bottom: 16px; font-weight: 700; } .foot-col a { display: block; color: rgba(255, 255, 255, .72); font-size: 0.92rem; padding: 6px 0; transition: color .15s; } .foot-col a:hover { color: #fff; } .foot-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; color: rgba(255, 255, 255, .5); font-size: 0.85rem; } .foot-bot a { color: rgba(255, 255, 255, .5); } .foot-bot a:hover { color: #fff; } /* ============ Scroll reveal ============ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .chip, .feature, .prov, .qol-item { transition: none; } } /* ============ Responsive ============ */ @media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } .prov-grid, .steps, .sec-grid { grid-template-columns: 1fr 1fr; } .qol-grid { grid-template-columns: 1fr 1fr; } .show-row, .show-row.flip { grid-template-columns: 1fr; gap: 30px; } .show-row.flip .show-text, .show-row.flip .show-media { order: 0; } /* Stacked layout: center the showcase text. The checklist stays a tidy left-aligned block but is centered as a group (capped to 100% so long items never overflow). */ .show-text { text-align: center; } .show-list.show-list { text-align: left; } .nav-links { display: none; } /* Tighter vertical rhythm once everything stacks into one column */ .strip { padding: 36px 0; } .showcase { padding: 40px 0 56px; } .show-row, .show-row.flip { padding: 28px 0; } .problem, .deep, .how, .qol, .security { padding: 56px 0; } .final { padding: 24px 0 64px; } .cust-tab { padding: 6px 10px; } } @media (max-width: 560px) { .nav-cta { padding: 11px 16px; } .prov-grid, .steps, .sec-grid, .qol-grid { grid-template-columns: 1fr; } /* Connect-carousel provider list: on phones the two-column pills get cramped, so stack a single column and show only the first three sources (the rest stay in the DOM but are hidden). */ .cc-grid { grid-template-columns: 1fr; } .cc-grid .cc-prov:nth-child(n+4) { display: none; } .hero { padding: 56px 0 24px; } .foot-top { flex-direction: column; } .final-band { padding: 48px 24px; } }