/* InvoiceFlash landing · live surface. Page-specific styles. scrollcraft.css is the mechanism and is not edited; everything here is either a token override or this page's own markup. */ /* The engine's reset themes for a page that owns the whole document. This page lives inside the site's shared header and footer, so give those back what the site had and scope the surface to .ifx. */ :root { --sc-canvas: #ffffff; --sc-ink: #16181d; --sc-accent: #1f6fa8; --sc-accent-ink: #ffffff; } body { background: #ffffff; color: #16181d; font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-size: 1rem; line-height: 1.5; letter-spacing: normal; } .navbar img, #footer img { display: inline-block; } .ifx { --sc-canvas: #edf1f5; --sc-surface: #ffffff; --sc-ink: #121821; --sc-ink-soft: #4a5667; --sc-accent: #1f6fa8; --sc-accent-ink: #ffffff; --sc-font-display: "Geist", system-ui, sans-serif; --sc-font-text: "Geist", system-ui, sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --sc-shadow-color: 212 40% 18%; --ifx-top: 66px; /* site navbar, measured in ifx.js */ --ifx-tabs: 46px; /* this page's own app chrome */ --ifx-brand: #2e8bcc; /* the logo blue, for fills and rules only */ --ifx-line: #d6dde6; --ifx-line-soft: #e6ebf1; --ifx-ok: #1d7a4f; --ifx-bad: #b3261e; --ifx-r: 6px; position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); letter-spacing: var(--sc-track-normal); -webkit-font-smoothing: antialiased; font-synthesis-weight: none; } :where(.ifx) *, :where(.ifx) *::before, :where(.ifx) *::after { box-sizing: border-box; } :where(.ifx) :is(h1, h2, h3, p, ol, ul, dl, dd, figure, pre) { margin: 0; } :where(.ifx) :is(ol, ul) { padding: 0; list-style: none; } :where(.ifx) a { color: inherit; } .ifx .ifx-mono { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } .ifx .ifx-k { display: block; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); } .ifx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d08a12; margin-right: 0.45em; vertical-align: 0.08em; } /* ------------------------------------------------------------ type ------ */ .ifx-h1 { font-size: clamp(2.1rem, 0.8rem + 2.3vw, 3rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; } .ifx-h1 span { display: block; } .ifx-h1 span + span { color: var(--sc-accent); } .ifx-sub { margin-top: var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); max-width: 34ch; text-wrap: pretty; } .ifx-h2 { font-size: clamp(1.55rem, 1.1rem + 1.3vw, 2.35rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; } .ifx-body { color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; } * + .ifx-body { margin-top: var(--sc-4); } /* ------------------------------------------------------------ controls -- */ .ifx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); margin-top: var(--sc-6); } .ifx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--sc-5); background: var(--sc-accent); color: var(--sc-accent-ink) !important; font-weight: 600; font-size: 1rem; white-space: nowrap; border: 0; border-radius: var(--ifx-r); text-decoration: none; box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / 0.18); cursor: pointer; transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); } .ifx-btn:hover { background: #185b8b; } .ifx-btn:active { transform: translateY(1px); } .ifx-btn:focus-visible, .ifx-link:focus-visible, .ifx-tabs a:focus-visible, .ifx-form input:focus-visible, .ifx-alt a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } .ifx-link { font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; color: var(--sc-ink) !important; } .ifx-link:hover { color: var(--sc-accent) !important; } /* ------------------------------------------------------ app chrome nav -- */ .ifx-tabs { position: sticky; top: var(--ifx-top); z-index: 40; height: var(--ifx-tabs); background: #1f6fa8; color: #ffffff; box-shadow: 0 1px 0 rgb(0 0 0 / 0.08), 0 6px 14px -8px hsl(212 50% 20% / 0.35); } .ifx-tabs__in { height: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); display: flex; align-items: stretch; gap: var(--sc-5); } .ifx-tabs__list { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; } .ifx-tabs__list::-webkit-scrollbar { display: none; } .ifx-tabs__list li { display: flex; } .ifx-tabs a { display: flex; align-items: center; padding: 0 var(--sc-4); font-size: 0.94rem; font-weight: 500; white-space: nowrap; text-decoration: none; color: rgb(255 255 255 / 0.86) !important; box-shadow: inset 0 -3px 0 transparent; transition: background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); } .ifx-tabs a:hover { background: rgb(255 255 255 / 0.08); color: #fff !important; } .ifx-tabs a[aria-current="step"] { color: #fff !important; background: rgb(0 0 0 / 0.14); box-shadow: inset 0 -3px 0 #ffffff; } .ifx-tabs__status { display: flex; align-items: center; font-family: var(--sc-font-mono); font-size: 0.74rem; color: rgb(255 255 255 / 0.88); white-space: nowrap; } /* ------------------------------------------------------------ the sheet -- */ .ifx-sheet { --s: 1rem; position: relative; width: 100%; aspect-ratio: 1 / 1.22; background: #ffffff; color: #1b222c; border-radius: 3px; padding: calc(var(--s) * 1.7) calc(var(--s) * 1.6); box-shadow: var(--sc-e3), inset 0 0 0 1px rgb(20 30 45 / 0.06); font-size: calc(var(--s) * 0.78); line-height: 1.4; display: flex; flex-direction: column; overflow: hidden; } .ifx-sheet__sample { position: absolute; top: calc(var(--s) * 0.55); right: calc(var(--s) * 0.7); font-family: var(--sc-font-mono); font-size: calc(var(--s) * 0.56); letter-spacing: 0.06em; text-transform: uppercase; color: #7a4d06; background: #fdf1d8; padding: 0.15em 0.5em; border-radius: 3px; } .ifx-sheet__head { display: flex; justify-content: space-between; gap: var(--s); padding-top: calc(var(--s) * 0.5); } .ifx-sheet__from { display: flex; flex-direction: column; } .ifx-sheet__from strong { font-size: calc(var(--s) * 0.98); font-weight: 600; margin-bottom: 0.2em; } .ifx-sheet__from span, .ifx-sheet__to span:not(.ifx-k) { color: #526072; } .ifx-sheet__doc { text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .ifx-sheet__type { font-size: calc(var(--s) * 1.25); font-weight: 600; letter-spacing: -0.01em; color: var(--ifx-brand); text-transform: uppercase; line-height: 1.1; } .ifx-sheet__num { font-size: calc(var(--s) * 0.86); margin-top: 0.15em; } .ifx-sheet__dates { margin-top: 0.5em; display: grid; gap: 0.1em; } .ifx-sheet__dates div { display: flex; gap: 0.6em; justify-content: flex-end; } .ifx-sheet__dates dt { color: #526072; font-weight: 400; } .ifx-sheet .ifx-due { opacity: 0; } .ifx-sheet.is-invoice .ifx-due { opacity: 1; } .ifx-sheet__to { margin-top: calc(var(--s) * 1.3); padding: calc(var(--s) * 0.7) 0; border-block: 1px solid var(--ifx-line-soft); display: flex; flex-direction: column; } .ifx-sheet__to .ifx-k { font-size: calc(var(--s) * 0.56); margin-bottom: 0.2em; } .ifx-sheet__to strong { font-weight: 600; } .ifx-lines { width: 100%; margin-top: calc(var(--s) * 1.1); border-collapse: collapse; font-size: inherit; } .ifx-lines th { font-weight: 500; color: #526072; text-align: right; padding: 0.35em 0; border-bottom: 1px solid var(--ifx-line); font-size: 0.92em; } .ifx-lines td { text-align: right; padding: 0.55em 0; border-bottom: 1px solid var(--ifx-line-soft); white-space: nowrap; } .ifx-lines th:first-child, .ifx-lines td:first-child { text-align: left; white-space: normal; padding-right: 0.8em; } .ifx-lines th + th, .ifx-lines td + td { padding-left: 0.8em; } .ifx-lines tr { transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out); } .ifx-lines tr.is-off { opacity: 0; transform: translateY(6px); } .ifx-totals { margin-top: auto; margin-left: auto; width: 58%; display: grid; gap: 0.25em; padding-top: calc(var(--s) * 0.8); } .ifx-totals div { display: flex; justify-content: space-between; gap: 1em; } .ifx-totals dt { font-weight: 400; color: #526072; } .ifx-totals__grand { border-top: 1px solid var(--ifx-line); padding-top: 0.35em; margin-top: 0.15em; font-size: 1.15em; font-weight: 600; } .ifx-totals__grand dt { color: #1b222c; font-weight: 600; } .ifx-sheet__foot { margin-top: calc(var(--s) * 1.1); padding-top: calc(var(--s) * 0.6); border-top: 1px dashed var(--ifx-line); font-size: 0.9em; color: #526072; } .ifx-sheet.is-registered .ifx-dot { background: var(--ifx-ok); } .ifx-stamp { position: absolute; left: 50%; top: 58%; translate: -50% -50%; rotate: -9deg; padding: 0.35em 0.9em; border: 2px solid var(--ifx-ok); border-radius: 4px; color: var(--ifx-ok); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: calc(var(--s) * 1.05); background: rgb(255 255 255 / 0.7); opacity: 0; scale: 1.15; transition: opacity 240ms var(--sc-ease-out), scale 240ms var(--sc-ease-out); pointer-events: none; } .ifx-sheet.is-accepted .ifx-stamp { opacity: 0.92; scale: 1; } .ifx-sheet.is-invoice .ifx-stamp { opacity: 0; } /* ------------------------------------------------ 1 · hero: the desk ---- */ .ifx-hero { position: relative; overflow: clip; } .ifx-hero__in { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); min-height: calc(100svh - var(--ifx-top) - var(--ifx-tabs)); display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); align-items: center; gap: var(--sc-7); padding-block: var(--sc-7) var(--sc-8); } .ifx-desk { position: relative; aspect-ratio: 1.08 / 1; } .ifx-plane { position: absolute; } .ifx-plane--far { inset: 0 -6% auto 8%; top: 3%; } .ifx-frame { background: #f7f9fb; border-radius: 10px; overflow: hidden; box-shadow: var(--sc-e2); transform: scale(0.94); transform-origin: 70% 0; opacity: 0.7; } .ifx-frame__bar { display: flex; gap: 5px; padding: 8px 10px; background: #e9edf2; } .ifx-frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: #c7cfd9; } .ifx-frame img { width: 100%; height: auto; max-width: none; } .ifx-plane--mid { left: -2%; top: 46%; width: 50%; } .ifx-list { background: #ffffff; border-radius: 8px; box-shadow: var(--sc-e2); font-size: 0.74rem; overflow: hidden; } .ifx-list__head { padding: 0.55rem 0.8rem; font-weight: 600; font-size: 0.8rem; border-bottom: 1px solid var(--ifx-line-soft); background: #f7f9fb; } .ifx-list table { width: 100%; border-collapse: collapse; } .ifx-list td { padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--ifx-line-soft); white-space: nowrap; } .ifx-list tr:last-child td { border-bottom: 0; } .ifx-list td:last-child { text-align: right; } .ifx-pill { display: inline-block; padding: 0.1em 0.55em; border-radius: 4px; font-size: 0.92em; background: #eef1f5; color: #3f4a59; } .ifx-pill--paid { background: #e3f3ea; color: #145c3a; } .ifx-pill--sent { background: #e4eff8; color: #164f7a; } .ifx-plane--focal { left: 30%; top: 17%; width: 58%; } .ifx-sheet--hero { --s: clamp(0.62rem, 0.35rem + 0.5vw, 0.9rem); rotate: calc(-3deg + (var(--sc-p, 0.5) - 0.5) * 6deg); transform-origin: 50% 80%; } .ifx-plane--near { inset: 0; pointer-events: none; } .ifx-chip { position: absolute; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55rem 0.85rem; border-radius: 8px; background: #ffffff; color: #1b222c; font-size: 0.8rem; font-weight: 500; white-space: nowrap; box-shadow: var(--sc-e3); } .ifx-chip .fa { color: var(--ifx-ok); } .ifx-chip--b .fa { color: var(--sc-accent); } .ifx-chip--a { left: 26%; top: 13%; } .ifx-chip--b { right: -4%; bottom: 4%; } /* ---------------------------------------------------- pinned stages ----- */ .ifx-stage { height: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--ifx-top) + var(--ifx-tabs) + var(--sc-5)) var(--sc-gutter) var(--sc-5); display: grid; align-items: center; } /* 2 · convert */ .ifx-convert .ifx-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sc-8); } .ifx-docwrap { height: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; } .ifx-sheet--main { --s: clamp(0.72rem, 0.2rem + 1.15vh, 1.05rem); width: auto; height: min(100%, 44rem); max-width: 100%; box-shadow: var(--sc-e2), inset 0 0 0 1px rgb(20 30 45 / 0.06); } .ifx-steps { margin-top: var(--sc-6); display: grid; gap: var(--sc-3); counter-reset: s; } .ifx-steps li { display: flex; align-items: center; gap: var(--sc-3); color: var(--sc-ink-soft); transition: color 200ms var(--sc-ease-out); } .ifx-steps__n { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ifx-line); background: #ffffff; font-family: var(--sc-font-mono); font-size: 0.75rem; color: var(--sc-ink-soft); transition: background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out); } .ifx-steps li { counter-increment: s; } .ifx-steps__n::before { content: counter(s); } .ifx-steps li.is-on { color: var(--sc-ink); } .ifx-steps li.is-on .ifx-steps__n { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; } .ifx-steps li.is-on .ifx-steps__n::before { content: "✓"; font-family: var(--sc-font-text); } .ifx-convert-btn { margin-top: var(--sc-6); display: inline-flex; align-items: center; gap: 0.55em; min-height: 42px; padding: 0 var(--sc-4); border: 1px solid var(--ifx-line); border-radius: var(--ifx-r); background: #ffffff; color: var(--sc-ink); font-weight: 500; box-shadow: var(--sc-e1); transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), opacity 200ms; pointer-events: none; } .ifx-convert-btn.is-press { background: var(--sc-accent); color: #fff; border-color: var(--sc-accent); transform: translateY(1px) scale(0.98); } .ifx-convert-btn.is-done { opacity: 0.45; } /* 3 · quiet */ .ifx-quiet { padding-block: clamp(6rem, 22vh, 13rem); } .ifx-quiet__in { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); } .ifx-h2--quiet { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.9rem); } /* 3 · the law + deadline picker */ .ifx-quiet__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8); align-items: end; } .ifx-quiet__in > * { max-width: 40rem; } .ifx-when { margin: 0; padding: 0; border: 0; min-width: 0; } .ifx-when legend { margin-bottom: var(--sc-3); float: none; width: auto; padding: 0; } .ifx-when__opts { display: grid; gap: var(--sc-3); } .ifx-when__opt { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.1rem var(--sc-4); align-items: baseline; padding: var(--sc-4) var(--sc-5); margin: 0; background: #ffffff; border: 1px solid var(--ifx-line); border-radius: 8px; box-shadow: var(--sc-e1); cursor: pointer; transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); } .ifx-when__opt:hover { border-color: #9fb3c8; } .ifx-when__opt:active { transform: scale(0.99); } .ifx-when__opt input { position: absolute; opacity: 0; pointer-events: none; } .ifx-when__opt:has(input:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 3px; } .ifx-when__opt:has(input:checked) { border-color: var(--sc-accent); box-shadow: 0 0 0 1px var(--sc-accent), var(--sc-e2); } .ifx-when__who { font-weight: 600; } .ifx-when__sub { grid-column: 1; font-size: 0.86rem; color: var(--sc-ink-soft); } .ifx-when__date { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; white-space: nowrap; } .ifx-when__opt:has(input:checked) .ifx-when__date { color: var(--sc-accent); } .ifx-when__out { margin-top: var(--sc-4); min-height: 1.6em; font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.01em; } .ifx-when__src { margin-top: var(--sc-2); font-size: 0.8rem; color: var(--sc-ink-soft); } /* 4 · seal: the three obligations happen to the invoice */ .ifx-seal { background: #e6ebf1; } .ifx-stage--seal { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sc-8); } .ifx-seal__doc { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; } .ifx-sheet--seal { --s: clamp(0.7rem, 0.2rem + 1.1vh, 1rem); width: auto; height: min(100%, 44rem); max-width: 100%; box-shadow: var(--sc-e2), inset 0 0 0 1px rgb(20 30 45 / 0.06); } .ifx-sheet--seal .ifx-lines, .ifx-sheet--seal .ifx-totals { transition: filter 240ms var(--sc-ease-out); } .ifx-seal.is-s1 .ifx-sheet--seal .ifx-lines, .ifx-seal.is-s1 .ifx-sheet--seal .ifx-totals { filter: saturate(0.4); } .ifx-lock { position: absolute; z-index: 3; top: 36%; left: -2%; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5rem 0.8rem; border-radius: 8px; background: #121821; color: #ffffff; font-size: 0.82rem; font-weight: 500; box-shadow: var(--sc-e3); opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out); } .ifx-seal.is-s1 .ifx-lock { opacity: 1; transform: none; } .ifx-rect { position: absolute; z-index: 3; right: -4%; top: 52%; display: grid; gap: 0.1rem; min-width: 14rem; padding: 0.9rem 1.1rem; background: #ffffff; border-radius: 8px; box-shadow: var(--sc-e3); border-left: 1px solid var(--ifx-line-soft); font-size: 0.85rem; opacity: 0; transform: translate(12px, 12px) rotate(2deg); transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out); } .ifx-rect__type { font-weight: 600; color: var(--ifx-brand); text-transform: uppercase; letter-spacing: 0.02em; } .ifx-rect__of { color: var(--sc-ink-soft); } .ifx-rect strong { margin-top: 0.3rem; font-size: 1.05rem; color: var(--ifx-bad); } .ifx-seal.is-s2 .ifx-rect { opacity: 1; transform: rotate(2deg); } .ifx-sheet--seal .ifx-sheet__sample { right: auto; left: calc(var(--s) * 1.6); } .ifx-sheet--seal .ifx-sheet__doc { margin-right: calc(var(--s) * 6.2); } .ifx-vf { position: absolute; top: calc(var(--s) * 1.5); right: calc(var(--s) * 1.4); width: calc(var(--s) * 5.2); display: flex; flex-direction: column; align-items: center; gap: calc(var(--s) * 0.3); opacity: 0.2; transition: opacity 260ms var(--sc-ease-out); } .ifx-vf__qr { width: 100%; color: #121821; } .ifx-vf__qr svg { width: 100%; height: auto; display: block; } .ifx-vf__k { font-family: var(--sc-font-mono); font-size: calc(var(--s) * 0.5); line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: #526072; } .ifx-vf__h { margin-top: calc(var(--s) * 0.8) !important; text-align: right; font-size: calc(var(--s) * 0.62); color: #3a4655; opacity: 0.2; transition: opacity 260ms var(--sc-ease-out); } .ifx-seal.is-s3 .ifx-vf, .ifx-seal.is-s3 .ifx-vf__h { opacity: 1; } .ifx-sheet--seal .ifx-reg { opacity: 0.6; } .ifx-seal.is-s3 .ifx-sheet--seal .ifx-reg { opacity: 1; } .ifx-oblig { margin-top: var(--sc-6); display: grid; gap: var(--sc-3); } .ifx-oblig li { padding: var(--sc-4) var(--sc-5); border-radius: 8px; background: rgb(255 255 255 / 0.5); color: var(--sc-ink-soft); transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out); } .ifx-oblig h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.6em; } .ifx-oblig h3 .fa { width: 1.1em; text-align: center; color: #8a98a8; transition: color 240ms var(--sc-ease-out); } .ifx-oblig p { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.5; } .ifx-oblig li.is-on { background: #ffffff; color: var(--sc-ink); box-shadow: var(--sc-e2); } .ifx-oblig li.is-on h3 .fa { color: var(--sc-accent); } /* 6 · optional modules */ .ifx-addons { grid-column: 1 / -1; padding-top: var(--sc-6); border-top: 1px solid var(--ifx-line-soft); } .ifx-addons ul { margin-top: var(--sc-4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5) var(--sc-6); } .ifx-addons li { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.7rem; align-items: baseline; } .ifx-addons .fa { grid-row: span 2; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 6px; background: #e4eff8; color: var(--sc-accent); font-size: 0.95rem; align-self: start; } .ifx-addons strong { font-weight: 600; } .ifx-addons span { font-size: 0.88rem; line-height: 1.45; color: var(--sc-ink-soft); } /* 5 · send (rail) */ .ifx-send .ifx-stage, .ifx-send [data-sc-stage] { display: flex; align-items: center; } .ifx-rail { align-items: stretch; gap: var(--sc-6); padding: calc(var(--ifx-top) + var(--ifx-tabs) + var(--sc-6)) var(--sc-gutter) var(--sc-6); height: 100%; } .ifx-rail > * { flex: none; } .ifx-rail__lead { width: min(26rem, 80vw); align-self: center; } .ifx-out { width: min(24rem, 82vw); align-self: center; background: #ffffff; border-radius: 10px; box-shadow: var(--sc-e2); padding: var(--sc-5); display: flex; flex-direction: column; gap: 0.35rem; max-height: 100%; } .ifx-out h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--sc-3); } .ifx-out__pdf { display: flex; justify-content: center; background: #eef2f6; border-radius: 6px; padding: var(--sc-4); } .ifx-sheet--mini { --s: 0.56rem; width: 82%; box-shadow: var(--sc-e2); } .ifx-xml { font-size: 0.7rem; line-height: 1.55; white-space: pre; overflow: hidden; background: #0f1722; color: #d8e2ee; border-radius: 6px; padding: var(--sc-4); } .ifx-xml .t { color: #8cc4f0; } .ifx-xml .v { color: #f3d58a; } .ifx-out__note { font-size: 0.78rem; color: var(--sc-ink-soft); margin-top: 0.3rem; } .ifx-mail { border: 1px solid var(--ifx-line-soft); border-radius: 6px; font-size: 0.85rem; } .ifx-mail p { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--ifx-line-soft); } .ifx-mail p:last-child { border-bottom: 0; } .ifx-mail p > span:first-child { display: inline-block; min-width: 4.8em; color: var(--sc-ink-soft); } .ifx-mail__body { color: #2b3645; line-height: 1.55; padding-block: 0.9rem !important; } .ifx-file { display: inline-block; font-family: var(--sc-font-mono); font-size: 0.78rem; background: #eef2f6; border-radius: 4px; padding: 0.1em 0.5em; } .ifx-events { display: grid; gap: 0; border-left: 2px solid var(--ifx-line); margin-left: 0.4rem; } .ifx-events li { position: relative; padding: 0 0 1rem 1.1rem; font-size: 0.9rem; } .ifx-events li::before { content: ""; position: absolute; left: -7px; top: 0.35em; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ifx-line); } .ifx-events li.is-last { padding-bottom: 0; } .ifx-events li.is-last::before { background: var(--ifx-ok); border-color: var(--ifx-ok); } .ifx-events li > .ifx-mono:first-child { display: block; font-size: 0.78rem; color: var(--sc-ink-soft); } .ifx-rail__note { width: min(20rem, 70vw); align-self: center; font-size: var(--sc-t-lg); line-height: 1.4; color: var(--sc-ink); padding-right: var(--sc-gutter); } @media (prefers-reduced-motion: no-preference) { .ifx-out { opacity: calc(0.55 + 0.45 * clamp(0, (var(--sc-p, 0) * 5 - var(--i) + 1.4), 1)); transform: translateY(calc((1 - clamp(0, (var(--sc-p, 0) * 5 - var(--i) + 1.4), 1)) * 18px)); } .ifx-out:first-of-type { opacity: 1; transform: none; } } /* 6 · suite */ .ifx-suite { background: #ffffff; padding-block: var(--sc-section); } .ifx-suite__in { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sc-8); align-items: center; } .ifx-mods { margin-top: var(--sc-6); font-size: var(--sc-t-lg); line-height: 1.6; color: var(--sc-ink); max-width: 36ch; } .ifx-mods span { color: #9aa6b5; } .ifx-facts { margin-top: var(--sc-6); display: grid; gap: var(--sc-2); } .ifx-facts li { padding-left: 1.3rem; position: relative; color: var(--sc-ink-soft); } .ifx-facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 2px; background: var(--ifx-brand); } .ifx-suite__media { position: relative; padding-bottom: 12%; } .ifx-shot { border-radius: 8px; overflow: hidden; box-shadow: var(--sc-e3); background: #fff; } .ifx-shot img { width: 100%; height: auto; max-width: none; } .ifx-shot--menu { position: absolute; right: -2%; bottom: 0; width: 46%; border: 1px solid var(--ifx-line-soft); } /* FAQ */ .ifx-faq { background: #ffffff; padding-block: 0 var(--sc-section); scroll-margin-top: calc(var(--ifx-top) + var(--ifx-tabs)); } .ifx-faq__in { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sc-8); align-items: start; padding-top: var(--sc-8); border-top: 1px solid var(--ifx-line-soft); } .ifx-faq__list { border-top: 1px solid var(--ifx-line); } .ifx-faq__item { border-bottom: 1px solid var(--ifx-line); } .ifx-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); padding: var(--sc-4) 0; } .ifx-faq__item summary::-webkit-details-marker { display: none; } .ifx-faq__item summary::after { content: "+"; flex: none; font-size: 1.3rem; line-height: 1; color: var(--sc-accent); transition: transform 160ms var(--sc-ease-out); } .ifx-faq__item[open] summary::after { transform: rotate(45deg); } .ifx-faq__item summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } .ifx-faq__item h3 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } .ifx-faq__item p { padding: 0 0 var(--sc-5); max-width: 62ch; color: var(--sc-ink-soft); } @media (max-width: 900px) { .ifx-faq__in { grid-template-columns: 1fr; gap: var(--sc-5); } } /* 7 · start */ .ifx-start { background: #edf1f5; } .ifx-stage--start { justify-items: start; } .ifx-first { width: min(40rem, 100%); background: #ffffff; border-radius: 12px; box-shadow: var(--sc-e3); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); } .ifx-first__num { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-4); padding-bottom: var(--sc-4); margin-bottom: var(--sc-5); border-bottom: 1px dashed var(--ifx-line); } .ifx-first__num .ifx-mono { font-size: 1.05rem; font-weight: 500; color: var(--sc-accent); } .ifx-form { margin-top: var(--sc-6); } .ifx-form label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: var(--sc-2); } .ifx-form__row { display: flex; gap: var(--sc-3); flex-wrap: wrap; } .ifx-form input { flex: 1 1 16rem; min-width: 0; min-height: 48px; padding: 0 var(--sc-4); border: 1px solid #b8c3d0; border-radius: var(--ifx-r); background: #fff; font: inherit; color: var(--sc-ink); transition: border-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out); } .ifx-form input::placeholder { color: #7c8898; } .ifx-form input:focus { border-color: var(--sc-accent); box-shadow: 0 0 0 3px rgb(31 111 168 / 0.18); outline: none; } .ifx-alt { margin-top: var(--sc-5); font-size: 0.92rem; color: var(--sc-ink-soft); } .ifx-alt a { color: var(--sc-ink) !important; font-weight: 500; text-underline-offset: 0.22em; } /* ------------------------------------------------------------ mobile ---- */ @media (max-width: 900px) { .ifx { --ifx-tabs: 42px; } .ifx-tabs__status { display: none; } .ifx-tabs a { padding: 0 var(--sc-3); font-size: 0.86rem; } .ifx-hero__in { grid-template-columns: 1fr; gap: var(--sc-6); padding-block: var(--sc-6) var(--sc-7); min-height: 0; } .ifx-sub { max-width: 30ch; } .ifx-desk { aspect-ratio: 1 / 0.92; margin-inline: -2%; } .ifx-plane--far { left: 14%; right: -14%; } .ifx-plane--mid { left: -3%; top: 52%; width: 56%; } .ifx-plane--focal { left: 42%; top: 16%; width: 54%; } .ifx-sheet--hero { --s: clamp(0.44rem, 0.25rem + 0.9vw, 0.7rem); } .ifx-list { font-size: 0.62rem; } .ifx-chip { font-size: 0.7rem; padding: 0.45rem 0.65rem; } .ifx-chip--a { left: 4%; top: 6%; } .ifx-chip--b { right: 0; bottom: 0; } .ifx-stage { padding-top: calc(var(--ifx-top) + var(--ifx-tabs) + var(--sc-4)); padding-bottom: var(--sc-4); align-content: center; } .ifx-convert .ifx-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: var(--sc-4); align-items: start; } .ifx-convert .ifx-steps { margin-top: var(--sc-3); gap: var(--sc-2); font-size: 0.86rem; } .ifx-steps__n { width: 1.35rem; height: 1.35rem; font-size: 0.65rem; } .ifx-convert-btn { display: none; } .ifx-sheet--main { --s: clamp(0.5rem, 0.1rem + 1.2vh, 0.78rem); height: auto; width: min(100%, calc((100svh - var(--ifx-top) - var(--ifx-tabs) - 16rem) / 1.3)); } .ifx-quiet__in { grid-template-columns: 1fr; gap: var(--sc-6); } .ifx-when__opt { padding: var(--sc-3) var(--sc-4); } .ifx-when__date { font-size: 0.92rem; } .ifx-stage--seal { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--sc-3); align-items: stretch; } .ifx-seal__copy { display: contents; } .ifx-seal__copy .ifx-h2 { order: -1; font-size: 1.35rem; } .ifx-seal__doc { order: 0; } .ifx-seal__doc { align-items: start; } .ifx-sheet--seal { --s: clamp(0.42rem, 0.05rem + 0.9vh, 0.66rem); height: auto; width: min(100%, calc((100svh - var(--ifx-top) - var(--ifx-tabs) - 12rem) / 1.22)); } .ifx-stage--seal > * { min-width: 0; } .ifx-oblig { order: 1; margin-top: 0; gap: var(--sc-2); } .ifx-oblig li { display: none; padding: var(--sc-3) var(--sc-4); } .ifx-oblig li.is-cur { display: block; } .ifx-lock { font-size: 0.72rem; top: 34%; left: 0; } .ifx-rect { min-width: 0; right: 0; top: 50%; bottom: auto; font-size: 0.72rem; padding: 0.6rem 0.8rem; } .ifx-addons ul { grid-template-columns: 1fr; gap: var(--sc-4); } .ifx-rail { gap: var(--sc-4); padding-top: calc(var(--ifx-top) + var(--ifx-tabs) + var(--sc-4)); } .ifx-out { padding: var(--sc-4); } .ifx-suite__in { grid-template-columns: 1fr; gap: var(--sc-7); } .ifx-shot--menu { width: 58%; } .ifx-first { padding: var(--sc-5); } .ifx-form .ifx-btn { flex: 1 1 100%; } } @media (max-width: 900px) and (max-height: 720px) { .ifx-sheet--seal { width: min(100%, calc((100svh - var(--ifx-top) - var(--ifx-tabs) - 15rem) / 1.22)); } .ifx-oblig p { font-size: 0.86rem; } } @media (prefers-reduced-motion: reduce) { .ifx-lines tr.is-off { transform: none; } .ifx-sheet--hero { rotate: -1.5deg; } }