/* ========================================================================== Intelligent Systems : "What we build" Slater CSS. Everything is scoped under .isw Base desktop values also exist as Webflow classes so the section reads correctly on the Designer canvas. This file restates anything Webflow classes cannot hold (combinators, hover states, font stacks, every breakpoint) and out-specifies them via the .isw scope. Pairs with isw-what-we-build.js ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens, grid, type -------------------------------------------------------------------------- */ .isw { --isw-ink: #282828; --isw-paper: #F7F7F6; --isw-panel: #FAFAFA; --isw-sunk: #F2F2F1; --isw-line: #ECECEC; --isw-line-2: #E5E5E5; --isw-mute: #969696; --isw-purple: #6840FF; --isw-ease: cubic-bezier(0.16, 1, 0.3, 1); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; color: var(--isw-ink); font-family: Inter, system-ui, sans-serif; } .isw .isw-h2, .isw .isw-name, .isw .isw-num, .isw .isw-metric-v { font-family: "Inter Tight", Inter, system-ui, sans-serif; } .isw .isw-label, .isw .isw-lbl, .isw .isw-mono, .isw .isw-chip, .isw .isw-pipe-k, .isw .isw-box-name, .isw .isw-box-meta, .isw .isw-io-meta, .isw .isw-io-rot, .isw .isw-fan-note { font-family: Inconsolata, ui-monospace, monospace; } .isw .isw-num, .isw .isw-tnum, .isw .isw-metric-v { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .isw .isw-purple { color: var(--isw-purple); } /* -------------------------------------------------------------------------- 2. List, rows, states -------------------------------------------------------------------------- */ .isw .isw-row:first-child .isw-rule { background-color: var(--isw-ink); } .isw .isw-row:first-child .isw-num { color: var(--isw-ink); } .isw .isw-num { transition: color 200ms var(--isw-ease); } .isw .isw-chip { transition: border-color 200ms var(--isw-ease); } @media (hover: hover) and (min-width: 992px) { .isw .isw-row:hover .isw-num { color: var(--isw-ink); } .isw .isw-row:hover .isw-chip { border-color: var(--isw-ink); } } /* If a chip ever becomes a link, it needs a real tap target. */ a.isw-chip { min-height: 44px; } /* -------------------------------------------------------------------------- 3. Row 1 : three stage flow -------------------------------------------------------------------------- */ .isw .isw-fig--flow { background-image: radial-gradient(#E5E5E5 1px, transparent 1px); background-size: 1rem 1rem; background-position: 0 0; } .isw .isw-conn>.isw-dot { margin-left: -4px; } /* -------------------------------------------------------------------------- 4. Row 2 : vertical pipeline -------------------------------------------------------------------------- */ .isw .isw-pipe-row+.isw-pipe-row { border-top: 1px solid var(--isw-line); } /* Centre each dot on the left rule. Offset is half the dot width. */ .isw .isw-pipe-dot.isw-dot--p { left: calc(-2rem - 3.5px); } .isw .isw-pipe-dot.isw-dot--g { left: calc(-2rem - 2.5px); } /* -------------------------------------------------------------------------- 5. Row 4 : timeline -------------------------------------------------------------------------- */ .isw .isw-time-col+.isw-time-col { border-left: 1px solid var(--isw-line); padding-left: 1rem; } .isw .isw-time-col+.isw-time-col .isw-time-dot { left: 1rem; } /* -------------------------------------------------------------------------- 6. Row 6 : in and out pair -------------------------------------------------------------------------- */ .isw .isw-io-head+.isw-io-row { border-top: 0; } /* ========================================================================== BREAKPOINTS Written as max-width overrides so every width between the Webflow presets is covered, not just the four canvas sizes. ========================================================================== */ /* -------------------------------------------------------------------------- 992 to 1279. Tablet up. Three column row retained, tighter. -------------------------------------------------------------------------- */ @media (max-width: 1279px) { .isw .isw-row { grid-template-columns: 4rem 18rem minmax(0, 1fr); } .isw .isw-h2 { font-size: 3rem; } .isw .isw-name { font-size: 2rem; } } /* -------------------------------------------------------------------------- 768 to 991. Webflow tablet. Row collapses to one column, number inline. .isw-text goes display:contents so number and name share a line while description, chips and diagram each get their own row. -------------------------------------------------------------------------- */ @media (max-width: 991px) { .isw .isw-head-left { grid-column: 1 / 13; } .isw .isw-head-right { grid-column: 1 / 13; align-self: start; margin-top: 1.5rem; max-width: 32rem; } .isw .isw-list { grid-column: 1 / 13; } .isw .isw-h2 { font-size: 2.5rem; } .isw .isw-row { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; row-gap: 0; padding-top: 2.5rem; padding-bottom: 2.5rem; } .isw .isw-text { display: contents; } .isw .isw-num { grid-column: 1; grid-row: 1; align-self: baseline; font-size: 3rem; color: var(--isw-ink); } .isw .isw-name { grid-column: 2; grid-row: 1; align-self: baseline; font-size: 1.75rem; } .isw .isw-desc { grid-column: 1 / 3; grid-row: 2; margin-top: 1.5rem; } .isw .isw-chips { grid-column: 1 / 3; grid-row: 3; } .isw .isw-fig { grid-column: 1 / 3; grid-row: 4; margin-top: 2rem; } /* No hover at this size. Render the resting states as the final states. */ .isw .isw-chip { border-color: var(--isw-line-2); } .isw .isw-alert { max-width: none; } } /* -------------------------------------------------------------------------- 480 to 767. Webflow landscape phone. Each diagram changes shape. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .isw .isw-h2 { font-size: 2rem; } .isw .isw-name { font-size: 1.5rem; } .isw .isw-num { font-size: 2rem; } .isw .isw-row { padding-top: 2rem; padding-bottom: 2rem; } /* Row 1. Boxes stack, connectors rotate, dot sits at the base. */ .isw .isw-flow { flex-direction: column; align-items: stretch; } .isw .isw-conn { flex-direction: column; align-items: flex-start; margin-left: 0.75rem; } .isw .isw-conn-line { width: 1px; height: 1.5rem; } .isw .isw-conn>.isw-dot { margin-left: -3px; margin-top: -4px; } /* Row 2. Label drops above its value. Rule and dots unchanged. */ .isw .isw-pipe-row { grid-template-columns: minmax(0, 1fr); row-gap: 0.25rem; } /* Row 3. Trigger block stacks on top, right rule becomes a bottom rule. */ .isw .isw-fan { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; } .isw .isw-fan-trigger { border-right: 0; border-bottom: 1px solid var(--isw-line-2); padding-right: 0; padding-bottom: 1.5rem; } /* Row 4. Timeline turns vertical, dots run down a single left hairline. */ .isw .isw-time-cols { grid-template-columns: minmax(0, 1fr); border-bottom: 0; border-left: 1px solid var(--isw-line-2); padding-left: 1.5rem; } .isw .isw-time-col { display: flex; justify-content: space-between; align-items: baseline; column-gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; border-top: 1px solid var(--isw-line); } .isw .isw-time-col+.isw-time-col { border-left: 0; padding-left: 0; } .isw .isw-time-cap { margin-top: 0; text-align: right; } .isw .isw-time-dot, .isw .isw-time-col+.isw-time-col .isw-time-dot { top: 1rem; bottom: auto; } .isw .isw-time-dot.isw-dot--p, .isw .isw-time-col+.isw-time-col .isw-time-dot.isw-dot--p { left: calc(-1.5rem - 3.5px); } .isw .isw-time-dot.isw-dot--ink, .isw .isw-time-col+.isw-time-col .isw-time-dot.isw-dot--ink { left: calc(-1.5rem - 2.5px); } /* Row 5. Metrics go two by two. */ .isw .isw-alert-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 1.5rem; } .isw .isw-metric-v { font-size: 1.5rem; } /* Row 6. Panels stack, the 3rem gutter becomes a short vertical hairline. */ .isw .isw-io { grid-template-columns: minmax(0, 1fr); } .isw .isw-io-gutter { padding-top: 0.5rem; padding-bottom: 0.5rem; row-gap: 0; } .isw .isw-io-rule { flex: 0 0 auto; height: 0.75rem; } .isw .isw-io-rot { display: none; } } /* -------------------------------------------------------------------------- 320 to 479. Webflow portrait phone. Body copy holds at 1rem. Monospace holds at 0.65rem. Padding gives way before type does. -------------------------------------------------------------------------- */ @media (max-width: 479px) { .isw .isw-h2 { font-size: 1.75rem; } .isw .isw-name { font-size: 1.375rem; } .isw .isw-num { font-size: 1.75rem; } .isw .isw-fig--panel, .isw .isw-io-panel, .isw .isw-alert { padding: 1rem; } /* [metric] would wrap at two across in this width. */ .isw .isw-alert-metrics { grid-template-columns: minmax(0, 1fr); column-gap: 1rem; row-gap: 1rem; } /* Let the value drop under its SKU rather than collide with it. */ .isw .isw-io-row { flex-direction: column; align-items: flex-start; row-gap: 0.25rem; } }