min-height stays. */ .mkt-main[b-jvhqedp9vp] { min-height: 60vh; } /* /Components/Layout/StaticPersonalLayout.razor.rz.scp.css */ /* The header moved to the shared CommonHeader component (nav consistency, owner 2026-06-19); its styles now live in CommonHeader.razor.css. Only the warm content-region paint stays scoped here. */ /* paint the content region warm so no gap ever shows the white body (mirrors PersonalLayout) */ .content[b-5x7mx0z84l] { background: #FAF7F2; } /* /Components/Pages/AccountHomeUser.razor.rz.scp.css */ /* Spec 017 — Personal UX redesign pilot: new-person Account home. Warm, calm, mobile-first. Scoped to this component. Returning-state layout (FluentGrid cards) is untouched and not styled here. */ .acct-new[b-etwvevz687] { background: #FAF7F2; margin: -24px; /* bleed past the page content padding so the warm field fills */ padding: 40px 24px 64px; min-height: calc(100vh - 120px); } .acct-new .hero[b-etwvevz687] { max-width: 660px; margin: 0 auto; color: #25324B; } .acct-new .greeting[b-etwvevz687] { font-size: 17px; color: #5A6478; margin: 0 0 4px; } .acct-new .greeting b[b-etwvevz687] { color: #25324B; font-weight: 600; } .acct-new h1[b-etwvevz687] { font-size: 34px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 6px 0 18px; } /* your part / our part */ .acct-new .parts[b-etwvevz687] { display: flex; gap: 16px; margin: 0 0 30px; } .acct-new .part[b-etwvevz687] { flex: 1; background: #FFFFFF; border: 1px solid #ECE7DE; border-radius: 14px; padding: 18px 20px; } .acct-new .plabel[b-etwvevz687] { font-size: 13.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .acct-new .part.you .plabel[b-etwvevz687] { color: #2C4A7E; } .acct-new .part.us .plabel[b-etwvevz687] { color: #B07A12; } .acct-new .ptext[b-etwvevz687] { font-size: 18px; color: #25324B; line-height: 1.45; } .acct-new .badge[b-etwvevz687] { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .acct-new .part.you .badge[b-etwvevz687] { background: #E7EDF6; color: #2C4A7E; } .acct-new .part.us .badge[b-etwvevz687] { background: #FBF3E2; color: #B07A12; } .acct-new .badge svg[b-etwvevz687] { width: 17px; height: 17px; } /* steps */ .acct-new .steps-intro[b-etwvevz687] { font-size: 16px; color: #5A6478; margin: 0 0 12px; } .acct-new .steps[b-etwvevz687] { display: flex; flex-direction: column; gap: 12px; margin: 0 0 30px; } .acct-new .step[b-etwvevz687] { display: flex; align-items: center; gap: 12px; font-size: 18px; color: #25324B; } .acct-new .step .num[b-etwvevz687] { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #E7EDF6; color: #2C4A7E; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .acct-new .step .soft[b-etwvevz687] { color: #5A6478; } /* primary CTA — a bespoke warm control on this welcome surface (semantic button: focusable, keyboard-activatable). Form-heavy screens still use FluentUI controls per the charter. */ .acct-new .cta[b-etwvevz687] { display: inline-flex; align-items: center; gap: 10px; background: #2C4A7E; color: #fff; border: none; cursor: pointer; font-size: 19.5px; font-weight: 600; font-family: inherit; padding: 15px 26px; border-radius: 10px; box-shadow: 0 1px 2px rgba(37,50,75,.18); transition: background .15s ease; } .acct-new .cta:hover[b-etwvevz687] { background: #213A66; } .acct-new .cta:focus-visible[b-etwvevz687] { outline: 2px solid #2C4A7E; outline-offset: 2px; } .acct-new .cta .chev[b-etwvevz687] { width: 18px; height: 18px; } .acct-new .reassure[b-etwvevz687] { font-size: 16px; color: #5A6478; margin: 14px 0 0; } .acct-new .footlink[b-etwvevz687] { margin-top: 40px; padding-top: 20px; border-top: 1px solid #ECE7DE; font-size: 16px; color: #5A6478; } /* breathing room above + below the bottom support link (owner 2026-06-24) */ .footlink[b-etwvevz687] { margin-top: 40px; margin-bottom: 32px; } @media (max-width: 560px) { .acct-new .parts[b-etwvevz687] { flex-direction: column; } .acct-new h1[b-etwvevz687] { font-size: 29.5px; } } /* ============ returning Account home — progress-tracker cards (spec 017) ============ */ .acct-ret[b-etwvevz687] { background: #FAF7F2; margin: -24px; padding: 32px 24px 56px; min-height: calc(100vh - 120px); } .acct-ret .ret[b-etwvevz687] { max-width: 760px; margin: 0 auto; } .ret-head[b-etwvevz687] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ret-title[b-etwvevz687] { font-size: 29.5px; font-weight: 600; letter-spacing: -0.01em; margin: 2px 0 0; color: #25324B; } .btn-new[b-etwvevz687] { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #fff; color: #2C4A7E; border: 1.5px solid #C9D4E6; cursor: pointer; font-size: 17px; font-weight: 600; font-family: inherit; padding: 10px 16px; border-radius: 9px; transition: border-color .15s; } .btn-new:hover[b-etwvevz687] { border-color: #2C4A7E; } .btn-new svg[b-etwvevz687] { width: 18px; height: 18px; } /* The call-time pill moved to the shared TimePill component (TimePill.razor.css). */ /* The interview card list itself (.ivw / .track / .status / …) now lives in the shared InterviewProgressList component's scoped CSS, so Account home and /Interviews stay identical. */ @media (max-width: 560px) { .ret-head[b-etwvevz687] { flex-direction: column; } } /* the quiet put-away reveal line (owner 2026-06-12): statement + flip link, conditional */ .putaway-line[b-etwvevz687] { margin-top: 12px; font-size: 15.5px; color: #5A6478; display: flex; gap: 6px; align-items: baseline; } .puta-link[b-etwvevz687] { background: none; border: none; padding: 0; font: inherit; font-size: 15.5px; color: #2C4A7E; cursor: pointer; } .puta-link:hover[b-etwvevz687] { text-decoration: underline; } /* spec 022 — shared meta row: time pill left, invite affordance right; wraps on narrow screens */ .meta-row[b-etwvevz687] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .invite-line[b-etwvevz687] { position: relative; margin-left: auto; font-size: 15.5px; color: #5A6478; display: flex; gap: 7px; align-items: center; } .invite-line svg[b-etwvevz687] { width: 15px; height: 15px; color: #B07A12; flex: 0 0 auto; } @media (max-width: 560px) { .invite-line[b-etwvevz687] { margin-left: 0; } } /* spec 022 — the invite popover: a little anchored panel under the link. The transparent fixed backdrop sits just beneath it so any click outside dismisses; clicks inside don't. */ .invite-pop[b-etwvevz687] { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 520px; max-width: 92vw; border-radius: 14px; box-shadow: 0 10px 28px rgba(37, 50, 75, .18); } .invite-backdrop[b-etwvevz687] { position: fixed; inset: 0; z-index: 29; background: transparent; } @media (max-width: 560px) { .invite-pop[b-etwvevz687] { right: auto; left: 0; } } /* /Components/Pages/ConnectInterview.razor.rz.scp.css */ /* Sticky header for ConnectInterview — mirrors NormalInterview's pattern but doesn't include a time-remaining indicator (the connection flow is too short to be worth tracking). */ .connect-page-header[b-iufmdgff49] { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid #e0e0e0; background: #fafafa; position: sticky; top: 0; z-index: 50; } .connect-page-header-volume[b-iufmdgff49] { flex: 1; min-width: 0; } /* "Call ending" full-page state — replaces the inline ProgressRing rendering that used to live where the carousel now is. */ .connect-page-ending[b-iufmdgff49] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; min-height: 40vh; gap: 1rem; } /* Sticky bottom bar with the Cancel button. Always available while the connect flow is in progress so the user can abort at any time. */ .connect-page-bottom-bar[b-iufmdgff49] { position: sticky; bottom: 0; background: #fafafa; border-top: 1px solid #e0e0e0; padding: 1rem; display: flex; justify-content: center; z-index: 40; } /* "Taking longer than expected" hint inside the active connect-step card. Refers the user to the existing Cancel button at the bottom of the page rather than offering a redundant escape-hatch button here. */ .connect-page-overdue-hint[b-iufmdgff49] { margin-top: 0.5rem; padding: 0.6rem 1rem; border-radius: 6px; background: #fff8e1; border: 1px solid #ffe082; color: #5d4400; font-size: 0.95rem; max-width: 28rem; text-align: center; } /* /Components/Pages/Home.razor.rz.scp.css */ /* Scoped styles for the redesigned marketing home page. Mobile-first; widens at ≥760px. Colors/fonts come from the design tokens in app.css (:root). "Warmer, tempered" palette: warm gradient bookends (hero + final CTA), parchment + white section rhythm, gold accents. */ /* ---------- shared primitives ---------- */ .section-inner[b-ddkv2dagp6] { max-width: var(--dti-maxw); margin: 0 auto; padding: 72px 24px; } .section-inner.narrow[b-ddkv2dagp6] { max-width: 720px; } .center[b-ddkv2dagp6] { text-align: center; } .section-head[b-ddkv2dagp6] { max-width: 620px; margin: 0 auto 44px; } .section-title[b-ddkv2dagp6] { font-size: 2rem; line-height: 1.2; margin: 0 0 12px; } .section-lead[b-ddkv2dagp6] { font-size: 1.1rem; color: var(--dti-muted); line-height: 1.6; margin: 0; } .section-lead.center-lead[b-ddkv2dagp6] { margin-left: auto; margin-right: auto; } /* ---------- buttons ---------- */ .btn[b-ddkv2dagp6] { display: inline-block; padding: 13px 26px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 1rem; border: 1px solid transparent; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; } .btn:hover[b-ddkv2dagp6] { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(43, 58, 91, 0.16); } .btn-primary[b-ddkv2dagp6] { background: var(--dti-blue); color: #fff; } .btn-primary:hover[b-ddkv2dagp6] { background: var(--dti-blue-hover); } .btn-ghost[b-ddkv2dagp6] { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); } .btn-ghost:hover[b-ddkv2dagp6] { background: rgba(255, 255, 255, 0.14); } .btn-large[b-ddkv2dagp6] { padding: 16px 34px; font-size: 1.05rem; } /* On the dark gradient bands (hero + final CTA), the primary button flips to a high-contrast white pill so it pops against the blue/gold. */ .hero .btn-primary[b-ddkv2dagp6], .final-cta .btn-primary[b-ddkv2dagp6] { background: #fff; color: var(--dti-ink); } .hero .btn-primary:hover[b-ddkv2dagp6], .final-cta .btn-primary:hover[b-ddkv2dagp6] { background: var(--dti-tint-blue); } .cta-row[b-ddkv2dagp6] { display: flex; gap: 14px; flex-wrap: wrap; } .cta-row.center[b-ddkv2dagp6] { justify-content: center; } .cta-subnote[b-ddkv2dagp6] { width: 100%; margin: 14px 0 0; font-size: 0.95rem; color: var(--dti-muted); } .cta-subnote a[b-ddkv2dagp6] { color: inherit; font-weight: 500; text-decoration: underline; } /* ---------- hero ---------- */ .hero[b-ddkv2dagp6] { background: var(--dti-grad-warm); color: #fff; padding: 32px 0 36px; text-align: center; /* Same fixed hero height as every occasion page (OccasionPage's .occ-hero — keep in sync): centered content in one calm band instead of height bouncing page to page. */ min-height: 380px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; /* the photo layer is scaled slightly past the edges */ } /* Photo pass 2 (owner 2026-07-05): the grandmother mid-call as the home hero. Near-sharp like the occasion heroes, saturation nudged up so the golden light and leaves keep their warmth. */ .hero-photo[b-ddkv2dagp6] { position: absolute; inset: 0; z-index: 0; background-image: url('images/home-hero.jpg'); background-size: cover; background-position: center 30%; filter: blur(0.5px) saturate(1.08); transform: scale(1.01); /* hide blur edge fringing */ } /* Directional scrim — full strength under the left-seated copy, falling away so her side of the frame glows through (the flat scrim muted the photo's warmth; owner 2026-07-05). */ .hero-tone[b-ddkv2dagp6] { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(43, 58, 91, 0.62) 0%, rgba(43, 58, 91, 0.44) 38%, rgba(43, 58, 91, 0.16) 66%, rgba(43, 58, 91, 0.05) 100%); } /* Copy hugged hard left — she sits right-of-center, the open trees carry the words. No nav chevrons on the home hero, so this goes tighter than the occasion pages' .tight (72px). */ .hero-inner[b-ddkv2dagp6] { max-width: 560px; margin-left: max(32px, 3vw); margin-right: auto; padding: 0 24px; position: relative; z-index: 2; text-align: left; } .hero .cta-row[b-ddkv2dagp6] { justify-content: flex-start; } /* Below the side-anchor breakpoint (same 760px as the occasion pages) recenter the copy — and since centered copy would land on her face at the centered crop, slide the crop so she stands right of the words again, and flatten the fade to an even scrim (the gradient's clear end would leave the recentered copy's right words unprotected). */ @media (max-width: 760px) { .hero-photo[b-ddkv2dagp6] { background-position: 24% 30%; } .hero-tone[b-ddkv2dagp6] { background: rgba(43, 58, 91, 0.5); } .hero-inner[b-ddkv2dagp6] { margin: 0 auto; text-align: center; } .hero .cta-row[b-ddkv2dagp6] { justify-content: center; } /* .hero-scoped so this wins over the base .hero-sub rule that appears LATER in the file (equal specificity would lose on order). */ .hero .hero-sub[b-ddkv2dagp6] { margin-left: auto; margin-right: auto; } } .eyebrow[b-ddkv2dagp6] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 0 0 12px; } .eyebrow-dot[b-ddkv2dagp6] { width: 7px; height: 7px; border-radius: 50%; background: var(--dti-gold-soft); } .hero-headline[b-ddkv2dagp6] { font-size: 2.6rem; line-height: 1.1; color: #fff; margin: 0 0 16px; } .hero-sub[b-ddkv2dagp6] { font-size: 1.2rem; line-height: 1.55; color: rgba(255, 255, 255, 0.93); max-width: 660px; margin: 0 0 24px; /* left-anchored with the copy block (recentered under 760px below) */ } .hero-trust[b-ddkv2dagp6] { margin: 16px 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); } @media (min-width: 760px) { .hero-headline[b-ddkv2dagp6] { font-size: 3.4rem; } .hero-sub[b-ddkv2dagp6] { font-size: 1.32rem; } } /* ---------- the teaching strip (photo pass 2, owner 2026-07-05) ---------- Three tiles that teach the shape of the thing at a glance; each tile cycles through its few photos — slow slide-and-settle driven by js/dti-cycle.js, dots showing where you are, hover holds, reduced-motion keeps the server-rendered first frame. */ .teach[b-ddkv2dagp6] { background: #fff; /* white band so the parchment occasions section below keeps its edge */ } .teach-grid[b-ddkv2dagp6] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 860px) { .teach-grid[b-ddkv2dagp6] { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } } .teach-card[b-ddkv2dagp6] { background: #fff; border: 1px solid var(--dti-line); border-radius: var(--dti-radius-lg); overflow: hidden; } .teach-cycle[b-ddkv2dagp6] { position: relative; aspect-ratio: 16 / 11; overflow: hidden; } .teach-cycle img[b-ddkv2dagp6] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(26px); transition: opacity 1.1s ease, transform 1.1s ease; } .teach-cycle img.on[b-ddkv2dagp6] { opacity: 1; transform: translateX(0); } .teach-cycle img.leaving[b-ddkv2dagp6] { opacity: 0; transform: translateX(-18px); } .teach-dots[b-ddkv2dagp6] { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; gap: 6px; justify-content: center; z-index: 2; } .teach-dots i[b-ddkv2dagp6] { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 4px rgba(43, 58, 91, 0.4); } .teach-dots i.on[b-ddkv2dagp6] { background: #fff; } @media (prefers-reduced-motion: reduce) { .teach-cycle img[b-ddkv2dagp6] { transition: none; transform: none; } } .teach-body[b-ddkv2dagp6] { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px 18px; } .teach-step[b-ddkv2dagp6] { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--dti-blue); color: #fff; font-size: 0.85rem; font-weight: 600; flex: 0 0 auto; } .teach-body h3[b-ddkv2dagp6] { font-size: 1.12rem; margin: 1px 0 5px; } .teach-body p[b-ddkv2dagp6] { margin: 0; font-size: 0.92rem; color: var(--dti-muted); line-height: 1.5; } /* ---------- occasions (teasers → entry pages) ---------- */ .occasions[b-ddkv2dagp6] { background: var(--dti-parchment); } /* Title-only section head (no lead paragraph) — pull it closer to the keepsakes bar above. */ .occasions .section-inner[b-ddkv2dagp6] { padding-top: 40px; } /* Flex (not grid) so an odd count centers its last row instead of leaving an orphan. */ .occasion-grid[b-ddkv2dagp6] { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .occasion-card[b-ddkv2dagp6] { position: relative; flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; background: #fff; border: 0.5px solid var(--dti-line); border-radius: var(--dti-radius); padding: 20px 20px 22px; text-decoration: none; color: inherit; transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease; } .occasion-card:hover[b-ddkv2dagp6] { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(43, 58, 91, 0.12); border-color: rgba(43, 58, 91, 0.2); } .occasion-icon[b-ddkv2dagp6] { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; margin-bottom: 14px; } .occasion-card.warm .occasion-icon[b-ddkv2dagp6] { background: var(--dti-tint-gold); color: #b07d3c; } .occasion-card.calm .occasion-icon[b-ddkv2dagp6] { background: var(--dti-tint-blue); color: var(--dti-blue); } .occasion-icon svg[b-ddkv2dagp6] { width: 23px; height: 23px; } .occasion-name[b-ddkv2dagp6] { font-family: var(--dti-font-head); font-weight: 600; font-size: 1.15rem; color: var(--dti-ink); margin-bottom: 5px; } .occasion-line[b-ddkv2dagp6] { font-size: 0.95rem; line-height: 1.5; color: var(--dti-muted); } .occasion-go[b-ddkv2dagp6] { position: absolute; top: 20px; right: 18px; font-size: 1.1rem; color: var(--dti-blue); opacity: 0; transform: translateX(-4px); transition: opacity 130ms ease, transform 130ms ease; } .occasion-card:hover .occasion-go[b-ddkv2dagp6] { opacity: 1; transform: translateX(0); } /* ---------- how it works: shared HowItWorksSection component (own scoped CSS) ---------- */ /* ---------- what you get ---------- */ .what[b-ddkv2dagp6] { background: var(--dti-parchment); } .stories-showcase[b-ddkv2dagp6] { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; margin: 0 auto; } .story-clip[b-ddkv2dagp6] { margin: 0; background: #fff; border: 0.5px solid var(--dti-line); border-radius: var(--dti-radius-lg); overflow: hidden; box-shadow: 0 16px 36px rgba(43, 58, 91, 0.14); } .story-video[b-ddkv2dagp6] { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--dti-ink); object-fit: cover; } .story-caption[b-ddkv2dagp6] { padding: 14px 18px; font-family: var(--dti-font-head); font-style: italic; font-size: 1.08rem; color: var(--dti-ink); text-align: center; } /* stack the two clips on phones/small tablets (760px is the page's primary breakpoint) */ @media (max-width: 760px) { .stories-showcase[b-ddkv2dagp6] { grid-template-columns: 1fr; max-width: 520px; gap: 20px; } } /* ---------- grace moment (you haven't waited too late) ---------- */ .grace[b-ddkv2dagp6] { background: #fff; } .grace-card[b-ddkv2dagp6] { background: var(--dti-parchment); border: 0.5px solid var(--dti-line); border-radius: var(--dti-radius-lg); padding: 44px 36px; text-align: center; } .grace-icon[b-ddkv2dagp6] { display: inline-flex; width: 54px; height: 54px; border-radius: 50%; background: var(--dti-tint-gold); color: #b07d3c; align-items: center; justify-content: center; margin-bottom: 18px; } .grace-icon svg[b-ddkv2dagp6] { width: 26px; height: 26px; } .grace-title[b-ddkv2dagp6] { font-size: 1.55rem; font-style: italic; color: var(--dti-ink); margin: 0 0 14px; } .grace-copy[b-ddkv2dagp6] { font-size: 1.08rem; line-height: 1.7; color: var(--dti-ink); margin: 0; } /* ---------- final CTA ---------- */ .final-cta[b-ddkv2dagp6] { background: var(--dti-grad-warm); color: #fff; text-align: center; } .final-cta h2[b-ddkv2dagp6] { font-size: 2rem; line-height: 1.25; color: #fff; margin: 0 0 14px; } .final-cta p[b-ddkv2dagp6] { font-size: 1.1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); margin: 0 0 28px; } .final-cta .cta-subnote[b-ddkv2dagp6] { color: rgba(255, 255, 255, 0.85); } @media (min-width: 760px) { .final-cta h2[b-ddkv2dagp6] { font-size: 2.4rem; } } /* /Components/Pages/Interviews/Index.razor.rz.scp.css */ /* Spec 017 — My Interviews list, warm shell to match Account home. The card list itself is the shared InterviewProgressList component (its own scoped CSS). */ .myiv[b-17byf7wbwk] { background: #FAF7F2; margin: -24px; padding: 32px 24px 56px; min-height: calc(100vh - 120px); } .myiv-head[b-17byf7wbwk] { max-width: 760px; margin: 0 auto 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .myiv-title[b-17byf7wbwk] { font-size: 29.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: #25324B; } .myiv-sub[b-17byf7wbwk] { font-size: 16px; color: #5A6478; margin: 6px 0 0; max-width: 520px; } .btn-new[b-17byf7wbwk] { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #fff; color: #2C4A7E; border: 1.5px solid #C9D4E6; cursor: pointer; font-size: 17px; font-weight: 600; font-family: inherit; padding: 10px 16px; border-radius: 9px; transition: border-color .15s; } .btn-new:hover[b-17byf7wbwk] { border-color: #2C4A7E; } .btn-new svg[b-17byf7wbwk] { width: 18px; height: 18px; } /* InterviewProgressList renders centered to the same 760px column */ .myiv[b-17byf7wbwk] .ivw-list { max-width: 760px; margin: 0 auto; } .myiv-empty[b-17byf7wbwk] { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid #ECE7DE; border-radius: 14px; padding: 36px 24px; text-align: center; } .myiv-empty-title[b-17byf7wbwk] { font-size: 20.5px; font-weight: 600; color: #25324B; } .myiv-empty-sub[b-17byf7wbwk] { font-size: 16px; color: #5A6478; margin: 6px 0 18px; } .myiv-empty .btn-new[b-17byf7wbwk] { display: inline-flex; } .myiv-inactive[b-17byf7wbwk] { max-width: 760px; margin: 20px auto 0; display: flex; align-items: center; gap: 8px; font-size: 15.5px; color: #5A6478; } /* /Components/Pages/Interviews/StoryCutBoard.razor.rz.scp.css */ /* Spec 028 — the chapter lists + answer rows (moved verbatim from StoryMovie.razor.css in the compile-unit split; scoped CSS follows its markup). */ .sm-group[b-8v0960m9d5] { border: 1px solid #ECE7DE; border-radius: 12px; margin: 0 0 16px; overflow: hidden; background: #fff; } .sm-q[b-8v0960m9d5] { background: #25324B; color: #F5EFE7; padding: 13px 16px; font-weight: 500; font-size: 17.5px; display: flex; align-items: center; gap: 10px; } /* the chapter's number (owner 2026-07-08): a quiet badge — re-numbers live as chapters drag */ .sm-q-num[b-8v0960m9d5] { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(245,239,231,.16); color: #F5EFE7; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .sm-q-text[b-8v0960m9d5] { flex: 1; } /* touch-action none: the grip is a drag handle, never a scroll surface (the dti-sortable lesson) */ .sm-grip[b-8v0960m9d5] { opacity: .45; cursor: grab; letter-spacing: 2px; touch-action: none; } .sm-grip:active[b-8v0960m9d5] { cursor: grabbing; } .sm-q-voice[b-8v0960m9d5] { opacity: .7; font-weight: 400; font-size: .92em; } /* full-bleed rows (owner 2026-07-08): the slabs run edge-to-edge under the chapter header — no white gutter beside them; a thin white seam separates stacked slabs */ .sm-answers[b-8v0960m9d5] { padding: 0; } .sm-answers > * + *[b-8v0960m9d5] { border-top: 3px solid #fff; } /* answer ROW UNIT (owner 2026-07-08): grip/dot = a full-height left column, vertically centered against the text line + filmstrip together; dividers sit BETWEEN units (on the drag wrapper), never inside one. The text line NEVER wraps — the question/name ellipsizes instead, so duration and ✕ hold their corner at any width. */ .sm-rowunit[b-8v0960m9d5] { display: flex; align-items: center; gap: clamp(6px, 1.5%, 12px); } .sm-rowbody[b-8v0960m9d5] { flex: 1 1 auto; min-width: 0; } .sm-ans[b-8v0960m9d5] { display: flex; align-items: center; gap: clamp(5px, 1.5%, 10px); } .sm-name[b-8v0960m9d5] { font-weight: 600; color: #25324B; font-size: 16.5px; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the action cluster (✕): one unbreakable unit, always inline right */ .sm-ans-controls[b-8v0960m9d5] { display: inline-flex; align-items: center; gap: 10px; flex: none; } /* single-voice collapse: the rows ARE the chapters, so they wear the numbers (owner 2026-07-08) — the header badge's quiet parchment twin */ .sm-row-num[b-8v0960m9d5] { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #EDE4D2; color: #6b625a; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } /* chapters cut: the row carries the question — it WRAPS in its own column (owner 2026-07-08, revised from ellipsis: never hide the words); duration and ✕ sit beside it, vertically centered against however many lines it takes */ .sm-ansq[b-8v0960m9d5] { flex: 1 1 0; min-width: 0; color: #25324B; font-size: 16.5px; line-height: 1.35; } .sm-tag[b-8v0960m9d5] { color: #5A6478; font-size: 15px; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sm-rowunit.self .sm-name[b-8v0960m9d5], .sm-rowunit.self .sm-tag[b-8v0960m9d5] { color: #B07A12; } .sm-rowunit.self .sm-tag[b-8v0960m9d5] { font-weight: 600; } @media (max-width: 560px) { /* the tag is desktop warmth; the ellipsized name/question carries the phone row */ .sm-tag[b-8v0960m9d5] { display: none; } /* the voice-chapter header's relationship (NOT the tails' speaker name, which stays) */ .sm-q-rel[b-8v0960m9d5] { display: none; } .sm-strip-th img[b-8v0960m9d5] { width: 52px; height: 52px; } } .sm-len[b-8v0960m9d5] { margin-left: auto; color: #5A6478; font-size: 14.5px; flex: none; } /* the ✕ (the 📷 pin button left the rows 2026-07-08 — the filmstrip carries the photo story) */ .sm-drop[b-8v0960m9d5] { border: 0; background: none; color: #B7A995; cursor: pointer; font-size: 1.05rem; padding: 6px 8px; margin-left: clamp(0px, 1.5%, 10px); } .sm-drop:hover[b-8v0960m9d5] { color: #8a4f3d; } /* the FILMSTRIP (owner 2026-07-08, movie-at-a-glance one level up): what will actually play under this answer. One whole-strip button — a calm doorway into the matching room at this answer. Lives inside .sm-rowbody, so it aligns under the text and the grip centers against both. */ .sm-strip[b-8v0960m9d5] { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; padding: 0; border: 0; background: none; cursor: pointer; flex-wrap: wrap; row-gap: 6px; } .sm-strip-th[b-8v0960m9d5] { position: relative; flex: none; } .sm-strip-th img[b-8v0960m9d5] { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #ECE7DE; } .sm-strip:hover .sm-strip-th img[b-8v0960m9d5] { border-color: #C9D4E6; } /* 📌 corner = placed on purpose (holds through reorders); bare = the spread's deal for this order. Big enough to READ as a pushpin (owner 2026-07-08), on a white chip so it pops off any photo */ .sm-strip-th.pinned[b-8v0960m9d5]::after { content: "📌"; position: absolute; top: -9px; right: -9px; font-size: 16px; line-height: 1; background: rgba(255,255,255,.95); border-radius: 999px; padding: 3px; box-shadow: 0 1px 3px rgba(37,50,75,.3); } .sm-strip-more[b-8v0960m9d5] { font-size: 13px; color: #6a5424; background: #F5EDDC; border-radius: 999px; padding: 3px 10px; flex: none; } /* each row is a soft contained SLAB (owner 2026-07-08: "rows should feel like units", then "many vertical lines are disorienting") — fill only, NO border: by this depth the row sits inside the rail + stop card + chapter card, and a fourth outline just adds parallel lines. The fill carries the unit; the width nearly reaches the chapter's edge so the two edges don't read as separate verticals. */ .sm-answers > .sm-ans-dragwrap[b-8v0960m9d5], .sm-answers > .sm-rowunit[b-8v0960m9d5] { background: #F6F1E9; padding: 12px 16px; margin: 0; } .sm-answers > .sm-ans-dragwrap > .sm-rowunit[b-8v0960m9d5] { background: none; padding: 0; margin: 0; } /* row reorder (owner 2026-07-07: drag-only, chevrons ditched): the grip replaces the dot and keeps its silent self-accent — gold = the subject's own voice. SortableJS since 2026-07-08: hold-to-drag works on Android AND iOS now (HTML5 drag left Android out). */ .sm-ans-grip[b-8v0960m9d5] { cursor: grab; letter-spacing: 2px; color: #C3B39C; flex: none; touch-action: none; } .sm-ans-grip:active[b-8v0960m9d5] { cursor: grabbing; } .sm-rowunit.self .sm-ans-grip[b-8v0960m9d5] { color: #B07A12; } /* SortableJS drag states (names wired in dti-cutboard-sortable.js). The fallback clone is parked on but keeps this file's scope attribute, so these scoped rules still reach it. */ .sm-drag-ghost[b-8v0960m9d5] { opacity: .35; } .sm-drag-chosen[b-8v0960m9d5] { cursor: grabbing; } .sm-drag-fallback[b-8v0960m9d5] { box-shadow: 0 10px 26px rgba(37,50,75,.20); opacity: .97; cursor: grabbing; } .sm-reset[b-8v0960m9d5] { color: #5A6478; font-size: 15px; } .sm-reset a[b-8v0960m9d5] { color: #2C4A7E; text-decoration: underline dotted; cursor: pointer; } /* /Components/Pages/Interviews/StoryMovie.razor.rz.scp.css */ /* Spec 028 — the story storyboard. Warm-card language from the account home (.ivw family) + the spec-017 hub tokens; the include pill (.iv-q-keep) comes from app.css unchanged. Compile-unit split: the chapter lists, pin picker, and render panel each carry their own scoped CSS (StoryCutBoard/StoryPinPicker/StoryRenderPanel .razor.css) — this file keeps only what the page itself renders (header, route/stops, voices, cut switcher, nudge). */ .sm-wrap[b-xab3uxu7t9] { max-width: 720px; margin: 0 auto; padding: 4px 16px 64px; } /* the standard story header: pill + "A story about …" on one line (owner 2026-07-03) */ .sm-shead[b-xab3uxu7t9] { display: flex; align-items: center; gap: 12px; margin: 6px 0 22px; } .sm-title[b-xab3uxu7t9] { font-size: 1.6rem; font-weight: 600; color: #25324B; margin: 0; } .sm-soft[b-xab3uxu7t9] { font-weight: 400; color: #5A6478; } /* ---- the route (owner 2026-07-03): the storyboard is the last stretch of the home card's road, in the story card's EXACT language — each stop is a CARD, and the line curves in to dock at the card's left edge (station on the edge), then curves back out down to the next card. Docked at a fixed y near the card's top (≈ where a home row's mid-height lands) since these cards are tall. ---- */ .sm-route[b-xab3uxu7t9] { position: relative; } .sm-stop[b-xab3uxu7t9] { position: relative; padding-left: 46px; margin-bottom: 14px; } .sm-stop:last-child[b-xab3uxu7t9] { margin-bottom: 0; } /* each stop's body wears the STORY CARD's clothes (owner 2026-07-03: match the landing page — the home-row parchment fill disappeared against this page's background); gold terminus keeps the doorway's warm face. */ .sm-stop-body[b-xab3uxu7t9] { background: #fff; border: 1px solid #ECE7DE; border-radius: 12px; padding: 14px 18px; transition: border-color .15s; } .sm-stop-body:hover[b-xab3uxu7t9] { border-color: #d8d0c2; } .sm-stop-gold .sm-stop-body[b-xab3uxu7t9] { background: #FBF3E2; border-color: #E3CF9E; } /* the IN curve: from the rail's x, right, docking at the card edge */ .sm-stop[b-xab3uxu7t9]::before { content: ''; position: absolute; left: 13px; top: -9px; height: 35px; width: 33px; border-left: 2px solid #DDD6C8; border-bottom: 2px solid #DDD6C8; border-bottom-left-radius: 16px; } /* the first curve reaches up through the header gap so the road hangs from the occasion pill */ .sm-stop:first-child[b-xab3uxu7t9]::before { top: -26px; height: 52px; } /* the OUT curve (the terminus has none — the road ends there) */ .sm-stop:not(:last-child)[b-xab3uxu7t9]::after { content: ''; position: absolute; left: 13px; top: 26px; bottom: -9px; width: 33px; border-left: 2px solid #DDD6C8; border-top: 2px solid #DDD6C8; border-top-left-radius: 16px; } /* the station rides the card's edge, centered on the dock point (46px, 26px) where both road curves meet — exactly like the story card. Bigger circle + numeral/▶ (owner 2026-07-08): left/top are DERIVED as dock − radius (46−14=32, 26−14=12) so the center stays put and the road still docks. */ .sm-station[b-xab3uxu7t9] { position: absolute; left: 32px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #DDD6C8; color: #5A6478; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; z-index: 1; } .sm-station svg[b-xab3uxu7t9] { width: 14px; height: 14px; } .sm-stop-title[b-xab3uxu7t9] { font-weight: 600; font-size: 20px; color: #25324B; margin: 0 0 16px; } .sm-stop-gold .sm-station[b-xab3uxu7t9] { background: #B07A12; border-color: #B07A12; color: #fff; } /* the album count: a whisper directly under the stop title, with air before the doorway links */ .sm-photos-count[b-xab3uxu7t9] { color: #9aa2b1; font-size: 14.5px; margin: -13px 0 14px; } /* the occasion pill leads with its icon, exactly like the story card (owner 2026-07-03) */ .sm-occ[b-xab3uxu7t9] { display: inline-flex; align-items: center; gap: 7px; background: #E8EEF7; border: 1px solid #DBE4F1; color: #2C4A7E; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .sm-occ[b-xab3uxu7t9] svg { display: block; flex: 0 0 auto; width: 16px; height: 16px; } /* the album's quiet doorways — a bulleted pair with air above and between (owner 2026-07-08) */ .sm-photos-links[b-xab3uxu7t9] { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .sm-photos-link[b-xab3uxu7t9] { color: #2C4A7E; font-size: 16px; text-decoration: none; width: fit-content; } .sm-photos-link[b-xab3uxu7t9]::before { content: "•"; color: #b9a58d; margin-right: 9px; } .sm-photos-link:hover[b-xab3uxu7t9] { text-decoration: underline; } /* ---- THE cut switcher (owner 2026-07-03: the one clear place to change how the film threads) ---- */ .sm-cutswitch[b-xab3uxu7t9] { display: flex; gap: 0; margin: 0 0 14px; border: 1.5px solid #C9D4E6; border-radius: 12px; overflow: hidden; background: #fff; } .sm-cut[b-xab3uxu7t9] { flex: 1 1 0; padding: 12px 10px; font-size: 16.5px; font-weight: 600; font-family: inherit; background: #fff; color: #5A6478; border: 0; cursor: pointer; transition: background .15s, color .15s; display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .sm-cut svg[b-xab3uxu7t9] { width: 17px; height: 17px; flex: 0 0 auto; } /* the quiet line under the switcher: says what picking does without shouting */ .sm-cuthint[b-xab3uxu7t9] { margin: -8px 0 24px; text-align: center; color: #8a93a5; font-size: 14.5px; } .sm-cut + .sm-cut[b-xab3uxu7t9] { border-left: 1.5px solid #C9D4E6; } .sm-cut:hover[b-xab3uxu7t9] { color: #2C4A7E; } .sm-cut.active[b-xab3uxu7t9] { background: #2C4A7E; color: #fff; } .sm-voices[b-xab3uxu7t9] { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; } .sm-voice[b-xab3uxu7t9] { margin-left: 0; padding: 9px 15px; font-size: 16px; } .sm-voice-name[b-xab3uxu7t9] { font-weight: 700; } .sm-voice-rel[b-xab3uxu7t9] { font-weight: 400; opacity: .85; } /* an unfinalized voice: present but not checkable — the tooltip carries the nudge */ .sm-voice-locked[b-xab3uxu7t9] { opacity: .55; cursor: default; } .sm-nudge[b-xab3uxu7t9] { border-left: 4px solid #B07A12; background: #FBF3E2; border-radius: 8px; padding: 10px 16px; color: #6a5424; display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: 15.5px; } .sm-nudge button[b-xab3uxu7t9] { margin-left: auto; } /* StoryPinPicker's foot "Done" carries its own copy of this — keep the two in step */ .sm-btn-quiet[b-xab3uxu7t9] { background: #fff; border: 1px solid #ECE7DE; border-radius: 10px; padding: 8px 16px; cursor: pointer; color: #25324B; } /* /Components/Pages/Interviews/StoryPhotos.razor.rz.scp.css */ /* Spec 028 increment 5 — the story album page. Same calm column the storyboard uses. This screen does ONE thing (owner 2026-07-08): upload and delete. Pinning lives on the storyboard's matching room — the tiles only wear a passive 📌 badge reporting it. */ .sp-wrap[b-w4hi7x1l47] { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; } .sp-title[b-w4hi7x1l47] { font-size: 28px; margin: 0; color: #25324B; } .sp-sub[b-w4hi7x1l47] { color: #5A6478; font-size: 15.5px; line-height: 1.45; } .sp-h3[b-w4hi7x1l47] { font-size: 17px; margin: 18px 0 0; color: #25324B; } .sp-empty[b-w4hi7x1l47] { color: #5A6478; font-size: 15.5px; padding: 26px 0; text-align: center; } .sp-actions[b-w4hi7x1l47] { display: flex; align-items: center; gap: 16px; } /* the rare bulk-destructive lives FAR RIGHT, away from Add (owner 2026-07-08); danger tint on hover only */ .sp-removeall[b-w4hi7x1l47] { margin-left: auto; background: none; border: none; color: #8a93a5; font-size: 14.5px; cursor: pointer; padding: 6px 4px; display: inline-flex; align-items: center; gap: 6px; } .sp-removeall svg[b-w4hi7x1l47] { width: 15px; height: 15px; flex: 0 0 auto; } .sp-removeall span[b-w4hi7x1l47] { text-decoration: underline dotted; } .sp-removeall:hover:not(:disabled)[b-w4hi7x1l47] { color: #8a4f3d; } .sp-removeall:disabled[b-w4hi7x1l47] { opacity: .4; cursor: default; } .sp-add-btn[b-w4hi7x1l47] { display: inline-block; padding: 9px 16px; background: var(--iv-accent, #2C4A7E); color: #fff; border-radius: 8px; cursor: pointer; font-size: 15.5px; font-weight: 600; user-select: none; } .sp-add-btn:hover[b-w4hi7x1l47] { filter: brightness(1.08); } .sp-add-btn.sp-disabled[b-w4hi7x1l47] { opacity: .4; cursor: not-allowed; pointer-events: none; } .sp-grid[b-w4hi7x1l47] { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .sp-cell[b-w4hi7x1l47] { border: 1px solid #ECE7DE; border-radius: 8px; overflow: hidden; background: #FAF7F2; } .sp-cell img[b-w4hi7x1l47] { display: block; width: 100%; height: 120px; object-fit: cover; } /* just the quiet delete under each photo — nothing else (owner 2026-07-08: super simple) */ .sp-toolbar[b-w4hi7x1l47] { display: flex; justify-content: flex-end; padding: 1px 4px; } /* /Components/Pages/Interviews/StoryPinPicker.razor.rz.scp.css */ /* Kenny feedback rework (2026-07-08) — the pin picker grew into the MATCHING ROOM: full-screen, answer (with audio) sticky up top, the album below. Scoped CSS follows its markup. */ /* z-index above the site header's sticky 100 — the room's own top row lived under it otherwise */ /* IN-PAGE room (owner 2026-07-08: the page swaps the board out and renders THIS instead — no overlay, no z-index games; the page's own scrollbar scrolls the room) */ .sm-pinroom[b-qqxhnwb7ki] { display: flex; flex-direction: column; padding-top: 6px; } /* the answer stays on screen (and audible) while the album scrolls — sticky, painted the PAGE's warm color so it sits flat (no white slab); the border only says "content slides under here" */ .sm-pinroom-head[b-qqxhnwb7ki] { position: sticky; top: 0; z-index: 5; padding: 12px 0 16px; border-bottom: 1px solid #ECE7DE; background: #FAF7F2; display: flex; flex-direction: column; gap: 10px; } .sm-pinroom-meta[b-qqxhnwb7ki] { display: flex; align-items: center; gap: 10px; } /* type scale matches the storyboard rows (owner 2026-07-08: we upped sizes app-wide — new surfaces keep that scale, never drift smaller) */ /* the title carries the counter (owner 2026-07-08: pill retired, Previous/Next became chevrons) */ .sm-pinroom-job[b-qqxhnwb7ki] { margin: 0; color: #25324B; font-size: 21px; font-weight: 600; flex: 1 1 auto; } /* circular chevron buttons flanking the answer block (owner 2026-07-08) — the walk's whole controls */ .sm-pinroom-answerrow[b-qqxhnwb7ki] { display: flex; align-items: center; gap: 10px; } .sm-pinroom-chev[b-qqxhnwb7ki] { flex: none; width: 48px; height: 48px; border: 1px solid #ECE7DE; border-radius: 50%; background: #fff; color: #2C4A7E; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; box-shadow: 0 1px 4px rgba(37,50,75,.08); } .sm-pinroom-chev:hover:not(:disabled)[b-qqxhnwb7ki] { border-color: #C9D4E6; background: #F7FAFF; } .sm-pinroom-chev:disabled[b-qqxhnwb7ki] { opacity: .3; cursor: default; box-shadow: none; } /* the ANSWER BLOCK — the storyboard row's contained slab, live in the room: question + duration, the small player, the strip of what ACTUALLY plays right now, and one honest state line */ .sm-pinroom-answer[b-qqxhnwb7ki] { background: #F6F1E9; border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; } .sm-pinroom-answer-line[b-qqxhnwb7ki] { display: flex; align-items: center; gap: 10px; } .sm-pinroom-q[b-qqxhnwb7ki] { flex: 1 1 0; min-width: 0; color: #25324B; font-size: 16.5px; font-weight: 600; } .sm-pinroom-voice[b-qqxhnwb7ki] { color: #5A6478; font-size: 15px; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sm-pinroom-voice.self[b-qqxhnwb7ki] { color: #B07A12; } .sm-pinroom-len[b-qqxhnwb7ki] { margin-left: auto; color: #5A6478; font-size: 14.5px; flex: none; font-variant-numeric: tabular-nums; } .sm-pinroom-audio[b-qqxhnwb7ki] { width: min(400px, 100%); height: 32px; } .sm-pinroom-strip[b-qqxhnwb7ki] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 6px; } .sm-strip-th[b-qqxhnwb7ki] { position: relative; flex: none; } .sm-strip-th img[b-qqxhnwb7ki] { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #ECE7DE; } .sm-strip-th.pinned[b-qqxhnwb7ki]::after { content: "📌"; position: absolute; top: -9px; right: -9px; font-size: 16px; line-height: 1; background: rgba(255,255,255,.95); border-radius: 999px; padding: 3px; box-shadow: 0 1px 3px rgba(37,50,75,.3); } .sm-strip-more[b-qqxhnwb7ki] { font-size: 13px; color: #6a5424; background: #F5EDDC; border-radius: 999px; padding: 3px 10px; flex: none; } .sm-pinroom-state[b-qqxhnwb7ki] { color: #8a7a55; font-size: 14px; } .sm-pinroom-body[b-qqxhnwb7ki] { padding-top: 18px; padding-bottom: 14px; } .sm-pinroom-avail[b-qqxhnwb7ki] { margin: 0 0 12px; color: #25324B; font-size: 16.5px; font-weight: 600; } .sm-pinroom-avail-sub[b-qqxhnwb7ki] { color: #8a93a5; font-size: 14.5px; font-weight: 400; } .sm-pinpicker-head[b-qqxhnwb7ki] { display: flex; align-items: baseline; gap: 10px; color: #25324B; } .sm-pinpicker-close[b-qqxhnwb7ki] { background: none; border: none; font-size: 16px; color: #8a93a5; cursor: pointer; flex: 0 0 auto; } .sm-pinpicker-close:hover[b-qqxhnwb7ki] { color: #b3402f; } .sm-pinpicker-grid[b-qqxhnwb7ki] { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; } .sm-pinphoto[b-qqxhnwb7ki] { position: relative; border: 2px solid #ECE7DE; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; background: #FAF7F2; } .sm-pinphoto img[b-qqxhnwb7ki] { display: block; width: 100%; height: 116px; object-fit: cover; } .sm-pinphoto:hover[b-qqxhnwb7ki] { border-color: #C9D4E6; } .sm-pinphoto.here[b-qqxhnwb7ki] { border-color: #B07A12; } /* one pin language everywhere (owner 2026-07-08): 16px pushpin on a white circular chip */ .sm-pinmark[b-qqxhnwb7ki] { position: absolute; top: 5px; right: 5px; font-size: 16px; line-height: 1; background: rgba(255,255,255,.95); border-radius: 999px; padding: 3px; box-shadow: 0 1px 3px rgba(37,50,75,.3); } .sm-pinpicker-foot[b-qqxhnwb7ki] { display: flex; align-items: center; gap: 12px; color: #5A6478; font-size: 14.5px; padding-top: 12px; margin-bottom: 30px; border-top: 1px solid #ECE7DE; } .sm-pinpicker-foot span[b-qqxhnwb7ki] { flex: 1 1 auto; } .sm-pinpicker-foot .sm-btn-quiet[b-qqxhnwb7ki] { flex: 0 0 auto; } /* phones: same in-page room; the tall answer block would eat a sticky phone screen, so it scrolls normally there; full-size touch targets */ @media (max-width: 560px) { .sm-pinroom-head[b-qqxhnwb7ki] { position: static; } .sm-pinroom-meta[b-qqxhnwb7ki] { flex-wrap: wrap; row-gap: 6px; } /* the question gets its own full line (the byline was strangling it into one-word-per-line); voice + duration follow as a calm second line */ .sm-pinroom-answer-line[b-qqxhnwb7ki] { flex-wrap: wrap; row-gap: 2px; } .sm-pinroom-q[b-qqxhnwb7ki] { flex-basis: 100%; font-size: 15.5px; } .sm-pinroom-answerrow[b-qqxhnwb7ki] { gap: 6px; } .sm-pinroom-answer[b-qqxhnwb7ki] { padding: 10px 12px; } .sm-strip-th img[b-qqxhnwb7ki] { width: 48px; height: 48px; } .sm-pinpicker-grid[b-qqxhnwb7ki] { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .sm-pinphoto img[b-qqxhnwb7ki] { height: 96px; } } /* deliberate copy of the page's .sm-btn-quiet — scoped CSS can't reach across the split, and the nudge on the page still needs its own copy. Keep the two in step. */ .sm-btn-quiet[b-qqxhnwb7ki] { background: #fff; border: 1px solid #ECE7DE; border-radius: 10px; padding: 8px 16px; cursor: pointer; color: #25324B; } .sm-btn-quiet:disabled[b-qqxhnwb7ki] { opacity: .45; cursor: default; } /* /Components/Pages/Interviews/StoryRenderPanel.razor.rz.scp.css */ /* Spec 028 — the gold stop's player + actions (moved from StoryMovie.razor.css in the compile-unit split). The panel only ever renders inside the page's .sm-stop-gold card, so the monolith's ".sm-stop .sm-card / .sm-stop .sm-actions" contextual overrides are FLATTENED in here — a child's scoped CSS can't see the parent's .sm-stop, and the standalone-card base values were dead inside the stop anyway. */ /* the finished movie, playable right in the gold stop */ .sm-player[b-ei4bv6bk4e] { display: block; width: 100%; border-radius: 10px; background: #000; margin: 0 0 14px; } /* was .sm-card + .sm-stop .sm-card: inside a stop card the standalone chrome collapses */ .sm-card[b-ei4bv6bk4e] { background: transparent; border: none; border-radius: 12px; padding: 0; margin-bottom: 0; } /* was .sm-actions (margin-top: 30px) + .sm-stop .sm-actions (margin-top: 4px — the winner here) */ .sm-actions[b-ei4bv6bk4e] { display: flex; align-items: center; gap: 16px; margin-top: 4px; } .sm-btn-primary[b-ei4bv6bk4e] { background: #2C4A7E; color: #fff; border: 0; border-radius: 10px; padding: 12px 26px; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; } .sm-btn-primary:disabled[b-ei4bv6bk4e] { opacity: .5; cursor: default; } .sm-btn-primary svg[b-ei4bv6bk4e] { width: 18px; height: 18px; flex: 0 0 auto; } .sm-download[b-ei4bv6bk4e] { font-weight: 600; color: #B07A12; display: inline-flex; align-items: center; gap: 7px; } .sm-download svg[b-ei4bv6bk4e] { width: 17px; height: 17px; flex: 0 0 auto; } .sm-failed[b-ei4bv6bk4e] { color: #8a2e2e; font-size: .9rem; } .sm-stopped[b-ei4bv6bk4e] { color: #5A6478; font-size: .9rem; } .sm-progress[b-ei4bv6bk4e] { flex: 1; } .sm-bar[b-ei4bv6bk4e] { height: 8px; border-radius: 4px; background: #ECE7DE; overflow: hidden; } .sm-bar > div[b-ei4bv6bk4e] { height: 100%; background: #2C4A7E; transition: width .4s ease; } .sm-step[b-ei4bv6bk4e] { color: #5A6478; font-size: .95rem; margin-top: 8px; } /* the calm "you can walk away" aside — a coffee cup beside it, quieter than the live step line. The three parts (step · coffee line · stop) each get real breathing room (owner 2026-07-08: they were jammed). align-items:flex-start keeps the cup on the first line when the text wraps. */ .sm-wait-hint[b-ei4bv6bk4e] { display: flex; align-items: flex-start; gap: 11px; color: #5A6478; font-size: 1rem; line-height: 1.45; margin-top: 18px; } .sm-wait-hint svg[b-ei4bv6bk4e] { width: 26px; height: 26px; flex: 0 0 auto; margin-top: 1px; } /* the quiet in-flight escape — link-weight on purpose (accidental clicks started this; the way out shouldn't invite its own) */ .sm-cancel[b-ei4bv6bk4e] { margin-top: 18px; padding: 0; border: none; background: none; color: #5A6478; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .sm-cancel:hover[b-ei4bv6bk4e] { color: #2C4A7E; } .sm-cancel:disabled[b-ei4bv6bk4e] { opacity: .5; cursor: default; } /* /Components/Pages/MyAccount.razor.rz.scp.css */ /* Spec 017 — warm pass on the post-login router page. The routing state is deliberately near-empty: it matches the account-home cream so a fast redirect reads as one page load, and the wait message only fades in when the wait is long enough to notice (cold start). */ .myacct[b-0sv90yga1p] { background: #FAF7F2; margin: -8px -24px; /* bleed past app.css .content padding (0.5rem 1.5rem) */ padding: 40px 24px 64px; min-height: calc(100vh - 110px); color: #25324B; } .myacct .inner[b-0sv90yga1p] { max-width: 660px; margin: 0 auto; } .myacct .greeting[b-0sv90yga1p] { font-size: 17px; color: #5A6478; margin: 0 0 4px; } .myacct .greeting b[b-0sv90yga1p] { color: #25324B; font-weight: 600; } .myacct h1[b-0sv90yga1p] { font-size: 34px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 6px 0 14px; } .myacct .lede[b-0sv90yga1p] { font-size: 18px; color: #5A6478; line-height: 1.5; margin: 0 0 26px; } .myacct .qcard[b-0sv90yga1p] { background: #FFFFFF; border: 1px solid #ECE7DE; border-radius: 14px; padding: 18px 20px; margin: 0 0 14px; } .myacct .qlabel[b-0sv90yga1p] { display: block; font-size: 16px; font-weight: 600; color: #25324B; margin-bottom: 8px; } /* primary CTA — mirrors the bespoke warm control on Account home (.acct-new .cta) */ .myacct .cta[b-0sv90yga1p] { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; background: #2C4A7E; color: #fff; border: none; cursor: pointer; font-size: 19.5px; font-weight: 600; font-family: inherit; padding: 15px 26px; border-radius: 10px; box-shadow: 0 1px 2px rgba(37,50,75,.18); transition: background .15s ease; } .myacct .cta:hover[b-0sv90yga1p] { background: #213A66; } .myacct .cta:focus-visible[b-0sv90yga1p] { outline: 2px solid #2C4A7E; outline-offset: 2px; } .myacct .cta .chev[b-0sv90yga1p] { width: 18px; height: 18px; } /* routing (waiting) state */ .myacct.routing[b-0sv90yga1p] { display: flex; align-items: center; justify-content: center; } .myacct .wait[b-0sv90yga1p] { text-align: center; opacity: 0; animation: myacct-reveal-b-0sv90yga1p .5s ease .6s forwards; /* invisible unless the wait is real */ } .myacct .wait-msg[b-0sv90yga1p] { font-size: 19.5px; color: #5A6478; margin: 0; } /* the SAME ring spinner as the paused page (SessionPaused.razor .sp-spinner), so a paused-idle resume reads as one continuous "waking up" rather than spinner-then-dots */ .myacct .wait-spinner[b-0sv90yga1p] { width: 44px; height: 44px; margin: 0 auto 22px; border: 4px solid rgba(44, 62, 94, 0.18); /* faint navy ring */ border-top-color: #2C4A7E; /* the button navy — reads as "this is working" */ border-radius: 50%; animation: myacct-spin-b-0sv90yga1p 0.9s linear infinite; } /* resuming from the paused page → the cold-silo wait is expected, so show it immediately (no fade delay) so there's no empty beat between the paused page's spinner and this one */ .myacct .wait.resuming[b-0sv90yga1p] { opacity: 1; animation: none; } @keyframes myacct-reveal-b-0sv90yga1p { to { opacity: 1; } } @keyframes myacct-spin-b-0sv90yga1p { to { transform: rotate(360deg); } } /* a frozen ring reads as broken — drop it under reduced-motion and let the message carry the state */ @media (prefers-reduced-motion: reduce) { .myacct .wait-spinner[b-0sv90yga1p] { display: none; } } @media (max-width: 560px) { .myacct h1[b-0sv90yga1p] { font-size: 29.5px; } } /* /Components/Pages/NormalInterview.razor.rz.scp.css */ /* Scoped styles for NormalInterview.razor — the in-call interview page. Reference: PrototypeInterviewD.razor (spike branch) for the visual pattern. */ /* Sticky top header — keeps CurrentCallVolume + time-remaining + screen-reader announcer visible while the carousel scrolls underneath. */ .interview-page-header[b-to82oso5q1] { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid #ECE7DE; background: #FCFAF6; position: sticky; top: 0; z-index: 50; } .interview-page-header-time[b-to82oso5q1] { color: #25324B; } .interview-page-header-volume[b-to82oso5q1] { flex: 1; min-width: 0; } .interview-page-header-time[b-to82oso5q1] { font-size: 1.1rem; font-weight: 500; white-space: nowrap; } .interview-page-header-time-warning[b-to82oso5q1] { color: #d32f2f; font-weight: 700; } /* Proactive in-call top-up nudge (spec 018 in-call top-up increment). A calm strip under the sticky header — non-blocking, offers more time before the balance hits the hard cutoff. Warm-aligned with the header (same paper background family); escalates to a warmer amber-red at the ~2 min mark. */ .interview-topup-nudge[b-to82oso5q1] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1.25rem; background: #FBF3E4; border-bottom: 1px solid #EAD9B0; color: #4A3F2A; } .interview-topup-nudge-urgent[b-to82oso5q1] { background: #FBE7DF; border-bottom-color: #E7B7A3; color: #7A3B26; } .interview-topup-nudge-text[b-to82oso5q1] { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .interview-topup-nudge-head[b-to82oso5q1] { font-size: 0.98rem; font-weight: 600; line-height: 1.25; } .interview-topup-nudge-sub[b-to82oso5q1] { font-size: 0.82rem; opacity: 0.8; line-height: 1.25; } .interview-topup-nudge-actions[b-to82oso5q1] { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } /* Warm-gold CTA — matches the pre-call LowBalanceNudge so both top-up surfaces read as one family (rather than the site-accent blue clashing with the amber/salmon strip). */ .interview-topup-nudge-btn[b-to82oso5q1] { background: #B4832B; color: #fff; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; font-family: inherit; padding: 0.5rem 0.9rem; border-radius: 8px; white-space: nowrap; } .interview-topup-nudge-btn:hover:not(:disabled)[b-to82oso5q1] { background: #9E7124; } .interview-topup-nudge-btn:disabled[b-to82oso5q1] { opacity: 0.6; cursor: default; } .interview-topup-nudge-dismiss[b-to82oso5q1] { background: transparent; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; color: inherit; opacity: 0.55; padding: 0.15rem 0.4rem; border-radius: 6px; } .interview-topup-nudge-dismiss:hover[b-to82oso5q1] { opacity: 1; background: rgba(0, 0, 0, 0.06); } /* Liveness cue next to the time-remaining clock (tester feedback) — a constant sign of life so the header never reads as frozen at a glance. RECORDING: a red pulsing dot. PAUSED (between questions): a gently pulsing pause icon — still alive, but unambiguously paused (amber, matching the card's standby strip). Both honor reduced-motion. */ .interview-page-live-dot[b-to82oso5q1] { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; background: #d32f2f; animation: ipl-live-pulse-b-to82oso5q1 1.4s ease-in-out infinite; } .interview-page-live-pause[b-to82oso5q1] { display: inline-flex; align-items: center; margin-right: 4px; vertical-align: middle; color: #BA7517; animation: ipl-live-fade-b-to82oso5q1 1.9s ease-in-out infinite; } @keyframes ipl-live-pulse-b-to82oso5q1 { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.6); } } @keyframes ipl-live-fade-b-to82oso5q1 { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .interview-page-live-dot[b-to82oso5q1], .interview-page-live-pause[b-to82oso5q1] { animation: none; } } /* Pending-server transition state — server round-trip in flight; primary action buttons are disabled and a busy indicator is visible. */ .interview-page-busy-overlay[b-to82oso5q1] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; min-height: 40vh; } .interview-page-busy-message[b-to82oso5q1] { margin-top: 1rem; font-size: 1.1rem; } .interview-page-busy-overdue-hint[b-to82oso5q1] { margin-top: 1.5rem; padding: 0.6rem 1rem; border-radius: 6px; background: #fff8e1; border: 1px solid #ffe082; color: #5d4400; font-size: 0.95rem; max-width: 30rem; text-align: center; } /* Full-page completion state — replaces the previous modal-dialog popup. Warmed for the moment (spec 017): a soft gold keepsake badge, a gentle headline + a sentence about what they captured. */ .interview-page-complete[b-to82oso5q1] { padding: 4.5rem 2rem; text-align: center; max-width: 540px; margin: 0 auto; } /* Gold "keepsake" badge — gold is the journey's movie/output colour, and this is the moment right before the movie. */ .ipc-badge[b-to82oso5q1] { width: 84px; height: 84px; border-radius: 50%; background: #FBF3E2; color: #B07A12; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .ipc-headline[b-to82oso5q1] { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.01em; color: #25324B; margin: 0; } .ipc-sub[b-to82oso5q1] { font-size: 1.15rem; line-height: 1.5; color: #5A6478; margin: 0.75rem auto 0; max-width: 26rem; } .ipc-count[b-to82oso5q1] { font-size: 0.95rem; color: #8A93A3; margin-top: 1.25rem; } /* Ended-early variant: same calm layout, a muted badge instead of celebratory gold. */ .interview-page-complete.ipc-ended .ipc-badge[b-to82oso5q1] { background: #EEF0F3; color: #5A6478; } .interview-page-complete-action[b-to82oso5q1] { margin-top: 1.75rem; } /* Graceful end-of-call wrap-up hold — same calm, centered layout as the completion state, with a live countdown to the server-enforced auto-end and a deliberate "end now" action. Shown after the last question while the line is briefly held for goodbyes. */ .interview-page-wrapup[b-to82oso5q1] { padding: 4rem 2rem; text-align: center; max-width: 540px; margin: 0 auto; } .ipw-badge[b-to82oso5q1] { width: 84px; height: 84px; border-radius: 50%; background: #FBF3E2; color: #B07A12; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .ipw-headline[b-to82oso5q1] { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.01em; color: #25324B; margin: 0; } .ipw-sub[b-to82oso5q1] { font-size: 1.15rem; line-height: 1.5; color: #5A6478; margin: 0.6rem auto 0; max-width: 26rem; } .ipw-saygoodbye[b-to82oso5q1] { font-size: 1rem; color: #5A6478; margin: 1.5rem auto 0; max-width: 26rem; } .ipw-countdown[b-to82oso5q1] { margin-top: 1rem; font-size: 1rem; color: #8A93A3; } .ipw-countdown strong[b-to82oso5q1] { color: #25324B; font-variant-numeric: tabular-nums; } /* Last 10s — gently draw the eye to the closing clock without alarm. */ .ipw-countdown-critical strong[b-to82oso5q1] { color: #d32f2f; } .interview-page-wrapup-action[b-to82oso5q1] { margin-top: 1.75rem; } /* "Saying goodbye…" hold — shown once the close is underway (button pressed or window elapsed), until the server confirms the call ended and the completion state takes over. */ .ipw-closing[b-to82oso5q1] { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-top: 2rem; color: #5A6478; font-size: 1.05rem; } /* /Components/Shared/BrandLogo.razor.rz.scp.css */ /* Scoped styles for BrandLogo.razor. The wordmark font is also set globally by .dti-marketing .dti-wordmark (app.css); these add the lockup layout + sizing. */ .dti-logo[b-tqefnnqz4o] { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; } .dti-logo-mark[b-tqefnnqz4o] { display: block; flex: none; } .dti-wordmark[b-tqefnnqz4o] { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--dti-ink); white-space: nowrap; } .dti-logo:hover .dti-wordmark[b-tqefnnqz4o] { color: var(--dti-blue); } /* /Components/Shared/CommonFooter.razor.rz.scp.css */ /* Scoped styles for CommonFooter.razor. The site-level