/* ========================================================================== Homepage feature grid. Eight cards in two labelled layers: row 1 operational workspace — the tools teams work in row 2 intelligence layer — what sits across those tools The two layers are separated by weight, not by decoration: the intelligence row sits on a faintly cooler surface with a hairline at the top edge. It is the same product, one level up — never a second product. The last card, Ask smartNsales, is the one deliberate inversion. It reads as the layer spanning everything rather than an eighth peer. Palette and radii follow assets/tokens.css. ========================================================================== */ .features-grid-section { position: relative; background: #F7F9FB; padding: 76px 2rem 84px; } .features-grid-header { text-align: center; max-width: 660px; margin: 0 auto 40px; } /* ------------------------------------------------------------ the layers -- */ .fx-layer { max-width: 1400px; margin: 0 auto; } /* The label is the whole hierarchy cue, so it is quiet but always present. */ .fx-layer-label { display: flex; align-items: center; gap: 12px; font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0.13em; text-transform: uppercase; color: #98A2B3; margin-bottom: 16px; } .fx-layer-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(16,24,40,0.10), transparent); } /* The second layer is set apart by ground and a hairline, nothing louder. */ .fx-layer--intelligence { margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(16,24,40,0.08); } .fx-layer--intelligence .fx-layer-label { color: #7C91AC; } .fx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* ---------------------------------------------------------------- cards --- */ .fx-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid rgba(16,24,40,0.09); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,0.04); transition: box-shadow .22s ease, transform .22s ease, opacity .5s ease, translate .5s ease; } .fx-card:hover { box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 18px 40px -22px rgba(16,24,40,0.38); transform: translateY(-3px); } /* The reveal is scoped under .js-anim, the class the page sets on only when scripts run — same convention as .rv elsewhere. Without JS the cards are simply visible, rather than stranded at opacity 0 waiting for an observer that will never fire. */ .js-anim .fx-card { opacity: 0; translate: 0 20px; } .js-anim .fx-card.is-in { opacity: 1; translate: 0 0; } /* The intelligence cards carry a cooler ground and a fine top edge. */ .fx-card--intelligence { background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%); border-color: rgba(16,24,40,0.10); } .fx-card--intelligence .fx-visual { background: linear-gradient(160deg, #F7F9FB 0%, #E9EFF6 100%); } .fx-card--intelligence .fx-visual::before { /* A single hairline of accent along the top: the signal running through the layer. Two pixels of colour, not a glow. */ content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(to right, transparent, #3B82F6 38%, #7C91AC 72%, transparent); opacity: .55; } .fx-visual { position: relative; height: 158px; padding: 14px 14px 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: linear-gradient(160deg, #FFFFFF 0%, #EDF1F7 100%); border-bottom: 1px solid rgba(16,24,40,0.07); } .fx-content { padding: 16px 18px 20px; } .fx-title { font: 700 15.5px/1.25 Inter, system-ui, sans-serif; color: #101828; letter-spacing: -0.015em; margin-bottom: 7px; } .fx-desc { font: 400 13px/1.55 Inter, system-ui, sans-serif; color: #667085; } /* ------------------------------------------------- the Ask smartNsales card */ /* The one inversion in the grid. Dark ink with the intelligence-grid motif, so it reads as the layer sitting across the platform rather than a peer feature. Everything else about it — radius, padding, type scale — is identical to its neighbours, which is what keeps it from being a gimmick. */ .fx-card--ai { background: radial-gradient(120% 90% at 18% 8%, #1D2939 0%, transparent 62%), linear-gradient(165deg, #101828 0%, #172033 100%); border-color: rgba(255,255,255,0.10); } .fx-card--ai .fx-visual { background: /* intelligence grid, from the brand sheet */ linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 34px 34px, transparent; border-bottom-color: rgba(255,255,255,0.09); align-items: center; padding: 14px; } .fx-card--ai .fx-visual::before { background: linear-gradient(to right, transparent, #3B82F6 44%, transparent); opacity: .7; } .fx-card--ai .fx-title { color: #FFFFFF; } .fx-card--ai .fx-desc { color: #98A2B3; } .fx-card--ai:hover { box-shadow: 0 1px 2px rgba(16,24,40,0.10), 0 22px 46px -22px rgba(16,24,40,0.62); } /* ========================================================================== The UI previews. Drawn at roughly a third of product scale. Type here is intentionally tiny — it reads as an interface, not as copy, and never carries meaning the card's title and description do not already state. ========================================================================== */ .fx-win { width: 100%; /* The windows are bottom-anchored, so while their heights differed their top edges landed in four different places and the row read as ragged. Accounts was the worst of it: 185px of window in 144px of space, clipped at the top, so the card lost the very header that names it. One height instead. Every window now starts on the same line and ends on the visual's bottom edge, and anything longer than the space clips at the bottom, where a cut-off row reads as "there is more" rather than as a missing title. 100% of the flex container's content box rather than a pixel value: .fx-visual is 158px here, 168px under 1080 and 176px under 760, so any fixed height would have fitted exactly one of the three. */ height: 100%; background: #FFFFFF; border: 1px solid rgba(16,24,40,0.09); border-radius: 8px 8px 0 0; border-bottom: 0; box-shadow: 0 -1px 2px rgba(16,24,40,0.03), 0 10px 24px -16px rgba(16,24,40,0.34); overflow: hidden; } .fx-win-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #EEF1F5; background: linear-gradient(180deg, #FFFFFF, #FAFBFC); } .fx-win-title { font: 600 7px/1 Inter, sans-serif; color: #344054; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-win-body { padding: 7px 8px 9px; display: flex; flex-direction: column; gap: 6px; } /* figure tiles */ .fx-kpis { display: flex; gap: 4px; } .fx-kpi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 5px 5px; border: 1px solid #EEF1F5; border-radius: 5px; background: #FFFFFF; } .fx-kpi-l { font: 500 6.5px/1 Inter, sans-serif; color: #98A2B3; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-kpi-v { font: 700 9px/1 Inter, sans-serif; color: #101828; letter-spacing: -0.02em; } .fx-kpi-bar { display: block; height: 2px; border-radius: 1px; background: #EEF1F5; overflow: hidden; } .fx-kpi-bar i { display: block; height: 100%; border-radius: 1px; } /* labelled progress rows */ .fx-bars { display: flex; flex-direction: column; gap: 4px; } .fx-row { display: flex; align-items: center; gap: 5px; } .fx-row-l { width: 30px; flex: none; font: 500 7px/1 Inter, sans-serif; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-track { flex: 1; height: 4px; border-radius: 2px; background: #EEF1F5; overflow: hidden; } .fx-track i { display: block; height: 100%; border-radius: 2px; } /* list rows */ .fx-list { display: flex; flex-direction: column; gap: 3px; } .fx-lrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3.5px 5px; border: 1px solid #F1F4F8; border-radius: 4px; } .fx-lrow-n { font: 600 7.5px/1 Inter, sans-serif; color: #344054; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-v { font: 700 8px/1 Inter, sans-serif; color: #101828; font-variant-numeric: tabular-nums; } .fx-pill { flex: none; padding: 2px 4px; border: 1px solid; border-radius: 999px; font: 600 6.5px/1 Inter, sans-serif; letter-spacing: 0.03em; white-space: nowrap; } /* skeleton text */ .fx-lines { display: flex; flex-direction: column; gap: 2.5px; flex: 1; min-width: 0; } .fx-lines i { display: block; height: 2.5px; border-radius: 1.5px; background: #EEF1F5; } /* planner */ .fx-weeks { display: flex; justify-content: space-between; padding-left: 30px; font: 500 6.5px/1 Inter, sans-serif; color: #98A2B3; } .fx-lane { display: flex; align-items: center; gap: 5px; } .fx-lane-n { width: 25px; flex: none; font: 500 7px/1 Inter, sans-serif; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-lane-t { position: relative; flex: 1; height: 6px; border-radius: 3px; background: #F4F6F8; } .fx-lane-t i { position: absolute; top: 0; height: 100%; border-radius: 3px; } /* columns */ .fx-cols { display: flex; align-items: flex-end; gap: 5px; height: 34px; } .fx-col { flex: 1; display: flex; align-items: flex-end; gap: 1.5px; height: 100%; } .fx-col i { flex: 1; border-radius: 1.5px 1.5px 0 0; } .fx-legend { display: flex; gap: 8px; font: 500 6.5px/1 Inter, sans-serif; color: #98A2B3; } .fx-legend span { display: inline-flex; align-items: center; gap: 3px; } .fx-legend i { width: 5px; height: 5px; border-radius: 1.5px; } /* sparkline */ .fx-spark { width: 100%; height: 30px; display: block; } /* report */ .fx-doc { display: flex; flex-direction: column; gap: 4px; } .fx-doc-h { height: 5px; width: 46%; border-radius: 2px; background: #D9E0E8; } .fx-doc-kpis { display: flex; gap: 4px; margin: 2px 0; } .fx-doc-kpis span { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 3px 4px; border: 1px solid #EEF1F5; border-radius: 4px; } .fx-doc-kpis b { font: 700 7px/1 Inter, sans-serif; color: #101828; } .fx-doc-kpis i { font: 500 6.5px/1 Inter, sans-serif; color: #98A2B3; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-foot { font: 500 6.5px/1 Inter, sans-serif; color: #98A2B3; padding-top: 4px; border-top: 1px solid #F1F4F8; } /* tasks */ .fx-avs { display: inline-flex; } .fx-av { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #FFFFFF; background: #CBD5E1; margin-left: -3px; } .fx-av[style*="--i:0"] { background: #7C91AC; margin-left: 0; } .fx-av[style*="--i:1"] { background: #98A2B3; } .fx-tasks { display: flex; flex-direction: column; gap: 4px; } .fx-task { display: flex; align-items: center; gap: 5px; } .fx-check { width: 7px; height: 7px; flex: none; border: 1px solid #CBD5E1; border-radius: 2px; } .fx-check.is-on { background: #047857; border-color: #047857; } .fx-next { display: flex; align-items: center; gap: 5px; padding: 4px 5px; border-radius: 4px; background: #F4F8FE; border: 1px solid rgba(37,99,235,0.14); } .fx-next-mark { width: 5px; height: 5px; border-radius: 50%; background: #2563EB; flex: none; } .fx-next-t { font: 600 7px/1 Inter, sans-serif; color: #1D4ED8; } /* ask smartNsales — drawn for the dark card */ .fx-ask { width: 100%; display: flex; flex-direction: column; gap: 6px; } /* The Agent surfacing something on its own. Restrained: a status dot rather than a badge, and the figures sit to the right of the account rather than in tiles, so three rows fit where two KPIs used to. */ .fx-ag-head { display: flex; align-items: center; gap: 5px; } .fx-ag-dot { width: 4px; height: 4px; border-radius: 50%; flex: none; background: #34D399; } .fx-ag-alert { font: 600 8px/1.3 Inter, sans-serif; color: #FFFFFF; letter-spacing: -0.01em; } .fx-ag-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .fx-ag-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 4px 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); border-left: 1.5px solid rgba(148, 163, 184, 0.5); } .fx-ag-rows li:first-child { border-left-color: rgba(248, 113, 113, 0.75); } .fx-ag-rows li:nth-child(2) { border-left-color: rgba(251, 191, 36, 0.7); } .fx-ag-name { font: 500 7.5px/1 Inter, sans-serif; color: #E2E8F0; } .fx-ag-note { font: 600 7.5px/1 Inter, sans-serif; color: #CBD5E1; font-variant-numeric: tabular-nums; text-align: right; } .fx-ag-foot { font: 500 6.5px/1.3 Inter, sans-serif; color: #94A3B8; letter-spacing: 0.05em; text-transform: uppercase; } /* Ask smartNsales stays, one step quieter: the interaction surface, not the headline. */ .fx-ag-ask { display: flex; align-items: center; gap: 5px; margin-top: 1px; padding: 4px 6px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); } .fx-ag-ask-t { font: 400 7px/1 Inter, sans-serif; color: #94A3B8; } /* The ✦ mark, kept from the old preview — it is the Ask smartNsales mark and the Ask element still carries it. */ .fx-ask-mark { width: 7px; height: 7px; flex: none; color: #3B82F6; } .fx-ask-mark svg { width: 100%; height: 100%; display: block; } .fx-ask-foot svg { width: 7px; height: 7px; flex: none; } /* ------------------------------------------------------------ responsive -- */ @media (max-width: 1080px) { .fx-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .fx-visual { height: 168px; } } @media (max-width: 760px) { .features-grid-section { padding: 56px 1.25rem 64px; } .fx-grid { grid-template-columns: 1fr; gap: 14px; } .fx-visual { height: 176px; } .fx-layer--intelligence { margin-top: 26px; padding-top: 24px; } .fx-content { padding: 14px 16px 18px; } .fx-title { font-size: 15px; } } /* Below this the preview type stops being legible as an interface, so the previews are dropped and the cards become what they always were underneath: a title and one sentence. */ @media (max-width: 380px) { .fx-visual { display: none; } .fx-card { border-radius: 12px; } } @media (prefers-reduced-motion: reduce) { .js-anim .fx-card { opacity: 1; translate: 0 0; } .fx-card { transition: box-shadow .2s ease; } .fx-card:hover { transform: none; } } /* ========================================================================== Mid-page CTA band. Dark panel, soft radial bloom, one button. The reference for this used an orange bloom; this is steel and graphite, so it belongs to the same palette as everything around it instead of introducing a second accent. ========================================================================== */ .ctab-section { background: #FFFFFF; padding: 8px 2rem 72px; } /* The band carries the same glacier-aluminium environment as the hero: brushed ground, distant ridges in mist, foreground machined planes. It was a dark panel with a steel bloom; on the light ground the type inverts to ink and the button to navy, matching the hero's CTA. */ .ctab { position: relative; max-width: 1400px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(96deg, rgba(16,24,40,0.015) 0 1px, transparent 1px 3px), linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 42%, #F4F6F8 100%); border: 1px solid rgba(16,24,40,0.10); box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 26px 56px -34px rgba(16,24,40,0.32); } /* A soft glacier lift behind the type, so it never sits directly on a ridge. */ .ctab-bloom { position: absolute; left: 50%; top: 42%; width: 92%; height: 150%; transform: translate(-50%, -50%); background: radial-gradient(closest-side at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.72) 46%, rgba(255,255,255,0) 78%); pointer-events: none; z-index: 1; } /* The two artwork layers, anchored to the bottom of the band. */ .ctab-alps, .ctab-chrome { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: block; pointer-events: none; } .ctab-alps { height: 62%; } .ctab-chrome { height: 48%; } /* The ridges dissolve into the band's own floor rather than ending on a line. */ .ctab-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(244,246,248,0) 0%, rgba(248,250,251,0.85) 100%); pointer-events: none; } .ctab-inner { position: relative; z-index: 2; padding: 92px 2rem 104px; text-align: center; /* Wide enough that the headline breaks where its
says, not earlier. */ max-width: 960px; margin: 0 auto; } .ctab-title { font: 700 clamp(26px, 3vw, 40px)/1.18 Poppins, Inter, sans-serif; color: #101828; letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance; text-wrap: balance; } .ctab-sub { font: 400 16px/1.7 Inter, system-ui, sans-serif; color: #475569; margin: 0 auto 32px; max-width: 720px; } /* Inverted against the panel: light button on dark, the way the hero's navy button works against white. */ .ctab-btn { appearance: none; border: 0; background: #101828; color: #FFFFFF; font: 600 14.5px/1 Poppins, Inter, sans-serif; padding: 14px 28px; border-radius: 8px; cursor: pointer; transition: background .16s ease, transform .16s ease; } .ctab-btn:hover { background: var(--sns-chrome-hover); transform: translateY(-1px); } .ctab-btn:focus-visible { outline: 2px solid #101828; outline-offset: 3px; } @media (max-width: 760px) { .ctab-section { padding: 4px 1.25rem 56px; } .ctab { border-radius: 14px; } .ctab-inner { padding: 58px 1.25rem 62px; } .ctab-sub { font-size: 14.5px; margin-bottom: 26px; } .ctab-bloom { width: 150%; height: 150%; } } @media (prefers-reduced-motion: reduce) { .ctab-btn { transition: none; } .ctab-btn:hover { transform: none; } } /* ========================================================================== Technical marks. The engineering-drawing detailing from the hero, made reusable: corner crosshairs, fine alignment rules and the Swiss coordinate. Deliberately sparing. These read as precision only while they are rare — put them on every section and they become wallpaper. Three placements on the homepage, all at 4-8% so they register at the edge of attention. ========================================================================== */ .tmark { position: absolute; pointer-events: none; color: #101828; font: 600 9.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .tmark--light { color: #FFFFFF; } /* The coordinate, with a short rule leading into it. */ .tmark-coords { opacity: .55; display: inline-flex; align-items: center; gap: 8px; } .tmark--light .tmark-coords, .tmark-coords.tmark--light { opacity: .62; } .tmark-coords::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: .7; } /* Corner crosshair: two strokes meeting, not a full cross. */ .tmark-cross { width: 22px; height: 22px; opacity: .22; } .tmark-cross::before, .tmark-cross::after { content: ''; position: absolute; background: currentColor; } .tmark-cross::before { left: 0; top: 0; width: 100%; height: 1px; } .tmark-cross::after { left: 0; top: 0; width: 1px; height: 100%; } .tmark-cross--tr::before { left: auto; right: 0; } .tmark-cross--tr::after { left: auto; right: 0; } .tmark-cross--bl::before { top: auto; bottom: 0; } .tmark-cross--bl::after { top: auto; bottom: 0; } .tmark-cross--br::before { top: auto; bottom: 0; left: auto; right: 0; } .tmark-cross--br::after { top: auto; bottom: 0; left: auto; right: 0; } /* Placements. */ .tmark--tl { top: 26px; left: 30px; } .tmark--tr { top: 26px; right: 30px; } .tmark--bl { bottom: 26px; left: 30px; } .tmark--br { bottom: 26px; right: 30px; } /* Below tablet the sections are too tight for edge detailing. */ @media (max-width: 900px) { .tmark { display: none; } }