/* RecreateCX — marketing site design system. * * Direction: institutional. The register of an established vendor rather than a * launch page. Three things carry that, and they are worth stating so nobody * quietly undoes them: * * 1. The grid is VISIBLE. Hairline rules divide columns and sections instead * of cards floating on a tinted background. Structure you can see reads as * considered; drop shadows everywhere read as a template. * 2. The display face is a heavy grotesk (Archivo), NOT a serif. The previous * cream-and-Fraunces pairing is the most common look in generated web * design, and it made the site read as a small project. * 3. Colour is nearly absent. One green — eyebrows, primary actions, figures — * so that when it appears it means something. * * Both themes are first-class. `prefers-color-scheme` carries the OS preference * and the header toggle stamps data-theme on , which must win in BOTH * directions — hence the :root[data-theme=...] blocks after the media query. * Style through the tokens, never inside the media query. */ /* ============================================================ tokens ===== */ :root { --paper: #ffffff; --paper-2: #f7f7f5; /* alternating section ground */ --paper-3: #efefec; /* table heads, quiet fills */ --ink: #0b0c0b; --ink-2: #414743; --ink-3: #767d78; --rule: #e4e5e1; /* hairline, structural */ --rule-2: #c8cac4; /* emphasis rule */ --green: #14603d; --green-2: #1d7d51; --green-sf: #eaf2ed; --amber: #8a5a12; --amber-sf: #fbf1de; --disp: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --maxw: 1200px; --pad: 32px; --r: 3px; /* deliberately small — large radii read as consumer */ --btn-on-green: #ffffff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0c0e0d; --paper-2: #121514; --paper-3: #1a1e1c; --ink: #f0f2ef; --ink-2: #b6bdb8; --ink-3: #838d86; --rule: #232825; --rule-2: #38403a; --green: #4bb583; --green-2: #6ecb9d; --green-sf: #11241b; --amber: #d3a55e; --amber-sf: #241c0e; --btn-on-green: #06120c; } } :root[data-theme="dark"] { --paper: #0c0e0d; --paper-2: #121514; --paper-3: #1a1e1c; --ink: #f0f2ef; --ink-2: #b6bdb8; --ink-3: #838d86; --rule: #232825; --rule-2: #38403a; --green: #4bb583; --green-2: #6ecb9d; --green-sf: #11241b; --amber: #d3a55e; --amber-sf: #241c0e; --btn-on-green: #06120c; } /* ============================================================== base ===== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } img, svg { max-width: 100%; } ::selection { background: var(--green); color: var(--btn-on-green); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .narrow { max-width: 820px; } /* ============================================================== type ===== */ h1, h2, h3, h4 { font-family: var(--disp); font-weight: 600; letter-spacing: -.03em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 5vw, 4.05rem); line-height: 1.04; letter-spacing: -.034em; } /* 64.8px @1440 */ h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.1; } h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.022em; line-height: 1.35; } p { margin: 0; } .lede { font-size: clamp(1.02rem, 1.5vw, 1.14rem); color: var(--ink-2); line-height: 1.62; max-width: 62ch; } .big { font-size: clamp(1.1rem, 1.7vw, 1.28rem); color: var(--ink-2); line-height: 1.6; max-width: 56ch; } .muted { color: var(--ink-2); } .hint { font-size: .84rem; color: var(--ink-3); line-height: 1.55; } .tnum { font-variant-numeric: tabular-nums; } em.q { font-style: normal; color: var(--ink-3); } /* The eyebrow sits ON a rule — the site's most repeated structural gesture. */ .kick { display: block; font-family: var(--disp); font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 14px; border-bottom: 1px solid var(--rule-2); margin-bottom: 28px; } .kick.g { color: var(--green); } .mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mt24 { margin-top: 24px; } .mt36 { margin-top: 36px; } .mt48 { margin-top: 48px; } /* ============================================================ buttons ==== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--disp); font-weight: 600; font-size: .92rem; letter-spacing: -.012em; padding: 12px 22px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; transition: background .14s, border-color .14s, color .14s; white-space: nowrap; } .btn-lg { padding: 14px 28px; font-size: .98rem; } .btn-primary { background: var(--green); color: var(--btn-on-green); } .btn-primary:hover { background: var(--green-2); } .btn-ghost { border-color: var(--rule-2); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); } .btn-line { border-color: var(--ink); color: var(--ink); } .btn-line:hover { background: var(--ink); color: var(--paper); } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } /* ============================================================= header ==== */ header.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--rule); } .nav .wrap { display: flex; align-items: center; gap: 34px; height: 70px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 600; font-size: 1.06rem; letter-spacing: -.035em; white-space: nowrap; } .brand svg { width: 25px; height: 25px; flex: 0 0 auto; } .navlinks { margin-left: auto; display: flex; align-items: center; gap: 30px; font-size: .89rem; color: var(--ink-2); font-weight: 500; } .navlinks > a:hover { color: var(--ink); } .navlinks > a.on { color: var(--ink); font-weight: 600; } .navtools { display: flex; align-items: center; gap: 10px; } .themeb { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--rule-2); border-radius: var(--r); background: transparent; color: var(--ink-2); cursor: pointer; } .themeb:hover { color: var(--green); border-color: var(--green); } .navtoggle { display: none; width: 38px; height: 34px; border: 1px solid var(--rule-2); border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; font-size: 1rem; } /* ---- menus ---- */ .nd { position: relative; } .ndb { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; font-weight: 500; } .ndb svg { width: 10px; height: 10px; opacity: .55; transition: transform .18s ease; } .nd[data-open="1"] .ndb svg { transform: rotate(180deg); } .ndb:hover, .ndb.on { color: var(--ink); } .ndm { position: absolute; top: calc(100% + 17px); left: 50%; transform: translateX(-50%) translateY(-5px); min-width: 320px; padding: 8px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r); box-shadow: 0 22px 50px rgba(11,12,11,.13), 0 2px 8px rgba(11,12,11,.05); opacity: 0; visibility: hidden; z-index: 60; transition: opacity .15s ease, transform .15s ease, visibility .15s; } .nd[data-open="1"] .ndm { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .ndm::before { content: ""; position: absolute; top: -17px; left: 0; right: 0; height: 17px; } .ndm.wide { min-width: 580px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; } .ndm a { display: block; padding: 10px 12px; border-radius: var(--r); color: var(--ink); font-family: var(--disp); font-size: .89rem; font-weight: 600; line-height: 1.3; } .ndm a span { display: block; font-family: var(--sans); font-weight: 400; font-size: .795rem; color: var(--ink-3); margin-top: 3px; letter-spacing: 0; } .ndm a:hover { background: var(--green-sf); color: var(--green); } .ndm a:hover span { color: var(--ink-2); } .ndfoot { grid-column: 1 / -1; margin-top: 7px; padding: 12px 12px 3px; border-top: 1px solid var(--rule); font-size: .8rem; color: var(--ink-3); } .ndfoot a { display: inline; padding: 0; font-family: var(--sans); font-size: .8rem; color: var(--green); font-weight: 600; } .ndfoot a:hover { background: none; text-decoration: underline; } .ndgroup { display: none; } @media (max-width: 1000px) { .navlinks { position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 6px 0 14px; box-shadow: 0 18px 40px rgba(11,12,11,.12); display: none; max-height: calc(100vh - 70px); overflow-y: auto; } .navlinks.open { display: flex; } .navlinks > a { padding: 11px var(--pad); } .navtoggle { display: block; margin-left: auto; } .navtools { order: 3; } /* Wordmark + burger + theme + CTA do not fit a 390px header at the desktop gap — the row overflowed the viewport by 3px. Tighten the gap and the CTA rather than dropping the primary action. */ .nav .wrap { gap: 14px; } .navtools .btn { padding: 9px 14px; font-size: .85rem; } /* Menus flatten into inline groups: an absolute panel inside an already absolute drawer would hang off-screen, and nothing should need a tap to become reachable. */ .nd { position: static; } .ndb { display: none; } .ndm, .ndm.wide { position: static; transform: none; opacity: 1; visibility: visible; display: block; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; } .ndm a { padding: 10px var(--pad); border-radius: 0; font-family: var(--sans); font-weight: 500; } .ndm a span { display: none; } .ndfoot { display: none; } .ndgroup { display: block; padding: 16px var(--pad) 5px; font-family: var(--disp); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } } /* =========================================================== sections ==== */ section { padding: 86px 0; } section.tight { padding: 58px 0; } section.alt { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } section.ink { background: var(--ink); color: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } section.ink h1, section.ink h2, section.ink h3 { color: var(--paper); } section.ink .lede, section.ink .big, section.ink .muted { color: color-mix(in srgb, var(--paper) 72%, transparent); } section.ink .kick { color: color-mix(in srgb, var(--paper) 60%, transparent); border-bottom-color: color-mix(in srgb, var(--paper) 26%, transparent); } section.ink .hint { color: color-mix(in srgb, var(--paper) 55%, transparent); } section.ink .btn-ghost { border-color: color-mix(in srgb, var(--paper) 34%, transparent); color: var(--paper); } section.ink .btn-ghost:hover { border-color: var(--paper); } section.ink .btn-primary { background: var(--paper); color: var(--ink); } section.ink .btn-primary:hover { background: color-mix(in srgb, var(--paper) 86%, var(--green)); } section.ink .lnk { color: color-mix(in srgb, var(--paper) 88%, transparent); text-decoration: underline; } /* section head: title left, standfirst right, sitting on a rule */ .shead { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 26px 48px; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--rule-2); } .shead.solo { grid-template-columns: 1fr; } .shead p { color: var(--ink-2); font-size: .97rem; line-height: 1.6; } section.ink .shead { border-bottom-color: color-mix(in srgb, var(--paper) 26%, transparent); } section.ink .shead p { color: color-mix(in srgb, var(--paper) 70%, transparent); } /* ======================================================== ruled grids ==== */ /* The workhorse: cells divided by hairlines rather than boxed as cards. */ .rg { display: grid; } .rg > * { padding: 30px 30px 30px 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .rg.c2 { grid-template-columns: repeat(2,1fr); } .rg.c3 { grid-template-columns: repeat(3,1fr); } .rg.c4 { grid-template-columns: repeat(4,1fr); } .rg.c2 > *:nth-child(2n), .rg.c3 > *:nth-child(3n), .rg.c4 > *:nth-child(4n) { border-right: 0; padding-right: 0; } .rg h3 { font-family: var(--disp); } .rg p { margin-top: 9px; color: var(--ink-2); font-size: .92rem; line-height: 1.56; } .rg .n { display: block; font-family: var(--disp); font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--green); margin-bottom: 12px; } section.ink .rg > * { border-color: color-mix(in srgb, var(--paper) 22%, transparent); } section.ink .rg p { color: color-mix(in srgb, var(--paper) 70%, transparent); } section.ink .rg .n { color: color-mix(in srgb, var(--paper) 75%, transparent); } /* evidence figures */ .figs { display: grid; grid-template-columns: repeat(4,1fr); } .figs > div { padding: 34px 28px 0 0; border-right: 1px solid var(--rule); } .figs > div:last-child { border-right: 0; padding-right: 0; } .figs .v { font-family: var(--disp); font-size: clamp(2rem,3.4vw,2.65rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; } .figs .k { font-family: var(--disp); font-size: .71rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-top: 14px; } .figs .d { font-size: .875rem; color: var(--ink-2); margin-top: 10px; line-height: 1.5; } section.ink .figs > div { border-color: color-mix(in srgb, var(--paper) 22%, transparent); } section.ink .figs .k { color: color-mix(in srgb, var(--paper) 80%, transparent); } section.ink .figs .d { color: color-mix(in srgb, var(--paper) 66%, transparent); } /* numbered steps */ .steps { list-style: none; margin: 0; padding: 0; } .steps li { display: grid; grid-template-columns: 46px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--rule); } .steps li:first-child { padding-top: 0; } .steps li:last-child { border-bottom: 0; } .steps .n { font-family: var(--disp); font-size: .78rem; font-weight: 700; letter-spacing: .07em; color: var(--green); padding-top: 4px; } .steps p { margin-top: 7px; color: var(--ink-2); font-size: .93rem; line-height: 1.56; } section.ink .steps li { border-color: color-mix(in srgb, var(--paper) 22%, transparent); } section.ink .steps p { color: color-mix(in srgb, var(--paper) 70%, transparent); } section.ink .steps .n { color: color-mix(in srgb, var(--paper) 78%, transparent); } /* checks */ .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .checks li { position: relative; padding-left: 27px; color: var(--ink-2); font-size: .95rem; line-height: 1.55; } .checks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 6px; border-left: 1.8px solid var(--green); border-bottom: 1.8px solid var(--green); transform: rotate(-45deg); } .checks li b { color: var(--ink); font-weight: 600; } .checks li a { color: var(--green); font-weight: 600; } section.ink .checks li { color: color-mix(in srgb, var(--paper) 74%, transparent); } section.ink .checks li b { color: var(--paper); } /* split */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } /* Grid and flex children default to min-width:auto, so they refuse to shrink below their content. A nested table with min-width:640px therefore pushes its whole column past the viewport and .tablewrap never gets the chance to scroll. These let the column shrink so the overflow happens INSIDE the scroll container. */ .split > *, .rg > *, .figs > * { min-width: 0; } .tablewrap { max-width: 100%; } .split.wide-l { grid-template-columns: 1.15fr .85fr; } .split.wide-r { grid-template-columns: .85fr 1.15fr; } /* a bordered panel, used sparingly where content must be contained */ .panel { border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--paper); overflow: hidden; } .panel-h { padding: 13px 18px; border-bottom: 1px solid var(--rule); font-family: var(--disp); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-3); display: flex; align-items: center; gap: 10px; } .panel-b { padding: 22px 18px; } .panel-f { padding: 12px 18px; border-top: 1px solid var(--rule); background: var(--paper-3); font-size: .8rem; color: var(--ink-3); } /* tables */ .tablewrap { overflow-x: auto; border: 1px solid var(--rule-2); border-radius: var(--r); } table.t { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 640px; background: var(--paper); } table.t th, table.t td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; } table.t th { font-family: var(--disp); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-3); white-space: nowrap; } table.t td { color: var(--ink-2); } table.t td:first-child { color: var(--ink); font-weight: 550; } table.t tr:last-child td { border-bottom: 0; } table.t .num { font-variant-numeric: tabular-nums; } /* pills */ .pill { display: inline-block; font-family: var(--disp); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; background: var(--green-sf); color: var(--green); } .pill.q { background: var(--amber-sf); color: var(--amber); } .pill.n { background: var(--paper-3); color: var(--ink-3); } /* FAQ */ details.faq { border-bottom: 1px solid var(--rule); } details.faq summary { cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative; font-family: var(--disp); font-size: 1.02rem; font-weight: 600; letter-spacing: -.022em; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); transition: transform .18s; } details.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); } details.faq .a { padding: 0 40px 22px 0; color: var(--ink-2); font-size: .95rem; line-height: 1.62; max-width: 74ch; } details.faq .a a { color: var(--green); font-weight: 600; } /* price cards — the one place a box is right, because they are compared */ .plans { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; } .plan { padding: 28px 24px 30px; border-right: 1px solid var(--rule); background: var(--paper); /* Column + growing list so the CTA pins to the bottom of every card. Without this a single wrapped bullet ("Up to 200 agents - no per-seat fee") pushes that one card's button out of line with the other three, and the fix would otherwise be to keep shortening the copy. */ display: flex; flex-direction: column; } .plan:last-child { border-right: 0; } .plan.on { background: var(--green-sf); } .plan .nm { font-family: var(--disp); font-size: .95rem; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .plan .pr { font-family: var(--disp); font-size: 2.1rem; font-weight: 600; letter-spacing: -.045em; margin-top: 14px; font-variant-numeric: tabular-nums; } .plan .pr small { font-family: var(--sans); font-size: .85rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; } .plan .li { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; font-size: .875rem; color: var(--ink-2); flex: 1; align-content: start; } .plan .btn { width: 100%; margin-top: 22px; } /* One entrance animation, on the hero visual only. PURE CSS animating FROM transparent — never a JS-toggled class over content held at opacity:0. That pattern once shipped a blank page to anyone without JS, and DESIGN.md §7 forbids it. An element with .rise is fully visible if the animation never runs, because the END state is the resting state. */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rise { animation: rise .62s cubic-bezier(.22,.61,.36,1) both; } @media (prefers-reduced-motion: reduce) { .rise { animation: none; } } /* product screenshots — framed, never floated on a gradient */ .shot { border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; background: var(--paper-3); } .shot img { display: block; width: 100%; height: auto; } .shot figcaption { padding: 11px 16px; border-top: 1px solid var(--rule); background: var(--paper-3); font-size: .8rem; color: var(--ink-3); line-height: 1.5; } figure.shot { margin: 0; } /* homepage product tour — one stage, seven real product views */ .showcase { border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; background: var(--paper); } .showcase-rail { display: grid; grid-template-columns: repeat(7,minmax(142px,1fr)); overflow-x: auto; background: var(--paper-2); border-bottom: 1px solid var(--rule-2); scrollbar-width: thin; } .showcase-rail a { position: relative; min-width: 0; padding: 16px 14px 15px; border-right: 1px solid var(--rule); color: var(--ink-3); font-family: var(--disp); font-size: .75rem; font-weight: 600; line-height: 1.25; transition: color .16s, background .16s; } .showcase-rail a:last-child { border-right: 0; } .showcase-rail a::after { content: ""; position: absolute; right: 14px; bottom: -1px; left: 14px; height: 2px; background: transparent; transition: background .16s; } .showcase-rail a span { display: block; margin-bottom: 7px; color: var(--ink-3); font-size: .64rem; font-weight: 700; letter-spacing: .1em; } .showcase-rail a:hover { color: var(--ink); background: var(--paper-3); } .showcase-rail a.on { color: var(--ink); background: var(--paper); } .showcase-rail a.on span { color: var(--green); } .showcase-rail a.on::after { background: var(--green); } .showcase-stage { padding: 28px; } .showcase-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: end; margin-bottom: 24px; } .showcase-count { display: block; margin-bottom: 9px; color: var(--green); font-family: var(--disp); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .showcase-head h2 { font-size: clamp(1.45rem,2.6vw,2.15rem); } .showcase-head p { max-width: 76ch; margin-top: 10px; color: var(--ink-2); font-size: .94rem; line-height: 1.58; } .showcase-controls { display: flex; gap: 7px; } .showcase-controls button { display: inline-grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .16s, color .16s, background .16s; } .showcase-controls button:hover { border-color: var(--green); color: var(--green); background: var(--green-sf); } .showcase-controls svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .showcase-shot { margin: 0; border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; } .showcase-media { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); } .showcase-media img { display: block; width: 100%; height: 100%; object-fit: contain; } .showcase-shot figcaption { padding: 11px 15px; border-top: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-3); font-size: .78rem; line-height: 1.5; } @keyframes gallery-swap { from { opacity: .72; transform: scale(.997); } to { opacity: 1; transform: none; } } .showcase-media.is-changing img { animation: gallery-swap .28s ease-out both; } /* inline link style inside prose */ .lnk { color: var(--green); font-weight: 600; } .lnk:hover { text-decoration: underline; } /* =========================================================== footer ====== */ footer { border-top: 1px solid var(--rule-2); padding: 58px 0 34px; background: var(--paper-2); } .fgrid { display: grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: 30px; } footer h4 { font-family: var(--disp); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; } footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } footer a { color: var(--ink-2); font-size: .885rem; } footer a:hover { color: var(--green); } .fbot { margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .82rem; color: var(--ink-3); } /* ======================================================= responsive ====== */ @media (max-width: 1080px) { .fgrid { grid-template-columns: 1.4fr repeat(2,1fr); row-gap: 36px; } } /* Bounded ABOVE the flatten breakpoint on purpose. Unbounded, this rule sits later in the file than the <=1000px block that collapses menus into the mobile drawer, so it won the cascade and rendered 520px-wide menu items inside a 390px drawer — clipped and unreachable. */ @media (max-width: 1080px) and (min-width: 1001px) { .ndm.wide { min-width: 520px; } } @media (max-width: 960px) { section { padding: 64px 0; } .split, .split.wide-l, .split.wide-r { grid-template-columns: 1fr; gap: 36px; } .shead { grid-template-columns: 1fr; align-items: start; } .rg.c4 { grid-template-columns: repeat(2,1fr); } .rg.c4 > *:nth-child(4n) { border-right: 1px solid var(--rule); padding-right: 30px; } .rg.c4 > *:nth-child(2n) { border-right: 0; padding-right: 0; } .rg.c3 { grid-template-columns: repeat(2,1fr); } .rg.c3 > *:nth-child(3n) { border-right: 1px solid var(--rule); padding-right: 30px; } .rg.c3 > *:nth-child(2n) { border-right: 0; padding-right: 0; } .figs { grid-template-columns: repeat(2,1fr); } .figs > div { border-bottom: 1px solid var(--rule); padding-bottom: 30px; } .figs > div:nth-child(2n) { border-right: 0; padding-right: 0; } .plans { grid-template-columns: repeat(2,1fr); } .plan:nth-child(2) { border-right: 0; } .plan:nth-child(1), .plan:nth-child(2) { border-bottom: 1px solid var(--rule); } } @media (max-width: 720px) { :root { --pad: 22px; } .fgrid { grid-template-columns: 1fr 1fr; } .rg.c2, .rg.c3, .rg.c4 { grid-template-columns: 1fr; } .rg > * { border-right: 0 !important; padding-right: 0 !important; } .figs { grid-template-columns: 1fr; } .figs > div { border-right: 0; padding-right: 0; } .plans { grid-template-columns: 1fr; } .plan { border-right: 0; border-bottom: 1px solid var(--rule); } .plan:last-child { border-bottom: 0; } .showcase-rail { display: flex; } .showcase-rail a { flex: 0 0 148px; } .showcase-stage { padding: 20px; } .showcase-head { grid-template-columns: 1fr; gap: 17px; align-items: start; } .showcase-controls { justify-self: start; } .showcase-media { aspect-ratio: 4 / 3; } } @media (max-width: 520px) { .fgrid { grid-template-columns: 1fr; } .steps li { grid-template-columns: 34px 1fr; gap: 14px; } .showcase-stage { padding: 16px; } .showcase-head h2 { font-size: 1.42rem; } .showcase-media { aspect-ratio: 1 / 1; } }