/* Hand-maintained overrides. Loaded AFTER the Webflow export so it survives a re-export, as long as the tag stays in each page's . */ /* Visually hidden but still exposed to screen readers and search engines. Used for the page-level

on layouts whose hero is imagery only. / .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } / The Console demo was a 3.8 MB GIF; it is now an H.264 video, which needs the sizing behaviour Webflow's base stylesheet only gives to . / video.image-7 { display: block; width: 100%; height: auto; } / --------------------------------------------------------------------------- Graffity Maps (/graffity-maps) Sections from the Website V2 Figma. Scoped under .maps-* so they cannot affect the Webflow-exported pages; colours reuse the exported design tokens in :root rather than re-hardcoding hexes. Breakpoints follow the Figma frames: 112px gutter desktop, 40px tablet (<=991px), 16px mobile (<=767px). --------------------------------------------------------------------------- / .maps-hero, .maps-showcase, .maps-features, .maps-split, .maps-tech, .maps-closing-wrap { background-color: var(--_graffity-neutral-colors---graffity-black); padding-left: 112px; padding-right: 112px; } / Hero -------------------------------------------------------------------- / .maps-hero { padding-top: 96px; } .maps-hero-panel { background-image: linear-gradient(180deg, #a2d3d800, #19a6b61a); border-radius: 40px; padding: 64px 16px; text-align: center; } .maps-hero-title { color: #dee3e3; font-family: Comfortaa, sans-serif; font-size: 64px; font-weight: 400; line-height: 1.4; margin: 0; } .maps-hero-title-accent { color: #5ed8de; font-weight: 700; } .maps-hero-lead { color: var(--_graffity-neutral-colors---grey-5); font-family: 'Red Hat Text', sans-serif; font-size: 18px; line-height: 1.5; max-width: 672px; margin: 24px auto 0; } / Buttons ----------------------------------------------------------------- / .maps-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 350px; margin: 32px auto 0; } .maps-button { align-items: center; border-radius: 12px; display: flex; / basis 0 so paired buttons come out exactly equal width, as drawn / flex: 1 0 0%; font-family: 'Red Hat Text', sans-serif; font-size: 16px; font-weight: 500; height: 48px; justify-content: center; line-height: 1.5; min-width: 150px; padding: 16px 24px; text-decoration: none; transition: background-color .2s, color .2s; } .maps-button-primary { background-color: var(--_graffity-primary-colors---seagreen-l); color: var(--_graffity-neutral-colors---graffity-off-white); } .maps-button-primary:hover { background-color: var(--_graffity-primary-colors---seagreen-l1); } .maps-button-outline { border: 1px solid var(--_graffity-primary-colors---seagreen-l); color: var(--_graffity-primary-colors---seagreen-l); } .maps-button-outline:hover { background-color: var(--_graffity-primary-colors---seagreen-l); color: var(--_graffity-neutral-colors---graffity-off-white); } / Full-bleed showcase image ----------------------------------------------- / .maps-showcase { padding-top: 96px; } .maps-showcase-image { border-radius: 24px; display: block; height: auto; width: 100%; } / Shared card furniture --------------------------------------------------- / .maps-icon-tile { align-items: center; background-color: var(--_graffity-primary-colors---seagreen-l1); border-radius: 12px; display: flex; flex: none; height: 48px; justify-content: center; width: 48px; } .maps-icon { display: block; } .maps-card-title { color: var(--_graffity-neutral-colors---graffity-off-white); font-family: 'Red Hat Display', sans-serif; font-size: 24px; font-weight: 600; line-height: 32px; margin: 16px 0 0; } .maps-card-body { color: var(--_graffity-neutral-colors---grey-4); font-family: 'Red Hat Text', sans-serif; font-size: 16px; line-height: 1.5; margin: 16px 0 0; } / Three feature cards ----------------------------------------------------- / .maps-features { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding-top: 96px; } .maps-feature-card { background-color: var(--_graffity-neutral-colors---grey-1); border-radius: 24px; flex: 1 1 300px; min-width: 300px; padding: 24px; } / Split content + phone mockup -------------------------------------------- / .maps-split { align-items: stretch; display: flex; flex-wrap: wrap; gap: 24px; padding-top: 96px; } .maps-split-content { background-color: var(--_graffity-neutral-colors---grey-1); border-radius: 24px; display: flex; flex: 1 1 335px; flex-direction: column; justify-content: center; min-width: 335px; padding: 48px; } .maps-split-title { color: var(--_graffity-neutral-colors---graffity-off-white); font-family: Comfortaa, sans-serif; font-size: 36px; font-weight: 500; line-height: 1.2; margin: 0; } .maps-split-lead { color: var(--_graffity-neutral-colors---grey-5); font-family: 'Red Hat Text', sans-serif; font-size: 16px; line-height: 1.5; margin: 24px 0 0; } .maps-split-list { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 24px 0 0; padding: 0; } .maps-split-item { display: flex; gap: 16px; align-items: flex-start; } .maps-split-icon { display: block; flex: none; margin-top: 4px; } .maps-split-item-title { color: #dee3e3; font-family: 'Red Hat Text', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.5; margin: 0; } .maps-split-item-body { color: #bcc9c9; font-family: 'Red Hat Text', sans-serif; font-size: 16px; line-height: 1.5; margin: 0; } .maps-split-media { background-color: var(--_graffity-primary-colors---seagreen-l); border-radius: 24px; flex: 1 1 335px; min-width: 335px; overflow: hidden; } .maps-split-image { display: block; height: 100%; object-fit: cover; width: 100%; } / Core technology stack --------------------------------------------------- / .maps-tech { padding-top: 80px; } .maps-tech-heading { text-align: center; } .maps-tech-title { color: var(--_graffity-neutral-colors---graffity-white); font-family: Comfortaa, sans-serif; font-size: 40px; font-weight: 600; letter-spacing: -.4px; line-height: 1.4; margin: 0; } .maps-tech-rule { background-color: var(--_graffity-primary-colors---seagreen-l); border-radius: 9999px; height: 4px; margin: 16px auto 0; width: 128px; } .maps-tech-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; } .maps-tech-card { background-color: var(--_graffity-neutral-colors---grey-1); border-radius: 24px; flex: 1 1 300px; min-width: 300px; padding: 24px 24px 40px; } .maps-tech-card-title { color: var(--_graffity-neutral-colors---graffity-white); font-family: 'Red Hat Display', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.5; margin: 24px 0 0; } / Closing call to action -------------------------------------------------- / .maps-closing-wrap { padding-top: 80px; padding-bottom: 40px; } .maps-closing { background-color: var(--_graffity-secondary-colors---darkblue-2); border-radius: 24px; padding: 40px 16px; text-align: center; } .maps-closing-title { color: var(--_graffity-primary-colors---seagreen-l4); font-family: Montserrat, sans-serif; font-size: 30px; font-weight: 400; line-height: 36px; margin: 0; } .maps-closing-lead { color: var(--_graffity-primary-colors---seagreen-l3); font-family: Montserrat, sans-serif; font-size: 20px; line-height: 24px; margin: 8px auto 0; max-width: 700px; } .maps-cta-row-closing { margin-top: 32px; } .maps-store-note { color: var(--_graffity-neutral-colors---grey-4); font-family: 'Red Hat Text', sans-serif; font-size: 14px; line-height: 1.5; margin: 24px 0 0; } .maps-store-row { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 12px; } .maps-store-link { display: block; } .maps-store-badge { display: block; height: 42px; width: auto; } / Tablet ------------------------------------------------------------------ / @media screen and (max-width: 991px) { .maps-hero, .maps-showcase, .maps-features, .maps-split, .maps-tech, .maps-closing-wrap { padding-left: 40px; padding-right: 40px; padding-top: 40px; } .maps-hero-title { font-size: 40px; } .maps-split-content { padding: 32px; } / The mockup is a fixed-ratio render; once stacked it needs its own height rather than stretching to match the text column. / .maps-split-image { height: auto; } } / Mobile ------------------------------------------------------------------ */ @media screen and (max-width: 767px) { .maps-hero, .maps-showcase, .maps-features, .maps-split, .maps-tech, .maps-closing-wrap { padding-left: 16px; padding-right: 16px; } .maps-hero-panel { border-radius: 24px; padding: 40px 16px 16px; } .maps-hero-lead { font-size: 16px; } .maps-showcase-image, .maps-feature-card, .maps-split-content, .maps-split-media, .maps-tech-card, .maps-closing { border-radius: 16px; } .maps-feature-card, .maps-split-content, .maps-split-media, .maps-tech-card { min-width: 0; } .maps-split-content { padding: 24px; } .maps-split-title { font-size: 28px; } .maps-card-body, .maps-split-lead, .maps-split-item-body { font-size: 14px; } .maps-tech-title { font-size: 32px; } .maps-closing-title { font-size: 24px; line-height: 30px; } .maps-closing-lead { font-size: 16px; line-height: 20px; } }