/* ========================================================================== CjenikSync by FF CODE — Landing page styles Production stylesheet built 1:1 from the approved Claude Design. Tokens, type scale, spacing, radii and motion match the design-system board. Breakpoints match the design's JS logic: <700 mobile · 700–1099 tablet · ≥1100 desktop. ========================================================================== */ /* --- Design tokens ------------------------------------------------------- */ :root { --ink: #0A1020; --ink-deep: #070B16; /* urgency bar / code surfaces */ --ink-surface: #111A2E; /* dark cards */ --ink-surface-2: #16203A; /* dark hover / nav active */ --ink-line: #1B2438; /* dark hairlines */ --ink-line-2: #1E2940; /* dark card borders */ --ink-line-3: #2A3550; /* dark button borders */ --ink-line-4: #26314A; /* dark input borders */ --green: #B9F45D; /* signal green — CTA / LIVE */ --green-hover: #CDF98A; --green-bright: #D4FA95; --deep-green: #214D3A; /* status on light */ --green-tint: #EEFBD9; /* light green status bg */ --white: #FFFFFF; --soft: #F6F8FB; /* soft section bg */ --soft-2: #F1F4F8; /* chrome / segmented bg */ --border: #E5E9F0; --border-2: #EEF1F5; /* light hairlines */ --border-3: #D5DAE3; --text: #0A1020; --text-2: #475067; /* secondary body */ --muted: #667085; /* mono labels / muted */ --muted-2: #8792A8; /* muted on dark */ --muted-3: #98A2B3; --dim: #C9D1E0; /* light text on dark */ --dim-2: #B4BDD0; /* subhead on dark */ --amber-bg: #FFF6E0; --amber-text: #7A4A00; --amber-dot: #D08A00; --danger: #D64A2F; --danger-bg: #FFECE8; --danger-text: #9A2A17; --danger-input: #FF8A7A; --err-text: #FFB4A8; --font: 'Geist', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --maxw: 1280px; --gutter: clamp(20px, 5.5vw, 80px); --section-y: clamp(80px, 9vw, 136px); --shadow-card: 0 24px 60px -24px rgba(0,0,0,0.6); --shadow-browser: 0 28px 70px -24px rgba(0,0,0,0.7); --shadow-admin: 0 30px 80px -40px rgba(10,16,32,0.25); } /* --- Reset & base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Prevent horizontal overflow without becoming a scroll container. overflow-x:clip (unlike hidden) does NOT establish a scroll box, so the document keeps scrolling via and window.scrollTo/sticky nav work. */ overflow-x: clip; } img, svg { max-width: 100%; display: block; } a { color: var(--deep-green); text-decoration: none; } a:hover { color: var(--ink); } button { font-family: inherit; } h1, h2, h3, p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } input::placeholder { color: #6B7690; } :focus-visible { outline: 2px solid var(--deep-green); outline-offset: 3px; } [hidden] { display: none !important; } /* Skip link */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--green); color: var(--ink); font-weight: 600; padding: 10px 16px; border-radius: 10px; transition: top .15s; } .skip-link:focus { top: 12px; color: var(--ink); } /* --- Layout primitives --------------------------------------------------- */ /* Sticky-nav offset for anchor navigation (native #hash and scrollIntoView) */ [data-sec] { scroll-margin-top: 80px; } [data-sec="top"] { scroll-margin-top: 0; } .section { padding: var(--section-y) var(--gutter); } .section--light { background: var(--white); } .section--soft { background: var(--soft); } .section--dark { background: var(--ink); color: var(--white); } .container { max-width: var(--maxw); margin: 0 auto; } .container--narrow { max-width: 1080px; } .section__head { max-width: 820px; display: flex; flex-direction: column; gap: 18px; } .section__head--center { margin: 0 auto; text-align: center; align-items: center; } /* --- Typography ---------------------------------------------------------- */ .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--deep-green); } .eyebrow--green { color: var(--green); } h1, h2, h3 { letter-spacing: -0.035em; font-weight: 600; line-height: 1.04; } .h1 { font-size: clamp(46px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; } .h2 { font-size: clamp(34px, 4.3vw, 60px); text-wrap: balance; } .h3 { font-size: 19px; letter-spacing: -0.01em; } .lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--muted); text-wrap: pretty; } .body { font-size: 15px; line-height: 1.5; color: var(--muted); } .mono { font-family: var(--mono); } .tnum { font-variant-numeric: tabular-nums; } /* --- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 12px; font-family: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s, border-color .15s, filter .15s; } .btn:focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--green); outline: none; } .btn--primary { height: 54px; padding: 0 24px; background: var(--green); color: var(--ink); font-size: 16px; } .btn--primary:hover { background: var(--green-hover); color: var(--ink); transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } .btn--ink { height: 56px; background: var(--ink); color: #fff; font-size: 16px; border-radius: 12px; } .btn--ink:hover { background: #1A2440; color: #fff; } .btn--ink:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--deep-green); } .btn--outline { height: 54px; padding: 0 22px; border: 1px solid var(--ink-line-3); color: #fff; font-size: 16px; font-weight: 500; background: transparent; } .btn--outline:hover { background: var(--ink-surface); border-color: #3A4766; color: #fff; } .btn--sm { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; } /* --- Status pills -------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; white-space: nowrap; } .pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; } .pill--ok { background: var(--green-tint); color: var(--deep-green); } .pill--ok .dot { background: var(--deep-green); } .pill--planned { background: #EEF1F6; color: #344054; } .pill--live { background: var(--ink); color: var(--green); } .pill--live .dot { background: var(--green); } /* ========================================================================== 00 · Urgency bar ========================================================================== */ .urgency { background: var(--ink-deep); color: var(--dim); border-bottom: 1px solid var(--ink-line); padding: 10px var(--gutter); font-size: 13px; } .urgency__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; } .urgency__label { display: flex; align-items: center; gap: 10px; } .urgency__label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; } .urgency__link { color: var(--green); font-weight: 500; display: inline-flex; gap: 6px; border-radius: 4px; } .urgency__link:hover { color: var(--green-bright); } /* ========================================================================== 01 · Navbar ========================================================================== */ .nav { position: sticky; top: 0; z-index: 20; background: rgba(10,16,32,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ink-line); padding: 0 var(--gutter); } .nav__inner { max-width: var(--maxw); margin: 0 auto; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; color: #fff; border-radius: 6px; } .brand:hover { color: #fff; } .brand__name { font-size: 18px; letter-spacing: -0.02em; } .brand__name .b1 { font-weight: 500; } .brand__name .b2 { font-weight: 700; } .brand__by { font-family: var(--mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0.04em; padding-top: 2px; } /* CSS-drawn logo mark */ .logo-mark { position: relative; flex: none; } .logo-mark span { position: absolute; border-radius: 2px; } .logo-mark--nav { width: 22px; height: 20px; } .logo-mark--nav .l1 { left: 0; top: 2px; width: 14px; height: 3px; background: #fff; } .logo-mark--nav .l2 { left: 0; top: 8.5px; width: 8px; height: 3px; background: #fff; } .logo-mark--nav .l3 { left: 11px; top: 8.5px; width: 11px; height: 3px; background: var(--green); } .logo-mark--nav .l4 { left: 0; top: 15px; width: 14px; height: 3px; background: #fff; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__link { color: var(--dim); font-size: 14px; padding: 8px 12px; border-radius: 8px; } .nav__link:hover { color: #fff; background: #141D33; } .nav__actions { display: flex; align-items: center; gap: 8px; } .burger { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ink-line-4); background: transparent; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } .burger:hover { background: #141D33; } .burger span { width: 16px; height: 1.5px; background: #fff; border-radius: 1px; transition: transform .2s, opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(2.75px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-2.75px) rotate(-45deg); } .nav__mobile { display: none; flex-direction: column; padding: 8px 0 20px; border-top: 1px solid var(--ink-line); } .nav__mobile a { color: #fff; font-size: 18px; padding: 14px 4px; border-bottom: 1px solid #151E33; } .nav__mobile a:last-child { border-bottom: 0; } .nav__mobile[hidden] { display: none; } .nav.is-open .nav__mobile { display: flex; } /* ========================================================================== 02 · Hero ========================================================================== */ .hero { position: relative; background: var(--ink); color: #fff; padding: clamp(56px, 7vw, 112px) var(--gutter) clamp(72px, 8vw, 128px); overflow: hidden; } .hero__grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%); } .hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(48px, 6vw, 88px); align-items: center; } .hero__copy { display: flex; flex-direction: column; gap: 28px; } .hero__h1 { color: #fff; } .hero__sub { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: var(--dim-2); max-width: 560px; text-wrap: pretty; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; } .hero__micro { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted-2); line-height: 1.5; } .hero__micro > div { display: flex; gap: 10px; align-items: center; } .hero__micro .tick { width: 14px; height: 1px; background: #3A4766; flex: none; } .hero__visual { position: relative; display: flex; flex-direction: column; } /* admin card */ .hero-admin { position: relative; z-index: 1; width: 94%; background: #fff; color: var(--ink); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-card); } .hero-admin__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .hero-admin__title { display: flex; flex-direction: column; gap: 2px; } .hero-admin__title b { font-size: 14px; font-weight: 600; } .hero-admin__title span { font-family: var(--mono); font-size: 11px; color: var(--muted); } .hero-admin__pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--green-tint); color: var(--deep-green); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; transition: background .3s; } .hero-admin__lbl { padding: 16px 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); } .hero-admin__svc { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .hero-admin__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 0 18px; } .hero-admin__field { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; transition: border-color .3s, box-shadow .3s; } .hero-admin__field.is-active { border-color: var(--deep-green); box-shadow: 0 0 0 3px rgba(185,244,93,0.45); } .hero-admin__field.is-muted { background: var(--soft); } .hero-admin__field-lbl { font-size: 11px; color: var(--muted); padding-bottom: 4px; } .hero-admin__price { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .hero-admin__price.is-muted { color: var(--text-2); line-height: 1.2em; } .hero-admin__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; transition: background .3s; } /* number roll */ .roll { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; } .roll__track { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .roll__track span { height: 1.2em; line-height: 1.2em; } .roll.is-rolled .roll__track { transform: translateY(-1.2em); } /* browser preview */ .hero-browser { position: relative; z-index: 2; width: 96%; margin-left: auto; margin-top: -56px; background: #fff; color: var(--ink); border-radius: 16px; overflow: hidden; border: 1px solid var(--ink-line); box-shadow: var(--shadow-browser); } .browser-chrome { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--soft-2); border-bottom: 1px solid var(--border); } .browser-dots { display: flex; gap: 5px; } .browser-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-3); } .browser-url { flex: 1; height: 24px; border-radius: 6px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; padding: 0 10px; font-family: var(--mono); font-size: 11px; color: var(--text-2); } .hero-browser__body { padding: 18px 20px 20px; } .hero-browser__cat { font-size: 12px; color: var(--muted); padding-bottom: 10px; letter-spacing: 0.02em; } .hero-browser__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-2); } .hero-browser__row .n { font-size: 16px; font-weight: 500; } .hero-browser__row .p { font-size: 18px; font-weight: 600; } .hero-browser__anchor { font-size: 12px; color: var(--muted); margin-top: -6px; padding-bottom: 12px; } .hero-browser__row--muted { color: var(--muted-3); } .hero-browser__row--muted .n { font-weight: 400; } .hero-chips { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 16px; width: 96%; margin-left: auto; } .hero-chip { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ink-line-2); background: #0F1729; transition: border-color .3s; } .hero-chip.is-live { border-color: #2E4A24; } .hero-chip__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; } .hero-chip__l { color: var(--muted-2); } .hero-chip__s { display: inline-flex; align-items: center; gap: 5px; color: var(--green); } .hero-chip__s.is-sync { color: var(--muted-2); } .hero-chip__s .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .hero-chip__s.is-sync .dot { background: var(--muted); } .hero-chip__t { font-family: var(--mono); font-size: 11px; color: var(--muted); } .hero-replay { align-self: flex-end; margin-top: 12px; background: none; border: 0; padding: 4px 2px; font-family: var(--mono); font-size: 11px; color: var(--muted); cursor: pointer; border-radius: 4px; } .hero-replay:hover { color: var(--green); } /* ========================================================================== 03 · Problem ========================================================================== */ .grid-3 { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; } .grid-2 { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(40px, 6vw, 96px); } .pad-top-lg { padding-top: clamp(40px, 5vw, 64px); } .prob-card { border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 20px; background: #fff; } .prob-card__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); } .prob-card__price { display: flex; align-items: baseline; gap: 12px; } .prob-card__price .v { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; } .prob-card__price .v.is-old { color: var(--muted-3); } .tag { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; } .tag--dashed { border: 1px dashed #C3CAD6; color: var(--text-2); } .tag--solid { background: var(--soft-2); color: var(--text-2); } .prob-card__txt { display: flex; flex-direction: column; gap: 6px; } .prob-connector { position: relative; height: 72px; } .prob-connector .v1 { position: absolute; top: 0; left: 16.66%; width: 1px; height: 36px; background: #CDD4DF; } .prob-connector .v2 { position: absolute; top: 0; left: 50%; width: 1px; height: 36px; background: #CDD4DF; } .prob-connector .v3 { position: absolute; top: 0; left: 83.33%; width: 1px; height: 36px; background: #CDD4DF; } .prob-connector .hbar { position: absolute; top: 36px; left: 16.66%; right: 16.66%; height: 1px; background: #CDD4DF; } .prob-connector .stem { position: absolute; top: 36px; bottom: 0; left: 50%; width: 1px; background: var(--deep-green); } .prob-merge { display: flex; justify-content: center; } .prob-merge__card { width: min(100%, 440px); background: var(--ink); color: #fff; border-radius: 18px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .prob-merge__l { display: flex; flex-direction: column; gap: 4px; } .prob-merge__l .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted-2); } .prob-merge__l .d { font-size: 15px; color: var(--dim); } .prob-merge__r { display: flex; align-items: center; gap: 12px; } .prob-merge__r .v { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; } .prob-merge__pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(185,244,93,0.14); color: var(--green); font-family: var(--mono); font-size: 11px; } .prob-merge__pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .prob-kicker { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 760px; text-align: center; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; } /* ========================================================================== 04 · Solution / signature ========================================================================== */ .sig { padding-top: clamp(48px, 6vw, 80px); } .sig__hub-wrap { display: flex; justify-content: center; } .sig__hub { width: min(100%, 380px); background: var(--ink); color: #fff; border-radius: 20px; padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--ink); box-shadow: none; transition: border-color .25s, box-shadow .25s; cursor: default; outline: none; } .sig__hub:hover, .sig__hub:focus-visible { border-color: var(--green); box-shadow: 0 0 0 6px rgba(185,244,93,0.18); } .sig__hub-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted-2); } .sig__hub-svc { font-size: 15px; color: var(--dim); } .sig__hub-price { font-size: clamp(48px, 5vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .sig__hub-anchor { font-size: 13px; color: var(--muted-2); } .sig__bus { position: relative; height: 60px; } .sig__bus span { position: absolute; background: #CDD4DF; transition: background .25s; } .sig__bus .b-stem { top: 0; left: 50%; width: 1px; height: 32px; } .sig__bus .b-h { top: 32px; left: 12.5%; right: 12.5%; height: 1px; } .sig__bus .b-d1 { top: 32px; left: 12.5%; width: 1px; height: 28px; } .sig__bus .b-d2 { top: 32px; left: 37.5%; width: 1px; height: 28px; } .sig__bus .b-d3 { top: 32px; left: 62.5%; width: 1px; height: 28px; } .sig__bus .b-d4 { top: 32px; left: 87.5%; width: 1px; height: 28px; } .sig__hub:hover ~ .sig__bus span, .sig__hub:focus-visible ~ .sig__bus span { background: var(--deep-green); animation: csPulse 1.4s ease-in-out infinite; } .sig__outputs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .out-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: border-color .25s; } .sig__hub:hover ~ .sig__outputs .out-card, .sig__hub:focus-visible ~ .sig__outputs .out-card { border-color: var(--deep-green); } .out-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .out-card__l { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; font-weight: 500; } .out-card__live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--deep-green); } .out-card__live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: inset 0 0 0 1.5px var(--deep-green); } .out-card__v { font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; letter-spacing: -0.02em; } .out-card__path { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 11px; color: var(--muted); overflow: hidden; } .out-card__path span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sig__hint { text-align: center; padding-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted-3); } .grid-4 { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(24px, 3vw, 40px); } .sig__benefits { padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--border); margin-top: clamp(48px, 5vw, 72px); } .benefit { display: flex; flex-direction: column; gap: 8px; } .benefit h3 { font-size: 18px; } /* ========================================================================== 05 · How it works ========================================================================== */ .step { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; } .step__visual { background: var(--soft); padding: 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; min-height: 196px; } .step__visual--center { justify-content: center; gap: 10px; } .step__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; } .step__num { font-family: var(--mono); font-size: 13px; color: var(--deep-green); } .step__body h3 { font-size: 21px; } .step__body p { font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; } .step__file-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); padding-bottom: 6px; } .step__file-head .ok { color: var(--deep-green); } .step__row { display: flex; justify-content: space-between; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; } .step__connect { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ink); color: #fff; border-radius: 10px; padding: 12px 14px; font-family: var(--mono); font-size: 13px; } .step__connect .muted { color: var(--muted-2); } .step__connect .conn { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; } .step__connect .conn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .step__tags { display: flex; gap: 6px; flex-wrap: wrap; } .chip-mono { font-family: var(--mono); font-size: 11px; padding: 4px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--border); color: var(--text-2); } .step__checklist { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 12px; } .step__checklist .hd { display: flex; justify-content: space-between; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--border-2); } .step__checklist .hd .muted { color: var(--muted); } .step__checklist .r { display: flex; justify-content: space-between; } .step__checklist .r .muted { color: var(--muted); } .step__checklist .r .ok { color: var(--deep-green); } /* ========================================================================== 06 · Interactive demo ========================================================================== */ .demo__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; padding-top: clamp(40px, 5vw, 64px); align-items: stretch; } .demo-admin { background: #fff; color: var(--ink); border-radius: 20px; padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 20px; } .demo-admin__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .demo-admin__top .ttl { display: flex; flex-direction: column; gap: 2px; } .demo-admin__top .ttl b { font-size: 15px; font-weight: 600; } .demo-admin__top .ttl span { font-family: var(--mono); font-size: 11px; color: var(--muted); } .demo-status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; white-space: nowrap; background: var(--green-tint); color: var(--deep-green); } .demo-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--deep-green); } .demo-field-lbl { display: flex; flex-direction: column; gap: 6px; } .demo-field-lbl .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); } .demo-field-lbl .svc { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; } .demo-type { display: flex; flex-direction: column; gap: 8px; } .demo-type__lbl { font-size: 13px; color: var(--text-2); } .demo-seg { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; padding: 4px; background: var(--soft-2); border-radius: 12px; } .demo-seg__btn { height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); box-shadow: none; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; } .demo-seg__btn:hover { color: var(--ink); } .demo-seg__btn:focus-visible { outline: 2px solid var(--deep-green); outline-offset: 1px; } .demo-seg__btn[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10,16,32,0.12); } .demo-price-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 12px; align-items: end; } .demo-col { display: flex; flex-direction: column; gap: 8px; } .demo-col .lbl { font-size: 13px; color: var(--text-2); } .demo-pub { height: 52px; display: flex; align-items: center; padding: 0 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--border); font-size: 17px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } .demo-input { display: flex; align-items: center; height: 52px; border-radius: 12px; border: 1.5px solid var(--border-3); background: #fff; overflow: hidden; transition: border-color .15s; } .demo-input.is-dirty { border-color: var(--deep-green); } .demo-input.is-invalid { border-color: var(--danger); } .demo-input button { width: 44px; height: 100%; border: 0; background: transparent; font-size: 18px; color: var(--text-2); cursor: pointer; } .demo-input button:hover { background: var(--soft); color: var(--ink); } .demo-input button:focus-visible { outline: 2px solid var(--deep-green); outline-offset: -3px; } .demo-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; text-align: center; font-family: inherit; font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; background: transparent; } .demo-anchor { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 14px; } .demo-anchor .k { color: var(--text-2); } .demo-anchor .v { font-weight: 600; font-variant-numeric: tabular-nums; } .demo-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } .demo-publish { position: relative; overflow: hidden; height: 54px; border: 0; border-radius: 12px; background: var(--border); color: var(--muted-2); font-family: inherit; font-size: 16px; font-weight: 600; cursor: default; transition: background .2s; } .demo-publish.is-ready { background: var(--ink); color: #fff; cursor: pointer; } .demo-publish.is-publishing { background: var(--ink-surface-2); color: #fff; } .demo-publish.is-done { background: var(--deep-green); color: #fff; } .demo-publish:hover:not(:disabled) { filter: brightness(1.08); } .demo-publish:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--deep-green); outline: none; } .demo-publish__prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(185,244,93,0.25); } .demo-publish__txt { position: relative; } .demo-substatus { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); } .demo-reset { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .demo-reset:hover { color: var(--ink); } .demo-out { background: #0F1729; border: 1px solid var(--ink-line-2); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; min-height: 520px; } .demo-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; padding: 8px; border-bottom: 1px solid var(--ink-line-2); } .demo-tab { height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted-2); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .15s, color .15s; } .demo-tab:hover { color: #fff; } .demo-tab:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; } .demo-tab[aria-selected="true"] { background: #1A2440; color: #fff; } .demo-tab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .demo-out.is-publishing .demo-tab .dot { background: var(--muted); animation: csPulse .6s ease-in-out infinite; } .demo-panel { flex: 1; padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; } .demo-panel[hidden] { display: none; } .demo-web { background: #fff; color: var(--ink); border-radius: 14px; overflow: hidden; flex: 1; } .demo-web__body { padding: 20px clamp(16px, 2vw, 28px); } .demo-web__ttl { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; padding-bottom: 4px; } .demo-web__meta { font-size: 12px; color: var(--muted); padding-bottom: 16px; } .demo-web__row { padding: 14px 10px; margin: 0 -10px; border-top: 1px solid var(--border-2); border-radius: 8px; background: transparent; transition: background .6s; } .demo-web__row.is-flash { background: var(--green-tint); } .demo-web__row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .demo-web__row-top .n { font-size: 16px; font-weight: 500; } .demo-web__row-top .p { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .demo-web__row .a { font-size: 12px; color: var(--muted); padding-top: 4px; } .code-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--muted-2); } .code-block { flex: 1; background: var(--ink-deep); border: 1px solid var(--ink-line-2); border-radius: 12px; padding: 14px 0; font-family: var(--mono); font-size: 12px; line-height: 1.9; overflow-x: auto; } .code-block .ln { padding: 0 16px; white-space: pre; background: transparent; transition: background .6s; color: var(--dim); } .code-block .ln.is-flash { background: rgba(185,244,93,0.14); } .code-block .ln.is-dim { color: var(--muted-2); } .code-block .ln.is-white { color: #fff; } .demo-code-wrap { display: flex; flex-direction: column; gap: 12px; flex: 1; } .demo-arch { display: flex; flex-direction: column; gap: 8px; } .demo-arch__head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--muted-2); padding-bottom: 4px; } .arch-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ink-line-2); background: var(--ink-surface); transition: background .6s; } .arch-row.is-flash { background: rgba(185,244,93,0.10); } .arch-row__n { font-family: var(--mono); font-size: 13px; color: #fff; } .arch-row__d { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .arch-row__d .d { font-size: 14px; color: #fff; } .arch-row__d .f { font-family: var(--mono); font-size: 11px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arch-row__tag { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .arch-row__tag.is-current { color: var(--ink); background: var(--green); } .arch-row__tag.is-archived { color: var(--muted-2); background: var(--ink-surface-2); } .demo-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; border-top: 1px solid var(--ink-line-2); font-family: var(--mono); font-size: 11px; color: var(--muted-2); } .demo-checks span { display: inline-flex; align-items: center; gap: 6px; } .demo-checks .mark { color: var(--green); } .demo-out.is-publishing .demo-checks .mark { color: var(--muted-2); } .demo-note { margin: 20px 0 0; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--muted); } /* ========================================================================== 07 · Bento ========================================================================== */ .bento { display: grid; grid-template-columns: minmax(0,1fr); grid-auto-flow: dense; gap: 16px; padding-top: clamp(40px, 5vw, 64px); } .bento-card { background: var(--soft); border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 20px; } .bento-card__txt { display: flex; flex-direction: column; gap: 6px; } .bento-card__txt h3 { font-size: 19px; } .bento-mini { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 13px; } .bento-mini__hd, .bento-mini__row { display: grid; grid-template-columns: minmax(0,1.6fr) 1fr 1fr; gap: 8px; padding: 10px 14px; } .bento-mini__hd { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid var(--border-2); } .bento-mini__row { border-bottom: 1px solid var(--border-2); } .bento-mini__row:last-child { border-bottom: 0; } .bento-mini .ok { color: var(--deep-green); } .bento-mini .plan { color: var(--text-2); } .bento-price { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .bento-price__top { display: flex; justify-content: space-between; align-items: baseline; } .bento-price__top .n { font-size: 15px; font-weight: 500; } .bento-price__top .p { font-size: 17px; font-weight: 600; } .bento-price__anchor { font-size: 12px; color: var(--muted); } .bento-tags { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 4px; } .type-tag { font-family: var(--mono); font-size: 10px; padding: 3px 7px; border-radius: 6px; background: var(--soft-2); color: var(--text-2); } .type-tag.is-on { background: var(--ink); color: #fff; } .bento-files { display: flex; flex-direction: column; gap: 6px; } .bento-file { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-family: var(--mono); font-size: 12px; } .bento-file .muted { color: var(--muted); } .bento-archive { display: flex; flex-direction: column; font-family: var(--mono); font-size: 12px; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .bento-archive > div { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border-2); } .bento-archive > div:last-child { border-bottom: 0; } .bento-archive .muted { color: var(--muted); } .bento-plan { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .bento-cal { width: 48px; flex: none; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); text-align: center; } .bento-cal .m { background: var(--ink); color: #fff; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; padding: 3px 0; } .bento-cal .d { font-size: 20px; font-weight: 600; padding: 4px 0; } .bento-plan__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .bento-plan__txt .t { font-size: 14px; font-weight: 500; } .bento-plan__txt .s { font-family: var(--mono); font-size: 11px; color: var(--text-2); } .bento-loc { display: flex; flex-direction: column; gap: 6px; } .bento-loc__row { display: flex; justify-content: space-between; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; } .bento-loc__row .c { font-family: var(--mono); font-size: 11px; color: var(--muted); } .bento-monitor { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 12px; } .bento-monitor__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .bento-monitor__grid span { text-align: center; padding: 5px 0; border-radius: 6px; background: var(--green-tint); color: var(--deep-green); } .bento-monitor .muted { color: var(--muted); font-size: 11px; } .bento-audit { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .bento-audit .l1 { font-size: 13px; } .bento-audit .l2 { font-family: var(--mono); font-size: 12px; color: var(--text-2); } .bento-audit .l3 { font-family: var(--mono); font-size: 11px; color: var(--muted); } .bento-cms { background: var(--ink); color: #fff; border-radius: 18px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .bento-cms__txt { display: flex; flex-direction: column; gap: 6px; max-width: 520px; } .bento-cms__txt p { font-size: 15px; line-height: 1.5; color: var(--dim-2); } .bento-cms__tags { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 12px; } .bento-cms__tags span { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--ink-line-3); } /* ========================================================================== 08 · On your domain ========================================================================== */ .domain__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .domain__copy { display: flex; flex-direction: column; gap: 20px; } .domain__list { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; } .domain__item { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; } .check-sq { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; } .domain__panel { background: var(--ink); border-radius: 20px; padding: clamp(18px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); } .domain__panel-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.1em; color: var(--muted-2); padding-bottom: 6px; } .domain__url { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: var(--ink-surface); border: 1px solid var(--ink-line-2); font-size: clamp(12px, 1.2vw, 15px); color: #fff; } .domain__url .u { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .domain__url .u .muted { color: var(--muted-2); } .domain__url .code { flex: none; font-size: 11px; color: var(--green); } .domain__ts { font-size: 11px; color: var(--muted); padding-top: 6px; } /* ========================================================================== 09 · Manual vs CjenikSync ========================================================================== */ .cmp-table { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } .cmp-row { display: grid; grid-template-columns: 1fr 1fr; } .cmp-row + .cmp-row { border-top: 1px solid var(--border); } .cmp-row--head { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; } .cmp-row--head .h-manual { padding: 18px 28px; color: var(--muted); background: var(--soft); } .cmp-row--head .h-cs { padding: 18px 28px; background: var(--ink); color: var(--green); } .cmp-cell { padding: 20px 28px; font-size: 17px; } .cmp-cell--manual { color: var(--muted); } .cmp-cell--cs { font-weight: 500; background: #FBFCFE; display: flex; gap: 10px; } .cmp-cell--cs .ok { color: var(--deep-green); } .cmp-cards { display: none; flex-direction: column; gap: 10px; } .cmp-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .cmp-card__manual { padding: 14px 18px; font-size: 15px; color: var(--muted); background: var(--soft); } .cmp-card__cs { padding: 14px 18px; font-size: 16px; font-weight: 500; } .cmp-card .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; display: block; padding-bottom: 4px; } .cmp-card__cs .k { color: var(--deep-green); } /* ========================================================================== 10 · Audience ========================================================================== */ .aud-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-top: clamp(40px, 5vw, 64px); } .aud-grid > div { background: #fff; padding: 22px 20px; font-size: 16px; font-weight: 500; } .aud-note { margin: 28px 0 0; font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 720px; text-wrap: pretty; } /* ========================================================================== 11 · Managed onboarding ========================================================================== */ .onboard__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .onboard__copy { display: flex; flex-direction: column; gap: 22px; } .onboard__copy p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--dim-2); text-wrap: pretty; } .onboard__list { display: grid; grid-template-columns: minmax(0,1fr); gap: 1px; background: var(--ink-line-2); border: 1px solid var(--ink-line-2); border-radius: 18px; overflow: hidden; } .onboard__list li { background: var(--ink-surface); padding: 20px 22px; display: flex; gap: 14px; align-items: center; font-size: 16px; } .onboard__list .n { font-family: var(--mono); font-size: 11px; color: var(--green); } .onboard__opt { margin-left: auto; flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted-2); border: 1px solid var(--ink-line-3); padding: 2px 8px; border-radius: 6px; } /* ========================================================================== 12 · Admin preview ========================================================================== */ .admin-preview { margin-top: clamp(40px, 5vw, 64px); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--soft); display: flex; box-shadow: var(--shadow-admin); } .admin-side { width: 220px; flex: none; background: var(--ink); color: var(--dim); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .admin-side__brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 22px; color: #fff; font-size: 15px; } .admin-side__brand .b1 { font-weight: 500; } .admin-side__brand .b2 { font-weight: 700; margin-left: -8px; } .admin-side__item { padding: 9px 10px; border-radius: 8px; } .admin-side__item.is-active { background: var(--ink-surface-2); color: #fff; } .admin-main { flex: 1; min-width: 0; padding: clamp(16px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 20px; } .admin-main__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; } .admin-main__ttl { display: flex; flex-direction: column; gap: 2px; } .admin-main__ttl b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .admin-main__ttl span { font-family: var(--mono); font-size: 11px; color: var(--muted); } .admin-main__actions { display: flex; gap: 8px; } .admin-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; } .admin-btn--ghost { border: 1px solid var(--border-3); background: #fff; } .admin-btn--ink { background: var(--ink); color: #fff; font-weight: 500; } .admin-status { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; } .admin-status > div { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; } .admin-status .muted { color: var(--muted); } .admin-status .ok { color: var(--deep-green); } .admin-tablewrap { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow-x: auto; } .admin-table { min-width: 560px; } .admin-thead, .admin-trow { display: grid; grid-template-columns: minmax(0,1.8fr) 1fr 1.3fr 1fr; gap: 12px; } .admin-thead { padding: 12px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--border-2); } .admin-trow { padding: 16px 18px; font-size: 15px; align-items: center; border-bottom: 1px solid var(--border-2); } .admin-trow:last-child { border-bottom: 0; } .admin-trow .name { font-weight: 500; } .admin-trow .anchor { color: var(--text-2); } .admin-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; } .admin-pill--ok { background: var(--green-tint); color: var(--deep-green); } .admin-pill--plan { background: #EEF1F6; color: #344054; } /* ========================================================================== 13 · Maintenance modes ========================================================================== */ .mode-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 22px; } .mode-card--default { border: 1.5px solid var(--ink); } .mode-card__visual { display: flex; flex-direction: column; gap: 8px; min-height: 128px; justify-content: center; } .mode-card__txt { display: flex; flex-direction: column; gap: 8px; } .mode-card__txt-head { display: flex; align-items: center; gap: 10px; } .mode-card__txt h3 { font-size: 21px; } .mode-card__txt p { font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; } .badge-default { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 6px; background: var(--ink); color: var(--green); } .bubble-in { align-self: flex-start; max-width: 88%; background: var(--soft-2); border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: 13px; line-height: 1.4; } .bubble-out { align-self: flex-end; background: var(--ink); color: #fff; border-radius: 12px 12px 4px 12px; padding: 10px 12px; font-family: var(--mono); font-size: 12px; display: flex; align-items: center; gap: 6px; } .bubble-out .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .mode-edit-row { display: flex; justify-content: space-between; align-items: center; border: 1.5px solid var(--deep-green); border-radius: 10px; padding: 10px 12px; font-size: 14px; } .mode-edit-row .v { font-weight: 600; font-variant-numeric: tabular-nums; } .mode-edit-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); } .mode-diff { display: flex; flex-direction: column; gap: 6px; min-height: 128px; justify-content: center; font-family: var(--mono); font-size: 12px; } .mode-diff__head { display: flex; justify-content: space-between; color: var(--muted); padding-bottom: 4px; } .mode-diff__add { display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--green-tint); color: var(--deep-green); } .mode-diff__chg { display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--soft-2); color: #344054; } .mode-diff__del { display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; border: 1px dashed #C3CAD6; color: #344054; } .mode-footnote { display: flex; justify-content: center; padding-top: 28px; } .mode-footnote > div { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 14px; color: #344054; text-align: center; } .mode-footnote .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--deep-green); flex: none; } /* ========================================================================== 14 · Pricing ========================================================================== */ .price-card { border: 1px solid var(--border); border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr); } .price-main { padding: clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 22px; } .price-main__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .price-main__head h3 { font-size: 22px; } .price-ff-badge { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 6px; background: var(--green-tint); color: var(--deep-green); } .price-amount { display: flex; flex-direction: column; gap: 6px; } .price-amount__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .price-amount__main { font-size: clamp(64px, 7vw, 96px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; } .price-amount__unit { font-size: 16px; color: var(--text-2); } .price-amount__note { font-size: 16px; color: var(--deep-green); font-weight: 500; } .price-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .price-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; } .price-rows .l { color: var(--text-2); } .price-rows .v { font-weight: 500; text-align: right; } .price-cta { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } .price-cta .btn { width: 100%; } .price-cta p { font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; } .price-incl { background: var(--soft); border-top: 1px solid var(--border); padding: clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 18px; } .price-incl__lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); } .price-incl ul { display: flex; flex-direction: column; gap: 14px; font-size: 16px; } .price-incl li { display: flex; gap: 12px; align-items: center; } .check-mini { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--green); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 11px; } /* ========================================================================== 15 · Trust ========================================================================== */ .trust__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(40px, 6vw, 96px); align-items: end; } .trust__copy { display: flex; flex-direction: column; gap: 20px; } .trust__link { align-self: flex-start; display: inline-flex; gap: 8px; font-size: 16px; font-weight: 500; color: var(--deep-green); border-bottom: 1px solid var(--deep-green); padding-bottom: 2px; } .trust__link:hover { color: var(--ink); border-color: var(--ink); } .trust__stats { display: flex; flex-direction: column; border-top: 1px solid var(--border-3); } .trust__stat { display: grid; grid-template-columns: minmax(0,210px) 1fr; gap: 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--border-3); } .trust__stat .num { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; } .trust__stat .lbl { font-size: 17px; color: #344054; } /* ========================================================================== 16 · FAQ ========================================================================== */ .faq__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .faq__intro { display: flex; flex-direction: column; gap: 18px; } .faq__intro p { font-size: 16px; line-height: 1.5; color: var(--muted); } .faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .faq-item { border-bottom: 1px solid var(--border); } .faq-item h3 { margin: 0; } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; background: none; border: 0; text-align: left; font-family: inherit; font-size: clamp(17px, 1.4vw, 19px); font-weight: 500; color: var(--ink); cursor: pointer; border-radius: 6px; } .faq-q:hover { color: var(--deep-green); } .faq-q > span:first-child { text-wrap: pretty; } .faq-q__icon { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: transform .2s; } .faq-q[aria-expanded="true"] .faq-q__icon { transform: rotate(45deg); } .faq-a { padding: 0 48px 24px 0; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; } .faq-a[hidden] { display: none; } /* ========================================================================== 17 · Final CTA + lead form ========================================================================== */ .final__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .final__copy { display: flex; flex-direction: column; gap: 22px; } .final__copy h2 { font-size: clamp(36px, 4.8vw, 68px); line-height: 1.02; letter-spacing: -0.04em; } .final__copy p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--dim-2); max-width: 520px; text-wrap: pretty; } .lead-box { background: var(--ink-surface); border: 1px solid var(--ink-line-2); border-radius: 22px; padding: clamp(22px, 3vw, 40px); } .lead-form { display: flex; flex-direction: column; gap: 18px; } .lead-field { display: flex; flex-direction: column; gap: 8px; } .lead-field__label { display: flex; justify-content: space-between; font-size: 14px; color: var(--dim); } .lead-field__label .opt { font-family: var(--mono); font-size: 11px; color: var(--muted-2); } .lead-field input { height: 52px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--ink-line-4); background: var(--ink); color: #fff; font-family: inherit; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; } .lead-field input:hover { border-color: #3A4766; } .lead-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(185,244,93,0.18); } .lead-field.is-invalid input { border-color: var(--danger-input); } .lead-field__err { font-size: 13px; color: var(--err-text); } .lead-field__err[hidden] { display: none; } .lead-submit { height: 56px; margin-top: 6px; border: 0; border-radius: 12px; background: var(--green); color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s; } .lead-submit:hover { background: var(--green-hover); transform: translateY(-1px); } .lead-submit:focus-visible { box-shadow: 0 0 0 2px var(--ink-surface), 0 0 0 4px var(--green); outline: none; } .lead-submit:disabled { opacity: .7; cursor: default; transform: none; } .lead-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--dim-2); } .lead-fineprint { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--muted-2); } /* honeypot */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lead-success { display: flex; flex-direction: column; gap: 18px; padding: 8px 0; } .lead-success[hidden] { display: none; } .lead-success__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--green); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px; } .lead-success h3 { font-size: 30px; letter-spacing: -0.02em; } .lead-success p { font-size: 16px; line-height: 1.55; color: var(--dim); } .lead-success__more { border-top: 1px solid var(--ink-line-2); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; } .lead-success__more p { font-size: 15px; line-height: 1.5; color: var(--dim-2); } .lead-success__actions { display: flex; flex-wrap: wrap; gap: 10px; } .lead-success__mail { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--ink-line-3); color: #fff; font-size: 15px; font-weight: 500; } .lead-success__mail:hover { background: var(--ink-surface-2); color: #fff; } .lead-success__reset { height: 46px; padding: 0 14px; border: 0; background: none; color: var(--muted-2); font-family: inherit; font-size: 14px; cursor: pointer; border-radius: 10px; } .lead-success__reset:hover { color: #fff; } /* ========================================================================== 18 · Footer ========================================================================== */ .footer { background: var(--ink); color: var(--muted-2); border-top: 1px solid var(--ink-line); padding: 48px var(--gutter) 32px; } .footer__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 36px; } .footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; } .footer__brand { display: flex; flex-direction: column; gap: 4px; color: #fff; } .footer__brand .name { font-size: 18px; letter-spacing: -0.02em; } .footer__brand .name .b1 { font-weight: 500; } .footer__brand .name .b2 { font-weight: 700; } .footer__brand .by { font-family: var(--mono); font-size: 11px; color: var(--muted-2); } .footer__nav { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; } .footer__nav a { color: var(--dim); } .footer__nav a:hover { color: #fff; } .footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--ink-line); font-size: 12px; line-height: 1.5; } .footer__legal .disc { max-width: 640px; } .footer__legal a { color: var(--muted-2); } .footer__legal a:hover { color: #fff; } /* FF CODE inline link — must match surrounding text: no color / no underline change */ .footer__legal a.ff-plain, .footer__legal a.ff-plain:hover { color: inherit; text-decoration: none; } /* ========================================================================== Sticky mobile CTA ========================================================================== */ .sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none; } .sticky-cta.is-visible { display: block; } .sticky-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; border-radius: 14px; background: var(--green); color: var(--ink); font-size: 16px; font-weight: 600; box-shadow: 0 12px 32px -8px rgba(10,16,32,0.5); } .sticky-cta a:focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--green); outline: none; } /* ========================================================================== Legal pages (privacy / terms / 404) ========================================================================== */ .doc { max-width: 760px; margin: 0 auto; padding: clamp(48px,6vw,96px) var(--gutter); } .doc h1 { font-size: clamp(34px,4vw,52px); margin-bottom: 12px; } .doc .doc__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 40px; } .doc h2 { font-size: 24px; margin: 40px 0 12px; } .doc p, .doc li { font-size: 16px; line-height: 1.65; color: var(--text-2); } .doc ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .doc a { text-decoration: underline; text-underline-offset: 3px; } .doc__back { display: inline-flex; gap: 8px; align-items: center; margin-top: 48px; font-weight: 500; } .doc__note { margin-top: 40px; padding: 16px 20px; border-radius: 12px; background: var(--soft-2); border: 1px solid var(--border); font-size: 14px; color: var(--text-2); } .error-page { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; padding: 80px var(--gutter); } .error-page .code { font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; color: var(--deep-green); } .error-page h1 { font-size: clamp(40px,6vw,72px); } .error-page p { font-size: 18px; color: var(--muted); max-width: 440px; } /* ========================================================================== Scroll reveal (progressive enhancement — visible by default) ========================================================================== */ .reveal { opacity: 1; } .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; } .js .reveal.is-in { opacity: 1; transform: none; } @keyframes csPulse { 0% { opacity: .35 } 50% { opacity: 1 } 100% { opacity: .35 } } /* ========================================================================== Responsive — breakpoints match the design's JS logic Tablet: 700–1099 · Desktop: ≥1100 ========================================================================== */ @media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .bento { grid-template-columns: repeat(2, minmax(0,1fr)); } .aud-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } .onboard__list { grid-template-columns: repeat(2, minmax(0,1fr)); } .price-card { grid-template-columns: repeat(2, minmax(0,1fr)); } .price-incl { border-top: 0; border-left: 1px solid var(--border); } .sig__outputs { grid-template-columns: repeat(4, minmax(0,1fr)); } /* comparison: show table, hide cards */ .cmp-table { display: block; } .cmp-cards { display: none; } .prob-connector { display: block; } .admin-side { display: flex; } } @media (min-width: 1100px) { .hero__inner { grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); } .hero-admin { width: 72%; } .hero-browser { width: 76%; } .hero-chips { width: 76%; } .bento { grid-template-columns: repeat(3, minmax(0,1fr)); } .bento-card--wide { grid-column: span 2; } .aud-grid { grid-template-columns: repeat(7, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .demo__grid { grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); } .domain__grid, .onboard__grid, .trust__grid, .final__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .faq__grid { grid-template-columns: minmax(0,0.8fr) minmax(0,1.4fr); } .faq__intro { position: sticky; top: 100px; } } /* Bento first card spans 2 on tablet too (dense flow) */ @media (min-width: 700px) and (max-width: 1099px) { .bento-card--wide { grid-column: span 2; } } /* Mobile-only layout adjustments (<700) */ @media (max-width: 699px) { .nav__links { display: none; } .burger { display: flex; } .cmp-table { display: none; } .cmp-cards { display: flex; } .prob-connector { height: 36px; } .prob-connector .v1, .prob-connector .v2, .prob-connector .v3, .prob-connector .hbar { display: none; } .prob-connector .stem { top: 0; } .sig__bus { height: 32px; } .sig__bus .b-h, .sig__bus .b-d1, .sig__bus .b-d2, .sig__bus .b-d3, .sig__bus .b-d4 { display: none; } .sig__outputs { grid-template-columns: repeat(2, minmax(0,1fr)); } .admin-side { display: none; } .hero-admin, .hero-browser, .hero-chips { width: 94%; } .aud-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ========================================================================== V3 · Integration — step 02 code chip, one-integration section, floating Cjenik demo, existing-price mapping. (.integration-* / .integration__*) Uses existing tokens; no new framework. ========================================================================== */ /* Syntax-token colors for small code mockups */ .tk-tag { color: #B9F45D; } .tk-attr { color: #8FA6C2; } .tk-str { color: #CDD9EA; } .tk-punct { color: #667085; } /* --- Step 02 (how-it-works) V3 visual --- */ .step__code { background: var(--ink-deep); border: 1px solid var(--ink-line-2); border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--dim); overflow-x: auto; white-space: nowrap; } .step__connect--ok { background: #fff; border: 1px solid var(--border); color: var(--ink); } .step__connect--ok .conn { color: var(--deep-green); } .step__connect--ok .conn .dot { background: var(--deep-green); } .step__pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--green); color: var(--ink); font-family: var(--font); font-size: 12px; font-weight: 600; } /* --- Section grid --- */ .integration__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(24px, 4vw, 48px); align-items: start; } .integration__aside { display: flex; flex-direction: column; gap: 24px; } .integration__benefits { display: flex; flex-direction: column; gap: 14px; } .integration__benefits li { display: flex; gap: 12px; align-items: center; font-size: 16px; line-height: 1.45; } .integration-code { border: 1px solid var(--ink-line-2); border-radius: 14px; overflow: hidden; background: var(--ink); } .integration-code__head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--muted-2); padding: 12px 16px 0; } .integration-code__pre { margin: 0; padding: 10px 16px 16px; overflow-x: auto; } .integration-code__pre code { font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre; } /* --- Fake client browser --- */ .integration-browser { background: #fff; border: 1px solid var(--ink-line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-admin); } .integration-site { position: relative; background: #fff; min-height: 380px; padding: 0; overflow: hidden; } .integration-site__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(16px, 3vw, 28px); border-bottom: 1px solid var(--border-2); } .integration-site__brand { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .integration-site__links { display: flex; gap: 16px; font-size: 13px; color: var(--muted); } .integration-site__hero { padding: clamp(20px, 3.5vw, 36px) clamp(16px, 3vw, 28px) clamp(56px, 8vw, 88px); display: flex; flex-direction: column; gap: 12px; } .integration-site__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--deep-green); } .integration-site__title { font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; max-width: 460px; } .integration-site__text { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 440px; } .integration-site__blocks { display: flex; gap: 10px; padding-top: 8px; } .integration-site__blocks span { flex: 1; height: 48px; border-radius: 10px; background: var(--soft); border: 1px solid var(--border); } /* --- Floating Cjenik button --- */ .integration-float { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--green); color: var(--ink); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 26px -8px rgba(10,16,32,0.45); transition: transform .15s, background .15s; } .integration-float:hover { background: var(--green-hover); transform: translateY(-1px); } .integration-float:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--deep-green); } .integration-float__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--deep-green); } .integration-browser.is-open .integration-float { opacity: 0; pointer-events: none; } .integration-browser__hint { position: absolute; right: 74px; bottom: 26px; z-index: 2; margin: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); background: #fff; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); } .integration-browser.is-open .integration-browser__hint { opacity: 0; } /* --- Hosted price-list drawer (inside the fake browser) --- */ .integration-modal__scrim { position: absolute; inset: 0; z-index: 4; background: rgba(10,16,32,0.35); } .integration-modal { position: absolute; right: 16px; bottom: 16px; z-index: 5; width: min(340px, calc(100% - 32px)); max-height: calc(100% - 32px); display: flex; flex-direction: column; background: var(--ink); color: #fff; border: 1px solid var(--ink-line-2); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6); transform: translateY(8px); opacity: 0; transition: opacity .18s ease, transform .18s ease; } .integration-browser.is-open .integration-modal { transform: translateY(0); opacity: 1; } .integration-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ink-line-2); } .integration-modal__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--green); } .integration-modal__close { width: 30px; height: 30px; flex: none; border: 1px solid var(--ink-line-3); background: transparent; color: #fff; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; } .integration-modal__close:hover { background: var(--ink-surface-2); } .integration-modal__close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .integration-modal__body { padding: 6px 18px; overflow-y: auto; } .integration-modal__row { padding: 14px 0; border-bottom: 1px solid var(--ink-line-2); } .integration-modal__row:last-child { border-bottom: 0; } .integration-modal__row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .integration-modal__row-top .n { font-size: 15px; font-weight: 500; } .integration-modal__row-top .p { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .integration-modal__a { font-size: 12px; color: var(--muted-2); padding-top: 4px; } .integration-modal__foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--ink-line-2); font-family: var(--mono); font-size: 11px; color: var(--muted-2); } .integration-modal__file { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--ink-line-3); } .integration-modal__by { margin-left: auto; color: var(--green); } /* --- Existing-price mapping subsection --- */ .integration-map { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--border); } .integration-map__head { display: flex; flex-direction: column; gap: 16px; max-width: 820px; } .integration-map__title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; } .integration-map__flow { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; align-items: stretch; padding-top: clamp(32px, 4vw, 48px); } .integration-map__arrow { display: none; align-items: center; justify-content: center; color: var(--muted-3); font-size: 22px; } .integration-map__step { display: flex; flex-direction: column; gap: 12px; } .integration-map__num { font-family: var(--mono); font-size: 13px; color: var(--deep-green); } .integration-map__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); } .integration-map__card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .integration-map__path { font-family: var(--mono); font-size: 11px; color: var(--muted); } .integration-map__found, .integration-map__out { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .integration-map__found .n { font-size: 14px; font-weight: 500; } .integration-map__found .p { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .integration-map__mini { font-size: 12px; color: var(--muted); } .integration-map__val { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .integration-map__link { position: relative; font-size: 13px; color: var(--text-2); padding-top: 10px; border-top: 1px solid var(--border-2); } .integration-map__sync { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; padding-bottom: 6px; border-bottom: 1px solid var(--border-2); margin-bottom: 4px; } .integration-map__sync strong { color: var(--deep-green); } .integration-map__out { font-family: var(--mono); font-size: 12px; } .integration-map__out .k { color: var(--muted); } .integration-map__out .v { font-weight: 500; } .integration-map__out .v.ok { color: var(--deep-green); } .integration-map__trust { margin: clamp(24px, 3vw, 36px) 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 640px; } .integration-map__status { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--muted); } .integration-map__status strong { color: var(--deep-green); font-weight: 600; } /* --- Integration responsive --- */ @media (min-width: 1100px) { .integration__grid { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); align-items: center; } .integration-site { min-height: 440px; } .integration-map__flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; } .integration-map__arrow { display: flex; } } @media (min-width: 700px) and (max-width: 1099px) { .integration-map__flow { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 699px) { /* Drawer becomes fullscreen within the fake browser */ .integration-modal { inset: 0; width: 100%; max-height: none; border-radius: 0; border: 0; } .integration-browser__hint { right: 16px; } } /* ========================================================================== Global reduced-motion guard (covers CSS transitions/animations everywhere) ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }