/* cinery — capability-page blocks. Written by tools/capability-donors.mjs out of cinery: only the rules the transplanted blocks use, class names prefixed with `cn-`, every selector scoped under the block's own root class. Do not edit by hand. */ @font-face { font-family: webflow-icons; src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165dc_OverusedGrotesk-SemiBold-BF64eeac17f0443.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165cd_OverusedGrotesk-Roman-BF64eeac18184a5.woff2") format("woff2"), url("../assets/cinery/695c47e4e7da0bba805165ce_OverusedGrotesk-Book-BF64eeac17ce110.woff2") format("woff2"), url("../assets/cinery/695c47e4e7da0bba805165df_OverusedGrotesk-VF-BF64eeac17efb41.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165cc_OverusedGrotesk-Light-BF64eeac17cade6.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165ca_OverusedGrotesk-Bold-BF64eeac17f1b7f.woff2") format("woff2"), url("../assets/cinery/695c47e4e7da0bba805165de_OverusedGrotesk-ExtraBold-BF64eeac17d4c2c.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165dd_OverusedGrotesk-Medium-BF64eeac181a996.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165cb_OverusedGrotesk-Black-BF64eeac181b256.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } .cn-about-projects { --background-color--primary-background: #000; --_typography---font-family--primary: "Overused Grotesk", Arial, sans-serif; --primary-color--white: white; --_sizes---fixed--small: 1rem; --_typography---font-weight--regular: 400; --_typography---h1--h1-font-size: var(--_sizes---fixed--xhuge-04); --_typography---h1--h1-font-weight: var(--_typography---font-weight--semibold); --_typography---h2--h2-font-size: var(--_sizes---fixed--xhuge-03); --_typography---h2--h2-font-weight: var(--_typography---font-weight--semibold); --_typography---h3--h3-font-size: var(--_sizes---fixed--xxlarge-01); --_typography---h3--h3-font-weight: var(--_typography---font-weight--semibold); --_typography---h4--h4-font-size: var(--_sizes---fixed--large-01); --_typography---h4--h4-font-weight: var(--_typography---font-weight--semibold); --_typography---h5--h5-font-size: var(--_sizes---fixed--medium-01); --_typography---h5--h5-font-weight: var(--_typography---font-weight--semibold); --_typography---h6--h6-font-size: var(--_sizes---fixed--small); --_typography---h6--h6-font-weight: var(--_typography---font-weight--semibold); --_typography---font-weight--medium: 500; --primary-color--dark: #232324; --_sizes---fixed--medium-01: 2rem; --primary-color--dark-02: #444; --_typography---h3--h3-font-family: var(--_typography---font-family--primary); --_typography---h3--h3-letter-spacing: .1rem; --_typography---font-weight--semibold: 600; --neutral-color--secondary-neutral: #bbb; --_typography---h5--h5-font-family: var(--_typography---font-family--primary); --_typography---h5--h5-letter-spacing: .025rem; --background-color--secondary-background: white; --primary-color--black: #000; --_typography---h2--h2-font-family: var(--_typography---font-family--primary); --_typography---h2--h2-letter-spacing: .1rem; --_sizes---fixed--small-02: 1.25rem; --border-color--primary-border: #ffffff1a; --_sizes---border-radius--large: 1.5rem; --primary-color--dark-03: #4b4b4b; --_sizes---border-radius--xlarge: 2rem; --_typography---h6--h6-font-family: var(--_typography---font-family--primary); --_typography---h6--h6-letter-spacing: .025rem; --_sizes---fixed--xsmall-04: .75rem; --border-color--transparent: #0000; --_sizes---fixed--small-05: 1.625rem; --_sizes---fixed--small-04: 1.5rem; --_sizes---fixed--small-03: 1.375rem; --neutral-color--primary-neutral: gray; --_sizes---fixed--xsmall-05: .875rem; --_typography---h1--h1-font-family: var(--_typography---font-family--primary); --_typography---h1--h1-letter-spacing: .1rem; --border-color--secondary-border: #fff3; --_typography---h4--h4-font-family: var(--_typography---font-family--primary); --_typography---h4--h4-letter-spacing: .1rem; --_sizes---border-radius--medium: 1rem; --_sizes---border-radius--100: 100%; --_sizes---border-radius--xxlarge: 2.5rem; --_sizes---spacer--xlarge: 4rem; --_typography---font-weight--bold: 700; --_sizes---fixed--medium-02: 2.25rem; --_sizes---fixed--small-07: 1.875rem; --_sizes---spacer--large: 3rem; --_sizes---spacer--medium: 2rem; --_sizes---border-radius--xhuge: 4rem; --_sizes---fixed--small-01: 1.125rem; --_sizes---spacer--tiny: .125rem; --_sizes---spacer--xxsmall: .25rem; --_typography---font-weight--thin: 100; --_typography---font-weight--extra-light: 200; --_typography---font-weight--light: 300; --_typography---font-weight--extra-bold: 800; --_typography---font-weight--black: 900; --_sizes---spacer--xsmall: .5rem; --_sizes---spacer--small: 1rem; --_sizes---spacer--xxlarge: 5rem; --_sizes---spacer--huge: 6rem; --_sizes---spacer--xhuge: 8rem; --_sizes---spacer--xxhuge: 10rem; --_sizes---border-radius--tiny: .125rem; --_sizes---border-radius--xxsmall: .25rem; --_sizes---border-radius--small: .5rem; --_sizes---border-radius--huge: 3rem; --_sizes---border-radius--xxhuge: 5rem; --_sizes---section--small: 3rem; --_sizes---fixed--zero: 0rem; --_sizes---fixed--xsmall-01: .125rem; --_sizes---fixed--xsmall-02: .25rem; --_sizes---fixed--xsmall-03: .5rem; --_sizes---fixed--small-06: 1.75rem; --_sizes---fixed--medium-03: 2.5rem; --_sizes---fixed--medium-04: 2.75rem; --_sizes---fixed--large-01: 3rem; --_sizes---fixed--large-02: 3.25rem; --_sizes---fixed--large-03: 3.5rem; --_sizes---fixed--large-04: 3.75rem; --_sizes---fixed--xlarge-01: 4rem; --_sizes---fixed--xlarge-02: 4.25rem; --_sizes---fixed--xlarge-03: 4.5rem; --_sizes---fixed--xlarge-04: 4.75rem; --_sizes---fixed--xxlarge-01: 5rem; --_sizes---fixed--xxlarge-02: 5.5rem; --_sizes---fixed--xxlarge-03: 6rem; --_sizes---fixed--xxlarge-04: 6.5rem; --_sizes---fixed--huge-01: 7rem; --_sizes---fixed--huge-02: 7.5rem; --_sizes---fixed--huge-03: 8rem; --_sizes---fixed--huge-04: 8.5rem; --_sizes---fixed--xhuge-01: 9rem; --_sizes---fixed--xhuge-02: 9.5rem; --_sizes---fixed--xhuge-03: 10rem; --_sizes---fixed--xhuge-04: 12rem; --_sizes---fixed--xhuge-05: 14rem; --_sizes---fixed--xxhuge-01: 16rem; --_sizes---fixed--xxhuge-02: 18rem; --_sizes---fixed--xxhuge-03: 20rem; --_sizes---section--medium: 5rem; --_sizes---section--large: 8rem; --_sizes---section--xlarge: 10rem; --_sizes---section--huge: 12rem; } .cn-about-projects article, .cn-about-projects aside, .cn-about-projects details, .cn-about-projects figcaption, .cn-about-projects figure, .cn-about-projects footer, .cn-about-projects header, .cn-about-projects hgroup, .cn-about-projects main, .cn-about-projects menu, .cn-about-projects nav, .cn-about-projects section, .cn-about-projects summary { display: block; } .cn-about-projects audio, .cn-about-projects canvas, .cn-about-projects progress, .cn-about-projects video { vertical-align: baseline; display: inline-block; } .cn-about-projects a { background-color: #0000; } .cn-about-projects img { border: 0; } .cn-about-projects img { vertical-align: middle; max-width: 100%; display: inline-block; } .cn-about-projects .w-inline-block { max-width: 100%; display: inline-block; } .cn-about-projects h1, .cn-about-projects h2, .cn-about-projects h3, .cn-about-projects h4, .cn-about-projects h5, .cn-about-projects h6 { margin-bottom: 10px; font-weight: bold; } .cn-about-projects h2 { margin-top: 20px; font-size: 32px; line-height: 36px; } .cn-about-projects p { margin-top: 0; margin-bottom: 10px; } .cn-about-projects .w-embed:before, .cn-about-projects .w-embed:after { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; } .cn-about-projects .w-embed:after { clear: both; } .cn-about-projects .w-background-video { color: #fff; height: 500px; position: relative; overflow: hidden; } .cn-about-projects .w-background-video > video { object-fit: cover; z-index: -100; background-position: 50%; background-size: cover; width: 100%; height: 100%; margin: auto; position: absolute; inset: -100%; } .cn-about-projects .w-background-video > video::-webkit-media-controls-start-playback-button { -webkit-appearance: none; display: none !important; } .cn-about-projects .w-background-video--control { background-color: #0000; padding: 0; position: absolute; bottom: 1em; right: 1em; } .cn-about-projects .w-background-video--control > [hidden] { display: none !important; } .cn-about-projects .w-layout-grid { grid-row-gap: 16px; grid-column-gap: 16px; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; } .cn-about-projects h2 { color: var(--primary-color--white); font-size: var(--_typography---h2--h2-font-size); line-height: var(--_typography---h2--h2-line-height\); font-weight: var(--_typography---h2--h2-font-weight); text-transform: uppercase; margin-top: 0; margin-bottom: 0; } .cn-about-projects p { font-size: var(--_sizes---fixed--small); margin-bottom: 10px; line-height: 1.5; } .cn-about-projects a { color: var(--primary-color--white); font-size: var(--_sizes---fixed--small); font-weight: var(--_typography---font-weight--medium); text-decoration: none; } .cn-about-projects img { max-width: 100%; display: inline-block; } .cn-about-projects .cn-text-color-secondary { color: var(--neutral-color--secondary-neutral); } .cn-about-projects .cn-heading-style-h2 { background-image: linear-gradient(180deg, var(--primary-color--white) 40%, #000 100%, var(--primary-color--black)); font-family: var(--_typography---h2--h2-font-family); font-size: var(--_typography---h2--h2-font-size); line-height: var(--_typography---h2--h2-line-height\); font-weight: var(--_typography---h2--h2-font-weight); letter-spacing: var(--_typography---h2--h2-letter-spacing); text-transform: uppercase; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; } .cn-about-projects .cn-text-size-medium { font-size: var(--_sizes---fixed--small-02); line-height: 1.5; } .cn-about-projects .cn-text-style-allcaps { text-transform: uppercase; } .cn-about-projects .cn-container-large { width: 100%; max-width: 100rem; margin-left: auto; margin-right: auto; } .cn-about-projects .cn-padding-global { padding-left: 2.5rem; padding-right: 2.5rem; } .cn-about-projects .cn-padding-section-large { padding-top: 8rem; padding-bottom: 8rem; } .cn-about-projects .cn-spacer-huge { width: 100%; padding-top: 6rem; } .cn-about-projects .cn-dividing-line { background-color: var(--border-color--primary-border); width: 100%; height: 1px; } .cn-about-projects .number-block.cn-_02 { justify-content: flex-start; align-items: flex-end; } .cn-about-projects .cn-main-button { background-color: var(--primary-color--dark); color: #c7c7c7; border-radius: .875rem; padding: 1rem 2rem; text-decoration: none; transition: all .35s; position: relative; overflow: hidden; } .cn-about-projects .cn-main-button:where(.w-variant-fca1516f-e250-7cd2-f02b-aee258111517) { width: 100%; padding-top: 1.25rem; padding-bottom: 1.25rem; } .cn-about-projects .cn-main-button:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { border-radius: 100%; width: 6rem; height: 6rem; } .cn-about-projects .cn-main-button:hover { transform: scale(.95); } .cn-about-projects .cn-button-border { background-color: var(--primary-color--dark); border-radius: .875rem; position: absolute; inset: 0%; } .cn-about-projects .cn-button-border:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { border-radius: 100%; } .cn-about-projects .cn-border-wrap { justify-content: center; align-items: center; display: flex; position: absolute; inset: 0%; } .cn-about-projects .cn-glow-border { filter: blur(10px); background-color: #b0b0b0; width: 100%; height: 100%; } .cn-about-projects .cn-glow-border.scroll-down { width: 50%; } .cn-about-projects .cn-button-background-01 { background-color: var(--primary-color--dark); border-radius: .875rem; margin: 1px; position: absolute; inset: 0%; } .cn-about-projects .cn-button-background-01:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { border-radius: 100%; margin-top: 0; margin-bottom: 0; } .cn-about-projects .cn-button-background-02 { background-image: linear-gradient(180deg, transparent, var(--primary-color--dark-03)); filter: blur(5px); position: absolute; inset: 0%; } .cn-about-projects .cn-button-background-02:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { border-radius: 100%; } .cn-about-projects .cn-button-text-wrap { flex-flow: column; justify-content: flex-start; align-items: center; height: 1.125rem; display: flex; position: relative; overflow: hidden; } .cn-about-projects .cn-button-text-wrap:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { display: none; } .cn-about-projects .cn-button-text { z-index: 5; color: var(--primary-color--white); font-size: 1rem; line-height: 1.2; font-weight: var(--_typography---font-weight--medium); text-transform: uppercase; white-space: nowrap; margin-bottom: 0; position: relative; } .cn-about-projects .cn-subtitle-wrap { justify-content: center; align-items: flex-start; margin-bottom: 3.5rem; display: flex; } .cn-about-projects .cn-heading-wrap { z-index: 5; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; position: relative; } .cn-about-projects .cn-heading-wrap.is-center { justify-content: flex-start; align-items: center; } .cn-about-projects .cn-top-content-grid { grid-column-gap: 2rem; grid-row-gap: 2rem; grid-template-rows: auto; width: 100%; } .cn-about-projects .cn-subtitle-block { border-style: solid none none solid; border-width: 1px; border-color: var(--primary-color--dark-02); background-color: var(--primary-color--dark); border-radius: 8px; justify-content: center; align-items: center; margin-bottom: 1rem; padding: .5rem 1rem; display: flex; position: relative; overflow: hidden; } .cn-about-projects .cn-subtitle { color: var(--neutral-color--secondary-neutral); font-size: var(--_sizes---fixed--xsmall-04); letter-spacing: .025rem; text-transform: uppercase; line-height: 1; } .cn-about-projects .cn-subtitle-blur { filter: blur(8px); background-color: #232324; width: 1.5rem; height: 1.5rem; position: absolute; } .cn-about-projects .cn-case-study-component { grid-column-gap: 2rem; grid-row-gap: 2rem; perspective: 1000px; flex-flow: column; display: flex; position: relative; } .cn-about-projects .cn-case-study-block { position: relative; } .cn-about-projects .cn-case-study-block.cn-_01 { z-index: 4; } .cn-about-projects .cn-case-study-block.cn-_02 { z-index: 3; } .cn-about-projects .cn-case-study-component-grid { grid-column-gap: 2rem; grid-row-gap: 2rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: grid; } .cn-about-projects .cn-case-arrow-wrap { z-index: 10; cursor: pointer; background-color: #ffffff1a; border: 1px solid #ffffff1a; border-radius: 100px; justify-content: center; align-items: center; width: 4rem; height: 2.5rem; transition: all .35s; display: flex; } .cn-about-projects .cn-case-arrow-wrap:hover { transform: scale(1.1); } .cn-about-projects .cn-case-study-wrapper { border-radius: 1.5rem; position: relative; overflow: hidden; } .cn-about-projects .cn-case-arrow-block { justify-content: flex-start; align-items: center; width: 1rem; height: 1rem; display: flex; position: relative; overflow: hidden; } .cn-about-projects .cn-case-study-item { grid-column-gap: 8px; grid-row-gap: 8px; color: #fff; justify-content: flex-start; align-items: center; display: flex; } .cn-about-projects .cn-case-study-overlay { background-color: #0a0a0a4d; border-radius: 1.25rem; width: 100%; height: 100%; position: absolute; inset: 0%; } .cn-about-projects .cn-video-wrapper { border-radius: 1.25rem; width: 100%; height: 100%; position: relative; overflow: hidden; } .cn-about-projects .cn-case-arrow { color: #fff; justify-content: center; align-items: center; width: 1rem; height: 1rem; display: flex; position: absolute; } .cn-about-projects .cn-case-study-link { border-radius: 1.5rem; width: 100%; } .cn-about-projects .cn-case-study-content-grid { background-color: #70707026; border: 1px solid #70707026; border-radius: 100px; grid-template-rows: auto; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 1rem; padding: 10px 10px 10px 20px; } .cn-about-projects .cn-case-logo { z-index: 10; height: 2.5rem; position: relative; } .cn-about-projects .cn-case-logo-block { flex-flow: column; height: 2.5rem; display: flex; overflow: hidden; } .cn-about-projects .cn-background-glass { grid-column-gap: 2.5rem; grid-row-gap: 2.5rem; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); background-color: #5c5c5c1a; border: 1px solid #ffffff14; flex-direction: column; justify-content: center; align-items: stretch; width: 100%; height: 100%; position: absolute; } .cn-about-projects .cn-background-glass.cn-case-study { border-radius: 1.5rem; } .cn-about-projects .cn-case-study-container { z-index: 2; background-color: var(--border-color--primary-border); border-radius: 1.5rem; padding: 1rem; position: relative; overflow: hidden; } .cn-about-projects .cn-case-logo-wrap { z-index: 5; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0%; overflow: hidden; } .cn-about-projects .cn-case-video { border-radius: 1.25rem; width: 100%; height: 25rem; min-height: 25rem; } .cn-about-projects .client-avatar._03, .cn-about-projects .client-avatar._05, .cn-about-projects .client-avatar.cn-_02 { margin-left: -10px; } .cn-about-projects .cta-circle-wrapper.cn-_02 { height: 96.875rem; margin-top: -1.563rem; transform: scaleX(-1); } .cn-about-projects .cta-video-item.cn-_02 { transform: rotate(15deg)translate(24.375rem, -3.125rem); } .cn-about-projects .cn-title-wrapper { position: relative; overflow: hidden; } .cn-about-projects .cta-button-background.cn-_01 { background-image: radial-gradient(circle, #000, #ffffff26); } .cn-about-projects .cta-button-background.cn-_02 { background-image: radial-gradient(circle, #000, #ffffff40); } .cn-about-projects .scroll-down-background.cn-_02 { background-image: linear-gradient(180deg, var(--border-color--transparent), var(--primary-color--dark-03)); } .cn-about-projects .service-content-block.cn-_02 { background-image: url("../assets/cinery/695fea0be6ff3256aa407acf_pexels-23515909-6664782.jpg.webp"); } .cn-about-projects .cn-case-video-wrapper { border: 1px solid var(--border-color--primary-border); background-color: var(--border-color--primary-border); border-radius: 2rem; width: 100%; height: 100%; padding: 5px; position: relative; overflow: hidden; } .cn-about-projects .cn-case-video-item { object-fit: cover; background-color: #0000; border-radius: 2rem; width: 100%; height: 102%; padding-bottom: 0; display: block; top: -2px; } .cn-about-projects .cn-case-study-grid { grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr; width: 100%; } .cn-about-projects .cn-case-study-content-wrap { border: 1px solid var(--border-color--primary-border); background-color: var(--border-color--primary-border); border-radius: 1.5rem; padding: 5px; } .cn-about-projects .cn-case-study-content-item { background-color: var(--primary-color--dark); border-radius: 1.25rem; flex-flow: row; justify-content: center; align-items: center; padding: 1.5rem; display: flex; } .cn-about-projects .cn-case-study-content-block { grid-column-gap: 10px; grid-row-gap: 10px; text-align: center; flex-flow: row; justify-content: center; align-items: center; display: flex; } .cn-about-projects .cn-case-study-image-wrap { border-radius: 2.25rem; width: 100%; height: 100%; position: relative; overflow: hidden; } @media screen and (min-width: 1280px) { .cn-about-projects .cn-case-logo, .cn-about-projects .cn-case-logo-block { height: 4.5rem; } .cn-about-projects .cn-case-video { height: 28rem; min-height: 28rem; } } @media screen and (min-width: 1440px) { .cn-about-projects .cn-heading-style-h2 { font-size: 12rem; } .cn-about-projects .cn-case-logo, .cn-about-projects .cn-case-logo-block { height: 3rem; } .cn-about-projects .cn-case-video { height: 34rem; min-height: 34rem; } } @media screen and (min-width: 1920px) { .cn-about-projects .cn-case-video { height: 35rem; min-height: 35rem; } } @media screen and (max-width: 991px) { .cn-about-projects { --_sizes---fixed--small: 1rem; --_sizes---fixed--medium-01: 2rem; --_sizes---fixed--small-02: 1.25rem; --_sizes---border-radius--large: 1.5rem; --_sizes---border-radius--xlarge: 2rem; --_sizes---fixed--xsmall-04: .75rem; --_sizes---fixed--small-05: 1.625rem; --_sizes---fixed--small-04: 1.5rem; --_sizes---fixed--small-03: 1.375rem; --_sizes---fixed--xsmall-05: .875rem; --_sizes---border-radius--medium: 1rem; --_sizes---border-radius--100: 100%; --_sizes---border-radius--xxlarge: 2.5rem; --_sizes---spacer--xlarge: 3rem; --_sizes---fixed--medium-02: 2.25rem; --_sizes---fixed--small-07: 1.875rem; --_sizes---spacer--large: 2.5rem; --_sizes---spacer--medium: 1.5rem; --_sizes---border-radius--xhuge: 4rem; --_sizes---fixed--small-01: 1.125rem; --_sizes---spacer--tiny: .125rem; --_sizes---spacer--xxsmall: .25rem; --_sizes---spacer--xsmall: .5rem; --_sizes---spacer--small: 1rem; --_sizes---spacer--xxlarge: 4rem; --_sizes---spacer--huge: 5rem; --_sizes---spacer--xhuge: 6rem; --_sizes---spacer--xxhuge: 8rem; --_sizes---border-radius--tiny: .125rem; --_sizes---border-radius--xxsmall: .25rem; --_sizes---border-radius--small: .5rem; --_sizes---border-radius--huge: 3rem; --_sizes---border-radius--xxhuge: 5rem; --_sizes---section--small: 3rem; --_sizes---fixed--zero: 0rem; --_sizes---fixed--xsmall-01: .125rem; --_sizes---fixed--xsmall-02: .25rem; --_sizes---fixed--xsmall-03: .5rem; --_sizes---fixed--small-06: 1.75rem; --_sizes---fixed--medium-03: 2.5rem; --_sizes---fixed--medium-04: 2.75rem; --_sizes---fixed--large-01: 3rem; --_sizes---fixed--large-02: 3.25rem; --_sizes---fixed--large-03: 3.5rem; --_sizes---fixed--large-04: 3.75rem; --_sizes---fixed--xlarge-01: 4rem; --_sizes---fixed--xlarge-02: 4.25rem; --_sizes---fixed--xlarge-03: 4.5rem; --_sizes---fixed--xlarge-04: 4.75rem; --_sizes---fixed--xxlarge-01: 5rem; --_sizes---fixed--xxlarge-02: 5.5rem; --_sizes---fixed--xxlarge-03: 6rem; --_sizes---fixed--xxlarge-04: 6.5rem; --_sizes---fixed--huge-01: 7rem; --_sizes---fixed--huge-02: 7.5rem; --_sizes---fixed--huge-03: 8rem; --_sizes---fixed--huge-04: 8.5rem; --_sizes---fixed--xhuge-01: 9rem; --_sizes---fixed--xhuge-02: 9.5rem; --_sizes---fixed--xhuge-03: 10rem; --_sizes---fixed--xhuge-04: 12rem; --_sizes---fixed--xhuge-05: 14rem; --_sizes---fixed--xxhuge-01: 16rem; --_sizes---fixed--xxhuge-02: 18rem; --_sizes---fixed--xxhuge-03: 20rem; --_sizes---section--medium: 5rem; --_sizes---section--large: 8rem; --_sizes---section--xlarge: 10rem; --_sizes---section--huge: 12rem; --_typography---font-family--primary: "Overused Grotesk", Arial, sans-serif; --_typography---font-weight--regular: 400; --_typography---h1--h1-font-size: var(--_sizes---fixed--xhuge-03); --_typography---h1--h1-font-weight: var(--_typography---font-weight--semibold); --_typography---h2--h2-font-size: var(--_sizes---fixed--huge-03); --_typography---h2--h2-font-weight: var(--_typography---font-weight--semibold); --_typography---h3--h3-font-size: var(--_sizes---fixed--large-03); --_typography---h3--h3-font-weight: var(--_typography---font-weight--semibold); --_typography---h4--h4-font-size: var(--_sizes---fixed--large-01); --_typography---h4--h4-font-weight: var(--_typography---font-weight--semibold); --_typography---h5--h5-font-size: var(--_sizes---fixed--small-04); --_typography---h5--h5-font-weight: var(--_typography---font-weight--semibold); --_typography---h6--h6-font-size: var(--_sizes---fixed--small); --_typography---h6--h6-font-weight: var(--_typography---font-weight--semibold); --_typography---font-weight--medium: 500; --_typography---h3--h3-font-family: var(--_typography---font-family--primary); --_typography---h3--h3-letter-spacing: .1rem; --_typography---font-weight--semibold: 600; --_typography---h5--h5-font-family: var(--_typography---font-family--primary); --_typography---h5--h5-letter-spacing: .025rem; --_typography---h2--h2-font-family: var(--_typography---font-family--primary); --_typography---h2--h2-letter-spacing: .1rem; --_typography---h6--h6-font-family: var(--_typography---font-family--primary); --_typography---h6--h6-letter-spacing: .025rem; --_typography---h1--h1-font-family: var(--_typography---font-family--primary); --_typography---h1--h1-letter-spacing: .1rem; --_typography---h4--h4-font-family: var(--_typography---font-family--primary); --_typography---h4--h4-letter-spacing: .1rem; --_typography---font-weight--bold: 700; --_typography---font-weight--thin: 100; --_typography---font-weight--extra-light: 200; --_typography---font-weight--light: 300; --_typography---font-weight--extra-bold: 800; --_typography---font-weight--black: 900; } .cn-about-projects .cn-spacer-huge { padding-top: 5rem; } .cn-about-projects .cn-case-study-component-grid { grid-template-columns: 1fr; } .cn-about-projects .cn-case-video { height: 30rem; min-height: 30rem; } .cn-about-projects .service-bg-image._04, .cn-about-projects .service-bg-image.cn-_02, .cn-about-projects .service-bg-image._03 { display: none; } .cn-about-projects .cn-case-study-grid { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 767px) { .cn-about-projects { --_sizes---fixed--small: 1rem; --_sizes---fixed--medium-01: 2rem; --_sizes---fixed--small-02: 1.25rem; --_sizes---border-radius--large: 1.25rem; --_sizes---border-radius--xlarge: 1.5rem; --_sizes---fixed--xsmall-04: .75rem; --_sizes---fixed--small-05: 1.625rem; --_sizes---fixed--small-04: 1.5rem; --_sizes---fixed--small-03: 1.375rem; --_sizes---fixed--xsmall-05: .875rem; --_sizes---border-radius--medium: 1rem; --_sizes---border-radius--100: 100%; --_sizes---border-radius--xxlarge: 2rem; --_sizes---spacer--xlarge: 2rem; --_sizes---fixed--medium-02: 2.25rem; --_sizes---fixed--small-07: 1.875rem; --_sizes---spacer--large: 1.5rem; --_sizes---spacer--medium: 1.25rem; --_sizes---border-radius--xhuge: 3rem; --_sizes---fixed--small-01: 1.125rem; --_sizes---spacer--tiny: .125rem; --_sizes---spacer--xxsmall: .25rem; --_sizes---spacer--xsmall: .5rem; --_sizes---spacer--small: 1rem; --_sizes---spacer--xxlarge: 2.5rem; --_sizes---spacer--huge: 3rem; --_sizes---spacer--xhuge: 4rem; --_sizes---spacer--xxhuge: 5rem; --_sizes---border-radius--tiny: .125rem; --_sizes---border-radius--xxsmall: .25rem; --_sizes---border-radius--small: .5rem; --_sizes---border-radius--huge: 2.5rem; --_sizes---border-radius--xxhuge: 4rem; --_sizes---section--small: 3rem; --_sizes---fixed--zero: 0rem; --_sizes---fixed--xsmall-01: .125rem; --_sizes---fixed--xsmall-02: .25rem; --_sizes---fixed--xsmall-03: .5rem; --_sizes---fixed--small-06: 1.75rem; --_sizes---fixed--medium-03: 2.5rem; --_sizes---fixed--medium-04: 2.75rem; --_sizes---fixed--large-01: 3rem; --_sizes---fixed--large-02: 3.25rem; --_sizes---fixed--large-03: 3.5rem; --_sizes---fixed--large-04: 3.75rem; --_sizes---fixed--xlarge-01: 4rem; --_sizes---fixed--xlarge-02: 4.25rem; --_sizes---fixed--xlarge-03: 4.5rem; --_sizes---fixed--xlarge-04: 4.75rem; --_sizes---fixed--xxlarge-01: 5rem; --_sizes---fixed--xxlarge-02: 5.5rem; --_sizes---fixed--xxlarge-03: 6rem; --_sizes---fixed--xxlarge-04: 6.5rem; --_sizes---fixed--huge-01: 7rem; --_sizes---fixed--huge-02: 7.5rem; --_sizes---fixed--huge-03: 8rem; --_sizes---fixed--huge-04: 8.5rem; --_sizes---fixed--xhuge-01: 9rem; --_sizes---fixed--xhuge-02: 9.5rem; --_sizes---fixed--xhuge-03: 10rem; --_sizes---fixed--xhuge-04: 12rem; --_sizes---fixed--xhuge-05: 14rem; --_sizes---fixed--xxhuge-01: 16rem; --_sizes---fixed--xxhuge-02: 18rem; --_sizes---fixed--xxhuge-03: 20rem; --_sizes---section--medium: 5rem; --_sizes---section--large: 8rem; --_sizes---section--xlarge: 10rem; --_sizes---section--huge: 12rem; --_typography---font-family--primary: "Overused Grotesk", Arial, sans-serif; --_typography---font-weight--regular: 400; --_typography---h1--h1-font-size: var(--_sizes---fixed--huge-03); --_typography---h1--h1-font-weight: var(--_typography---font-weight--semibold); --_typography---h2--h2-font-size: var(--_sizes---fixed--xxlarge-03); --_typography---h2--h2-font-weight: var(--_typography---font-weight--semibold); --_typography---h3--h3-font-size: var(--_sizes---fixed--large-01); --_typography---h3--h3-font-weight: var(--_typography---font-weight--semibold); --_typography---h4--h4-font-size: var(--_sizes---fixed--medium-03); --_typography---h4--h4-font-weight: var(--_typography---font-weight--semibold); --_typography---h5--h5-font-size: var(--_sizes---fixed--small-02); --_typography---h5--h5-font-weight: var(--_typography---font-weight--semibold); --_typography---h6--h6-font-size: var(--_sizes---fixed--small); --_typography---h6--h6-font-weight: var(--_typography---font-weight--semibold); --_typography---font-weight--medium: 500; --_typography---h3--h3-font-family: var(--_typography---font-family--primary); --_typography---h3--h3-letter-spacing: .1rem; --_typography---font-weight--semibold: 600; --_typography---h5--h5-font-family: var(--_typography---font-family--primary); --_typography---h5--h5-letter-spacing: .025rem; --_typography---h2--h2-font-family: var(--_typography---font-family--primary); --_typography---h2--h2-letter-spacing: .1rem; --_typography---h6--h6-font-family: var(--_typography---font-family--primary); --_typography---h6--h6-letter-spacing: .025rem; --_typography---h1--h1-font-family: var(--_typography---font-family--primary); --_typography---h1--h1-letter-spacing: .1rem; --_typography---h4--h4-font-family: var(--_typography---font-family--primary); --_typography---h4--h4-letter-spacing: .1rem; --_typography---font-weight--bold: 700; --_typography---font-weight--thin: 100; --_typography---font-weight--extra-light: 200; --_typography---font-weight--light: 300; --_typography---font-weight--extra-bold: 800; --_typography---font-weight--black: 900; } .cn-about-projects h1, .cn-about-projects h2 { font-size: 2rem; } .cn-about-projects .cn-padding-global { padding-left: 1.25rem; padding-right: 1.25rem; } .cn-about-projects .cn-padding-section-large { padding-top: 6rem; padding-bottom: 6rem; } .cn-about-projects .number-block.cn-_02, .cn-about-projects .number-block.cn-_01 { justify-content: flex-start; align-items: center; } .cn-about-projects .cn-case-logo, .cn-about-projects .cn-case-logo-block { height: 2rem; } .cn-about-projects .cn-case-video { height: 22rem; min-height: 22rem; } .cn-about-projects .cta-circle-wrapper.cn-_02 { height: 856px; } .cn-about-projects .cta-video-item.cn-_02 { transform: rotate(15deg)translate(13.438rem, -1.563rem); } .cn-about-projects .cn-case-video-wrapper, .cn-about-projects .cn-case-video-item { border-radius: 1.25rem; } .cn-about-projects .client-image, .cn-about-projects .cn-case-study-image-wrap { border-radius: 1.75rem; } } @media screen and (max-width: 479px) { .cn-about-projects { --_sizes---fixed--small: 1rem; --_sizes---fixed--medium-01: 2rem; --_sizes---fixed--small-02: 1.25rem; --_sizes---border-radius--large: 1.25rem; --_sizes---border-radius--xlarge: 1.5rem; --_sizes---fixed--xsmall-04: .75rem; --_sizes---fixed--small-05: 1.625rem; --_sizes---fixed--small-04: 1.5rem; --_sizes---fixed--small-03: 1.375rem; --_sizes---fixed--xsmall-05: .875rem; --_sizes---border-radius--medium: 1rem; --_sizes---border-radius--100: 100%; --_sizes---border-radius--xxlarge: 2rem; --_sizes---spacer--xlarge: 2rem; --_sizes---fixed--medium-02: 2.25rem; --_sizes---fixed--small-07: 1.875rem; --_sizes---spacer--large: 1.5rem; --_sizes---spacer--medium: 1.25rem; --_sizes---border-radius--xhuge: 3rem; --_sizes---fixed--small-01: 1.125rem; --_sizes---spacer--tiny: .125rem; --_sizes---spacer--xxsmall: .25rem; --_sizes---spacer--xsmall: .5rem; --_sizes---spacer--small: 1rem; --_sizes---spacer--xxlarge: 2.5rem; --_sizes---spacer--huge: 3rem; --_sizes---spacer--xhuge: 4rem; --_sizes---spacer--xxhuge: 5rem; --_sizes---border-radius--tiny: .125rem; --_sizes---border-radius--xxsmall: .25rem; --_sizes---border-radius--small: .5rem; --_sizes---border-radius--huge: 2.5rem; --_sizes---border-radius--xxhuge: 4rem; --_sizes---section--small: 3rem; --_sizes---fixed--zero: 0rem; --_sizes---fixed--xsmall-01: .125rem; --_sizes---fixed--xsmall-02: .25rem; --_sizes---fixed--xsmall-03: .5rem; --_sizes---fixed--small-06: 1.75rem; --_sizes---fixed--medium-03: 2.5rem; --_sizes---fixed--medium-04: 2.75rem; --_sizes---fixed--large-01: 3rem; --_sizes---fixed--large-02: 3.25rem; --_sizes---fixed--large-03: 3.5rem; --_sizes---fixed--large-04: 3.75rem; --_sizes---fixed--xlarge-01: 4rem; --_sizes---fixed--xlarge-02: 4.25rem; --_sizes---fixed--xlarge-03: 4.5rem; --_sizes---fixed--xlarge-04: 4.75rem; --_sizes---fixed--xxlarge-01: 5rem; --_sizes---fixed--xxlarge-02: 5.5rem; --_sizes---fixed--xxlarge-03: 6rem; --_sizes---fixed--xxlarge-04: 6.5rem; --_sizes---fixed--huge-01: 7rem; --_sizes---fixed--huge-02: 7.5rem; --_sizes---fixed--huge-03: 8rem; --_sizes---fixed--huge-04: 8.5rem; --_sizes---fixed--xhuge-01: 9rem; --_sizes---fixed--xhuge-02: 9.5rem; --_sizes---fixed--xhuge-03: 10rem; --_sizes---fixed--xhuge-04: 12rem; --_sizes---fixed--xhuge-05: 14rem; --_sizes---fixed--xxhuge-01: 16rem; --_sizes---fixed--xxhuge-02: 18rem; --_sizes---fixed--xxhuge-03: 20rem; --_sizes---section--medium: 5rem; --_sizes---section--large: 8rem; --_sizes---section--xlarge: 10rem; --_sizes---section--huge: 12rem; --_typography---font-family--primary: "Overused Grotesk", Arial, sans-serif; --_typography---font-weight--regular: 400; --_typography---h1--h1-font-size: var(--_sizes---fixed--xlarge-01); --_typography---h1--h1-font-weight: var(--_typography---font-weight--semibold); --_typography---h2--h2-font-size: var(--_sizes---fixed--large-03); --_typography---h2--h2-font-weight: var(--_typography---font-weight--semibold); --_typography---h3--h3-font-size: var(--_sizes---fixed--medium-03); --_typography---h3--h3-font-weight: var(--_typography---font-weight--semibold); --_typography---h4--h4-font-size: var(--_sizes---fixed--medium-01); --_typography---h4--h4-font-weight: var(--_typography---font-weight--semibold); --_typography---h5--h5-font-size: var(--_sizes---fixed--small); --_typography---h5--h5-font-weight: var(--_typography---font-weight--semibold); --_typography---h6--h6-font-size: var(--_sizes---fixed--xsmall-04); --_typography---h6--h6-font-weight: var(--_typography---font-weight--semibold); --_typography---font-weight--medium: 500; --_typography---h3--h3-font-family: var(--_typography---font-family--primary); --_typography---h3--h3-letter-spacing: .1rem; --_typography---font-weight--semibold: 600; --_typography---h5--h5-font-family: var(--_typography---font-family--primary); --_typography---h5--h5-letter-spacing: .025rem; --_typography---h2--h2-font-family: var(--_typography---font-family--primary); --_typography---h2--h2-letter-spacing: .1rem; --_typography---h6--h6-font-family: var(--_typography---font-family--primary); --_typography---h6--h6-letter-spacing: .025rem; --_typography---h1--h1-font-family: var(--_typography---font-family--primary); --_typography---h1--h1-letter-spacing: .1rem; --_typography---h4--h4-font-family: var(--_typography---font-family--primary); --_typography---h4--h4-letter-spacing: .1rem; --_typography---font-weight--bold: 700; --_typography---font-weight--thin: 100; --_typography---font-weight--extra-light: 200; --_typography---font-weight--light: 300; --_typography---font-weight--extra-bold: 800; --_typography---font-weight--black: 900; } .cn-about-projects h2 { font-size: 1.75rem; } .cn-about-projects .cn-padding-section-large { padding-top: 5rem; padding-bottom: 5rem; } .cn-about-projects .cn-spacer-huge { padding-top: 3.5rem; } .cn-about-projects .roll-number.cn-_02, .cn-about-projects .roll-number.cn-_01 { height: 20vw; min-height: 20vw; } .cn-about-projects .cn-case-study-component, .cn-about-projects .cn-case-study-component-grid { grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; } .cn-about-projects .cn-case-logo, .cn-about-projects .cn-case-logo-block { height: 2rem; } .cn-about-projects .cn-background-glass { grid-row-gap: 1.5rem; border-radius: 1.75rem; min-width: 0; } .cn-about-projects .cn-case-study-container { padding: .75rem; } .cn-about-projects .cn-case-video { height: 12rem; min-height: 12rem; } .cn-about-projects .cn-case-video-wrapper { border-radius: 1rem; } .cn-about-projects .cn-case-video-item, .cn-about-projects .video-wrap { border-radius: .875rem; } .cn-about-projects .cn-case-study-grid { grid-template-columns: 1fr; } } /* cn-about-projects: the donor painted this ground on ; the block needs it itself. */ .cn-about-projects { background-color: #000; } /* ---- cn-about-projects: hand-written, from tools/blocks/cn-about-projects.css ---- */ /* cn-about-projects — only what the cut could not carry out of cinery. Four kinds of thing live here, and nothing else: 1. the grid placement cinery wrote against Webflow's generated `#w-node-…` ids, which are not classes and so are invisible to a class-driven extractor; 2. cinery's declarations, which never travel with a cut section, plus the one heading token whose variable name Webflow left escaped; 3. two properties this site's own `p` rule adds and cinery's does not, and which therefore leak onto both copies of the button label; 4. one ix3 (GSAP) timeline — the button label's roll — which tools/donor-lib.mjs cannot carry, replayed with the donor's own numbers. Everything in 1–3 is copied verbatim from tools/templates/cinery/css/cinery.app.shared.3e3418b8f.css and scoped under the block root exactly as the extractor scopes its own output. Nothing here sets a size, colour, spacing or layout the donor did not already set. WHAT IS NOT HERE, and why, so the next reader does not go looking: · no placement rule. ro-gallery.css has one because that block is dropped into a `position: relative` hero band; this one is a full-width `
` in normal flow, and the About page's own container (`.lx-scope { display: block; width: 100% }`, css/stargo-fusion.css:137) gives it the whole page width, which is what cinery gives it too. Same note as tools/blocks/cn-about.css, the band above this one. · no background. `donor.ground` in tools/blocks/cn-about-projects.mjs already writes cinery's `body` black onto the block root — the section itself carries no rule at all in cinery's sheet — so nothing is painted twice. · no `isolation: isolate`. cn-service.css needs it because moving cinery's body black onto a block root that is not a stacking context let that block's `z-index: -1` photograph layer escape to the document root and be painted over. Nothing in this cut is behind the ground: the four glass panels are plain `position: absolute` with no z-index, and every other layer here is positive (`.case-study-container` 2, `.case-logo-wrap` 5, `.case-logo` and `.case-arrow-wrap` 10, `.heading-wrap` 5, `.case-study-block._01` 4, `._02` 3). · no rule for the four tiles' stills. Since 2026-09-15 each tile draws an `` where cinery played a case-study film (see WHAT THE PICTURES ARE in tools/blocks/cn-about-projects.mjs), and the one rule that needs — `.w-background-video > img.stargo-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }` — is already in css/stargo-fusion.css:190, written for the homepage's OS theatre and loaded by about.html. The box around it is cinery's own and unchanged: `.cn-case-video.w-background-video` keeps its heights, its `position: relative; overflow: hidden` and the layers over it. Restating any of that here would be a second copy of a shared rule, not placement. · no size or wrapping rule for the tile line. The three text slots sit in a `1fr 1fr` pill whose tracks carry automatic minimums, so the line takes the width it needs and the 4rem arrow keeps its own; the module holds the words inside that measure instead (see THE TWO SLOTS THAT ARE LEFT EMPTY in tools/blocks/cn-about-projects.mjs). · no replay of the heading's rise. See section 4. */ /* ------------------------------------------- 1. the #w-node grid rules -- */ /* Webflow puts an element's grid position on a generated `#w-node-…` id, not on a class, so the extractor never sees these. There are ten in this cut, and without them two things go wrong. The top row: `.top-content-grid` is Webflow's default `1fr 1fr`, and the button's cell is the donor's only `place-self` — without it the button sits at the TOP LEFT of the right-hand cell instead of bottom right, i.e. level with the eyebrow pill rather than with the baseline of the second heading line. Below 992 the two ids swap the grid into one column and put the button on its own row underneath, left aligned; without them the heading and the button stay side by side in two half-width columns on a phone, where the heading alone needs the full width. The four tiles: each pill is a `1fr 1fr` grid holding the name line and the arrow. `place-self: center start` / `center end` is what puts the name at the left end of the pill and the arrow at the right end, both on its centre line; without them both stretch to fill their track and the arrow lands in the middle of the pill's right half instead of at its edge. Donor rules, in donor order, at the donor's own breakpoints. */ .cn-about-projects #w-node-_43f5e317-c160-f6d4-e9e7-62114ae2cf9a-805165a1 { place-self: end; } .cn-about-projects #w-node-fb6f08c0-bccf-aeab-a33d-45198963fe7b-8963fe69 { place-self: center start; } .cn-about-projects #w-node-fb6f08c0-bccf-aeab-a33d-45198963fe80-8963fe69 { place-self: center end; } .cn-about-projects #w-node-fb6f08c0-bccf-aeab-a33d-45198963fe97-8963fe69 { place-self: center start; } .cn-about-projects #w-node-fb6f08c0-bccf-aeab-a33d-45198963fe9c-8963fe69 { place-self: center end; } .cn-about-projects #w-node-fb6f08c0-bccf-aeab-a33d-45198963feb5-8963fe69 { place-self: center start; } .cn-about-projects #w-node-fb6f08c0-bccf-aeab-a33d-45198963feba-8963fe69 { place-self: center end; } .cn-about-projects #w-node-fb6f08c0-bccf-aeab-a33d-45198963fed1-8963fe69 { place-self: center start; } .cn-about-projects #w-node-fb6f08c0-bccf-aeab-a33d-45198963fed6-8963fe69 { place-self: center end; } /* cinery restates these two at all three of its breakpoints, identically each time; they are repeated here the same way rather than collapsed into one `max-width: 991px` block, so the file reads against the donor's sheet line for line. */ @media screen and (max-width: 991px) { .cn-about-projects #w-node-a34212dd-4694-ed9f-e5b4-34cde67cdd13-805165a1 { grid-area: 1 / 1 / 2 / 3; } .cn-about-projects #w-node-_43f5e317-c160-f6d4-e9e7-62114ae2cf9a-805165a1 { grid-area: 2 / 1 / 3 / 3; justify-self: start; } } @media screen and (max-width: 767px) { .cn-about-projects #w-node-a34212dd-4694-ed9f-e5b4-34cde67cdd13-805165a1 { grid-area: 1 / 1 / 2 / 3; } .cn-about-projects #w-node-_43f5e317-c160-f6d4-e9e7-62114ae2cf9a-805165a1 { grid-area: 2 / 1 / 3 / 3; justify-self: start; } } @media screen and (max-width: 479px) { .cn-about-projects #w-node-a34212dd-4694-ed9f-e5b4-34cde67cdd13-805165a1 { grid-area: 1 / 1 / 2 / 3; } .cn-about-projects #w-node-_43f5e317-c160-f6d4-e9e7-62114ae2cf9a-805165a1 { grid-area: 2 / 1 / 3 / 3; justify-self: start; } } /* --------------------------------------------- 2. what supplied -- */ /* The h2 line-height token whose name Webflow left escaped (`--_typography---h2--h2-line-height\`). The extractor's `:root` scan reads `--[\w-]+` names only — the backslash stops the match before the colon — so the one token both of this block's heading rules ask for never arrives: .heading-style-h2 { line-height: var(--_typography---h2--h2-line-height\<…\>); } h2 { line-height: var(--_typography---h2--h2-line-height\<…\>); } With it undefined the declaration is invalid at computed-value time and the h2 falls back to the inherited leading. That matters twice over here: the gradient is painted with `background-clip: text` over the element box, so a taller box stretches it; and each line sits inside a `.title-wrapper` whose `overflow: hidden` is exactly as tall as the line it holds, which is what the donor's line reveal is masked by. cinery declares it `100%` on `:root` and restates it as `100%` at each of its three breakpoints, so one unconditional declaration is what the donor computes at every width. The other five heading tokens cinery escapes the same way are not restored: this block has no h1, h3, h4, h5 or h6. Same repair, same reason, as cn-service.css and cn-produce.css. */ .cn-about-projects { --_typography---h2--h2-line-height\: 100%; } /* cinery's own `body` rule, restated on the block root. A cut section never brings along, so without this the block inherits the About page's own body instead. Donor rule, verbatim: body { background-color: var(--background-color--primary-background); font-family: var(--_typography---font-family--primary); color: var(--primary-color--white); font-size: var(--_sizes---fixed--small); line-height: 1.4; font-weight: var(--_typography---font-weight--regular); } `background-color` is the one declaration left out: `donor.ground` already paints the block root with the same `#000` that variable resolves to. What the block would inherit instead, from Mono (css/monof-template.app.shared.ed8969994.css), which is the shell the About page is built in: body { font-family: var(--font--primary-font); Inter, sans-serif color: var(--color--second-color); #000 font-size: var(--button--font-size); 14px line-height: var(--line-height--page-line-height); 1.1 font-weight: var(--font-weight--500); 500 cursor: none } (`cursor: none` is the sixth and is deliberately not restated: css/stargo-fusion.css:138 already hands the pointer back to every `a`, `button` and `[role="button"]` inside `.lx-scope`, and the five links in this block are all `a`.) `color` is not cosmetic here. Two of the block's slots name no colour of their own — `.cn-button-text` and `.cn-subtitle`'s inherited box — and the button they sit in is `--primary-color--dark` (#232324). Mono's #000 on #232324 is 1.34:1 by WCAG relative luminance ((L+.05)/(l+.05), with #232324 at 0.01685): the label would be, in practice, invisible. cinery's `--primary-color--white` gives 15.71:1 on the same button. (The four tile lines are safe either way — `.case-study-item` sets `color: #fff` itself — which is exactly why the failure would have shipped unnoticed.) `font-family` is the other one that matters: nothing inside this cut names a font except `.cn-heading-style-h2`, so the eyebrow, both button labels and all four tile lines would be set in Inter rather than the Overused Grotesk the extractor already mirrored into assets/cinery/ and declared with cinery's own `@font-face` rules — and Inter draws cinery's uppercase about 15% wider, which is the measurement the module's width budgets are written against. `font-size`, `line-height` and `font-weight` come with them because they are one rule in the donor and because anything sized in `em` inside the block resolves against them. */ .cn-about-projects { font-family: var(--_typography---font-family--primary); color: var(--primary-color--white); font-size: var(--_sizes---fixed--small); line-height: 1.4; font-weight: var(--_typography---font-weight--regular); } /* --------------------------------------------- 3. what our `p` rule adds -- */ /* cinery's two `p` rules are `{ margin-top; margin-bottom }` and `{ font-size; margin-bottom; line-height }` — nothing else, so a cinery paragraph is opaque and tracks normally. Mono's is p { opacity: .7; font-size: var(--font--work-title); line-height: var(--line-height--paragraph-line-height); font-weight: var(--font-weight--500); letter-spacing: -.5px; margin-bottom: 10px; } and of those six, four have a counterpart in the extracted rules and two do not. So `opacity: .7` and `letter-spacing: -.5px` leak straight through onto the only two `

` this block has — the two stacked copies of the button label — dimming type cinery draws at full strength and pulling the tracking in by half a pixel per character inside a window that is exactly one line high. Put back what the donor computes. Same repair cn-service.css and cn-about.css make, for the same reason. */ .cn-about-projects p { opacity: 1; letter-spacing: normal; } /* ------------------------------ 4. the motion the cut leaves behind ------- */ /* cinery drives this section four ways. Three of them arrive on their own and are listed in tools/blocks/cn-about-projects.mjs: the eyebrow pill's blur loop (IX2 e-225/e-226 → a-33), the second block's scroll parallax (e-227 → a-34) and each tile's hover (e-228/e-229 → a-35/a-36, four times), together with the plain css `.case-arrow-wrap:hover { transform: scale(1.1) }` and `.main-button:hover { transform: scale(.95) }`, which the extractor takes with everything else. The fourth does not, and this is it: the button LABEL's roll. interaction i-84a682e6 trigger wf:hover on class `main-button` (controlType "standard", pluginConfig { type: "mouseenter", hover: "each" }) timeline t-bf9e6807 ta-4d1b04ff targets `.button-text` within the trigger; timing { duration: .4, position: 0, stagger: { amount: .4 }, ease: 12 }; properties { "wf:transform": { yPercent: [null, "-100%"] } }; splitText { type: "chars" } Read out of tools/templates/cinery/js/app.9d009f54.b1680441e3b493e5.js. Ease 12 is index 12 of the ix3 runtime's own table in js/app.schunk.25099a4fefa544e6.js — ["none","power1.in","power1.out", "power1.inOut","power2.in","power2.out","power2.inOut","power3.in",…] — i.e. gsap `power4.inOut`, which is quintic in-out. Why it cannot travel: ix3 is GSAP data and donor-lib returns `{events, actionLists}` (IX2) only. This site ships the ix3 runtime but registers no interactions with it — no file under js/ calls `ix3.getInstance().register([…])` — so no donor timeline fires. The real fix is in tools/donor-lib.mjs and tools/fuse-ix.mjs, shared files this block may not edit; tools/blocks/cn-about.css and tools/blocks/cn-produce.css carry the same note for the same reason. WHAT THE DONOR'S GEOMETRY IS. `.button-text-wrap` is `flex-flow: column; justify-content: flex-start; height: 1.125rem; overflow: hidden` — an 18px window — and it holds TWO `.button-text` copies at `font-size: 1rem; line-height: 1.2`, i.e. 19.2px each. (They do not shrink to fit: an overflow-hidden flex item keeps its automatic minimum size, which here is its own line box.) At rest the first copy fills the window and the second sits below it, clipped. `yPercent: -100%` lifts both by 19.2px: the first leaves through the top, the second takes its place. cn-about-projects.mjs writes the same words into both copies precisely because of this — write one and the hover shows the donor's "Explore More". WHAT IS REDUCED. The donor splits the label into characters and staggers them across 0.4s, so its roll runs 0.8s end to end. Splitting characters means rewriting the label into spans at runtime, which is DOM structure, and the brief is 「仅仅针对文字进行改动」 — so the label rolls as one piece here and the roll takes the action's own 0.4s. Nothing else changes: same trigger, same direction, same distance, same easing, same window. WHY A TRANSITION AND NOT @keyframes. Webflow's hover timeline with `hover: "each"` plays forward on mouseenter and back on mouseleave. A one-shot keyframe animation cannot come back; a transition does exactly this, in both directions, for free. THE EASING. `cubic-bezier(.84, 0, .16, 1)` is the bezier nearest quintic in-out — max deviation 0.0305 of the travel, which over a 19.2px roll is 0.59px, i.e. under a device pixel at 1x. tools/blocks/ro-gallery.css fitted and measured the same curve for the same ease index. */ .cn-about-projects .cn-main-button .cn-button-text { transition: transform .4s cubic-bezier(.84, 0, .16, 1); } .cn-about-projects .cn-main-button:hover .cn-button-text { transform: translateY(-100%); } /* The heading's own arrival — ix3 timeline `t-864fc814`, fired by `i-9f439e20` on `.heading-wrap` at "top 85%", playing once, which brings `.top-title` and `.bottom-title` up from y 110% behind their masks 0.3s apart — is NOT replayed here. It needs something to notice that the band has scrolled into view, i.e. an observer, i.e. a script, and this block ships none; tools/blocks/cn-produce.js is what that costs, and cn-service, which draws the same two masked lines out of the same donor, does not replay it either. Nothing in this file hides the heading, so both lines simply stand where cinery draws them, at rest — the same guarantee cn-about.css writes down for the paragraph reveal it cannot replay in css. If the heading's rise is ever wanted here, it is cn-produce.css's three rules plus cn-produce.js's observer with `cn-produce` renamed, and about.html then has to link js/capability-blocks.js as well as css/cinery.cn2.css. */ /* A reader who has asked their system for less motion gets the block as it is drawn — the four clips, the marks, the pill, every word in place, nothing sliding. The label still swaps for its identical twin, instantly, so no word is lost. Same line js/stargo-pricing.js, js/stargo-media.js, tools/blocks/cn-produce.css and tools/blocks/cn-about.css already take. */ @media (prefers-reduced-motion: reduce) { .cn-about-projects .cn-main-button .cn-button-text { transition: none; } } @font-face { font-family: webflow-icons; src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165dc_OverusedGrotesk-SemiBold-BF64eeac17f0443.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165cd_OverusedGrotesk-Roman-BF64eeac18184a5.woff2") format("woff2"), url("../assets/cinery/695c47e4e7da0bba805165ce_OverusedGrotesk-Book-BF64eeac17ce110.woff2") format("woff2"), url("../assets/cinery/695c47e4e7da0bba805165df_OverusedGrotesk-VF-BF64eeac17efb41.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165cc_OverusedGrotesk-Light-BF64eeac17cade6.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165ca_OverusedGrotesk-Bold-BF64eeac17f1b7f.woff2") format("woff2"), url("../assets/cinery/695c47e4e7da0bba805165de_OverusedGrotesk-ExtraBold-BF64eeac17d4c2c.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165dd_OverusedGrotesk-Medium-BF64eeac181a996.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Overused Grotesk; src: url("../assets/cinery/695c47e4e7da0bba805165cb_OverusedGrotesk-Black-BF64eeac181b256.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } .cn-about-reviews { --background-color--primary-background: #000; --_typography---font-family--primary: "Overused Grotesk", Arial, sans-serif; --primary-color--white: white; --_sizes---fixed--small: 1rem; --_typography---font-weight--regular: 400; --_typography---h1--h1-font-size: var(--_sizes---fixed--xhuge-04); --_typography---h1--h1-font-weight: var(--_typography---font-weight--semibold); --_typography---h2--h2-font-size: var(--_sizes---fixed--xhuge-03); --_typography---h2--h2-font-weight: var(--_typography---font-weight--semibold); --_typography---h3--h3-font-size: var(--_sizes---fixed--xxlarge-01); --_typography---h3--h3-font-weight: var(--_typography---font-weight--semibold); --_typography---h4--h4-font-size: var(--_sizes---fixed--large-01); --_typography---h4--h4-font-weight: var(--_typography---font-weight--semibold); --_typography---h5--h5-font-size: var(--_sizes---fixed--medium-01); --_typography---h5--h5-font-weight: var(--_typography---font-weight--semibold); --_typography---h6--h6-font-size: var(--_sizes---fixed--small); --_typography---h6--h6-font-weight: var(--_typography---font-weight--semibold); --_typography---font-weight--medium: 500; --primary-color--dark: #232324; --_sizes---fixed--medium-01: 2rem; --primary-color--dark-02: #444; --_typography---h3--h3-font-family: var(--_typography---font-family--primary); --_typography---h3--h3-letter-spacing: .1rem; --_typography---font-weight--semibold: 600; --neutral-color--secondary-neutral: #bbb; --_typography---h5--h5-font-family: var(--_typography---font-family--primary); --_typography---h5--h5-letter-spacing: .025rem; --background-color--secondary-background: white; --primary-color--black: #000; --_typography---h2--h2-font-family: var(--_typography---font-family--primary); --_typography---h2--h2-letter-spacing: .1rem; --_sizes---fixed--small-02: 1.25rem; --border-color--primary-border: #ffffff1a; --_sizes---border-radius--large: 1.5rem; --primary-color--dark-03: #4b4b4b; --_sizes---border-radius--xlarge: 2rem; --_typography---h6--h6-font-family: var(--_typography---font-family--primary); --_typography---h6--h6-letter-spacing: .025rem; --_sizes---fixed--xsmall-04: .75rem; --border-color--transparent: #0000; --_sizes---fixed--small-05: 1.625rem; --_sizes---fixed--small-04: 1.5rem; --_sizes---fixed--small-03: 1.375rem; --neutral-color--primary-neutral: gray; --_sizes---fixed--xsmall-05: .875rem; --_typography---h1--h1-font-family: var(--_typography---font-family--primary); --_typography---h1--h1-letter-spacing: .1rem; --border-color--secondary-border: #fff3; --_typography---h4--h4-font-family: var(--_typography---font-family--primary); --_typography---h4--h4-letter-spacing: .1rem; --_sizes---border-radius--medium: 1rem; --_sizes---border-radius--100: 100%; --_sizes---border-radius--xxlarge: 2.5rem; --_sizes---spacer--xlarge: 4rem; --_typography---font-weight--bold: 700; --_sizes---fixed--medium-02: 2.25rem; --_sizes---fixed--small-07: 1.875rem; --_sizes---spacer--large: 3rem; --_sizes---spacer--medium: 2rem; --_sizes---border-radius--xhuge: 4rem; --_sizes---fixed--small-01: 1.125rem; --_sizes---spacer--tiny: .125rem; --_sizes---spacer--xxsmall: .25rem; --_typography---font-weight--thin: 100; --_typography---font-weight--extra-light: 200; --_typography---font-weight--light: 300; --_typography---font-weight--extra-bold: 800; --_typography---font-weight--black: 900; --_sizes---spacer--xsmall: .5rem; --_sizes---spacer--small: 1rem; --_sizes---spacer--xxlarge: 5rem; --_sizes---spacer--huge: 6rem; --_sizes---spacer--xhuge: 8rem; --_sizes---spacer--xxhuge: 10rem; --_sizes---border-radius--tiny: .125rem; --_sizes---border-radius--xxsmall: .25rem; --_sizes---border-radius--small: .5rem; --_sizes---border-radius--huge: 3rem; --_sizes---border-radius--xxhuge: 5rem; --_sizes---section--small: 3rem; --_sizes---fixed--zero: 0rem; --_sizes---fixed--xsmall-01: .125rem; --_sizes---fixed--xsmall-02: .25rem; --_sizes---fixed--xsmall-03: .5rem; --_sizes---fixed--small-06: 1.75rem; --_sizes---fixed--medium-03: 2.5rem; --_sizes---fixed--medium-04: 2.75rem; --_sizes---fixed--large-01: 3rem; --_sizes---fixed--large-02: 3.25rem; --_sizes---fixed--large-03: 3.5rem; --_sizes---fixed--large-04: 3.75rem; --_sizes---fixed--xlarge-01: 4rem; --_sizes---fixed--xlarge-02: 4.25rem; --_sizes---fixed--xlarge-03: 4.5rem; --_sizes---fixed--xlarge-04: 4.75rem; --_sizes---fixed--xxlarge-01: 5rem; --_sizes---fixed--xxlarge-02: 5.5rem; --_sizes---fixed--xxlarge-03: 6rem; --_sizes---fixed--xxlarge-04: 6.5rem; --_sizes---fixed--huge-01: 7rem; --_sizes---fixed--huge-02: 7.5rem; --_sizes---fixed--huge-03: 8rem; --_sizes---fixed--huge-04: 8.5rem; --_sizes---fixed--xhuge-01: 9rem; --_sizes---fixed--xhuge-02: 9.5rem; --_sizes---fixed--xhuge-03: 10rem; --_sizes---fixed--xhuge-04: 12rem; --_sizes---fixed--xhuge-05: 14rem; --_sizes---fixed--xxhuge-01: 16rem; --_sizes---fixed--xxhuge-02: 18rem; --_sizes---fixed--xxhuge-03: 20rem; --_sizes---section--medium: 5rem; --_sizes---section--large: 8rem; --_sizes---section--xlarge: 10rem; --_sizes---section--huge: 12rem; } .cn-about-reviews article, .cn-about-reviews aside, .cn-about-reviews details, .cn-about-reviews figcaption, .cn-about-reviews figure, .cn-about-reviews footer, .cn-about-reviews header, .cn-about-reviews hgroup, .cn-about-reviews main, .cn-about-reviews menu, .cn-about-reviews nav, .cn-about-reviews section, .cn-about-reviews summary { display: block; } .cn-about-reviews a { background-color: #0000; } .cn-about-reviews img { border: 0; } .cn-about-reviews img { vertical-align: middle; max-width: 100%; display: inline-block; } .cn-about-reviews .w-inline-block { max-width: 100%; display: inline-block; } .cn-about-reviews h1, .cn-about-reviews h2, .cn-about-reviews h3, .cn-about-reviews h4, .cn-about-reviews h5, .cn-about-reviews h6 { margin-bottom: 10px; font-weight: bold; } .cn-about-reviews h2 { margin-top: 20px; font-size: 32px; line-height: 36px; } .cn-about-reviews p { margin-top: 0; margin-bottom: 10px; } .cn-about-reviews .w-embed:before, .cn-about-reviews .w-embed:after { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; } .cn-about-reviews .w-embed:after { clear: both; } .cn-about-reviews .w-slider { text-align: center; clear: both; -webkit-tap-highlight-color: #0000; tap-highlight-color: #0000; background: #ddd; height: 300px; position: relative; } .cn-about-reviews .w-slider-mask { z-index: 1; white-space: nowrap; height: 100%; display: block; position: relative; left: 0; right: 0; overflow: hidden; } .cn-about-reviews .w-slide { vertical-align: top; white-space: normal; text-align: left; width: 100%; height: 100%; display: inline-block; position: relative; } .cn-about-reviews .w-slider-nav { z-index: 2; text-align: center; -webkit-tap-highlight-color: #0000; tap-highlight-color: #0000; height: 40px; margin: auto; padding-top: 10px; position: absolute; inset: auto 0 0; } .cn-about-reviews .w-slider-nav.w-round > div { border-radius: 100%; } .cn-about-reviews .w-slider-nav.w-num > div { width: auto; height: auto; font-size: inherit; line-height: inherit; padding: .2em .5em; } .cn-about-reviews .w-slider-nav.w-shadow > div { box-shadow: 0 0 3px #3336; } .cn-about-reviews .w-slider-nav-invert { color: #fff; } .cn-about-reviews .w-slider-nav-invert > div { background-color: #2226; } .cn-about-reviews .w-slider-nav-invert > div.w-active { background-color: #222; } .cn-about-reviews .w-slider-dot { cursor: pointer; background-color: #fff6; width: 1em; height: 1em; margin: 0 3px .5em; transition: background-color .1s, color .1s; display: inline-block; position: relative; } .cn-about-reviews .w-slider-dot.w-active { background-color: #fff; } .cn-about-reviews .w-slider-dot:focus { outline: none; box-shadow: 0 0 0 2px #fff; } .cn-about-reviews .w-slider-dot:focus.w-active { box-shadow: none; } .cn-about-reviews .w-slider-arrow-left, .cn-about-reviews .w-slider-arrow-right { cursor: pointer; color: #fff; -webkit-tap-highlight-color: #0000; tap-highlight-color: #0000; -webkit-user-select: none; user-select: none; width: 80px; margin: auto; font-size: 40px; position: absolute; inset: 0; overflow: hidden; } .cn-about-reviews .w-slider-arrow-left [class^="w-icon-"], .cn-about-reviews .w-slider-arrow-right [class^="w-icon-"], .cn-about-reviews .w-slider-arrow-left [class*=" w-icon-"], .cn-about-reviews .w-slider-arrow-right [class*=" w-icon-"] { position: absolute; } .cn-about-reviews .w-slider-arrow-left:focus, .cn-about-reviews .w-slider-arrow-right:focus { outline: 0; } .cn-about-reviews .w-slider-arrow-left { z-index: 3; right: auto; } .cn-about-reviews .w-slider-arrow-right { z-index: 4; left: auto; } .cn-about-reviews .w-slider-aria-label { clip: rect(0 0 0 0); border: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .cn-about-reviews .w-slider-force-show { display: block !important; } .cn-about-reviews .w-layout-grid { grid-row-gap: 16px; grid-column-gap: 16px; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; } .cn-about-reviews h2 { color: var(--primary-color--white); font-size: var(--_typography---h2--h2-font-size); line-height: var(--_typography---h2--h2-line-height\); font-weight: var(--_typography---h2--h2-font-weight); text-transform: uppercase; margin-top: 0; margin-bottom: 0; } .cn-about-reviews p { font-size: var(--_sizes---fixed--small); margin-bottom: 10px; line-height: 1.5; } .cn-about-reviews a { color: var(--primary-color--white); font-size: var(--_sizes---fixed--small); font-weight: var(--_typography---font-weight--medium); text-decoration: none; } .cn-about-reviews img { max-width: 100%; display: inline-block; } .cn-about-reviews .cn-text-color-secondary { color: var(--neutral-color--secondary-neutral); } .cn-about-reviews .cn-spacer-xlarge { width: 100%; padding-top: 4rem; } .cn-about-reviews .cn-heading-style-h2 { background-image: linear-gradient(180deg, var(--primary-color--white) 40%, #000 100%, var(--primary-color--black)); font-family: var(--_typography---h2--h2-font-family); font-size: var(--_typography---h2--h2-font-size); line-height: var(--_typography---h2--h2-line-height\); font-weight: var(--_typography---h2--h2-font-weight); letter-spacing: var(--_typography---h2--h2-letter-spacing); text-transform: uppercase; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; } .cn-about-reviews .cn-text-size-medium { font-size: var(--_sizes---fixed--small-02); line-height: 1.5; } .cn-about-reviews .cn-container-large { width: 100%; max-width: 100rem; margin-left: auto; margin-right: auto; } .cn-about-reviews .cn-padding-global { padding-left: 2.5rem; padding-right: 2.5rem; } .cn-about-reviews .cn-padding-section-large { padding-top: 8rem; padding-bottom: 8rem; } .cn-about-reviews .cn-text-size-large { font-size: var(--_sizes---fixed--medium-01); line-height: 1.4; font-weight: var(--_typography---font-weight--medium); } .cn-about-reviews .cn-text-size-regular { color: var(--primary-color--white); font-size: var(--_sizes---fixed--small); line-height: 1.5; } .cn-about-reviews .cn-dividing-line { background-color: var(--border-color--primary-border); width: 100%; height: 1px; } .cn-about-reviews .cn-main-button { background-color: var(--primary-color--dark); color: #c7c7c7; border-radius: .875rem; padding: 1rem 2rem; text-decoration: none; transition: all .35s; position: relative; overflow: hidden; } .cn-about-reviews .cn-main-button:where(.w-variant-fca1516f-e250-7cd2-f02b-aee258111517) { width: 100%; padding-top: 1.25rem; padding-bottom: 1.25rem; } .cn-about-reviews .cn-main-button:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { border-radius: 100%; width: 6rem; height: 6rem; } .cn-about-reviews .cn-main-button:hover { transform: scale(.95); } .cn-about-reviews .cn-button-border { background-color: var(--primary-color--dark); border-radius: .875rem; position: absolute; inset: 0%; } .cn-about-reviews .cn-button-border:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { border-radius: 100%; } .cn-about-reviews .cn-border-wrap { justify-content: center; align-items: center; display: flex; position: absolute; inset: 0%; } .cn-about-reviews .cn-glow-border { filter: blur(10px); background-color: #b0b0b0; width: 100%; height: 100%; } .cn-about-reviews .cn-glow-border.scroll-down { width: 50%; } .cn-about-reviews .cn-button-background-01 { background-color: var(--primary-color--dark); border-radius: .875rem; margin: 1px; position: absolute; inset: 0%; } .cn-about-reviews .cn-button-background-01:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { border-radius: 100%; margin-top: 0; margin-bottom: 0; } .cn-about-reviews .cn-button-background-02 { background-image: linear-gradient(180deg, transparent, var(--primary-color--dark-03)); filter: blur(5px); position: absolute; inset: 0%; } .cn-about-reviews .cn-button-background-02:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { border-radius: 100%; } .cn-about-reviews .cn-button-text-wrap { flex-flow: column; justify-content: flex-start; align-items: center; height: 1.125rem; display: flex; position: relative; overflow: hidden; } .cn-about-reviews .cn-button-text-wrap:where(.w-variant-04f0ffc5-0a59-22fd-33f5-f2c941ea7720) { display: none; } .cn-about-reviews .cn-button-text { z-index: 5; color: var(--primary-color--white); font-size: 1rem; line-height: 1.2; font-weight: var(--_typography---font-weight--medium); text-transform: uppercase; white-space: nowrap; margin-bottom: 0; position: relative; } .cn-about-reviews .cn-subtitle-wrap { justify-content: center; align-items: flex-start; margin-bottom: 3.5rem; display: flex; } .cn-about-reviews .cn-heading-wrap { z-index: 5; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; position: relative; } .cn-about-reviews .cn-heading-wrap.is-center { justify-content: flex-start; align-items: center; } .cn-about-reviews .cn-top-content-grid { grid-column-gap: 2rem; grid-row-gap: 2rem; grid-template-rows: auto; width: 100%; } .cn-about-reviews .cn-subtitle-block { border-style: solid none none solid; border-width: 1px; border-color: var(--primary-color--dark-02); background-color: var(--primary-color--dark); border-radius: 8px; justify-content: center; align-items: center; margin-bottom: 1rem; padding: .5rem 1rem; display: flex; position: relative; overflow: hidden; } .cn-about-reviews .cn-subtitle { color: var(--neutral-color--secondary-neutral); font-size: var(--_sizes---fixed--xsmall-04); letter-spacing: .025rem; text-transform: uppercase; line-height: 1; } .cn-about-reviews .cn-subtitle-blur { filter: blur(8px); background-color: #232324; width: 1.5rem; height: 1.5rem; position: absolute; } .cn-about-reviews .cn-star-rating-block { grid-column-gap: 5px; grid-row-gap: 5px; justify-content: flex-start; align-items: center; display: flex; } .cn-about-reviews .cn-review-star { width: 1rem; height: 1rem; color: var(--primary-color--white); } .cn-about-reviews .cn-cover-image { object-fit: cover; width: 100%; height: 100%; } .cn-about-reviews .cn-quote-icon { opacity: .03; height: 6rem; position: absolute; inset: auto 2.5rem 1.5rem auto; } .cn-about-reviews .cn-rating-wrap { grid-column-gap: 10px; grid-row-gap: 10px; justify-content: flex-start; align-items: center; display: flex; } .cn-about-reviews .cn-testimonial-slider { border-radius: var(--_sizes---border-radius--xxlarge); background-color: var(--border-color--transparent); height: 40rem; margin-bottom: 4rem; } .cn-about-reviews .cn-mask { border-radius: var(--_sizes---border-radius--xxlarge); width: 100%; height: 100%; } .cn-about-reviews .cn-left-arrow { grid-column-gap: 10px; grid-row-gap: 10px; border-style: solid none none solid; border-width: 1px; border-color: var(--border-color--primary-border); border-radius: var(--_sizes---border-radius--large); background-color: var(--primary-color--dark); justify-content: center; align-items: center; width: 49.5%; height: 4rem; display: flex; inset: auto auto -5rem 0%; } .cn-about-reviews .cn-right-arrow { grid-column-gap: 10px; grid-row-gap: 10px; border-style: solid none none solid; border-width: 1px; border-color: var(--border-color--primary-border); border-radius: var(--_sizes---border-radius--large); background-color: var(--primary-color--dark); justify-content: center; align-items: center; width: 49.5%; height: 4rem; display: flex; inset: auto 0% -5rem auto; } .cn-about-reviews .cn-slide-nav { display: none; } .cn-about-reviews .cn-testimonial-slide { width: 100%; height: 100%; } .cn-about-reviews .cn-testimonial-content-wrap { border-style: solid none none solid; border-width: 1px; border-color: var(--border-color--primary-border); border-radius: var(--_sizes---border-radius--xxlarge); background-color: var(--primary-color--dark); width: 100%; height: 100%; padding: 10px; } .cn-about-reviews .cn-testimonial-grid { grid-column-gap: 3rem; grid-row-gap: 3rem; grid-template-rows: auto; width: 100%; height: 100%; } .cn-about-reviews .cn-testimonial-image-wrap { border-radius: var(--_sizes---border-radius--xlarge); width: 100%; height: 100%; position: relative; overflow: hidden; } .cn-about-reviews .cn-testimonial-content-block { padding-top: 2rem; padding-bottom: 2rem; padding-right: 2.5rem; position: relative; } .cn-about-reviews .cn-testimonial-content-grid { grid-template-rows: auto auto; grid-template-columns: 1fr; width: 100%; height: 100%; } .cn-about-reviews .cn-testimonial-content { grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; } .cn-about-reviews .cn-cliente-logo { opacity: .5; height: 2.5rem; } .cn-about-reviews .cn-slide-arrow { justify-content: center; align-items: center; width: 1.125rem; height: 1.125rem; display: flex; position: absolute; } .cn-about-reviews .cn-slide-block { grid-column-gap: 5px; grid-row-gap: 5px; justify-content: center; align-items: center; display: flex; } .cn-about-reviews .cn-slide-text-wrap { flex-flow: column; height: 1.5rem; display: flex; position: relative; overflow: hidden; } .cn-about-reviews .cn-slide-arrow-wrap { justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; display: flex; position: relative; overflow: hidden; } .cn-about-reviews .cn-slide-text { text-transform: uppercase; font-size: 1rem; line-height: 1.4; } .cn-about-reviews .cn-title-wrapper { position: relative; overflow: hidden; } @media screen and (min-width: 1280px) { .cn-about-reviews .cn-testimonial-slider { height: 42rem; } } @media screen and (min-width: 1440px) { .cn-about-reviews .cn-heading-style-h2 { font-size: 12rem; } .cn-about-reviews .cn-quote-icon { height: 8rem; } .cn-about-reviews .cn-testimonial-slider { height: 45rem; } } @media screen and (min-width: 1920px) { .cn-about-reviews .cn-testimonial-slider { height: 48rem; } } @media screen and (max-width: 991px) { .cn-about-reviews { --_sizes---fixed--small: 1rem; --_sizes---fixed--medium-01: 2rem; --_sizes---fixed--small-02: 1.25rem; --_sizes---border-radius--large: 1.5rem; --_sizes---border-radius--xlarge: 2rem; --_sizes---fixed--xsmall-04: .75rem; --_sizes---fixed--small-05: 1.625rem; --_sizes---fixed--small-04: 1.5rem; --_sizes---fixed--small-03: 1.375rem; --_sizes---fixed--xsmall-05: .875rem; --_sizes---border-radius--medium: 1rem; --_sizes---border-radius--100: 100%; --_sizes---border-radius--xxlarge: 2.5rem; --_sizes---spacer--xlarge: 3rem; --_sizes---fixed--medium-02: 2.25rem; --_sizes---fixed--small-07: 1.875rem; --_sizes---spacer--large: 2.5rem; --_sizes---spacer--medium: 1.5rem; --_sizes---border-radius--xhuge: 4rem; --_sizes---fixed--small-01: 1.125rem; --_sizes---spacer--tiny: .125rem; --_sizes---spacer--xxsmall: .25rem; --_sizes---spacer--xsmall: .5rem; --_sizes---spacer--small: 1rem; --_sizes---spacer--xxlarge: 4rem; --_sizes---spacer--huge: 5rem; --_sizes---spacer--xhuge: 6rem; --_sizes---spacer--xxhuge: 8rem; --_sizes---border-radius--tiny: .125rem; --_sizes---border-radius--xxsmall: .25rem; --_sizes---border-radius--small: .5rem; --_sizes---border-radius--huge: 3rem; --_sizes---border-radius--xxhuge: 5rem; --_sizes---section--small: 3rem; --_sizes---fixed--zero: 0rem; --_sizes---fixed--xsmall-01: .125rem; --_sizes---fixed--xsmall-02: .25rem; --_sizes---fixed--xsmall-03: .5rem; --_sizes---fixed--small-06: 1.75rem; --_sizes---fixed--medium-03: 2.5rem; --_sizes---fixed--medium-04: 2.75rem; --_sizes---fixed--large-01: 3rem; --_sizes---fixed--large-02: 3.25rem; --_sizes---fixed--large-03: 3.5rem; --_sizes---fixed--large-04: 3.75rem; --_sizes---fixed--xlarge-01: 4rem; --_sizes---fixed--xlarge-02: 4.25rem; --_sizes---fixed--xlarge-03: 4.5rem; --_sizes---fixed--xlarge-04: 4.75rem; --_sizes---fixed--xxlarge-01: 5rem; --_sizes---fixed--xxlarge-02: 5.5rem; --_sizes---fixed--xxlarge-03: 6rem; --_sizes---fixed--xxlarge-04: 6.5rem; --_sizes---fixed--huge-01: 7rem; --_sizes---fixed--huge-02: 7.5rem; --_sizes---fixed--huge-03: 8rem; --_sizes---fixed--huge-04: 8.5rem; --_sizes---fixed--xhuge-01: 9rem; --_sizes---fixed--xhuge-02: 9.5rem; --_sizes---fixed--xhuge-03: 10rem; --_sizes---fixed--xhuge-04: 12rem; --_sizes---fixed--xhuge-05: 14rem; --_sizes---fixed--xxhuge-01: 16rem; --_sizes---fixed--xxhuge-02: 18rem; --_sizes---fixed--xxhuge-03: 20rem; --_sizes---section--medium: 5rem; --_sizes---section--large: 8rem; --_sizes---section--xlarge: 10rem; --_sizes---section--huge: 12rem; --_typography---font-family--primary: "Overused Grotesk", Arial, sans-serif; --_typography---font-weight--regular: 400; --_typography---h1--h1-font-size: var(--_sizes---fixed--xhuge-03); --_typography---h1--h1-font-weight: var(--_typography---font-weight--semibold); --_typography---h2--h2-font-size: var(--_sizes---fixed--huge-03); --_typography---h2--h2-font-weight: var(--_typography---font-weight--semibold); --_typography---h3--h3-font-size: var(--_sizes---fixed--large-03); --_typography---h3--h3-font-weight: var(--_typography---font-weight--semibold); --_typography---h4--h4-font-size: var(--_sizes---fixed--large-01); --_typography---h4--h4-font-weight: var(--_typography---font-weight--semibold); --_typography---h5--h5-font-size: var(--_sizes---fixed--small-04); --_typography---h5--h5-font-weight: var(--_typography---font-weight--semibold); --_typography---h6--h6-font-size: var(--_sizes---fixed--small); --_typography---h6--h6-font-weight: var(--_typography---font-weight--semibold); --_typography---font-weight--medium: 500; --_typography---h3--h3-font-family: var(--_typography---font-family--primary); --_typography---h3--h3-letter-spacing: .1rem; --_typography---font-weight--semibold: 600; --_typography---h5--h5-font-family: var(--_typography---font-family--primary); --_typography---h5--h5-letter-spacing: .025rem; --_typography---h2--h2-font-family: var(--_typography---font-family--primary); --_typography---h2--h2-letter-spacing: .1rem; --_typography---h6--h6-font-family: var(--_typography---font-family--primary); --_typography---h6--h6-letter-spacing: .025rem; --_typography---h1--h1-font-family: var(--_typography---font-family--primary); --_typography---h1--h1-letter-spacing: .1rem; --_typography---h4--h4-font-family: var(--_typography---font-family--primary); --_typography---h4--h4-letter-spacing: .1rem; --_typography---font-weight--bold: 700; --_typography---font-weight--thin: 100; --_typography---font-weight--extra-light: 200; --_typography---font-weight--light: 300; --_typography---font-weight--extra-bold: 800; --_typography---font-weight--black: 900; } .cn-about-reviews .cn-text-size-large { font-size: var(--_sizes---fixed--small-05); } .cn-about-reviews .cn-quote-icon { height: 4rem; right: 1.5rem; } .cn-about-reviews .cn-testimonial-grid { grid-column-gap: 2rem; grid-row-gap: 2rem; } .cn-about-reviews .cn-testimonial-content-block { padding-right: 1rem; } .cn-about-reviews .cn-cliente-logo { height: 2.25rem; } } @media screen and (max-width: 767px) { .cn-about-reviews { --_sizes---fixed--small: 1rem; --_sizes---fixed--medium-01: 2rem; --_sizes---fixed--small-02: 1.25rem; --_sizes---border-radius--large: 1.25rem; --_sizes---border-radius--xlarge: 1.5rem; --_sizes---fixed--xsmall-04: .75rem; --_sizes---fixed--small-05: 1.625rem; --_sizes---fixed--small-04: 1.5rem; --_sizes---fixed--small-03: 1.375rem; --_sizes---fixed--xsmall-05: .875rem; --_sizes---border-radius--medium: 1rem; --_sizes---border-radius--100: 100%; --_sizes---border-radius--xxlarge: 2rem; --_sizes---spacer--xlarge: 2rem; --_sizes---fixed--medium-02: 2.25rem; --_sizes---fixed--small-07: 1.875rem; --_sizes---spacer--large: 1.5rem; --_sizes---spacer--medium: 1.25rem; --_sizes---border-radius--xhuge: 3rem; --_sizes---fixed--small-01: 1.125rem; --_sizes---spacer--tiny: .125rem; --_sizes---spacer--xxsmall: .25rem; --_sizes---spacer--xsmall: .5rem; --_sizes---spacer--small: 1rem; --_sizes---spacer--xxlarge: 2.5rem; --_sizes---spacer--huge: 3rem; --_sizes---spacer--xhuge: 4rem; --_sizes---spacer--xxhuge: 5rem; --_sizes---border-radius--tiny: .125rem; --_sizes---border-radius--xxsmall: .25rem; --_sizes---border-radius--small: .5rem; --_sizes---border-radius--huge: 2.5rem; --_sizes---border-radius--xxhuge: 4rem; --_sizes---section--small: 3rem; --_sizes---fixed--zero: 0rem; --_sizes---fixed--xsmall-01: .125rem; --_sizes---fixed--xsmall-02: .25rem; --_sizes---fixed--xsmall-03: .5rem; --_sizes---fixed--small-06: 1.75rem; --_sizes---fixed--medium-03: 2.5rem; --_sizes---fixed--medium-04: 2.75rem; --_sizes---fixed--large-01: 3rem; --_sizes---fixed--large-02: 3.25rem; --_sizes---fixed--large-03: 3.5rem; --_sizes---fixed--large-04: 3.75rem; --_sizes---fixed--xlarge-01: 4rem; --_sizes---fixed--xlarge-02: 4.25rem; --_sizes---fixed--xlarge-03: 4.5rem; --_sizes---fixed--xlarge-04: 4.75rem; --_sizes---fixed--xxlarge-01: 5rem; --_sizes---fixed--xxlarge-02: 5.5rem; --_sizes---fixed--xxlarge-03: 6rem; --_sizes---fixed--xxlarge-04: 6.5rem; --_sizes---fixed--huge-01: 7rem; --_sizes---fixed--huge-02: 7.5rem; --_sizes---fixed--huge-03: 8rem; --_sizes---fixed--huge-04: 8.5rem; --_sizes---fixed--xhuge-01: 9rem; --_sizes---fixed--xhuge-02: 9.5rem; --_sizes---fixed--xhuge-03: 10rem; --_sizes---fixed--xhuge-04: 12rem; --_sizes---fixed--xhuge-05: 14rem; --_sizes---fixed--xxhuge-01: 16rem; --_sizes---fixed--xxhuge-02: 18rem; --_sizes---fixed--xxhuge-03: 20rem; --_sizes---section--medium: 5rem; --_sizes---section--large: 8rem; --_sizes---section--xlarge: 10rem; --_sizes---section--huge: 12rem; --_typography---font-family--primary: "Overused Grotesk", Arial, sans-serif; --_typography---font-weight--regular: 400; --_typography---h1--h1-font-size: var(--_sizes---fixed--huge-03); --_typography---h1--h1-font-weight: var(--_typography---font-weight--semibold); --_typography---h2--h2-font-size: var(--_sizes---fixed--xxlarge-03); --_typography---h2--h2-font-weight: var(--_typography---font-weight--semibold); --_typography---h3--h3-font-size: var(--_sizes---fixed--large-01); --_typography---h3--h3-font-weight: var(--_typography---font-weight--semibold); --_typography---h4--h4-font-size: var(--_sizes---fixed--medium-03); --_typography---h4--h4-font-weight: var(--_typography---font-weight--semibold); --_typography---h5--h5-font-size: var(--_sizes---fixed--small-02); --_typography---h5--h5-font-weight: var(--_typography---font-weight--semibold); --_typography---h6--h6-font-size: var(--_sizes---fixed--small); --_typography---h6--h6-font-weight: var(--_typography---font-weight--semibold); --_typography---font-weight--medium: 500; --_typography---h3--h3-font-family: var(--_typography---font-family--primary); --_typography---h3--h3-letter-spacing: .1rem; --_typography---font-weight--semibold: 600; --_typography---h5--h5-font-family: var(--_typography---font-family--primary); --_typography---h5--h5-letter-spacing: .025rem; --_typography---h2--h2-font-family: var(--_typography---font-family--primary); --_typography---h2--h2-letter-spacing: .1rem; --_typography---h6--h6-font-family: var(--_typography---font-family--primary); --_typography---h6--h6-letter-spacing: .025rem; --_typography---h1--h1-font-family: var(--_typography---font-family--primary); --_typography---h1--h1-letter-spacing: .1rem; --_typography---h4--h4-font-family: var(--_typography---font-family--primary); --_typography---h4--h4-letter-spacing: .1rem; --_typography---font-weight--bold: 700; --_typography---font-weight--thin: 100; --_typography---font-weight--extra-light: 200; --_typography---font-weight--light: 300; --_typography---font-weight--extra-bold: 800; --_typography---font-weight--black: 900; } .cn-about-reviews h1, .cn-about-reviews h2 { font-size: 2rem; } .cn-about-reviews .cn-padding-global { padding-left: 1.25rem; padding-right: 1.25rem; } .cn-about-reviews .cn-padding-section-large { padding-top: 6rem; padding-bottom: 6rem; } .cn-about-reviews .cn-text-size-large { font-size: var(--_sizes---fixed--small-04); } .cn-about-reviews .cn-testimonial-slider { height: auto; } .cn-about-reviews .cn-testimonial-grid { grid-column-gap: 1rem; grid-row-gap: 1rem; } .cn-about-reviews .cn-testimonial-image-wrap { height: 30rem; } .cn-about-reviews .cn-testimonial-content-block { padding-top: 1rem; padding-bottom: 1rem; padding-left: 1rem; } .cn-about-reviews .cn-testimonial-content-grid { grid-column-gap: 2rem; grid-row-gap: 2rem; } } @media screen and (max-width: 479px) { .cn-about-reviews { --_sizes---fixed--small: 1rem; --_sizes---fixed--medium-01: 2rem; --_sizes---fixed--small-02: 1.25rem; --_sizes---border-radius--large: 1.25rem; --_sizes---border-radius--xlarge: 1.5rem; --_sizes---fixed--xsmall-04: .75rem; --_sizes---fixed--small-05: 1.625rem; --_sizes---fixed--small-04: 1.5rem; --_sizes---fixed--small-03: 1.375rem; --_sizes---fixed--xsmall-05: .875rem; --_sizes---border-radius--medium: 1rem; --_sizes---border-radius--100: 100%; --_sizes---border-radius--xxlarge: 2rem; --_sizes---spacer--xlarge: 2rem; --_sizes---fixed--medium-02: 2.25rem; --_sizes---fixed--small-07: 1.875rem; --_sizes---spacer--large: 1.5rem; --_sizes---spacer--medium: 1.25rem; --_sizes---border-radius--xhuge: 3rem; --_sizes---fixed--small-01: 1.125rem; --_sizes---spacer--tiny: .125rem; --_sizes---spacer--xxsmall: .25rem; --_sizes---spacer--xsmall: .5rem; --_sizes---spacer--small: 1rem; --_sizes---spacer--xxlarge: 2.5rem; --_sizes---spacer--huge: 3rem; --_sizes---spacer--xhuge: 4rem; --_sizes---spacer--xxhuge: 5rem; --_sizes---border-radius--tiny: .125rem; --_sizes---border-radius--xxsmall: .25rem; --_sizes---border-radius--small: .5rem; --_sizes---border-radius--huge: 2.5rem; --_sizes---border-radius--xxhuge: 4rem; --_sizes---section--small: 3rem; --_sizes---fixed--zero: 0rem; --_sizes---fixed--xsmall-01: .125rem; --_sizes---fixed--xsmall-02: .25rem; --_sizes---fixed--xsmall-03: .5rem; --_sizes---fixed--small-06: 1.75rem; --_sizes---fixed--medium-03: 2.5rem; --_sizes---fixed--medium-04: 2.75rem; --_sizes---fixed--large-01: 3rem; --_sizes---fixed--large-02: 3.25rem; --_sizes---fixed--large-03: 3.5rem; --_sizes---fixed--large-04: 3.75rem; --_sizes---fixed--xlarge-01: 4rem; --_sizes---fixed--xlarge-02: 4.25rem; --_sizes---fixed--xlarge-03: 4.5rem; --_sizes---fixed--xlarge-04: 4.75rem; --_sizes---fixed--xxlarge-01: 5rem; --_sizes---fixed--xxlarge-02: 5.5rem; --_sizes---fixed--xxlarge-03: 6rem; --_sizes---fixed--xxlarge-04: 6.5rem; --_sizes---fixed--huge-01: 7rem; --_sizes---fixed--huge-02: 7.5rem; --_sizes---fixed--huge-03: 8rem; --_sizes---fixed--huge-04: 8.5rem; --_sizes---fixed--xhuge-01: 9rem; --_sizes---fixed--xhuge-02: 9.5rem; --_sizes---fixed--xhuge-03: 10rem; --_sizes---fixed--xhuge-04: 12rem; --_sizes---fixed--xhuge-05: 14rem; --_sizes---fixed--xxhuge-01: 16rem; --_sizes---fixed--xxhuge-02: 18rem; --_sizes---fixed--xxhuge-03: 20rem; --_sizes---section--medium: 5rem; --_sizes---section--large: 8rem; --_sizes---section--xlarge: 10rem; --_sizes---section--huge: 12rem; --_typography---font-family--primary: "Overused Grotesk", Arial, sans-serif; --_typography---font-weight--regular: 400; --_typography---h1--h1-font-size: var(--_sizes---fixed--xlarge-01); --_typography---h1--h1-font-weight: var(--_typography---font-weight--semibold); --_typography---h2--h2-font-size: var(--_sizes---fixed--large-03); --_typography---h2--h2-font-weight: var(--_typography---font-weight--semibold); --_typography---h3--h3-font-size: var(--_sizes---fixed--medium-03); --_typography---h3--h3-font-weight: var(--_typography---font-weight--semibold); --_typography---h4--h4-font-size: var(--_sizes---fixed--medium-01); --_typography---h4--h4-font-weight: var(--_typography---font-weight--semibold); --_typography---h5--h5-font-size: var(--_sizes---fixed--small); --_typography---h5--h5-font-weight: var(--_typography---font-weight--semibold); --_typography---h6--h6-font-size: var(--_sizes---fixed--xsmall-04); --_typography---h6--h6-font-weight: var(--_typography---font-weight--semibold); --_typography---font-weight--medium: 500; --_typography---h3--h3-font-family: var(--_typography---font-family--primary); --_typography---h3--h3-letter-spacing: .1rem; --_typography---font-weight--semibold: 600; --_typography---h5--h5-font-family: var(--_typography---font-family--primary); --_typography---h5--h5-letter-spacing: .025rem; --_typography---h2--h2-font-family: var(--_typography---font-family--primary); --_typography---h2--h2-letter-spacing: .1rem; --_typography---h6--h6-font-family: var(--_typography---font-family--primary); --_typography---h6--h6-letter-spacing: .025rem; --_typography---h1--h1-font-family: var(--_typography---font-family--primary); --_typography---h1--h1-letter-spacing: .1rem; --_typography---h4--h4-font-family: var(--_typography---font-family--primary); --_typography---h4--h4-letter-spacing: .1rem; --_typography---font-weight--bold: 700; --_typography---font-weight--thin: 100; --_typography---font-weight--extra-light: 200; --_typography---font-weight--light: 300; --_typography---font-weight--extra-bold: 800; --_typography---font-weight--black: 900; } .cn-about-reviews h2 { font-size: 1.75rem; } .cn-about-reviews .cn-spacer-xlarge { padding-top: 3rem; } .cn-about-reviews .cn-padding-section-large { padding-top: 5rem; padding-bottom: 5rem; } .cn-about-reviews .cn-text-size-large { font-size: var(--_sizes---fixed--small-03); } .cn-about-reviews .cn-star-rating-block { grid-column-gap: 3px; grid-row-gap: 3px; } .cn-about-reviews .cn-review-star { width: .875rem; height: .875rem; } .cn-about-reviews .cn-quote-icon { bottom: 4rem; right: 1rem; } .cn-about-reviews .cn-left-arrow, .cn-about-reviews .cn-right-arrow { width: 48%; } .cn-about-reviews .cn-testimonial-image-wrap { height: 20rem; } .cn-about-reviews .cn-testimonial-content { grid-column-gap: 1.25rem; grid-row-gap: 1.25rem; } } /* cn-about-reviews: the donor painted this ground on ; the block needs it itself. */ .cn-about-reviews { background-color: #000; } /* ---- cn-about-reviews: hand-written, from tools/blocks/cn-about-reviews.css ---- */ /* cn-about-reviews — only what the cut cannot carry out of cinery. Three kinds of thing live here, and nothing else: 1. the grid placement cinery wrote against Webflow's generated `#w-node-…` ids, which are not classes and so are invisible to a class-driven extractor (checked against this cut's own extraction: zero `#w-node` rules came across, and thirteen are needed); 2. what cinery's and `:root` supplied — its typeface, colour, size, leading and weight, the one heading token Webflow left escaped, and the two properties this site's own `p` rule leaks into the block; 3. the donor motion tools/donor-lib.mjs cannot carry, which here is four ix3 (GSAP) timelines, replayed with the donor's own numbers. Every value in 1 and 2 is copied verbatim from tools/templates/cinery/css/cinery.app.shared.3e3418b8f.css and scoped under the block root exactly as the extractor scopes its own output. Nothing here sets a size, colour, spacing or layout the donor did not already set. WHAT IS NOT HERE, so the next reader does not go looking: · no placement rule. The cut is a whole `

` and brings its own air: `.cn-padding-section-large` is `padding: 8rem 0` (6rem ≤767, 5rem ≤479), and cinery's own hairline closes it. The two arrows hang `-5rem` below a slider that carries `margin-bottom: 4rem`, i.e. about 1rem below the component, and that 8rem foot clears them with room to spare — which is the one thing tools/blocks/cn-reviews.css had to add for itself, because it cuts the bare component out of somebody else's column. · no background-color. `donor.ground` in tools/blocks/cn-about-reviews.mjs already paints the block root with cinery's own `body` black; the reason it is set there rather than here, and why #000 under the About page's #000002 is the right call, is written out in that file. · no `isolation`. tools/blocks/cn-service.css needs it because its moved ground painted over a `z-index: -1` layer; every positioned layer in this cut is at a positive z (`.heading-wrap` 5, `.button-text` 5, Webflow's own slider chrome 2–3), so the ground stays underneath on its own. · nothing for the slider. `.w-slider` is a Webflow component, not an interaction, and it cannot be replayed as keyframes — four slides in one `white-space: nowrap` mask have no fifth box for the fourth to hand the first, and `Previous` / `Next` are controls, which no keyframe can be. tools/blocks/cn-about-reviews.js replays it from the slider's own data attributes. */ /* ------------------------------------------- 1. the #w-node grid rules -- */ /* Webflow puts an element's grid position on a generated `#w-node-…` id, not on a class, so the extractor never sees these. Thirteen are in this cut and every one matters. ONE, at every width: the button. `.top-content-grid` is `1fr 1fr` with one explicit row, so the heading takes the first cell and the button the second; `place-self: end` is what puts the button on the heading's baseline at the right-hand edge of the grid instead of stretched across the top of its cell. FOUR, at every width: the lower half of each card. `.testimonial-content-grid` is `grid-template-rows: auto auto; height: 100%`, so its second row is as tall as whatever is left of the card under the quote. Without `align-self: end` the mark, the speaker and the concept line sit at the TOP of that leftover space instead of on the card's floor, and they float differently in every card because the quotes are different lengths. This is the rule that lines the four cards' feet up with each other. TWO, below 992: the heading grid folds. `.heading-wrap` takes the full width and the button drops to a second row at the left — which is also why nothing below 992 has to worry about the heading squeezing the button's track. EIGHT, below 768: the card stacks. `.testimonial-grid` is a `.w-layout-grid`, i.e. `grid-template-columns: 1fr 1fr`, and cinery keeps both columns at every width — it hands the portrait and the content block a full-width row each of a two-column grid instead. Without these the portrait keeps half a phone's width (`.testimonial-image-wrap` is `height: 30rem` under 768 and `20rem` under 480, the height cinery drew for a full-width picture) and the quote is set in the other half. ONE, below 480: cinery restates the heading's full-width span in a selector it shares with three ids belonging to other parts of its home page. Only ours is written here; the other three are not in this cut. Donor rules, in donor order, at the donor's own breakpoints. */ .cn-about-reviews #w-node-_5ff8cede-17dc-e41f-3894-39badfa11c18-805165a1 { place-self: end; } .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b0e3-805165a1, .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b101-805165a1, .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b11f-805165a1, .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b13d-805165a1 { align-self: end; } @media screen and (max-width: 991px) { .cn-about-reviews #w-node-_5ff8cede-17dc-e41f-3894-39badfa11c0f-805165a1 { grid-area: 1 / 1 / 2 / 3; } .cn-about-reviews #w-node-_5ff8cede-17dc-e41f-3894-39badfa11c18-805165a1 { grid-area: 2 / 1 / 3 / 3; justify-self: start; } } @media screen and (max-width: 767px) { .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b0d0-805165a1 { grid-area: 1 / 1 / 2 / 3; } .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b0d2-805165a1 { grid-area: 2 / 1 / 3 / 3; } .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b0ee-805165a1 { grid-area: 1 / 1 / 2 / 3; } .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b0f0-805165a1 { grid-area: 2 / 1 / 3 / 3; } .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b10c-805165a1 { grid-area: 1 / 1 / 2 / 3; } .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b10e-805165a1 { grid-area: 2 / 1 / 3 / 3; } .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b12a-805165a1 { grid-area: 1 / 1 / 2 / 3; } .cn-about-reviews #w-node-_13b75589-1ed7-6d9c-5b18-094d91b3b12c-805165a1 { grid-area: 2 / 1 / 3 / 3; } } @media screen and (max-width: 479px) { .cn-about-reviews #w-node-_5ff8cede-17dc-e41f-3894-39badfa11c0f-805165a1 { grid-area: 1 / 1 / 2 / 3; } } /* --------------------------------------------- 2. what supplied -- */ /* cinery's own `body` rule, restated on the block root. A cut section never brings along, and almost every word in this band is set in inherited type: of the block's text slots only `.cn-heading-style-h2` names a family and only `.cn-text-size-regular` names a colour. Dropped onto the About page the pill, both arrow words, the button label, the four quotes, the four speaker lines and the four concept lines would all be drawn in Mono's Inter at Mono's 14px/1.1/500/#000 — black type on a #232324 card. Donor rule, verbatim: body { background-color: var(--background-color--primary-background); font-family: var(--_typography---font-family--primary); color: var(--primary-color--white); font-size: var(--_sizes---fixed--small); line-height: 1.4; font-weight: var(--_typography---font-weight--regular); } `background-color` is left out because `donor.ground` already paints the block root with the same `#000` that variable resolves to. The rest is as cinery wrote it, variables and all: the extractor copies cinery's `:root` onto the scope root, so the names still resolve here. */ .cn-about-reviews { font-family: var(--_typography---font-family--primary); color: var(--primary-color--white); font-size: var(--_sizes---fixed--small); line-height: 1.4; font-weight: var(--_typography---font-weight--regular); } /* The heading's leading, which is a token the extractor cannot read. Webflow left this variable's name escaped — `--_typography---h2--h2-line-height\` — and donor-lib's `:root` scan matches `--[\w-]+` names only, so the one token both of this block's heading rules ask for never arrives. Checked against this cut's own extraction: the name appears twice in the emitted sheet, on `.cn-about-reviews h2` and on `.cn-about-reviews .cn-heading-style-h2`, and zero times in the scope root's variable block. With it undefined the declaration is invalid at computed-value time and both `

`s fall back to the leading they inherit. That matters twice over: the gradient each line is painted with (`linear-gradient(180deg, white 40%, #000 100%)`, `background-clip: text`) is laid over the element box, so a taller box stretches the fade; and `.cn-title-wrapper` is `overflow: hidden`, i.e. the mask the reveal below rises through. Measured on cinery's own page with its own Overused Grotesk SemiBold, at the donor's `100%` the line box is exactly as tall as the type at every breakpoint — 192px at 192px, 160 at 160, 128 at 128, 56 at 56 — so the mask clips nothing and the fade covers exactly the letters. cinery declares the token `100%` on `:root` and restates it as `100%` at each of its three breakpoints, so one unconditional declaration is exactly what the donor computes at every width. The five other heading tokens cinery escapes the same way are not restored: this block has no h1, h3, h4, h5 or h6. */ .cn-about-reviews { --_typography---h2--h2-line-height\: 100%; } /* cinery's two `p` rules are `{ margin-top; margin-bottom }` and `{ font-size; margin-bottom; line-height }` — nothing else, so a cinery paragraph is opaque and tracks normally. This site's own `p` rule (css/monof-template.app.shared.ed8969994.css) adds `opacity: .7` and `letter-spacing: -.5px`, and neither property is in the extracted `.cn-about-reviews p`, so both leak through onto the six `

` elements this block has — the four pull quotes, which are the largest type in the cards and the thing a reader looks at first, and the button's two label copies. Put back what the donor computes. Same repair, for the same reason, as tools/blocks/cn-reviews.css and tools/blocks/cn-service.css. */ .cn-about-reviews p { opacity: 1; letter-spacing: normal; } /* ------------------------------ 3. the motion the cut leaves behind ------ */ /* Four ix3 (GSAP) timelines touch this section and not one of them can travel: donor-lib returns `{events, actionLists}` (IX2) only, and this site registers no interactions with the ix3 runtime it ships. Their definitions were read out of tools/templates/cinery/js/app.9d009f54.b1680441e3b493e5.js, and the two numbers the runtime resolves itself — ease indices and the default duration — out of js/app.schunk.25099a4fefa544e6.js, the ix3 runtime this site already loads on every page: i-84a682e6 wf:hover on class `main-button` → t-bf9e6807 i-d68dbd1d wf:hover on class `left-arrow` → t-e56d8ac2 } page-scoped i-d5b715fb wf:hover on class `right-arrow` → t-96695666 } to cinery's home page i-9f439e20 wf:scroll on class `heading-wrap` → t-864fc814 *** The two arrow timelines are the difference between this block and tools/blocks/cn-reviews.css, which writes no motion at all. On pricing.html the same two rolls are IX2 (a-45 … a-48, fired by e-248 … e-251 against `data-w-id`s the pricing arrows carry) and they travel with the cut. On the home page they are ix3 and the arrows carry no `data-w-id` at all — asserted in tools/blocks/cn-about-reviews.mjs, which refuses the cut if one ever turns up. Same visible roll, different machinery, opposite conclusion. *** */ /* --- the three hover rolls (t-bf9e6807, t-e56d8ac2, t-96695666) ---------- All three are the same action with a different target: targets `.button-text` / `.slide-text` within the trigger timing { duration: .4, position: 0, stagger: { amount: .4 }, ease: 12 } property "wf:transform": { yPercent: [null, "-100%"] } splitText { type: "chars" } Ease 12 is index 12 of the ix3 runtime's own table ("none", "power1.in", "power1.out", "power1.inOut", "power2.in", "power2.out", "power2.inOut", "power3.in", …), i.e. gsap `power4.inOut`, which is quintic in-out. THE DONOR'S GEOMETRY. `.button-text-wrap` is `flex-flow: column; justify-content: flex-start; height: 1.125rem; overflow: hidden` — an 18px window holding two `.button-text` copies at 1rem/1.2, i.e. 19.2px each; and `.slide-text-wrap` is `flex-flow: column; height: 1.5rem; overflow: hidden` — a 24px window holding two `.slide-text` copies at 1rem/1.4, i.e. 22.4px each. (They do not shrink to fit: an overflow-hidden flex item still keeps its automatic minimum size, which here is its own line box.) At rest the first copy fills the window and the second sits below it, clipped. `yPercent: -100%` lifts both by one copy's own height: the first leaves through the top, the second takes its place. cn-about-reviews.mjs writes the same word into both copies of all three pairs precisely because of this — write one and the hover shows the donor's. WHAT IS REDUCED. The donor splits each label into characters and staggers them across 0.4s, so its roll runs 0.8s end to end. Splitting characters means rewriting the label into spans at runtime, which is DOM structure, and the brief is 「仅仅针对文字进行改动」 — so each label rolls as one piece here and takes the action's own 0.4s. Nothing else changes: same trigger, same direction, same distance, same easing, same window. WHY A TRANSITION AND NOT @keyframes. A Webflow hover timeline with `hover: "each"` plays forward on mouseenter and back on mouseleave. A one-shot keyframe animation cannot come back; a transition does exactly this, in both directions, for free. THE EASING. `cubic-bezier(.84, 0, .16, 1)` is the bezier nearest quintic in-out — max deviation 0.0305 of the travel, which over a 22.4px roll is 0.68px, i.e. under a device pixel at 1x. tools/blocks/ro-gallery.css fitted and measured the same curve for the same ease index, and tools/blocks/cn-about.css replays the button roll with it. */ .cn-about-reviews .cn-main-button .cn-button-text, .cn-about-reviews .cn-left-arrow .cn-slide-text, .cn-about-reviews .cn-right-arrow .cn-slide-text { transition: transform .4s cubic-bezier(.84, 0, .16, 1); } .cn-about-reviews .cn-main-button:hover .cn-button-text, .cn-about-reviews .cn-left-arrow:hover .cn-slide-text, .cn-about-reviews .cn-right-arrow:hover .cn-slide-text { transform: translateY(-100%); } /* --- the heading's arrival (t-864fc814) --------------------------------- The same site-scoped interaction tools/blocks/cn-produce.css replays for the one other cinery cut that owns a `.top-title` / `.bottom-title` pair, with the same numbers, because it is the same timeline: i-9f439e20 wf:scroll on class `heading-wrap`, scrollTriggerConfig { start: "top 85%", enter: "play", leave / enterBack / leaveBack: "none" } t-864fc814 ta-7549a871 .top-title y 110% → 0%, position 0 ta-f06a78d6 .bottom-title y 110% → 0%, position 0.3 both tt:2 (fromTo), ease 6, duration unset Ease 6 is `power2.inOut`; an action with no duration takes the runtime's DEFAULTS.DURATION = 0.5s. `.cn-title-wrapper` is the donor's own mask (`position: relative; overflow: hidden`, and exactly as tall as the line it holds — measured on cinery's own page at 192/160/128/56px for the four breakpoints), so 110% puts the line clear of it. The donor's action splits each line box out with SplitText and staggers them; both of this block's headings are one line box at every width (measured: 「四个」/「岗位」 and "Four"/"Roles" never wrap — see the table in cn-about-reviews.mjs), so there is nothing to stagger and the line rises whole. No span is added, which is what the brief requires. The resting page is the one without either class: tools/blocks/cn-about-reviews.js adds `cn-about-reviews-armed` only once its observer is watching, and swaps it for `cn-about-reviews-reveal` when the heading arrives. No JS, no observer, or a reader who asked for less motion, and the heading simply stands there — it is never hidden by a rule that has nothing to un-hide it. (cinery's own anti-FOUC rule, which does hide `.top-title` and `.bottom-title` until its runtime stamps `w-mod-ix3`, lives in an inline `