/* ========================================================= ACCOUNT-ONBOARDING-MOBILE-1A — shared account journey styles Saved-details card · welcome intro · product tour · next-step panel · plan chip/overview · Bookings & Planner tabs. Brand tokens are the site's own (--aptv2-*), same as the app (apt-pwa.css). Mobile first. ========================================================= */ :root { --apt-aj-text: var(--aptv2-text, #1A1A1A); --apt-aj-muted: #4B5563; --apt-aj-line: var(--aptv2-border, #E5E7EB); --apt-aj-bg: var(--aptv2-bg-soft, #F7F8F7); --apt-aj-card: var(--aptv2-bg, #FFFFFF); --apt-aj-primary: var(--aptv2-green-dark, #168238); --apt-aj-primary-hover: #11692D; --apt-aj-primary-soft: var(--aptv2-green-light, #EAF7EE); --apt-aj-navy: var(--aptv2-navy, #1A2E52); --apt-aj-navy-soft: var(--aptv2-navy-light, #E8EBF2); --apt-aj-focus: var(--aptv2-blue, #2D6CDF); --apt-aj-amber: var(--aptv2-amber-dark, #B45309); --apt-aj-amber-soft: var(--aptv2-amber-light, #FFFBEB); --apt-aj-danger: #B42318; --apt-aj-radius: var(--aptv2-radius-md, 12px); --apt-aj-radius-lg: var(--aptv2-radius-lg, 16px); --apt-aj-shadow: var(--aptv2-shadow-md, 0 4px 12px rgba(16, 24, 40, 0.06)); } /* ---------- Saved details card ---------- */ .apt-saved-details { border: 1px solid var(--apt-aj-line); border-radius: var(--apt-aj-radius); background: var(--apt-aj-primary-soft); padding: 14px 16px; margin: 0 0 16px; color: var(--apt-aj-text); } .apt-saved-details__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .apt-saved-details__head strong { font-size: 15px; } .apt-saved-details__edit { font-weight: 600; color: var(--apt-aj-primary); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; } .apt-saved-details__list { margin: 0; display: grid; gap: 6px; } .apt-saved-details__row { display: grid; grid-template-columns: minmax(90px, 35%) 1fr; gap: 8px; font-size: 15px; } .apt-saved-details__row dt { color: var(--apt-aj-muted); margin: 0; } .apt-saved-details__row dd { margin: 0; overflow-wrap: anywhere; } .apt-saved-details__status { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--apt-aj-card); border: 1px solid var(--apt-aj-line); color: var(--apt-aj-muted); } .apt-saved-details__status--verified { color: var(--apt-aj-primary); border-color: currentColor; } .apt-saved-details__status--pending, .apt-saved-details__status--unverified, .apt-saved-details__status--unconfirmed { color: var(--apt-aj-amber); border-color: currentColor; } .apt-saved-details__note { margin: 8px 0 0; font-size: 13px; color: var(--apt-aj-muted); } /* ---------- Welcome intro ---------- */ .apt-welcome { max-width: 640px; margin: 8px auto 24px; background: var(--apt-aj-card); border: 1px solid var(--apt-aj-line); border-radius: var(--apt-aj-radius-lg); box-shadow: var(--apt-aj-shadow); padding: 24px 20px; color: var(--apt-aj-text); } .apt-welcome__eyebrow, .apt-welcome__step { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--apt-aj-primary); } .apt-welcome__title { margin: 0 0 8px; font-size: 24px; line-height: 1.25; color: var(--apt-aj-navy); outline: none; } .apt-welcome__lead { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--apt-aj-muted); } .apt-welcome__choices { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; min-width: 0; } .apt-welcome__choice { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px; min-height: 56px; border: 2px solid var(--apt-aj-line); border-radius: var(--apt-aj-radius); cursor: pointer; background: var(--apt-aj-card); transition: border-color .15s, background .15s; } .apt-welcome__choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .apt-welcome__choice:hover { border-color: #9CA3AF; } .apt-welcome__choice:has(input:checked) { border-color: var(--apt-aj-primary); background: var(--apt-aj-primary-soft); } .apt-welcome__choice:has(input:focus-visible) { outline: 3px solid var(--apt-aj-focus); outline-offset: 2px; } .apt-welcome__choice-icon { flex: 0 0 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--apt-aj-navy-soft); color: var(--apt-aj-navy); font-size: 18px; } .apt-welcome__choice:has(input:checked) .apt-welcome__choice-icon { background: var(--apt-aj-primary); color: #fff; } .apt-welcome__choice-text { display: grid; gap: 2px; } .apt-welcome__choice-text strong { font-size: 16px; color: var(--apt-aj-text); } .apt-welcome__choice-text span { font-size: 14px; color: var(--apt-aj-muted); line-height: 1.4; } .apt-welcome__error { margin: -6px 0 12px; color: var(--apt-aj-danger); font-weight: 600; } .apt-welcome__art { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; margin: 6px 0 16px; background: var(--apt-aj-primary-soft); color: var(--apt-aj-primary); font-size: 30px; } .apt-welcome__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; } .apt-welcome__btn { min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 16px; cursor: pointer; border: 2px solid transparent; font-family: inherit; } .apt-welcome__btn--primary { background: var(--apt-aj-primary); color: #fff; margin-left: auto; } .apt-welcome__btn--primary:hover { background: var(--apt-aj-primary-hover); } .apt-welcome__btn--ghost { background: transparent; border-color: var(--apt-aj-line); color: var(--apt-aj-text); } .apt-welcome__btn--quiet { background: transparent; color: var(--apt-aj-navy); text-decoration: underline; padding: 0 8px; } .apt-welcome__link { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--apt-aj-navy); text-decoration: underline; font-size: 15px; min-height: 44px; cursor: pointer; font-family: inherit; } .apt-welcome__btn:focus-visible, .apt-welcome__link:focus-visible { outline: 3px solid var(--apt-aj-focus); outline-offset: 2px; } /* Without JS every story screen stays hidden; the choice screen submits straight away. */ .apt-welcome [hidden] { display: none !important; } @media (max-width: 767px) { .apt-welcome { margin: 0 0 16px; border-radius: var(--apt-aj-radius); padding: 20px 16px; box-shadow: none; } .apt-welcome__title { font-size: 22px; } .apt-welcome__actions { flex-direction: column-reverse; align-items: stretch; } .apt-welcome__btn { width: 100%; } .apt-welcome__btn--primary { margin-left: 0; } } /* ---------- Product tour ---------- */ .apt-tour__ring { position: fixed; z-index: 100000; pointer-events: none; border-radius: 14px; border: 3px solid var(--apt-aj-focus); box-shadow: 0 0 0 9999px rgba(17, 24, 39, .35); transition: all .2s ease; } .apt-tour__tip { position: fixed; z-index: 100001; background: var(--apt-aj-card); color: var(--apt-aj-text); border-radius: var(--apt-aj-radius-lg); box-shadow: 0 12px 32px rgba(16, 24, 40, .25); padding: 16px; } .apt-tour__count { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--apt-aj-primary); text-transform: uppercase; letter-spacing: .04em; } .apt-tour__title { margin: 0 0 6px; font-size: 18px; color: var(--apt-aj-navy); outline: none; } .apt-tour__text { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--apt-aj-muted); } .apt-tour__actions { display: flex; align-items: center; gap: 8px; } .apt-tour__spacer { flex: 1; } .apt-tour__btn { min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 15px; cursor: pointer; border: 2px solid transparent; font-family: inherit; } .apt-tour__btn--primary { background: var(--apt-aj-primary); color: #fff; } .apt-tour__btn--ghost { background: transparent; border-color: var(--apt-aj-line); color: var(--apt-aj-text); } .apt-tour__btn--quiet { background: transparent; color: var(--apt-aj-navy); text-decoration: underline; padding: 0 4px; } .apt-tour__btn:focus-visible { outline: 3px solid var(--apt-aj-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .apt-tour__ring { transition: none; } } /* ---------- Next-step panel ---------- */ .apt-next { background: var(--apt-aj-card); border: 1px solid var(--apt-aj-line); border-radius: var(--apt-aj-radius-lg); padding: 18px; margin: 0 0 20px; color: var(--apt-aj-text); } .apt-next__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; } .apt-next__title { margin: 0; font-size: 20px; color: var(--apt-aj-navy); } .apt-next__how { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--apt-aj-navy); text-decoration: underline; } .apt-next__primary { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 64px; border-radius: var(--apt-aj-radius); background: var(--apt-aj-primary); color: #fff !important; text-decoration: none !important; } .apt-next__primary:hover { background: var(--apt-aj-primary-hover); } .apt-next__primary:focus-visible, .apt-next__tile:focus-visible, .apt-next__check a:focus-visible { outline: 3px solid var(--apt-aj-focus); outline-offset: 2px; } .apt-next__primary-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .18); font-size: 18px; } .apt-next__primary-text { display: grid; gap: 2px; flex: 1; } .apt-next__primary-text strong { font-size: 17px; } .apt-next__primary-text span { font-size: 14px; opacity: .92; } .apt-next__primary-go { font-size: 18px; } .apt-next__checklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; } .apt-next__check a { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border-radius: 10px; background: var(--apt-aj-bg); color: var(--apt-aj-text); text-decoration: none; } .apt-next__check-label { font-weight: 600; } .apt-next__check-value { font-size: 14px; color: var(--apt-aj-muted); text-align: right; } .apt-next__check--done i { color: var(--apt-aj-primary); } .apt-next__check--missing i { color: var(--apt-aj-amber); } .apt-next__check--optional i { color: #9CA3AF; } .apt-next__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .apt-next__tile { display: flex; gap: 10px; align-items: flex-start; padding: 12px; min-height: 64px; border: 1px solid var(--apt-aj-line); border-radius: var(--apt-aj-radius); background: var(--apt-aj-card); color: var(--apt-aj-text); text-decoration: none; } .apt-next__tile:hover { border-color: #9CA3AF; } .apt-next__tile-icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--apt-aj-navy-soft); color: var(--apt-aj-navy); } .apt-next__tile-text { display: grid; gap: 2px; min-width: 0; } .apt-next__tile-text strong { font-size: 15px; } .apt-next__tile-text span { font-size: 13px; color: var(--apt-aj-muted); } @media (min-width: 768px) { .apt-next__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .apt-next__checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 380px) { .apt-next__tiles { grid-template-columns: 1fr; } } /* ---------- Plan chip + overview ---------- */ .apt-plan-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none !important; background: var(--apt-aj-navy-soft); color: var(--apt-aj-navy) !important; border: 1px solid transparent; } .apt-plan-chip i { font-size: 10px; } .apt-plan-chip:hover { border-color: currentColor; } .apt-plan-chip:focus-visible { outline: 3px solid var(--apt-aj-focus); outline-offset: 2px; } .apt-plan-chip--trial { background: var(--apt-aj-primary-soft); color: var(--apt-aj-primary) !important; } .apt-plan-chip--trial-ended { background: var(--apt-aj-amber-soft); color: var(--apt-aj-amber) !important; } .apt-plan-overview { background: var(--apt-aj-card); border: 1px solid var(--apt-aj-line); border-radius: var(--apt-aj-radius-lg); padding: 18px; margin: 0 0 20px; } .apt-plan-overview__eyebrow { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--apt-aj-primary); } .apt-plan-overview__title { margin: 2px 0 4px; font-size: 22px; color: var(--apt-aj-navy); } .apt-plan-overview__detail { margin: 0 0 12px; color: var(--apt-aj-muted); } .apt-plan-overview__cols { display: grid; gap: 16px; } .apt-plan-overview__h { margin: 0 0 6px; font-size: 15px; } .apt-plan-overview__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; } .apt-plan-overview__list i { color: var(--apt-aj-primary); margin-right: 4px; } .apt-plan-overview__list--plain li { color: var(--apt-aj-muted); } .apt-plan-overview__cta { display: inline-flex; align-items: center; min-height: 48px; margin-top: 14px; padding: 0 18px; border-radius: 999px; background: var(--apt-aj-primary); color: #fff !important; font-weight: 700; text-decoration: none !important; } @media (min-width: 768px) { .apt-plan-overview__cols { grid-template-columns: 1fr 1fr; } } /* ---------- Bookings & Planner area tabs ---------- */ .apt-bp-area { margin: 0 0 16px; } .apt-bp-area__eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--apt-aj-primary); } .apt-bp-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; border-radius: 999px; background: var(--apt-aj-bg); border: 1px solid var(--apt-aj-line); scrollbar-width: none; } .apt-bp-tabs::-webkit-scrollbar { display: none; } .apt-bp-tabs__tab { flex: 1 0 auto; text-align: center; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--apt-aj-text) !important; text-decoration: none !important; white-space: nowrap; } .apt-bp-tabs__tab.is-active { background: var(--apt-aj-navy); color: #fff !important; } .apt-bp-tabs__tab:focus-visible { outline: 3px solid var(--apt-aj-focus); outline-offset: 2px; } .apt-bp-area__notice { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--apt-aj-amber-soft); color: #78350F; font-size: 14px; line-height: 1.45; } /* Theme (experthive) gives every