/* ─────────────────────────────────────────────────────────── features.css — Smilesoft / Functii page Layers a feature-page design system on top of the v1 base (variables, header pill, footer) defined in style.css. ─────────────────────────────────────────────────────────── */ /* ── Feature-page tokens (mirror the design bundle) ──────── */ .features-page { --navy: #1E2A78; --navy-deep: #161F5C; --navy-soft: #2D3A8C; --paper: #FFFFFF; --gray: #F4F5F7; --gray-2: #ECEEF1; --gray-3: #DEE1E7; --accent: #F26B6B; --accent-soft: #FBDDDD; --accent-deep: #DB4F4F; --pop-pink: #F8D6EF; --pop-pink-d: #C5559A; --pop-lime: #DDFCB6; --pop-lime-d: #6FA82A; --pop-mint: #C4EDE9; --pop-mint-d: #3E8C82; --ink: #1A1F3D; --ink-soft: #5B6390; --ink-mute: #9CA1C2; --hairline: #E5E6EA; /* AppointmentsG specifics */ --slot-empty: #f2f2f7; --check-green: #3ECF8E; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 30px; background: var(--paper); color: var(--ink); } /* The v1 base sets a navy background on ; on this page we want a clean paper backdrop so the illustrations breathe. */ .features-page #main { background: var(--paper); } /* ── Hero / intro ────────────────────────────────────────── */ .fx-hero { /* leave room for the fixed header pill (~140px) plus design's 80px top */ padding: 220px 0 40px; text-align: center; } .fx-hero__inner { max-width: 880px; margin: 0 auto; padding: 0 32px; } .fx-hero__pill { display: inline-block; padding: 8px 18px; border-radius: 999px; background: var(--gray); font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; } .fx-hero__title { font-size: clamp(38px, 5vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; margin: 22px 0 18px; color: var(--ink); text-wrap: pretty; } .fx-hero__lede { font-size: 19px; color: var(--ink-soft); max-width: 620px; margin: 0 auto; line-height: 1.55; } /* ── Reusable "mark" (coral highlight) ───────────────────── */ .fx-mark { display: inline; padding: 0.08em 0.28em; background: var(--accent); color: #fff; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; margin: 0; line-height: 1; } /* ── Feature section + row ───────────────────────────────── */ .fx-section { padding: clamp(100px, 11vw, 150px) 0; } .fx-section--alt { background: var(--paper); } .fx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(56px, 7vw, 96px); align-items: center; max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 64px); } .fx-row > * { min-width: 0; } .fx-row--reverse > .fx-copy { order: 2; } .fx-row--reverse > .fx-illu { order: 1; } @media (max-width: 1100px) { .fx-row { grid-template-columns: minmax(0, 1fr); gap: 56px; } .fx-row--reverse > .fx-copy { order: 1; } .fx-row--reverse > .fx-illu { order: 2; } } /* ── Copy column ─────────────────────────────────────────── */ .fx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; } .fx-eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; } .fx-title { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 26px; text-wrap: pretty; } .fx-lede { font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 28px; max-width: 480px; } .fx-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .fx-bullets li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; color: var(--ink); min-width: 0; } .fx-bullets li::before { content: ""; flex: 0 0 22px; height: 3px; background: var(--accent); border-radius: 2px; } /* ── Illustration frame ──────────────────────────────────── */ .fx-illu .illu-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; background: transparent; border-radius: 0; overflow: visible; isolation: isolate; container-type: size; } /* ── Light dashboard card (shared by all 5 illustrations) ── */ .ld-card { position: absolute; inset: 16px; background: #fff; border-radius: 22px; padding: 24px; color: var(--ink); overflow: hidden; box-shadow: 0 1px 0 rgba(20, 28, 80, 0.04), 0 20px 40px -22px rgba(20, 28, 80, 0.22); display: flex; flex-direction: column; } .ld-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-shrink: 0; } .ld-head__title { font-size: 14px; font-weight: 700; color: var(--ink-mute); } .ld-chip { padding: 5px 12px; border-radius: 999px; background: var(--gray); color: var(--navy); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .ld-chip--lime { background: var(--pop-lime); } .ld-chip--accent { background: var(--accent); color: #fff; } .ld-chip--rec { background: var(--accent); color: #fff; } .ld-chip--rec.is-ready { background: var(--pop-lime); color: var(--navy); } .ld-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; } .ld-chip--rec.is-ready .ld-chip__dot { background: var(--navy); } .ld-chip--rec:not(.is-ready) .ld-chip__dot { animation: fx-pulse 1s infinite; } .ld-chip--status.is-ready { background: var(--pop-lime); } @keyframes fx-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.6; } } .ld-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--gray-2); display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ink-mute); } .ld-foot__accent { color: var(--accent); } .ld-foot__success { color: var(--pop-lime-d); } /* ── 01 · AppointmentsG (unit rail + slot grid + toasts + stats) ── */ .ag-card { padding: 20px; --slot-empty: #F3F6FF; --gray: #F3F6FF; --gray-2: #F3F6FF; } .ag-grid { display: grid; grid-template-columns: 148px 1fr; grid-template-rows: 1fr auto; gap: 16px; height: 100%; } .ag-rail { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; } .ag-tab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--slot-empty); color: var(--ink-mute); font-weight: 600; font-size: 15px; transition: background-color 450ms ease, color 450ms ease; } .ag-tab.is-active { background: #3E45CF; color: #fff; font-weight: 700; } .ag-tab__ico { flex-shrink: 0; } .ag-slots-area { position: relative; min-height: 0; } .ag-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; height: 100%; min-height: 220px; } .ag-slot { position: relative; border-radius: 16px; background: var(--slot-empty); border: 1px solid transparent; box-shadow: none; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; min-height: 110px; transform: scale(0.97); transition: background-color 500ms ease, border-color 500ms ease, box-shadow 500ms ease, transform 500ms cubic-bezier(.5,1.5,.4,1); } .ag-slot.is-filled { background: #3ECF8E; border-color: transparent; box-shadow: 0 1px 0 rgba(20, 28, 80, 0.04), 0 12px 24px -18px rgba(20, 28, 80, 0.25); transform: scale(1); } .ag-slot.is-filled .ag-slot__name { color: #fff; } .ag-slot.is-filled .ag-slot__when { color: rgba(255,255,255,0.8); } .ag-slot__check { width: 30px; height: 30px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: opacity 350ms ease, transform 400ms cubic-bezier(.5,1.7,.4,1) 80ms, background-color 350ms ease; } .ag-slot.is-filled .ag-slot__check { background: rgba(255,255,255,0.28); opacity: 1; transform: scale(1); } .ag-slot__body { display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(6px); transition: opacity 350ms ease 120ms, transform 400ms ease 120ms; } .ag-slot.is-filled .ag-slot__body { opacity: 1; transform: translateY(0); } .ag-slot__name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.15; } .ag-slot__when { font-size: 12px; font-weight: 600; color: var(--ink-mute); } .ag-slot__pin { position: absolute; top: -6px; right: -6px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(242, 107, 107, 0.6); opacity: 0; transform: scale(0.6); transition: opacity 350ms ease, transform 400ms cubic-bezier(.5,1.7,.4,1); } .ag-slot.is-delayed .ag-slot__pin { opacity: 1; transform: scale(1); } .ag-toast { position: absolute; top: -8px; right: -10px; width: 230px; padding: 12px 14px; background: #fff; border-radius: 14px; border: 1px solid var(--gray-2); box-shadow: 0 1px 0 rgba(20, 28, 80, 0.04), 0 18px 40px -16px rgba(20, 28, 80, 0.32); display: flex; align-items: center; gap: 10px; opacity: 0; transform: translate(12px, -8px); transition: opacity 350ms ease, transform 450ms cubic-bezier(.5,1.5,.4,1); pointer-events: none; z-index: 5; } .ag-toast.is-visible { opacity: 1; transform: translate(0, 0); } .ag-toast.is-offset { top: 48px; } .ag-toast__check { width: 30px; height: 30px; border-radius: 50%; background: var(--check-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ag-toast__body { min-width: 0; flex: 1; } .ag-toast__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ag-toast__name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-toast__ts { font-size: 10px; font-weight: 600; color: var(--ink-mute); } .ag-toast__when { display: block; font-size: 11px; font-weight: 600; color: var(--ink-mute); margin-top: 2px; } .ag-stats { grid-column: 1 / -1; background: transparent; border: 1px solid var(--gray-2); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 18px; } .ag-stats__num { background: var(--gray); border-radius: 12px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; min-width: 168px; } .ag-stats__num > span:first-child { font-size: 38px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #3E45CF; font-variant-numeric: tabular-nums; } .ag-stats__lbl { font-size: 11px; font-weight: 600; color: var(--ink-mute); line-height: 1.25; } .ag-bars { display: flex; align-items: flex-end; gap: 10px; flex: 1; height: 70px; } .ag-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; } .ag-bar__fill { width: 100%; height: 4px; max-height: 56px; background: var(--pop-mint); border-radius: 6px 6px 2px 2px; transition: height 600ms cubic-bezier(.5,1.5,.4,1), background-color 400ms ease; } .ag-bar.is-peak .ag-bar__fill { background: var(--accent); } .ag-bar__lbl { font-size: 9px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.04em; } /* ── 02 · PatientH (scrolling form → success → 2x2 profile) ── */ .ph-card { padding: 24px; --gray-2: #F2F2F7; --pop-mint-d: #3ECF8E; --pop-lime-d: #3ECF8E; --check-green: #3ECF8E; } .ph-card .ph-yes, .ph-card .ph-no { background: #D9D9D9; } .ph-frame { position: relative; flex: 1; min-height: 0; } /* Stage A · scrolling form */ .ph-form { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; opacity: 1; transition: opacity 300ms ease; } .ph-form.is-hidden { opacity: 0; pointer-events: none; } .ph-progress { height: 8px; border-radius: 999px; background: var(--gray-2); overflow: hidden; flex-shrink: 0; } .ph-progress__fill { display: block; height: 100%; width: 0; background: var(--pop-mint-d); border-radius: 999px; transition: width 700ms cubic-bezier(.4,.8,.3,1), background-color 400ms ease; } .ph-progress__fill.is-full { background: var(--pop-lime-d); } .ph-viewport { flex: 1; position: relative; overflow: hidden; } .ph-scroll { position: absolute; left: 0; right: 0; top: 0; transform: translateY(0); transition: transform 800ms cubic-bezier(.5,1.1,.4,1); display: flex; flex-direction: column; gap: 14px; padding-right: 4px; } .ph-bar { display: block; width: var(--w, 100%); height: 8px; border-radius: 999px; background: var(--gray-2); } .ph-intro { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; } .ph-q { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; } .ph-choice { display: flex; gap: 8px; margin-top: 4px; } .ph-yes, .ph-no { width: 28px; height: 28px; border-radius: 8px; background: var(--gray-2); color: #fff; display: flex; align-items: center; justify-content: center; transform: scale(0.94); transition: background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.5,1.6,.4,1); } .ph-yes.is-active { background: var(--check-green); color: #fff; transform: scale(1); } .ph-no.is-active { background: var(--accent); color: #fff; transform: scale(1); } .ph-sig { background: #fff; border: 1.5px dashed var(--ink-mute); border-radius: 12px; padding: 8px 12px; height: 86px; display: flex; flex-direction: column; margin-top: 6px; } .ph-sig__lbl { font-size: 9px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; } .ph-sig__svg { width: 100%; height: 62px; flex: 1; } .ph-sig__svg path { transition: stroke-dashoffset 1100ms cubic-bezier(.4,.6,.3,1); } /* Stage B · success */ .ph-success { position: absolute; inset: 0; background: #fff; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px; opacity: 0; transform: scale(0.96); transition: opacity 380ms ease, transform 480ms cubic-bezier(.5,1.4,.4,1); pointer-events: none; z-index: 6; } .ph-success.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; } .ph-success__check { width: 92px; height: 92px; border-radius: 50%; background: var(--pop-lime-d); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(62, 207, 142, 0.15); transform: scale(0.5); opacity: 0; transition: transform 520ms cubic-bezier(.5,1.7,.4,1) 80ms, opacity 280ms ease 80ms; } .ph-success.is-visible .ph-success__check { transform: scale(1); opacity: 1; } .ph-success__copy { text-align: center; display: flex; flex-direction: column; gap: 6px; max-width: 280px; } .ph-success__h { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.15; } .ph-success__sub { font-size: 12px; font-weight: 600; color: var(--ink-mute); line-height: 1.4; } /* Stage C · profile */ .ph-profile { position: absolute; inset: 0; background: #fff; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: scale(0.98); transition: opacity 380ms ease, transform 480ms cubic-bezier(.5,1.4,.4,1); pointer-events: none; z-index: 7; } .ph-profile.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; } .ph-profile__head { display: flex; align-items: center; gap: 12px; } .ph-profile__avatar { width: 46px; height: 46px; border-radius: 14px; background: var(--pop-mint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ph-profile__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ph-profile__name > span:first-child { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; } .ph-profile__name > span:last-child { font-size: 10px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; } .ph-profile__chip { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--pop-lime); color: var(--navy); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; } .ph-profile__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; flex: 1; } .ph-tile { background: #fff; border: 1px solid var(--gray-2); border-radius: 16px; padding: 14px 14px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; opacity: 0; transform: translateY(10px); } .ph-profile.is-visible .ph-tile { animation: ph-tile-in 480ms cubic-bezier(.5,1.4,.4,1) both; } .ph-profile.is-visible .ph-tile:nth-child(1) { animation-delay: 120ms; } .ph-profile.is-visible .ph-tile:nth-child(2) { animation-delay: 220ms; } .ph-profile.is-visible .ph-tile:nth-child(3) { animation-delay: 320ms; } .ph-profile.is-visible .ph-tile:nth-child(4) { animation-delay: 420ms; } @keyframes ph-tile-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .ph-tile__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--c); display: flex; align-items: center; justify-content: center; } .ph-tile__ico svg, .ph-profile__avatar svg { fill: var(--navy); } .ph-tile__lbl { font-size: 12px; font-weight: 700; color: var(--navy); line-height: 1.2; } .ph-profile__foot { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--gray); border-radius: 999px; padding: 7px 12px; font-size: 10px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; } .ph-profile__foot > i { width: 6px; height: 6px; border-radius: 50%; background: var(--pop-lime-d); } /* ── 02b · PatientI (QR scan → morph → form → success → profile) ─ */ .pi-card { position: absolute; /* Card phase (full): inset roughly matches .ld-card's 16px in the 640×480 design space */ top: 3.33%; left: 2.5%; right: 2.5%; bottom: 3.33%; background: #fff; border-radius: 22px; border: 2px solid transparent; box-shadow: 0 1px 0 rgba(20, 28, 80, 0.04), 0 20px 40px -22px rgba(20, 28, 80, 0.22); overflow: hidden; transition: top 700ms cubic-bezier(.6, .05, .25, 1), left 700ms cubic-bezier(.6, .05, .25, 1), right 700ms cubic-bezier(.6, .05, .25, 1), bottom 700ms cubic-bezier(.6, .05, .25, 1), border-radius 700ms cubic-bezier(.6, .05, .25, 1), border-color 500ms ease, box-shadow 700ms ease; } .pi-card.is-phone { /* Phone phase: narrow vertical, like a held-up phone (640×480 → 220px sides, 50px top/bottom) */ top: 10.42%; left: 34.375%; right: 34.375%; bottom: 10.42%; border-radius: 28px; border-color: #C9D5FB; box-shadow: 0 30px 60px -30px rgba(20, 28, 80, 0.30); } /* ── Phone-phase QR scanner content ─────────────────────────── */ .pi-phone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 22px 18px 18px; pointer-events: none; opacity: 0; transform: scale(1.08); transition: opacity 320ms ease, transform 500ms ease; } .pi-card.is-phone .pi-phone { opacity: 1; transform: scale(1); } .pi-phone__notch { position: absolute; bottom: 10px; width: 44px; height: 5px; border-radius: 999px; background: var(--gray-2); } .pi-phone__lbl { font-size: 11px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .pi-phone__hint { font-size: 10px; font-weight: 600; color: var(--ink-mute); margin-top: 18px; letter-spacing: 0.02em; text-align: center; max-width: 160px; line-height: 1.4; } /* Viewfinder */ .pi-vf { position: relative; width: 150px; height: 150px; background: rgba(20, 28, 80, 0.04); border-radius: 18px; overflow: hidden; transition: background-color 300ms ease; margin: auto 0; } .pi-vf.is-detected { background: rgba(111, 168, 42, 0.10); } .pi-vf__grid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; padding: 14px; box-sizing: border-box; } .pi-vf__corner { position: absolute; width: 22px; height: 22px; pointer-events: none; } .pi-vf__corner::before, .pi-vf__corner::after { content: ""; position: absolute; background: var(--navy); border-radius: 2px; transition: background-color 280ms ease; } .pi-vf__corner::before { top: 0; left: 0; width: 22px; height: 4px; } .pi-vf__corner::after { top: 0; left: 0; width: 4px; height: 22px; } .pi-vf__corner--tl { top: 6px; left: 6px; } .pi-vf__corner--tr { top: 6px; right: 6px; transform: rotate(90deg); transform-origin: 11px 11px; } .pi-vf__corner--br { bottom: 6px; right: 6px; transform: rotate(180deg); transform-origin: 11px 11px; } .pi-vf__corner--bl { bottom: 6px; left: 6px; transform: rotate(270deg); transform-origin: 11px 11px; } .pi-vf.is-detected .pi-vf__corner::before, .pi-vf.is-detected .pi-vf__corner::after { background: var(--pop-lime-d); } /* Scan line — sweeps top to bottom while scanning */ .pi-vf__scanline { position: absolute; left: 6px; right: 6px; height: 2px; border-radius: 2px; background: #3E45CF; box-shadow: 0 0 8px rgba(62, 69, 207, 0.4); animation: pi-scan 1.6s linear infinite; } .pi-vf.is-detected .pi-vf__scanline { display: none; } @keyframes pi-scan { 0% { top: 10%; } 50% { top: 88%; } 100% { top: 10%; } } /* Detected check overlay (visible when QR is found) */ .pi-vf__detected { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; } .pi-vf.is-detected .pi-vf__detected { opacity: 1; animation: pi-detect 360ms cubic-bezier(.5, 1.7, .4, 1); } .pi-vf__detected > span { width: 56px; height: 56px; border-radius: 50%; background: var(--pop-lime-d); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(111, 168, 42, 0.18); } @keyframes pi-detect { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* ── Form-phase content (reuses .ph-* selectors inside) ─────── */ .pi-content { position: absolute; inset: 0; padding: 24px; opacity: 0; transition: opacity 380ms ease; } .pi-card:not(.is-phone) .pi-content { opacity: 1; transition-delay: 260ms; } .pi-inner { position: relative; height: 100%; } /* ── 03 · TreatmentG (stepper rail + active stage card + toast) ── */ .tg-card { padding: 24px; --gray: #F3F6FF; --gray-2: #F3F6FF; --gray-3: #9CA1C2; --pop-lime: var(--pop-mint); --pop-lime-d: #3ECF8E; --accent: var(--navy-soft); } .tg-grid { display: grid; grid-template-columns: 180px 1fr; grid-template-rows: auto 1fr; gap: 18px; height: 100%; } .tg-head { grid-column: 1 / 3; display: flex; justify-content: space-between; align-items: center; } .tg-head__title { font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; } .tg-head__pill { padding: 5px 11px; border-radius: 999px; background: var(--gray); color: var(--navy); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background-color 400ms ease; white-space: nowrap; } .tg-head__pill.is-complete { background: var(--pop-lime); } /* Stepper rail */ .tg-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .tg-step { position: relative; height: 68px; display: flex; align-items: center; gap: 14px; } .tg-step::after { content: ""; position: absolute; left: 18px; top: 52px; height: 32px; width: 2px; background: var(--gray-2); transition: background-color 500ms ease; } .tg-step:last-child::after { display: none; } .tg-step.is-done::after { background: var(--pop-lime-d); } .tg-step__node { width: 36px; height: 36px; border-radius: 50%; background: var(--gray-2); color: var(--ink-mute); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; z-index: 1; transition: background-color 400ms ease, color 400ms ease, box-shadow 400ms ease, transform 400ms cubic-bezier(.5,1.6,.4,1); } .tg-step.is-active .tg-step__node { background: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(45, 58, 140, 0.16); transform: scale(1.05); } .tg-step.is-done .tg-step__node { background: var(--pop-lime-d); color: #fff; } .tg-step__check { display: none; } .tg-step.is-done .tg-step__n { display: none; } .tg-step.is-done .tg-step__check { display: inline-flex; } .tg-step__lbl { font-size: 14px; font-weight: 700; color: var(--ink-mute); letter-spacing: -0.01em; transition: color 400ms ease; } .tg-step.is-active .tg-step__lbl { color: var(--navy); } .tg-step.is-done .tg-step__lbl { color: var(--ink-soft); } /* Stage area (right pane) */ .tg-stage { position: relative; min-height: 0; } .tg-shell { position: absolute; inset: 0; background: #fff; border: 1px solid var(--gray-2); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 0 rgba(20, 28, 80, 0.03); opacity: 0; pointer-events: none; transition: opacity 300ms ease; } .tg-shell.is-active { opacity: 1; pointer-events: auto; } .tg-shell__title { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; } .tg-shell__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; } /* Stage 0 — Fisa list */ .tg-list-row { display: flex; align-items: center; gap: 10px; padding: 16px 16px; background: var(--gray); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--ink); } .tg-list-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pop-lime-d); } /* Stage 1 — Plan 2D/3D treatment list */ .tg-plan { gap: 7px; } .tg-plan__row { display: flex; align-items: center; gap: 10px; padding: 16px 16px; background: var(--gray); border-radius: 10px; } .tg-plan__tooth { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tg-plan__proc { flex: 1; font-size: 11px; font-weight: 600; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tg-plan__tag { padding: 2px 7px; border-radius: 999px; background: var(--pop-mint); color: var(--navy); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; } .tg-plan__tag--3d { background: #DDE5FF; } /* Stage 2 — Radiografii file list */ .tg-files { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 7px; padding-top: 0; } .tg-rx-hdr { display: flex; align-items: center; gap: 7px; padding: 0 2px 4px; } .tg-rx-hdr__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pop-lime-d); flex-shrink: 0; } .tg-rx-hdr__from { flex: 1; font-size: 10px; font-weight: 600; color: var(--ink-mute); } .tg-rx-hdr__ts { font-size: 10px; font-weight: 600; color: var(--ink-mute); } .tg-file { width: 100%; border-radius: 12px; background: var(--gray); border: 1.5px dashed var(--gray-3); color: var(--gray-3); display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 16px 16px; transition: background 300ms, border 300ms, color 300ms; } .tg-file__ico { flex-shrink: 0; } .tg-file__info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .tg-file__name { font-size: 11px; font-weight: 700; color: var(--ink); opacity: 0; transition: opacity 250ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tg-file__fmt { font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: var(--gray-2); color: var(--ink-mute); flex-shrink: 0; opacity: 0; transition: opacity 250ms ease; } .tg-file.is-visible { background: var(--c, var(--accent)); border-color: transparent; color: #fff; animation: tg-tile-in 460ms cubic-bezier(.5,1.6,.4,1) both; } .tg-file.is-visible .tg-file__name { opacity: 1; color: #fff; } .tg-file.is-visible .tg-file__meta { opacity: 1; color: rgba(255,255,255,0.75); } .tg-file.is-visible .tg-file__fmt { opacity: 1; background: rgba(255,255,255,0.18); color: #fff; } @keyframes tg-tile-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } } /* Stage 3 — Procedura progress */ .tg-proc { padding: 10px 4px; gap: 0; } .tg-proc__lbl { font-size: 11px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; } .tg-proc__track { height: 10px; border-radius: 999px; background: var(--gray-2); overflow: hidden; } .tg-proc__fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 800ms cubic-bezier(.4,.8,.3,1); } .tg-proc__pct { font-size: 11px; font-weight: 700; color: var(--accent); margin-top: 8px; } /* Stage 4 — Reteta meds */ .tg-meds { gap: 8px; } .tg-med { padding: 16px 18px; background: var(--pop-lime); border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--navy); opacity: 0; } .tg-shell[data-stage="4"].is-active .tg-med { animation: tg-tile-in 420ms cubic-bezier(.5,1.5,.4,1) both; } .tg-shell[data-stage="4"].is-active .tg-med:nth-child(1) { animation-delay: 0ms; } .tg-shell[data-stage="4"].is-active .tg-med:nth-child(2) { animation-delay: 120ms; } /* Stage 5 — Complete row */ .tg-done-row { flex-direction: row; align-items: center; gap: 12px; padding: 16px 18px; background: var(--pop-lime); border-radius: 12px; flex: 0 0 auto; } .tg-done-row__check { width: 36px; height: 36px; border-radius: 50%; background: var(--pop-lime-d); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tg-done-row__lbl { font-size: 12px; font-weight: 700; color: var(--navy); } /* Radiografii toast (overlay on stage area, top-right) */ .tg-toast { position: absolute; top: -6px; right: -6px; width: 210px; padding: 10px 12px; background: #fff; border-radius: 12px; border: 1px solid var(--gray-2); box-shadow: 0 1px 0 rgba(20, 28, 80, 0.04), 0 18px 36px -14px rgba(20, 28, 80, 0.32); display: flex; align-items: center; gap: 10px; opacity: 0; transform: translate(10px, -10px); transition: opacity 320ms ease, transform 440ms cubic-bezier(.5,1.5,.4,1); pointer-events: none; z-index: 6; } .tg-toast.is-visible { opacity: 1; transform: translate(0, 0); } .tg-toast__check { width: 28px; height: 28px; border-radius: 50%; background: var(--pop-lime-d); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tg-toast__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; } .tg-toast__title { font-size: 12px; font-weight: 700; color: var(--ink); } .tg-toast__ts { font-size: 10px; font-weight: 600; color: var(--ink-mute); } /* ── 04 · Comms illustration ─────────────────────────────── */ .cm-total { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; } .cm-total__num { font-size: 62px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; } .cm-total__lbl { color: var(--ink-mute); font-size: 13px; font-weight: 600; } .cm-total__sub { color: var(--pop-lime-d); } .cm-grid { display: flex; flex-direction: column; gap: 6px; } .cm-grid__head { display: flex; gap: 6px; padding-left: 0; } .cm-grid__head > * { flex: 1; font-size: 10px; font-weight: 600; color: var(--ink-mute); text-align: center; } .cm-spacer { flex: 0 0 24px; } .cm-row { display: flex; gap: 6px; align-items: center; } .cm-row__lbl { width: 20px; font-size: 9px; font-weight: 600; color: var(--ink-mute); flex-shrink: 0; } .cm-cell { flex: 1; aspect-ratio: 1; background: var(--gray-2); border-radius: 6px; transform: scale(0.6); opacity: 1; transition: background 400ms ease, transform 500ms cubic-bezier(.5,1.5,.4,1), opacity 400ms ease; } .cm-cell.is-shown { transform: scale(1); } /* ── 05 · Imaging illustration ───────────────────────────── */ .im-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-bottom: 18px; } .im-bar { flex: 1; background: var(--pop-mint-d); border-radius: 3px; transition: height 400ms cubic-bezier(.5,1.4,.4,1); min-height: 4px; } .im-bar.is-alt { background: var(--accent); } .im-transcript { background: var(--gray); border-radius: 14px; padding: 14px 16px; flex: 1; min-height: 130px; position: relative; } .im-transcript__lbl { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-mute); margin-bottom: 8px; } .im-transcript__list { list-style: none; margin: 0; padding: 0; } .im-line { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; opacity: 0; transform: translateY(4px); transition: opacity 300ms ease, transform 300ms ease, color 300ms ease; } .im-line.is-shown { opacity: 1; transform: translateY(0); } .im-line.is-current { color: var(--ink); } .im-line__caret { color: var(--pop-lime-d); margin-right: 8px; font-weight: 700; } .im-cursor { display: inline-block; width: 3px; height: 16px; background: var(--accent); vertical-align: middle; animation: fx-pulse 1s infinite; margin-left: 4px; } .im-cursor.is-hidden { display: none; } /* ── CTA strip ───────────────────────────────────────────── */ .fx-cta { background: var(--navy); color: #fff; text-align: center; padding: 110px 32px; } .fx-cta__inner { max-width: 720px; margin: 0 auto; } .fx-cta__eyebrow { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #ABB5E0; font-weight: 600; margin-bottom: 16px; } .fx-cta__title { font-size: clamp(38px, 5vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0 auto 16px; max-width: 720px; color: #fff; } .fx-cta__lede { color: #ABB5E0; margin: 0 auto 32px; max-width: 520px; font-size: 17px; line-height: 1.55; } .fx-cta__btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .fx-cta__btn { padding: 16px 28px; border-radius: 999px; border: none; font-weight: 700; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 240ms cubic-bezier(0.165, 0.84, 0.44, 1); } .fx-cta__btn:hover { transform: scale(1.035); } .fx-cta__btn--primary { background: #fff; color: var(--navy); } .fx-cta__btn--ghost { background: var(--navy-deep); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); } .fx-cta__perks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; justify-content: center; gap: 24px; font-size: 13px; font-weight: 600; color: var(--pop-lime); flex-wrap: wrap; } .fx-cta__perks li::before { content: "— "; } /* ── Feature rows (alternating left-right layout) ─────── */ .fx-rows-section { background: var(--paper); } /* Override the features.html .fx-row grid — this page uses a different column ratio and padding, with .fx-row__copy / .fx-row__illu as direct grid children (no inner wrapper). */ .fx-rows-section .fx-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(48px, 6vw, 88px); align-items: center; max-width: 1340px; margin: 0 auto; padding: clamp(60px, 7vw, 100px) clamp(24px, 4vw, 64px); } .fx-rows-section .fx-row > * { min-width: 0; } .fx-rows-section .fx-row--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); } .fx-rows-section .fx-row--flip > .fx-row__copy { order: 2; } .fx-rows-section .fx-row--flip > .fx-row__illu { order: 1; } @media (max-width: 900px) { .fx-rows-section .fx-row { grid-template-columns: 1fr; gap: 48px; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); } .fx-rows-section .fx-row--flip > .fx-row__copy { order: unset; } .fx-rows-section .fx-row--flip > .fx-row__illu { order: -1; } } @media (min-width: 901px) { .features-page.fx-scrollstory .fx-rows-section { position: relative; display: grid; grid-template: 1fr / 1fr; align-items: center; max-width: 1380px; width: min(100%, 1380px); margin: 0 auto; min-height: 100vh; box-sizing: border-box; padding: clamp(76px, 9vh, 104px) 20px clamp(64px, 8vh, 92px); overflow: visible; perspective: 3400px; perspective-origin: 50% 42%; transform-style: preserve-3d; } .features-page.fx-scrollstory .fx-row { position: relative; top: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr); grid-row: 1; grid-column: 1; gap: clamp(32px, 3.6vw, 52px); align-items: center; justify-self: center; max-width: 100%; width: 100%; min-height: clamp(620px, 74vh, 780px); margin: 0; padding: clamp(60px, 7vh, 88px) clamp(44px, 5vw, 84px); border-radius: 32px; overflow: hidden; isolation: isolate; contain: layout paint style; transform-origin: 50% 100%; transform-style: preserve-3d; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .features-page.fx-scrollstory .fx-row__copy { grid-column: 1; grid-row: 1; align-self: stretch; display: grid; grid-template-rows: auto auto 1fr auto; align-content: stretch; max-width: 560px; min-height: 100%; padding: 0; } .features-page.fx-scrollstory .fx-row__illu { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; max-width: 690px; width: 100%; overflow: visible; pointer-events: none; } .features-page.fx-scrollstory .fx-row__illu .illu-frame { position: relative; inset: auto; width: 100%; aspect-ratio: 5 / 4; border: none; border-radius: 32px; overflow: hidden; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); } .features-page.fx-scrollstory .fx-row__illu .ld-card { position: absolute; inset: 0; border-radius: 28px; box-shadow: none; } .features-page.fx-scrollstory .fx-row--flip > .fx-row__copy, .features-page.fx-scrollstory .fx-row--flip > .fx-row__illu { order: initial; } .features-page.fx-scrollstory .fx-row--flip { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr); } .features-page.fx-scrollstory .fx-row.is-active { pointer-events: auto; } .features-page.fx-scrollstory .fx-row.is-cycle-paused * { animation-play-state: paused !important; } .features-page.fx-scrollstory .fx-section .fx-row__copy > *, .features-page.fx-scrollstory .fx-section .fx-row__illu { opacity: 1; transform: none; } } .fx-caps { padding: clamp(44px, 6vh, 72px) 20px clamp(104px, 12vh, 164px); } .fx-more-head { width: min(100%, 980px); margin: 0 auto; padding: clamp(72px, 9vh, 112px) 24px 0; text-align: center; } .fx-more-head__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .fx-more-head__eyebrow::before, .fx-more-head__eyebrow::after { content: ''; width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); background: currentColor; opacity: .8; } .fx-more-head__title { margin: 0; font-size: clamp(38px, 5vw, 72px); line-height: 1; font-weight: 800; letter-spacing: -.03em; } .fx-caps__grid { width: min(100%, 1340px); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); } .fx-cap { display: flex; flex-direction: column; min-height: 292px; margin: 0; padding: clamp(28px, 3vw, 40px); box-sizing: border-box; border-radius: clamp(20px, 2.4vw, 30px); overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); } .fx-cap__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .fx-cap__icon { display: flex; align-items: center; min-width: 0; } .fx-cap__icon svg { height: 46px; width: auto; } .fx-cap__link { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; text-decoration: none; transition: transform .25s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out); } .fx-cap__link:hover { transform: scale(1.09); } .fx-cap__arrow { width: 22px; height: 22px; } .fx-cap__title { margin: 0; font-family: var(--font-sans); font-size: clamp(30px, 2.7vw, 36px); font-weight: 500; letter-spacing: 0; line-height: 1.05; } .fx-cap__text { margin: auto 0 0; padding-top: 48px; font-family: var(--font-sans); font-size: clamp(17px, 1.35vw, 20px); font-weight: 400; line-height: 1.5; max-width: 34ch; } .fx-cap__pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 44px; padding: 0 14px; box-sizing: border-box; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; } .fx-cap__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; animation: fx-cap-ping 3s ease-out infinite; } .fx-wv__bar { transform-box: fill-box; transform-origin: center; animation: fx-cap-wave 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -0.26s); } .fx-wv__bar:nth-child(3n) { animation-duration: 3.4s; } .fx-wv__bar:nth-child(3n+1) { animation-duration: 2.3s; } .fx-bars__bar { transform-box: fill-box; transform-origin: bottom; animation: fx-cap-grow 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.7s); } @keyframes fx-cap-wave { 0% { transform: scaleY(0.68); } 25% { transform: scaleY(1); } 50% { transform: scaleY(0.8); } 75% { transform: scaleY(0.92); } 100% { transform: scaleY(0.68); } } @keyframes fx-cap-grow { 0% { transform: scaleY(0.74); } 30% { transform: scaleY(1); } 55% { transform: scaleY(0.84); } 80% { transform: scaleY(0.94); } 100% { transform: scaleY(0.74); } } @keyframes fx-cap-ping { 0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0.42); } 70% { box-shadow: 0 0 0 8px rgba(62, 207, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); } } .fx-notif { position: relative; isolation: isolate; width: 214px; height: 44px; } .fx-notif__item { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; width: 214px; height: 44px; padding: 0 16px; box-sizing: border-box; border-radius: 16px; font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; will-change: transform, opacity; animation: fx-notif-cycle 7s ease-in-out infinite; } .fx-notif__item--a { z-index: 3; } .fx-notif__item--b { transform: translateY(-9px) scale(0.95); z-index: 1; animation-delay: -3.5s; } .fx-notif__bell { position: relative; display: inline-flex; flex: none; } .fx-cap__icon .fx-notif__bell svg { width: 22px; height: 22px; } .fx-notif__badge { position: absolute; top: -4px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 999px; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; } @keyframes fx-notif-cycle { 0%, 40% { transform: translateX(0) translateY(0) scale(1); opacity: 1; z-index: 3; } 48% { transform: translateX(-135%) translateY(0) scale(0.95); opacity: 0; z-index: 3; } 48.6% { transform: translateX(0) translateY(-9px) scale(0.95); opacity: 0; z-index: 1; } 56%, 90% { transform: translateX(0) translateY(-9px) scale(0.95); opacity: 1; z-index: 1; } 100% { transform: translateX(0) translateY(0) scale(1); opacity: 1; z-index: 3; } } .fx-flow { display: flex; align-items: center; gap: 4px; } .fx-flow__step { flex: none; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; will-change: transform; animation: fx-flow-pulse 3.2s ease-in-out infinite; } .fx-flow__step--check { animation-delay: 0s; } .fx-flow__step--tooth { animation-delay: 0.42s; } .fx-flow__step--list { animation-delay: 0.84s; } .fx-cap__icon .fx-flow__step svg { width: 22px; height: 22px; } .fx-flow__line { flex: none; width: 18px; height: 3px; border-radius: 2px; } @keyframes fx-flow-pulse { 0% { transform: scale(1); } 8% { transform: scale(1.13); } 24% { transform: scale(1); } 100% { transform: scale(1); } } .fx-rx { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; box-sizing: border-box; border-radius: 999px; } .fx-rx__folder { flex: none; display: inline-flex; } .fx-cap__icon .fx-rx__folder svg { width: 22px; height: 22px; } .fx-rx__viewport { width: 104px; height: 26px; overflow: hidden; } .fx-rx__track { display: flex; flex-direction: column; will-change: transform; animation: fx-rx-roll 9s ease-in-out infinite; } .fx-rx__item { display: flex; align-items: center; gap: 8px; height: 26px; font-size: 14px; font-weight: 600; letter-spacing: 0; white-space: nowrap; } .fx-rx__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #F15D6F); } @keyframes fx-rx-roll { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-26px); } 66%, 94% { transform: translateY(-52px); } 100% { transform: translateY(-78px); } } @media (max-width: 1100px) { .fx-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .fx-caps { padding-top: 72px; padding-bottom: 96px; } .fx-caps__grid { grid-template-columns: 1fr; } .fx-cap { min-height: 260px; } } @media (prefers-reduced-motion: reduce) { .fx-wv__bar, .fx-bars__bar, .fx-cap__dot, .fx-notif__item, .fx-flow__step, .fx-rx__track { animation: none; } } .fx-item__num { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 14px; } .fx-item__title { grid-row: 1; align-self: start; font-family: 'Anton', var(--font-display), Impact, sans-serif; font-size: clamp(52px, 5.6vw, 84px); font-weight: 400; letter-spacing: 0; color: var(--ink); margin: 0; line-height: 0.92; text-transform: uppercase; max-width: 480px; } .fx-row__copy .fx-lede { grid-row: 4; align-self: end; max-width: 430px; margin: 0; } .fx-row__copy .fx-bullets { grid-row: 2; align-self: start; margin: 42px 0 0; display: flex; max-width: 460px; gap: 12px; } .fx-row__copy .fx-bullets li { align-items: flex-start; gap: 12px; font-size: 18px; line-height: 1.4; } .fx-row__copy .fx-bullets li::before { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 0.45em; border-radius: 50%; } .fx-row__illu .illu-frame { border: 7px solid #F3F6FF; border-radius: 32px; background: #fff; overflow: hidden; aspect-ratio: 5 / 4; position: relative; width: 100%; } .fx-row__illu .ld-card { position: absolute; inset: 0; border-radius: 28px; box-shadow: none; } /* pi-card owns the border in both states; illu-frame--pi is borderless */ .fx-row__illu .illu-frame--pi { background: transparent; border-color: transparent; } .fx-row__illu .illu-frame--pi .pi-card { top: 0; bottom: 0; left: 0; right: 0; border-color: #F3F6FF; border-radius: 28px; } .fx-row__illu .illu-frame--pi .pi-card.is-phone { left: 22%; right: 22%; border-color: #DDE5FF; } #programari .fx-row__illu { align-self: stretch; } #programari .fx-row__illu .illu-frame { aspect-ratio: unset; height: 100%; } .fx-row__illu .ag-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 12px; } .fx-row__illu .ag-rail { grid-column: 1; grid-row: 1; flex-direction: row; } .fx-row__illu .ag-tab { flex: 1; justify-content: center; } .fx-row__illu .ag-slots-area { grid-column: 1; grid-row: 2; } .fx-row__illu .ag-slot-grid { grid-template-rows: repeat(2, auto); height: auto; min-height: 0; } .fx-row__illu .ag-stats { grid-column: 1; grid-row: 3; flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 10px; } .fx-row__illu .ag-stats__num { padding: 14px 16px; min-width: auto; flex-shrink: 0; } .fx-row__illu .ag-stats__num > span:first-child { font-size: 44px; } .fx-row__illu .ag-bars { flex: 1; min-height: 80px; overflow: hidden; } .fx-row__illu .ag-slot { min-height: 0; padding: 10px 12px; aspect-ratio: 1; transform: translateZ(0); } .fx-row__illu .ag-slot.is-filled { transform: translateZ(0); } .fx-row__illu .ag-bar__fill { transform: translateZ(0); } .fx-row__illu .ag-toast { top: -48px; } #qr .fx-row__illu { align-self: stretch; display: flex; align-items: center; justify-content: center; } #qr .fx-row__illu .illu-frame { width: min(100%, 640px); height: min(100%, 640px); min-height: 520px; aspect-ratio: auto; margin-left: auto; margin-right: auto; } #tratament .fx-row__illu, #portal-pacienti .fx-row__illu { align-self: stretch; } #tratament .fx-row__illu .illu-frame, #portal-pacienti .fx-row__illu .illu-frame { aspect-ratio: unset; height: 100%; } #tratament .tg-card { padding: clamp(18px, 3vh, 28px); } #tratament .tg-grid { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(14px, 2.4vh, 22px); height: 100%; } #tratament .tg-head { grid-column: 1; } #tratament .tg-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-column: 1; grid-row: 2; gap: 8px; } #tratament .tg-step { height: auto; min-height: 78px; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 9px; padding: 12px 8px; text-align: center; background: transparent; border: 0; border-radius: 0; } #tratament .tg-step::after { left: calc(50% + 18px); top: 29px; width: calc(100% - 20px); height: 2px; } #tratament .tg-step__node { width: 34px; height: 34px; } #tratament .tg-step__lbl { font-size: 10.5px; line-height: 1.2; text-align: center; } #tratament .tg-stage { grid-column: 1; grid-row: 3; min-height: 0; } #tratament .tg-shell { border-radius: 20px; padding: clamp(18px, 3vh, 28px); gap: clamp(14px, 2vh, 20px); } #tratament .tg-shell__title { font-size: clamp(14px, 1.6vw, 18px); } #tratament .tg-shell__body { justify-content: center; gap: clamp(10px, 2vh, 16px); } #tratament .tg-list-row, #tratament .tg-plan__row, #tratament .tg-file, #tratament .tg-med { padding: clamp(15px, 2.3vh, 22px) clamp(16px, 2.6vh, 24px); border-radius: 14px; } #tratament .tg-proc { justify-content: center; padding: 0 clamp(12px, 3vw, 28px); } #tratament .tg-proc__track { height: 14px; } #tratament .tg-done-row { flex: 1; justify-content: center; } #portal-pacienti .pc-card { padding: clamp(20px, 3vh, 32px); } #portal-pacienti .pc-frame { height: 100%; } /* ── Section reveal (subtle fade-in on scroll) ───────────── */ .fx-section .fx-row__copy > *, .fx-section .fx-row__illu { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); } .fx-section.is-in .fx-row__copy > * { opacity: 1; transform: translateY(0); } .fx-section.is-in .fx-row__illu { opacity: 1; transform: translateY(0); transition-delay: 120ms; } .fx-section.is-in .fx-row__copy > *:nth-child(2) { transition-delay: 60ms; } .fx-section.is-in .fx-row__copy > *:nth-child(3) { transition-delay: 120ms; } .fx-section.is-in .fx-row__copy > *:nth-child(4) { transition-delay: 180ms; } /* ── 06 · PortalPatientsC (5 full-frame portal screens) ────── */ .pc-card { padding: 24px; } .pc-frame { position: relative; flex: 1; min-height: 0; } /* Each screen overlays the frame; only the active one fades in */ .pc-screen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateX(24px); transition: opacity 380ms ease, transform 520ms cubic-bezier(.5, 1.2, .4, 1); pointer-events: none; } .pc-screen.is-visible { opacity: 1; transform: translateX(0); pointer-events: auto; } /* Shared header chrome */ .pc-head { display: flex; align-items: center; gap: 12px; } .pc-avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--pop-mint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pc-head__title { flex: 1; font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; min-width: 0; } .pc-online { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--pop-lime); font-size: 10px; font-weight: 700; color: var(--navy); letter-spacing: 0.06em; text-transform: uppercase; } .pc-online > i { width: 6px; height: 6px; border-radius: 50%; background: var(--pop-lime-d); } .pc-section-lbl { padding: 4px 10px; border-radius: 999px; background: var(--gray); font-size: 10px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } /* ─ Screen 1 · Home dashboard ─ */ .pc-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; } .pc-tile { position: relative; background: #fff; border: 1.5px solid var(--gray-2); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 0 rgba(20, 28, 80, 0.03); transition: transform 220ms ease, border-color 220ms ease, box-shadow 320ms ease; } .pc-tile.is-pressed { border-color: var(--navy); border-width: 2px; transform: scale(0.97); box-shadow: 0 18px 26px -20px rgba(20, 28, 80, 0.32); } .pc-tile__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--tint); display: flex; align-items: center; justify-content: center; } .pc-tile__lbl { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; } .pc-tile.is-pressed::after { content: ""; position: absolute; left: 33px; top: 37px; width: 24px; height: 24px; border-radius: 50%; background: rgba(30, 42, 120, 0.18); transform: translate(-50%, -50%); animation: pc-ripple 600ms ease-out forwards; pointer-events: none; } @keyframes pc-ripple { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.55; } 100% { transform: translate(-50%, -50%) scale(8); opacity: 0; } } /* ─ Screen 2 · Upload ─ */ .pc-upload { background: var(--navy); color: #fff; border-radius: 18px; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .pc-upload__row { display: flex; align-items: center; gap: 12px; } .pc-upload__ico { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pc-upload__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pc-upload__name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-upload__status { font-size: 11px; font-weight: 600; opacity: 0.65; } .pc-upload__check { width: 30px; height: 30px; border-radius: 50%; background: var(--pop-lime-d); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.3); } .pc-upload__check.is-done { opacity: 1; animation: pc-pop 360ms cubic-bezier(.5, 1.7, .4, 1) forwards; } @keyframes pc-pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .pc-upload__track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; } .pc-upload__fill { display: block; height: 100%; width: 0; background: #fff; border-radius: 999px; transition: width 420ms cubic-bezier(.4, .8, .3, 1), background-color 240ms ease; } .pc-upload__fill.is-done { background: var(--pop-lime); } .pc-files { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; } .pc-files li { background: #fff; border: 1.5px solid var(--gray-2); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; color: var(--navy); } .pc-files__ico { width: 28px; height: 28px; border-radius: 8px; background: var(--pop-mint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ─ Screen 3 · Appt ─ */ .pc-appt { display: flex; gap: 12px; flex: 1; min-height: 0; } .pc-appt__date { background: var(--pop-lime); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 130px; } .pc-appt__m { font-size: 10px; font-weight: 700; color: var(--navy); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; } .pc-appt__d { font-size: 58px; font-weight: 700; color: var(--navy); letter-spacing: -0.04em; line-height: 0.95; margin-top: 4px; } .pc-appt__t { font-size: 11px; font-weight: 700; color: var(--navy); margin-top: 6px; letter-spacing: 0.04em; } .pc-appt__col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; } .pc-appt__lbl { font-size: 10px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; } .pc-slot { background: #fff; color: var(--navy); border: 1.5px solid var(--gray-2); border-radius: 12px; padding: 9px 13px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; } .pc-slot.is-selected { background: var(--navy); color: #fff; border-color: var(--navy); } .pc-appt__spacer { flex: 1; } .pc-appt__cta { background: var(--navy); color: #fff; border: 1.5px solid var(--navy); border-radius: 12px; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; position: relative; transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, transform 220ms ease; } .pc-appt__cta.is-pressed { transform: scale(0.97); } .pc-appt__cta.is-confirmed { background: #fff; color: var(--pop-lime-d); border-color: var(--pop-lime-d); } .pc-appt__cta-check { width: 16px; height: 16px; border-radius: 50%; background: var(--pop-lime-d); display: none; align-items: center; justify-content: center; flex-shrink: 0; } .pc-appt__cta.is-confirmed .pc-appt__cta-check { display: flex; } .pc-appt__cta.is-pressed::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%); animation: pc-ripple 500ms ease-out forwards; pointer-events: none; } /* ─ Screen 4 · AI chat ─ */ .pc-wave { display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 64px; padding: 16px 0; width: 100%; } .pc-wave > i { display: block; width: 2px; background: var(--blue-soft); border-radius: 1px; animation: pc-wave 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -28ms); } @keyframes pc-wave { from { height: 12px; } to { height: 36px; } } .pc-chat { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; } .pc-msg, .pc-chips { display: none; } .pc-msg.is-shown, .pc-chips.is-shown { display: inline-flex; animation: pc-fadein 320ms ease both; } @keyframes pc-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .pc-msg--typing { align-self: flex-start; background: var(--gray); border-radius: 14px 14px 14px 4px; padding: 10px 14px; gap: 5px; } .pc-msg--typing > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute); animation: pc-dots 900ms ease-in-out infinite; } .pc-msg--typing > i:nth-child(2) { animation-delay: 120ms; } .pc-msg--typing > i:nth-child(3) { animation-delay: 240ms; } @keyframes pc-dots { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .pc-msg--ai { align-self: flex-start; max-width: 78%; background: var(--gray); color: var(--navy); border-radius: 14px 14px 14px 4px; padding: 9px 13px; font-size: 12px; font-weight: 600; line-height: 1.4; } .pc-msg--ai.pc-msg--confirm { max-width: 82%; display: none; align-items: center; gap: 8px; } .pc-msg--ai.pc-msg--confirm.is-shown { display: inline-flex; } .pc-msg__check { width: 18px; height: 18px; border-radius: 50%; background: var(--pop-lime-d); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pc-chips { align-self: flex-start; gap: 8px; } .pc-chip { background: #fff; border: 1.5px solid var(--gray-2); border-radius: 12px; padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--navy); } .pc-chip--active { background: var(--pop-lime); border-color: var(--pop-lime-d); } .pc-msg--user { align-self: flex-end; background: var(--navy); color: #fff; border-radius: 14px 14px 4px 14px; padding: 9px 13px; font-size: 12px; font-weight: 700; align-items: center; gap: 7px; } /* ─ Screen 5 · Activity recap ─ */ .pc-activity { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; } .pc-act { background: #fff; border: 1.5px solid var(--gray-2); border-radius: 12px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity 380ms ease, transform 480ms cubic-bezier(.5, 1.4, .4, 1); } .pc-screen.is-visible[data-screen="4"] .pc-act { opacity: 1; transform: translateY(0); } .pc-screen.is-visible[data-screen="4"] .pc-act:nth-child(1) { transition-delay: 0ms; } .pc-screen.is-visible[data-screen="4"] .pc-act:nth-child(2) { transition-delay: 100ms; } .pc-screen.is-visible[data-screen="4"] .pc-act:nth-child(3) { transition-delay: 200ms; } .pc-screen.is-visible[data-screen="4"] .pc-act:nth-child(4) { transition-delay: 300ms; } .pc-act__ico { width: 32px; height: 32px; border-radius: 10px; background: var(--tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pc-act__lbl { flex: 1; font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; } .pc-act__check { width: 22px; height: 22px; border-radius: 50%; background: var(--pop-lime-d); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .fx-section .fx-copy > *, .fx-section .fx-illu { opacity: 1; transform: none; transition: none; } .ag-bar__fill, .ag-slot, .ag-toast, .ph-progress__fill, .ph-scroll, .ph-yes, .ph-no, .ph-sig__svg path, .ph-success, .ph-profile, .ph-tile, .pi-card, .pi-phone, .pi-vf, .pi-vf__corner::before, .pi-vf__corner::after, .pi-vf__scanline, .pi-vf__detected, .pi-content, .tg-step__node, .tg-step::after, .tg-shell, .tg-proc__fill, .tg-file, .tg-toast, .tg-med, .pc-screen, .pc-tile, .pc-upload__check, .pc-upload__fill, .pc-appt__cta, .pc-wave > i, .pc-msg, .pc-chips, .pc-msg--typing > i, .pc-act, .cm-cell, .im-bar, .im-line, .im-cursor { transition: none !important; animation: none !important; } } /* ── Cap Feature Modal ──────────────────────────────────────── */ .cap-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; } .cap-modal-overlay.is-open { pointer-events: auto; } .cap-modal__panel { position: absolute; left: 100px; right: 100px; bottom: 0; height: 0; max-height: calc(100vh - 100px); border-radius: 28px 28px 0 0; overflow: hidden; display: flex; flex-direction: column; will-change: height; } .cap-modal__close { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; transition: background .2s ease; } .cap-modal__content { flex: 1; display: flex; flex-direction: column; padding: clamp(44px, 5vw, 68px) clamp(36px, 5vw, 68px); overflow-y: auto; } .cap-modal__title { font-family: 'Anton', var(--font-display, sans-serif); font-size: clamp(38px, 7vw, 80px); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; margin: 0; line-height: 1; } .cap-modal__body { flex: 1; margin-top: 32px; } @media (max-width: 760px) { .cap-modal__panel { left: 16px; right: 16px; max-height: calc(100vh - 60px); border-radius: 20px 20px 0 0; } }