/* * The new home page (round-2 design, BLUE and BLACK looks). Home page only (page-new-home.php), kept whole by the optimisers (inc/ceo-look.php and functions.php keeps). * * GENERATED from the approved preview build/premium-previews_2026-10-23/home/index.html (sha256/16 b287f77688d3f497) by build/home-redesign-build_2026-10-27/gen/make_home_css.py: * the preview's own rules, every selector scoped under .cn-home-page-content (the theme's wrapper div, functions.php woodmart_page_top_part; never `main`), plus the base * rules, the motion layer and the video poster written for production (SPEC_home_redesign_build_2026-10-25.md sections 3.2, 4 and 6). * * Tokens: the ten that the shared header and footer read (--navy --acc --txt --mut --card --sand --line2 --link --hdr-row --g-dark) are in css/looks.css and load on every page; * every other token of the two looks is here. Look B (BLACK) is :root and the default; look A (BLUE) is :root[data-look="A"], set by the head script of inc/ceo-look.php. * Motion moves only under prefers-reduced-motion: no-preference; a reduced-motion visitor gets the finished page at rest from the first paint. */ /* ==== fallback faces (measured, SPEC 7) ==== */ /* Fallback faces, MEASURED on 27 Oct 2026 (build/home-redesign-build_2026-10-27/phase_b/fallback_tune.py and fallback_measure.py) against Arial (the sans faces) and Georgia (the serifs): per face, size-adjust is the ratio of the summed widths of the page's own strings in the web face and in the system font; ascent and descent give the web face's baseline and line box at 100 px. One face per weight, each with the system's own bold or italic (never a synthetic one), so the font swap shifts nothing (SPEC 7: CLS at most 0.01 with the swap). */ @font-face { font-family: "Outfit Fallback"; font-weight: 600 700; font-style: normal; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 95.12%; ascent-override: 105.13%; descent-override: 27.33%; line-gap-override: 0%; } @font-face { font-family: "Jakarta Fallback"; font-weight: 400; font-style: normal; src: local("Arial"); size-adjust: 105.4%; ascent-override: 98.67%; descent-override: 20.87%; line-gap-override: 0%; } @font-face { font-family: "Jakarta Fallback"; font-weight: 500; font-style: normal; src: local("Arial"); size-adjust: 106.76%; ascent-override: 97.41%; descent-override: 20.61%; line-gap-override: 0%; } @font-face { font-family: "Jakarta Fallback"; font-weight: 600; font-style: normal; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99.68%; ascent-override: 104.33%; descent-override: 22.07%; line-gap-override: 0%; } @font-face { font-family: "Jakarta Fallback"; font-weight: 700; font-style: normal; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 100.5%; ascent-override: 103.48%; descent-override: 21.89%; line-gap-override: 0%; } @font-face { font-family: "Archivo Fallback"; font-weight: 400; font-style: normal; src: local("Arial"); size-adjust: 98.67%; ascent-override: 89.19%; descent-override: 21.28%; line-gap-override: 0%; } @font-face { font-family: "Archivo Fallback"; font-weight: 500; font-style: normal; src: local("Arial"); size-adjust: 101.57%; ascent-override: 86.64%; descent-override: 20.68%; line-gap-override: 0%; } @font-face { font-family: "Archivo Fallback"; font-weight: 600; font-style: normal; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 95.83%; ascent-override: 91.83%; descent-override: 21.91%; line-gap-override: 0%; } @font-face { font-family: "Archivo Fallback"; font-weight: 700; font-style: normal; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98.87%; ascent-override: 89.01%; descent-override: 21.24%; line-gap-override: 0%; } @font-face { font-family: "Newsreader Fallback"; font-weight: 400; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 89.84%; ascent-override: 82.37%; descent-override: 30.05%; line-gap-override: 0%; } @font-face { font-family: "Newsreader Fallback"; font-weight: 500; font-style: normal; src: local("Georgia"); size-adjust: 98.14%; ascent-override: 75.4%; descent-override: 27.51%; line-gap-override: 0%; } /* Instrument Serif Fallback: "Net 30 Terms" is 448.41 px at 100 px in the web face and 609.62 px in Georgia Italic */ @font-face { font-family: "Instrument Serif Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia"); size-adjust: 73.55%; ascent-override: 134.59%; descent-override: 42.15%; line-gap-override: 0%; } /* ==== tokens: look B (the default, :root) and look A; the ten tokens the shared header and footer read are in css/looks.css ==== */ :root { --ink: #10141c; --ink2: #1d2430; --paper: #fbf8f3; --sand2: #efe4d6; --line: rgba(16, 20, 28, .09); --acc-ink: #9a4a0b; --glow: 249, 153, 64; --shadow-rgb: 16, 20, 28; --on-dark: #f6f1ea; --on-dark-mut: #c9bfb1; --btn-bg: linear-gradient(180deg, #ffb877 0%, #f99940 100%); --btn-fg: #10141c; --grade: saturate(.98) contrast(1.03) sepia(.04); --fh: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif; --fb: "Archivo", "Archivo Fallback", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --fi: "Newsreader", "Newsreader Fallback", Georgia, serif; --fbtn: 600 1.0625rem/1 var(--fb); --hw: 500; --htrack: -.012em; --hero-lh: 1.04; --ltrack: .18em; --lw: 600; --ital-w: 400; --g-page: #fbf8f3; --g-hero: radial-gradient(46% 64% at 100% 0%, rgba(249, 153, 64, .40) 0%, rgba(249, 153, 64, 0) 72%), radial-gradient(38% 52% at 66% 100%, rgba(240, 168, 104, .30) 0%, rgba(240, 168, 104, 0) 70%), radial-gradient(52% 74% at 0% 100%, #e4ccae 0%, rgba(228, 204, 174, 0) 72%), linear-gradient(165deg, #fdfaf5 0%, #f6ede1 52%, #eedfcb 100%); --g-sec: radial-gradient(40% 70% at 100% 0%, rgba(249, 153, 64, .22) 0%, rgba(249, 153, 64, 0) 70%), radial-gradient(46% 80% at 0% 100%, rgba(214, 178, 138, .36) 0%, rgba(214, 178, 138, 0) 72%), linear-gradient(180deg, #fdfaf6 0%, #f7efe4 100%); --g-sec2: radial-gradient(40% 70% at 0% 0%, rgba(249, 153, 64, .20) 0%, rgba(249, 153, 64, 0) 70%), radial-gradient(46% 80% at 100% 100%, rgba(214, 178, 138, .36) 0%, rgba(214, 178, 138, 0) 72%), linear-gradient(180deg, #f7efe4 0%, #fdfaf6 100%); --g-glow: radial-gradient(closest-side, rgba(249, 153, 64, .36), rgba(249, 153, 64, .12) 55%, rgba(249, 153, 64, 0)); --g-band: radial-gradient(44% 66% at 97% 3%, rgba(249, 153, 64, .34) 0%, rgba(249, 153, 64, 0) 70%), radial-gradient(48% 72% at 2% 98%, rgba(196, 150, 104, .34) 0%, rgba(196, 150, 104, 0) 72%), radial-gradient(36% 50% at 46% 38%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #f5ebde 0%, #ecdac4 100%); --g-studio: radial-gradient(ellipse 70% 62% at 50% 42%, #ffffff 0%, #fbf6ef 46%, #ead9c4 100%), linear-gradient(180deg, #fbf6ef, #e9d6bf); --g-rays: conic-gradient(from 200deg at 70% -10%, rgba(249, 153, 64, 0) 0deg, rgba(249, 153, 64, .07) 12deg, rgba(249, 153, 64, 0) 24deg, rgba(249, 153, 64, .05) 40deg, rgba(249, 153, 64, 0) 58deg); --glass: linear-gradient(135deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .52)); --glass-line: rgba(16, 20, 28, .08); --card-shadow: 0 1px 2px rgba(16, 20, 28, .05), 0 18px 40px -22px rgba(16, 20, 28, .28); --card-shadow-hi: 0 1px 2px rgba(16, 20, 28, .06), 0 30px 60px -24px rgba(16, 20, 28, .36); --h-ink: #10141c; --h-txt: #2c3038; --h-mut: #5e574d; --h-acc: #9a4a0b; --h-link: #10141c; --h-chip: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .58)); --h-chip-line: rgba(16, 20, 28, .09); --h-chip-fg: #2c3038; --h-check: #9a4a0b; --tile-ink: #10141c; --t-hero: clamp(2.25rem, min(1.3rem + 3.05vw, 7.2vh), 4.5rem); --t-h2: clamp(1.875rem, 1.35rem + 1.9vw, 3.25rem); --t-h3: clamp(1.25rem, 1.1rem + .55vw, 1.625rem); --t-lead: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); --maxw: 1540px; --wide: 1540px; --gut: max(20px, env(safe-area-inset-left, 0px)); --gutr: max(20px, env(safe-area-inset-right, 0px)); --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.55, 0, 1, .45); --grain: url("data:image/svg+xml;utf8,"); --i-arrow: url("data:image/svg+xml;utf8,"); --i-chev: url("data:image/svg+xml;utf8,"); --i-check: url("data:image/svg+xml;utf8,"); --i-arrow-ink: url("data:image/svg+xml;utf8,"); --i-plus-ink: url("data:image/svg+xml;utf8,"); --i-plus: url("data:image/svg+xml;utf8,"); } :root[data-look="A"] { --ink: #0b2a5b; --ink2: #123a78; --paper: #ffffff; --sand2: #e6edf7; --line: rgba(11, 42, 91, .10); --acc-ink: #a3500a; --glow: 247, 148, 29; --shadow-rgb: 11, 42, 91; --on-dark: #ffffff; --on-dark-mut: #c7d3e6; --btn-bg: linear-gradient(180deg, #ffad4f 0%, #f7941d 100%); --btn-fg: #0b2a5b; --grade: saturate(1.04) contrast(1.03); --fh: "Outfit", "Outfit Fallback", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --fb: "Plus Jakarta Sans", "Jakarta Fallback", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --fi: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; --fbtn: 700 1.0625rem/1 "Outfit", "Outfit Fallback", "Segoe UI", Arial, sans-serif; --hw: 700; --htrack: -.02em; --hero-lh: 1.02; --ltrack: .14em; --lw: 700; --ital-w: 400; --g-page: #ffffff; --g-hero: radial-gradient(70% 80% at 12% 90%, #1c4a8f 0%, rgba(28, 74, 143, 0) 65%), radial-gradient(120% 90% at 50% 0%, #123a78 0%, #0b2a5b 55%, #071d40 100%); --g-glow: radial-gradient(closest-side, rgba(247, 148, 29, .40), rgba(247, 148, 29, .14) 55%, rgba(247, 148, 29, 0)); --g-band: radial-gradient(44% 66% at 97% 3%, rgba(21, 87, 176, .20) 0%, rgba(21, 87, 176, 0) 70%), radial-gradient(48% 72% at 2% 98%, rgba(247, 148, 29, .16) 0%, rgba(247, 148, 29, 0) 72%), radial-gradient(36% 50% at 46% 38%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #f4f7fc 0%, #e8eef8 100%); --g-sec: radial-gradient(40% 70% at 100% 0%, rgba(21, 87, 176, .19) 0%, rgba(21, 87, 176, 0) 70%), radial-gradient(46% 80% at 0% 100%, rgba(247, 148, 29, .17) 0%, rgba(247, 148, 29, 0) 72%), linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%); --g-sec2: radial-gradient(40% 70% at 0% 0%, rgba(21, 87, 176, .18) 0%, rgba(21, 87, 176, 0) 70%), radial-gradient(46% 80% at 100% 100%, rgba(247, 148, 29, .17) 0%, rgba(247, 148, 29, 0) 72%), linear-gradient(180deg, #f3f6fb 0%, #ffffff 100%); --g-studio: radial-gradient(ellipse 70% 62% at 50% 42%, #ffffff 0%, #f9fbfb 48%, #eef2f7 100%); --g-rays: conic-gradient(from 200deg at 70% -10%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .07) 12deg, rgba(255, 255, 255, 0) 24deg, rgba(255, 255, 255, .05) 40deg, rgba(255, 255, 255, 0) 58deg); --glass: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .60)); --glass-line: rgba(11, 42, 91, .10); --card-shadow: 0 1px 2px rgba(11, 42, 91, .06), 0 18px 40px -22px rgba(11, 42, 91, .30); --card-shadow-hi: 0 1px 2px rgba(11, 42, 91, .07), 0 30px 60px -24px rgba(11, 42, 91, .40); --h-ink: #ffffff; --h-txt: #e3eaf5; --h-mut: #c7d3e6; --h-acc: #ffad4f; --h-link: #ffffff; --h-chip: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); --h-chip-line: rgba(255, 255, 255, .24); --h-chip-fg: #ffffff; --h-check: #ffad4f; --tile-ink: #0b2a5b; --i-arrow-ink: url("data:image/svg+xml;utf8,"); --i-plus-ink: url("data:image/svg+xml;utf8,"); } /* ==== base (replaces preview 100-110): scoped to the home page, so the shared header and footer keep their own box model, type and focus rings ==== */ body.page-template-page-new-home { background: var(--g-page); color-scheme: light; } /* The theme pulls .main-page-wrapper up by 40px (margin-top: -40px) and pads it back (padding-top 40px, 60px in header-footer.css) so the content starts below the header. The approved page starts the hero exactly where the header ends (preview: header bottom == hero top at every width), so both are zeroed together: the menu bar is never covered, whatever the theme's pair is. */ body.page-template-page-new-home .main-page-wrapper { margin-top: 0; padding-top: 0; background: var(--g-page); } .cn-home-page-content, .cn-home-page-content .content-layout-wrapper { display: block; width: 100%; max-width: none; margin: 0; padding: 0; } .cn-home-page-content { overflow-x: clip; color: var(--txt); font: 400 1rem/1.6 var(--fb); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @media (min-width: 1366px) { .cn-home-page-content { font-size: 1.0625rem; } } .cn-home-page-content *, .cn-home-page-content *::before, .cn-home-page-content *::after { box-sizing: border-box; } .cn-home-page-content img { max-width: 100%; } .cn-home-page-content a { color: inherit; } .cn-home-page-content :focus-visible { outline: 2.5px solid var(--acc); outline-offset: 3px; border-radius: 6px; } .cn-home-page-content .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* The theme's global element and button styles reach this page, and the design was drawn without them (found by the element-by-element diff against the preview, harness/fidelity.py) */ .cn-home-page-content :where(ul, ol, li, a) { line-height: inherit; } .cn-home-page-content .btn { text-transform: none; text-align: inherit; } /* ==== the preview's rules, scoped (preview 111-142, 183-420, 429-467) ==== */ .cn-home-page-content .wrap { width: 100%; max-width: calc(var(--maxw) + var(--gut) + var(--gutr)); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gutr); min-width: 0; } .cn-home-page-content .sec { position: relative; padding-block: clamp(40px, 4vw, 80px); background: var(--g-sec); } .cn-home-page-content #services, .cn-home-page-content #blog, .cn-home-page-content #video { background: var(--g-sec2); } .cn-home-page-content .sec--band { background: var(--g-band); overflow: clip; isolation: isolate; } .cn-home-page-content .sec--band::before { content: ""; position: absolute; z-index: -1; width: min(980px, 90vw); aspect-ratio: 1; right: -16%; top: -38%; border-radius: 50%; background: var(--g-glow); opacity: .75; pointer-events: none; } .cn-home-page-content .sec--band::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: var(--grain); opacity: .045; mix-blend-mode: overlay; pointer-events: none; } .cn-home-page-content h1, .cn-home-page-content h2, .cn-home-page-content h3, .cn-home-page-content h4 { margin: 0; font-family: var(--fh); font-weight: var(--hw); letter-spacing: var(--htrack); color: var(--ink); } .cn-home-page-content h2 { font-size: var(--t-h2); line-height: 1.06; text-wrap: balance; } .cn-home-page-content h3 { font-size: var(--t-h3); line-height: 1.2; } .cn-home-page-content p { margin: 0; } .cn-home-page-content .grain { position: absolute; inset: 0; background-image: var(--grain); opacity: var(--grain-o, .06); mix-blend-mode: overlay; pointer-events: none; } .cn-home-page-content .sec-rule { display: block; width: 44px; height: 3px; border-radius: 3px; background: var(--acc); margin: 0 0 22px; } .cn-home-page-content .tl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font: 600 1rem/1.3 var(--fb); text-decoration: underline; text-decoration-color: rgba(var(--glow), .9); text-decoration-thickness: 1.5px; text-underline-offset: 6px; cursor: pointer; transition: color .22s var(--ease-out), text-decoration-color .22s var(--ease-out); } .cn-home-page-content .tl::after { content: ""; width: 15px; height: 15px; flex: none; background: currentColor; -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; transition: transform .22s var(--ease-out); } .cn-home-page-content .tl:hover { text-decoration-color: currentColor; } .cn-home-page-content .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 999px; font: var(--fbtn); letter-spacing: .005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background-color .22s; } @media (max-width: 767px) { .cn-home-page-content .btn { min-height: 56px; } } .cn-home-page-content .btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 1px 2px rgba(var(--shadow-rgb), .14), 0 12px 26px -10px rgba(var(--glow), .75); } .cn-home-page-content .btn--primary::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform .22s var(--ease-out); } .cn-home-page-content .btn--ghost { color: var(--ink); background: transparent; border: 1.5px solid var(--line2); } .cn-home-page-content .btn--ghost:hover { border-color: var(--ink); } .cn-home-page-content .hero { position: relative; overflow: clip; isolation: isolate; background: var(--g-hero); color: var(--h-txt); padding-block: clamp(36px, 4.4vw, 84px) clamp(56px, 6vw, 108px); } .cn-home-page-content .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .cn-home-page-content .hero__glow { position: absolute; width: min(1180px, 105vw); aspect-ratio: 1; right: -18%; top: -34%; background: var(--g-glow); border-radius: 50%; } .cn-home-page-content .hero__depth { position: absolute; inset: 0; } .cn-home-page-content .hero__arc { position: absolute; width: min(1500px, 140vw); aspect-ratio: 1; right: -46%; top: -52%; border-radius: 50%; border: 1px solid rgba(var(--glow), .22); box-shadow: inset 0 0 0 64px rgba(var(--glow), .025); } .cn-home-page-content .hero .grain { --grain-o: .05; } :root[data-look="A"] .cn-home-page-content .hero .grain { --grain-o: .08; } .cn-home-page-content .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: calc(var(--wide) + var(--gut) + var(--gutr)); } @media (min-width: 1024px) { .cn-home-page-content .hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 4.6vw, 88px); } } .cn-home-page-content .hero__lt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .cn-home-page-content .hero .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font: var(--lw) .75rem/1.2 var(--fb); letter-spacing: var(--ltrack); text-transform: uppercase; color: var(--h-mut); } .cn-home-page-content .hero .eyebrow::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: var(--acc); } .cn-home-page-content .hero h1 { max-width: 13.5ch; font-size: var(--t-hero); line-height: var(--hero-lh); color: var(--h-ink); text-wrap: balance; } .cn-home-page-content .hero h1 .ital { font-family: var(--fi); font-style: italic; font-weight: var(--ital-w); color: var(--h-acc); letter-spacing: -.005em; } :root[data-look="A"] .cn-home-page-content .hero h1 .ital { font-size: 1.08em; letter-spacing: 0; } .cn-home-page-content .hero .sub { max-width: 44ch; margin: 24px 0 0; font-size: var(--t-lead); line-height: 1.5; color: var(--h-txt); } .cn-home-page-content .hero .grow { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font: 600 1rem/1.4 var(--fb); color: var(--h-ink); } .cn-home-page-content .hero .grow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 5px rgba(var(--glow), .2); } .cn-home-page-content .doors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-top: 30px; } .cn-home-page-content .doors .btn { min-height: 58px; padding: 0 32px; font-size: 1.125rem; } .cn-home-page-content .hero .tl { color: var(--h-link); } .cn-home-page-content .hero .call { margin: 18px 0 0; font: 400 .9375rem/1.5 var(--fb); color: var(--h-mut); } .cn-home-page-content .hero .call a { display: inline-flex; align-items: center; min-height: 44px; color: var(--h-ink); font-weight: 600; text-decoration-color: rgba(var(--glow), .9); text-underline-offset: 4px; } .cn-home-page-content .chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .cn-home-page-content .chip { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--h-chip); border: 1px solid var(--h-chip-line); color: var(--h-chip-fg); font: 500 .9rem/1.3 var(--fb); box-shadow: 0 6px 18px -12px rgba(var(--shadow-rgb), .45); } .cn-home-page-content .chip::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--h-check); -webkit-mask: var(--i-check) center / 15px no-repeat; mask: var(--i-check) center / 15px no-repeat; } .cn-home-page-content .seal { display: inline-flex; align-items: center; gap: 12px; padding: 7px 16px 7px 7px; border-radius: 16px; background: #ffffff; border: 1px solid rgba(16, 20, 28, .08); color: #10141c; font: 600 .875rem/1.2 var(--fb); text-decoration: none; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .08), 0 14px 30px -14px rgba(var(--shadow-rgb), .45); } .cn-home-page-content .seal__img { display: block; width: 168px; height: 35px; flex: none; border-radius: 6px; overflow: hidden; background: #0b6583; } .cn-home-page-content .seal__img img { display: block; width: 168px; height: 35px; } .cn-home-page-content .hero__seal-m { order: 0; margin-top: 18px; } @media (max-width: 1023px) { .cn-home-page-content .hero__seal-m { order: 6; margin-top: 16px; } .cn-home-page-content .hero .call { order: 7; } .cn-home-page-content .chips { order: 8; } } @media (min-width: 1024px) { .cn-home-page-content .hero__seal-m { display: none; } } .cn-home-page-content .hero__rt { position: relative; min-width: 0; } .cn-home-page-content .hero__seal-d { position: relative; z-index: 4; margin: 0 0 20px; } @media (max-width: 1023px) { .cn-home-page-content .hero__seal-d { display: none; } } .cn-home-page-content .hero__tile { position: relative; width: 100%; } .cn-home-page-content .stage { position: relative; display: block; aspect-ratio: 1 / .9; border-radius: 34px; overflow: hidden; isolation: isolate; background: var(--g-studio); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06), 0 32px 64px -22px rgba(var(--shadow-rgb), .30), 0 90px 150px -70px rgba(var(--shadow-rgb), .40), inset 0 0 0 1px rgba(255, 255, 255, .75); transform-origin: 50% 60%; } .cn-home-page-content .stage__ring { position: absolute; z-index: -1; left: 12%; top: 4%; width: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--glow), .16), rgba(var(--glow), .04) 70%, rgba(var(--glow), 0)); box-shadow: inset 0 0 0 1px rgba(var(--glow), .30); } .cn-home-page-content .stage__floor { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(var(--shadow-rgb), 0), rgba(var(--shadow-rgb), .05)); } .cn-home-page-content .stage__shadow { position: absolute; z-index: -1; left: 14%; right: 14%; bottom: 10.5%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--shadow-rgb), .30), rgba(var(--shadow-rgb), .10) 60%, rgba(var(--shadow-rgb), 0)); } .cn-home-page-content .stage__obj { position: absolute; left: 8%; top: 8%; width: 84%; height: 80%; object-fit: contain; object-position: 50% 55%; mix-blend-mode: multiply; filter: var(--grade); } .cn-home-page-content .stage__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 46% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(115deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 36%); mix-blend-mode: screen; } .cn-home-page-content .ltile { position: absolute; z-index: 3; display: grid; place-items: center; width: var(--s, 64px); height: var(--s, 64px); border-radius: 18px; background: linear-gradient(160deg, var(--ink2), var(--ink)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(var(--shadow-rgb), .18), 0 18px 32px -12px rgba(var(--shadow-rgb), .55); } .cn-home-page-content .ltile svg { width: 64%; height: 64%; display: block; } .cn-home-page-content .ltile--1 { --s: 72px; top: 0; right: 9%; transform: rotate(8deg); } .cn-home-page-content .ltile--2 { --s: 52px; top: 40%; right: -14px; transform: rotate(-10deg); } .cn-home-page-content .ltile--3 { --s: 60px; bottom: -6px; left: 14%; transform: rotate(-6deg); } .cn-home-page-content .ltile--4 { --s: 42px; bottom: 16%; left: -14px; transform: rotate(12deg); } @media (max-width: 1023px) { .cn-home-page-content .ltile--1 { top: -14px; right: 8%; } .cn-home-page-content .ltile--2 { right: 8px; } .cn-home-page-content .ltile--4 { left: 8px; } .cn-home-page-content .ltile--3 { bottom: -16px; } } @media (max-width: 599px) { .cn-home-page-content .ltile--2, .cn-home-page-content .ltile--4 { display: none; } .cn-home-page-content .ltile--1 { --s: 54px; } .cn-home-page-content .ltile--3 { --s: 46px; } } .cn-home-page-content .seen { position: relative; background: var(--g-sec2); padding: clamp(28px, 2.8vw, 44px) 0; border-bottom: 1px solid var(--line); } .cn-home-page-content .seen .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; } .cn-home-page-content .seen h2 { display: flex; align-items: center; gap: 16px; font: var(--lw) .75rem/1.2 var(--fb); letter-spacing: var(--ltrack); color: var(--mut); text-transform: uppercase; } .cn-home-page-content .seen h2::before, .cn-home-page-content .seen h2::after { content: ""; width: clamp(28px, 6vw, 80px); height: 1px; background: var(--line2); } .cn-home-page-content .seen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 12px; justify-content: center; } @media (min-width: 640px) { .cn-home-page-content .seen ul { grid-template-columns: repeat(4, 172px); gap: 16px; } } .cn-home-page-content .seen li a { display: grid; place-items: center; height: 148px; border-radius: 18px; background: #ffffff; border: 1px solid var(--line); box-shadow: var(--card-shadow); transition: box-shadow .22s var(--ease-out), border-color .22s; } .cn-home-page-content .seen li a:hover { border-color: var(--line2); } .cn-home-page-content .seen img { display: block; width: auto; height: auto; max-width: 125px; } .cn-home-page-content .studio { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: 18px; background: var(--g-studio); } .cn-home-page-content .studio::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 50% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%); mix-blend-mode: screen; } .cn-home-page-content .studio__shadow { position: absolute; z-index: -1; left: 22%; right: 22%; bottom: 9%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--shadow-rgb), .30), rgba(var(--shadow-rgb), .08) 62%, rgba(var(--shadow-rgb), 0)); } .cn-home-page-content .studio img { position: absolute; left: 13%; top: 9%; width: 74%; height: 76%; object-fit: contain; object-position: 50% 55%; mix-blend-mode: multiply; filter: var(--grade); } .cn-home-page-content .studio--lift img { filter: brightness(1.13) contrast(1.06) var(--grade); } .cn-home-page-content .studio--photo { background: var(--sand2); } .cn-home-page-content .studio--photo img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; mix-blend-mode: normal; } .cn-home-page-content .studio--photo .studio__shadow { display: none; } .cn-home-page-content .studio--garment img { left: 10%; top: 0; margin-top: -7%; width: 80%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: 50% 0; filter: brightness(1.12) contrast(1.08) saturate(.92) var(--grade); -webkit-mask-image: radial-gradient(ellipse 16% 19% at 47% 3%, transparent 84%, #000 100%), linear-gradient(180deg, #000 0, #000 84%, transparent 93%), linear-gradient(90deg, transparent 0, transparent 6%, #000 12%, #000 89%, transparent 95%); -webkit-mask-composite: source-in, source-in; mask-image: radial-gradient(ellipse 16% 19% at 47% 3%, transparent 84%, #000 100%), linear-gradient(180deg, #000 0, #000 84%, transparent 93%), linear-gradient(90deg, transparent 0, transparent 6%, #000 12%, #000 89%, transparent 95%); mask-composite: intersect, intersect; } .cn-home-page-content .studio--garment .studio__shadow { bottom: 13%; left: 26%; right: 26%; } .cn-home-page-content .studio--ai { background: var(--sand2); } .cn-home-page-content .studio--ai::after, .cn-home-page-content .studio--ai .studio__shadow { display: none; } .cn-home-page-content .studio--ai img, .cn-home-page-content .svc__pic.studio--ai img:not(.devices) { left: 0; top: 0; width: 100%; height: 100%; margin-top: 0; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; mix-blend-mode: normal; filter: none; -webkit-mask-image: none; mask-image: none; } :root[data-look="A"] .cn-home-page-content .svc__pic.studio:not(.studio--ai) { background: radial-gradient(ellipse 70% 62% at 50% 42%, #ffffff 0%, #fbf6ef 46%, #ead9c4 100%), linear-gradient(180deg, #fbf6ef, #e9d6bf); } .cn-home-page-content .studio--ai::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .cn-home-page-content .stage--ai { background: var(--sand2); } .cn-home-page-content .hero__tile .ltile--1 { top: calc(var(--s) * -.5); } .cn-home-page-content .hero__tile .ltile--2 { top: 64%; } .cn-home-page-content .hero__tile .ltile--4 { bottom: 8%; } .cn-home-page-content .stage--ai .stage__obj { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; mix-blend-mode: normal; filter: none; } .cn-home-page-content .studio--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); background: linear-gradient(180deg, rgba(var(--shadow-rgb), 0) 55%, rgba(var(--shadow-rgb), .22) 100%); } .cn-home-page-content .sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 2.4vw, 40px); } .cn-home-page-content .sec__head h2 { max-width: 18ch; } .cn-home-page-content .tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); } @media (min-width: 900px) { .cn-home-page-content .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cn-home-page-content .tiles li { min-width: 0; } .cn-home-page-content .tile { display: flex; flex-direction: column; height: 100%; padding: 10px 10px 0; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); color: var(--tile-ink); text-decoration: none; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s; } .cn-home-page-content .tile__pic { aspect-ratio: 1 / 1; border-radius: 18px; } @media (min-width: 900px) { .cn-home-page-content .tile__pic { aspect-ratio: 6 / 5; } } .cn-home-page-content .tile__lab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 12px 8px 14px 10px; font: 600 1.0625rem/1.25 var(--fb); color: var(--tile-ink); } .cn-home-page-content .tile__lab::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--i-arrow-ink) center / 16px no-repeat, var(--sand); box-shadow: inset 0 0 0 1px var(--line); transition: transform .22s var(--ease-out); } .cn-home-page-content .tile:hover { border-color: var(--line2); box-shadow: var(--card-shadow-hi); } .cn-home-page-content .more { margin-top: clamp(20px, 2vw, 32px); display: grid; gap: 16px; } @media (min-width: 1024px) { .cn-home-page-content .more { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } } .cn-home-page-content .more h3 { font: var(--lw) .75rem/1.2 var(--fb); letter-spacing: var(--ltrack); text-transform: uppercase; color: var(--mut); padding-top: 16px; } .cn-home-page-content .pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .cn-home-page-content .pills a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); font: 500 .9375rem/1.2 var(--fb); text-decoration: none; transition: border-color .2s, background-color .2s; } .cn-home-page-content .pills a:hover { border-color: var(--line2); background: var(--card); } .cn-home-page-content #how .wrap > h2 { margin-bottom: clamp(22px, 2.2vw, 36px); } .cn-home-page-content .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 900px) { .cn-home-page-content .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; } } .cn-home-page-content .step { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 26px 26px 30px; border-radius: 26px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--card-shadow); } .cn-home-page-content .step__pic { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 26px; background: var(--g-studio); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 16px 30px -16px rgba(var(--shadow-rgb), .45); } .cn-home-page-content .step__ico { display: block; width: 64px; height: 64px; } .cn-home-page-content .step__ico .i-n { fill: var(--ink); } .cn-home-page-content .step__ico .i-w { fill: #ffffff; } .cn-home-page-content .step__ico .i-a { fill: var(--acc); } .cn-home-page-content .step__ico .i-as { fill: none; stroke: var(--acc); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .cn-home-page-content .step__n { position: absolute; top: 18px; right: 26px; font: var(--hw) clamp(3.25rem, 2.6rem + 1.6vw, 4.5rem)/1 var(--fh); color: var(--acc-ink); letter-spacing: -.02em; } .cn-home-page-content .step h3 { font-family: var(--fb); font-weight: 600; font-size: clamp(1.125rem, 1.05rem + .35vw, 1.375rem); line-height: 1.3; letter-spacing: 0; color: var(--ink); } .cn-home-page-content .svc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } @media (min-width: 900px) { .cn-home-page-content .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } .cn-home-page-content .svc__c { display: flex; flex-direction: column; min-width: 0; padding: 12px; border-radius: 30px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); } .cn-home-page-content .svc__pic { aspect-ratio: 16 / 10; border-radius: 22px; } .cn-home-page-content .svc__pic img.devices { left: 4%; top: 7%; width: 92%; height: 84%; mix-blend-mode: normal; filter: url(#pv-alpha-clean) var(--grade); } .cn-home-page-content .svc__pic img:not(.devices) { left: 16%; top: 8%; width: 68%; height: 80%; } .cn-home-page-content .svc__b { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: 1; padding: 26px 18px 18px; } .cn-home-page-content .svc__b h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1.12; text-wrap: wrap; } .cn-home-page-content .svc__b p { color: var(--mut); font-size: 1.0625rem; } .cn-home-page-content .svc__b .btn { margin-top: auto; } .cn-home-page-content .svc__b h2 + .btn { margin-top: 14px; } .cn-home-page-content .mem h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.875rem); line-height: 1.1; } .cn-home-page-content .mem__ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px; background: var(--g-studio); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 20px -12px rgba(var(--shadow-rgb), .45); } .cn-home-page-content .mem__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cn-home-page-content .mem__ico svg .a { stroke: var(--acc-ink); } .cn-home-page-content .vid__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; } @media (min-width: 1024px) { .cn-home-page-content .vid__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(40px, 4vw, 72px); } } .cn-home-page-content .vid__head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.5rem); line-height: 1.05; } .cn-home-page-content .video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 30px; overflow: hidden; isolation: isolate; background: var(--g-dark); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .1), 0 40px 80px -30px rgba(var(--shadow-rgb), .55); } .cn-home-page-content .video__poster { position: absolute; inset: 0; display: block; background: var(--g-dark); } .cn-home-page-content .video__poster::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: radial-gradient(50% 70% at 50% 100%, rgba(var(--glow), .30) 0%, rgba(var(--glow), 0) 70%); } .cn-home-page-content .video__logo { z-index: 2; } .cn-home-page-content .video__rays { position: absolute; inset: 0; background: var(--g-rays); -webkit-mask-image: linear-gradient(#000 0 40%, transparent 80%); mask-image: linear-gradient(#000 0 40%, transparent 80%); } .cn-home-page-content .video__rings { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 255, 255, .06) 0 1px, transparent 1px 62px); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); } .cn-home-page-content .video .grain { --grain-o: .10; } .cn-home-page-content .video__logo { position: absolute; left: 0; right: 0; top: 9%; margin: 0 auto; display: block; width: clamp(150px, 24%, 240px); height: auto; } .cn-home-page-content .video__play { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; display: grid; place-items: center; border-radius: 50%; background: var(--btn-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 20px 40px -12px rgba(var(--glow), .7); transition: transform .3s var(--ease-out); } .cn-home-page-content .video__play::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); } .cn-home-page-content .video__play span { width: 0; height: 0; margin-left: 7px; border-left: 26px solid var(--btn-fg); border-top: 16px solid transparent; border-bottom: 16px solid transparent; } .cn-home-page-content #more-products .wrap > h2 { margin-bottom: clamp(22px, 2.2vw, 36px); } .cn-home-page-content .fold { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } @media (min-width: 900px) { .cn-home-page-content .fold { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; } } .cn-home-page-content .fold details { border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); overflow: hidden; } .cn-home-page-content .fold summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 0 20px 0 24px; cursor: pointer; font: 600 1.0625rem/1.3 var(--fb); color: var(--ink); } .cn-home-page-content .fold summary::-webkit-details-marker { display: none; } .cn-home-page-content .fold summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--i-plus-ink) center / 16px no-repeat, var(--sand); box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--ease-out); } .cn-home-page-content .fold details[open] summary::after { transform: rotate(45deg); } .cn-home-page-content .fold__b { padding: 0 24px 24px; color: var(--txt); } .cn-home-page-content .fold__b h3 { font: 700 1rem/1.3 var(--fb); letter-spacing: 0; margin-bottom: 8px; } .cn-home-page-content .fold__b h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration-color: rgba(var(--glow), .9); text-underline-offset: 5px; } .cn-home-page-content .fold__b p { white-space: pre-line; font-size: .98rem; line-height: 1.65; } .cn-home-page-content .fold__b ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .cn-home-page-content .fold__b li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink); font: 500 .9rem/1.2 var(--fb); text-decoration: none; } .cn-home-page-content #blog .wrap > h2 { margin-bottom: clamp(22px, 2.2vw, 36px); } .cn-home-page-content .blog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } @media (min-width: 640px) { .cn-home-page-content .blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .cn-home-page-content .blog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } .cn-home-page-content .blog li { min-width: 0; } .cn-home-page-content .post { display: flex; flex-direction: column; height: 100%; padding: 10px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s; } .cn-home-page-content .post__pic { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; isolation: isolate; background: var(--sand2); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .08), 0 22px 40px -24px rgba(var(--shadow-rgb), .55); } .cn-home-page-content .post__pic img { display: block; width: 106%; height: 106%; margin: -3%; object-fit: cover; object-position: 50% 35%; filter: saturate(.82) contrast(1.08) brightness(1.03) sepia(.14) var(--grade); } .cn-home-page-content .post__pic::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(135deg, rgba(var(--glow), .55) 0%, rgba(var(--glow), 0) 48%), linear-gradient(315deg, rgba(var(--shadow-rgb), .55) 0%, rgba(var(--shadow-rgb), 0) 55%); } .cn-home-page-content .post__pic::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 7px var(--card), inset 0 0 0 8px rgba(var(--shadow-rgb), .10), inset 0 -60px 60px -40px rgba(var(--shadow-rgb), .30); background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .16) 44%, rgba(255, 255, 255, 0) 58%); } .cn-home-page-content .post h3 { padding: 16px 8px 10px; font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); line-height: 1.28; } .cn-home-page-content .post:hover { border-color: var(--line2); box-shadow: var(--card-shadow-hi); } .cn-home-page-content .close { position: relative; overflow: clip; isolation: isolate; background: var(--g-dark); color: var(--on-dark); text-align: center; padding-block: clamp(48px, 3.4vw, 66px); } .cn-home-page-content .close__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .cn-home-page-content .close__rays { position: absolute; inset: 0; background: var(--g-rays); -webkit-mask-image: linear-gradient(#000 0 40%, transparent 75%); mask-image: linear-gradient(#000 0 40%, transparent 75%); } .cn-home-page-content .close__glow { position: absolute; left: 50%; bottom: -60%; width: min(1200px, 130vw); aspect-ratio: 1; margin-left: calc(min(1200px, 130vw) / -2); border-radius: 50%; background: var(--g-glow); } .cn-home-page-content .close .grain { --grain-o: .09; } .cn-home-page-content .close .wrap { position: relative; display: flex; flex-direction: column; align-items: center; } .cn-home-page-content .close h2 { color: var(--on-dark); font-size: clamp(2.5rem, 1.5rem + 4vw, 6rem); line-height: 1; letter-spacing: -.02em; max-width: 16ch; } .cn-home-page-content .acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: clamp(24px, 2.2vw, 36px); } .cn-home-page-content .close .tl { color: var(--on-dark); } .cn-home-page-content .close .ltile { background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .6); } .cn-home-page-content .close .ltile--1 { top: 16%; left: 9%; right: auto; transform: rotate(-9deg); } .cn-home-page-content .close .ltile--2 { top: 22%; right: 10%; transform: rotate(11deg); } .cn-home-page-content .close .ltile--3 { bottom: 14%; left: 17%; transform: rotate(7deg); } .cn-home-page-content .close .ltile--4 { bottom: 18%; right: 16%; left: auto; transform: rotate(-12deg); } @media (max-width: 899px) { .cn-home-page-content .close .ltile--2, .cn-home-page-content .close .ltile--3 { display: none; } .cn-home-page-content .close .ltile--1 { top: 18px; left: 18px; } .cn-home-page-content .close .ltile--4 { bottom: 18px; right: 18px; } } @media (max-width: 599px) { .cn-home-page-content .close .ltile { display: none; } } @media (min-width: 1024px) { .cn-home-page-content .hero { --t-hero: clamp(2.25rem, min(1.05rem + 2.4vw, 6.4vh), 3.75rem); padding-block: clamp(30px, 2.8vw, 52px) clamp(40px, 3.6vw, 66px); } .cn-home-page-content .hero__grid { gap: clamp(32px, 3.4vw, 64px); } .cn-home-page-content .hero .eyebrow { margin-bottom: 18px; } .cn-home-page-content .hero h1 { max-width: 20ch; } .cn-home-page-content .hero .sub { margin-top: 20px; } .cn-home-page-content .hero .grow { margin-top: 14px; } .cn-home-page-content .hero .doors { margin-top: 26px; } .cn-home-page-content .hero .call { margin-top: 6px; } .cn-home-page-content .hero .chips { margin-top: 2px; } .cn-home-page-content .hero__seal-d { margin-bottom: 14px; } .cn-home-page-content .hero__tile .stage { aspect-ratio: 3 / 2; } .cn-home-page-content .hero__tile .stage--ai .stage__obj { object-fit: cover; object-position: 50% 50%; } } .cn-home-page-content .how__intro { max-width: 62ch; margin: calc(-1 * clamp(8px, 1vw, 14px)) 0 clamp(22px, 2.4vw, 34px); color: var(--txt); font-size: var(--t-lead); line-height: 1.55; } .cn-home-page-content .step h3 + p { margin-top: -6px; color: var(--txt); font-size: 1rem; line-height: 1.55; } .cn-home-page-content .how__tier { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; row-gap: 6px; align-items: center; margin-top: clamp(18px, 2vw, 28px); padding: 24px 28px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); } .cn-home-page-content .how__ico, .cn-home-page-content .mem__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: var(--g-studio); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 20px -12px rgba(var(--shadow-rgb), .45); } .cn-home-page-content .how__ico { grid-row: 1 / span 2; } .cn-home-page-content .how__ico svg, .cn-home-page-content .mem__ico svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cn-home-page-content .how__ico svg .a, .cn-home-page-content .mem__ico svg .a { stroke: var(--acc-ink); } .cn-home-page-content .how__vend { margin: 0; color: var(--txt); font-size: 1rem; line-height: 1.5; } .cn-home-page-content .how__tierline { margin: 0; max-width: 110ch; color: var(--ink); font: 600 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.45 var(--fb); } @media (max-width: 599px) { .cn-home-page-content .how__tier { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; row-gap: 12px; } .cn-home-page-content .how__ico { grid-row: auto; } } .cn-home-page-content .ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: clamp(22px, 2.4vw, 32px); } .cn-home-page-content .mem h2 { max-width: 22ch; margin-bottom: clamp(24px, 2.6vw, 40px); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.875rem); line-height: 1.1; text-wrap: balance; } .cn-home-page-content .mem__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 640px) { .cn-home-page-content .mem__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .cn-home-page-content .mem__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } .cn-home-page-content .mem__c { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 26px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); } .cn-home-page-content .mem__ico { margin-bottom: 18px; } .cn-home-page-content .mem__c h3 { margin-bottom: 8px; font-family: var(--fb); font-weight: 700; font-size: 1.125rem; letter-spacing: 0; line-height: 1.3; } .cn-home-page-content .mem__c p { color: var(--txt); font-size: 1rem; line-height: 1.6; } /* ==== video poster (SPEC 2.3): the devices picture is an , not a CSS background of ::after (that was fetched before load); the dark gradient stays on its ::after, the filter on the whole ==== */ .cn-home-page-content .video__dev { position: absolute; left: 9%; right: 9%; bottom: 3%; height: 62%; opacity: .92; filter: brightness(.82) saturate(.95) drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); } .cn-home-page-content .video__dev img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; } .cn-home-page-content .video__dev::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 20, 28, 0) 35%, rgba(16, 20, 28, .55) 100%); } .cn-home-page-content .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ==== motion (SPEC 6): CSS only plus one IntersectionObserver in js/home.js. Everything moves ONLY when motion is allowed. Transform and opacity only, through the individual properties translate and scale, so the static rotations of the logo tiles and the hover transforms are never overwritten. Every start state that hides something exists only under .ceo-io (set by js/home.js) and only until the element has been revealed; the hero's load animation ends at rest within 1.0 s and uses fill-mode backwards, so nothing it touches stays under its control. Dropped from the preview (SPEC 6.2): the word-by-word headline, every scroll-linked motion and parallax, the 3D tilt, scrubbed tweens. ==== */ @keyframes cnh-drift { to { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.06); } } @keyframes cnh-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes cnh-up { from { opacity: 0; translate: 0 var(--ty, 14px); } } @keyframes cnh-fade { from { opacity: 0; } } @keyframes cnh-settle { from { scale: 1.04; } } @keyframes cnh-rise { from { opacity: 0; translate: 0 40%; } } @keyframes cnh-stand { from { scale: .94; translate: 0 18px; } } @keyframes cnh-well { from { scale: .82; } } @keyframes cnh-pop { from { scale: .7; } } @media (prefers-reduced-motion: no-preference) { /* the preview's own animated rules (the glows' drift, the play button's ping), converted */ .cn-home-page-content .sec--band::before { animation: cnh-drift 38s ease-in-out infinite alternate; } .cn-home-page-content .drift { will-change: transform; animation: cnh-drift var(--drift-t, 32s) ease-in-out infinite alternate; } .cn-home-page-content .video__play::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(var(--glow), .6); animation: cnh-ping 2.6s var(--ease-out) infinite; } /* M1: the hero, on load (every delay plus duration at most 1.0 s) */ .cn-home-page-content .hero .eyebrow { animation: cnh-up .5s var(--ease-out) backwards; } .cn-home-page-content .hero h1 { animation: cnh-up .6s var(--ease-out) .06s backwards; } .cn-home-page-content .hero .sub { animation: cnh-up .5s var(--ease-out) .25s backwards; } .cn-home-page-content .hero .grow { animation: cnh-up .5s var(--ease-out) .3s backwards; } .cn-home-page-content .hero .doors > a:nth-child(1) { animation: cnh-up .45s var(--ease-out) .4s backwards; } .cn-home-page-content .hero .doors > a:nth-child(2) { animation: cnh-up .45s var(--ease-out) .45s backwards; } .cn-home-page-content .hero .doors > a:nth-child(3) { animation: cnh-up .45s var(--ease-out) .5s backwards; } .cn-home-page-content .hero .call { animation: cnh-up .4s var(--ease-out) .55s backwards; } .cn-home-page-content .hero .chip:nth-child(1) { animation: cnh-up .4s var(--ease-out) .6s backwards; } .cn-home-page-content .hero .chip:nth-child(2) { animation: cnh-up .35s var(--ease-out) .65s backwards; } .cn-home-page-content .hero__seal-m { animation: cnh-up .35s var(--ease-out) .65s backwards; } .cn-home-page-content .hero .stage__obj { transform-origin: 100% 50%; animation: cnh-settle .8s var(--ease-out) .15s backwards; } .cn-home-page-content .hero__tile .ltile--1 { animation: cnh-rise .5s var(--ease-out) .3s backwards; } .cn-home-page-content .hero__tile .ltile--2 { animation: cnh-rise .5s var(--ease-out) .36s backwards; } .cn-home-page-content .hero__tile .ltile--3 { animation: cnh-rise .5s var(--ease-out) .42s backwards; } .cn-home-page-content .hero__tile .ltile--4 { animation: cnh-rise .5s var(--ease-out) .48s backwards; } .cn-home-page-content .hero__seal-d { animation: cnh-fade .35s ease-out .6s backwards; } /* M2 and the rest: the reveal on scroll. .rv = fade and rise (a heading 16 px, a follower 20 px, a step 40 px), .rz = a container whose picture settles or stands up. Hidden only while the element is not yet .in, and only under .ceo-io; the reveal is an animation (never a transition), so the elements' own hover transitions stay. */ .ceo-io .cn-home-page-content .rv:not(.in) { opacity: 0; translate: 0 20px; } .ceo-io .cn-home-page-content .rv-h:not(.in) { translate: 0 16px; } .ceo-io .cn-home-page-content .rv-s:not(.in) { translate: 0 40px; } .ceo-io .cn-home-page-content .rv.in:not(.rn) { --ty: 20px; animation: cnh-up .5s var(--ease-out) var(--rd, 0ms) backwards; } .ceo-io .cn-home-page-content .rv-h.in:not(.rn) { --ty: 16px; animation-duration: .34s; } .ceo-io .cn-home-page-content .rv-s.in:not(.rn) { --ty: 40px; animation-duration: .85s; } .ceo-io .cn-home-page-content .rz-p:not(.in) img { scale: 1.04; } .ceo-io .cn-home-page-content .rz-p.in:not(.rn) img { animation: cnh-settle .8s var(--ease-out) backwards; } .ceo-io .cn-home-page-content .rz-d:not(.in) .devices { scale: .94; translate: 0 18px; } .ceo-io .cn-home-page-content .rz-d.in:not(.rn) .devices { animation: cnh-stand .7s var(--ease-out) backwards; } .ceo-io .cn-home-page-content .rv-s.in:not(.rn) .step__pic { animation: cnh-well .6s var(--ease-out) calc(var(--rd, 0ms) + .25s) backwards; } .ceo-io .cn-home-page-content .rz-v.in:not(.rn) .video__play { animation: cnh-pop .7s var(--ease-out) backwards; } } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { /* the preview's hover lifts, converted */ .cn-home-page-content .tl:hover::after { transform: translateX(3px); } .cn-home-page-content .btn--primary:hover::after { transform: translateX(4px); } .cn-home-page-content .btn--primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 4px rgba(var(--shadow-rgb), .14), 0 18px 34px -12px rgba(var(--glow), .85); } .cn-home-page-content .tile:hover .tile__lab::after { transform: translateX(3px); } .cn-home-page-content .tile:hover { transform: translateY(-6px); } .cn-home-page-content .video:hover .video__play { transform: scale(1.06); } .cn-home-page-content .post:hover { transform: translateY(-6px); } } /* ==== print (the L6 review of 27 Oct): the reveal's hidden start state is a screen effect. A page printed (or saved as a PDF) before it was scrolled printed every unrevealed section blank (opacity 0) and shifted. In print every .rv shows, in place, and nothing animates. The selectors are the hidden states' own, so the specificity is the same, and this block is later in the file. ==== */ @media print { .ceo-io .cn-home-page-content .rv:not(.in) { opacity: 1; translate: none; } .ceo-io .cn-home-page-content .rz-p:not(.in) img { scale: none; } .ceo-io .cn-home-page-content .rz-d:not(.in) .devices { scale: none; translate: none; } .cn-home-page-content *, .cn-home-page-content *::before, .cn-home-page-content *::after { animation: none !important; transition: none !important; } } /* ==== a blog post without a featured image: the designed dark tile, never the logo and never a missing file (SPEC 2.3) ==== */ .cn-home-page-content .post__pic--none { background: var(--g-dark); } /* ==== two fixes the production header and the layout checks asked for (neither is in the approved preview, whose header is taller) ==== */ /* a short phone screen (360 x 640 and shorter): the three doors must end inside the first screen (PLAN 229-235); with the hero starting where the 95 px phone header ends, the look-B third door ended 5 px low, so the hero's own top rhythm gives up 14 px there and nowhere else */ @media (max-width: 599px) and (max-height: 700px) { .cn-home-page-content .hero { padding-block-start: 26px; } .cn-home-page-content .hero .eyebrow { margin-bottom: 18px; } } /* 1024 to 1060 px: the first logo tile's corner met the end of the seal's text (8 x 10 px in look B, 12 x 9 in look A; the same in the approved preview); it sits 20 px further right there */ @media (min-width: 1024px) and (max-width: 1060px) { .cn-home-page-content .hero__tile .ltile--1 { right: calc(8% - 20px); } } /* ==== reduced motion: the page at rest from the first paint; nothing animates or transitions, hover shows by colour only (GOAL 6) ==== */ @media (prefers-reduced-motion: reduce) { .cn-home-page-content *, .cn-home-page-content *::before, .cn-home-page-content *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ==== ch -> em (measured 27 Oct, phase_b/ch_to_em.py): the preview's max-widths in ch re-wrapped the look-A hero when the web face replaced its fallback (a zero is 26% wider in Outfit than in Arial Bold; CLS 0.19). Each value is the em nearest the preview's own for which the block's height is the same with the web face, with its fallback, and as the preview's ch gives with the web face, at every width tested. ==== */ .cn-home-page-content .hero h1 { max-width: 8.056em; } @media (min-width: 1024px) { .cn-home-page-content .hero h1 { max-width: 12.019em; } } .cn-home-page-content .hero .sub { max-width: 25.21em; } .cn-home-page-content .sec__head h2 { max-width: 10.605em; } .cn-home-page-content .close h2 { max-width: 9.618em; } .cn-home-page-content .how__intro { max-width: 35.523em; } .cn-home-page-content .how__tierline { max-width: 63.25em; } .cn-home-page-content .mem h2 { max-width: 12.89em; } :root[data-look="A"] .cn-home-page-content .hero h1 { max-width: 8.991em; } @media (min-width: 1024px) { :root[data-look="A"] .cn-home-page-content .hero h1 { max-width: 13.319em; } } :root[data-look="A"] .cn-home-page-content .hero .sub { max-width: 32.205em; } :root[data-look="A"] .cn-home-page-content .sec__head h2 { max-width: 11.988em; } :root[data-look="A"] .cn-home-page-content .close h2 { max-width: 10.656em; } :root[data-look="A"] .cn-home-page-content .how__intro { max-width: 45.38em; } :root[data-look="A"] .cn-home-page-content .how__tierline { max-width: 78.76em; } :root[data-look="A"] .cn-home-page-content .mem h2 { max-width: 14.651em; }