/* No @imports here: each one is another render-blocking round trip before first paint. Montagu Slab / Roboto were unused; Material Symbols is inline SVG now; Departure Mono's face is declared inline below. */ @font-face { font-family: "Departure Mono"; src: url("../fonts/departure-mono/DepartureMono-Regular.woff2") format("woff2"), url("../fonts/departure-mono/DepartureMono-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } /* Metric-matched fallbacks for the Google web fonts. Until Inter / Bricolage Grotesque arrive (display=swap), text renders in Arial (desktop, iOS) or Roboto (Android) resized to the web font's average width and line box, so the swap no longer re-wraps lines and shoves the page (it was ~0.2 CLS on /work and /404 on mobile). Values measured in Chrome per weight against real site copy; every Inter / Bricolage stack lists these two right after the web font. "Fallback" = Arial, "Fallback R" = Roboto (no Arial on Android). */ @font-face { font-family: "Inter Fallback"; src: local('Arial'), local('ArialMT'); font-weight: 100 500; size-adjust: 106.43%; ascent-override: 91.14%; descent-override: 22.55%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 501 700; size-adjust: 100.89%; ascent-override: 96.15%; descent-override: 23.79%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 701 900; size-adjust: 103.08%; ascent-override: 94.1%; descent-override: 23.28%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback R"; src: local('Roboto'), local('Roboto-Regular'); font-weight: 100 500; size-adjust: 107.27%; ascent-override: 90.43%; descent-override: 22.37%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback R"; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 501 700; size-adjust: 107.58%; ascent-override: 90.16%; descent-override: 22.31%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback R"; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 701 900; size-adjust: 109.93%; ascent-override: 88.24%; descent-override: 21.83%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Grotesque Fallback"; src: local('Arial'), local('ArialMT'); font-weight: 100 500; size-adjust: 101.15%; ascent-override: 91.45%; descent-override: 27.19%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Grotesque Fallback"; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 501 700; size-adjust: 96.75%; ascent-override: 95.61%; descent-override: 28.42%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Grotesque Fallback"; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 701 900; size-adjust: 99.49%; ascent-override: 92.97%; descent-override: 27.64%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Grotesque Fallback R"; src: local('Roboto'), local('Roboto-Regular'); font-weight: 100 500; size-adjust: 101.95%; ascent-override: 90.73%; descent-override: 26.97%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Grotesque Fallback R"; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 501 700; size-adjust: 103.17%; ascent-override: 89.66%; descent-override: 26.65%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Grotesque Fallback R"; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 701 900; size-adjust: 106.1%; ascent-override: 87.18%; descent-override: 25.92%; line-gap-override: 0%; } @media only screen and (max-width: 768px){ body{ background-size: 120% !important; } } :root { --bkgd: rgb(255 255 255); --frgd: #3a4237; --action: #fcf7a7; --accent: #f8fff0; --border: #baf1a9; --stars: red; --notime: #ffffff; --shadow: #00000080; --shortTrigger: #ff7574; /* Design-system rail multipliers (independent type vs density). */ --ds-font-scale: 1; --ds-space-scale: 1; /* Type scale (relative to root rem × --ds-font-scale). */ --text-body: calc(1rem * var(--ds-font-scale)); --text-functional: calc(0.875rem * var(--ds-font-scale)); --text-functional-sm: calc(0.75rem * var(--ds-font-scale)); --text-h4: calc(1rem * var(--ds-font-scale)); --text-h3: calc(1.5rem * var(--ds-font-scale)); --text-h2: calc(2rem * var(--ds-font-scale)); --text-h1: calc(2.5rem * var(--ds-font-scale)); --text-display: calc(4rem * var(--ds-font-scale)); --leading-body: 1.6; --measure: 65ch; /* Spacing scale (rem steps × --ds-space-scale). Medium matches legacy --gap: 2rem. */ --space-1: calc(0.25rem * var(--ds-space-scale)); --space-2: calc(0.5rem * var(--ds-space-scale)); --space-3: calc(0.75rem * var(--ds-space-scale)); --space-4: calc(1rem * var(--ds-space-scale)); --space-5: calc(1.5rem * var(--ds-space-scale)); --space-6: calc(2rem * var(--ds-space-scale)); --space-7: calc(3rem * var(--ds-space-scale)); --space-8: calc(4rem * var(--ds-space-scale)); --space-9: calc(6rem * var(--ds-space-scale)); --space-10: calc(8rem * var(--ds-space-scale)); /* Metadata / small UI text (https://departuremono.com/) */ --font-meta: 'Departure Mono', ui-monospace, monospace; } /* Metadata / small UI text: Departure Mono across the site. Headlines and body copy stay on Inter / Bricolage. */ .headerHeading, figcaption, .main .quoteAuthor, .main .quoteDescription, .recommendationAuthorRole, span.section-description, .popUpCategory, .topKeyFigure__value, .cs-card__meta, .caseStudyLabel, h4.caseStudyLabel, .main > h4.caseStudyLabel, .main > .caseStudyInProgress > h4.caseStudyLabel, .caseStudyRole, span.wordType, .storySnippet b, .experience, .noTimeLink a, .noTimeLink__chip, div#carousel #seeAllBtn, .carouselControls #seeAllBtn, .carouselControls .carousel-see-all, .carouselControls .sq-rec-see-all, .cs-carousel__see-all, .qBand__caption, .NDAsign, .metaInformation, footer > span, .inpageNavigation nav li a, .second-level-bar__mobile select, .companiesContainer .org-logo::after, .homepage .orgCarousel__tip, .homepage .accent-picker__trigger::after, .homepage .highlight-toggle::after, .PopUpsAreAwesomeText i { font-family: var(--font-meta); letter-spacing: 0; } .experience h5 { font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif; letter-spacing: normal; } /* Root size = browser default (16px). Scale up on larger viewports for reading distance. Type size from the design-system rail multiplies --text-* tokens, not this root size, so spacing (rem × --ds-space-scale) stays independent of typography. */ html { font-size: 100%; scroll-padding-top: 96px; } /* Assistant / in-page source links land below sticky chrome */ #introduction, #project-knowledge-base, #project-ai-native, #about, #work-section, #more-section, #organizations, #recommendations, #contact, #certifications, #recomendationsContainer, #experience, #skills, #skill-empathy, #skill-communication, #skill-collaboration, #manifiesto, #what-my-team-says, .singlerecomendation[id] { scroll-margin-top: 96px; } @media only screen and (min-width: 769px) { html { font-size: 112.5%; /* ~18px */ } } @media only screen and (min-width: 1024px) { html { font-size: 125%; /* ~20px */ } } @media only screen and (min-width: 1600px) { html { font-size: 137.5%; /* ~22px; body approaches ~22–24px with 1rem */ } } /* Design-system rail: density falls back to these when JS has not set --ds-space-scale. --gap tracks the spacing scale so layout gutters move with Small/Medium/Large. */ html[data-ds-space="sm"] { --ds-space-scale: 0.7; } html[data-ds-space="md"] { --ds-space-scale: 1; } html[data-ds-space="lg"] { --ds-space-scale: 2; } body#MainSection {background-position: bottom;} .visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* Buttons and button-like controls always show the hand on hover. :where() keeps this at zero specificity so any component cursor still wins. */ :where(button, [role="button"], summary, select, label[for], input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"])) { cursor: pointer; } :where(button, input, select):disabled, :where([aria-disabled="true"]) { cursor: not-allowed; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .topBorder{ display: none; width: 100%; height: 18px; position: sticky; z-index: 5; top: 0; margin-bottom: -16px; background: var(--frgd); } body { line-height: 1; text-rendering: geometricprecision; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { padding: 0; --gap: var(--space-6); margin: 0; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif; font-weight: 400; font-size: var(--text-body); line-height: var(--leading-body); color: var(--frgd); min-height: 100vh; display: flex; flex-direction: column; background-color: var(--frgd); background-color: var(--accent); /* background: linear-gradient(180deg, var(--accent), var(--bkgd)); */ overflow-x: hidden; /* background-image: url('../images/grid3.png') !important; */ background-size: coveR !important; -webkit-font-smoothing: antialiased; /* animation: animatedBackground 0s ease-in-out infinite alternate; */ } img#face { display: none; opacity: 0.8; position: absolute; top: -8px; right: -32px; filter: grayscale(1); animation-name: shake-slow; animation-duration: 60s; animation-timing-function: cubic-bezier(0.4, 0, 1, 1); animation-iteration-count: infinite; } .headerHeading{ display: none; color: var(--frgd); background: var(--bkgd); position: sticky; top: 0px; left: 0; right: 0; z-index: 20; font-size: var(--text-functional-sm); letter-spacing: 0; /* text-transform: uppercase; */ font-family: var(--font-meta); font-weight: 600; width: 100%; text-align: center; line-height: 1.4; margin: 0 8px; margin-bottom: -16px; } .headerHeading span{ z-index: 9; } .headerHeading a { position: absolute; right: 16px; top: 0px; } .headerHeading a svg *{ fill: var(--action); } nav.mainNavigation{box-sizing: border-box;width: 100%;padding: var(--space-7) 0 var(--space-2);margin-bottom: var(--space-2);z-index: 6;max-width: 1400px;margin: auto;} nav.mainNavigation ol { display: flex; justify-content: center; list-style: none; padding: 0 0px 4px 0; flex-wrap: nowrap; z-index: 6; align-items: center; align-content: center; } nav.mainNavigation ol li { padding: var(--space-2) var(--space-4) var(--space-2); margin: 0; border-left: none; z-index: 0; } nav.mainNavigation ol li:first-child {border: none;} nav.mainNavigation ol li a{ top: 0; left: 0; box-sizing: border-box; /* transition: 0.3s linear; */ color: var( --frgd); font-weight: 600; text-transform: uppercase; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-size: calc(2.375rem * var(--ds-font-scale)); letter-spacing: 2px; text-decoration: none; text-align: center; /* Will override color (regardless of order) */ /* -webkit-text-stroke-color: var(--action);;text-underline-offset: 16px; line-height: 100%; /* background: var(--frgd); */ border-radius: 8px; padding: 4px 8px; box-shadow: 2px 2px 0 var(--shadow); border: 2px solid var(--frgd); backdrop-filter: hue-rotate(45deg); background: var(--action); } .graffiti{ position: absolute; height: 120px; width: 160px; border-radius: 8px; top: 80px; z-index: 5; transform: rotate(348deg); /* animation: rubberBand 7s infinite; */ -webkit-animation-name: rubberBand 15s infinite; /* filter: drop-shadow(-2px -4px 2px #fff); */ } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 45% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 47% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 48% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 52% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 54% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 56% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 45% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 47% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 48% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 52% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 54% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 56% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } #HomeLink{ z-index: 2; min-width: 126px; max-width: 160px; background: var(--action); position: absolute; left: 16px; top: 16px; border-radius: 50%; box-shadow: 4px 5px 0 var(--frgd); max-width: 50px !important; min-width: 50px !important; height: 50px; overflow: hidden; box-shadow: none !important; border: 2px solid var(--action); /* position: fixed; */ z-index: 99999; } #HomeLink img { width: 100px !important; min-width: 100px !important; height: 100px; margin-top: -32px; margin-left: -16px; filter: grayscale(1); animation-name: shake-slow; animation-duration: 30s; animation-timing-function: cubic-bezier(0.4, 0, 1, 1); animation-iteration-count: infinite; /* margin-top: 16px; */ z-index: 7; } #HomeLink img:hover{ animation-duration: 100s; filter: none; } nav.mainNavigation ol li a:hover{ /* text-decoration: underline; */ /* -webkit-text-fill-color: var(--action); */ color: var(--frgd); /* text-shadow: 0 0 16px var(--bkgd); */ background: var(--action); box-shadow: none; /* background: none; */ position: relative; /* border-color: transparent; */ top: 2px; left: 2px; transition: 0.3s linear; } article { box-sizing: border-box; /* border: 8px solid var(--action); */ border-width: 4px 0; margin: 0 auto; background-color: var(--bkgd); box-shadow: none;/* z-index: 1; */ width: 100%; } .ABBFill, .HitachiFill{ fill: var(--frgd); fill: var(--frgd); } svg.companyLogo{ margin-top: 128px; margin-bottom: var(--space-7); max-width: 50%; min-width: 248px; margin-left: -2%; opacity: 0.7; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 600; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; } h1 { font-size: calc(clamp(2rem, 4vw + 1rem, 4rem) * var(--ds-font-scale)); font-weight: 600; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; word-break: break-word; text-align: left; padding: var(--space-2) 0 var(--space-9); line-height: 1.05; /* line-height: 1; */ position: relative;} h2 { padding-top: 80px; margin-top: 150px; font-size: calc(clamp(1.5rem, 2vw + 1rem, 2rem) * var(--ds-font-scale)); letter-spacing: 0.02em; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; } h3 { font-size: var(--text-h4); text-align: center; background: var(--accent); padding: var(--space-2) 0; font-weight: 600; /* text-transform: uppercase; */ letter-spacing: 0.25em; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; border-radius: 1px; margin-top: -8px !important; } h4 { font-size: var(--text-h4); font-weight: 700; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; letter-spacing: 0.01em; } h3 + ul{ margin-top: -32px !important; } ul + h3{ margin-top: 0px !important; } p, li { margin: var(--space-4) var(--space-1); font-size: var(--text-body); line-height: var(--leading-body); list-style-position: outside; text-align: justify; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* position: relative; */ } figcaption { font-size: var(--text-functional-sm); font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; } .main li{ padding-left: 0.15em; margin-left: 0; } /* HOME PAGE -------------------*/ .mainSection:nth-child(2) { border-left: 1px solid var(--border); border-right: 1px solid var(--border); } .mainSection { display: flex; flex-direction: column; width: 33%; justify-content: space-between; padding: var(--space-5) var(--space-4) var(--space-9); z-index: 1; } .homeStage{position: relative;margin: 0 auto;display: flex;width: 100%;max-width: none;height: 240px;/* z-index: 2; */align-items: center;justify-content: space-around;align-content: center;flex-direction: row;overflow: hidden;/* position: relative; */} .homeStage h1 { display: none; text-align: center; z-index: 2; /* text-transform: uppercase; */ width: unset; font-weight: 800; /* margin: 64px 16px 0; */ /* Cap in px so root scaling does not inflate the hero past the design max */ font-size: calc(10rem * var(--ds-font-scale)); text-align: left; color: var(--action); /* padding: 16px; */ font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif !important; /* border-radius: 32px 32px 32px 0px; */ /* text-shadow: 0 0 16px var(--frgd); */ -webkit-text-fill-color: var(--bkgd) !important; -webkit-text-fill-color: none; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--action); -webkit-text-stroke-color: var(--frgd); /* text-shadow: 0 0 8px var(--action); */ } .homeStage h2 {position: relative;display: inline-block;font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif;margin: var(--space-4);padding: var(--space-4) var(--space-7);color: var(--bkgd);letter-spacing: inherit;font-size: calc(clamp(2rem, 4vw, 4rem) * var(--ds-font-scale));line-height: 1;background: var(--action);/* border: 1px solid var(--action); *//* box-shadow: -4px 4px 0px var(--action); */font-weight: 200;z-index: 2;} .homeStage p{ background: var(--bkgd); color: var(--frgd); line-height: var(--leading-body); font-size: calc(1.125rem * var(--ds-font-scale)); font-weight: 300; padding: 16px 18px; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; max-width: 380px; margin: 0px 6px 0; z-index: 2; border-radius: 32px 32px; border: 2px solid var(--border); position: relative; display: none; } .homeStage p:after { content: ""; width: 0px; height: 0px; position: absolute; border-left: 16px solid var(--bkgd); border-right: 16px solid rgba(255, 255, 255, 0); border-top: 16px solid var(--bkgd); border-bottom: 16px solid rgba(255, 255, 255, 0); left: 100px; bottom: -29px; } .marquee { transform: rotate(357deg); position: absolute; min-height: 30px; left: 0; top: 56vh; margin: 0 auto; width: 105%; margin-left: -8px; min-height: 30px; white-space: nowrap; overflow: hidden; box-sizing: border-box; position: absolute; opacity: 0.3;background: var(--action); } .marquee__content.opposite { animation: marqueeOpposite 600s linear infinite; } .marquee .marquee__content.opposite li {font-size: calc(1.25rem * var(--ds-font-scale));font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;font-weight: 600;letter-spacing: initial;padding: 2px 16px;line-height: 1;margin: 0;background-color: var(--action) !important;color: var(--bkgd) !important;/* text-transform: uppercase; */} .marquee li { box-sizing: content-box; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-weight: 600; line-height: 0.9; font-size: var(--text-display); background-color: var(--action); color: var(--bkgd); display: inline-block; margin: 0; text-align: center; padding: 0px 22px 15px 0px; letter-spacing: -4px; margin-bottom: -6px; } .marquee li:nth-child(odd){ background-color: var(--bkgd); color: var(--action); } .marquee__content { will-change: content; width: 300%; display: flex; animation: marquee 600s linear infinite backwards; } .marquee:hover .marquee__content { animation-play-state: paused; } .opposite ul.list-inline { justify-content: space-around; display: flex !important; } .list-inline { display: flex; justify-content: flex-end; min-width: 33.33%; /* reset list */ list-style: none; padding: 0; margin: 0; overflow: hidden; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-66.6%); } } @keyframes marqueeOpposite { 0% { transform: translateX(-66.6%); } 100% { transform: translateX(0); } } @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 0 10%; } } ::marker{font-weight: 700;font-size: var(--text-h3);letter-spacing: 4px;font-family:'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;} .navigationHidder{ display: none !important; height: 76px; background: var(--bkgd); z-index: 4; margin-top: -68px; position: relative; border-bottom: 1px solid var(--accent); } .inpageNavigation{display: none !important;position: -webkit-sticky;position: sticky;top: 8px;background: var(--bkgd);background: var(--accent);z-index: 3;/* padding-right: 16px; */border: 2px solid var(--bkgd);border-radius: 16px;/* width: calc(100% - 64px); */margin: 4px;padding: 0 8px;backdrop-filter: blur(3px);} .inpageNavigation ul{display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;overflow: auto;justify-content: space-between;margin-bottom: 2px;} .inpageNavigation nav li{ list-style: none; float: left; padding: 4px 2px 6px; margin: 0; white-space: nowrap; } .inpageNavigation nav li a{text-decoration: none;background: var(--action);color: var(--frgd);padding: 4px 8px;margin: 0px 2px;font-family: var(--font-meta);text-transform: uppercase;border: 2px solid;border-radius: 16px;font-size: var(--text-functional-sm);font-weight: 600;letter-spacing: 0;box-shadow: 1px 1px;} .inpageNavigation nav li a.active {margin-top: 2px;background: var(--bkgd);box-shadow: none;color: var(--frgd);border-color: var(--bkgd);} .main { --max-width: 800px; --heading-col: 38%; --content-col: 62%; --section-start: calc(16rem * var(--ds-space-scale)); max-width: var(--max-width); margin: auto; padding: var(--gap) var(--gap) var(--space-10); align-self: center; font-size: 1.1em; line-height: 2; } /* Full-bleed elements: clear floats and span the article width */ .main > :is( h1, .companyLogo, img.companyLogo, svg.companyLogo, .caseStudyCompanyLogo, .caseStudyCompanyLogoWrap, .inpageNavigation, .navigationHidder, .NDAsign, .cs-tldr, .LatestProject, .kb-aws-stack, .nextCaseStudy, .caseStudyInProgress, .mainImage, img.mainImage, video, .mediaAccentFrame, .imageViewer, #carousel, .kb-carousel, #movingBanner, object, .quoteDescription.mediaDescription, .tableScroll ), .main > .caseStudyInProgress > :is( .mainImage, img.mainImage, video, .mediaAccentFrame, .imageViewer, #carousel, .kb-carousel, #movingBanner, object, .quoteDescription.mediaDescription, .tableScroll ) { float: none; clear: both; width: 100%; max-width: 100%; margin-left: 0; box-sizing: border-box; } /* Right column: body copy, lists, role labels */ .main > p, .main > ol, .main > ul, .main > h3, .main > a, .main > .caseStudyInProgress > p, .main > .caseStudyInProgress > ol, .main > .caseStudyInProgress > ul, .main > .caseStudyInProgress > h3, .main > .caseStudyInProgress > a { box-sizing: border-box; width: calc(var(--content-col) - var(--gap) / 2); max-width: none; margin: var(--space-5) 0; margin-left: calc(var(--heading-col) + var(--gap) / 2); display: flow-root; /* keeps list markers inside the content column */ } /* Section headings inside a case study read as headings, not as a centred caption: left-aligned, at the h3 size the scale already defines. The global h3 tracking is 0.25em, which is a caption setting and falls apart at this size, so it comes down to something a heading can carry. */ .main > h3, .main > .caseStudyInProgress > h3 { padding: var(--space-3) 0; font-size: calc(clamp(1.125rem, 0.9vw + 0.95rem, 1.5rem) * var(--ds-font-scale)); line-height: 1.25; letter-spacing: 0.01em; text-align: left; margin-top: calc(2.25rem * var(--ds-space-scale)) !important; margin-bottom: calc(0.75rem * var(--ds-space-scale)); } /* The global `h3 + ul` pull assumes the old, shorter heading. */ .main > h3 + ul, .main > .caseStudyInProgress > h3 + ul { margin-top: 0 !important; } /* Cards/carousels share the content column, but keep their own display model */ .main > .cs-cards, .main > .cs-carousel, .main > .caseStudyInProgress > .cs-cards, .main > .caseStudyInProgress > .cs-carousel { box-sizing: border-box; width: calc(var(--content-col) - var(--gap) / 2); max-width: none; margin: var(--space-5) 0; margin-left: calc(var(--heading-col) + var(--gap) / 2); } .main > ul, .main > ol, .main > .caseStudyInProgress > ul, .main > .caseStudyInProgress > ol { list-style-position: outside; } #downloadResumeHome, a#downloadReferences, .home article button:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle), .nextCaseStudy a, .downloadResumeTop a, .home article a:not(#everestLink):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink) { width: fit-content; display: block; box-sizing: border-box; margin: 8px auto; text-align: center; background: var(--bkgd); padding: 4px 16px; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; /* text-transform: uppercase; */ color: var(--frgd); text-decoration: none; border: 2px solid var(--frgd) !important; border-radius: 4px; box-shadow: 2px 2px var(--frgd); box-shadow: 2px 2px var(--shadow); font-weight: 800; letter-spacing: 0.5px; } a#downloadReferences, .nextCaseStudy a, .downloadResumeTop a, .home article a:not(#everestLink):not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink) { text-transform: uppercase; } .home article a:hover:not(.sticker):not(.craftCard__link):not(.cs-tldr__jumpLink), .home article button:hover:not([class^="cs-carousel"]):not([class^="cs-stepper"]):not([class^="cs-roles"]):not(.kb-nav-btn):not(.sq-rec-prev):not(.sq-rec-next):not(.sq-rec-see-all):not(.carousel-see-all):not(.qBand__trigger):not(.cs-tldr__toggle) { box-shadow: none !important; position: relative; left: 2px; top: 2px; cursor: pointer; } .imagePlaceholder{ border-radius: 8px; /* background-color: var(--action); */ box-sizing: border-box; width: 100%; height: 20vh; margin: 0 0 8px; position: relative; overflow: hidden; display: flex; box-shadow: none;} .imagePlaceholder img{position: relative;/* top: -60px; */min-width: auto !important;min-height: 80% !important;width: 100%;filter: grayscale(1);/* margin: -10% 0 0 -10%; */} .imagePlaceholder .before { /* display: none !important; */ content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; /* background: var(--action); */ background: var(--accent); opacity: 0.4; z-index: 1; } .mainHome { display: flex; padding: 4px; justify-content: center; flex-wrap: nowrap; max-width: 820px; margin: auto; } .mainHome .borderWrapper{ box-sizing: border-box; width: 100%; /* border: 1px solid; */ border-radius: 30px; padding: 0 16px 16px; /* box-shadow: inset 0px -1px 1px var(--action); */ display: flex; flex-wrap: wrap; } .mainSectionsContainer{ display: flex; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); width: 100%; } .mainHome h2{ text-align: center; padding: 16px 8px 16px; padding-top: 32px; line-height: 1; margin: 0 auto; /* border-bottom: 1px solid; */ align-items: flex-end; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; width: fit-content;} /* Left column: section titles + quote faces float beside content starts */ .main > h2, .main > h4.caseStudyLabel, .main > .quoteImage, .main > .caseStudyInProgress > h2, .main > .caseStudyInProgress > h4.caseStudyLabel, .main > .caseStudyInProgress > .quoteImage { float: left; clear: both; box-sizing: border-box; width: calc(var(--heading-col) - var(--gap) / 2); max-width: none; min-width: 0; text-align: end; } .main > h2, .main > .caseStudyInProgress > h2 { margin: var(--section-start) 0 0; padding: 0 0 0.35rem; letter-spacing: 1px; } .main > h4.caseStudyLabel, .main > .caseStudyInProgress > h4.caseStudyLabel { margin: 2rem 0 0; display: block; background: var(--accent); padding: 4px; letter-spacing: 0; font-family: var(--font-meta); font-size: inherit; font-weight: 600; line-height: 1.35; } /* The heading is floated, so it takes the previous sibling's bottom margin on top of its own --section-start, while the block beside it only collapses to the larger of the two. Zeroing that bottom margin is what keeps the pair level, and it needs !important to beat component margins like .cs-roles. */ .main > *:has(+ h2), .main > *:has(+ h4.caseStudyLabel), /* The in-page ToC pair is display:none, but it still breaks DOM adjacency between the hero media and the first section heading. */ .main > *:has(+ .inpageNavigation + .navigationHidder + h2), .main > .caseStudyInProgress > *:has(+ h2), .main > .caseStudyInProgress > *:has(+ h4.caseStudyLabel) { margin-bottom: 0 !important; } /* Match section-start so heading + first content top-align. Every block that can open a section belongs in this list: one that is missing keeps its own smaller margin and starts above the heading instead of beside it. */ .main > h2 + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock), .main > .caseStudyInProgress > h2 + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock) { margin-top: var(--section-start) !important; } .main > h4.caseStudyLabel + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock), .main > .caseStudyInProgress > h4.caseStudyLabel + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock) { margin-top: 2rem !important; } /* Research quotes read like the homepage chat: the quote is their bubble, squared at the corner facing the avatar, then name and role in the chat's smaller author sizes. */ .main .quoteText{ box-sizing: border-box; text-align: left; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; font-size: 1rem; letter-spacing: 0; font-style: normal; padding: 0.625rem 0.875rem; line-height: 1.4; color: var(--frgd); background: var(--accent); border: 1px solid var(--border); border-radius: 4px 16px 16px 16px; max-width: none; width: calc(var(--content-col) - var(--gap) / 2); margin-bottom: 0; } .main .quoteAuthor{ padding: 0; margin-top: 0.5rem; margin-bottom: 0; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-weight: 600; font-size: 0.875rem; line-height: 1.3; text-transform: none; letter-spacing: 0; } .main .quoteDescription{ margin-top: 0.125rem; font-size: 0.6875rem; font-family: var(--font-meta); opacity: 0.6; line-height: 1.4; -webkit-hyphens: manual; hyphens: manual; font-weight: 400; letter-spacing: 0; text-align: left; } .main .quoteDescription.mediaDescription{ opacity: 0.85; margin-top: 8px; text-align: center; width: 100%; font-size: 0.75rem; margin-bottom: 0; margin-left: 0; } .main > .quoteImage, .main > .caseStudyInProgress > .quoteImage{ margin: 2.25rem 0 0; padding-top: 0; border-radius: 100%; } .main > .quoteImage + .quoteText, .main > .caseStudyInProgress > .quoteImage + .quoteText { margin-top: 1.5rem; } .main > .mediaAccentFrame, .main > .caseStudyInProgress > .mediaAccentFrame { display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--border); border-radius: 16px; background: var(--accent); padding: 0 16px 32px; box-sizing: border-box; width: 100%; clear: both; } .main > .mediaAccentFrame[hidden] { display: none; } .main > .mediaAccentFrame:has(iframe) { padding: 16px; margin-top: var(--space-7); margin-bottom: 8px; } .main > .mediaAccentFrame iframe { display: block; width: 100%; max-width: 800px; margin: 0 auto; border: 0; border-radius: 8px; background: transparent; } .main > .mediaAccentFrame iframe.cs-flow-diagram { max-width: 100%; aspect-ratio: 1300 / 600; height: auto; filter: grayscale(1); } .quoteImage img{font-size: 0;height: 48px;width: 48px;object-fit: cover;object-position: 0% center;border-radius: 100%;filter: grayscale(1);background: var(--accent);border: 2px solid var(--border);} .crossSectionNavigation{z-index: 1;cursor: pointer;/* background: var(--action); */display: flex;justify-content: center;} .crossSectionNavigation ul{list-style: none;display: flex;padding: 0px;text-decoration: none;flex-direction: row;justify-content: center;align-items: stretch;max-width: 800px;width: 100%;padding: 0 8px;flex-wrap: wrap;} .crossSectionNavigation ul li{ margin: 8px; text-align: start; flex-grow: 1; cursor: pointer; max-width: calc(33% - 16px); width: 33%; } .crossSectionNavigation ul li a{ /* background: var(--bkgd); */ border: 8px solid var(--action); background: var(--action); text-decoration: none; display: block; padding: 8px 16px 16px; border-radius: 16px; color: var( --frgd); display: flex; justify-content: space-between; flex-wrap: wrap; cursor: pointer; align-items: flex-start; border: 1px solid var(--border); box-shadow: 3px 3px var(--bkgd); } .crossSectionNavigation ul li a:hover { box-shadow: none; background: var(--accent); border-color: var(--accent); } .crossSectionNavigation svg.companyLogo { min-width: 181px; margin-left: -5%; max-width: 60%; } .crossSectionNavigation span{display: block;width: 100%;font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;/* text-shadow: 1px 1px 16px var(--bkgd); */} .section-title{font-size: 1rem;font-weight: 800;/* padding-bottom: 4px; */line-height: 1.1;min-height: 36px;} span.section-description{display: none;font-size: 0.75rem;padding: 0px 0px 0px;max-width: 300px;} .section-callToAction{font-weight: 800;/* text-transform: uppercase; */font-size: 1.375rem;padding-top: 32px;/* min-width: 50%; */display: none !important;} footer{box-sizing: border-box;max-width: 100%;display: flex;text-align: center;font-size: calc(1.125rem * var(--ds-font-scale));padding: var(--space-9) var(--space-4) var(--space-9);flex-direction: column;justify-content: flex-end;align-content: center;font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;} .footerHeading{ text-align: center; color: var(--bkgd); font-size: 3rem; letter-spacing: 2px; font-weight: 600; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; padding: 32px 0 8px; text-shadow: 2px 2px 8px var(--frgd); } .footerNavigation ol{margin: auto;max-width: 800px;display: flex;justify-content: space-evenly;list-style: none;} .footerNavigation ol a{box-sizing: border-box;background: var(--action);text-decoration: none;font-weight: 600;font-size: 1.375rem;text-transform: uppercase;padding: 8px 8px;/* text-shadow: 2px 2px 8px var(--frgd); */color: var(--frgd);border-radius: 8px;border: 2px solid;box-shadow: 2px 3px 0 var(--shadow);} footer span{ /* width: 320px; */ color: var(--bkgd); /* text-shadow: 2px 2px 8px var(--frgd); */ color: var(--frgd); margin: 0 auto; } .socialNavigation{margin: 0 auto;margin-top: var(--space-9);} .socialNavigation ol{display: flex;list-style: none;align-items: center;flex-wrap: nowrap;} .socialNavigation ol a{display: block;box-sizing: border-box;padding: 8px;margin: 4px;height: 44px;width: 44px;background: var(--action);fill: var(--frgd);border-radius: 32px;border: 2px solid var(--frgd);box-shadow: 1px 1px 0 var(--shadow);} footer ol a:hover { /* color: var(--bkgd); */ /* text-decoration: underline; */ /* fill: var(--bkgd); */ /* filter: drop-shadow(0px 0px 17px var(--bkgd)); */ /* background: none; */ position: relative; top: 2px; left: 2px; box-shadow: none; } .Introduction p { font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-size: clamp(0.9375rem, 1.5vw + 0.75rem, 1.875rem); line-height: 1.25; padding: 16px; font-weight: 400; filter: none; /* padding-bottom: 32px; */ } #Welcome { position: relative; font-size: calc(clamp(2.5rem, 8vw, 5rem) * var(--ds-font-scale)); line-height: 1.05; border-bottom: 1px solid var(--border); margin: var(--space-2) 0; padding: var(--space-9) 0 var(--space-4); letter-spacing: -0.04em; font-weight: 600; width: 100%; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; /* Wrap at spaces only; never hyphenate mid-word */ white-space: normal; word-break: keep-all; overflow-wrap: normal; word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; } /* Desktop board: a smaller, one-line headline that the agents click through (welcome-swap.js). --welcome-fit only drops below 1 if the longest phrase would otherwise wrap. Phones and tablets keep the big wrapped one. */ @media (min-width: 769px) and (any-hover: hover) and (any-pointer: fine) { #Welcome { font-size: calc(clamp(2.25rem, 2.2vw + 1.5rem, 3rem) * var(--ds-font-scale) * var(--welcome-fit, 1)); } } /* Every line sits in the same grid cell, so the outgoing phrase falls away under the incoming one without moving anything around it. */ #Welcome .welcome-swap { display: grid; justify-items: center; transform-origin: 50% 60%; } #Welcome .welcome-swap > * { grid-area: 1 / 1; } /* Right padding is the stop's width, so words + stop are centred together. */ #Welcome .welcome-line { white-space: pre; padding-right: var(--welcome-stop, 0.25em); } #Welcome .welcome-ch, #Welcome .welcome-stop { display: inline-block; } #Welcome .welcome-probe { position: absolute; visibility: hidden; white-space: pre; } .mainHome p { font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-weight: 400; z-index: 2; } .Introduction { text-align: center; /* padding-bottom: 32px; */ width: 100%; position: relative; /* border-bottom: 1px solid; */ } .mainSection svg { margin: 0 auto; width: 100%; opacity: 0.95; } .mainSection svg * { fill: var(--frgd); } .mainHome h2 span { font-size: calc(1.125rem * var(--ds-font-scale)); position: absolute; filter: grayscale(1); } .companiesContainer div > * { max-width: 168px; min-width: 17%; padding: 16px 28px; max-height: none; } .companiesContainer div { display: flex; align-items: stretch; justify-content: space-around; flex-direction: row; flex-wrap: wrap; gap: 64px 32px; margin: auto; flex-grow: 1; align-content: space-around; } .companiesContainer .org-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; opacity: 0.8; transition: opacity 0.2s ease; cursor: default; } .companiesContainer .org-logo img { width: 147px; height: 63px; max-width: 100%; max-height: 100%; object-fit: contain; } .companiesContainer .org-logo:hover, .companiesContainer .org-logo:focus-within { opacity: 1; } .companiesContainer { box-sizing: border-box; width: 50%; padding: 16px 8px 64px; display: flex; flex-direction: column; border-bottom: 1px solid var(--border); overflow: visible; } @media (hover: hover) and (pointer: fine) { .companiesContainer .org-logo::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 220px; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--frgd); background: var(--bkgd); color: var(--frgd); font-family: var(--font-meta); font-size: var(--text-functional-sm); font-weight: 400; line-height: 1.35; letter-spacing: 0; text-align: left; white-space: normal; box-shadow: 2px 2px 0 var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 20; } .companiesContainer .org-logo:hover::after, .companiesContainer .org-logo:focus-within::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } } .homepage .orgCarousel__tip { position: absolute; z-index: 30; left: 0; top: 0; transform: translate(-50%, calc(-100% - 8px)); width: max-content; max-width: min(220px, calc(100vw - 24px)); padding: 8px 12px; border-radius: 8px; border: 2px solid var(--frgd); background: var(--bkgd); color: var(--frgd); font-family: var(--font-meta); font-size: var(--text-functional-sm); font-weight: 400; line-height: 1.35; letter-spacing: 0; text-align: left; white-space: normal; box-shadow: 2px 2px 0 var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, visibility 0.18s ease; } .homepage .orgCarousel__tip.is-visible { opacity: 1; visibility: visible; } .colleaguesContainer { background: var(--bkgd); width: 50%; position: relative; /* background: red; */ min-height: 300px; border-left: 1px solid var(--border); padding: 16px 16px 64px; box-sizing: border-box; border-bottom: 1px solid var(--border); } .colleaguesContainer img { max-width: 80px; filter: grayscale(1); opacity: 0.6; } .poweredByLI { display: flex; margin: 24px auto 16px; width: 160px; text-align: center; font-family: 'Inter', "Inter Fallback", "Inter Fallback R",sans-serif; font-size: 0.875rem; flex-direction: column; align-items: center; } #recomendationsContainer > .poweredByLI { flex-shrink: 0; } .chat-wrapper { border-top: 2px dashed var(--border); height: 75vh; display: flex; /* justify-content: center; */ } .chat-container { background: transparent; overflow:auto; max-width: 360px; max-height: 150vh; display: flex; flex-direction: column-reverse; padding: 10px; } .chat-container { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .chat-container::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .recommendation{ height: auto; transition: height 0.8s ease-out, width 0.2s ease-out, color 1s ease-out; } .chat-container .singlerecomendation:first-child .recommendation:not(.last-recomendation){ /* margin-left: -6px; */ background:url(../images/typingDots.gif); background-size: cover; color: transparent; width: 50px !important; height: 30px !important; padding: 0; box-shadow: none; filter: none; } .chat-container .singlerecomendation:first-child .recommendation:before, .chat-container .singlerecomendation:first-child .recommendation:after{ display: none; } /*.recommendation {*/ /* /* background: var(--accent); */*/ /* background: var(--accent);*/ /* border-radius: 8px;*/ /* padding: 16px 16px;*/ /* font-size: 1rem;*/ /* line-height: 1.8;*/ /* /* font-style: italic; */*/ /* margin-top: 16px;*/ /* position: relative;*/ /* text-align: left;*/ /* filter: drop-shadow(1px 1px 1px var(--border));*/ /*}*/ /**/ /*.recommendation:after {content: '';position: absolute;bottom: 0;left: 32px;width: 0;height: 0;border: 22px solid rgba(255, 255, 255, 0);border-top-color: var(--accent);border-top-color: var(--accent);border-bottom: 0;border-right: 0;margin-left: -11px;margin-bottom: -22px;}*/ .singlerecomendation { background-color: #fff; border: 1px solid var(--border); border-radius: 0.25rem; display: flex; flex-direction: column; font-size: calc(1.25rem * var(--ds-font-scale)); margin: 0 auto 1rem; max-width: 600px; padding: 0.5rem 1.5rem; } .recommendation { /* filter: drop-shadow(1px 1px 1px var(--shadow)); */ border-radius: 1.15rem; line-height: 1.25; max-width: 75%; padding: 0.5rem .875rem; position: relative; word-wrap: break-word; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } .recommendation::before, .recommendation::after { bottom: -0.1rem; content: ""; height: 1rem; position: absolute; } .recommendation { background-color: var(--accent); /* background: linear-gradient(180deg, #5eabff, #3394ff,#057cff); */ color: #000; color: var(--frgd); /* color: #fff; */ max-width: calc(100% - 80px); } .recommendation:before { border-bottom-right-radius: 0.8rem 0.7rem; border-left: 1rem solid var(--accent); /* border-color: #057cff; */ left: -0.35rem; transform: translate(0, -0.1rem); } .recommendation::after { background-color: var(--bkgd); border-bottom-right-radius: 0.5rem; left: 20px; transform: translate(-30px, -2px); width: 10px; filter: none; } .recommendationAuthor { padding-top: 4px; font-family: 'Inter', "Inter Fallback", "Inter Fallback R"; width: 100%; font-weight: 600; color: var(--frgd); /* padding: 8px 16px 0 100px; */ } .recommendationAuthorRole { font-family: var(--font-meta); font-size: 0.75rem; opacity: 0.6; /* padding: 0 102px 0; */ margin-bottom: var(--space-7); } .mainHome *:not(a) {border-color: var(--border) !important;/* border-color: var(--frgd) !important; *//* border-width: 2px !important; *//* filter: grayscale(1); */} .certBadges { position: static; margin: 48px auto 16px; z-index: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; } .certBadges a { display: block; line-height: 0; position: relative; } .certBadges img { width: auto; height: auto; border: none; } .certBadges #NNg img { max-height: 72px; } .certBadges #IxDF { margin-top: 0; } .certBadges #IxDF img { max-height: 56px; } a#NNg:hover, a#IxDF:hover { filter: none; } i { font-style: italic; letter-spacing: 0px; } .home article { box-sizing: border-box !important; width: auto; /* width: 100%; */ /* max-width: 1400px; */ box-sizing: border-box; border-radius: 32px; min-height: 100vh; box-shadow: none; border: none;margin: 0 8px; z-index: 1; } .home nav.mainNavigation { max-width: 1400px; } body.home, body#MainSection { box-sizing: border-box; width: 100%; /* padding: 0 16px; */ } nav.mainNavigation ol li a.disabled { -webkit-text-fill-color: unset; -webkit-text-fill-color: unset; text-decoration: none; text-shadow: none; background: none; /* color: var(--frgd); */ /* color: var(--bkgd); */ background: var(--bkgd); /* text-shadow: 2px 2px 6px var(--action); */ pointer-events: none; cursor: default; background: var(--action); /* background: var(--bkgd); */ box-shadow: 0 0 16px 8px var(--action); /* border: none; */ border-color: var(--action); } .Introduction img { max-width: 1000px; width: 72vw; min-width: 200px; margin: 64px auto 32px; padding: 16px; /* background: radial-gradient(var(--bkgd), #f5f8f2); */ /* box-shadow: 0 0 32px var(--accent); */ border-radius: 32px; } .Introduction img.intro-company-logo { display: inline; height: 1em; width: auto; max-width: none; min-width: 0; margin: 0 0.08em; padding: 0; border-radius: 0; vertical-align: -0.18em; object-fit: contain; } .Introduction img.intro-company-logo--wide { height: 0.9em; vertical-align: -0.08em; } .dictionarySnippet h2 { hyphens: manual; display: inline-block; text-align: left; /* font-family: serif; */ border-width: 0; padding: 0; font-size: 2rem; padding-right: 4px; text-shadow: 2px 2px var(--bkgd); /* word-break: break-all; */ } .dictionarySnippet { text-align: left; } div.dictionarySnippet { min-width: calc (30% - 36px) !important; position: relative; flex-basis: 100%; flex-shrink: 1; padding: 24px; background: var(--accent); /* border: 2px solid var(--bkgd) !important; */ /* border-width: 0 2px !important; */ border-radius: 8px; margin: 4px; filter: drop-shadow(1px 1px 1px var(--border)); overflow: hidden; } span.wordType { display: inline-block; padding: 0 10px; font-size: 0.75rem; background: var(--bkgd); border-radius: 8px; } span.wordSeparation {display: inline-block;font-weight: 600;letter-spacing: 2px;padding: 4px;} .dictionarySnippet p { font-size: 1rem; } .dicctionaryRow { margin: 32px 0; max-width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-around; } span.wordPronunciation { display: inline-block; margin-bottom: var(--space-4); } p.manifest_copy { line-height: 1.4; font-size: 3rem; text-align: center; max-width: 640px; display: block; margin: auto; margin-top: var(--space-7); } .Manifest { position: relative;width: 100%; text-align: center; display: flex; justify-content: center; flex-wrap: nowrap; flex-direction: column; padding: 64px 0 128px; background: none; } .Manifest h2 { border-bottom: none; } .ExperienceWrapper { padding-left: 32px; display: flex; justify-content: space-evenly; flex-wrap: wrap; } .ExperienceContent, .RecomendationsContent { width: 33%; min-width: 280px; max-width: 50%; box-sizing: border-box; padding: 16px 16px 32px; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-weight: 400; /* border: 1px solid; */ /* margin: -2px; */ } .ExperienceContent h5 {font-weight: bold;font-size: calc(1.125rem * var(--ds-font-scale));/* margin-bottom: 8px; */} .poweredByLI.aboutUsLinkedin img { filter: grayscale(1); opacity: 0.6; } .ExperienceWrapper img { opacity: 0.8; max-width: 75%; } .aboutUsLinkedin { display: flex; justify-content: space-around; flex-wrap: nowrap; flex-direction: row; width: 100%; align-items: baseline; } .aboutUsLinkedin a { flex-grow: 1; } .home article a.referenceDoc{margin: 8px 0 16px !important;border-width: 1px !important;background: none !IMPORTANT;padding: 4px 8px !important;color: var(--frgd);font-size: 0.875rem;align-items: center;font-weight: 600 !important;border-width: 1px solid !important;} .home article a.referenceDoc:hover{ background: var(--action); } .referenceDoc-View{ height: 60px; margin: -12px 0px -14px 0px; height: 60px; } div.mainHome div div.CaseStudyAnimation { /* Cap below the 1600px bleed: 25vw grows with the viewport while .mainHome stays ~820px, so ~1330–1599 stacked the row. */ width: min(25vw, 320px); height: min(25vw, 320px); min-width: 240px; min-height: 240px; position: relative; margin-right: 16px; margin-left: 16px; border-radius: 100%; overflow: hidden; background: var(--accent); /* background: radial-gradient( transparent,var(--accent),var(--accent)); */ border: 1px solid var(--border); filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--caseAccent) 28%, transparent)); } .CaseStudyWrapper { --caseAccent: var(--border, #c9c9c9); display: flex; flex-wrap: wrap; align-items: center; margin: 64px 0px; } svg.CaseStudycompanyLogo { width: 200px; margin-top: var(--space-7); margin-left: -9px; } img.caseStudyLogo { margin-bottom: var(--space-4); } .caseStudyLogoPair { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); width: fit-content; max-width: 100%; } .caseStudyLogoPair .caseStudyLogo, .caseStudyLogoPair .companyLogo, .caseStudyLogoPair .caseStudyCompanyLogo { margin-bottom: 0; margin-left: 0 !important; } .main > .caseStudyCompanyLogoWrap.caseStudyLogoPair { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; width: 100%; max-width: 100%; } .main > .caseStudyCompanyLogoWrap.caseStudyLogoPair .caseStudyCompanyLogo, .main .caseStudyCompanyLogoWrap.caseStudyLogoPair .companyLogo { display: block; margin: 0; } .image-CaseStudy.caseStudyLogoPair { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 2px; margin-bottom: 0; width: 72px; max-width: 72px; } .second-level-bar .image-CaseStudy.caseStudyLogoPair { padding: 4px; } .image-CaseStudy.caseStudyLogoPair .second-level-bar__logo { max-width: 48px; max-height: 16px; margin: 0; } div.CaseStudyDescription *:not(.topKeyFigures):not(.topKeyFigure):not(.topKeyFigure__value):not(.topKeyFigure__label) { text-align: left; padding: 0; margin-left: 0; margin-right: 0; } .CaseStudyDescription { /* background: radial-gradient(var(--accent), transparent, transparent); */ width: 40%; min-width: 420px; padding-bottom: 58px; margin: 0 16px; } .CaseStudyAnimation svg {width: 100%;height: 100%;opacity: 0.85;} article .CaseStudyDescription > a { margin: 16px 0 !important; width: fit-content; } .CaseStudyDescription > .caseStudyUnavailable { margin: 16px 0; width: fit-content; max-width: 100%; opacity: 0.55; font-size: 0.95rem; line-height: 1.35; color: var(--frgd, #050038); } .flashCardsArea{ display: none; width: 228px; position: fixed; bottom: 16px; left: 16px; border: 2px solid var(--border); border-style: dashed; text-align: center; padding: 16px 32px; background-color: var(--accent); /* background: url(Grass.jpeg); */ background-size: cover; /* text-shadow: 2px 2px 16px #002d00; */ color: #2e36d9; border-radius: 16px; /* filter: hue-rotate(123deg); */ } .flashCardsArea span{ display: block; padding: var(--space-2) 0; } .flashCardsArea span.flashCardInstructionTitle{font-size: 2.938rem;line-height: 0.9;font-weight: 700;font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif;} .flashCardsArea button { text-decoration: none; background: var(--action); color: var(--frgd); padding: 4px 8px; margin: 0px 2px; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; /* text-transform: uppercase; */ border: 2px solid; border-radius: 8px; font-size: calc(1.125rem * var(--ds-font-scale)); font-weight: 800; } @keyframes shake-slow { 2% { transform: translate(0px, -7px) rotate(2.5deg) } 4% { transform: translate(6px, 3px) rotate(-.5deg) } 6% { transform: translate(6px, -5px) rotate(.5deg) } 8% { transform: translate(3px, 3px) rotate(-1.5deg) } 10% { transform: translate(-4px, 5px) rotate(1.5deg) } 12% { transform: translate(2px, 7px) rotate(2.5deg) } 14% { transform: translate(0px, 6px) rotate(-1.5deg) } 16% { transform: translate(-9px, 5px) rotate(-2.5deg) } 18% { transform: translate(4px, -8px) rotate(-.5deg) } 20% { transform: translate(2px, 9px) rotate(3.5deg) } 22% { transform: translate(-5px, 1px) rotate(-2.5deg) } 24% { transform: translate(-2px, -8px) rotate(.5deg) } 26% { transform: translate(4px, -2px) rotate(-.5deg) } 28% { transform: translate(-4px, 9px) rotate(1.5deg) } 30% { transform: translate(-4px, -3px) rotate(3.5deg) } 32% { transform: translate(-2px, 6px) rotate(-2.5deg) } 34% { transform: translate(4px, -4px) rotate(-.5deg) } 36% { transform: translate(-1px, 6px) rotate(.5deg) } 38% { transform: translate(8px, 8px) rotate(1.5deg) } 40% { transform: translate(9px, -2px) rotate(3.5deg) } 42% { transform: translate(-2px, -9px) rotate(.5deg) } 44% { transform: translate(-1px, 10px) rotate(-1.5deg) } 46% { transform: translate(-1px, 1px) rotate(-.5deg) } 48% { transform: translate(6px, -8px) rotate(2.5deg) } 50% { transform: translate(-1px, -7px) rotate(-1.5deg) } 52% { transform: translate(0px, 1px) rotate(-1.5deg) } 54% { transform: translate(1px, -8px) rotate(-2.5deg) } 56% { transform: translate(-4px, 2px) rotate(1.5deg) } 58% { transform: translate(10px, -7px) rotate(-2.5deg) } 60% { transform: translate(-2px, -4px) rotate(-1.5deg) } 62% { transform: translate(-3px, 3px) rotate(1.5deg) } 64% { transform: translate(8px, 2px) rotate(-1.5deg) } 66% { transform: translate(-4px, -1px) rotate(1.5deg) } 68% { transform: translate(-1px, -2px) rotate(-1.5deg) } 70% { transform: translate(8px, 8px) rotate(.5deg) } 72% { transform: translate(-8px, -3px) rotate(-2.5deg) } 74% { transform: translate(6px, 5px) rotate(.5deg) } 76% { transform: translate(4px, -9px) rotate(1.5deg) } 78% { transform: translate(-2px, -6px) rotate(3.5deg) } 80% { transform: translate(1px, 0px) rotate(1.5deg) } 82% { transform: translate(-4px, 6px) rotate(-2.5deg) } 84% { transform: translate(-4px, -3px) rotate(1.5deg) } 86% { transform: translate(7px, 10px) rotate(2.5deg) } 88% { transform: translate(-3px, -2px) rotate(1.5deg) } 90% { transform: translate(8px, -3px) rotate(3.5deg) } 92% { transform: translate(0px, 3px) rotate(1.5deg) } 94% { transform: translate(5px, -5px) rotate(-2.5deg) } 96% { transform: translate(7px, -2px) rotate(-.5deg) } 98% { transform: translate(-6px, 0px) rotate(3.5deg) } 0%, 100% { transform: translate(0, 0) rotate(0) } } .sweaterContainer { display: none; width: 100vw; height: 100vh; position: fixed; overflow: hidden; /* background: #ffffff; */ z-index: -1; cursor: pointer; /* backdrop-filter: hue-rotate(178deg); */ } .sweater { /* -webkit-animation: grain 7s steps(10) infinite; */ /* animation: grain 7s steps(10) infinite; */ background-image: url(../images/noise.webp); content: ""; height: 285%; left: -50%; opacity: .4; position: absolute; top: -100%; width: 300%; } .homepage .sweater { -webkit-animation: grain 7s steps(10) infinite; animation: grain 7s steps(10) infinite; } .quoteImage img { -webkit-animation: nod 3s infinite, quote-face-sprite 12s steps(1, end) infinite; animation: nod 3s infinite, quote-face-sprite 12s steps(1, end) infinite; } .quoteDescription+.quoteImage img{ animation-delay: 2s, 3.4s; } @keyframes quote-face-sprite { 0% { object-position: 0% center; } 16% { object-position: 20% center; } 32% { object-position: 40% center; } 48% { object-position: 60% center; } 64% { object-position: 80% center; } 82% { object-position: 100% center; } 100% { object-position: 0% center; } } @-webkit-keyframes quote-face-sprite { 0% { object-position: 0% center; } 16% { object-position: 20% center; } 32% { object-position: 40% center; } 48% { object-position: 60% center; } 64% { object-position: 80% center; } 82% { object-position: 100% center; } 100% { object-position: 0% center; } } @media (prefers-reduced-motion: reduce) { .quoteImage img { -webkit-animation: none; animation: none; object-position: 0% center; } } @keyframes nod { 30% { -webkit-transform: rotate(0deg); transform:rotate(0deg) } 40% { -webkit-transform: rotate(10deg); transform:rotate(10deg) } 60% { -webkit-transform: rotate(-10deg); transform:rotate(-10deg) } 70% { -webkit-transform: rotate(0deg); transform:rotate(0deg) } } @-webkit-keyframes grain { 0%, to { -webkit-transform: translate(0); transform: translate(0) } 10% { -webkit-transform: translate(-5%, -10%); transform: translate(-5%, -10%) } 20% { -webkit-transform: translate(-15%, 5%); transform: translate(-15%, 5%) } 30% { -webkit-transform: translate(7%, -25%); transform: translate(7%, -25%) } 40% { -webkit-transform: translate(-5%, 25%); transform: translate(-5%, 25%) } 50% { -webkit-transform: translate(-15%, 10%); transform: translate(-15%, 10%) } 60% { -webkit-transform: translate(15%); transform: translate(15%) } 70% { -webkit-transform: translateY(15%); transform: translateY(15%) } 80% { -webkit-transform: translate(3%, 35%); transform: translate(3%, 35%) } 90% { -webkit-transform: translate(-10%, 10%); transform: translate(-10%, 10%) } } @keyframes grain { 0%, to { -webkit-transform: translate(0); transform: translate(0) } 10% { -webkit-transform: translate(-5%, -10%); transform: translate(-5%, -10%) } 20% { -webkit-transform: translate(-15%, 5%); transform: translate(-15%, 5%) } 30% { -webkit-transform: translate(7%, -25%); transform: translate(7%, -25%) } 40% { -webkit-transform: translate(-5%, 25%); transform: translate(-5%, 25%) } 50% { -webkit-transform: translate(-15%, 10%); transform: translate(-15%, 10%) } 60% { -webkit-transform: translate(15%); transform: translate(15%) } 70% { -webkit-transform: translateY(15%); transform: translateY(15%) } 80% { -webkit-transform: translate(3%, 35%); transform: translate(3%, 35%) } 90% { -webkit-transform: translate(-10%, 10%); transform: translate(-10%, 10%) } } @keyframes floatinPopUp { 0% { box-shadow: 2px 2px 0px var(--frgd); transform: translatey(0px); } 50% { box-shadow: 2px 4px 0px var(--frgd); transform: translatey(-4px); } 100% { box-shadow: 2px 2px 0px var(--frgd); transform: translatey(0px); } } .aboutUsLinkedin { font-family: 'Inter', "Inter Fallback", "Inter Fallback R"; flex-direction: column; text-align: center; align-items: center; padding: 32px 0; } .aboutUsLinkedin a { width: 100%; max-width: 260px; } .RecomendationsWrapper { --rec-cols: 3; display: grid; grid-template-columns: repeat(var(--rec-cols), minmax(0, 1fr)); gap: 12px 16px; align-items: stretch; width: 100%; } .RecomendationsWrapper.is-bento .RecomendationsContent { display: none; } .RecomendationsWrapper .singlerecomendation { max-width: none; width: 100%; margin-inline: 0; margin-block: 0; height: 100%; box-sizing: border-box; grid-column: span 1; /* Keep avatar+bubble, author and role as one tight stack at the bottom; space-around would spread them apart in taller cells. */ align-content: flex-end; } .RecomendationsWrapper .recommendation { max-width: calc(100% - 52px); } .RecomendationsWrapper .recommendationAuthorRole { margin-bottom: 0; } /* One chat per cell, so a full row always holds --rec-cols chats. Size variety comes from height tiers instead of column spans. */ .RecomendationsWrapper .singlerecomendation.rec--lg { min-height: 9rem; } .RecomendationsWrapper .singlerecomendation.rec--xl { min-height: 12rem; } .RecomendationsWrapper[data-rec-cols="1"] .singlerecomendation.rec--lg, .RecomendationsWrapper[data-rec-cols="1"] .singlerecomendation.rec--xl { min-height: 0; } .poweredByLI img { filter: grayscale(1); opacity: 0.6; } div#recomendationsContainer.load-all { max-height: 999999px; } .load-more { max-height: 80vh; transition-property: max-height; transition-duration: 12s; transition-timing-function: ease-in; overflow: hidden; position: relative; margin: 32px 0 64px; } .load-more-footer { /* border-bottom: 1px solid; */ position: absolute; display: flex; bottom: 0; width: 100%; background: var(--bkgd); -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent); mask-image: linear-gradient(0deg, #000 40%, transparent); height: 120px; /* border-radius: 0 0 32px 32px; */ flex-direction: column; justify-content: flex-end; align-items: center; padding: 4px 0; z-index: 1; transition-property: opacity; transition-duration: 1s; transition-timing-function: ease-in; padding-bottom: 16px; } #hide-btn { display: none; } .load-all .load-more-footer {opacity: 0;} .mainSection h2 { /* border-bottom: 1px solid; */ } .dictionarySnippet svg { opacity: 0.75; margin: -24px -24px 16px -24px; } img.recommendationImage { position: absolute; bottom: 0; left: 50px; border-radius: 100%; filter: grayscale(1); opacity: 0.8; } .singleRecomendation { position: relative; } .recommendationimage { /* position: absolute; */ bottom: 0; filter: none; border-radius: 32px; left: 50px; opacity: 0.8; } .RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd), .RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even){ /* text-align: right; */ margin-bottom: var(--space-7); } .RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd) .recommendationimage, .RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even) .recommendationimage{ /* right: 50px; */ /* left: auto; */ } .RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd) .recommendationAuthor, .RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even) .recommendationAuthor, .RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd) .recommendationAuthorRole, .RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even) .recommendationAuthorRole{/* padding-left: 16px; *//* padding-right: 100px; */} .RecomendationsContent:nth-child(odd) .singlerecomendation:nth-child(odd) .recommendation:after , .RecomendationsContent:nth-child(even) .singlerecomendation:nth-child(even) .recommendation:after {/* content: ''; *//* position: absolute; *//* bottom: 0; *//* right: 30px; *//* left: auto; *//* width: 0; *//* height: 0; *//* border: 22px solid rgba(255, 255, 255, 0); *//* border-top-color: var(--accent); *//* border-bottom: 0; *//* border-left: 0; *//* margin-left: 0; *//* margin-right: -11px; *//* margin-bottom: -22px; */} .singlerecomendation { display: flex; width: 100%; /* position: relative; */ flex-direction: row; flex-wrap: wrap; align-content: space-around; align-items: flex-end; max-width: 440px; margin: 8px auto; } .sprite {background: url('../images/sprite.png') no-repeat top left;width: 42px;height: 42px;margin-right: 10px;} .sprite.sprite-SR { background-position: 0 0; } .sprite.sprite-DDE { background-position: -52px 0; } .sprite.sprite-LAO { background-position: -104px 0; } .sprite.sprite-PJ { background-position: -156px 0; } .sprite.sprite-JMU { background-position: -208px 0; } .sprite.sprite-JMO { background-position: -260px 0; } .sprite.sprite-ALR { background-position: -312px 0; } .sprite.sprite-MMA { background-position: -364px 0; } .sprite.sprite-RBA { background-position: -416px 0; } .sprite.sprite-IPE { background-position: -468px 0; } .sprite.sprite-NDR { background-position: -520px 0; } .sprite.sprite-MME { background-position: -572px 0; } .sprite.sprite-BGR { background-position: -624px 0; } .sprite.sprite-GPO { background-position: -676px 0; } .sprite.sprite-KHO { background-position: -728px 0; } .sprite.sprite-IDJ { background-position: -780px 0; } .sprite.sprite-MBA { background-position: -832px 0; } .sprite.sprite-ABR { background-position: -884px 0; } .sprite.sprite-VSH { background-position: -936px 0; } .sprite.sprite-CIN { background-position: -988px 0; } .sprite.sprite-KTH { background-position: -1040px 0; } .sprite.sprite-AWI { background-position: -1092px 0; } .sprite.sprite-EMO { background-position: -1144px 0; } .sprite.sprite-BAL { background-position: -1196px 0; } .sprite.sprite-IGP { background-position: -1248px 0; } .sprite.sprite-AG { background-position: -1300px 0; } .sprite.sprite-AI { background-position: -1352px 0; } .sprite.sprite-AL { background-position: -1404px 0; } .sprite.sprite-AP { background-position: -1456px 0; } .sprite.sprite-API { background-position: -1508px 0; } .sprite.sprite-DB { background-position: -1560px 0; } .sprite.sprite-DD { background-position: -1612px 0; } .sprite.sprite-DG { background-position: -1664px 0; } .sprite.sprite-EM { background-position: -1716px 0; } .sprite.sprite-GS { background-position: -1768px 0; } .sprite.sprite-LM { background-position: -1820px 0; } .sprite.sprite-MAV { background-position: -1872px 0; } .sprite.sprite-MB { background-position: -1924px 0; } .sprite.sprite-PL { background-position: -1976px 0; } .sprite.sprite-PP { background-position: -2028px 0; } .sprite.sprite-SB { background-position: -2080px 0; } .sprite.sprite-SJ { background-position: -2132px 0; } .sprite.sprite-UH { background-position: -2184px 0; } .sprite-9 { background: url('../images/sprite-second.png') -10px -10px; } .sprite-12 { background: url('../images/sprite-second.png') -72px -10px; } .sprite-2 { background: url('../images/sprite-second.png') -134px -10px; } .sprite-3 { background: url('../images/sprite-second.png') -196px -10px; } .sprite-5 { background: url('../images/sprite-second.png') -258px -10px; } .sprite-4 { background: url('../images/sprite-second.png') -320px -10px; } .sprite-6 { background: url('../images/sprite-second.png') -382px -10px; } .sprite-7 { background: url('../images/sprite-second.png') -444px -10px; } .sprite-8 { background: url('../images/sprite-second.png') -506px -10px; } .sprite-10 { background: url('../images/sprite-second.png') -568px -10px; } .sprite-11 { background: url('../images/sprite-second.png') -630px -10px; } .sprite-13 { background: url('../images/sprite-second.png') -692px -10px; } .sprite-14 { background: url('../images/sprite-second.png') -754px -10px; } .sprite-15 { background: url('../images/sprite-second.png') -816px -10px; } .sprite-16 { background: url('../images/sprite-second.png') -878px -10px; } .sprite-18 { background: url('../images/sprite-second.png') -940px -10px; } .sprite-17 { background: url('../images/sprite-second.png') -1002px -10px; } .sprite-19 { background: url('../images/sprite-second.png') -1064px -10px; } .sprite-20 { background: url('../images/sprite-second.png') -1126px -10px; } .sprite-21 { background: url('../images/sprite-second.png') -1188px -10px; } .sprite-22 { background: url('../images/sprite-second.png') -1250px -10px; } .sprite-23 { background: url('../images/sprite-second.png') -1312px -10px; } .sprite-24 { background: url('../images/sprite-second.png') -1374px -10px; } .sprite-25 { background: url('../images/sprite-second.png') -1436px -10px; } .sprite-1 { background: url('../images/sprite-second.png') -1498px -10px; } a.social-icon img { margin: -3px; } .sprite.sprite-default{ background: url(../images/sprite-default.png) no-repeat top left !important; } #Welcome{text-align: center;text-shadow: 4px 4px 16px var(--bkgd);/* backdrop-filter: blur(5px); */background: #ffffffb3;border-radius: 16px 16px 0 0;z-index: 2;} @-webkit-keyframes intro-gradient { 0%{background-position:0% 4%} 50%{background-position:100% 97%} 100%{background-position:0% 4%} } @-moz-keyframes intro-gradient { 0%{background-position:0% 4%} 50%{background-position:100% 97%} 100%{background-position:0% 4%} } @keyframes intro-gradient { 0%{background-position:0% 4%} 50%{background-position:100% 97%} 100%{background-position:0% 4%} } .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription *:not(.topKeyFigures):not(.topKeyFigure):not(.topKeyFigure__value):not(.topKeyFigure__label) { text-align: right; margin-left: auto !important; overflow-wrap: normal; } .CaseStudyWrapper:nth-child(odd) {flex-direction: row-reverse;text-align: right;display: flex;justify-content: flex-start;/* background: var(--accent); */} .CaseStudyWrapper:last-child .CaseStudyDescription { border-radius: 8px 8px 24px 24px; margin-bottom: 0px; } .curve { -webkit-shape-outside:circle(); shape-outside:circle(); } div.CaseStudyDescription p span { text-align: center; font-weight: 600; } span.scratch { font-weight: 300; } div#workfooter { /* min-height: 32px; */ } span.scratch { font-weight: 200 !important; text-decoration: line-through; } .dictionaryNumber { position: absolute; font-family: 'Inter', "Inter Fallback", "Inter Fallback R"; width: 24px; height: 24px; background: var(--bkgd); border-radius: 50%; text-align: center; z-index: 1; top: 16px; left: 16px; border: 2px solid var(--accent); } div.popUp { z-index: 2; /* display: none; */ /* left: 9999999px; */ border: 1px solid var(--frgd) !important; border-radius: 8px; position: absolute; /* box-shadow: 4px 4px 8px #bdbdbd; */ overflow: hidden; max-width: 380px; transform: translatey(0px); /* animation: floatinPopUp 8s ease-in-out infinite; */ filter: grayscale(1); /* opacity: 0.9; */ transition: top 12s ease, left 2s ease; } .popUp:hover{z-index: 99 !important;cursor: grab;box-shadow: 8px 8px 22px var(--border);filter: none;opacity: 1;border: 2px solid var(--border) !important;transition: top 30s ease, left 30s ease !important;} div.popUpHeader { display: flex; height: 24px; background: var(--action); background: var(--accent); border-bottom: 2px solid var(--action) !important; justify-content: space-between; z-index: 2; } .popUpArea { width: 100%; position: relative; min-height: 100vh; background: none; } .popUpActions { display: flex; } .popUpHeader .popUpActions button { width: 18px; height: 18px; padding: 0px 0px 1px 1px; margin: 4px 2px; box-shadow: 1px 1px var(--action); border-radius: 32px; background: var(--accent); border-color: var(--frgd); font-family: monospace; font-size: 1rem; text-align: center; line-height: 0; text-transform: lowercase; background: var(--action); border-width: 1px !important; } .popUpContent { overflow: hidden; z-index: 1; display: flex; width: 320px; max-height: 475px; background: var(--bkgd); flex-direction: column; justify-content: flex-end; } .popUpCategory { padding: 4px 8px; font-family: var(--font-meta); font-size: 0.75rem; } .popUpContent h2 { font-size: 2.938rem; font-weight: 800; text-align: left; /* text-transform: uppercase; */ padding: 16px; } .popUpLinks { display: flex; justify-content: space-evenly; padding: 0 0 16px; } .popUpImage {/* display: none !important; */height: 40%;overflow: hidden;flex-shrink: 1;display: flex;justify-content: center;align-items: center;background: var(--action);} .popUpText p { padding: 0 16px; font-size: 0.875rem; filter: grayscale(1); } .popUpText { height: 60%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; backdrop-filter: opacity(1); } .popUpLinks a { font-size: 0.75rem; padding: 2px 8px !important; margin: 2px !important; background: var(--action) !important; } .popUp.ui-draggable-dragging { cursor: grabbing; } /* .PopUpsAreAwesomeText { display: block; margin: auto; z-index: 1 !important; line-height: 0.8; font-weight: bold; text-align: center; position: absolute; top: 50%; right: 50%; transform: translate(50%,-50%); /* text-transform: uppercase; */ font-family: verdana; font-size: 6vw; font-weight: 800 !important; color: #f5f5f5; text-shadow: 1px 1px 1px var(--action), 1px 2px 1px var(--action), 1px 3px 1px var(--action), 1px 4px 1px var(--action), 1px 5px 1px var(--action), 1px 6px 1px var(--action), 1px 7px 1px var(--action), 1px 8px 1px var(--action), 1px 9px 1px var(--action), 1px 10px 1px var(--action), 1px 18px 6px rgba(16,16,16,0.4), 1px 22px 10px rgba(16,16,16,0.2), 1px 25px 35px rgba(16,16,16,0.2), 1px 30px 60px rgb(197 225 165 / 39%); } */ /* .PopUpsAreAwesomeText span{ font-size: 25vw; } */ .PopUpsAreAwesomeText { z-index: 1 !important; position: absolute; font-size: 5vw; font-weight: 800 !important; text-align: center; line-height: 0.9; top: 30vh; width: 100%; padding: 18px; border-radius: 8px; } .PopUpsAreAwesomeText span { font-size: 8vw; /* text-transform: uppercase; */ } .huerotate { /* -webkit-animation: hue 10s infinite; */ /* background: var(--action) !important; */ } @-webkit-keyframes hue { 1% { -webkit-filter: hue-rotate(0deg);} 100% { -webkit-filter: hue-rotate(359deg);} } /* smartphones, touchscreens */ @media only screen and (min-width: 1600px){ .CaseStudyWrapper {margin-left: calc(85vw - 104vw);margin-right: calc(85vw - 104vw);margin-bottom: calc(108vw - 102vw);/* margin: 128px 0px; */} div.mainHome div div.CaseStudyAnimation, .CaseStudyAnimation{ width: 22vw; height: 22vw; max-width: none; max-height: none; } #workfooter{height: 10vw;} .popUpArea{ left: -10vw; } .contactMe{ } } #carousel { display: flex; flex-direction: column; max-width: 500px; margin-left: auto; } #carouselBlocks { display: flex; overflow: hidden; order: 1; /* Adjust based on your requirement */ } #carouselBlocks .storySnippet { max-width: 100%; opacity:0; /* Hide Blocks initially */ width: 0; display: none; } #carouselBlocks .storySnippet.shown, #carousel.showAll #carouselBlocks .storySnippet{ opacity: 1; /* Show active image */ transition: 2s; width: 100%; display: block; } #carousel.showAll .storySnippetContainer{ flex-wrap: wrap; } #carousel.showAll button{ display: none; } #carousel.showAll #seeAllBtn, #carousel.showAll .cs-carousel__see-all, #carousel.showAll button.carousel-see-all { display: inline-flex !important; } #prevBtn,#nextBtn, .kb-nav-btn, .sq-rec-prev, .sq-rec-next, .cs-carousel__prev, .cs-carousel__next { font-size: var(--text-body); line-height: 1; padding: 0; } /* Shared carousel arrow icons (Material Symbols: arrow_back / arrow_forward) */ #prevBtn .material-symbols-outlined, #nextBtn .material-symbols-outlined, .kb-nav-btn .material-symbols-outlined, .sq-rec-prev .material-symbols-outlined, .sq-rec-next .material-symbols-outlined, .cs-carousel__prev .material-symbols-outlined, .cs-carousel__next .material-symbols-outlined, .carouselControls button .material-symbols-outlined { font-family: "Material Symbols Outlined", sans-serif; font-weight: normal; font-style: normal; font-size: calc(1.25rem * var(--ds-font-scale)); width: 20px; height: 20px; color: inherit; display: block; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; user-select: none; } .storySnippetContainerScrollable{ overflow-x: scroll; } .storySnippetContainer{display: flex;width: auto;flex-direction: row;flex-wrap: nowrap;align-items: stretch;} .storySnippet{background: var(--accent);font-family:'Inter', "Inter Fallback", "Inter Fallback R",sans-serif;font-size: calc(0.938rem * var(--ds-font-scale));text-align: left;line-height: 1.25;padding: var(--space-4);border-radius: 4px;/* min-width: 240px; */margin: var(--space-4);} .storySnippet img{ width: 60px; padding: 10px; margin-right: 18px; opacity: 0.75; float: left; border-radius: 100px; background: var(--bkgd); border: 1px solid var(--accent); } .storySnippet b{ display: block; font-weight: 600; font-size: var(--text-functional-sm); padding: 16px 0 8px; /* text-transform: uppercase; */ letter-spacing: 0.01em; } .showAll{max-width: 500px!important;margin-right: 0px !important;} .mainHome a.disabled { /* display: none; */ filter: grayscale(1); opacity: 0.5; cursor: default !important; box-shadow: none !important; position: static !important; z-index: -1; } div#uniquePopUp-10 { top: 47vh; left: 11vw; } div#uniquePopUp-9 { top: 26vh; left: 67vw; } div#uniquePopUp-8 { top: 22vh; left: 32vw; } div#uniquePopUp-6 { left: 61vw; top: 10vw; } div#uniquePopUp-5 { left: 64vw; top: -5vh; } div#uniquePopUp-4 { left: 38vw; } div#uniquePopUp-3 {left: -2vw;top: 69vh;} div#uniquePopUp-12 { top: 60vh; left: 62vw; } div#uniquePopUp-11 { left: 40vw; top: 53vh; } div#uniquePopUp-7 { left: 2vw; top: 30vh; } div#uniquePopUp-2 { left: 18vw; } div#uniquePopUp-1 { left: 1vh; top: 2vh; } a:active { box-shadow: inset 4px 3px 0px 0px #6262625e !important; } .homepage .sweaterContainer { display: block; } .popUpImage img { width: 100%; opacity: 0.6; filter: contrast(1.5); } .planet { display: none; height: 100vh; width: 100vw; max-width: 1200px; position: absolute; top: 1px; } svg#eXgNx2DaCFV1 { padding: 9%; box-sizing: border-box; } div#CustomerJourney { background: var(--bkgd); } .PopUpsAreAwesomeText i { font-size: 0.75rem; color: var(--frgd); } body#MainSection > a { /* display: block; */ /* width: 80px; */ /* height: 80px; */ } .main li b, .main li h4.caseStudyLabel { display: block; /* line-height: 1.8; */ /* text-transform: uppercase; */ padding: 4px; letter-spacing: 1px; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; } .main li b { background: var(--accent); } .main li h4.caseStudyLabel { background: none; } .main .is-struck { text-decoration: line-through; } .main .is-muted-note { color: #191919; background: #eeedee; opacity: 0.55; padding: 0 16px; } .main > video.is-strip { border: none; background: #eeedee; width: 100%; height: 128px; margin-bottom: -32px; } .contactMe { /* background: linear-gradient(45deg,#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91C6AC,#b4d48d,#dfc17e); */ /* background-image: conic-gradient(#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91c6a8,#b4d48d,#dfc17e,#ec8c86); */ background: none; box-sizing: border-box; color: var(--frgd); border-radius: 16px; padding: 32px 16px; margin: 16px 0; /* box-shadow: 8px 8px 12px #e0e0e0; */ filter: drop-shadow(1px 1px 1px var(--border)); flex-direction: column !important; width: 100%; position: relative; overflow: hidden; } .contactMe h2 { /* text-align: left; */ text-transform: none; font-weight: 600; font-size: 5.75rem; padding: 16px 0; letter-spacing: -4px; } .contactMe p { text-align: center; /* color: var(--frgd); */ font-size: 2rem; margin: 0; padding: 8px; } .contactMeButtons { display: flex; } #contact-background-video {position: absolute;bottom: -40%;left: 0;right: 0;margin: 0;z-index: -1;opacity: 0.1;min-height: 110%;min-width: 110%;filter: blur(2px);/* filter: grayscale(0.6); */} div#contactMeButtons { display: flex; justify-content: space-evenly; margin-bottom: 8px; flex-wrap: wrap; } div#contactMeButtons a { color: var(--frgd); border-color: var(--frgd) !important; background: var(--bkgd); font-size: calc(1.125rem * var(--ds-font-scale)); margin: 08px; font-weight: 600; font-size: 1.375rem; text-transform: uppercase; padding: 8px 16px; border-radius: 8px; border: 2px solid; } a.lowTimeIcon svg#eiLeq2IX49s1 { width: 36px; padding: 0; } /* Second-level Work navigation bar Each item: title, short description, company logo */ nav.mainNavigation { position: relative; max-width: min(1400px, 100%); width: 100%; box-sizing: border-box; } nav.mainNavigation:has(.second-level-bar), nav.mainNavigation:has(ol.second-level-navigation) { overflow-x: hidden; } nav.mainNavigation:has(.second-level-bar) > ol > li > a, nav.mainNavigation:has(ol.second-level-navigation) > ol > li > a { font-size: 1.5rem; } .second-level-bar { max-width: calc(100% - 32px); display: flex; flex-direction: row; align-items: center; gap: var(--space-2); box-sizing: border-box; z-index: 5; background: none; border: none; border-radius: 8px; padding: 4px 4px; backdrop-filter: blur(3px); overflow-x: hidden; overflow-y: hidden; } /* Desktop: reuse main-CaseStudy card structure */ .second-level-bar__item.main-CaseStudy-link, nav.mainNavigation .second-level-bar__item.main-CaseStudy-link { display: block !important; flex-shrink: 0; height: 100%; margin: 0 4px 0 0 !important; padding: 0 !important; text-decoration: none !important; text-transform: none !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; color: var(--frgd) !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0; white-space: normal; position: relative !important; top: auto !important; left: auto !important; opacity: 1; -webkit-text-fill-color: unset !important; backdrop-filter: none !important; transition: 0.3s linear; cursor: pointer; } .second-level-bar__item.main-CaseStudy-link:focus-visible, nav.mainNavigation .second-level-bar__item.main-CaseStudy-link:focus-visible { opacity: 1; background: transparent !important; box-shadow: none !important; margin-top: 0 !important; } .second-level-bar__item.main-CaseStudy-link:focus-visible { outline: 1px solid var(--frgd); outline-offset: 1px; } .second-level-bar__item.main-CaseStudy-link .main-CaseStudy { margin-bottom: 0; height: 100%; border: 2px solid var(--frgd); border-radius: 8px; box-shadow: 2px 2px 0 var(--shadow); background: var(--action); overflow: hidden; } /* Match nav.mainNavigation ol li a hover / active press */ .second-level-bar__item.main-CaseStudy-link:hover, nav.mainNavigation .second-level-bar__item.main-CaseStudy-link:hover, nav.mainNavigation ol li .second-level-bar__item.main-CaseStudy-link:hover, .second-level-bar__item.main-CaseStudy-link:active, nav.mainNavigation .second-level-bar__item.main-CaseStudy-link:active, nav.mainNavigation ol li .second-level-bar__item.main-CaseStudy-link:active { color: var(--frgd) !important; background: transparent !important; box-shadow: none !important; position: relative !important; top: 2px !important; left: 2px !important; transition: 0.3s linear; } .second-level-bar__item.main-CaseStudy-link:hover .main-CaseStudy, .second-level-bar .main-CaseStudy:hover, .second-level-bar__item.main-CaseStudy-link:active .main-CaseStudy, .second-level-bar .main-CaseStudy:active { box-shadow: none; margin: 0; border: 2px solid var(--frgd); background: var(--action); } .second-level-bar__item[aria-current="page"], nav.mainNavigation .second-level-bar__item[aria-current="page"] { opacity: 1; pointer-events: none; cursor: default; } .second-level-bar__item[aria-current="page"] .main-CaseStudy { background: none; box-shadow: none; border: none; } .second-level-bar__item[aria-current="page"] .linkIcon { display: none; } .second-level-bar__item[aria-current="page"] .contentLayout-CaseStudy { background: none; } .second-level-bar__item[aria-current="page"] .image-CaseStudy { background: none; border-right: none; } .second-level-bar .contentLayout-CaseStudy { height: 100%; align-items: center; background: var(--action); } .second-level-bar .content-CaseStudy { min-width: 0; padding: 6px 12px 6px 8px; justify-content: center; align-items: flex-start; text-align: left; gap: 2px; } .second-level-bar .content-CaseStudy h4 { font-size: 0.9375rem; font-weight: 800; /* text-transform: uppercase; */ letter-spacing: 0.5px; line-height: 1.15; padding: 0; margin: 0; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; color: #000; text-align: left; } .second-level-bar .content-CaseStudy p { display: block; margin: 0; padding: 0; font-size: 0.75rem; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; color: #000; opacity: 1; white-space: normal; text-align: left; } .second-level-bar .image-CaseStudy { min-width: 72px; width: 72px; height: 48px; padding: 8px; box-sizing: border-box; align-items: center; justify-content: center; background: #fff; border-right: 2px solid var(--frgd); } .second-level-bar__logo { display: block; width: 100%; max-width: 56px; height: auto; max-height: 28px; object-fit: contain; object-position: center; opacity: 1; pointer-events: none; } .second-level-bar .linkIcon { display: none; } /* Legacy orb styles — kept for case study pages not yet migrated */ .second-level-bar__orb.CaseStudyAnimation { width: 100%; height: 44px; min-width: 0; min-height: 44px; margin: 0; border-radius: 0; overflow: hidden; position: relative; display: block; background: var(--bkgd); border: none; filter: none; flex-shrink: 0; } .second-level-bar__orb.CaseStudyAnimation > svg { width: 100%; height: 100%; display: block; pointer-events: none; } .second-level-bar__scroller { flex: 1 1 auto; min-width: 0; max-width: 100%; width: 100%; height: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; outline: none; /* Vertical inset so focus rings / box-shadows aren't clipped */ padding: 2px 0; /* Soft fade at edges so items glide out instead of hard-clipping */ -webkit-mask-image: linear-gradient( to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100% ); } .second-level-bar__scroller::-webkit-scrollbar { display: none; width: 0; height: 0; } .second-level-bar__scroller:focus-visible { outline: 1px solid var(--frgd); outline-offset: 1px; border-radius: 2px; } nav.mainNavigation ol.second-level-navigation, .second-level-bar ol.second-level-navigation { position: static; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; margin: 0; padding: 0 6px; height: 100%; width: max-content; max-width: none; list-style: none; justify-content: flex-start; right: auto; left: auto; } nav.mainNavigation ol.second-level-navigation > li, .second-level-bar ol.second-level-navigation > li, nav.mainNavigation ol ol.second-level-navigation li { padding: 0; margin: 0; border: none !important; flex: 0 0 auto; flex-shrink: 0; height: 100%; } .second-level-bar__mobile { display: none; flex: 1 1 auto; min-width: 0; justify-content: flex-end; } .second-level-bar__mobile select { /* width: 100%; */ max-width: 140px; /* height: 44px; */ margin-left: auto; appearance: none; -webkit-appearance: none; font-family: var(--font-meta); font-size: var(--text-functional-sm); font-weight: 600; /* text-transform: uppercase; */ letter-spacing: 0; color: var(--frgd); background: var(--action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233a4237' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid var(--frgd); border-radius: 8px; box-shadow: 1px 1px; padding: 8px 28px 8px 10px; cursor: pointer; transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; } .second-level-bar__mobile select:hover, .second-level-bar__mobile select:focus { border-color: var(--frgd); box-shadow: none; outline: none; } .second-level-bar__mobile select:focus-visible { outline: 2px solid var(--frgd); outline-offset: 2px; } .main > video, .main > .caseStudyInProgress > video {box-sizing: border-box;width: 100%;margin-top: var(--space-7);margin-bottom: -64px;/* box-shadow: 2px 2px 12px 1px var(--action); */border-radius: 8px;border: 1px solid var(--accent);margin-bottom: 0px;} .imageViewer {display: flex;flex-wrap: wrap;justify-content: space-evenly;align-items: flex-start;margin-top: var(--space-10);background: var(--accent);padding: var(--space-4) var(--space-2);border-radius: 16px;margin-bottom: 8px;} .imageViewer img {width: 22%;} .imageViewer.templatePictograms > img {filter: grayscale(1);opacity: 0.7;} ellipse#eibwYEZDXzF4 {stroke: var(--action);} g#eibwYEZDXzF5_to {} ellipse#eibwYEZDXzF5 {fill: var(--action);} h2::before { content: ''; width: 100%; height: 20px; /* background: var(--accent); */ /* background: var(--action); */ position: absolute; left: 0; bottom: 16px; z-index: -1; border-radius: 2px; transform: rotate(358deg); transition: all .2s; opacity: 0.5; } h2 {z-index: 2;position: relative;} .contactMe h2::before {content: none;} div.CaseStudyDescription h2 {padding-bottom: 12px !important;} tspan#epOGhwRnLdF43 {fill: var(--accent);} .nextCaseStudy {text-align: right;padding-bottom: 64px;padding-top: 32px;/* display: inline-block; */} .nextCaseStudy p {width: auto;} .nextCaseStudy span {font-weight: 600;letter-spacing: 1px; display: block;font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif;} .nextCaseStudy a {margin-right: 0 !important;} .main img.mainImage {max-width: 100%;margin: var(--space-9) auto 0;border-radius: 16px;filter: grayscale(1);} .main img.mainImage.is-color {filter: none; background: var(--accent);} .imageViewer.bigViewer img {width: 44%;} #movingBanner {display: none;box-sizing: border-box;background: var(--accent);/* background: var(--action); */padding: 32px;border-radius: 16px;margin: 16px 0;position: relative;filter: drop-shadow(1px 1px 1px var(--border));overflow: hidden;/* border: 6px solid var(--action) !important; */} #movingBanner > p {text-align: left !important;margin: 0;font-size: 1rem;line-height: 1.5; display: block; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px;padding: 0;max-width: 55%;} #movingBanner > h2 { line-height: 1;text-align: left;padding-bottom: 16px;margin: 0;width: 600px;max-width: 70%;padding-left: 0;} #movingBanner > h2::before { display: none;} #movingBanner > img { position: absolute; top: -15vw; width: 63vw; right: -27%; /* max-width: 775px !important; */ opacity: 0.8; margin: 0; -webkit-animation:spin 120s linear infinite; -moz-animation:spin 120s linear infinite; animation:spin 120s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } } #movingBanner > * {max-width: 70%;} @media only screen and (max-width: 768px) { body{ background-size: 120% !important; } .homeStage { /* align-items: flex-end; */ margin: 0; height: auto; } .certBadges { margin: 32px auto 12px; gap: var(--space-2); } .certBadges #NNg img { width: 60px; height: auto; max-height: none; object-fit: contain; } .certBadges #IxDF img { width: 40px; height: 40px; max-height: 40px; object-fit: contain; } .companiesContainer, .colleaguesContainer { /* display: none; */ padding: 0; width: 100%; min-width: 100%; border: none !important; border-top: 1px solid var(--border) !important; margin-top: -1px; padding-bottom: 64px !important; } .sweaterContainer{ opacity: 0.7; } .graffiti{ height: 120px; bottom: 16px; right: auto; display: none; } #Welcome { font-size: 12vw; letter-spacing: -2px; padding-top: 32px; margin-left: 0; margin-right: 0; text-align: center; background: none; /* text-transform: capitalize; */ } .mainHome h2 { width: 100%;border: none; text-align: center; font-size: 1.5rem; padding: 32px 4px 16px; /* text-transform: uppercase; */ text-shadow: none;} .mainHome .borderWrapper { padding: 0 16px 16px; } .companiesContainer div > * { max-width: 74px !important; } nav.mainNavigation ol { justify-content: flex-end; left: auto !important; right: 8px !important; justify-content: flex-end !important; padding-left: 0px; } /* Non-index: drop FAQ so the face home button fits beside About/Work/More */ body:not(.homepage) nav.mainNavigation > ol > li#shortVersion { display: none; } div.mainHome div div.ExperienceContent { max-width: 100%; width: -webkit-fill-available; min-width: 280px; font-size: 0.875rem; padding: 16px 8px; font-size: 0.75rem; /* border-left: 2px solid #fdfefc !important; */ /* border-color: #fdfefc !important; */ } .RecomendationsContent { max-width: 100%; width: 100%; padding: 0; } .RecomendationsWrapper { --rec-cols: 2; gap: 10px 12px; } @media only screen and (max-width: 360px) { .RecomendationsWrapper { --rec-cols: 1; } } .contactMe h2 { letter-spacing: 0; font-size: calc(3.75rem * var(--ds-font-scale)); letter-spacing: -2px; text-transform: none !important; /* text-align: left; */ } .imagePlaceholder { display: flex; height: 100px; width: 100px; margin-bottom: -16px; /* max-width: 400px; */ max-height: 400px; margin-left: auto; margin-right: auto; align-items: center; border-radius: 100%; border: 1px solid var(--accent); } .mainSectionsContainer, .mainHome .mainSectionsContainer{ display: none; } .mainSection{ display: flex; box-sizing: border-box; width: 100%; padding: 0 0 66px; flex-direction: row; align-items: center; position: relative; } .mainSection:nth-child(2){ border: none; } .dicctionaryRow { display: flex; flex-direction: column; flex-wrap: nowrap; } div.dictionarySnippet{ margin-bottom: var(--space-4); } p.manifest_copy { font-size: 1.625rem; line-height: 1.6; } .aboutUsLinkedin { flex-direction: column; text-align: center; align-items: center; padding: 32px 8px; width: auto; } .aboutUsLinkedin * { width: 100%; } .marquee { top: 50vh; display: none!important; } .marquee__content li{ font-size: 1.438rem; letter-spacing: -3px; line-height: 1.1; padding: 2px 6px 8px; } .marquee .marquee__content.opposite li { font-size: 0.812rem !important; background-color: var(--accent) !important; } .marquee__content.opposite { display: none; } .homeStage h1 { display: block; /* opacity: 0; */ /* margin-top: 8px !important; */ color: var(--frgd) !important; width: 100%; text-align: center; margin: 32px 0 16px !important; font-size: 1.5rem !important; /* height: 200px; */ /* font-size: 6.25rem !important; */ padding: 0 16px; text-align: center; -webkit-text-stroke-width: 0px; -webkit-text-fill-color: var(--frgd) !important; letter-spacing: 2px; /* text-shadow: 4px 4px var(--bkgd); */ /* text-align: left !important; */ z-index: 1; /* display: none; */ padding-left: 84px !important; font-weight: 600; text-align: left !important; } #movingBanner > p { max-width: 100%; /* background: var(--action); */ text-shadow: 2px 2px var(--accent); filter: none; filter: drop-shadow(2px 4px 6px var(--accent)); } #movingBanner{ display: none; padding: 16px; margin: 64px 0 0; position: relative; } .planet { height: 30vh; width: 60vw; top: -10vh; } #top + .noTimeLink{ display: none; } .homeStage h2 { font-size: 2.125rem; margin: 8px auto; text-align: center; } div#stars, div#stars2 { display: none; } ul.list-inline:nth-child(1) { display: none; } nav.mainNavigation { padding: 16px 0 8px; margin: 0; } nav.mainNavigation ol li a, nav.mainNavigation:has(.second-level-bar) > ol > li > a, nav.mainNavigation:has(ol.second-level-navigation) > ol > li > a { font-size: 0.875rem; -webkit-text-stroke-width: 0px; /* -webkit-text-fill-color: var(--action); */ text-underline-offset: 2px; padding: 4px 8px; border-width: 2px !important; } nav.mainNavigation ol li {padding: 4px 8px;margin: 4px 4px 4px -2px;border-width: 2px !important;} a.disabled { pointer-events: none; cursor: default; } .main{ padding: 16px; text-align: center; --max-width: 800px; --heading-col: 100%; --content-col: 100%; --section-start: 8rem; } .main > p, .main > ol, .main > ul, .main > h3, .main > a, .main > h2, .main > h4.caseStudyLabel, .main > .quoteImage, .main > .cs-cards, .main > .cs-carousel, .main > .caseStudyInProgress > p, .main > .caseStudyInProgress > ol, .main > .caseStudyInProgress > ul, .main > .caseStudyInProgress > h3, .main > .caseStudyInProgress > a, .main > .caseStudyInProgress > h2, .main > .caseStudyInProgress > h4.caseStudyLabel, .main > .caseStudyInProgress > .quoteImage, .main > .caseStudyInProgress > .cs-cards, .main > .caseStudyInProgress > .cs-carousel, .main .quoteText { float: none; clear: both; width: 100%; max-width: 100%; margin-left: 0; } .main h2:not(.qBand__title){ text-align: center; margin-top: var(--section-start) !important; padding-top: 0; padding-bottom: 16px; width: 100%; border: none; font-size: 1.5rem; /* text-transform: uppercase; */ } .main > h4.caseStudyLabel, .main > .caseStudyInProgress > h4.caseStudyLabel { text-align: left; width: 100%; margin-top: 1.5rem; margin-bottom: 0.5rem; } .main > h2 + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock), .main > .caseStudyInProgress > h2 + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock) { margin-top: 0.75rem !important; } .main > h4.caseStudyLabel + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock), .main > .caseStudyInProgress > h4.caseStudyLabel + :is(p, ul, ol, dl, h3, figure, .cs-cards, .cs-carousel, .cs-roles, .cs-shift, .cs-stepper__ui, .ax-mock) { margin-top: 0.5rem !important; } .main .quoteImage { float: none; text-align: left; margin-bottom: 0.5rem; margin-top: 2rem; z-index: 1; position: relative; } .quoteImage img { height: 48px; width: 48px; border: 4px solid var(--border); margin-bottom: -8px; } h1{ font-size: 16vw; text-align: center; } ::marker { font-size: 1rem; } .main li { padding-left: 0.15em; margin-left: 0; list-style-position: outside; text-align: left; } .main > ul, .main > ol, .main > .caseStudyInProgress > ul, .main > .caseStudyInProgress > ol { padding-left: 32px; text-align: left; margin-left: 0; margin-right: 0; } .main .quoteText { min-width: 0; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0; } .main > .quoteImage + .quoteText, .main > .caseStudyInProgress > .quoteImage + .quoteText { margin-top: 0; } a.lowTimeIcon svg#eiLeq2IX49s1 { width: 36px; padding: 0px 0px; } nav.mainNavigation ol li a.lowTimeIcon { padding: 2px; min-height: 40px; } .section-description{ display: none !important; } .crossSectionNavigation ul li a { padding: 8px; border-radius: 8px; border-width: 4px; } .crossSectionNavigation svg.companyLogo { min-width: 100%; padding: 2px 0px 4px; } nav.mainNavigation > a img { max-width: 60px !important; min-width: 60px !important; height: 60px; } .CaseStudyWrapper { /* background: radial-gradient(var(--accent), transparent); */ text-align: center; margin: 0px 0px; padding: 48px 0px 0; } .CaseStudyAnimation { background: var(--accent); /* width: 80% !important; */ max-width: 50vh; height: auto !important; margin: auto !important; } .CaseStudyDescription { width: 100%; height: auto; text-align: center !important; margin-bottom: var(--space-7); margin: 16px 8px; flex-direction: column; align-items: center; flex-wrap: nowrap; margin-top: var(--space-7); background: none; padding: 0 16px 32px; border-radius: 8px; min-width: auto; } article .CaseStudyDescription > a { /* width: 90%; */ margin: 12px auto 4px !important; } svg.CaseStudycompanyLogo { margin: 0; margin-bottom: -30px; } .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription p { text-align: left !important; margin-left: auto; } .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription a, .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription h2{ text-align: center !important; } .PopUpsAreAwesomeText{ display: none; } .popUp.ui-draggable.ui-draggable-handle { filter: none; position: static; animation: none; box-shadow: none; margin: 16px auto 1px; /* border: none !important; */ max-width: 100%; width: 100%; border: 2px solid var(--border); border-width: 0 0 1px !important; border-color: var(--border) !important; } div.popUpHeader { display: none; } .popUpLinks { /* justify-content: flex-start; */ /* flex-direction: column; */ padding: 8px 16px; } .popUpLinks a { margin-bottom: 8px !important; } .popUpText { /* width: calc(100vw - 200px); */ min-width: 66%; height: auto; background: var(--bkgd); border-radius: 0 0 8px 8px; /* border-top: none; */ border: none !important; text-align: center !IMPORTANT;} div.popUpContent{ min-width: 100%; display: flex; flex-direction: row; align-items: flex-start; flex-wrap: nowrap; justify-content: space-evenly; max-height: inherit; position: relative; background: var(--bkgd); border: 2px solid var(--border); box-sizing: border-box; border-radius: 8px; padding: 0 0 8px; border: none !important; box-shadow: none !important; } div.popUpImage{border-radius: 100%;max-width: 25vw;max-height: 25vw;margin-top: 16px;/* margin: auto; */margin-left: 16px;flex-shrink: 1;display: none;} div.popUpImage img{height: 24vw;width: 25vw;display: none;} .main p+svg, .main p+object, .main ol+object { margin: 0; width: 100% !important; } .contactMe p{ font-size: 1.5rem; } .contactMe svg { /* height: 100vh !important; */ /* margin-left: -100vw; */ } .second-level-bar { max-width: calc(100% - 24px); flex-wrap: nowrap; padding: 4px 6px; align-items: center; overflow-x: hidden; } .second-level-bar__scroller { display: none; } .second-level-bar__mobile { display: flex; flex: 1 1 140px; width: auto; } .second-level-bar__mobile select { max-width: none; } nav.mainNavigation:has(.second-level-bar), nav.mainNavigation:has(ol.second-level-navigation) { overflow-x: hidden; } ol.second-level-navigation { margin-top: 4px; margin-left: 0; } nav.mainNavigation ol ol li a { /* padding: 2px; */ box-shadow: none; font-size: 0.812rem; } nav.mainNavigation ol ol li { margin: 0; } .ExperienceWrapper { padding-left: 16px; } body#short h1 { /* font-size: 5rem !important; */ } .load-more { max-height: 1200px; } .mainSection > div{ display: flex; flex-direction: column-reverse; padding: 8px 4px; } .mainSection > p{ margin: 0; position: relative; padding: 8px; } .mainSection h2{ padding: 4px 0 8px; display: none; } .mainSection a{position: absolute !important;right: 0 !IMPORTANT;bottom: 26px !important;top: auto !important;left: auto !important;align-items: center;} .Introduction{ padding-bottom: 8px; } .colleaguesContainer h2{ display: none; } .colleaguesContainer{ display: flex; align-items: center; flex-direction: column; } .colleaguesContainer p { margin-top: var(--space-7); } .Introduction a{ /* margin: 32px auto !IMPORTANT; */ } #downloadResumeHome{ display: none; } div.latestDescription{ display: flex; flex-direction: column; flex-wrap: nowrap; padding: 0; box-sizing: border-box; } div.latestDescription > div{ width: 100%; flex-grow: 1; } div.latestDescription > div:first-child > h5{ display: none; } details.latestDescription-more { display: block; flex: 1 1 100%; width: 100%; } details.latestDescription-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); cursor: pointer; list-style: none; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-size: var(--text-functional); font-weight: 600; padding: 12px 0; margin: 0 0 8px; width: 100%; box-sizing: border-box; border-top: 1px solid color-mix(in srgb, var(--frgd) 18%, transparent); } details.latestDescription-more > summary::-webkit-details-marker, details.latestDescription-more > summary::marker { display: none; content: none; } details.latestDescription-more > summary::after { content: ''; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; flex-shrink: 0; } details.latestDescription-more[open] > summary::after { transform: rotate(225deg); margin-top: 0.2em; } details.latestDescription-more > summary:focus-visible { outline: 2px solid var(--frgd); outline-offset: 4px; } details.latestDescription-more[open] .latestDescription-extra { display: flex; flex-direction: column; flex-wrap: nowrap; } div.latestDescription-extra > div { width: 100%; flex: 0 0 100%; padding: 8px; box-sizing: border-box; } div.LatestProject{ align-items: stretch; display: flex; flex: none; flex-direction: row; flex-wrap: nowrap; gap: 12px; justify-content: flex-start; overflow-x: auto; width: 100%; max-width: 100%; padding: 0; margin: 0 0 24px; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ box-sizing: border-box; } div.LatestProject:has(> .LatestProject__track) { display: block; overflow: visible; } div.LatestProject::-webkit-scrollbar, div.LatestProject__track::-webkit-scrollbar { display: none; } div.topProject{ padding: 0px 16px 40px; box-sizing: border-box; } .topPhraseRow { flex-direction: column; align-items: flex-start; padding: 8px 12px 0 !important; gap: var(--space-4); } p#topPhrase, p.topPhrase { display: none; } ul.topKeyFigures { display: none; } .topKeyFigure { flex: none; width: auto; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0.5em; min-width: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; text-align: left; white-space: nowrap; margin: 0; } .topKeyFigure + .topKeyFigure { margin: 0; } .topMeta { margin-top: 12px; gap: 8px 16px; } .topRole, #topDate, .topDate { font-size: 0.875rem; } .topDateGroup .topDate { font-size: 0.875rem; } img#topLogo, img.topLogo{margin-top: 16px;margin-left: 0;width: 64px;} div#disclaimer, .topProject .disclaimer { right: 0; } div.LatestProject > img{ /* aspect-ratio: .4666666666666667 / 1; */ width: 33vw; flex: none; overflow: visible; position: relative; /* width: 280px; */ } div.LatestProject > .LatestDemo--cense { width: 33vw; flex: none; } div.LatestProject > .LatestDemo--aws { width: 100%; max-width: 100%; min-width: 100%; flex: 0 0 100%; } div.LatestProject__scroller > .LatestDemo--aws { flex: 0 0 100cqw; width: 100cqw; min-width: 100cqw; max-width: none; } #carousel{ margin-right: auto; } } /* End of Media Mobile */ @media (hover: none) and (pointer: coarse) { .PopUpsAreAwesomeText{ display: none; } .popUpArea { display: flex; flex-direction: row; flex-wrap: wrap; min-height: auto; justify-content: center; } div.popUp { position: static !important; box-shadow: none; margin: 16px auto 32px; border: none !important; max-width: 100%; width: 45%; margin: 16px auto; box-shadow: none !important; display: flex; align-items: center; justify-content: space-around; } div.popUpHeader { display: none; } .popUpLinks { justify-content: space-evenly; flex-direction: row; padding: 8px 8px; } .popUpLinks a { margin-bottom: 8px !important; } .popUpText { background: var(--bkgd); border: 2px solid var(--border); border-radius: 0 0 8px 8px; } a#contactMeBadge { transform: scale(0.75); } } a#contactMeBadge { display: none !important; box-sizing: border-box; position: absolute !important; top: -12px !important; right: -27px !important; left: auto !important; z-index: 9999; /* background: linear-gradient(45deg,#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91C6AC,#b4d48d,#dfc17e); */ /* background-image: conic-gradient(#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91c6a8,#b4d48d,#dfc17e,#ec8c86); */ color: var(--frgd); padding: 0px; border-radius: 100%; display: flex; align-content: center; justify-content: center; margin: 0; padding: 0!important; box-shadow: 3px 3px var(--frgd); } a#contactMeBadge:hover{ filter: saturate(1.5); } a#contactMeBadge svg { width: 80px; height: 80px; margin: 5px 5px 0; } .rotate { animation: rotation 20s infinite linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .contactMeButton * { background-clip: text; -webkit-background-clip: text; color: transparent; background: linear-gradient(45deg,#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91C6AC,#b4d48d,#dfc17e); background-image: conic-gradient(#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91c6a8,#b4d48d,#dfc17e,#ec8c86); } .contactMe.popUp{ border: none !important; left: 30vw; top: 30vh; z-index: 1; filter: none !important; } a.contactMeLink { box-shadow: -2px -2px var(--frgd) !important; position: relative; top: -30px !important; left: 12px !important; /* background: linear-gradient(45deg,#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91C6AC,#b4d48d,#dfc17e) !important; */ /* background-image: conic-gradient(#ec8c86,#d78191,#c1759c,#8eabcb,#7cbddb,#91c6a8,#b4d48d,#dfc17e,#ec8c86) !important; */ /* background: #fdd835!important; */ /* color: var(--bkgd) !important; */ } a.contactMeLink:hover { } a.contactMeLink:hover { box-shadow: none !important; top: -32px !important; left: 10px !important; } .noTimeLink { z-index: 1; position: absolute; top: 0; right: 0; /* background: var(--bkgd); */ background: var(--notime); display: flex; padding: 8px 8px 8px 4px; border-radius: 0px 0 0 16px; max-height: 60px; display: none; } svg#eiLeq2IX49s1 { padding: 0 4px 0 0; width: 50px; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .noTimeLink span { font-size: 2.5rem; color: var( --frgd); font-weight: 600; /* text-transform: uppercase; */ font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-size: calc(1.25rem * var(--ds-font-scale)); text-align: center; display: block; } .noTimeLink .noTimeLink__chip, .noTimeLink a:not(.noTimeLink) { display: block; font-size: 0.75rem; box-sizing: border-box; text-align: center; background: var(--shortTrigger); padding: 2px 8px; font-family: var(--font-meta); text-transform: uppercase; text-decoration: none; color: #1a1f18; text-decoration: none; border: 2px solid var(--frgd) !important; border-radius: 4px; box-shadow: 2px 2px var( --shadow); font-weight: 600; letter-spacing: 0.5px; } .noTimeLink a:not(.noTimeLink):hover { box-shadow: none; position: relative; left: 2px; top: 2px; cursor: pointer; } body#short { --action: #fcf7a7; --accent: #e9ffe0; font-family: 'Inter', "Inter Fallback", "Inter Fallback R" !important; background: var(--accent); } body#short #BackToHome { position: fixed; top: 16px; left: 16px; z-index: 10; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; box-sizing: border-box; background: var(--action); color: var(--frgd); text-decoration: none; border: 2px solid; border-radius: 100%; font-size: 1.5rem; font-weight: 800; line-height: 1; } body#short #BackToHome:hover { box-shadow: 2px 2px 0 var(--frgd); } body#short * { font-family: 'Inter', "Inter Fallback", "Inter Fallback R" !important; } /* Keep icon font ligatures working (body#short * forces Inter otherwise). */ body#short .material-symbols-outlined { font-family: "Material Symbols Outlined", sans-serif !important; } /* Bricolage display/heading exceptions over body#short * Inter lock. */ body#short #topPhrase, body#short .topPhrase, body#short #Welcome, body#short .latestDescription h5, body#short h1, body#short .sq-body .sq-big, body#short .sq-body .sq-statement, body#short .sq-body .sq-row h4 { font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif !important; } body#short .sq-trio h4, body#short .sq-title { font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif !important; } body#short h2 { font-size: var(--text-functional-sm); padding-top: 0px; margin-top: 0; font-weight: 600; /* text-transform: uppercase; */ letter-spacing: 0.01em; } body#short p { font-size: calc(1.25rem * var(--ds-font-scale)); text-align: left; padding-bottom: 32px; line-height: 1.7; max-width: var(--measure); hyphens: none !important; } .shortContent { box-sizing: border-box; max-width: 600px; width: 100%; margin: auto; padding: 16px; /* background: var(--accent); */ z-index: 1; backdrop-filter: blur(42px); } body#short footer { padding: 0px; padding-bottom: 32px; } body#short h1 { text-align: left; font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); font-weight: 800; /* margin-top: 128px; */ line-height: 1.2; padding-bottom: 16px; } a.contactMeShort {box-sizing: border-box;padding: 8px;text-align: center;display: block;color: var(--frgd);/* color: black; */text-decoration: none;font-weight: 800;text-transform: uppercase;border: 2px solid;box-shadow: 2px 2px;border-radius: 4px;font-size: 2.125rem;background: var(--action);/* background: orange; */width: 100%;} a.contactMeShort:hover { box-shadow: none; position: relative; left: 2px; top: 2px; cursor: pointer; } .noTimeLink.bottomNotime { position: static; width: fit-content; flex-direction: row-reverse; border-radius: 0 8px 0 0; padding: 8px 0px 20px 16px; max-height: 64px; } body#short p a, .gotSomeTime a { text-decoration: none !important; color: var(--frgd); background: var(--action); display: inline-block; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; line-height: 1.6; cursor: pointer; padding: 2px 8px; margin: 2px 8px 2px 0; /* border: 2px solid rgb(0 0 0 / 0%); */ font-weight: 800; border-radius: 8px; border: 2px solid; box-shadow: 1px 1px var(--frgd); } body#short p a:hover, .gotSomeTime a:hover { border: 2px solid var(--frgd); position: relative; box-shadow: none; top: 1px; left: 1px; } .main-CaseStudy-link{ color: var(--frgd); text-decoration: none; margin-bottom: var(--space-4); display: block; } .linkIcon{background: var(--bkgd);width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 100%;margin-left: auto;/* border: 4px solid var(--action); */transition: 0.5s;position: absolute;bottom: -4px;right: -4px;} .linkIcon:hover{ transition: box-shadow 0.2s ease-out 0s; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(255, 255, 255, 0.5) 0px 0px 0px 6px; } .linkIcon svg{ } .main-CaseStudy:hover{ box-shadow: none; margin: 2px 0 2px 2px; } .gotSomeTime { display: block; margin: 64px auto 32px; width: fit-content; text-align: center; } .main-CaseStudy{background: var(--bkgd);border: 2px solid var(--frgd);border-radius: 8px;overflow: hidden;box-shadow: 2px 2px var(--shadow);} .contentLayout-CaseStudy{display: flex;align-items: stretch;background: var(--action);flex-wrap: nowrap;} .content-CaseStudy h4{ font-weight: bold; /* text-transform: uppercase; */ padding: 4px 0 8px; letter-spacing: 1px; } .contentLayout-CaseStudy {} .image-CaseStudy{ min-width: 100px; width: 100px; background: var(--bkgd); display: flex; align-content: center; flex-wrap: nowrap; flex-direction: column; justify-content: center; } body#short .content-CaseStudy p{ margin: 0; padding: 0; line-height: 1; font-size: 1rem; flex-grow: 1; } .content-CaseStudy{ padding: 8px 16px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; position: relative; } .CaseStudyAnimation{ background: var(--bkgd); } body#short .metaInformation { display: none; position: absolute; top: 8px; width: 100%; left: 0; right: 0; text-align: center; font-family: monospace !important; letter-spacing: 1px; font-size: 0.75rem; } .faces .recommendationimage { position: initial; margin-left: -20px; border: none; /* Keep bounce transforms on .faces div; only longhands so .sprite shorthand cannot wipe the sheet */ border-radius: 50%; overflow: hidden; flex-shrink: 0; } .faces .recommendationimage.rec-sprite { background-image: url('../images/recommendation-profiles-sprite.webp'); background-repeat: no-repeat; background-size: calc(var(--rec-count, 115) * var(--rec-display, 42px)) var(--rec-display, 42px); background-position: calc(var(--rec-i, 0) * -1 * var(--rec-display, 42px)) 0; } .faces { display: flex; padding: 8px 2px 0px; justify-content: center; flex-direction: row-reverse; } .faces div{ animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease; } .faces div:nth-child(odd){ animation-name: bounce-1; } .faces div:nth-child(even){ animation-name: bounce-2; } .faces div:nth-child(3n){ animation-name: bounce-3; } @keyframes bounce-1 { 0% { transform: scale(1,1) translateY(0); } 10% { transform: scale(1.1,.9) translateY(0); } 30% { transform: scale(.9,1.1) translateY(-10px); } 50% { transform: scale(1,1) translateY(0); } 100% { transform: scale(1,1) translateY(0); } } @keyframes bounce-2 { 0% { transform: scale(1,1) translateY(0); } 10% { transform: scale(1.1,.9) translateY(0); } 20% { transform: scale(.9,1.1) translateY(-10px); } 50% { transform: scale(1,1) translateY(0); } 100% { transform: scale(1,1) translateY(0); } } @keyframes bounce-3 { 0% { transform: scale(1,1) translateY(0); } 40% { transform: scale(1.1,.9) translateY(0); } 50% { transform: scale(.9,1.1) translateY(-12px); } 80% { transform: scale(1,1) translateY(0); } 100% { transform: scale(1,1) translateY(0); } } nav.mainNavigation ol li.lowTime { padding: 0; } nav.mainNavigation ol li a.lowTimeIcon { border: 0; box-shadow: none; background: none !important; top: 0; left: 0; } .main p+svg, .main p+object, .main ol+object { border: 1px solid var(--accent); border-radius: 16px; margin-bottom: 22px; width: 100%; max-width: 100%; margin-left: 0; display: block; } .main p+h2, .main ul+h2, .main ol+h2 { margin-top: var(--section-start, 4rem); } .main object { border: none !important; border-radius: 0 !important; filter: grayscale(1);} .contactMe svg { /* display: none; */ /* position: absolute; */ /* top: 0; */ /* left: 0; */ /* right: 0; */ /* bottom: 0; */ height: 20px; width: 20px; fill: var(--frgd); z-index: 0 !important; } .contactMe * { z-index: 1; } ol {} /* second-level-navigation styles live with .second-level-bar above */ .relaxTime { display: none; position: absolute; right: 94px; bottom: 0; height: 0; /* z-index: -1; */ } .relaxTime img { opacity: 0.8; width: 80px; } body#short .relaxTime p { margin: 0 0 4px; padding: 0; font-size: 0.75rem; max-width: 80px; line-height: 1; text-align: center; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 32px)); } } .slider { height: 100px; margin: auto; overflow: hidden; position: relative; width: auto; border-top: 1px solid var(--border) !important; } .slider .slide-track { animation: scroll 80s linear infinite; display: flex; gap: 48px; width: max-content; } .slider .slide { height: 100px; width: auto; flex-shrink: 0; display: flex; justify-content: center; align-items: center; } .slider .slide img { width: 105px; height: auto; } /* Home org carousel: full-bleed, full-color, pause + tooltip on hover. Loop is two identical halves; margin-right (not gap) keeps -50% seamless. */ @keyframes orgCarouselScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .homepage .orgCarousel { display: block; position: relative; box-sizing: border-box; flex: 0 0 auto; height: auto; min-height: 88px; width: 100vw; max-width: 100vw; margin-top: 0; margin-bottom: var(--space-10); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; overflow: visible; border: none !important; border-top: none !important; border-bottom: none !important; -webkit-mask-image: none; mask-image: none; } .homepage .orgCarousel__viewport { overflow: hidden; width: 100%; } .homepage .orgCarousel .slide-track { gap: 0; animation: orgCarouselScroll 80s linear infinite; width: max-content; will-change: transform; } .homepage .orgCarousel .slide { position: relative; height: 56px; margin-right: 72px; cursor: default; } .homepage .orgCarousel .slide img { width: 74px; height: auto; max-height: 44px; object-fit: contain; filter: none; } .homepage .orgCarousel:hover .slide-track, .homepage .orgCarousel:focus-within .slide-track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .homepage .orgCarousel .slide-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 960px; margin: 0 auto; gap: 32px 40px; } .homepage .orgCarousel .slide { margin-right: 0; } .homepage .orgCarousel { width: 100%; max-width: none; margin-top: 0; margin-bottom: var(--space-10); margin-left: 0; margin-right: 0; overflow: visible; padding-top: 0; } .homepage .orgCarousel__viewport { overflow: visible; } /* Hide the duplicated loop set when motion is off */ .homepage .orgCarousel .slide:nth-child(n+32) { display: none; } } #ProfilePic{ width: 80px; border-radius: 100%; margin-top: 128px; margin-bottom: var(--space-7); border: 2px solid var(--bkgd); -webkit-animation: nod 3s infinite; animation: nod 3s infinite; } .relaxTime a { font-size: 0.75rem; display: block; text-align: center; width: 70px; text-decoration: none !important; color: var(--frgd); background: var(--action); text-transform: uppercase; cursor: pointer; padding: 2px 8px; font-weight: 600; border-radius: 8px; border: 1px solid var(--border); box-shadow: 1px 1px var(--frgd); } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } #movingBanner > a {margin: 16px 0;} div#newExperienceContent {display: flex;background: rgb(255 255 255);border-radius: 16px;border-color: var(--bkgd) !important;border-width: 2px;border-style: dashed;border-style: solid;box-shadow: none;flex-direction: column;justify-content: flex-end;} div#newExperienceContent a {margin: 16px 0 0;} img#signature {position: absolute;bottom: 32px;right: 0;opacity: 0.9;filter: drop-shadow(4px 4px 2px var(--action));} span#revamp { color: var(--action); /* text-transform: uppercase; */ font-size: 2.5rem; text-shadow: none; /* line-height: 1.15; */ max-width: 14em; text-align: center; position: absolute; bottom: 86px; left: 16%; transform: rotateZ(365deg); /* text-shadow: -2px 2px var(--bkgd); */ /* -webkit-text-stroke: 1px var(--frgd); */ pointer-events: none; background: var(--frgd); opacity: 0.8; } p > b { font-weight: bold; } img.snake { position: absolute; bottom: 32px; right: 33%; height: 80px; transform: rotateZ(15deg); } .colleaguesContainer p {/* margin-top: 48px; */} .NDAsign { background: var(--accent); font-size: 0.75rem; padding: 16px; font-family: var(--font-meta); border-radius: 4px; line-height: 1.2; margin-top: 16px; } .tableScroll { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; } .main > .tableScroll, .main > .caseStudyInProgress > .tableScroll { margin-top: var(--section-start); } .main .tableScroll table { width: 100%; min-width: 36rem; border-collapse: collapse; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-size: 0.875rem; line-height: 1.45; letter-spacing: 0.01em; background: var(--bkgd); } .main .tableScroll th, .main .tableScroll td { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--accent); text-align: left; vertical-align: top; } .main .tableScroll th { font-weight: 700; /* text-transform: uppercase; */ letter-spacing: 0.04em; background: var(--accent); white-space: nowrap; } .main .tableScroll tbody tr:last-child td { border-bottom: none; } .main .tableScroll td:first-child { font-weight: 600; white-space: nowrap; } img.companyLogo { display: block; margin-top: var(--space-9); padding-top: 0; opacity: 0.85; } img.companyLogo.is-color { filter: none; } img.companyLogo.is-faint { opacity: 0.7; } .main > .caseStudyCompanyLogoWrap { display: block; float: none; clear: both; width: 100%; max-width: 100%; margin: 64px 0 0; padding: 0; text-align: left; } .main > .caseStudyCompanyLogoWrap .caseStudyCompanyLogo, .main .caseStudyCompanyLogoWrap .companyLogo { display: block; float: none; clear: none; max-height: 60px; width: auto; height: auto; max-width: 100%; min-width: 0; margin: 0; margin-left: 0; margin-right: auto; padding: 0; object-fit: contain; } .storySnippet i {line-height: 0.25;} div#carousel button, .carouselControls button, .cs-carousel__prev, .cs-carousel__next { border: 2px solid var(--frgd); background: var(--action); color: var(--frgd); border-radius: 50%; min-height: 36px; height: 36px; width: 36px; padding: 0; font-weight: 500; text-transform: none; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5); font-family: "Inter", "Inter Fallback", "Inter Fallback R", sans-serif; font-size: var(--text-body); line-height: 1; display: inline-flex; align-items: center; justify-content: center; letter-spacing: normal; transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); } div#carousel button:hover, .carouselControls button:hover, .cs-carousel__prev:hover:not(:disabled), .cs-carousel__next:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); transform: scale(1.04); position: static; top: auto; left: auto; } div#carousel button:active:not(:disabled), .carouselControls button:active:not(:disabled), .cs-carousel__prev:active:not(:disabled), .cs-carousel__next:active:not(:disabled) { transform: scale(0.96); } div#carousel button:disabled, .carouselControls button:disabled, .cs-carousel__prev:disabled, .cs-carousel__next:disabled { opacity: 0.35; cursor: default; pointer-events: none; transform: none; } div#carousel button:focus-visible, .carouselControls button:focus-visible, .cs-carousel__prev:focus-visible, .cs-carousel__next:focus-visible { outline: 2px solid var(--frgd); outline-offset: 2px; } div#carousel #seeAllBtn, .carouselControls #seeAllBtn, .carouselControls .carousel-see-all, .carouselControls .sq-rec-see-all { width: auto; min-height: 32px; border-radius: 20px; border: 2px solid var(--frgd); background: var(--action); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; /* text-transform: uppercase; */ padding: 6px 12px; margin-left: auto; } .carouselControls { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); margin: 10px 0 0; z-index: 1; position: relative; order: 2; } sup { font-size: 0.75rem; font-weight: bold; } #short a+span { text-align: center; width: 100%; display: block; padding: 2px; font-size: 0.875rem; } body#short .CaseStudyAnimation { width: 100px; height: auto; } .homepage nav.mainNavigation ol { justify-content: center !important; align-items: center; } .downloadIcon { width: 18px; height: 18px; margin: 0px 0px -2px 4px; display: inline-block; background: url(../images/downloadIcon.svg) no-repeat; } a.contactDownload {/* background-color: var(--bkgd) !important; */font-size: 1.062rem;border-radius: 8px !important;/* width: 288px !important; */max-width: 10;} #Welcome + p { text-align: center; width: 100%; max-width: 660px; margin: auto; } p.experienceIntro { text-align: center; margin: 0; font-family: monospace; filter: grayscale(1); font-size: 0.875rem; margin-top: -14px; } li#shortVersion { max-width: 90px; min-width: 0; overflow: hidden; /* min-width: 20px; */ } li#shortVersion a { /* min-width: 20px; */ display: block; box-sizing: border-box; max-width: 100px !important; overflow: hidden; background: var(--shortTrigger); color: #1a1f18; letter-spacing: 0px; font-style: italic; /* box-shadow: var(--shortTrigger) 2px 2px 10px; */ padding-left: 0; padding-right: 0; line-height: 1; border-color: #000; /* border-radius: 100%; */ } li#shortVersion marquee { display: block; width: 100%; max-width: 100%; } li#shortVersion a:hover, li#shortVersion a:focus, li#shortVersion a:active { background: var(--shortTrigger); color: #1a1f18; } .bottomNotime { display: flex; } a#downloadReferences { position: absolute; top: 60px; right: 16px; text-transform: uppercase; border-radius: 32px; background: var(--bkgd); /* background: linear-gradient(45deg, var(--notime),var(--action), var(--bkgd), var(--shortTrigger) ) !important; */ transition: background 2s ease; } a#downloadResumeHome { position: absolute; top: 12px; right: 69px; text-transform: uppercase; border-radius: 32px; background: var(--bkgd); /* background: linear-gradient(45deg, var(--notime),var(--action), var(--bkgd), var(--shortTrigger) ) !important; */ transition: background 2s ease; } .a#downloadResumeHome:hover{ } a#downloadResumeHome:hover { background: var(--action) !important; } .LatestProject { display: flex; flex-wrap: nowrap; padding: 16px 0 0; justify-content: space-between; filter: none; } .LatestProject #hand { width: 300px; height: auto; } img.Latestmockup { width: 23%; height: auto; filter: grayscale(0); } .LatestProject--cense img.Latestmockup { border: 4px solid var(--border); border-radius: 2px; } .LatestProject img.Latestmockup:nth-child(n+5) { display: none; } .LatestProject--cense .LatestDemo:nth-child(n+5) { display: none; } .LatestDemo { position: relative; overflow: hidden; container-type: inline-size; contain: layout paint; pointer-events: none; user-select: none; -webkit-user-select: none; } .LatestDemo__viewport { position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; } .LatestDemo iframe { display: block; border: 0; margin: 0; padding: 0; max-width: none; overflow: hidden; pointer-events: none; } .LatestDemo--cense { width: 23%; flex: none; aspect-ratio: 620 / 1024; border: 1px solid var(--border); border-radius: 8px; box-sizing: content-box; } .LatestDemo--cense .LatestDemo__viewport { width: 620px; height: 1024px; transform: scale(calc(100cqw / 620px)); } .LatestDemo--cense iframe { width: 620px; height: 1024px; } .LatestDemo--aws { flex: 1 1 0; min-width: 0; aspect-ratio: 16 / 10; } /* Match cs-carousel: outer visible, track bleeds to viewport edge, scroller scrolls */ .LatestProject:has(> .LatestProject__track) { --lp-track-w: 100%; --lp-end-pad: 16px; --lp-gap: 12px; --lp-ease: cubic-bezier(0.25, 0.1, 0.25, 1); display: block; overflow: visible; position: relative; container-type: inline-size; container-name: latest-project; box-sizing: border-box; } .LatestProject__track { display: block; width: var(--lp-track-w); max-width: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 4px; scroll-behavior: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; outline: none; box-sizing: border-box; } .LatestProject__track::-webkit-scrollbar { display: none; } .LatestProject__scroller { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; width: max-content; max-width: none; gap: var(--lp-gap); padding-inline-end: var(--lp-end-pad, 8px); box-sizing: border-box; } .LatestProject__scroller > .LatestDemo--aws { flex: 0 0 82cqw; width: 82cqw; min-width: 82cqw; max-width: none; scroll-snap-align: start; } .LatestProject__scroller > .LatestDemo--aws:only-child { flex: 0 0 100cqw; width: 100cqw; min-width: 100cqw; } /* Ancestors must not clip the Apple-style bleed */ .topProject:has(.LatestProject__track), .topProjectsStack:has(.LatestProject__track), .home article:has(.LatestProject__track), .mainHome:has(.LatestProject__track) { overflow: visible; } @media only screen and (max-width: 768px) { .LatestProject__scroller > .LatestDemo--aws, .LatestProject__scroller > .LatestDemo--aws:only-child { flex: 0 0 100cqw; width: 100cqw; min-width: 100cqw; } } .LatestDemo--aws .LatestDemo__viewport { width: 1440px; height: 900px; transform: scale(calc(100cqw / 1440px)); } .LatestDemo--aws iframe { width: 1440px; height: 900px; } .LatestDemo--ainative { width: 100%; flex: 1 1 0; min-width: 0; aspect-ratio: 832 / 420; border: 1px solid var(--border); border-radius: 8px; box-sizing: content-box; } .LatestDemo--ainative .LatestDemo__viewport { width: 832px; height: 420px; transform: scale(calc(100cqw / 832px)); } .LatestDemo--ainative iframe { width: 832px; height: 420px; } /* Featured video inside a top project card (Hitachi Energy page templates) */ .topProject .topProjectVideo { width: 100%; margin: 16px 0 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--accent); line-height: 0; box-sizing: border-box; } .topProject .topProjectVideo video { display: block; width: 100%; height: auto; aspect-ratio: 1326 / 742; background: var(--accent); object-fit: cover; } img.topLogo { margin-left: 8px; } .topProject img.topLogo--wide { width: 150px; height: auto; } .topProjectsStack { display: flex; flex-direction: column; gap: 80px; width: 100%; position: relative; padding-bottom: 64px; } .topProject { width: 100%; padding: 32px; position: relative; background: none; margin: 16px 0 16px; border-radius: 32px; border: none; box-sizing: border-box; } .topProjectsStack .topProject { margin: 0; } @media only screen and (min-width: 769px) { @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .topProjectsStack .topProject { animation: topProjectFade linear both; animation-timeline: view(); /* Tall cards: finish the fade early so they show while still lower in the viewport */ animation-range: entry 0% entry 8%; } } } } @keyframes topProjectFade { from { opacity: 0; } to { opacity: 1; } } @media only screen and (max-width: 768px) { .topProjectsStack { gap: 64px; } /* Mobile shows only the craft card stack, not the long project write-ups */ .topProjectsStack:not(.topProjectsStack--craft) { display: none; } } .topMeta { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-top: 16px; width: 100%; box-sizing: border-box; } .topRole { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; flex: 1 1 auto; font-size: 14px; font-family: 'Departure Mono', ui-monospace, monospace; line-height: 1.2; text-align: left; } .topRole .material-symbols-outlined { font-size: 1em; flex-shrink: 0; line-height: 1.2; } #topDate, .topDate { display: block; flex: 0 0 auto; margin-left: auto; font-size: 14px; font-family: 'Departure Mono', ui-monospace, monospace; line-height: 1.2; text-align: right; white-space: nowrap; } .topDateGroup { text-align: center; } .topDateGroup .topDate { margin-left: 0; } .topDateTag { display: none; font-size: 0.625rem; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; letter-spacing: 0.04em; text-transform: lowercase; margin-top: 4px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 4px; opacity: 0.75; } .topPhraseRow { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px 24px; flex-wrap: wrap; padding: 24px 0 0; } #topPhrase, .topPhrase { text-align: center; /* max-width: 506px; */ background: none !important; font-size: clamp(0.9375rem, 1.5vw + 0.75rem, 1.875rem); font-weight: 600 !important; line-height: 1.25; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif !important; /* letter-spacing: 2px; */ display: block; padding: 0; margin: 0; /* text-align: left; */ min-width: 0; } #topPhrase > mark:first-of-type, .topPhrase > mark:first-of-type { font-size: clamp(1.75rem, 4vw + 1rem, 3.25rem); line-height: 1.15; } .topProject > .topMeta { margin-top: 12px; margin-bottom: 8px; } p.topPhrase strong, .Introduction strong { background-color: var(--border); } .topKeyFigures { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-2); list-style: none; margin: 0; padding: 0; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-start; width: fit-content; max-width: 100%; } .topKeyFigure { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0.5em; text-align: left; white-space: nowrap; width: auto; box-sizing: border-box; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; flex: none; margin: 0; } .topKeyFigure + .topKeyFigure { margin-top: 0; } .topKeyFigure__value { flex: none; font-size: var(--text-functional); font-weight: 800; font-family: 'Departure Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; line-height: 1.25; color: var(--frgd); } .topKeyFigure__label { font-size: 0.8125rem; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif; font-weight: 400; line-height: 1.25; letter-spacing: normal; color: color-mix(in srgb, var(--frgd) 62%, transparent); max-width: none; } .CaseStudyDescription .topKeyFigures { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); width: fit-content; max-width: 100%; margin: 0 0 12px; } .CaseStudyDescription .topKeyFigure { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0.5em; text-align: left; white-space: nowrap; width: auto; box-sizing: border-box; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; flex: none; margin: 0 !important; } .CaseStudyDescription .topKeyFigure + .topKeyFigure { margin: 0 !important; } .CaseStudyDescription .topKeyFigure__value, .CaseStudyDescription .topKeyFigure__label { padding: 0; margin: 0 !important; } .CaseStudyWrapper .CaseStudyDescription .topKeyFigure__value { color: color-mix(in srgb, var(--caseAccent) 78%, var(--frgd, #050038)); } .CaseStudyWrapper .CaseStudyDescription a:not(.disabled):not(.caseStudyLinkDisabled) .caseStudyLinkIcon, .CaseStudyWrapper .CaseStudyDescription a:not(.disabled):not(.caseStudyLinkDisabled) .caseStudyLinkLabel { color: color-mix(in srgb, var(--caseAccent) 70%, var(--frgd, #050038)); } .CaseStudyWrapper:nth-child(even) .CaseStudyDescription .topKeyFigures { justify-content: flex-start; margin-left: 0 !important; margin-right: auto !important; } .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription .topKeyFigures { justify-content: flex-end; margin-left: auto !important; margin-right: 0 !important; } /* --------------------------------------------------------------------------- TL;DR band — the summary that opens every case study. Speaks the .topProject / .topKeyFigures language from the homepage so the band reads as part of the site rather than a new component. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Shared surface for the quieter blocks: a hairline card, no shadow, no texture. Everything below sits on it. --------------------------------------------------------------------------- */ .cs-roles { --cs-hair: color-mix(in srgb, var(--frgd) 16%, transparent); --cs-hair-soft: color-mix(in srgb, var(--frgd) 9%, transparent); --cs-quiet: color-mix(in srgb, var(--frgd) 58%, transparent); --cs-tint: color-mix(in srgb, var(--action) 55%, transparent); } .cs-roles, .cs-roles p, .cs-roles li { text-align: left; text-justify: auto; } /* --------------------------------------------------------------------------- cs-roles: the hats worn on a project, side by side as cards. Base state is every hat stacked; assets/js/cs-roles.js lays them out as cards (the home page's craftCard look) with a canvas motif on each. --------------------------------------------------------------------------- */ .main > .cs-roles, .main > .caseStudyInProgress > .cs-roles { --cs-role-tint: color-mix(in srgb, var(--action) 70%, var(--frgd) 30%); box-sizing: border-box; width: 100%; max-width: 100%; margin: 1.5rem 0 2rem; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--cs-hair); border-radius: 24px; background: transparent; box-shadow: none; } .main > .cs-roles.is-enhanced, .main > .caseStudyInProgress > .cs-roles.is-enhanced { /* Cards sit in the text column, like the paragraphs around them. */ width: calc(var(--content-col) - var(--gap) / 2); margin: var(--space-5) 0 var(--space-6) calc(var(--heading-col) + var(--gap) / 2); padding: 0; border: 0; border-radius: 0; } @media only screen and (max-width: 768px) { .main > .cs-roles.is-enhanced, .main > .caseStudyInProgress > .cs-roles.is-enhanced { width: 100%; margin-left: 0; } } .cs-roles__head { margin-bottom: 14px; } .main .cs-roles .cs-roles__count { margin: 0; text-align: left; font-family: var(--font-meta); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-quiet); } .cs-roles__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; } .cs-roles__card { display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; padding: 16px 16px 20px; border-radius: 16px; background: var(--bkgd); color: var(--frgd); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.08); transition: transform 0.4s cubic-bezier(0.22, 1.2, 0.36, 1), box-shadow 0.3s ease; } .cs-roles__card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 36px rgba(0, 0, 0, 0.12); } .cs-roles__art { margin: 0 0 18px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--frgd) 4%, transparent); } .cs-roles__art canvas { display: block; width: 100%; height: 132px; } .main .cs-roles__role > h3 { width: auto; max-width: none; margin: 0 0 12px; padding: 0; font-size: var(--text-h3); line-height: 1.2; letter-spacing: 0.01em; text-align: left; } .main .cs-roles__card > h3 { margin-bottom: var(--space-4); font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; font-weight: 600; font-size: 1.625rem; line-height: 1.05; letter-spacing: -0.01em; } /* Responsibilities sit on hairline rules instead of bullets, so the hat reads as a list of things owned rather than a bulleted paragraph. */ .main .cs-roles__role > ul { width: auto; max-width: none; margin: 0 !important; padding: 0; list-style: none; } .main .cs-roles__role > ul > li { margin: 0; padding: 14px 0; border-top: 1px solid var(--cs-hair-soft); line-height: 1.6; } .main .cs-roles__card > ul > li { padding: 10px 0; font-size: 0.875rem; line-height: 1.5; } .main .cs-roles__role > ul > li:first-child { padding-top: 0; border-top: 0; } .main .cs-roles__role > ul > li:last-child { padding-bottom: 0; } .main .cs-roles__role h4.caseStudyLabel { display: block; width: auto; max-width: none; margin: 0 0 4px; padding: 0; font-size: 0.8125rem; letter-spacing: 0.02em; } @media (prefers-reduced-motion: reduce) { .cs-roles__card, .cs-roles__card:hover { transition: none; transform: none; } } /* --------------------------------------------------------------------------- cs-totop: the floating pill back to the summary. --------------------------------------------------------------------------- */ .cs-totop { position: fixed; left: 50%; bottom: 22px; z-index: 40; display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 9px 18px 9px 14px; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; /* Same blue and face as the TL;DR tag it takes you back to. */ background: var(--rgc-blue, #4262ff); box-shadow: 0 6px 22px rgba(5, 0, 56, 0.22); color: #fff; font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.06em; line-height: 1; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; } .cs-totop[hidden] { display: none; } .cs-totop__arrow { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); } .cs-totop:hover, .cs-totop:focus-visible { transform: translateX(-50%) translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2); } .cs-totop:focus-visible { outline: 2px solid var(--rgc-blue, #4262ff); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .cs-totop { transition: none; } .cs-totop:hover, .cs-totop:focus-visible { transform: translateX(-50%); } } /* The site already parks a "low on time?" widget bottom-right; keep clear. */ @media only screen and (max-width: 600px) { .cs-totop { bottom: 14px; padding: 8px 15px 8px 12px; } } /* --------------------------------------------------------------------------- cs-shift — a quantity that changed, drawn to scale. Base state is a two-term definition list; assets/js/cs-shift.js draws it. --------------------------------------------------------------------------- */ .main > .cs-shift, .main > .caseStudyInProgress > .cs-shift { box-sizing: border-box; width: calc(var(--content-col) - var(--gap) / 2); max-width: none; margin: var(--space-5) 0 var(--space-5) calc(var(--heading-col) + var(--gap) / 2); } .cs-shift dl { margin: 0; } .cs-shift dt { margin: 0 0 4px; font-family: var(--font-meta); font-size: var(--text-functional-sm); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; } .cs-shift dd { margin: 0 0 12px; line-height: 1.6; } .cs-shift.is-enhanced > dl { display: none; } .cs-shift__ui { border: 1px solid var(--border); border-radius: 12px; padding: clamp(14px, 2vw, 20px); background: var(--bkgd); } .cs-shift__row + .cs-shift__row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .cs-shift__tag { margin: 0 0 8px; font-family: var(--font-meta); font-size: var(--text-functional-sm); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; } .cs-shift__meter { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .cs-shift__track { flex: 1 1 auto; min-width: 0; display: block; } .cs-shift__bar { display: block; height: 26px; min-width: 3px; border-radius: 4px; background: var(--border); transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1); } .cs-shift__row.is-after .cs-shift__bar { background: var(--frgd); } .cs-shift__figure { flex: none; font-family: var(--font-meta); font-size: clamp(1.125rem, 1.6vw + 0.75rem, 1.625rem); font-weight: 400; line-height: 1; white-space: nowrap; } .cs-shift__delta { flex: none; padding: 3px 10px; border: 1px solid var(--frgd); border-radius: 999px; background: var(--action); font-family: var(--font-meta); font-size: var(--text-functional-sm); line-height: 1.4; white-space: nowrap; } .cs-shift__body { margin: 0; line-height: 1.6; } @media (prefers-reduced-motion: reduce) { .cs-shift__bar { transition: none; } } @media only screen and (max-width: 768px) { .main > .cs-shift, .main > .caseStudyInProgress > .cs-shift { width: 100%; margin-left: 0; } .cs-shift__meter { flex-wrap: wrap; } .cs-shift__track { flex-basis: 100%; order: 3; } .cs-shift__bar { height: 18px; } } /* --------------------------------------------------------------------------- cs-stepper — an ordered process you can scrub through. Base state is a plain numbered list, so no-JS readers lose nothing. assets/js/cs-stepper.js adds the track and panels on top. --------------------------------------------------------------------------- */ .main > ol.cs-stepper, .main > .caseStudyInProgress > ol.cs-stepper { margin: var(--space-5) 0 var(--space-5) calc(var(--heading-col) + var(--gap) / 2); } .cs-stepper > li { margin: 0 0 16px; } .cs-stepper > li > p { margin: 0; line-height: 1.6; } /* Once enhanced, the list has been emptied into the panels. Descendant (not only direct-child) so nested lists — e.g. inside .qBand — hide too; otherwise empty numbered shells stay visible beside the UI. */ .main ol.cs-stepper.is-enhanced { display: none; } .cs-stepper__ui { box-sizing: border-box; width: calc(var(--content-col) - var(--gap) / 2); max-width: none; margin: var(--space-5) 0 var(--space-5) calc(var(--heading-col) + var(--gap) / 2); } .cs-stepper__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .cs-stepper__count { margin: 0; font-family: var(--font-meta); font-size: var(--text-functional-sm); line-height: 1; letter-spacing: 0.06em; } .cs-stepper__nav { display: flex; gap: 6px; } .main .cs-stepper__prev, .main .cs-stepper__next { display: grid; place-items: center; width: 34px; height: 34px; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; border: 2px solid var(--frgd) !important; border-radius: 50%; background: var(--bkgd); box-shadow: none; color: var(--frgd); cursor: pointer; } .main .cs-stepper__prev:disabled, .main .cs-stepper__next:disabled { opacity: 0.35; cursor: default; } .main .cs-stepper__prev .material-symbols-outlined, .main .cs-stepper__next .material-symbols-outlined { font-size: 18px; line-height: 1; } /* --- the track ----------------------------------------------------------- */ .cs-stepper__track { position: relative; display: flex; align-items: center; gap: 4px; padding: 12px 0; margin-bottom: 14px; cursor: ew-resize; touch-action: pan-y; } .cs-stepper__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: var(--border); } .cs-stepper__track.is-dragging { cursor: grabbing; } .main button.cs-stepper__tick { position: relative; flex: 1 1 0; min-width: 0; width: auto; height: 24px; margin: 0; padding: 0; border: 0 !important; background: none; box-shadow: none; cursor: pointer; } .cs-stepper__tickMark { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--border); transition: background 160ms ease, height 160ms ease; } .cs-stepper__ui.is-reduced .cs-stepper__tickMark { transition: none; } .cs-stepper__tick.is-done .cs-stepper__tickMark { background: var(--frgd); opacity: 0.4; } .cs-stepper__tick.is-active .cs-stepper__tickMark { height: 16px; background: var(--frgd); } .main button.cs-stepper__tick:focus-visible { outline: 2px solid var(--frgd); outline-offset: 3px; border-radius: 4px; } /* --- the panel ----------------------------------------------------------- */ .cs-stepper__panels { min-height: 0; } .cs-stepper__panel[hidden] { display: none; } .cs-stepper__ordinal { margin: 0 0 6px; font-family: var(--font-meta); font-size: var(--text-functional-sm); line-height: 1; opacity: 0.6; } .main .cs-stepper__panel h4.caseStudyLabel { margin: 0 0 6px; padding: 0; width: auto; max-width: none; line-height: 1.35; } .cs-stepper__panel p:not(.cs-stepper__ordinal) { margin: 0 0 8px; line-height: 1.6; } .cs-stepper__panel p:last-child { margin-bottom: 0; } @media only screen and (max-width: 768px) { .cs-stepper__ui { width: 100%; margin-left: 0; } .main > ol.cs-stepper, .main > .caseStudyInProgress > ol.cs-stepper { margin-left: 0; } } /* --------------------------------------------------------------------------- cs-faults — several symptoms of ONE broken flow. A card grid reads as N unrelated things; a spine says they share a cause. --------------------------------------------------------------------------- */ ol.cs-faults { counter-reset: cs-fault; list-style: none; padding: 0; margin: 1.5rem 0; } /* Direct children of .main sit in the body-copy column. */ .main > ol.cs-faults, .main > .caseStudyInProgress > ol.cs-faults { margin-left: calc(var(--heading-col) + var(--gap) / 2); } .cs-faults > li { position: relative; margin: 0; padding: 0 0 22px 46px; counter-increment: cs-fault; } /* the spine */ .cs-faults > li::before { content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--border); } .cs-faults > li:last-child { padding-bottom: 0; } .cs-faults > li:last-child::before { display: none; } /* the node on the spine */ .cs-faults > li::after { content: counter(cs-fault); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid var(--frgd); border-radius: 50%; background: var(--bkgd); font-family: var(--font-meta); font-size: var(--text-functional-sm); line-height: 1; } /* Company accent: fault spine + number nodes use --caseAccent from .main. Mix with transparent (not --border/--accent) so design-system Colour cannot retint company chrome. */ .main .cs-faults > li::before { background: color-mix(in srgb, var(--caseAccent) 45%, transparent); } .main .cs-faults > li::after { border-color: var(--caseAccent); } .main .cs-faults h4.caseStudyLabel { margin: 0 0 4px; padding: 0; width: auto; max-width: none; line-height: 1.35; } .cs-faults p { margin: 0; line-height: 1.6; } /* --------------------------------------------------------------------------- cs-pulls — the lines worth quoting. These are the payload of a case study; a card renders them at body weight. --------------------------------------------------------------------------- */ ol.cs-pulls { counter-reset: cs-pull; list-style: none; padding: 0; margin: 1.5rem 0; } /* Direct children of .main sit in the body-copy column. */ .main > ol.cs-pulls, .main > .caseStudyInProgress > ol.cs-pulls { margin-left: calc(var(--heading-col) + var(--gap) / 2); } .cs-pulls > li { position: relative; margin: 0; padding: 18px 0; counter-increment: cs-pull; border-top: 1px solid var(--border); } .cs-pulls > li:last-child { border-bottom: 1px solid var(--border); } .cs-pulls__line { margin: 0 0 6px; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; font-size: clamp(1.125rem, 1.4vw + 0.85rem, 1.5rem); font-weight: 600; line-height: 1.25; text-align: left; } .cs-pulls__line::before { content: counter(cs-pull, decimal-leading-zero); display: block; margin-bottom: 6px; font-family: var(--font-meta); font-size: var(--text-functional-sm); font-weight: 400; line-height: 1; opacity: 0.6; } .cs-pulls > li > p:not(.cs-pulls__line) { margin: 0; line-height: 1.6; } /* Below the site's breakpoint the columns collapse (--heading-col: 100%), so the body-copy offset has to go or the block lands off-screen. */ @media only screen and (max-width: 768px) { .main > ol.cs-faults, .main > .caseStudyInProgress > ol.cs-faults, .main > ol.cs-pulls, .main > .caseStudyInProgress > ol.cs-pulls { margin-left: 0; } } /* --------------------------------------------------------------------------- cs-tldr — the summary that opens every case study, as a board frame. Uses the canvas tokens the rest of the site already ships (--rgc-*), so it reads as part of the board rather than a panel bolted onto it. --------------------------------------------------------------------------- */ .cs-tldr, .cs-tldr p, .cs-tldr dd, .cs-tldr li { text-align: left; text-justify: auto; hyphens: manual; } .cs-tldr { --tldr-ink: var(--rgc-ink, #050038); --tldr-soft: var(--rgc-ink-soft, #656479); --tldr-line: var(--rgc-line, #e6e6ec); --tldr-blue: var(--rgc-blue, #4262ff); --tldr-blue-soft: var(--rgc-blue-soft, #e8ecff); /* Inherit --caseAccent from body/.main (company logo). Fallback to board blue only when the page did not set a company accent. Do not redefine --caseAccent here — that would shadow the company colour for nested chrome. */ position: relative; box-sizing: border-box; margin: 2.75rem 0 2.75rem; padding: clamp(24px, 2.8vw, 34px) clamp(18px, 2.6vw, 30px) clamp(18px, 2.6vw, 30px); border: 1px solid var(--tldr-line); border-radius: var(--rgc-radius, 14px); background-color: var(--rgc-panel, #fff); background-image: radial-gradient(circle, rgba(5, 0, 56, 0.10) 0.9px, transparent 1.3px); background-size: 20px 20px; background-position: -1px -1px; box-shadow: 0 6px 24px color-mix(in srgb, var(--caseAccent) 18%, transparent), 0 1px 3px rgba(5, 0, 56, 0.1), inset 0 1px 0 color-mix(in srgb, var(--caseAccent) 10%, transparent); color: var(--tldr-ink); font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif; font-size: 1rem; line-height: 1.55; } /* Homepage cards sit on the board without the framed panel. Visual-first: claim → media → figures → (pair/meta behind toggle) → actions. --homeAccent tints the expand control to match each craft card. */ .cs-tldr--home { --homeAccent: var(--frgd, #050038); margin: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; } #project-ai-native .cs-tldr--home { --homeAccent: #7de39a; } #project-knowledge-base .cs-tldr--home { --homeAccent: #ff9900; } #project-page-templates .cs-tldr--home { --homeAccent: #eb0023; } .cs-tldr--home > .cs-tldr__kicker { display: none; } .cs-tldr--home .cs-tldr__header { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 1rem; } .cs-tldr--home .cs-tldr__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 16px; width: 100%; } .cs-tldr--home .cs-tldr__header .topLogo { margin: 0; flex: 0 0 auto; max-height: 36px; width: auto; object-fit: contain; } .cs-tldr--home .cs-tldr__header .topLogo--wide { max-height: 28px; } .cs-tldr--home .cs-tldr__period { margin: 0 0 0 auto; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif; font-size: 0.875rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.01em; color: color-mix(in srgb, var(--frgd, #050038) 55%, transparent); white-space: nowrap; } .cs-tldr--home .cs-tldr__claim { margin: 0; max-width: 28ch; flex: none; width: 100%; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; font-size: calc(clamp(1.5rem, 2vw + 1rem, 2rem) * var(--ds-font-scale)); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; } .cs-tldr--home .cs-tldr__visual { margin: 0 0 1rem; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 32px color-mix(in srgb, var(--homeAccent) 20%, transparent); } .cs-tldr--home .cs-tldr__figures .topKeyFigure__value { color: color-mix(in srgb, var(--homeAccent) 78%, var(--frgd, #050038)); } .cs-tldr--home .cs-tldr__figures { margin: 0 0 0.5rem; overflow: hidden; max-height: 80rem; opacity: 1; transform: translateY(0); transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, transform 0.28s ease, margin 0.28s ease; } .cs-tldr--home .cs-tldr__figuresNote, .cs-tldr--home .cs-tldr__meta { overflow: hidden; max-height: 80rem; opacity: 1; transform: translateY(0); transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, transform 0.28s ease, margin 0.28s ease; } .cs-tldr--home .cs-tldr__figuresNote { margin: 0 0 1rem; } .cs-tldr--home .cs-tldr__pair { margin: 1.25rem 0 1rem; } /* "What we did" peeks ~3 lines when folded and grows open; problem stays fully readable. */ .cs-tldr--home .cs-tldr__pair > div:last-child { overflow: hidden; max-height: 80rem; transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .cs-tldr--home .cs-tldr__meta { margin: 0 0 1.25rem; } .cs-tldr--home.is-collapsed > .cs-tldr__pair { margin: 1.25rem 0 0; align-items: start; pointer-events: none; } .cs-tldr--home.is-collapsed > .cs-tldr__pair > div:last-child { /* dt + top rule + 3 × 1.55 line-height on the dd */ max-height: calc(12px + 0.75rem + 8px + (3 * 1.55rem)); } .cs-tldr--home.is-collapsed > .cs-tldr__figures, .cs-tldr--home.is-collapsed > .cs-tldr__figuresNote, .cs-tldr--home.is-collapsed > .cs-tldr__meta { display: block; max-height: 0; opacity: 0; margin: 0; transform: translateY(-6px); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .cs-tldr--home .cs-tldr__figures, .cs-tldr--home .cs-tldr__figuresNote, .cs-tldr--home .cs-tldr__pair > div:last-child, .cs-tldr--home .cs-tldr__meta { transition: none; } } .cs-tldr__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 0.5rem; } .cs-tldr--home .cs-tldr__footer { flex-wrap: nowrap; justify-content: flex-start; gap: 12px 20px; } .cs-tldr--home .readMoreTop { display: flex; flex: 0 0 auto; align-items: center; width: auto; padding: 0; order: 1; } .cs-tldr--home .readMoreTop p { display: none !important; } body.home #main-content .cs-tldr--home .readMoreTop a.craftCard__link, body.home article .cs-tldr--home .readMoreTop a.craftCard__link { display: inline-block !important; margin: 0 !important; color: color-mix(in srgb, var(--homeAccent) 72%, var(--frgd, #050038)) !important; text-decoration-color: color-mix(in srgb, var(--homeAccent) 55%, currentColor); } /* Homepage: Cense-style disclosure; sits with the read link, right-aligned. */ .cs-tldr--home .cs-tldr__toggle { order: 2; margin-left: auto; } /* --- the page opens on the index's blueprint --------------------------------- Same paper as the homepage while its chat is in view (intro-chat.css): company-accent wash + accent dots (pages set --caseAccent on body). Once the TL;DR scrolls away, assets/js/cs-totop.js sets cs-hero-off and the board theme and toolbars return. :has() puts the blueprint on at first paint, before the deferred script runs. Homepage cards use .cs-tldr--home and must not trigger this hero (nothing sets cs-hero-off there). --------------------------------------------------------------------------- */ html[data-canvas]:has(.cs-tldr:not(.cs-tldr--home)) body { transition: background-color 0.7s ease, background-image 0.7s ease; } html[data-canvas]:has(.cs-tldr:not(.cs-tldr--home)):not(.cs-hero-off) body { background-color: color-mix(in srgb, var(--caseAccent, #ffd02e) 34%, transparent) !important; background-image: radial-gradient( circle, color-mix(in srgb, var(--caseAccent, #576fff) 55%, transparent) 0.9px, transparent 1.3px ) !important; background-size: 24px 24px !important; background-repeat: repeat !important; background-position: 12px 12px !important; } html:has(.cs-tldr:not(.cs-tldr--home)) .rgc-rail, html:has(.cs-tldr:not(.cs-tldr--home)) .rgc-projects { transition: opacity 320ms ease, visibility 0s linear 0s; } html:has(.cs-tldr:not(.cs-tldr--home)):not(.cs-hero-off) .rgc-rail, html:has(.cs-tldr:not(.cs-tldr--home)):not(.cs-hero-off) .rgc-projects { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 0s linear 200ms; } @media (prefers-reduced-motion: reduce) { html[data-canvas]:has(.cs-tldr:not(.cs-tldr--home)) body, html:has(.cs-tldr:not(.cs-tldr--home)) .rgc-rail, html:has(.cs-tldr:not(.cs-tldr--home)) .rgc-projects { transition: none; } } /* Arriving from a homepage TL;DR card with ?tldr=seen: hide the on-page summary. */ html.cs-tldr-seen .cs-tldr { display: none; } /* --- collapsible on phones ------------------------------------------------ The TL;DR opens the page, so on a phone it would fill the first few screens. There it shows the tag, the claim and the context line, and the rest folds behind a toggle (added by assets/js/cs-totop.js, so without script the whole summary shows). --------------------------------------------------------------------------- */ /* Cense-style disclosure control (soft fill, uppercase, filled chevron). */ .cs-tldr__toggle { display: none; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 11px 14px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--frgd, #050038) 5%, transparent); color: color-mix(in srgb, var(--frgd, #050038) 58%, transparent); font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.2; cursor: pointer; width: fit-content; text-align: left; } .cs-tldr__toggle:hover { background: color-mix(in srgb, var(--frgd, #050038) 9%, transparent); } .cs-tldr__toggleIcon { flex: none; width: 18px; height: 18px; fill: color-mix(in srgb, var(--frgd, #050038) 42%, transparent); transition: transform 0.15s ease; } .cs-tldr__toggle[aria-expanded="true"] .cs-tldr__toggleIcon { transform: rotate(180deg); } .cs-tldr__toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--frgd, #050038) 45%, transparent); outline-offset: 2px; } .cs-tldr--home .cs-tldr__toggle { display: flex; } @media only screen and (max-width: 600px) { .cs-tldr.is-collapsed > :not(.cs-tldr__kicker, .cs-tldr__claim, .cs-tldr__context, .cs-tldr__toggle) { display: none; } /* Homepage cards keep the punchy stack while pair/meta animate open. */ .cs-tldr--home.is-collapsed > .cs-tldr__header, .cs-tldr--home.is-collapsed > .cs-tldr__footer { display: flex; } .cs-tldr--home.is-collapsed > .cs-tldr__visual { display: block; } /* Keep foldable blocks in the flow so max-height expand can animate. */ .cs-tldr--home.is-collapsed > .cs-tldr__figures { display: flex; } .cs-tldr--home.is-collapsed > .cs-tldr__figuresNote, .cs-tldr--home.is-collapsed > .cs-tldr__pair, .cs-tldr--home.is-collapsed > .cs-tldr__meta { display: block; } .cs-tldr.is-collapsed .cs-tldr__context { margin-bottom: var(--space-4); } .cs-tldr:not(.cs-tldr--home) .cs-tldr__toggle { display: flex; margin: 18px 0 0; } .cs-tldr.is-collapsed .cs-tldr__toggle { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .cs-tldr__toggleIcon { transition: none; } } /* The frame label, the way Miro tags a frame above its top-left corner. */ .main .cs-tldr > h2.cs-tldr__kicker, .mainHome .cs-tldr > h2.cs-tldr__kicker { position: absolute; top: -12px; left: 14px; width: auto; max-width: none; /* !important: the mobile .main h2 rule pins margin-top with !important, which dropped the tag into the middle of the frame. */ margin: 0 !important; padding: 2px 10px; float: none; border-radius: 6px; background: color-mix(in srgb, var(--caseAccent) 82%, #0a0a0a); color: #fff; font-family: var(--font-meta); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; line-height: 1.5; text-transform: none; opacity: 1; } /* Visual slot inside a homepage TL;DR card (demo iframe, carousel, or video). */ .cs-tldr__visual { width: 100%; margin: 16px 0 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--accent); line-height: 0; box-sizing: border-box; } .cs-tldr__visual .topProjectVideo { margin: 0; border: none; border-radius: 0; } .cs-tldr__visual .LatestProject { margin: 0; } .cs-tldr__visual .LatestDemo--ainative { border: none; border-radius: 0; } .cs-tldr__claim { margin: 6px 0 12px; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; font-size: calc(clamp(1.5rem, 2vw + 1rem, 2rem) * var(--ds-font-scale)); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; color: var(--tldr-ink); max-width: 22ch; } /* Context is a sentence, so it is Inter, not the pixel face. */ .cs-tldr__context { margin: 0 0 24px; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: var(--tldr-soft); } .cs-tldr__pair { display: grid; gap: 14px; margin: 0 0 22px; } /* Flat, un-shadowed panels with a rule on top: raised white cards read as clickable, and nothing here is. */ .cs-tldr__pair > div { min-width: 0; padding: 12px 0 0; border: 0; border-top: 2px solid var(--tldr-ink); border-radius: 0; background: none; box-shadow: none; } .cs-tldr__pair dt { margin: 0 0 8px; font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tldr-soft); opacity: 1; } .cs-tldr__pair dd { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.55; color: var(--tldr-ink); } /* --- the figures, same inline chips as the homepage .topKeyFigures -------- Accent-tinted bordered pills: mono value + Inter label, matching sitewide key-figure treatment (no sticky-note paper, rotation, or drop shadow). --------------------------------------------------------------------------- */ .cs-tldr .topKeyFigures { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 26px; width: fit-content; max-width: 100%; } .cs-tldr__figures:empty { display: none; } .cs-tldr .topKeyFigure { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0.5em; width: auto; min-height: 0; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--caseAccent, var(--tldr-blue)) 28%, var(--tldr-line)); border-radius: 8px; background: color-mix(in srgb, var(--caseAccent, var(--tldr-blue)) 6%, var(--rgc-panel, #fff)); box-shadow: none; white-space: nowrap; color: var(--tldr-ink); transform: none; } .cs-tldr .topKeyFigure__value { flex: none; font-family: 'Departure Mono', ui-monospace, monospace; font-size: var(--text-functional); font-weight: 800; line-height: 1.25; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; color: color-mix(in srgb, var(--caseAccent) 72%, var(--tldr-ink)); } .cs-tldr .topKeyFigure__label { font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif; font-size: 0.8125rem; font-weight: 400; line-height: 1.25; letter-spacing: normal; color: var(--tldr-soft); max-width: none; } .cs-tldr__figuresNote { margin: 0 0 22px; font-size: 0.8125rem; font-style: italic; line-height: 1.5; color: var(--tldr-soft); } /* --- meta rows ------------------------------------------------------------ */ .cs-tldr__meta { display: grid; gap: 12px; margin: 0 0 20px; padding-top: 18px; border-top: 1px solid var(--tldr-line); } .cs-tldr__metaLabel { margin: 0 0 6px; font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tldr-soft); opacity: 1; } /* Research methods and tools are a plain run of text separated by dots: filled pills here looked like filters, and louder than the jump links, which are the only thing in the frame you can click. */ .cs-tldr__chips { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; } .cs-tldr__chips li { margin: 0; padding: 0; border: 0; background: none; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif; font-size: 0.9375rem; font-weight: 400; line-height: 1.55; color: var(--tldr-ink); } .cs-tldr__chips li:not(:last-child)::after { content: "\00b7"; margin: 0 0.55em; color: var(--tldr-soft); } .cs-tldr__team { margin: 0; font-size: 0.9375rem; line-height: 1.55; } .cs-tldr__jump { padding-top: 16px; border-top: 1px solid var(--tldr-line); } .cs-tldr__jump::before { content: "Jump to"; display: block; margin: 0 0 10px; font-family: var(--font-meta); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tldr-soft); } .cs-tldr__jump ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .cs-tldr__jump li { margin: 0; } .main .cs-tldr__jumpLink { display: inline-block; width: auto; margin: 0; padding: 5px 12px 5px 10px; border: 1px solid color-mix(in srgb, var(--caseAccent) 35%, transparent); border-radius: 999px; background: var(--rgc-panel, #fff); box-shadow: 0 1px 2px color-mix(in srgb, var(--caseAccent) 12%, transparent); font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; text-align: left; text-transform: none; text-decoration: none; color: color-mix(in srgb, var(--caseAccent) 78%, var(--tldr-ink)); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .main .cs-tldr__jumpLink::before { content: "\2193"; display: inline-block; margin-right: 0.35em; font-weight: 400; transition: transform 120ms ease; } .main .cs-tldr__jumpLink:hover, .main .cs-tldr__jumpLink:focus-visible { left: 0; top: 0; border-color: var(--caseAccent); background: color-mix(in srgb, var(--caseAccent) 10%, var(--rgc-panel, #fff)); color: color-mix(in srgb, var(--caseAccent) 85%, var(--tldr-ink)); text-decoration: underline; text-underline-offset: 3px; } .main .cs-tldr__jumpLink:hover::before { transform: translateY(2px); } .main .cs-tldr__jumpLink:focus-visible { outline: 2px solid var(--caseAccent); outline-offset: 2px; } /* Nothing in the frame but the jump links and the toggle reacts to the pointer, so nothing else should look like it does. */ .cs-tldr .topKeyFigure, .cs-tldr__pair, .cs-tldr__chips li { cursor: default; user-select: text; } @media (prefers-reduced-motion: reduce) { .main .cs-tldr__jumpLink, .main .cs-tldr__jumpLink::before { transition: none; } } @media only screen and (min-width: 700px) { .cs-tldr__pair { grid-template-columns: 1fr 1fr; gap: 28px; } .cs-tldr__meta { grid-template-columns: auto minmax(0, 1fr); gap: 14px 20px; align-items: baseline; } .cs-tldr__metaLabel { margin: 0; white-space: nowrap; text-align: right; } } .latestDescription { display: flex; border-top: 1px solid; padding-top: 2px; margin-top: 16px; } .latestDescription > div { padding: 8px; width: 50%; } @media only screen and (min-width: 769px) { .latestDescription-more { display: block; flex: 1 1 50%; min-width: 0; } .latestDescription-more > summary { display: none; } .latestDescription-more::details-content { display: block; content-visibility: visible; height: auto; overflow: visible; } .latestDescription-extra { display: flex; width: 100%; flex: 1; } .latestDescription-extra > div { padding: 8px; width: 50%; box-sizing: border-box; } } @media only screen and (max-width: 768px) { details.latestDescription-more > summary { padding: 8px; } } .latestDescription h5 { font-size: calc(1.25rem * var(--ds-font-scale)); font-weight: 800; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; } .latestDescription p { margin: 4px 0 16px; line-height: 1.25; text-align: left; } div#disclaimer, .topProject .disclaimer { font-size: 0.5rem; font-family: 'Inter', "Inter Fallback", "Inter Fallback R"; position: absolute; bottom: 8px; right: 16px; } .readMoreTop p { display: block; padding-top: 16px; text-align: center !important; width: 100%; } body.home #main-content .readMoreTop a.craftCard__link, body.home article .readMoreTop a.craftCard__link { display: none !important; } .readMoreTop { width: 100%; padding-bottom: 16px; } @media only screen and (max-width: 768px) { .readMoreTop p { display: none !important; } body.home #main-content .readMoreTop a.craftCard__link, body.home article .readMoreTop a.craftCard__link { display: inline-block !important; } } #short .slider { border-bottom: none !important; } #short .slider .slide-track { animation-duration: 80s; } .downloadResumeTop { width: 100%; padding-bottom: 32px; border-bottom: none; } .Introduction a { display: inline; } svg#Arrow\.7 { display: inline-block; height: 18px; width: auto; alignment-baseline: middle; } .readMoreTop { display: flex; flex-direction: row; } div#contactMeButtons a { margin-left: 0 !important; margin-right: 0 !important; border-radius: 4px !important; } img#AWSHand { position: absolute; width: 43%; right: 0; } p#\34 04 { font-size: 4vw; } div#fourOfour { text-align: center; font-size: 6vw; line-height: 1; padding: 64px 64px 32px; font-weight: 800; } div#fourOfourHelp { text-align: center; padding: 0 64px; } .sprite-Andr { background: url('../images/recomendation3rd_sprites.png') -0 -0; } .sprite-Bruc { background: url('../images/recomendation3rd_sprites.png') -42px -0; } .sprite-Iren { background: url('../images/recomendation3rd_sprites.png') -84px -0; } .sprite-Darr { background: url('../images/recomendation3rd_sprites.png') -126px -0; } .sprite-Gize { background: url('../images/recomendation3rd_sprites.png') -168px -0; } .sprite-Crai { background: url('../images/recomendation3rd_sprites.png') -210px -0; } .sprite-Pila { background: url('../images/recomendation3rd_sprites.png') -252px -0; } .sprite-Paul { background: url('../images/recomendation3rd_sprites.png') -294px -0; } .sprite-Sara { background: url('../images/recomendation3rd_sprites.png') -336px -0; } .sprite-Anku { background: url('../images/recomendation3rd_sprites.png') -378px -0; } .sprite-Mart { background: url('../images/recomendation3rd_sprites.png') -420px -0; } .sprite-Anwe { background: url('../images/recomendation3rd_sprites.png') -462px -0; } .sprite-Leis { background: url('../images/recomendation3rd_sprites.png') -504px -0; } /* Fourth recommendation sprite sheet (recomendation4th_sprites.png) */ :root { --recommendation-sprite-image: url('../images/recomendation4th_sprites.png'); } .bg-Alberto { width: 42px; height: 42px; background: var(--recommendation-sprite-image) 0 0 no-repeat; } .bg-Andres { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -42px 0 no-repeat; } .bg-Aram { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -84px 0 no-repeat; } .bg-Daniel { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -126px 0 no-repeat; } .bg-Gajen { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -168px 0 no-repeat; } .bg-John { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -210px 0 no-repeat; } .bg-Maggie { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -252px 0 no-repeat; } .bg-Marcin { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -294px 0 no-repeat; } .bg-Ivy { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -336px 0 no-repeat; } .bg-Matt { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -378px 0 no-repeat; } .bg-Michal { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -420px 0 no-repeat; } .bg-Thibault { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -462px 0 no-repeat; } .bg-Ringo { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -504px 0 no-repeat; } .bg-Tom { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -546px 0 no-repeat; } .bg-Tomasz { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -588px 0 no-repeat; } .bg-Arashdeep { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -630px 0 no-repeat; } .bg-Lewis { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -672px 0 no-repeat; } .bg-Uros { width: 42px; height: 42px; background: var(--recommendation-sprite-image) -714px 0 no-repeat; } /* Placeholder circles — faces pending */ .bg-Jonathan { width: 42px; height: 42px; background: transparent; } .bg-Marina { width: 42px; height: 42px; background: transparent; } .bg-Vincent { width: 42px; height: 42px; background: transparent; } .bg-Catherine { width: 42px; height: 42px; background: transparent; } .bg-empty { width: 42px; height: 42px; background: transparent; } /* LinkedIn recommendation profiles — 115 cells @ 100×100 source, shown at 42×42 */ .sprite.recommendationimage.rec-sprite { --rec-count: 115; --rec-display: 42px; width: var(--rec-display); height: var(--rec-display); background-image: url('../images/recommendation-profiles-sprite.webp'); background-repeat: no-repeat; background-size: calc(var(--rec-count) * var(--rec-display)) var(--rec-display); background-position: calc(var(--rec-i, 0) * -1 * var(--rec-display)) 0; } /* Accent color picker */ .accent-picker-item { list-style: none; border: none !important; z-index: 9999 !important; } .accent-picker { z-index: 9999 !important; } .accent-picker { position: relative; display: flex; flex-direction: column; align-items: center; } .accent-picker__swatch { box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--frgd); box-shadow: 2px 2px 0 var(--shadow); cursor: pointer; padding: 0; background: var(--accent); appearance: none; -webkit-appearance: none; display: block; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .accent-picker__swatch:hover, .accent-picker__swatch:focus-visible { transform: scale(1.1); outline: none; } .accent-picker__swatch:focus-visible { box-shadow: 2px 2px 0 var(--shadow), 0 0 0 3px color-mix(in srgb, var(--frgd) 25%, transparent); } .accent-picker__menu { position: absolute; top: calc(100% + 10px); right: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; } .accent-picker.is-open .accent-picker__menu { pointer-events: auto; } .accent-picker__menu .accent-picker__swatch { opacity: 0; transform: translateY(-10px) scale(0.5); transition: opacity 0.22s ease, transform 0.22s ease; } .accent-picker.is-open .accent-picker__menu .accent-picker__swatch { opacity: 1; transform: translateY(0) scale(1); } .accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(1) { transition-delay: 0.02s; } .accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(2) { transition-delay: 0.05s; } .accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(3) { transition-delay: 0.08s; } .accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(4) { transition-delay: 0.11s; } .accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(5) { transition-delay: 0.14s; } .accent-picker.is-open .accent-picker__menu .accent-picker__swatch:nth-child(6) { transition-delay: 0.17s; } @media only screen and (min-width: 769px) { .accent-picker-item { position: fixed; top: 28px; right: 28px; margin: 0 !important; padding: 0 !important; } /* Homepage-only desktop tooltip for the accent trigger */ .homepage .accent-picker__trigger { position: relative; } .homepage .accent-picker__trigger::after { content: "What color are you feeling today?"; position: absolute; top: calc(100% + 12px); right: 0; width: max-content; max-width: 220px; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--frgd); background: var(--bkgd); color: var(--frgd); font-family: var(--font-meta); font-size: 13px; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-align: left; white-space: normal; box-shadow: 2px 2px 0 var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 10000; } .homepage .accent-picker__trigger:hover::after, .homepage .accent-picker__trigger:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); } .homepage .accent-picker.is-open .accent-picker__trigger::after { opacity: 0; visibility: hidden; } } @media only screen and (max-width: 768px) { .accent-picker-item { position: relative; margin: 4px 4px 4px 2px !important; padding: 4px !important; display: flex; align-items: center; align-self: center; } .accent-picker__swatch { width: 22px; height: 22px; } .accent-picker__menu { top: calc(100% + 8px); gap: 6px; } } /* ============================================================ Short page — question accordions (body#short only) ============================================================ */ body#short .sq { background: var(--bkgd); border: 2px solid var(--frgd); border-radius: 8px; box-shadow: 2px 2px var(--shadow); margin-bottom: var(--space-4); scroll-margin-top: 16px; } /* First card sits right under the logo slider, so it needs its own breathing room */ body#short .sq:first-of-type { margin-top: var(--space-7); } body#short .sq-summary { display: flex; align-items: center; gap: var(--space-2); padding: 12px 16px; background: var(--action); border-radius: 6px; cursor: pointer; list-style: none; font-size: calc(1.125rem * var(--ds-font-scale)); font-weight: 800; line-height: 1.2; /* text-transform: uppercase; */ letter-spacing: 1px; } body#short .sq-summary::-webkit-details-marker { display: none; } body#short .sq-summary::marker { content: ""; } body#short .sq-summary:focus-visible { outline: 2px solid var(--frgd); outline-offset: 2px; } body#short .sq[open] .sq-summary { border-bottom: 2px solid var(--frgd); border-radius: 6px 6px 0 0; } body#short .sq-num { flex: none; opacity: 0.6; } body#short .sq-title { flex: 1; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; } body#short .sq-icon { flex: none; position: relative; width: 16px; height: 16px; } body#short .sq-icon::before, body#short .sq-icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: var(--frgd); transition: transform 0.3s ease; } body#short .sq-icon::after { transform: rotate(90deg); } body#short .sq[open] .sq-icon::after { transform: rotate(0deg); } @media (prefers-reduced-motion: reduce) { body#short .sq-icon::before, body#short .sq-icon::after { transition: none; } } body#short .sq-body { padding: 22px 18px 28px; overflow: hidden; transition: height 0.3s ease; } @media (prefers-reduced-motion: reduce) { body#short .sq-body { transition: none; } } body#short .sq-body p { font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif !important; font-size: calc(1.25rem * var(--ds-font-scale)); font-weight: 400; text-align: left; line-height: 1.7; padding: 0 0 32px; max-width: var(--measure); letter-spacing: normal; hyphens: none !important; } body#short .sq-skills { margin: 0.35em 0 1.5em; padding: 0 0 0 1.1em; background: none; border: 0; border-radius: 0; list-style: disc; opacity: 0.72; } body#short .sq-skills li { padding: 0.15em 0; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif !important; font-size: 1rem; font-weight: 400; line-height: 1.55; } body#short .sq-body > p:last-child, body#short .sq-body > .sq-rows:last-child, body#short .sq-body > .sq-trio:last-child { margin-bottom: 0; padding-bottom: 0; } body#short .sq-body .sq-eyebrow { font-size: 0.75rem; font-weight: 800; /* text-transform: uppercase; */ letter-spacing: 0.08em; opacity: 0.65; padding-bottom: 0.6em; } /* Display lines use Bricolage Grotesque; body copy stays Inter. */ body#short .sq-body .sq-big, body#short .sq-body .sq-statement, body#short .sq-body .sq-row h4 { font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif !important; } body#short .sq-body .sq-big { font-size: clamp(1.75rem, 6vw, 4.35rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; max-width: 16em; padding-bottom: 0.55em; } body#short .sq-body .sq-statement { font-size: clamp(1.35rem, 3.5vw, 1.7rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; max-width: 18em; padding-bottom: 0.7em; } body#short .sq-trio { display: grid; gap: 12px; padding: 0.4em 0 1.4em; } body#short .sq-trio-item { display: grid; grid-template-columns: 88px 1fr; gap: 0; align-items: stretch; background: var(--accent); border: 2px dashed var(--frgd); border-radius: 8px; padding: 0; overflow: hidden; } body#short .sq-trio-media { width: 88px; min-height: 88px; height: auto; align-self: stretch; flex: none; background: var(--bkgd); border: 0; border-right: 2px solid var(--frgd); border-radius: 0; overflow: hidden; display: block; padding: 0; margin: 0; line-height: 0; } body#short .sq-trio-media .CaseStudyAnimation { width: 100% !important; height: 100% !important; min-height: 88px; margin: 0 !important; padding: 0; background: var(--bkgd); line-height: 0; } body#short .sq-trio-media svg { display: block; width: 100%; height: 100%; margin: 0; padding: 0; } body#short .sq-trio-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 12px 14px; } body#short .sq-trio h4 { font-size: 0.8rem; font-weight: 800; /* text-transform: uppercase; */ letter-spacing: 0.06em; padding: 0.45em; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; } body#short .sq-trio p { font-size: calc(1.25rem * var(--ds-font-scale)); font-weight: 400; line-height: 1.7; padding: 0; max-width: none; } @media only screen and (max-width: 480px) { body#short .sq-trio-item { grid-template-columns: 72px 1fr; } body#short .sq-trio-media { width: 72px; min-height: 72px; } body#short .sq-trio-media .CaseStudyAnimation { min-height: 72px; } body#short .sq-trio-copy { padding: 10px 12px; } } body#short .sq-rows { border-top: 2px dotted var(--frgd); margin: 0.4em 0 1.2em; } body#short .sq-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 1em 0; border-bottom: 2px dotted var(--frgd); } body#short .sq-row h4 { flex: none; width: 100%; font-size: 1.2rem; font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; } body#short .sq-result-meta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } body#short .sq-company-logo { width: auto; max-width: 110px; height: 30px; object-fit: contain; object-position: right center; } body#short .sq-rec-carousel { margin: 0 0 1.4em; max-width: 520px; display: flex; flex-direction: column; } body#short .sq-rec-carousel .carouselControls { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); margin: 10px 0 0; z-index: 1; position: relative; order: 2; } body#short .sq-rec-carousel .carouselControls button { border: 2px solid var(--frgd); background: var(--action); color: var(--frgd); border-radius: 50%; width: 36px; min-height: 36px; height: 36px; font-weight: 500; text-transform: none; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5); font-size: var(--text-body); line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; letter-spacing: normal; font-family: "Inter", "Inter Fallback", "Inter Fallback R", sans-serif; transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); } body#short .sq-rec-carousel .carouselControls button:hover { position: static; top: auto; left: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); transform: scale(1.04); } body#short .sq-rec-carousel .carouselControls button:active:not(:disabled) { transform: scale(0.96); } body#short .sq-rec-carousel .carouselControls button:disabled { opacity: 0.35; cursor: default; pointer-events: none; transform: none; } body#short .sq-rec-carousel .carouselControls button:focus-visible { outline: 2px solid var(--frgd); outline-offset: 2px; } body#short .sq-rec-carousel .carouselControls .sq-rec-see-all { width: auto; min-height: 32px; height: auto; border-radius: 20px; border: 2px solid var(--frgd); background: var(--action); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; /* text-transform: uppercase; */ padding: 6px 12px; margin-left: auto; } body#short .sq-rec-carousel.is-show-all .sq-rec-prev, body#short .sq-rec-carousel.is-show-all .sq-rec-next { display: none !important; } body#short .sq-rec-status { display: none; } body#short .sq-rec-viewport { position: relative; min-height: 10rem; order: 1; } body#short .sq-rec-carousel.is-show-all .sq-rec-viewport { min-height: 0; display: flex; flex-direction: column; gap: 1.25rem; max-height: min(70vh, 640px); overflow-y: auto; } body#short .sq-rec-carousel.is-show-all .singlerecomendation { position: static !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } body#short .sq-rec-carousel .singlerecomendation { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 0; align-items: end; margin: 0; max-width: none; width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; font-size: 1rem; opacity: 0; visibility: hidden; pointer-events: none; position: absolute; inset: 0 auto auto 0; transition: opacity 0.35s ease, visibility 0.35s ease; } body#short .sq-rec-carousel .singlerecomendation.is-active { opacity: 1; visibility: visible; pointer-events: auto; position: relative; } body#short .sq-rec-carousel .recommendationimage { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; position: static; left: auto; bottom: auto; flex: none; width: 42px; height: 42px; margin: 0; border-radius: 50%; opacity: 1; filter: grayscale(1); background-repeat: no-repeat; overflow: hidden; } body#short .sq-rec-carousel .recommendation { grid-column: 2; grid-row: 1; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-size: 1.15rem; font-weight: 400; line-height: 1.55; max-width: none; width: auto; margin: 0; } body#short .sq-rec-carousel .recommendationAuthor { grid-column: 2; grid-row: 2; width: auto; padding: 6px 0 0; margin: 0; font-size: 0.95rem; } body#short .sq-rec-carousel .recommendationAuthorRole { grid-column: 2; grid-row: 3; width: auto; padding: 0; margin: 0; opacity: 0.75; } @media (prefers-reduced-motion: reduce) { body#short .sq-rec-carousel .singlerecomendation { transition: none; } } body#short .sq-actions { display: flex; flex-wrap: wrap; align-items: center; padding-top: 0.4em; } body#short .sq-link { display: inline-block; color: var(--frgd); text-decoration: none !important; background: var(--action); border: 2px solid var(--frgd); border-radius: 8px; box-shadow: 1px 1px var(--frgd); padding: 2px 8px; margin: 2px 8px 2px 0; font-size: 0.75rem; font-weight: 800; line-height: 1.6; /* text-transform: uppercase; */ letter-spacing: 1px; cursor: pointer; } body#short .sq-link:hover { position: relative; top: 1px; left: 1px; box-shadow: none; } body#short .sq-body .contactMeShort { font-size: clamp(1.15rem, 4vw, 1.5rem); margin-bottom: 12px; letter-spacing: -0.02em; } body#short .sq-body .NDAsign { font-size: 0.95rem; line-height: 1.5; } body#short .sq-body .sq-email { text-align: center; font-size: 0.875rem; opacity: 0.7; } /* Work page: mobile card layout */ body.workMobileCards .caseStudyLinkIcon { display: none; } @media only screen and (max-width: 768px) { body.workMobileCards .borderWrapper { padding: 8px 8px 16px; } body.workMobileCards .borderWrapper p { text-align: left; margin: 0 0 8px; } body.workMobileCards .mainHome > div { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 24px; max-width: 560px; margin: 0 auto; } body.workMobileCards .CaseStudyWrapper, body.workMobileCards .CaseStudyWrapper:nth-child(odd) { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 0; margin: 0; padding: 12px; background: var(--bkgd); border: 1px solid var(--frgd) !important; border-radius: 12px; overflow: hidden; box-shadow: 2px 2px var(--shadow); position: relative; text-align: left; } body.workMobileCards .CaseStudyWrapper:active { box-shadow: none; transform: translate(2px, 2px); } body.workMobileCards div.mainHome div div.CaseStudyAnimation, body.workMobileCards .CaseStudyAnimation { position: absolute; top: 0; right: 0; width: 100% !important; height: 300px !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; border-radius: 0 10px 0 56px; border: none; filter: none; overflow: hidden; flex-shrink: 0; z-index: 0; pointer-events: none; opacity: 0.25; background: var(--bkgd); } body.workMobileCards .CaseStudyAnimation::after { content: ""; position: absolute; inset: 0; background: var(--bkgd); -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 48%); mask-image: linear-gradient(to right, #000 0%, transparent 48%); pointer-events: none; z-index: 1; } body.workMobileCards .CaseStudyAnimation svg { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; } body.workMobileCards .CaseStudyDescription, body.workMobileCards .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription { width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; background: none; text-align: left !important; display: flex; flex-direction: column; align-items: flex-start; flex: 1; position: relative; z-index: 1; } body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .CaseStudyDescription { padding-top: 44px; } body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .CaseStudyDescription > :not(a):not(.caseStudyLogo):not(.caseStudyLogoPair):not(.topKeyFigures) { padding-left: 8px; padding-right: 8px; box-sizing: border-box; } body.workMobileCards .CaseStudyDescription *, body.workMobileCards .CaseStudyWrapper:nth-child(odd) .CaseStudyDescription * { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } body.workMobileCards .caseStudyLogo, body.workMobileCards .caseStudyLogoPair, body.workMobileCards svg.CaseStudycompanyLogo { min-height: 24px; height: auto; width: auto; max-width: 72px; max-height: 32px; margin: 0 0 6px !important; object-fit: contain; object-position: left center; } body.workMobileCards .caseStudyLogoPair { max-width: 120px; max-height: none; gap: 6px 10px; min-height: 0; } body.workMobileCards .caseStudyLogoPair .caseStudyLogo { max-width: 56px; max-height: 24px; margin: 0 !important; } body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogo, body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogoPair, body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) svg.CaseStudycompanyLogo { position: absolute; top: 14px; left: 14px; z-index: 2; max-width: 56px; max-height: 28px; min-height: 0; margin: 0 !important; } body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogoPair { max-width: 110px; max-height: none; } body.workMobileCards .CaseStudyDescription h2, body.workMobileCards div.CaseStudyDescription h2 { font-size: 1.1rem; line-height: 1.25; padding-top: 0; padding-bottom: 6px; margin-bottom: 0; letter-spacing: -0.02em; } body.workMobileCards .CaseStudyDescription .topKeyFigures { display: none !important; margin: 0 !important; padding: 0 !important; } body.workMobileCards .CaseStudyDescription p { font-size: 0.88rem; line-height: 1.35; margin: 0 0 10px !important; padding-top: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.workMobileCards .CaseStudyDescription > .caseStudyUnavailable { display: block; -webkit-line-clamp: unset; overflow: visible; opacity: 0.55; font-size: 0.8rem; margin: 0 !important; } body.workMobileCards .caseStudyRole { font-size: 0.75rem; margin: 0 0 6px !important; opacity: 0.8; } body.workMobileCards .caseStudyLinkLabel { display: none; } body.workMobileCards .caseStudyLinkIcon { display: inline-block; } body.workMobileCards article .CaseStudyDescription > a:not(.contactMeLink):not(.disabled), body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled { position: absolute !important; top: 0px; right: 2px; margin: 0 !important; width: fit-content; min-width: 40px; padding: 6px !important; z-index: 4; text-align: center !important; align-self: auto; text-transform: none !important; display: flex; align-items: center; justify-content: center; line-height: 1; } body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled { z-index: 2; opacity: 0.45; pointer-events: none; cursor: not-allowed; box-shadow: none; } body.workMobileCards article .CaseStudyDescription > a:not(.contactMeLink):not(.disabled) .caseStudyLinkIcon { font-family: "Material Symbols Outlined", sans-serif; font-size: 24px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; color: #1f1f1f; user-select: none; } body.workMobileCards article .CaseStudyDescription > a.contactMeLink { display: none !important; } body.workMobileCards article .CaseStudyDescription > a:not(.contactMeLink):hover, body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled:hover { position: absolute !important; top: 0px; right: 2px; left: auto; } body.workMobileCards article .CaseStudyDescription > a.disabled.caseStudyLinkDisabled .caseStudyLinkIcon { font-family: "Material Symbols Outlined", sans-serif; font-size: 24px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; color: #1f1f1f; opacity: 0.45; user-select: none; } body.workMobileCards .CaseStudyWrapper.is-tappable { cursor: pointer; } body.workMobileCards .CaseStudyWrapper.is-tappable a.card-stretch, body.workMobileCards .CaseStudyWrapper.is-tappable a.card-stretch:hover, body.workMobileCards .CaseStudyWrapper.is-tappable a.card-stretch:active { left: auto; } body.workMobileCards article .CaseStudyDescription > a.disabled:not(.caseStudyLinkDisabled) { opacity: 0.55; pointer-events: none; box-shadow: none; } body.workMobileCards .CaseStudyWrapper.is-tappable > .CaseStudyDescription > a.card-stretch::after { content: ""; position: absolute; inset: 0; z-index: 3; } body.workMobileCards #workfooter { display: none; } body.workMobileCards .contactMe { margin-top: 8px; border-radius: 12px; overflow: hidden; } body.workMobileCards .ndaStrip { padding: 20px 16px; } } @media only screen and (max-width: 480px) { body.workMobileCards div.mainHome div div.CaseStudyAnimation, body.workMobileCards .CaseStudyAnimation { width: 100% !important; height: 256px !important; opacity: 0.25; } body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogo, body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogoPair, body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) svg.CaseStudycompanyLogo { max-width: 48px; max-height: 24px; top: 12px; left: 12px; } body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .caseStudyLogoPair { max-width: 96px; max-height: none; } body.workMobileCards .CaseStudyWrapper:has(.CaseStudyAnimation) .CaseStudyDescription { padding-top: 40px; } } /* Case study content cards + carousels (Cense AI, AI Native UX, etc.) */ .material-symbols-outlined { font-family: "Material Symbols Outlined", sans-serif; font-weight: normal; font-style: normal; font-size: 1.75rem; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; color: var(--frgd); user-select: none; } .cs-cards { display: grid; grid-template-columns: 1fr; gap: 12px; box-sizing: border-box; line-height: 1.45; text-align: left; } .main > .cs-cards, .main > .caseStudyInProgress > .cs-cards { display: grid; } /* Stacked playing-card deck (enhanced .cs-cards) */ .cs-cards.is-deck { --cs-ease: cubic-bezier(0.25, 0.1, 0.25, 1); display: flex; flex-direction: column; gap: 0; position: relative; } .main > .cs-cards.is-deck, .main > .caseStudyInProgress > .cs-cards.is-deck { display: flex; } .cs-cards__stack { display: grid; width: 100%; padding: 12px 16px 22px; box-sizing: border-box; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .cs-cards__stack:active { cursor: grabbing; } .cs-cards__stack.is-swiping { touch-action: none; } .cs-cards.is-deck > .cs-cards__stack > .cs-card { grid-area: 1 / 1; width: 100% !important; max-width: none !important; min-width: 0 !important; align-self: stretch; transform: translate3d(var(--deck-x, 0px), var(--deck-y, 0px), 0) rotate(var(--deck-r, 0deg)) scale(var(--deck-s, 1)); transform-origin: center center; z-index: var(--deck-z, 0); opacity: var(--deck-o, 1); pointer-events: none; transition: transform 0.45s var(--cs-ease), opacity 0.35s var(--cs-ease), box-shadow 0.35s var(--cs-ease); will-change: transform, opacity; } .cs-cards.is-deck > .cs-cards__stack > .cs-card.is-front { pointer-events: auto; box-shadow: 3px 4px 0 rgba(58, 66, 55, 0.14) !important; } .cs-cards.is-deck > .cs-cards__stack > .cs-card.is-dragging, .cs-cards.is-deck > .cs-cards__stack > .cs-card.is-settling { transition: none; } .cs-cards.is-deck > .cs-cards__stack > .cs-card.is-exiting { pointer-events: none; opacity: 0; z-index: 40 !important; } .cs-cards__controls { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); margin: 10px 0 0; z-index: 2; position: relative; } .cs-cards.is-deck:not(.is-show-all) .cs-cards__controls .cs-carousel__prev, .cs-cards.is-deck:not(.is-show-all) .cs-cards__controls .cs-carousel__next { display: none !important; } .cs-cards.is-deck.is-show-all .cs-cards__controls .cs-carousel__prev, .cs-cards.is-deck.is-show-all .cs-cards__controls .cs-carousel__next { display: none !important; } .cs-cards.is-deck.is-show-all .cs-cards__stack { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; cursor: default; touch-action: auto; user-select: auto; -webkit-user-select: auto; } .cs-cards.is-deck.is-show-all .cs-cards__stack > .cs-card { grid-area: auto; position: relative; transform: none !important; opacity: 1 !important; z-index: auto !important; pointer-events: auto; box-shadow: 2px 2px 0 rgba(58, 66, 55, 0.1) !important; transition: none; } @media (prefers-reduced-motion: reduce) { .cs-cards.is-deck > .cs-cards__stack > .cs-card { transition: none; } } .main > .cs-carousel, .main > .caseStudyInProgress > .cs-carousel { display: flex; } .cs-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0 !important; padding: 16px; box-sizing: border-box; background: var(--accent) !important; border: 1px solid rgba(58, 66, 55, 0.16) !important; border-radius: 10px !important; box-shadow: 2px 2px 0 rgba(58, 66, 55, 0.1) !important; min-width: 0; min-height: 0 !important; height: auto !important; line-height: 1.45; text-align: left; float: none; width: auto !important; max-width: none; z-index: auto; } /* Company logo accents inside case-study body (.main --caseAccent) */ .main .cs-card { border-color: color-mix(in srgb, var(--caseAccent, #3a4237) 32%, rgba(58, 66, 55, 0.16)) !important; box-shadow: 2px 2px 0 color-mix(in srgb, var(--caseAccent, #3a4237) 22%, transparent) !important; } .main .cs-card__heading > [class^="pixelart-icons-font-"], .main .cs-card__heading > [class*=" pixelart-icons-font-"], .main .cs-card__heading > .material-symbols-outlined { color: color-mix(in srgb, var(--caseAccent, var(--frgd)) 70%, var(--frgd)); } .main .cs-stepper__tick.is-active .cs-stepper__tickMark { background: var(--caseAccent, var(--frgd)); } .main .cs-stepper__tick.is-done .cs-stepper__tickMark { background: color-mix(in srgb, var(--caseAccent, var(--frgd)) 55%, transparent); opacity: 1; } .main .cs-pulls__line::before { color: color-mix(in srgb, var(--caseAccent, var(--frgd)) 75%, var(--frgd)); opacity: 1; } .main .cs-pulls > li { border-top-color: color-mix(in srgb, var(--caseAccent) 28%, transparent); } .main .cs-pulls > li:last-child { border-bottom-color: color-mix(in srgb, var(--caseAccent) 28%, transparent); } .main .NDAsign { border-left: 3px solid var(--caseAccent, transparent); } .main .cs-roles { --cs-hair: color-mix(in srgb, var(--caseAccent) 28%, transparent); --cs-hair-soft: color-mix(in srgb, var(--caseAccent) 16%, transparent); --cs-tint: color-mix(in srgb, var(--caseAccent) 40%, transparent); --cs-role-tint: color-mix(in srgb, var(--caseAccent) 65%, var(--frgd) 35%); } .main li b { background: color-mix(in srgb, var(--caseAccent) 18%, transparent); } .main h4.caseStudyLabel { color: color-mix(in srgb, var(--caseAccent) 42%, var(--frgd)); } .main .cs-tldr__pair > div { border-top-color: color-mix(in srgb, var(--caseAccent) 70%, var(--tldr-ink, var(--frgd))); } .main .qBand__cue { border-color: var(--q1); color: var(--q1); } .main .qBand__plus::before, .main .qBand__plus::after { background: color-mix(in srgb, var(--caseAccent) 70%, var(--q1, var(--frgd))); } .cs-card__heading { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); width: 100%; } .cs-card__heading > .material-symbols-outlined { width: 2.25rem; height: 2.25rem; padding: 8px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 32px; background: var(--bkgd); border: 1.75px solid var(--border); font-size: calc(1.25rem * var(--ds-font-scale)); flex-shrink: 0; } .cs-card .caseStudyLabel, .cs-card h4, .cs-card__heading .caseStudyLabel, .cs-card__heading h4 { float: none !important; clear: none !important; display: block; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; text-align: left !important; font-family: "Inter", "Inter Fallback", "Inter Fallback R", sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.35; color: var(--frgd); } .cs-card__heading .caseStudyLabel, .cs-card__heading h4 { flex: 1; min-width: 0; } .cs-card p { float: none !important; clear: none !important; display: block; width: auto !important; max-width: none !important; margin: 0 !important; margin-left: 0 !important; font-size: 0.9rem; line-height: 1.5; color: var(--frgd); text-align: left; } .cs-card .cs-card__meta { margin: 0; font-family: var(--font-meta); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; /* text-transform: uppercase; */ opacity: 0.7; line-height: 1.2; } .cs-carousel { --cs-card-w: min(100%, 240px); --cs-gap: 12px; --cs-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --cs-track-w: 100%; display: flex; flex-direction: column; /* Allow the track to bleed past the content column (Apple-style peek) */ overflow: visible; position: relative; box-sizing: border-box; line-height: 1.45; text-align: left; } .cs-carousel__track { order: 1; } .cs-carousel__controls { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); margin: 10px 0 0; z-index: 2; position: relative; order: 2; } .cs-carousel__see-all { margin-left: auto !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border: 2px solid var(--frgd) !important; border-radius: 20px !important; background: var(--action) !important; color: var(--frgd) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; font-family: var(--font-meta) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0; /* text-transform: uppercase; */ padding: 6px 12px !important; min-height: 32px; width: auto !important; left: auto !important; top: auto !important; position: static !important; display: inline-flex !important; align-items: center; cursor: pointer; transition: opacity 0.25s var(--cs-ease); } .cs-carousel__see-all:hover, .cs-carousel__prev:hover:not(:disabled), .cs-carousel__next:hover:not(:disabled) { left: auto !important; top: auto !important; position: static !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } .cs-carousel__see-all:focus-visible, .cs-carousel__prev:focus-visible, .cs-carousel__next:focus-visible { outline: 2px solid var(--frgd); outline-offset: 2px; } .cs-carousel__prev, .cs-carousel__next { display: inline-flex !important; align-items: center; justify-content: center; width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; margin: 0 !important; border: 2px solid var(--frgd) !important; border-radius: 50% !important; background: var(--action) !important; color: var(--frgd) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; cursor: pointer; font-size: 16px !important; line-height: 1 !important; text-transform: none !important; font-weight: 500 !important; letter-spacing: normal !important; left: auto !important; top: auto !important; position: static !important; transition: opacity 0.25s var(--cs-ease), transform 0.2s var(--cs-ease), box-shadow 0.25s var(--cs-ease); } .cs-carousel__prev:hover:not(:disabled), .cs-carousel__next:hover:not(:disabled) { transform: scale(1.04); } .cs-carousel__prev:active:not(:disabled), .cs-carousel__next:active:not(:disabled) { transform: scale(0.96); } .cs-carousel__prev:disabled, .cs-carousel__next:disabled { opacity: 0.35; cursor: default; pointer-events: none; transform: none; } .cs-carousel__track { display: block; /* JS sets --cs-track-w to (viewport right − track left) so cards peek on wide screens */ width: var(--cs-track-w); max-width: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 4px; scroll-behavior: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; outline: none; padding: 4px 2px 4px; box-sizing: border-box; } /* Disable snap while we animate so the finish doesn’t “jump” */ .cs-carousel__track.is-scrolling { scroll-snap-type: none; } .cs-carousel__track::-webkit-scrollbar { display: none; } .cs-carousel__scroller { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: max-content; max-width: none; gap: var(--cs-gap); /* JS widens this so the last card can settle at the leading edge */ padding-inline-end: var(--cs-end-pad, 8px); box-sizing: border-box; } .cs-carousel .cs-card { flex: 0 0 var(--cs-card-w); width: var(--cs-card-w); max-width: var(--cs-card-w); min-width: var(--cs-card-w); opacity: 0.92; transform: scale(0.985); transform-origin: center center; scroll-snap-align: start; transition: opacity 0.45s var(--cs-ease), transform 0.45s var(--cs-ease); } .cs-carousel .cs-card.is-inview { opacity: 1; transform: scale(1); } .cs-carousel.is-show-all .cs-carousel__prev, .cs-carousel.is-show-all .cs-carousel__next { display: none !important; } .cs-carousel.is-show-all .cs-carousel__track { width: 100%; max-width: 100%; overflow: visible; scroll-snap-type: none; padding-bottom: 4px; } .cs-carousel.is-show-all { --cs-track-w: 100%; --cs-end-pad: 0px; overflow-x: hidden; } .cs-carousel.is-show-all .cs-carousel__scroller { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 100%; gap: var(--cs-gap); padding: 0; } .cs-carousel.is-show-all .cs-card { flex: none; width: 100%; max-width: 100%; min-width: 0; opacity: 1; transform: none; scroll-snap-align: unset; } @media (min-width: 700px) { .cs-cards:not(.is-deck) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cs-cards.is-deck:not(.is-show-all) .cs-cards__controls .cs-carousel__prev, .cs-cards.is-deck:not(.is-show-all) .cs-cards__controls .cs-carousel__next { display: inline-flex !important; } .cs-cards.is-deck.is-show-all .cs-cards__stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cs-carousel { --cs-card-w: 220px; --cs-gap: 14px; } .cs-carousel.is-show-all .cs-carousel__scroller { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .cs-carousel { --cs-card-w: min(100%, 220px); --cs-gap: 10px; } .cs-carousel__prev, .cs-carousel__next { width: 32px !important; height: 32px !important; min-height: 32px !important; } .cs-cards:not(.is-deck) { grid-template-columns: 1fr; gap: 10px; } .cs-cards__stack { padding: 10px 12px 18px; } } /* ========================================================================= Private-beta assistant band — case study section that opens in place. Self-contained colour system: independent of the accent themes, which are all light. Text-bearing areas stay on --q1/--q2 (white ≥ 9.96:1). ========================================================================= */ .main > .qBand { --q1: #340B8C; /* ground — all text sits here */ --q2: #4811BF; /* ground end / raised */ --q3: #7226F3; /* decorative */ --q4: #8461F4; /* borders, rules, icons (3.18:1 — non-text only) */ --q5: #99A6F2; /* light accent — decorative on dark */ --q-text: #FFFFFF; /* 13.35:1 on --q1 */ --q-dim: #B8C2F5; /* 7.68:1 on --q1, 5.73:1 on --q2 */ --q-link: #EDEFFD; /* 11.68:1 */ --q-raised: rgba(255, 255, 255, 0.07); --q-hair: rgba(255, 255, 255, 0.16); --q-ease: cubic-bezier(0.25, 0.8, 0.3, 1); /* Mark block height: the right column starts level with the kicker, so the lede offset is derived from these rather than guessed. */ --q-mark: 56px; --q-mark-gap: 20px; float: none; clear: both; box-sizing: border-box; position: relative; isolation: isolate; width: var(--vw, 100vw); max-width: var(--vw, 100vw); margin: 96px 0 0 calc(50% - var(--vw, 100vw) / 2); background: var(--q1); color: var(--q-text); /* clip, not hidden: `hidden` makes this a scroll container, and any scrollIntoView / #assistant anchor jump then scrolls the band's own content out of alignment. `clip` clips without being scrollable. */ overflow: hidden; overflow: clip; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; line-height: 1.6; } .qBand__inner { position: relative; z-index: 1; /* Match .main’s content box (max-width 800px, no extra inset) so column % widths line up with the rest of the case study. */ max-width: var(--max-width); margin: 0 auto; padding: 0 0 76px; box-sizing: border-box; } /* Padding lives on the inner wrapper so collapsed and expanded read the same. */ .qBand__head { padding: 76px 0 0; } .qBand__head::after { content: ""; display: table; clear: both; } /* Left column: brand + section title (same math as .main > h2) */ .qBand__intro { float: left; clear: both; box-sizing: border-box; width: calc(var(--heading-col) - var(--gap) / 2); max-width: none; min-width: 0; text-align: end; } .qBand__mark { display: block; width: var(--q-mark); height: var(--q-mark); margin: 0 0 var(--q-mark-gap) auto; } .qBand__kicker { margin: 0 0 12px; font-size: 0.6875rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--q-dim); text-align: end; } .qBand .qBand__title { margin: 0; padding: 0 0 0.35rem; width: 100%; text-align: end; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: 1px; color: var(--q-text); } /* Right column: body copy, CTAs, cards (same math as .main > p / h3 / .cs-cards). Width/offset shared; vertical rhythm is set per role below so related blocks sit closer and section breaks open up. */ .qBand .qBand__lede, .qBand .qBand__pull, .qBand .qBand__body, .qBand .qBand__lead, .qBand .qBand__subhead, .qBand .qBand__close, .qBand .qBand__handoff, .qBand .cs-cards, .qBand ol.cs-stepper, .qBand ol.cs-pulls { box-sizing: border-box; display: flow-root; width: calc(var(--content-col) - var(--gap) / 2); max-width: none; margin-left: calc(var(--heading-col) + var(--gap) / 2); } /* Keep flex so track/controls order + Apple-style bleed match .main carousels */ .qBand .cs-carousel { box-sizing: border-box; display: flex; flex-direction: column; width: calc(var(--content-col) - var(--gap) / 2); max-width: none; margin: 0.75rem 0 1.5rem; margin-left: calc(var(--heading-col) + var(--gap) / 2); overflow: visible; } .qBand .qBand__lede { margin-top: calc(var(--q-mark) + var(--q-mark-gap)); margin-bottom: 0; font-size: calc(1.125rem * var(--ds-font-scale)); line-height: 1.5; color: var(--q-text); text-align: left; } .qBand__lede strong { font-weight: 700; } .qBand__trigger { display: block; clear: both; box-sizing: border-box; width: fit-content; max-width: calc(var(--content-col) - var(--gap) / 2); margin: 1.25rem 0 0; margin-left: calc(var(--heading-col) + var(--gap) / 2); padding: 0; border: 0; background: none; color: var(--q1); font: inherit; cursor: pointer; } /* Lives after the panel in the DOM: collapsed panel is 0fr so the CTA still sits under the lede; open, it becomes the Close control at the end. */ .qBand[data-open="true"] .qBand__trigger { margin-top: 2.25rem; } .qBand__trigger:focus-visible { outline: 2px solid var(--q5); outline-offset: 6px; border-radius: 999px; } /* Inverted pill: solid light on --q1 so the CTA reads above the ground. */ .qBand__cue { display: inline-flex; align-items: center; gap: 10px; flex: none; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--q1); background: var(--q-text); border: 1px solid var(--q1); border-radius: 999px; padding: 9px 16px; transition: background .25s ease, border-color .25s ease, color .25s ease; } .qBand__trigger:hover .qBand__cue { background: var(--q-link); border-color: var(--q1); color: var(--q1); } .qBand__plus { position: relative; width: 11px; height: 11px; flex: none; } .qBand__plus::before, .qBand__plus::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--q1); transform: translateY(-50%); transition: transform .4s var(--q-ease), opacity .3s ease; } .qBand__plus::after { transform: translateY(-50%) rotate(90deg); } .qBand[data-open="true"] .qBand__plus::after { transform: translateY(-50%) rotate(0deg); } /* ---- The expanding panel ---- */ .qBand__wrap { clear: both; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .68s var(--q-ease); } .qBand[data-open="true"] .qBand__wrap { grid-template-rows: 1fr; } .qBand__panel { overflow: hidden; min-height: 0; } /* After open settles, JS sets overflow:visible so the carousel can peek past the content column (same Apple-style bleed as the rest of the page). */ .qBand__panel.is-bleed { overflow: visible; } .qBand__panelInner { padding: 28px 0 0; } /* No JS: the story is open and readable. Gated on a root flag set by an inline head script, so the panel never paints open and then collapses. */ html:not([data-js]) .qBand__wrap { grid-template-rows: 1fr; } html:not([data-js]) .qBand__cue { display: none; } html:not([data-js]) .qBand__trigger { cursor: default; } html:not([data-js]) .qBand :is( .cs-cards, .cs-carousel, .cs-stepper__ui, ol.cs-stepper, ol.cs-pulls, .qBand__pull, .qBand__body, .qBand__lead, .qBand__subhead, .qBand__demo, .qBand__caption, .qBand__chapter, .qBand__close, .qBand__handoff ) { opacity: 1; transform: none; } /* ---- Case-study cards / stepper / pulls inside the band ---- */ .qBand .cs-cards, .qBand .cs-carousel, .qBand .cs-stepper__ui, .qBand ol.cs-pulls { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s var(--q-ease); } .qBand .cs-cards, .qBand ol.cs-stepper, .qBand .cs-stepper__ui, .qBand ol.cs-pulls { margin-top: 0.75rem; margin-bottom: 1.5rem; } .qBand[data-open="true"] .cs-cards, .qBand[data-open="true"] .cs-carousel, .qBand[data-open="true"] .cs-stepper__ui, .qBand[data-open="true"] ol.cs-pulls { opacity: 1; transform: none; } .qBand[data-open="true"] .qBand__lead + .cs-cards { transition-delay: .44s; } .qBand[data-open="true"] .qBand__subhead + .cs-carousel { transition-delay: .28s; } .qBand[data-open="true"] .qBand__subhead + .cs-cards { transition-delay: .36s; } .qBand[data-open="true"] .qBand__subhead + .cs-stepper__ui, .qBand[data-open="true"] .qBand__subhead + ol.cs-stepper + .cs-stepper__ui { transition-delay: .28s; } .qBand[data-open="true"] .qBand__subhead + ol.cs-pulls { transition-delay: .36s; } .qBand .cs-card { background: var(--q2) !important; border: 1px solid var(--q-hair) !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22) !important; color: var(--q-text); } .qBand .cs-cards.is-deck > .cs-cards__stack > .cs-card.is-front { box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.28) !important; } .qBand .cs-card .caseStudyLabel, .qBand .cs-card h4, .qBand .cs-card__heading .caseStudyLabel, .qBand .cs-card__heading h4, .qBand .cs-card p, .qBand .cs-card .cs-card__meta { color: var(--q-text); } .qBand .cs-card p { color: var(--q-dim); } .qBand .cs-card .cs-card__meta { color: var(--q5); opacity: 1; } /* Pixelarticons in the same badge geometry as Material on .cs-card */ .qBand .cs-card__heading > [class^="pixelart-icons-font-"], .qBand .cs-card__heading > [class*=" pixelart-icons-font-"] { width: 2.5rem; height: 2.5rem; padding: 8px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 32px; background: rgba(255, 255, 255, 0.1); border: 1.75px solid var(--q4); color: var(--q5); font-size: 24px; line-height: 1; flex-shrink: 0; } .qBand .cs-carousel__prev, .qBand .cs-carousel__next, .qBand .cs-carousel__see-all, .qBand .cs-cards__controls .cs-carousel__prev, .qBand .cs-cards__controls .cs-carousel__next, .qBand .cs-cards__controls .cs-carousel__see-all { background: var(--q-raised) !important; border-color: var(--q4) !important; color: var(--q-text) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important; } .qBand .cs-carousel__see-all:hover, .qBand .cs-carousel__prev:hover:not(:disabled), .qBand .cs-carousel__next:hover:not(:disabled), .qBand .cs-cards__controls .cs-carousel__see-all:hover, .qBand .cs-cards__controls .cs-carousel__prev:hover:not(:disabled), .qBand .cs-cards__controls .cs-carousel__next:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14) !important; border-color: var(--q5) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important; } .qBand .cs-carousel__see-all:focus-visible, .qBand .cs-carousel__prev:focus-visible, .qBand .cs-carousel__next:focus-visible { outline-color: var(--q5); } .qBand .cs-carousel__prev .material-symbols-outlined, .qBand .cs-carousel__next .material-symbols-outlined { color: var(--q-text); font-size: calc(1.125rem * var(--ds-font-scale)); } /* Stepper + pulls: page tokens (--frgd/--bkgd/--border) are for the light column; recolour them so they read on --q1 instead of vanishing into it. */ .qBand .cs-stepper__count, .qBand .cs-stepper__ordinal { color: var(--q-dim); } .qBand .main .cs-stepper__prev, .qBand .main .cs-stepper__next, .qBand .cs-stepper__prev, .qBand .cs-stepper__next { border-color: var(--q-hair) !important; background: var(--q-raised); color: var(--q-text); box-shadow: none; } .qBand .cs-stepper__prev:disabled, .qBand .cs-stepper__next:disabled { opacity: 0.35; } .qBand .cs-stepper__prev .material-symbols-outlined, .qBand .cs-stepper__next .material-symbols-outlined { color: var(--q-text); } .qBand .cs-stepper__track::before { background: var(--q-hair); } .qBand .cs-stepper__tickMark { background: var(--q-hair); } .qBand .cs-stepper__tick.is-done .cs-stepper__tickMark { background: var(--q5); opacity: 1; } .qBand .cs-stepper__tick.is-active .cs-stepper__tickMark { background: var(--q-text); } .qBand button.cs-stepper__tick:focus-visible { outline-color: var(--q5); } .qBand .cs-stepper__panel h4.caseStudyLabel, .qBand .cs-stepper__panel p { color: var(--q-text); } .qBand .cs-stepper__panel p:not(.cs-stepper__ordinal) { color: var(--q-dim); } .qBand ol.cs-pulls > li { border-color: var(--q-hair); } /* The page-wide size tops out at 1.5rem, above the subhead that introduces these lines; inside the band they sit a step below it. */ .qBand .cs-pulls__line { font-size: 1.0625rem; line-height: 1.35; color: var(--q-text); } .qBand .cs-pulls__line::before { color: var(--q-dim); opacity: 1; } .qBand ol.cs-pulls > li > p:not(.cs-pulls__line) { color: var(--q-dim); } /* Page-wide text-align: justify stretches short headings; keep band copy ragged. */ .qBand h4, .qBand .qBand__caption, .qBand .cs-pulls__line, .qBand .cs-stepper__panel, .qBand .cs-stepper__panel p, .qBand ol.cs-pulls p { text-align: left; } .qBand .qBand__caption { text-align: center; } /* ---- Extended narrative blocks ---- Scale, largest down: title 2rem, pull up to 1.45, subhead 1.25, lede 1.125, pull-quote lines 1.0625, body 1, card titles 0.9. Spacing: room above section starts; a lead-in, a caption or a handoff sits tight to the block it belongs to, so pairs read as units. */ .qBand .qBand__pull { hyphens: manual; -webkit-hyphens: manual; margin-top: 0; margin-bottom: 1.75rem; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.45rem); font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; color: var(--q-text); text-align: left; padding-left: 18px; border-left: 2px solid var(--q5); } .qBand .qBand__body { margin-top: 0; margin-bottom: 1.25rem; font-size: 1rem; line-height: 1.65; color: var(--q-dim); text-align: left; } /* A sentence that introduces the cards, so it stays at body size and reads as copy — at label size it was indistinguishable from the card titles. */ .qBand .qBand__lead { margin-top: 2rem; margin-bottom: 0.65rem; font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; color: var(--q-text); text-align: left; } /* Section starts are marked by the rule, not by size: the pull quote is set in the same face and weight, so size alone left the two reading as peers. */ .qBand .qBand__subhead { margin-top: 3rem; margin-bottom: 0.75rem; padding: 1.25rem 0 0; background: none; border-top: 1px solid var(--q-hair); border-radius: 0; letter-spacing: 0.01em; font-family: 'Bricolage Grotesque', "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback R", sans-serif; font-size: calc(1.25rem * var(--ds-font-scale)); font-weight: 600; line-height: 1.25; color: var(--q-text); text-align: left; } /* Encapsulates a self-contained chapter (heading + its interactive body) so it reads as a unit off the purple ground — not another free-floating block in the same stack as the caption above it. */ .qBand__chapter { box-sizing: border-box; width: calc(var(--content-col) - var(--gap) / 2); max-width: none; margin: 3.5rem 0 0; margin-left: calc(var(--heading-col) + var(--gap) / 2); padding: 28px 28px 24px; background: var(--q-raised); border: 1px solid var(--q-hair); border-radius: 16px; opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s var(--q-ease); } .qBand[data-open="true"] .qBand__chapter { opacity: 1; transform: none; transition-delay: .48s; } /* Extra air after the demo caption: the chapter is a new beat, not a continuation of the frame note above it. */ .qBand .qBand__caption + .qBand__chapter { margin-top: 4.5rem; } .qBand__chapter .qBand__subhead { width: 100%; max-width: none; margin: 0 0 1rem; margin-left: 0; padding: 0; border-top: 0; } .qBand__chapter .cs-stepper, .qBand__chapter .cs-stepper__ui { width: 100%; max-width: none; margin: 0; margin-left: 0; } /* The shell carries the reveal; children stay solid so the chapter reads as one arriving unit rather than a nested stagger. */ .qBand__chapter .qBand__subhead, .qBand__chapter .cs-stepper__ui, .qBand__chapter ol.cs-stepper { opacity: 1; transform: none; } .qBand .qBand__handoff { margin-top: 0; margin-bottom: 0; font-size: 0.9375rem; font-style: italic; line-height: 1.5; color: var(--q-dim); text-align: left; } /* Staggered reveal shared by every block inside the panel */ .qBand__pull, .qBand__body, .qBand__lead, .qBand__subhead, .qBand__caption, .qBand__close, .qBand__handoff { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s var(--q-ease); } .qBand[data-open="true"] :is( .qBand__pull, .qBand__body, .qBand__lead, .qBand__subhead, .qBand__caption, .qBand__close, .qBand__handoff ) { opacity: 1; transform: none; } .qBand[data-open="true"] .qBand__pull { transition-delay: .24s; } .qBand[data-open="true"] .qBand__body { transition-delay: .32s; } .qBand[data-open="true"] .qBand__lead { transition-delay: .38s; } .qBand[data-open="true"] .qBand__subhead { transition-delay: .20s; } /* Arrives with the frame it describes, which fades in at .42s. */ .qBand[data-open="true"] .qBand__caption { transition-delay: .50s; } /* ---- Demo + closing note ---- */ /* qBand__demo keeps its own full-inner width and spacing on purpose. */ .qBand__demo { margin: 2.75rem 0 0; border: 1px solid var(--q4); border-radius: 16px; overflow: hidden; background: var(--q1); opacity: 0; transform: translateY(20px) scale(.985); transition: opacity .7s ease, transform .7s var(--q-ease); } .qBand[data-open="true"] .qBand__demo { opacity: 1; transform: none; transition-delay: .42s; } .qBand__demo .LatestDemo { display: block; } /* Belongs to the demo, so it takes the demo's full-inner width. In the offset content column a centred caption sat off-centre under the frame. */ .qBand .qBand__caption { box-sizing: border-box; width: 100%; max-width: none; margin: 0.75rem 0 0; font-size: var(--text-functional-sm); letter-spacing: 0; line-height: 1.45; text-align: center; color: var(--q-dim); } .qBand__close { margin-top: 2.75rem; margin-bottom: 0.65rem; padding: 20px 24px; background: var(--q-raised); border-left: 2px solid var(--q5); border-radius: 0 12px 12px 0; font-size: 1rem; line-height: 1.6; color: var(--q-text); text-align: left; } .qBand__close strong { font-weight: 700; } @media (max-width: 768px) { .qBand__inner { padding-left: 16px; padding-right: 16px; padding-bottom: 52px; } .qBand__head { padding-top: 52px; } .qBand__panelInner { padding-top: 24px; } .qBand__intro, .qBand .qBand__lede, .qBand .qBand__pull, .qBand .qBand__body, .qBand .qBand__lead, .qBand .qBand__subhead, .qBand .qBand__caption, .qBand .qBand__close, .qBand .qBand__handoff, .qBand .qBand__chapter, .qBand .cs-cards, .qBand .cs-carousel, .qBand ol.cs-stepper, .qBand .cs-stepper__ui, .qBand ol.cs-pulls, .qBand__trigger { float: none; clear: both; width: 100%; max-width: 100%; margin-left: 0; } .qBand__intro, .qBand .qBand__title, .qBand__kicker { text-align: left; } .qBand__mark { margin-left: 0; margin-right: auto; } .qBand .qBand__title { font-size: 1.5rem; } .qBand .qBand__lede { margin-top: 0.75rem; margin-bottom: 0; } .qBand .qBand__subhead { margin-top: 2.5rem; padding-top: 1rem; } .qBand .qBand__caption + .qBand__chapter { margin-top: 3.25rem; } .qBand__chapter { padding: 22px 18px 18px; } .qBand .qBand__pull { font-size: 1.2rem; } .main > .qBand { margin-top: var(--space-9); margin-bottom: 0; } } @media (max-width: 900px) { .main > .qBand { margin-top: var(--space-9); margin-bottom: 0; } .qBand__inner { padding-bottom: 52px; } .qBand__head { padding-top: 52px; } .qBand__panelInner { padding-top: 24px; } .qBand .qBand__title { font-size: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .qBand__wrap, .qBand .cs-cards, .qBand .cs-carousel, .qBand .cs-stepper__ui, .qBand ol.cs-pulls, .qBand__demo, .qBand__pull, .qBand__body, .qBand__lead, .qBand__subhead, .qBand__caption, .qBand__chapter, .qBand__close, .qBand__handoff, .qBand__plus::before, .qBand__plus::after { transition: none !important; } .qBand .cs-cards, .qBand .cs-carousel, .qBand .cs-stepper__ui, .qBand ol.cs-pulls, .qBand__demo, .qBand__pull, .qBand__body, .qBand__lead, .qBand__subhead, .qBand__caption, .qBand__chapter, .qBand__close, .qBand__handoff { opacity: 1 !important; transform: none !important; } } /* ========================================================================= Scroll-driven highlights (opt-in, desktop only) ------------------------------------------------------------------------- wraps the load-bearing sentence in a block. It is inert by default: the marks stay in the markup for semantics, but render as plain text until the reader turns the highlighter on from the pen toggle under the colour switcher, and only ever on desktop. When on, each band sweeps in like a highlighter pen as the line scrolls into view, using animation-timeline: view(). The band is always #E2F442 with fixed dark ink. The ink is fixed rather than inherited because the short version re-themes its text colour per theme, and orange or red type on a chartreuse band is unreadable; #2E2E2E holds 11.2:1 against the band everywhere, on every theme and inside the dark assistant panel. Browsers without scroll-driven animation, and anyone who has asked for reduced motion, get the finished highlight instead of a sweep. ========================================================================= */ /* Off state, and the whole of mobile: no band at all. Also overrides the browser default of black-on-yellow. */ mark { background: none; color: inherit; } @media only screen and (min-width: 769px) { [data-highlights="on"] mark { color: #2E2E2E; background-color: transparent; background-image: linear-gradient(to right, #E2F442 0 50%, transparent 50% 100%); background-repeat: no-repeat; background-size: 200% 100%; background-position: 0% 0; /* settled state: fully drawn */ -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.14em; margin-inline: -0.14em; /* cancels the padding, so surrounding text never shifts */ border-radius: 0.15em; } /* Case-study body: highlighter band picks up the company logo accent */ [data-highlights="on"] .main mark { background-image: linear-gradient(to right, color-mix(in srgb, var(--caseAccent, #E2F442) 42%, #fff4a8) 0 50%, transparent 50% 100%); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-highlights="on"] mark { animation: rg-mark-sweep linear both; animation-timeline: view(); animation-range: cover 32% cover 58%; } } } /* A view() timeline resolves against the nearest scroll container, not the page — so inside a clipped box (a line-clamped card, a collapsed fold, a carousel track) the sweep either never starts or freezes at whatever progress that box happens to sit at, which can strand a band half-drawn. These opt out and render settled. */ [data-highlights="on"] .chat-container mark, [data-highlights="on"] .load-more mark, [data-highlights="on"] .dictionarySnippet mark, [data-highlights="on"] .CaseStudyDescription mark, [data-highlights="on"] #carouselBlocks mark, [data-highlights="on"] .s-fold-body mark, [data-highlights="on"] .sq-trio-item mark, [data-highlights="on"] .sq-rec-carousel mark, [data-highlights="on"] .qBand__panel mark, [data-highlights="on"] .cs-carousel__track mark, [data-highlights="on"] .homeAssistant mark, [data-highlights="on"] .sq-rows mark { animation: none; background-position: 0% 0; } /* Homepage intro logos (AWS / ABB / FNZ only): keep the highlighter band on the inline brand marks without shifting surrounding text. */ [data-highlights="on"] mark:has(> .intro-company-logo) { display: inline-flex; align-items: center; vertical-align: text-bottom; line-height: 0; padding-block: 0.12em; } } @keyframes rg-mark-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } } /* ========================================================================= Highlighter toggle ------------------------------------------------------------------------- The Stabilo Boss photo is the control: no button chrome, no circle, no shadow — just a small highlighter in the bottom-right, rotated 22.5° left (counter-clockwise) from the source shot. Desktop only, because the feature it switches is desktop only. Switching on lights the pen with a glow in its own colour, which is the entire difference between the two states. ========================================================================= */ .highlight-toggle-item { display: none; } @media only screen and (min-width: 769px) { .highlight-toggle-item { display: block; list-style: none; border: none !important; position: fixed; bottom: -60px; right: -12px; margin: 0 !important; padding: 0 !important; z-index: 9999 !important; transition: bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .highlight-toggle-item:has(.highlight-toggle[aria-pressed="true"]) { bottom: 20px; } @media (prefers-reduced-motion: reduce) { .highlight-toggle-item { transition: none; } } .highlight-toggle { display: block; width: 90px; height: 90px; padding: 0; border: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; transition: transform 0.2s ease; } .highlight-toggle img { display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(-45deg); transition: filter 0.2s ease; pointer-events: none; user-select: none; } /* Lifts a little on hover. */ .highlight-toggle:hover, .highlight-toggle:focus-visible { transform: translateY(-4px); outline: none; } .highlight-toggle[aria-pressed="true"] img { filter: drop-shadow(0 0 2px rgba(255, 237, 0, 1)) drop-shadow(0 0 6px rgba(255, 237, 0, 0.95)) drop-shadow(0 0 14px rgba(255, 237, 0, 0.85)); } /* No box to outline, so the focus ring goes on the element itself. */ .highlight-toggle:focus-visible { outline: 2px solid var(--frgd); outline-offset: 4px; border-radius: 4px; } body#short .highlight-toggle:focus-visible { outline-color: var(--s-ink); } /* Homepage tooltip sits to the left of the pen. */ .homepage .highlight-toggle { position: relative; } .homepage .highlight-toggle::after { content: "Highlighted version"; position: absolute; top: 50%; bottom: auto; right: calc(100% + 12px); left: auto; width: max-content; max-width: 220px; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--frgd); background: #E2F442; color: var(--frgd); font-family: var(--font-meta); font-size: 13px; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-align: left; white-space: normal; box-shadow: 2px 2px 0 var(--shadow); opacity: 0; visibility: hidden; transform: translate(4px, -50%); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 10000; } .homepage .highlight-toggle:hover::after, .homepage .highlight-toggle:focus-visible::after { opacity: 1; visibility: visible; transform: translate(0, -50%); } } .section-appear { opacity: 0; transform: translateY(42px); } .section-appear.is-appeared { opacity: 1; transform: none; transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--appear-delay, 0s); } @media (prefers-reduced-motion: reduce) { .section-appear, .section-appear.is-appeared { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------------------------- Slow-connection scaffolding --------------------------------------------------------------------------- */ /* Material Symbols as inline SVG (no ~300 KB icon font, no "arrow_back" text flashing while it loads). The glyphs keep the .material-symbols-outlined class, so every rule written for the font still sizes them: 1em is the old glyph box, and the glyph sits on the baseline exactly like the font did. */ svg.material-symbols-outlined { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; overflow: visible; } /* Lazy iframes (demos, diagrams) show a soft shimmer in their reserved box until their document has loaded; each iframe marks itself with an inline onload, so there is no race with any script. */ iframe[loading="lazy"]:not(.is-loaded) { background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bkgd, #fff) 70%, transparent) 50%, transparent 70%) 0 0 / 250% 100% no-repeat, color-mix(in srgb, var(--border, #e1e0e7) 38%, var(--bkgd, #fff)); animation: rg-skeleton-shimmer 1.6s linear infinite; } @keyframes rg-skeleton-shimmer { from { background-position: 125% 0, 0 0; } to { background-position: -125% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { iframe[loading="lazy"]:not(.is-loaded) { animation: none; } }