layout
date
title
layouts/homepage.njk
2021-04-12
Andy Fitzsimon
G’day, I'm Andy Fitzsimon a multi-disciplinary technology leader
Ops, Tech, Creative, & Sales combined,
Kindness
Energy
Gratitude
Trust
A listener, doer, & fixer many functional hats
Enterprise pedigree plus scale-up hustle.Email me about your crusade
For making money, saving money, being likeable, staying formidable
When it came time to sell Outfit, I read the market,
At Red Hat, I set the tone across regions,
Nothing is beyond us, If it needs to be done, I do it well & with pride.
Early mornings & late nights are my most productive times.
Focus, empathy, & pragmatism.
Real, Relevant, Recommended.
Bruce Stronge Founder & CEO
outfit
Managed Andy directly at Outfit
I met Andy as my client 10 years ago when we partnered to solve his global brand challenges at Red Hat.
Andy’s vision, deep knowledge of the problem, combined with his market intuition and technical experience was critical to us building the right solution for the enterprise.
Staying close for the following 7 years; Andy eventually joined Outfit for 3 years and worked even closer with me. After helping us find, negotiate, and navigate our sale to a public US company, he remains my very good friend.
When he isn’t helping tech leadership with strategy, or partnering with sales to close our biggest deals, Andy is a technology servant-leader. All of his teams rated him incredibly highly as a manager to work for, and consequently they built and released working product quicker than any others I’ve worked with.
Andy is the most passionate technologist I’ve ever met, with deep and useful knowledge across current and emerging trends in tech, brand, design and marketing. He’s very very good at what he does. As important; he is kind, reliable, and hardworking. I truly hope to work with Andy again - be it as my client, a co-founder in a startup, or as a team mate in a global tech company.
James Lee Product Manager
Directly managed by Andy at Outfit
I’ve had the pleasure of knowing Andy for my 7 years at Outfit.
Over that time, I’ve known him as a customer, manager, and mentor.
Andy has a talent that takes business to the next level, his strength is that he does so while caring deeply; lifting up all around him.As a customer, Andy gave crucial feedback, innovative advice, and set the vision that pushed Outfit to maximize our full potential. In doing so, he created a virtuous cycle between driving business ROI for Red Hat and enabling sustained growth for Outfit through those early stages. Over the following years, we spent many a day (or the occasional long night) building products and solving problems. His commitment to technical excellence and great user experiences always rubbed off on those with whom he collaborated, making outcomes better for it.
As a manager, up until that point in my career, I had never had a manager who cared more deeply about me and what made me tick than Andy did. He knew when he needed to be hands-off and when he needed to be hands-on. His commitment to his reports was that of a true servant leader.
Finally, as a mentor, I’ve never met someone who is as adept at understanding and articulating the 10,000-foot view of the technology landscape, and then being able to zoom straight into the weeds on some truly complex and challenging problems. Andy helped me (and many others) navigate that world. I say it to many people I meet, and I’ll say it here: Andy Fitzsimon is one of the smartest dudes you’ll meet. Harness the energy, and great things will happen.
John Q. Adams VP, Corporate Brand Marketing
Managed Andy directly at Red Hat
In short, Andy Fitzsimon is a genius. Some have even called him a unicorn, because he is a rare and magical breed.
Never before have I had the pleasure of working with someone who is equal parts brand champion, design whiz, digital renegade and technical rock star.
His creative instincts are on point and his engineering chops are undisputed.
Combine all those things and you've got a kick-ass technology brand professional for the 21st century.
Manh Quoc Anh Nguyen Lead Sofware Developer
Directly managed by Andy at Outfit
Andy cares for team members as a big brother / great buddy rather than as a boss.
I am indeed proud of working with Andy, which helps me unleash my innovation potential.
I would recommend Andy to any team that needs an advocate for innovation, strategy, brand and marketing.
I hope that we can have a chance to work together in future.
Tim Brown CA Marketing Lead
Leadership team peer at Outfit
Working with Andy Fitz has been a joy and an absolute privilege.
If I ever wanted to know what marketers, designers, creatives, brand managers and techies will be thinking about in the future I could count on Andy already being there, thinking about it and solving for it.
Andy is a great creative thinker, amazingly hard worker, super smart technologist and a compassionate colleague.
We have worked directly together on many initiatives where he has stepped up to speak at conferences, been a massive contributor to rebrand projects, and been a huge advocate supporting GTM activities.
Anyone who gets to work with him or have him work for them should consider themselves incredibly fortunate.
Paula Weigel VP, Brand & Client Experience
Red Hat Brand Teammate
How do I define someone who fuses a technical background with high design to reinvent brand consistency and innovation? There are no words.
Andy uses his unique skill set to challenge, innovate, refine, and rebuild.
He has changed the way our team looks at brand consistency and automation, but has done so in a way that's organic and true to our Brand and to our company.
He is uncompromising in his pursuit of quality in every thing he touches. Andy is not content to simply discover (or even build) a solution to a problem; he seeks out ways to scale that solution so it is impactful and beneficial to a larger audience.
Every organization should have an Andy Fitzsimon on their team; I can't wait to see what he does next.
Kyrsten Musich Innovation Studio Lead
Worked with Andy in Marketing at Red Hat
Andy is a dream to work with. He is direct and kind in his feedback, wildly creative and excellent at building on ideas. He is amazing at keeping up with the trends in the marketplace and his creative talents surpass his technical and many other talents. He is brilliant to interact with and a true friend through and through. He has your back but is willing to tell you "when you have food in your teeth" when it comes to feedback.
He is one of my favorite people to jam on ideas with and then is someone who actually wants to make them happen with you. His understanding of a brand, the customer audience and his "internal clients" needs are well balanced when producing a piece of working or creating a new idea to move the organization forward. He is a true visionary with the right level of passion and commit to great work to get things done.
Akhil Bhaskar Head of Compute SA, APJ
Collaborator-stakeholder at Red Hat
Andy is one of those guys that you want to and need to know
His knowledge and capability around brand strategy, automation, enablement, and marketing operational aspects are matched only by his passion and enthusiasm. A trusted advisor and friend.
Performs no-conflict advisory services for analyst & investor groups; direct & via agency
Makes ad-hoc donations of design, software, or funding to causes, & open source projects
Got something exciting to say?Email me!
<style>
.face-container {
max-width: calc(100vw - 2rem);
max-height: calc(100vw - 2rem);
height: 18em;
margin:0 auto;
width: 18em;
border-radius: 50%;
display: block;
position: relative;
overflow: hidden;
clip-path: circle(18em at center);
}
.faces,.faces:before,.faces:after {
background-image: url(/img/sprites.jpg);
width: 700%;
height: 900%;
background-size: contain;
animation: stopall 30s steps(6, end) infinite;
display: block;
top: 0;
left: 0;
position: absolute;
}
/* saves a few mb instead of using a gif or video */
@keyframes stopall{
0%{transform:translate(0,0)}
11.111%{transform:translate(-85.7% , 0%)}
11.1111%{transform:translate(0% , -11.1111%)}
22.222%{transform:translate(-85.7% , -11.1111%)}
22.2222%{transform:translate(0 , -22.2222%)}
33.333%{transform:translate(-85.7% , -22.222%)}
33.3333%{transform:translate(0% , -33.333%)}
44.444%{transform:translate(-85.7% , -33.333%)}
44.4444%{transform:translate(0 ,-44.444%)}
55.555%{transform:translate(-85.7% ,-44.444%)}
55.5555%{transform:translate(0 ,-55.555%)}
66.666%{transform:translate(-85.7% ,-55.555%)}
66.6666%{transform:translate(0 ,-66.666%)}
77.777%{transform:translate(-85.7% , -66.666%)}
77.7777%{transform:translate(0 ,-77.777%)}
88.888%{transform:translate(-85.7% ,-77.777%)}
88.8888%{transform:translate(0 ,-88.888%)}
100%{transform:translate(-85.7% ,-88.888%)}
}
p {
padding: 0 1em;
}
footer p {
padding: 0;
}
.scrolled .cta {
animation: flash-button 0.6s ease forwards;
}
.mission a{position:relative; overflow:hidden;}
.mission a:hover:before,
.cta:before {
content: "";
display: block;
background-color: currentColor;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
@keyframes cta-flash {
0% {
transform: skew(-45deg) translateX(-150%);
}
50% {
opacity: 1;
}
100% {
transform: skew(-45deg) translateX(150%);
}
}
.mission a:hover{box-shadow: inset 0 0 0 .05em var(--brand); color: var(--fg)}
.mission a:hover:before{ background-color:white; animation: cta-flash 0.5s linear forwards 0s;}
.scrolled .cta:before {
animation: cta-flash 0.5s linear forwards 0.5s;
}
.cta {
overflow: hidden;
position: relative;
box-shadow: 0 0 0 0.1em;
border-radius: 0.5em;
padding: 1em;
display: inline-block;
margin: 3rem 0;
}
@media (prefers-color-scheme: light) {
.cta {
background-color: var(--tone-2);
box-shadow:inset 0 -4em 3em -1em var(--brand), 0 1em 1em var(--bg-1),0 1em 3em -1em var(--bg-1);
color: var(--bg) !important;
text-shadow: 0 .05em .2em var(--brand), 0 .05em 0 var(--brand);
}
.cta:hover{transition: all .3s ease; background-color: var(--fg); text-shadow: 0 .1em var(--fg-2);
box-shadow:inset 0 -4em 3em -1em var(--fg-2), 0 1em 1em var(--neutral),0 1em 3em -1em var(--neutral);
}
.cta:before{color: var(--bg) !important}
}
h3 {
font-size: 1.8em;
margin: 3em 0 1rem 0;
font-weight: 600;
color: var(--fg);
}
h2 {
font-size: 5em;
margin: 1em 0;
line-height: 0.9em;
}
h2.more{color: var(--bg-1)}
.more {
letter-spacing: -0.025em;
display: grid;
place-content: center;
position: relative;
margin: 0;
}
.scroll.more use {
opacity: 0;
color: var(--bg-1);
transition: all 0.85s cubic-bezier(0.3, 0.2, 0.1, 1.2);
transform: translate(0, -6px);
}
.scrolled.more use {
opacity: 1;
transform: none;
}
.scrolled use:nth-child(1n) {
transition-delay: 0.2s;
}
.scrolled use:nth-child(2n) {
transition-delay: 0.4s;
}
.scrolled use:nth-child(3n) {
transition-delay: 0.6s;
}
.scrolled use:nth-child(4n) {
transition-delay: 0.8s;
}
.scrolled use:nth-child(5n) {
transition-delay: 1s;
}
.scrolled use:nth-child(6n) {
transition-delay: 1s;
}
.scrolled use:nth-child(7n) {
transition-delay: 0.8s;
}
.scrolled use:nth-child(8n) {
transition-delay: 0.6s;
}
.scrolled use:nth-child(9n) {
transition-delay: 0.4s;
}
.scroll.map {
margin: 2em auto;
}
.scroll.map path {
stroke-dasharray: 344 344;
stroke-dashoffset: -344;
stroke-width: 3;
stroke-opacity: 0;
}
.scroll.map circle {
stroke-width: 5;
transition: all 1.5s ease 0.2s;
}
.scroll.map.scrolled circle {
stroke-width: 10;
fill: var(--tone-2);
}
.scroll.map.scrolled path {
stroke-width: 5;
stroke-dasharray: 344 344;
stroke-opacity: 1;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1.5s ease, stroke-width 1.5s ease;
}
p.scroll {
min-height: 10vh;
}
.scroll.fade {
opacity: 0;
transform: translate(0, 2rem);
}
h2.scroll span {
opacity: 0;
transform: scale(1.5);
}
h2.scrolled span {
opacity: 1;
transform: none;
transition: transform 1s ease, opacity .5s ease;
}
.scrolled.fade {
opacity: 1;
transform: none;
transition: transform 1s ease, opacity .5s ease;
}
.scroll.social-proof svg {
transform: translate(0, 2rem);
opacity: 0;
}
@keyframes flash-in {
0% {
opacity: 0;
transform: translate(0, 2rem);
}
10% {
opacity: 1;
fill: var(--brand);
color: var(--brand);
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.scrolled.social-proof svg {
opacity: 0;
animation: flash-in 0.7s ease forwards;
}
.scrolled.social-proof > svg:nth-child(1) {
animation-delay: 0.4s;
}
.scrolled.social-proof > svg:nth-child(2) {
animation-delay: 0.6s;
}
.scrolled.social-proof > svg:nth-child(3) {
animation-delay: 0.8s;
}
.scrolled.social-proof > svg:nth-child(4) {
animation-delay: 1s;
}
.scrolled.social-proof > svg:nth-child(5) {
animation-delay: 1.2s;
}
.scrolled.social-proof .no-orphan svg:nth-child(1) {
animation-delay: 1.4s;
}
.scrolled.social-proof .no-orphan svg:nth-child(2) {
animation-delay: 1.6s;
}
.scrolled.social-proof > svg:nth-child(8) {
animation-delay: 1.8s;
}
.nd {
margin-bottom: -4em;
z-index:9; position:relative;
}
.mission-values {
width: 100vw;
display: grid;
grid-template-columns: 40% 40%;
place-content: center;
}
.mission-values h3 {
color: var(--fg);
font-weight: 500;
letter-spacing: 0.05em;
font-size: 0.8em;
text-transform: uppercase;
}
.mission a {
display: inline-block;
margin-top: 2em;
background-color: var(--bg);
padding: 0.5em 1em;
border-radius: 0.5em;
}
.ltxt{text-align:left; margin: 0 auto; max-width:29em;}
.ltxt h3 {
padding-left: 1rem;
}
@media (max-width: 45em) {
.mission-values {
grid-template-columns: 1fr;
}
}
.awards, .leadership {
max-width: 100em;
margin: 0 auto;
}
.awards {
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
font-size: 0.66em;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mission i {
font-weight: 500;
font-size: 2em;
font-style: normal;
display: inline-block;
position: relative;
}
.mission dfn:hover {
color: var(--brand);
box-shadow: 0 0.1rem var(--tone-1);
}
abbr, acronym {
text-decoration: none;
}
/* aligning tooltip for mobile */
.awards > div:nth-child(1):hover::after,
.awards > div:nth-child(3):hover::after,
li:nth-child(1):hover::after,
li:nth-child(3):hover::after {
left: 0;
right: auto;
}
.awards > div[data-title] {
box-shadow: none;
position:relative;
}
.awards > div:hover::after {
text-transform: none;
letter-spacing: 0;
text-align:center;
top: 9em !important;
bottom: auto !important;
}
.awards > div:hover {
color: var(--brand);
z-index:99;
}
.leadership > div:hover::after {
text-transform: none;
text-align: center;
letter-spacing: 0;
top: 10em;
bottom: auto !important;
}
.social-proof {
margin: 4em 0;
margin-bottom: 3em;
color: var(--neutral);
}
.social-proof svg {
fill: currentColor;
opacity: 0.5;
height: 1.5em;
margin: 1em;
}
.social-proof svg:hover {
color: var(--fg);
opacity: 1;
}
@keyframes hereiam {
0% {
opacity: 0;
transform: translate(0, 0.5em);
}
}
.quote {
padding: 0 2rem;
color: var(--fg);
}
.quote > p {
padding: 0;
}
.quote > p:last-child {
display: inline;
}
.quote:before {
content: "“";
color: var(--neutral);
font-size: 1.5em;
display: block;
margin-bottom: -0.75em;
text-align: left;
padding-left: 0rem;
font-size: 2rem;
font-weight: 700;
}
.quote:after {
content: "”";
color: var(--neutral);
display: inline-block;
transform: translate(0, 0.5rem);
padding-right: 1rem;
}
.short-quote:before {
content: "“";
color: var(--neutral);
text-align: left;
font-size: 2rem;
font-weight: 700;
}
.short-quote:after {
content: "”";
color: var(--neutral);
font-size: 1.5rem;
text-align: right;
}
@media (max-width: 45em) {
.awards {
grid-template-columns: 1fr 1fr;
}
.award {
margin-bottom: 4em !important;
}
}
.club svg {
width: 5em;
height: 5em;
border-radius: 50%;
box-shadow: 0 0 0 0.12em;
margin-top: 2em;
}
.chairmans {
perspective: 10em;
}
.chairmans .box {
display: block;
width: 4em;
height: 4em;
margin: 2em auto;
transform-style: preserve-3d;
animation: spin 24s infinite linear;
}
.chairmans .box:before, .chairmans .box:after, .chairmans .box b, .chairmans .box b:before {
content: "";
display: block;
width: 4em;
height: 4em;
box-shadow: inset 0 0 0 0.1em;
position: absolute;
}
.chairmans .box:before {
transform: rotateY(90deg) translate3D(-2em, 0, 2em);
content: "";
}
.chairmans .box:after {
transform: rotateY(90deg) rotateZ(180deg) translate3D(2em, 0, -2em);
content: "";
}
.chairmans .box b {
transform-style: preserve-3d;
transform: translate3D(0, 0, 4em);
animation-delay: 1s;
}
.chairmans .box b:before {
transform: rotate(180deg) translate3D(0, 0, -4em);
animation-delay: 1s;
}
@keyframes spin {
0% {
transform: rotateY(0deg) translateZ(-2em);
}
100% {
transform: rotateY(360deg) translateZ(-2em);
}
}
.awards {
font-weight: 500;
color: #0c8090;
}
@media (prefers-color-scheme: dark) {
.awards {
color: white;
}
}
.globe {
animation: earth-move 25s linear infinite;
border-radius: 50%;
background-size: 150%;
transform: rotate(8deg);
margin: 0;
display: block;
margin: 1em auto;
box-shadow: inset 0 0 0 0.15em;
width: 6em;
background-repeat: repeat-x;
background-position: -150% 50%;
height: 6em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg ' xml:space='preserve' version='1.0' viewBox='1 7 105 52'%3E%3Cpath fill='%230c8090' d='m22 54.9-.3-10.7-3.7-3.7v-4.9l2.5-2.5 4-.1 4.2 4.2h2.1l2.6 2.5v2.6l-3.8 3.8v2.3l-3.9 3.4H25v1.5l.3 1.7-.2 2.8zm60.2-5.4h-2l-2.3 1v-5.1l3.2-2.9h4.1l2.1-1.8 3.3 3v3.9l-5.1 4.8zm-32.8 0v-1.3l-3.6-3.6v-5.1l-1.6-1.8-.3-2.5-2.1 1.6-4.3-4 .2-4.2 4.1-4.2h4.6l2 1.6 1-1 3.4-.1-.2-.5-2.2-.3-3-3H45l-2.2 2-2.5-3.7 7.3-7.6H55l2.2-2.2 18.1.1 1.7 1.7h8.3l3.2 3.5-3.5 3.5-2.4-2h-2.5l-.7 1h2.5l3.6 4-9 9.3 1.8 2-2.5 2.8-.8 4-3.6-3.2v-4.9l-1.8-1.6-1.8 1.7-.2 2.7-3.6-2.5v-3.3h-2.4l-4.3 4-4-3.7h-.6l4.8 4.8 1.9-1 .4 3.8-4 3.9v3l-2.1 2.2V48l-3.9 3.2zM8.2 26.3v-5l1.7-1.8-2.6-2.2-.2-.7-1.3-.7H5l-3 2.3L0 16l4-4.2h11.9l1.5-1.6h9l2.8 3.2-2 2.4 2.5 2.8-2.3 2.8h-3l-5.3 5.3h-4.4v2.8l2.3 3.4-2 .2zm22.3-11.4v-3.7l-.8-.2-1.2-.6 1.5-2h6.9l1.9 2v2.1L37 14.4h-3L32 16l-1.5-1Z'/%3E%3C/svg%3E%0A");
}
@media (prefers-color-scheme: dark) {
.globe {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg ' xml:space='preserve' version='1.0' viewBox='1 7 105 52'%3E%3Cpath fill='white' d='m22 54.9-.3-10.7-3.7-3.7v-4.9l2.5-2.5 4-.1 4.2 4.2h2.1l2.6 2.5v2.6l-3.8 3.8v2.3l-3.9 3.4H25v1.5l.3 1.7-.2 2.8zm60.2-5.4h-2l-2.3 1v-5.1l3.2-2.9h4.1l2.1-1.8 3.3 3v3.9l-5.1 4.8zm-32.8 0v-1.3l-3.6-3.6v-5.1l-1.6-1.8-.3-2.5-2.1 1.6-4.3-4 .2-4.2 4.1-4.2h4.6l2 1.6 1-1 3.4-.1-.2-.5-2.2-.3-3-3H45l-2.2 2-2.5-3.7 7.3-7.6H55l2.2-2.2 18.1.1 1.7 1.7h8.3l3.2 3.5-3.5 3.5-2.4-2h-2.5l-.7 1h2.5l3.6 4-9 9.3 1.8 2-2.5 2.8-.8 4-3.6-3.2v-4.9l-1.8-1.6-1.8 1.7-.2 2.7-3.6-2.5v-3.3h-2.4l-4.3 4-4-3.7h-.6l4.8 4.8 1.9-1 .4 3.8-4 3.9v3l-2.1 2.2V48l-3.9 3.2zM8.2 26.3v-5l1.7-1.8-2.6-2.2-.2-.7-1.3-.7H5l-3 2.3L0 16l4-4.2h11.9l1.5-1.6h9l2.8 3.2-2 2.4 2.5 2.8-2.3 2.8h-3l-5.3 5.3h-4.4v2.8l2.3 3.4-2 .2zm22.3-11.4v-3.7l-.8-.2-1.2-.6 1.5-2h6.9l1.9 2v2.1L37 14.4h-3L32 16l-1.5-1Z'/%3E%3C/svg%3E%0A");
}
}
@keyframes earth-move {
100% {
background-position: 150%, 50%;
}
}
.no-orphan {
white-space: nowrap;
}
img {
max-width: calc(100vw - 2rem);
}
.award > h4:after,
.award > h4:before {
position: absolute;
top: 0;
content: "";
z-index: -1;
opacity: 0.25;
display: block;
width: 3em;
height: 6em;
top: -6em;
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg ' viewBox='0 0 30 50'%3E%3Cpath fill='%23607080' d='M16.2 2c-2.2 2-5 5-2 7.8C16 8.8 17 5 16 2zm.8 6c4 0 5.6-2 7-5-3.2 0-6.4 1-7 5zm-6.3 8c3-3 2-6 .6-9-1.7 3-3 6-.6 9zM22 8c-3 0-8.2 1.8-7 4.3 1.6 1 5-1.3 7-4.3zM8 14c-.5 3-.6 5.8 2.6 7.2 1-3.2-.3-5.2-2.6-7.2zm4 5c3.7 0 5-3 6-6-3 1-6 2-6 6zm-6.4 1c.5 3 2.2 6.7 4.7 5.6C11 23 8.5 21 5.5 20zM16 18c-2.7 2-5.5 4.7-4 7.5 2-.7 4-3.5 4-7.5zm-5 13c0-4-3-5-6-6 1 3 2.4 6 6 6zm4.6-7c-2.6 2-5 4-3.3 7 2.5.2 3.5-4 3.3-7zm-9.2 7c1.4 3 4.2 5.5 6.7 4.5 0-3.3-3-4.5-6.3-4.5zm8.3 5c3.5-1 3-5 2-8-2 3-4.5 4.7-2 8zm-5.4 1c2 2 6.3 5 8 3-.2-3.2-4.8-4-8-3zm9.4-5c-1 3-2.7 6.5 1 8.3 1.6-1.5.7-5.3-1-8.3zM13 42c2.6 2 7.3 3.5 8 1.2-1.5-2.2-5-2.2-8-1.2zm13 2c1-4-2-5-5-7 .6 4 1.5 7 5 7zm-8.4 2c2.8 2 7.6 3.5 8.6.4-2-2.5-5.7-2.4-8.6-.4z' /%3E%3C/svg%3E");
}
.award > h4:before {
left: 20%;
}
.award > h4:after {
right: 20%;
transform: scaleX(-1);
}
.beast span {
font-weight: 900;
font-size: 2em;
width: 5em;
display: inline-block;
line-height: 0.9em;
margin-top: 0.5em;
}
.switch {
position: relative;
border-radius: 2em;
margin: 0em auto;
margin-bottom: 1em;
width: 4.5em;
height: 2em;
box-shadow: inset 0 0 0 0.2em;
}
.switch:after {
content: "";
display: block;
top: 0;
right: 0;
background-color: currentcolor;
position: absolute;
width: 2em;
height: 2em;
border-radius: 2em;
box-shadow: inset 0 0 0 0.16em;
transform: scale(0.7);
}
.award {
height: 10em;
position: relative;
margin: 0;
padding: 0;
}
.award h4 {
position: absolute;
bottom: 0em;
display: inline-block;
left: 0;
right: 0;
font-weight: 500;
}
.top-section {
position: relative;
margin-bottom: 2em;
}
.top-section .bokeh {
position: absolute;
top: -15em;
opacity: 0.45;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.bokeh {
height: 100vh;
width: 100vw;
filter: blur(3rem);
background-color: var(--bg);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: translateZ(0);
backface-visibility: hidden;
}
@media (prefers-color-scheme: light) {
.awards{gap:1.5rem}
.award{border-radius: 1em;box-shadow: 0 1em 6em -2.5em var(--neutral) !important; height:11em;; }
.award h4{bottom:1em; color: var(--fg)}
.top-section .bokeh {display:none;}
}
@media (max-width: 30em) {
.bokeh {
filter: blur(0.8em) !important;
}
}
.bokeh circle {
animation: rotate 10s linear infinite;
opacity: 0.55;
transform-origin: 50%;
}
.bokeh circle:nth-child(2n) {
transform-origin: 20% 110%;
animation-delay: -5s;
}
.bokeh circle:nth-child(3n) {
transform-origin: 70% 30%;
animation-delay: -2.5s;
}
.bokeh circle:nth-child(4n) {
transform-origin: 110% 70%;
animation-delay: -1.6666666667s;
}
.bokeh circle:nth-child(5n) {
transform-origin: 30% 40%;
}
.bokeh circle:nth-child(6n) {
transform-origin: -10% 80%;
animation-delay: -13s;
}
.bokeh circle:nth-child(7n) {
transform-origin: 70% -10%;
}
.bokeh circle:nth-child(8n) {
transform-origin: -30% 50%;
animation-delay: -4s;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.circles {
margin-bottom: -1em;
}
.circles > div {
height: 3em;
width: 3em;
background-color: rgba(30, 90, 210, 0.85);
mix-blend-mode: multiply;
color: #24a;
box-shadow: 0 0 0 0.05em #fff;
border-radius: 50%;
margin: 0 -0.85em;
display: inline-block;
}
.circles > div:last-child {
color: #c00;
background-color: rgba(210, 10, 5, 0.85);
}
.disclosures,
.mission-values {
position: relative;
padding: 1em 0 5em 0;
margin: 2em 0;
}
.disclosures svg,
.mission-values svg {
position: absolute;
top: 0;
width: 100%;
bottom: 0em;
height: 100%;
z-index: -1;
left: 0;
right: 0;
}
.disclosures div,
.mission-values div {
position: relative;
z-index: 9;
}
.disclosures svg,
.mission-values svg {
color: var(--bg-1);
opacity: 0.7;
}
.disclosures h3 {
grid-column-start: 1;
grid-column-end: 4;
}
.testimonials {
background-color: var(--bg);
background-image: radial-gradient(var(--bg-1) 0%, var(--bg) 50% );
background-position: 50% -15em;
background-size: 150% 30em;
background-repeat: no-repeat;
padding: 1em 1em;
margin-top: 4em;
position:relative;
}
@media (prefers-color-scheme: dark) {
.testimonials:before{content:""; position:absolute; top:-5em; left:0; right:0;display:block; background-image: radial-gradient(var(--bg-3) 0%, transparent 70% );
;background-position: 50% 1em;
background-size: 150% 10em;
background-repeat: no-repeat; z-index:-1;
height: 5em;}
}
@media (prefers-color-scheme: light) {
.disclosures div{padding:1em; background-color:white; border-radius: .6em; min-height:9em; box-shadow: 0 .3em 4em -2em var(--neutral)}
.disclosures svg, .mission-values svg {
color: var(--bg-1);
background-color: none;
}
.testimonials{ background-image: radial-gradient(var(--bg) 0%, var(--bg-2) 50% );
background-color:var(--bg-2)}
}
.testimonials cite span{
display: block; line-height:1em;
text-align:center;
align-items: center;
font-weight:500;
font-size: .75rem;
}
.testimonials .quote {
text-align: left;
max-width: 40em;
margin: 0 auto;
display: block;
margin-top: 2rem;
padding: 0;
}
.testimonials .quote p {
margin-bottom: 1rem;
}
cite {
font-style: normal;
margin-bottom: 1em;
display: block;
color: var(--neutral);
}
cite a {
font-weight: 500;
}
.testimonials svg {
max-width: 9em;
border-left:.1em solid; padding-left:1em;
height: 2.53em;
margin-left:1em;
vertical-align:middle;
display: inline-block;
color: var(--neutral);
}
.testimonials input {
opacity: 0;
position: absolute;
z-index: -1;
}
.testimonials label {
transition: all 0.35s ease-out;
vertical-align: center;
color: var(--fg);
filter: saturate(0.4);
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: inline-block;
position: relative;
height: 4rem;
width: 5rem;
margin-bottom: 1em;
text-align: center;
line-height: 4em;
white-space: nowrap;
user-select: none;
z-index: 2;
}
.testimonials label span {
transition: all 0.35s cubic-bezier(0.4, 0.2, 0.1, 1.2);
display: block;
height: 4rem;
width: 4rem;
z-index:-1;
border-radius: 50%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0.5em;
opacity: 0.3;
}
.testimonials input:checked + label {
color: transparent;
filter: none;
}
input:checked + label span {
transform: scale(1.2);
box-shadow: 0 0 0 0.2em var(--bg), 0 0 0 0.4em var(--brand);
opacity: 1;
}
:checked ~ div cite {
animation: whodey 0.5s cubic-bezier(0.3, 0.2, 0.1, 1.4) forwards;
}
:checked ~ div .quote{ animation: whodey 1.3s cubic-bezier(0.3, 0.2, 0.1, 1.4) forwards;}
@keyframes whodey {
0% {
opacity: 0;
transform: translate(0, 0.5em);
}
}
cite {
margin-top: 1rem;
}
@media (prefers-color-scheme: light) {
.testimonials label {
color: var(--fg);
}
.testimonials a{color: var(--fg)}
.testimonials .quote{background-color: var(--bg); padding:.5em 1em;
box-shadow: 0 .2em 4em -2em var(--neutral); border-radius: .6em;}
.testimonials label span {
box-shadow: 0 .2em .5em -.2em var(--bg),inset 0 0 .13em -.03em var(--neutral), inset 0 -.4em .5em -.24em var(--bg-2);
background-color: var(--bg-2);
opacity: 1;
background-blend-mode: screen;
}
.testimonials :checked + label span {
background-blend-mode: normal;
background-color: var(--light);
}
}
#ref-bruce + label span {
background-image: url(/img/headshots/bs.jpg);
}
#ref-tim + label span {
background-image: url(/img/headshots/tb.jpg);
}
#ref-james + label span {
background-image: url(/img/headshots/jl.jpg);
}
#ref-anh + label span {
background-image: url(/img/headshots/anh.jpg);
}
#ref-john + label span {
background-image: url(/img/headshots/jqa.jpg);
}
#ref-akhil + label span {
background-image: url(/img/headshots/ab.jpg);
}
#ref-kyrsten + label span {
background-image: url(/img/headshots/km.jpg);
}
#ref-paula + label span {
background-image: url(/img/headshots/pw.jpg);
}
.ref-bruce,.ref-tim, .ref-james, .ref-kyrsten, .ref-paula, .ref-akhil, .ref-john, .ref-anh {
display: none;
}
#ref-bruce:checked ~ .ref-bruce,
#ref-tim:checked ~ .ref-tim,
#ref-james:checked ~ .ref-james,
#ref-kyrsten:checked ~ .ref-kyrsten,
#ref-paula:checked ~ .ref-paula,
#ref-john:checked ~ .ref-john,
#ref-akhil:checked ~ .ref-akhil,
#ref-anh:checked ~ .ref-anh {
display: block;
}
.values ul {
list-style: none;
margin: 0;
margin-top: 1.5em;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 95em) {
.values ul {
grid-template-columns: 1fr 1fr;
gap: 2em;
}
}
@media (max-width: 95em) {
.mission i {
margin-top: 1.5em;
}
}
@media (max-width: 40em) {
.mission i {
margin-top: 0em;
}
}
.values li {
cursor: help;
width: 6.5em;
transition: background-color 0.25s ease;
height: 6.5em;
display: inline-block;
vertical-align: center;
display: grid;
place-content: center;
color: var(--fg);
background-color: var(--bg);
margin: 0 auto;
box-shadow: inset 0 0 0 0.1rem var(--bg);
text-align: center;
border-radius: 50%;
font-weight: 500;
}
.values li:hover {
background-color: var(--brand);
color: var(--bg);
}
.fbottom, .ll {
fill: none;
}
.fbottom {
stroke-width: inherit;
stroke: var(--neutral);
stroke-opacity: 0.3;
}
.ll {
stroke: var(--brand);
animation: loop 3s linear infinite;
stroke-width: 0.35;
stroke-dasharray: 0 28;
stroke-linecap: round;
}
.finny {
max-width: 20em;
stroke-width: 1.43;
animation: rot 36s linear infinite;
max-height: 50vh;
}
.shad {
animation: raise 3s linear infinite;
}
.shad.odd {
animation-delay: -1.5s;
}
@keyframes raise {
0%, 20% {
opacity: 1;
}
30%, 70% {
opacity: 0;
}
80%, 100% {
opacity: 1;
}
}
.ll {
animation-delay: -1.5s;
}
.finny {
perspective: 500px;
}
@keyframes loop {
0% {
stroke-dashoffset: 0.5;
stroke-dasharray: 3 24.5;
}
100% {
stroke-dasharray: 3 24.5;
stroke-dashoffset: 28;
}
}
.clip-shadow {
stroke-linecap: butt;
fill: none;
opacity: 0.3;
stroke-width: inherit;
stroke: url(#sgrad);
}
#sgrad stop {
stop-color: var(--bg-3);
}
@media (prefers-color-scheme: light) {
.values li {box-shadow:inset 0 0 .3em -.1em var(--neutral), inset 0 -2em 3em -1em var(--bg-2), 0 1.4em 1em -1em var(--bg)}
.values li:hover{box-shadow:none}
#sgrad stop {
stop-color: #2345;
}
.finny .ll{stroke:var(--bg);}
}
.disclosures {
gap: 1rem;
font-size: 1rem;
line-height: 1.3em;
padding: 0 2em;
margin: 0 auto;
max-width: 110em;
}
.disclosures h4 {
margin-bottom: 1em;
}
.disclosures div {
max-width: 24em;
place-self: center;
margin: 1em 0 6.75em 0;
text-align: left;
}
.disclosures, .leadership {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.leadership svg {
fill: var(--neutral);
max-height: 5rem;
max-width: 5rem;
}
.disclosures h4, .leadership h4 {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.04em; line-height:1em;
text-transform: uppercase;
}
.leadership {
font-size: 0.75em;
opacity: 0.5;
}
.leadership > div {
box-shadow: none;
margin-bottom: 1rem;
padding: 1em 1em; padding-bottom:2em;
transition: color .6s ease;
position:relative;
margin: 1em 1.5em;
border-radius: 1em;
box-shadow:inset 0 0 0 .05em rgba(0,0,0,.2),inset .4em .5em 2em var(--bg-3), inset -.4em -.5em 1em var(--bg-1);
}
.leadership > div:hover {
z-index:999;
background-color: var(--bg-3);
box-shadow: none;
color: var(--brand);
}
.leadership > div:hover svg {
fill: var(--brand);
color: var(--brand);
}
.leadership > div:hover [stroke="var(--neutral)"] {
stroke: var(--brand);
}
@media (max-width: 50em) {
.disclosures, .leadership {
grid-template-columns: 1fr;
}
.leadership div {
margin: 1em 2em;
}
.disclosures div {
grid-column-start: 1;
grid-column-end: 4;
margin: 0 0 4rem 0;
}
.disclosures h3 {
padding-bottom: 2em;
}
}
.sparkle use {
animation: sparkle 5s linear infinite;
}
.sparkle use:nth-child(1n) {
animation-delay: -0.5s;
}
.sparkle use:nth-child(2n) {
animation-delay: -1s;
}
.sparkle use:nth-child(3n) {
animation-delay: -1.5s;
}
.sparkle use:nth-child(4n) {
animation-delay: -2s;
}
.sparkle use:nth-child(5n) {
animation-delay: -2.5s;
}
.sparkle use:nth-child(6n) {
animation-delay: -3s;
}
.sparkle use:nth-child(7n) {
animation-delay: -3.5s;
}
.sparkle use:nth-child(8n) {
animation-delay: -4s;
}
.sparkle use:nth-child(9n) {
animation-delay: -4.5s;
}
.sparkle use:nth-child(10n) {
animation-delay: -5s;
}
@keyframes sparkle {
0%, 80%, 100% {
color: var(--brand);
fill-opacity: 0.25;
}
90% {
color: transparent;
}
}
#timezones {
padding: 3em 1em;
position: relative;
padding-bottom: 4em;
}
#timezones > * {
position: relative;
z-index: 3;
}
#timezones > svg {
position: absolute;
bottom: 0;
top: 0em;
left: 0;
max-height: 100%;
width: 100%;
right: 0;
z-index: 1;
}
.fixer [data-title]::after{width: 15rem}
#strategy {
position: relative;
}
.timezones {
fill: currentcolor;
max-width: 20em;
margin-bottom: 1em;
}
@media (prefers-color-scheme: light) {
.leadership > div {
box-shadow: 0 1em 3.5em -1.5em var(--neutral);
background-color: transparent;
}
.leadership > div:hover{ box-shadow: 0 0 1.5em 1em var(--bg-2);
}
}
@keyframes slidetime {
0% {
transform: translate(12px, 0px);
opacity: 0;
}
100% {
transform: translate(0px, 0px);
opacity: 1;
}
}
.scrolled.timezones [opacity=".5"] text {
animation: datein 1s cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
opacity: 0;
}
.scrolled.timezones [opacity=".5"] text:nth-child(1) {
animation-delay: 0.2s;
}
.scrolled.timezones [opacity=".5"] text:nth-child(2) {
animation-delay: 0.4s;
}
.scrolled.timezones [opacity=".5"] text:nth-child(3) {
animation-delay: 0.6s;
}
.scrolled.timezones [opacity=".5"] text:nth-child(4) {
animation-delay: 0.8s;
}
@keyframes datein {
0% {
transform: translate(1px, 0px);
opacity: 0;
}
100% {
transform: translate(0px, 0px);
opacity: 1;
}
}
#time-dot {
fill: var(--brand);
}
</style>