/* ============================================================================ MonkePanel v2 design system Extracted from the approved redesign, generalised to cover every page type. Layers, in order: 1. tokens 2. reset/base 3. shell + rails 4. chrome 5. buttons 6. section furniture 7. cells/grids 8. components 9. prose/article 10. page-specific 11. motion 12. responsive ========================================================================= */ /* ---------------------------------------------------------------- 1. tokens */ :root { /* surfaces */ --bg: #08080B; --bg-sunk: #09090D; /* strips that recede from the page */ --bg-raise: #0B0B10; /* cards, panels, modal */ --bg-chrome: #0E0E14; /* fake window chrome inside product art */ --bg-hover: #0B0B10; /* cell hover wash */ /* hairlines. the whole layout is built from these, not from borders */ --line: rgba(255,255,255,.07); --line-soft: rgba(255,255,255,.05); --line-strong: rgba(255,255,255,.11); --line-loud: rgba(255,255,255,.16); /* type colours. every value below is AA on --bg at its intended size */ --text: #F2F2F5; /* 17.4:1 */ --text-hi: #FFFFFF; /* 19.6:1 */ --text-mid: #9A9BA4; /* 7.7:1 body copy */ --text-dim: #85868F; /* 5.6:1 meta, eyebrows, labels */ --text-faint: #787982; /* 4.63:1 floor. never go below this */ /* accent */ --accent: #7C5CFF; /* 4.60:1. rules, dots, diagram strokes. Clears AA for normal text, but only just, so prefer --accent-hi (11.5:1) whenever it IS text. */ --accent-solid: #6A45F0; /* button fill. white on it = 5.4:1 */ --accent-press: #5E3AD9; --accent-hi: #C9BCFF; /* accent as *text*: 9.9:1 */ --accent-wash: rgba(124,92,255,.16); --accent-glow: rgba(124,92,255,.9); /* type families */ --font-display: 'Wix Madefor Display', 'Onest', system-ui, sans-serif; --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* type scale */ --t-display-xl: 78px; --t-display-l: 54px; --t-display-m: 46px; --t-display-s: 40px; --t-title-l: 34px; --t-title-m: 23px; --t-title-s: 20px; --t-body-l: 19px; --t-body: 18px; --t-body-m: 17px; --t-body-s: 16px; --t-body-xs: 15px; --t-meta: 14px; --t-mono: 12px; --t-mono-s: 11px; /* tracking */ --tr-tightest: -.035em; --tr-tighter: -.03em; --tr-tight: -.025em; --tr-snug: -.02em; --tr-slight: -.015em; --tr-nudge: -.01em; --tr-mono: .1em; --tr-mono-w: .14em; --tr-mono-x: .16em; --tr-mono-xx: .2em; /* radii */ --r-xs: 3px; --r-s: 8px; --r-m: 11px; --r-l: 14px; --r-xl: 18px; --r-pill: 999px; /* layout */ --shell: 1440px; --gutter: 100px; --rail: 56px; --sect-y: 120px; /* elevation */ --sh-card: 0 70px 140px -50px rgba(0,0,0,.95); --sh-float: 0 50px 90px -34px rgba(0,0,0,.95); --sh-modal: 0 80px 140px -50px rgba(0,0,0,.95); --sh-cta: 0 24px 60px -22px var(--accent-glow); --sh-cta-sm: 0 20px 50px -20px var(--accent-glow); --ring: inset 0 0 0 1px var(--line-strong); --ring-soft: inset 0 0 0 1px var(--line); --ring-accent: inset 0 0 0 1px rgba(124,92,255,.24); /* motion */ --ease: cubic-bezier(.16,1,.3,1); } /* ------------------------------------------------------------ 2. reset/base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--t-body-m); line-height: 1.72; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Chinese pages get a CJK face ahead of the Latin stack. */ :lang(zh), [lang="zh-CN"] body, body:lang(zh-CN) { --font-body: 'Onest', 'Noto Sans SC', system-ui, sans-serif; --font-display: 'Wix Madefor Display', 'Noto Sans SC', system-ui, sans-serif; } img, svg, video { max-width: 100%; } img { height: auto; border: 0; } a { color: var(--text); text-decoration: none; transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; } a:hover { color: var(--text-hi); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-hi); margin: 0; text-wrap: balance; font-weight: 700; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; } button { font: inherit; color: inherit; } ::selection { background: rgba(124,92,255,.34); color: var(--text-hi); } :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } .skip { position: absolute; left: -9999px; top: 12px; z-index: 100; } .skip:focus { left: 100px; padding: 12px 18px; border-radius: 10px; background: var(--accent-solid); color: var(--text-hi); } .vh { /* visually hidden, still announced */ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------- 3. shell + rails */ .shell { max-width: var(--shell); margin: 0 auto; background: var(--bg); position: relative; overflow: clip; } /* the two vertical hairlines that run the full page height */ .rail { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: 6; pointer-events: none; } .rail--l { left: var(--rail); } .rail--r { right: var(--rail); } /* film grain over everything, under the chrome */ .grain { position: absolute; inset: 0; z-index: 40; pointer-events: none; background-image: url(/assets/grain.png); background-size: 160px 160px; opacity: .35; mix-blend-mode: soft-light; } .page { position: relative; z-index: 20; min-width: 0; } /* horizontal padding used by nearly everything */ .pad { padding-left: var(--gutter); padding-right: var(--gutter); } /* a soft violet bloom, positioned by modifier */ .bloom { position: absolute; pointer-events: none; filter: blur(30px); background: radial-gradient(46% 42% at 50% 50%, rgba(124,92,255,.26), transparent 72%); } .bloom--hero { left: 50%; top: 180px; width: 1100px; height: 760px; transform: translateX(-50%); } .bloom--section { left: 50%; top: 0; width: 1000px; height: 520px; transform: translateX(-50%); background: radial-gradient(50% 46% at 50% 30%, rgba(124,92,255,.16), transparent 72%); filter: blur(40px); } .bloom--right { right: 8%; top: 14%; width: 620px; height: 520px; background: radial-gradient(50% 50% at 50% 50%, rgba(124,92,255,.2), transparent 72%); filter: blur(36px); } /* fades page art into the background at the bottom of a visual */ .fade-out { position: absolute; left: 0; right: 0; bottom: 0; height: 230px; pointer-events: none; background: linear-gradient(180deg, rgba(8,8,11,0), var(--bg) 78%); } /* ------------------------------------------------------------- 4. chrome */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; height: 76px; padding: 0 var(--gutter); background: rgba(8,8,11,.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--line); } .topbar__brand { display: flex; align-items: center; gap: 12px; margin-right: 44px; flex: none; } .topbar__brand img { width: 24px; height: 24px; object-fit: contain; } .topbar__word { font-family: var(--font-display); font-weight: 700; font-size: var(--t-body-xs); letter-spacing: var(--tr-nudge); color: var(--text-hi); } .nav { display: flex; gap: 30px; } .nav a { font-size: var(--t-meta); color: var(--text-dim); padding: 5px 0; transition: color .3s ease, box-shadow .3s ease; } .nav a:hover { color: var(--text-hi); } .nav a[aria-current], .nav a.is-active { color: var(--text-hi); box-shadow: inset 0 -1px 0 0 var(--accent); } .topbar__end { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* scroll progress hairline welded to the bottom edge of the bar */ .topbar__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%; background: linear-gradient(90deg, rgba(124,92,255,.35), var(--accent)); transition: width .14s linear; } /* language switcher:
so it works with JS disabled */ .lang { position: relative; } .lang > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .08em; color: var(--text-dim); padding: 10px 12px; border-radius: var(--r-s); } .lang > summary::-webkit-details-marker { display: none; } .lang > summary:hover { color: var(--text-hi); background: rgba(255,255,255,.04); } .lang > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); } .lang[open] > summary::after { transform: rotate(225deg); margin-top: 2px; } .lang__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 172px; padding: 6px; border-radius: var(--r-m); background: var(--bg-raise); box-shadow: var(--sh-float), var(--ring); display: flex; flex-direction: column; } .lang__menu a { font-size: var(--t-meta); color: var(--text-mid); padding: 9px 12px; border-radius: var(--r-s); display: flex; gap: 10px; } .lang__menu a:hover { background: rgba(255,255,255,.05); color: var(--text-hi); } .lang__menu a[aria-current] { color: var(--accent-hi); } .lang__menu a span { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .08em; color: var(--text-dim); margin-left: auto; } /* mobile drawer. hidden on desktop, the only nav on small screens */ .burger { display: none; flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: var(--r-s); cursor: pointer; background: rgba(255,255,255,.05); box-shadow: var(--ring-soft); color: var(--text); align-items: center; justify-content: center; } .burger span { display: block; width: 17px; height: 1px; background: currentColor; position: relative; transition: transform .35s var(--ease), opacity .2s ease; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1px; background: currentColor; transition: transform .35s var(--ease); } .burger span::before { top: -6px; } .burger span::after { top: 6px; } .burger[aria-expanded="true"] span { transform: rotate(45deg); } .burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); } .burger[aria-expanded="true"] span::after { opacity: 0; } .drawer { position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column; padding: 88px 20px 32px; background: rgba(8,8,11,.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow-y: auto; overscroll-behavior: contain; } .drawer.is-open { display: flex; } .drawer a { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: var(--tr-snug); color: var(--text); padding: 14px 0; box-shadow: inset 0 -1px 0 var(--line); } .drawer a:hover { color: var(--accent-hi); } .drawer__actions { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; } body.is-locked { overflow: hidden; } /* footer */ .foot { border-top: 1px solid var(--line); padding: 72px var(--gutter) 56px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 100px; align-items: start; } .foot__brand { display: flex; align-items: center; gap: 12px; } .foot__brand img { width: 22px; height: 22px; object-fit: contain; } .foot__word { font-family: var(--font-display); font-weight: 700; font-size: var(--t-meta); color: var(--text-hi); } .foot__blurb { margin-top: 18px; font-size: var(--t-body-xs); line-height: 1.72; color: var(--text-dim); max-width: 42ch; } .foot__copy { margin-top: 28px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--text-dim); } .foot__legal { margin-top: 16px; font-size: var(--t-mono); line-height: 1.7; color: var(--text-faint); max-width: 60ch; } .foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0,140px)); gap: 44px; } .foot__col { display: flex; flex-direction: column; gap: 13px; } .foot__head { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--tr-mono-w); color: var(--text-dim); } .foot__col a { font-size: var(--t-body-xs); color: var(--text-mid); } /* ------------------------------------------------------------- 5. buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 500; font-size: var(--t-body-s); padding: 16px 26px; border-radius: 12px; border: 0; cursor: pointer; white-space: nowrap; text-align: center; transition: background .25s ease, box-shadow .25s ease, transform .25s ease, color .25s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--solid { background: var(--accent-solid); color: var(--text-hi); font-weight: 600; box-shadow: var(--sh-cta); } .btn--solid:hover { background: var(--accent); color: var(--text-hi); } .btn--solid:active { background: var(--accent-press); } .btn--ghost { color: var(--text); box-shadow: var(--ring); background: transparent; } .btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); background: rgba(255,255,255,.03); } .btn--sm { font-size: var(--t-meta); padding: 12px 18px; border-radius: 10px; } .btn--md { font-size: var(--t-body-xs); padding: 14px 22px; border-radius: var(--r-m); } .btn--block { display: flex; width: 100%; } /* a link that underlines with a hairline rather than text-decoration */ .link { color: var(--accent-hi); box-shadow: inset 0 -1px 0 rgba(201,188,255,.4); } .link:hover { color: var(--text-hi); box-shadow: inset 0 -1px 0 var(--text-hi); } /* --------------------------------------------------- 6. section furniture */ .sect { position: relative; } .sect--line { border-bottom: 1px solid var(--line); } .sect--pad { padding: var(--sect-y) var(--gutter); } .sect--head { padding: var(--sect-y) var(--gutter) 64px; } /* the mono kicker above every heading. two flavours: rule and dot */ .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono-x); color: var(--text-dim); text-transform: uppercase; } .eyebrow--inline { display: inline-flex; } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); flex: none; } .eyebrow--dot::before { width: 5px; height: 5px; border-radius: 50%; } .eyebrow--live::before { animation: mp-pulse 2.4s ease-in-out infinite; } .eyebrow--bare::before { display: none; } .eyebrow--accent { color: var(--accent-hi); } .h-xl { font-size: var(--t-display-xl); line-height: 1.08; letter-spacing: var(--tr-tightest); } .h-l { font-size: var(--t-display-l); line-height: 1.12; letter-spacing: var(--tr-tightest); } .h-m { font-size: var(--t-display-m); line-height: 1.14; letter-spacing: var(--tr-tight); } .h-s { font-size: var(--t-display-s); line-height: 1.16; letter-spacing: var(--tr-tight); } .h-xs { font-size: var(--t-title-l); line-height: 1.36; letter-spacing: var(--tr-snug); } .h-c { font-size: var(--t-title-m); line-height: 1.24; letter-spacing: var(--tr-snug); } .h-cs { font-size: var(--t-title-s); line-height: 1.28; letter-spacing: var(--tr-slight); } .lede { margin-top: 24px; font-size: var(--t-body); line-height: 1.76; color: var(--text-mid); max-width: 50ch; } .lede--lg{ font-size: var(--t-body-l); line-height: 1.68; max-width: 52ch; } .body { font-size: var(--t-body-m); line-height: 1.72; color: var(--text-mid); } .mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--text-dim); } /* a row of mono facts under a CTA cluster */ .facts { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--text-dim); } .facts > span { display: flex; align-items: center; gap: 8px; } .facts > span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; } .cta-row { display: flex; align-items: center; gap: 10px; } .cta-row--center { justify-content: center; } /* ------------------------------------------------------- 7. cells + grids */ /* The layout language: content sits in a grid divided by hairlines, not in floating cards. Edge cells lose their outer rule so the grid meets the gutter. */ .grid { display: grid; padding: 0 var(--gutter); } .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid--top { border-top: 1px solid var(--line); } .grid--bottom { border-bottom: 1px solid var(--line); } .cell { position: relative; transition: background .45s ease; } .cell--v { box-shadow: inset -1px 0 0 var(--line); } /* right rule */ .cell--h { box-shadow: inset 0 -1px 0 var(--line); } /* bottom rule */ .cell--vh{ box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); } .cell--last { box-shadow: none; } /* padding presets so cells breathe correctly at the grid edges */ .cell--a { padding: 44px 64px 48px 0; } /* first column */ .cell--b { padding: 44px 32px 48px 32px; }/* middle column */ .cell--c { padding: 44px 0 48px 64px; } /* last column */ /* interactive cells get a wash and an accent rule that wipes in from the left */ .cell--hot:hover { background: var(--bg-hover); } .cell--hot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease); } .cell--hot:hover::before { transform: scaleX(1); } /* numbered feature label: 01 ── WALKBOT */ .cell__tag { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--tr-mono-w); color: var(--text-dim); } .cell__num { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0; color: var(--accent-hi); } .cell__tag::after, .cell__rule { content: ""; width: 16px; height: 1px; background: var(--line-loud); flex: none; order: -1; } .cell__tag > .cell__num { order: -2; } .cell h3 { margin-top: 26px; max-width: 16ch; } .cell p { margin-top: 14px; font-size: var(--t-body-m); line-height: 1.72; color: var(--text-mid); max-width: 32ch; } /* stat cell: label / big number / caption */ .stat__label { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--tr-mono-x); color: var(--text-dim); margin-bottom: 18px; } .stat__value { font-family: var(--font-display); font-weight: 700; font-size: var(--t-title-l); letter-spacing: var(--tr-tighter); color: var(--text-hi); } .stat p { margin-top: 12px; font-size: var(--t-body-s); line-height: 1.68; color: var(--text-mid); max-width: 30ch; } /* bulleted list with accent dots, used in cards and modals */ .dots { display: flex; flex-direction: column; gap: 11px; list-style: none; font-size: var(--t-body-xs); color: var(--text-mid); } .dots li { display: flex; align-items: center; gap: 10px; } .dots li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } /* ---------------------------------------------------------- 8. components */ /* marquee strip with a static end-cap */ .strip { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 216px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-sunk); } .marquee { overflow: hidden; padding: 21px 0; } .marquee__track { display: flex; width: max-content; animation: mp-marquee 44s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__set { display: flex; align-items: center; gap: 44px; padding-right: 44px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono-xx); color: #8E8F98; white-space: nowrap; } .marquee__set i { color: var(--accent); font-style: normal; } .strip__cap { display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: inset 1px 0 0 var(--line); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono-w); color: var(--accent-hi); } .strip__cap span { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-wash); display: flex; align-items: center; justify-content: center; color: var(--accent-hi); font-size: var(--t-mono-s); } /* two-column premise block: big statement left, explanation right */ .premise { padding: var(--sect-y) var(--gutter) 128px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sect-y); border-bottom: 1px solid var(--line); } .premise__claim { font-family: var(--font-display); font-weight: 700; font-size: var(--t-title-l); line-height: 1.36; letter-spacing: var(--tr-snug); max-width: 19ch; color: var(--text-hi); } .premise > p { font-size: var(--t-body); line-height: 1.76; color: var(--text-mid); max-width: 48ch; align-self: end; } /* product screenshot presented as a floating window */ .shot { position: relative; border-radius: 16px; overflow: hidden; background: var(--bg-raise); box-shadow: var(--ring-soft), var(--sh-card); } .shot img { display: block; width: 100%; } .shot--tilt { transform: perspective(1700px) rotateX(7deg) scale(.95); transform-origin: 50% 0; } /* pricing */ .trial { position: relative; display: flex; align-items: center; gap: 40px; margin: 0 var(--gutter); padding: 26px 32px 28px; border-radius: var(--r-l); background: linear-gradient(100deg, rgba(124,92,255,.16), rgba(124,92,255,.04) 62%); box-shadow: var(--ring-accent); } .trial h3 { margin-top: 14px; } .trial p { margin-top: 10px; font-size: var(--t-body-s); line-height: 1.7; color: var(--text-mid); max-width: 62ch; } .trial > .btn { margin-left: auto; flex: none; } .plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); padding: 0 var(--gutter); margin-top: 48px; border-top: 1px solid var(--line); } .plan { padding: 40px 56px 44px; box-shadow: inset -1px 0 0 var(--line); position: relative; } .plan:first-child { padding-left: 0; } .plan:last-child { padding-right: 0; padding-left: 56px; box-shadow: none; } .plan__term { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono-w); color: var(--text-dim); } .plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 26px; } .plan__price b { font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: var(--tr-tightest); color: var(--text-hi); } .plan__price span { font-size: var(--t-body-xs); color: var(--text-dim); } .plan__note { font-size: var(--t-body-s); color: var(--text-mid); margin-top: 12px; } .plan .dots { margin-top: 26px; } .plan .btn { margin-top: 32px; } .plan--pick { background: linear-gradient(180deg, rgba(124,92,255,.09), rgba(124,92,255,0) 70%); background-clip: padding-box; } .plan--pick::before { content: ""; position: absolute; left: 1px; right: 1px; top: 0; height: 2px; background: var(--accent); } .plan__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono-w); } .plan__head .is-pick { color: var(--accent-hi); } .referral { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px var(--gutter) 44px; border-top: 1px solid var(--line); } .referral p { margin-top: 10px; font-size: var(--t-body-m); color: var(--text-mid); } /* payment method chips */ .pays { display: flex; flex-wrap: wrap; gap: 6px; } .pay { display: flex; align-items: center; justify-content: center; width: 88px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .3s ease, box-shadow .3s ease, transform .3s ease; } .pay:hover { background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transform: translateY(-1px); } /* FAQ */ .faq { padding: var(--sect-y) var(--gutter); display: grid; grid-template-columns: minmax(0,.55fr) minmax(0,1fr); gap: var(--sect-y); border-bottom: 1px solid var(--line); } .qa { border-top: 1px solid var(--line); } .qa:last-child { border-bottom: 1px solid var(--line); } .qa > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 28px 4px 28px 0; font-size: var(--t-body); color: var(--text); text-wrap: pretty; transition: color .25s ease; } .qa > summary::-webkit-details-marker { display: none; } .qa > summary:hover { color: var(--text-hi); } .qa__mark { color: var(--text-dim); font-weight: 400; flex: none; transition: transform .3s var(--ease), color .3s ease; } .qa[open] .qa__mark { transform: rotate(45deg); color: var(--accent-hi); } .qa > p { margin: 0 0 32px; font-size: var(--t-body-m); line-height: 1.72; color: var(--text-mid); max-width: 56ch; } /* modal */ .modal { display: none; position: fixed; inset: 0; z-index: 90; align-items: center; justify-content: center; padding: 40px; } .modal.is-open { display: flex; } .modal__veil { position: absolute; inset: 0; background: rgba(4,4,7,.72); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s ease; } .modal__card { position: relative; width: 560px; max-width: 100%; border-radius: var(--r-xl); overflow: hidden; background: var(--bg-raise); box-shadow: var(--sh-modal), inset 0 0 0 1px rgba(255,255,255,.09); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .45s ease, transform .55s var(--ease); } .modal.is-shown .modal__veil { opacity: 1; } .modal.is-shown .modal__card { opacity: 1; transform: none; } .modal__glow { position: absolute; left: 50%; top: -120px; width: 520px; height: 320px; margin-left: -260px; pointer-events: none; filter: blur(30px); background: radial-gradient(50% 50% at 50% 50%, rgba(124,92,255,.4), transparent 70%); } .modal__body { position: relative; padding: 40px 40px 36px; } .modal__x, .bar__x { position: absolute; z-index: 2; right: 14px; top: 14px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--text-mid); cursor: pointer; display: flex; align-items: center; justify-content: center; } .modal__x:hover, .bar__x:hover { background: rgba(255,255,255,.1); color: var(--text-hi); } /* sticky conversion bar */ .bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 24px; padding: 16px var(--gutter); background: rgba(10,10,14,.9); backdrop-filter: blur(24px); border-top: 1px solid rgba(255,255,255,.09); transform: translateY(110%); transition: transform .5s var(--ease); } .bar.is-up { transform: none; } .bar__copy { min-width: 0; display: flex; align-items: baseline; gap: 14px; } .bar__copy b { font-family: var(--font-display); font-weight: 700; font-size: var(--t-body-s); letter-spacing: var(--tr-slight); color: var(--text-hi); } .bar__end { margin-left: auto; display: flex; align-items: center; gap: 10px; } .bar__x { position: static; flex: none; width: 32px; height: 32px; border-radius: var(--r-s); background: transparent; } /* breadcrumbs */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--text-dim); } .crumbs a { color: var(--text-dim); } .crumbs a:hover { color: var(--accent-hi); } .crumbs li { display: flex; align-items: center; gap: 10px; list-style: none; } .crumbs li + li::before { content: "/"; color: var(--accent); } /* callouts */ .note { padding: 22px 26px; border-radius: var(--r-m); background: rgba(255,255,255,.03); box-shadow: var(--ring-soft); font-size: var(--t-body-m); line-height: 1.72; color: var(--text-mid); } .note--accent { background: linear-gradient(100deg, rgba(124,92,255,.14), rgba(124,92,255,.03) 62%); box-shadow: var(--ring-accent); } .note__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--tr-mono-x); color: var(--accent-hi); text-transform: uppercase; } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: var(--r-pill); background: var(--accent-wash); font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--tr-mono-w); color: var(--accent-hi); text-transform: uppercase; } /* ------------------------------------------------------- 9. prose/article */ /* Used by blog posts, legal pages, glossary entries and the guide's text pane. Narrow measure, generous rhythm, hairline rules instead of boxes. */ .prose { max-width: 68ch; font-size: var(--t-body-m); line-height: 1.78; color: var(--text-mid); } .prose > * + * { margin-top: 1.15em; } .prose h2 { font-size: var(--t-title-l); line-height: 1.24; letter-spacing: var(--tr-snug); margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--line); } .prose h3 { font-size: var(--t-title-m); line-height: 1.28; letter-spacing: var(--tr-snug); margin-top: 1.9em; } .prose h4 { font-size: var(--t-title-s); line-height: 1.32; letter-spacing: var(--tr-slight); margin-top: 1.7em; } .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .7em; } .prose a { color: var(--accent-hi); box-shadow: inset 0 -1px 0 rgba(201,188,255,.4); } .prose a:hover { color: var(--text-hi); box-shadow: inset 0 -1px 0 var(--text-hi); } .prose strong { color: var(--text); font-weight: 600; } .prose em { color: var(--text); font-style: italic; } .prose ul, .prose ol { padding-left: 0; list-style: none; } .prose li { position: relative; padding-left: 26px; } .prose li + li { margin-top: .55em; } .prose ul > li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .prose ol { counter-reset: n; } .prose ol > li { counter-increment: n; } .prose ol > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--accent-hi); } .prose blockquote { margin-left: 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--accent); color: var(--text); font-size: var(--t-body); } .prose code { font-family: var(--font-mono); font-size: .88em; color: var(--accent-hi); background: rgba(255,255,255,.05); padding: .16em .42em; border-radius: var(--r-xs); } .prose pre { overflow-x: auto; padding: 22px 24px; border-radius: var(--r-m); background: var(--bg-raise); box-shadow: var(--ring-soft); } .prose pre code { background: none; padding: 0; color: var(--text); font-size: var(--t-meta); line-height: 1.7; } .prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; } .prose img { border-radius: var(--r-m); box-shadow: var(--ring-soft); } .prose figure { margin: 0; } .prose figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--text-dim); } /* tables scroll inside their own box; the page never scrolls sideways */ .table-wrap { overflow-x: auto; } .prose table, .table { width: 100%; border-collapse: collapse; font-size: var(--t-body-s); } .prose th, .table th { text-align: left; padding: 14px 18px 14px 0; font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--tr-mono-w); color: var(--text-dim); text-transform: uppercase; font-weight: 400; border-bottom: 1px solid var(--line); white-space: nowrap; } .prose td, .table td { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); color: var(--text-mid); vertical-align: top; } .prose tr:last-child td, .table tr:last-child td { border-bottom: 0; } /* article furniture */ .article__head { padding: 96px var(--gutter) 56px; border-bottom: 1px solid var(--line); } .article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--text-dim); } .article__body { padding: 72px var(--gutter) 96px; display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 80px; align-items: start; } .toc { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 11px; } .toc__head { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--tr-mono-w); color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; } .toc a { font-size: var(--t-meta); line-height: 1.5; color: var(--text-dim); padding-left: 14px; border-left: 1px solid var(--line); } .toc a:hover, .toc a[aria-current] { color: var(--text-hi); border-left-color: var(--accent); } /* card list, used for blog index and related links */ .cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 0 var(--gutter); border-top: 1px solid var(--line); } .card { display: block; padding: 40px 56px 44px 0; box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); } .card:nth-child(even) { padding: 40px 0 44px 56px; box-shadow: inset 0 -1px 0 var(--line); } .card h3 { margin-top: 20px; max-width: 24ch; } .card p { margin-top: 12px; font-size: var(--t-body-s); line-height: 1.7; color: var(--text-mid); max-width: 46ch; } .card__more { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--accent-hi); } .card:hover .card__more { gap: 14px; } /* ------------------------------------------------------ 10. page-specific */ /* glossary: definition rows on hairlines, jump-bar of initials on top */ .gloss { padding: 0 var(--gutter); border-top: 1px solid var(--line); } .gloss__row { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr); gap: 56px; padding: 34px 0 38px; border-bottom: 1px solid var(--line); } .gloss__row dt { font-family: var(--font-display); font-weight: 700; font-size: var(--t-title-s); letter-spacing: var(--tr-slight); color: var(--text-hi); scroll-margin-top: 108px; } .gloss__row dd { margin: 0; font-size: var(--t-body-m); line-height: 1.74; color: var(--text-mid); max-width: 62ch; } .gloss__jump { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--gutter) 48px; } .gloss__jump a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-s); font-family: var(--font-mono); font-size: var(--t-mono); color: var(--text-dim); box-shadow: var(--ring-soft); } .gloss__jump a:hover { color: var(--accent-hi); box-shadow: var(--ring-accent); background: rgba(124,92,255,.08); } /* calculator */ .calc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 72px; padding: 0 var(--gutter) var(--sect-y); align-items: start; } .field { padding: 26px 0 28px; border-bottom: 1px solid var(--line); } .field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .field__label { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono-w); color: var(--text-dim); text-transform: uppercase; } .field__value { font-family: var(--font-display); font-weight: 700; font-size: var(--t-title-m); letter-spacing: var(--tr-snug); color: var(--text-hi); } .field__hint { margin-top: 10px; font-size: var(--t-body-s); color: var(--text-dim); max-width: 48ch; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; margin-top: 20px; background: transparent; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--line-loud); } input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line-loud); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(124,92,255,.18); transition: box-shadow .25s ease; } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(124,92,255,.18); } input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(124,92,255,.22); } .readout { position: sticky; top: 108px; padding: 34px 36px 38px; border-radius: var(--r-l); background: var(--bg-raise); box-shadow: var(--ring-soft), var(--sh-float); } .readout__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); } .readout__row:last-of-type { border-bottom: 0; } .readout__row dt { font-size: var(--t-body-s); color: var(--text-mid); } .readout__row dd { margin: 0; font-family: var(--font-mono); font-size: var(--t-body-s); color: var(--text-hi); } .readout__total { margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line-strong); } .readout__total b { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-s); letter-spacing: var(--tr-tighter); color: var(--text-hi); display: block; } /* 404 */ .oops { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px var(--gutter); } .oops__code { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono-xx); color: var(--accent-hi); } .oops h1 { margin-top: 24px; } .oops p { margin-top: 20px; max-width: 44ch; color: var(--text-mid); font-size: var(--t-body); } .oops .cta-row { margin-top: 34px; } /* ------------------------------------------------------------- 11. motion */ @keyframes mp-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes mp-drift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-14px,0); } } @keyframes mp-pulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } } @keyframes mp-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* Scroll reveal is applied by JS, never in CSS. If the script fails to run the content must still be visible, so there is no default opacity:0 here. */ [data-reveal] { will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; } } /* --------------------------------------------------------- 12. responsive */ @media (max-width: 1180px) { :root { --gutter: 56px; --rail: 28px; --sect-y: 96px; --t-display-xl: 62px; --t-display-l: 46px; --t-display-m: 40px; } .nav { gap: 22px; } .article__body { grid-template-columns: minmax(0,1fr); gap: 48px; } .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 18px; } .toc a { border-left: 0; padding-left: 0; box-shadow: inset 0 -1px 0 var(--line); } } @media (max-width: 900px) { :root { --gutter: 20px; --sect-y: 64px; --t-display-xl: clamp(36px, 10.5vw, 56px); --t-display-l: clamp(32px, 9vw, 44px); --t-display-m: clamp(29px, 7.6vw, 40px); --t-display-s: clamp(27px, 7vw, 34px); --t-title-l: 26px; --t-body-l: 16px; --t-body: 16px; } .rail { display: none; } .topbar { height: 64px; padding: 0 var(--gutter); } .nav { display: none; } .topbar__end .lang, .topbar__end .btn--ghost { display: none; } .burger { display: flex; } .topbar__end .btn { font-size: 13px; padding: 10px 14px; } /* every multi-column grid collapses; vertical rules become horizontal ones */ .grid--2, .grid--3, .plans, .cards, .premise, .faq, .calc, .foot, .article__body { grid-template-columns: minmax(0,1fr) !important; } .grid > *, .plan, .card { box-shadow: inset 0 -1px 0 var(--line) !important; } .cell--a, .cell--b, .cell--c { padding: 28px 0 32px !important; } .plan { padding: 28px 0 34px !important; } .card, .card:nth-child(even) { padding: 28px 0 32px !important; } .gloss__row { grid-template-columns: minmax(0,1fr); gap: 12px; } .premise { padding: var(--sect-y) var(--gutter); gap: 22px; } .faq { padding: var(--sect-y) var(--gutter); gap: 28px; } .foot { padding: 48px var(--gutter) 40px; gap: 40px; } .foot__cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; } .strip { grid-template-columns: minmax(0,1fr); } .strip__cap { display: none; } .trial { flex-direction: column; align-items: flex-start; gap: 18px; margin: 0 var(--gutter); } .trial > .btn { margin-left: 0; } .referral { flex-direction: column; align-items: flex-start; gap: 18px; padding: 32px var(--gutter) 40px; } .cta-row { flex-wrap: wrap; row-gap: 10px; } .facts { gap: 12px 18px; } .bar { padding: 12px var(--gutter); gap: 12px; flex-wrap: wrap; } .bar__copy .mono { display: none; } .bar .btn { font-size: 13px; padding: 11px 14px; } .modal { padding: 16px; } .modal__body { padding: 28px 22px 26px; } .article__head { padding: 72px var(--gutter) 40px; } .article__body { padding: 48px var(--gutter) 72px; } .readout { position: static; padding: 26px 22px 30px; } .skip:focus { left: 16px; } .prose h2 { margin-top: 1.8em; } } @media (max-width: 520px) { .foot__cols { grid-template-columns: minmax(0,1fr); } .cta-row .btn { width: 100%; } } /* Print: the legal pages get printed. Make that not look broken. */ @media print { .topbar, .bar, .modal, .drawer, .grain, .rail, .bloom, .strip { display: none !important; } body { background: #fff; color: #111; } .prose { max-width: none; color: #111; } .prose a { color: #111; box-shadow: none; text-decoration: underline; } } /* ================================================= 13. homepage sections */ .hero { position: relative; padding-top: 112px; text-align: center; } .hero__title { margin: 26px auto 0; max-width: 15ch; } .hero__lede { margin-left: auto; margin-right: auto; } .hero .eyebrow--inline { justify-content: center; } .hero__facts { justify-content: center; margin-top: 24px; } .hero__pays { justify-content: center; margin-top: 22px; } .hero__visual { position: relative; margin-top: 44px; padding: 0 var(--gutter); } .hero__visual .shot { max-width: 1100px; margin: 0 auto; } .hero__visual .fade-out { height: 200px; } .final { position: relative; overflow: hidden; padding: 128px var(--gutter) 128px; text-align: center; } .final__facts { justify-content: center; margin-top: 24px; } /* These carry .pad in the markup, but a padding shorthand here would beat it. Set the horizontal padding explicitly instead. */ .features__head, .pricing__head { padding: var(--sect-y) var(--gutter) 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 80px; } .trust__head { padding: var(--sect-y) var(--gutter) 64px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: var(--sect-y); align-items: end; } .sect--head { padding: var(--sect-y) var(--gutter) 64px; } .walkbot { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; position: relative; z-index: 2; } /* the perspective grid the account nodes drift over */ .walkbot__stage { position: relative; height: 380px; margin-top: 14px; overflow: hidden; } .walkbot__glow { position: absolute; left: 50%; top: 20%; width: 1000px; height: 380px; transform: translateX(-50%); filter: blur(34px); background: radial-gradient(50% 50% at 50% 50%, rgba(124,92,255,.2), transparent 70%); } .walkbot__grid { position: absolute; left: 50%; top: 18%; width: 1240px; height: 700px; margin-left: -620px; transform: perspective(560px) rotateX(72deg); transform-origin: 50% 0; background: repeating-linear-gradient(90deg, rgba(201,188,255,.5) 0 1.5px, transparent 1.5px 62px); -webkit-mask-image: radial-gradient(60% 70% at 50% 8%, #000 4%, transparent 72%); mask-image: radial-gradient(60% 70% at 50% 8%, #000 4%, transparent 72%); } .walkbot__horizon { position: absolute; left: var(--gutter); right: var(--gutter); top: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,188,255,.45) 26%, rgba(201,188,255,.45) 74%, transparent); } .node { position: absolute; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); letter-spacing: .08em; background: #0D0E13; border-radius: 10px; box-shadow: var(--sh-float), var(--ring-soft); color: var(--text-mid); animation: mp-drift 11s ease-in-out infinite; } .node i { width: 6px; height: 6px; border-radius: 50%; background: #3A3B44; flex: none; } .node--on { background: #101017; color: var(--accent-hi); box-shadow: var(--sh-float), var(--ring-accent); } .node--on i { background: var(--accent); animation: mp-pulse 2s ease-in-out infinite; } .node--1 { left: 26%; top: 24%; font-size: var(--t-mono-s); padding: 8px 12px; opacity: .65; filter: blur(1px); animation-duration: 9s; } .node--2 { right: 22%; top: 28%; font-size: var(--t-mono); padding: 9px 14px; opacity: .8; animation-delay: .8s; } .node--3 { left: 9%; top: 44%; font-size: var(--t-meta); padding: 13px 18px; animation-duration: 12s; animation-delay: .4s; } .node--4 { right: 8%; top: 56%; font-size: 13px; padding: 12px 16px; animation-duration: 10s; animation-delay: 1.2s; } .tgapp { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 56px; align-items: center; } .tgapp__visual { min-width: 0; position: relative; height: 430px; } .tgapp__back { position: absolute; left: 2%; top: 12%; width: 44%; border-radius: 20px; filter: blur(4px); opacity: .45; transform: rotate(-5deg); } .tgapp__front { position: absolute; right: 5%; top: 0; width: 51%; border-radius: 22px; transform: rotate(3deg); box-shadow: var(--sh-card), 0 0 90px -30px rgba(124,92,255,.45); } @media (max-width: 900px) { .hero { padding-top: 84px; } .hero__visual { margin-top: 28px; } .hero .shot--tilt { transform: none; } .features__head, .pricing__head { flex-direction: column; align-items: flex-start; gap: 18px; padding: var(--sect-y) var(--gutter) 40px; } .trust__head { grid-template-columns: minmax(0,1fr); gap: 24px; padding: var(--sect-y) var(--gutter) 40px; } .sect--head { padding: var(--sect-y) var(--gutter) 40px; } .walkbot { grid-template-columns: minmax(0,1fr); gap: 24px; } .walkbot__stage { height: 300px; } .walkbot__horizon { left: var(--gutter); right: var(--gutter); } .node--1, .node--2 { display: none; } .node--3 { left: 4%; } .node--4 { right: 4%; } .tgapp { grid-template-columns: minmax(0,1fr); gap: 36px; } .tgapp__visual { height: min(400px, 104vw); } .final { padding: 72px var(--gutter); } } /* ============================================ 14. gaps found during rollout */ /* Promoted out of per-page