*:is(#hero,#cannon,#who,#testimonials){position:relative}*:is(#hero,#cannon,#who,#testimonials):before{content:"";position:absolute;inset:0;z-index:-20}*:is(#hero,#cannon,#who,#testimonials):after{content:"";position:absolute;inset:0;z-index:-10}#hero{margin-top:-10rem;padding-top:11rem;padding-bottom:6rem;overflow:hidden;&:before { background:url("/images/themes/swoosh/swoosh-hero.svg") no-repeat bottom center;} &:after {background:url("/images/themes/swoosh/mask-hero.svg") no-repeat bottom center;}}#logos{}#cannon{padding-top:10rem;z-index:10}#cannon:before{background:url(/images/themes/swoosh/swoosh-cannon.svg)no-repeat 50% 0}#cannon:after{background:url(/images/themes/swoosh/mask-cannon.svg)no-repeat 50% 0}#cannon:before,#cannon:after{bottom:-100rem;overflow:visible}#crm{margin-top:6rem;z-index:20}#who{padding-top:16rem}#who:before{background:url(/images/themes/swoosh/swoosh-team.svg)no-repeat 50% 100%;bottom:12%;top:30%;background-size:200%}#who:after{background:url(/images/themes/swoosh/swoosh-who.svg)no-repeat 50% 100%;background-size:calc(var(--safe-width) * 3);top:-150%;bottom:36%}#testimonials:before{background:url(/images/themes/swoosh/swoosh-testimonials.svg)no-repeat 50% 0;background-size:200rem;top:-90rem;bottom:-200rem}#goals{}body#home{overflow-x:hidden}main{grid-row-gap:8rem;section layout-block { grid-row-gap: var(--space-xl); } section layout-block { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: var(--gap); grid-auto-flow: row; }}#hero{layout-block { grid-column: main-start / safe-end; grid-template-columns: 1fr 1fr; grid-template-areas: "header figure" "article figure" "cta figure"; header h1, article { background: var(--white-tint); border-radius: .5rem; backdrop-filter: blur(3px); } article { padding: 2rem 1rem; } .cta {max-width: var(--column-width); align-self: end;} }}#logos{}#cannon{layout-block { grid-template-areas: ". header header" "tabs tabs tabs"; .tabs { grid-area: tabs; transition: all 1s ease-in-out; min-height: max-content; } } article { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "figure figure subhead" "figure figure bullets" "figure figure cta"; h3 { grid-area: subhead; align-self: end; font-size: 2.5rem; margin-block: 0; } ul { grid-area: bullets; } }}#crm{layout-block { grid-template-areas: ". header header" "article figure figure"; }}#who{layout-block { grid-template-areas: "header header ." "article article aside" "article article cta" "figure figure figure"; }}#pricing{layout-block { grid-template-areas: "header header figure" "article article figure" ". cta figure"; grid-row-gap: 0; }}#hypergrowth{layout-block { grid-template-areas: "aside header header" "aside article article" "aside cta cta"; grid-row-gap: 1.5rem; }}#testimonials{}#goals{layout-block { grid-template-areas: "header header ." "tab-1 tab-2 tab-3" "article article article"; label[for="tab-sales"] { grid-area: tab-1; } label[for="tab-growth"] { grid-area: tab-2; } label[for="tab-revenue"] { grid-area: tab-3; } article { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; grid-template-areas: "figure list"; ul { grid-area: list; align-self: center; } } }}#resources{layout-block { padding-top: 4.5rem; padding-bottom: -2rem; gap: var(--gap); grid-template-columns: repeat(3, 1fr); grid-template-areas: "header header header" "item1 item2 item3"; } a-resource:nth-of-type(1) {grid-area: item1;} a-resource:nth-of-type(2) {grid-area: item2;} a-resource:nth-of-type(3) {grid-area: item3;}}#epilogue{layout-block { grid-template-areas: ". header header" ". cta ."; }}#hero{h1 { margin-bottom: 3rem; margin-block: 0.5em; } p { font-size: 1.5em; font-weight: 300; line-height: 1.5em; margin-block: 0; } figure { z-index: -15; place-self: center; margin: 0; }}#logos{opacity:.7;img { opacity: 0.5; } @media (hover: hover) { img:hover {opacity: 1;} }}#cannon{layout-block { } header { color: var(--white-hint); text-align: right; h2 { color: var(--white-tint); font-size: 3.2rem; em { color: white; font-style: normal; } } p {font-size: 1.5rem; margin-bottom: 0;} } .tabs { display: grid; grid-template-columns: repeat(7, 1fr); grid-column-gap: 2px; grid-row-gap: 1rem; } .tabs label { display: block; cursor: pointer; padding: 10px; background-color: var(--black-hint); color: var(--white-tint); text-align: center; text-transform: uppercase; transition: all 190ms; &:first-of-type {border-radius: 5rem 0 0 5rem;} &:last-of-type {border-radius: 0 5rem 5rem 0;} } .tabs label:hover { background-color: var(--white-hint); box-shadow: 0 -8px 12px -4px var(--black-drop) inset; } .tabs label input[type="radio"] { display: none; } .tabs article { display: none; padding: 1rem 4rem 1rem 1rem; color: white; border-radius: 0 0 2rem 2rem; } .tabs label:has(input[type="radio"]:checked) + article { display: grid; } .tabs label:has(input[type="radio"]:checked) { background-color: var(--white-tint); color: var(--dark); z-index: 1; box-shadow: 0 0 16px -2px var(--white-drop); } .tabs label:has(input[type="radio"]:checked) + article:first-of-type { display: grid; } figure { margin-top: 0; height: fit-content; align-self: end; } ul { list-style: initial; font-size: 1.2rem; li {margin-bottom: 1rem;} } article { perspective: 1200px; } article figure.screenshot { transition: 500ms; img { transition: 300ms; } } article:hover figure.screenshot { box-shadow: initial; transform: translateZ(0); transition: none; img { transition: 100ms; transform: translateZ(10px); } }}#crm{position:relative;header { color: var(--dark); box-shadow: -2.25rem 0 0 var(--white-hint), 2.25rem 0 0 var(--white-hint); background-color: var(--white-hint); } article { align-self: center; padding: 3rem 0 3rem 3rem; margin: 0 -5rem 0 -3rem; border-radius: 1rem; background-color: var(--white-tint); box-shadow: 0 0 2rem var(--black-drop); } #termynal-code { font-family: monospace; background-color: black; color: white; padding: 10px; border: 2px solid #333; border-radius: 6px; width: 100%; height: 400px; overflow-y: scroll; box-sizing: border-box; margin: 0; margin-top: -6px; position: relative; z-index: 1; font-size: 0.75rem; line-height: 1rem; p { display: inline; } pre { margin: 0; } .purple { color: #A074C4; } .blue { color: #55B5DA; } .orange { color: #E6CD69; } .red { color: #CC3F45; } .green { color: #9CC655; } }}#who{figure { transform: translateY(-10rem); width: auto; pointer-events: none; img {width: 100%;} } h2 { color: var(--dark); mix-blend-mode: hard-light; font-size: 3rem; } article { color: white; } article { font-size: 1.5em; line-height: 1.5em; } .cta { display: block; &:after { left: 100%; } }}#pricing{background:linear-gradient(100deg,#D5EDF4 1.42%,#BCE2EF 41.41%,#3DA5BE 73.08%,#21759A 82.45%,#1F688C 88.42%,#185070 94.16%,#294868 98.6%,#4C375A 102.77%,#464068 104.14%);header {padding-top: 4rem;} article {padding-bottom: 2rem;} h2 {margin-bottom: .5rem; color: var(--dark); } h3 {margin-bottom: .25rem;} figure { align-self: end; line-height: 0; } .cta {margin-bottom: -1.5rem;}}#hypergrowth{margin-top:10rem;margin-bottom:8rem;--bg:white;layout-block { padding: 3rem; border-radius: 2rem; position: relative; background: conic-gradient(from 178deg at -1% 58.15%, var(--cos-gradient-stops)); border: .5rem solid white; box-shadow: 0 2px 8px #0002, 0 8px 12px #0001; } layout-block:before { position: absolute; inset: 1rem; grid-column: 2/5; margin-left: -8rem; grid-row: span 2; content: ""; border-radius: .75rem; background: var(--bg); z-index: 10; clip-path: polygon( 0% 0%, 0% 3%, 7% 50%, 0% 97%, 0% 100%, 100% 100%, 100% 0% ); } layout-block > * { z-index: 20; } header > p { margin-bottom: 0; font-weight: 200; } header { h2 { color: var(--dark); font-weight: 700; font-size: 2.75rem; line-height: 3rem; margin-bottom: 0; } } article { width: 95%; font-size: 1rem; line-height: 1.5rem; ul { list-style: initial; li { margin-bottom: 1rem; } } } aside { color: white; padding-right: 2rem; align-self: center; h3 { font-size: 2rem; text-transform: uppercase; } } .cta { align-self: end; }}#testimonials{margin-top:18rem;margin-bottom:18rem;layout-block { position: relative; } blockquote { font-size: 1.2rem; } p.attribution { margin-top: 0.75em; margin-bottom: 0.75em; full-name::after { content: ","; } job-title { font-weight: 600; font-size: 0.9rem; } } figure { text-align: right; opacity: 0.5; img {display: initial; max-height: 4rem;} } figure:has(img.logo[alt="Central"]) { margin-top: -0.75em; }}#goals{layout-block { width: calc(var(--safe-width) - var(--gutter) - var(--gutter)); padding: calc(var(--gutter) * 2); background: #fcfaf9; border-radius: 1rem; box-shadow: 0 12px 32px -8px var(--dark); } h2 { color: var(--dark); box-shadow: var(--side-shade-right); text-transform: uppercase; font-size: 3rem; } input[type="radio"] { display: none; } label { display: inline-block; padding: 0.75rem 1.5rem; cursor: pointer; border-radius: 0.01px; background-color: #eceae9; font-weight: 500; font-size: 1.25rem; line-height: 1.5rem; } label:hover { background-color: #e0e0e0; } #tab-sales:checked ~ label[for="tab-sales"], #tab-growth:checked ~ label[for="tab-growth"], #tab-revenue:checked ~ label[for="tab-revenue"], .tab-content { background-color: white; box-shadow: 0 0 0 1.5rem white, 0 1rem 2rem 1.8rem #66554411; } .tab-content { display: none; } #tab-sales:checked ~ label[for="tab-sales"] + .tab-content, #tab-growth:checked ~ label[for="tab-growth"] + .tab-content, #tab-revenue:checked ~ label[for="tab-revenue"] + .tab-content { display: grid; } label[for="tab-sales"] + .tab-content { order: 1; } label[for="tab-growth"] + .tab-content { order: 2; } label[for="tab-revenue"] + .tab-content { order: 3; }}#resources{background:#fff;padding-top:3rem;padding-bottom:9rem;h2 { color: var(--dark); font-size: 3.5rem; } a-resource { a:has(h3) {text-decoration: none; color: var(--dark);} figure {margin: 0;} h3 {font-size: 1rem; font-weight: 300; text-transform: uppercase;} } a-resource[upcoming] { background: conic-gradient(from 277deg at -130% 49%, var(--cos-gradient-stops)); color: var(--dark); } a-resource[topic="sales"] { background: conic-gradient( from 101deg at 1% 28%, var(--cos-gradient-stops) ); color: white; } a-resource[topic="growth"] { background: conic-gradient( from 277deg at 110% 42%, var(--cos-gradient-stops) ); color: white; } a-resource[topic="revenue"] { background: conic-gradient( from -81deg at 30% 43%, var(--cos-gradient-stops) ); color: white; } a-resource { border-radius: 0.5rem; }}#epilogue{margin:0 0 10rem;p {font-size: 1.4rem;}}@media only screen and (max-width:1440px){}@media only screen and (max-width:1105px){#hero{padding-top:12rem;& layout-block { grid-template-columns: 1fr 2fr; grid-template-areas: "header header" "article figure" "cta figure"; }}#logos{& layout-block { grid-column: logo-center / safe-end; grid-template-columns:1fr; logo-stack { h2 { text-align: center; margin-bottom: 1rem;} ul { gap: 0.5rem 2rem; justify-self: stretch; justify-items: space-between;} img { max-width: 6rem; height: auto; } } }}#cannon{&:before { background:linear-gradient(to right,var(--midnight-blue) 0%,var(--viking-blue) 100%); bottom:0; } .tabs { display:block; label {display:none;} article { display:grid; padding:0; grid-template-areas:"figure figure subhead" "figure figure bullets" "figure figure cta"; gap:1rem; margin-bottom:8rem; &:nth-of-type(odd) { grid-template-areas:"subhead figure figure" "bullets figure figure" "cta figure figure"; } ul {padding:0;} h3 { position:relative; } h3:before { content:"01"; position:relative; display:block; float:left; background:#8E2C56; border-radius:100%; padding:1.5rem 0.75rem 0.5rem; margin-top:-1.5rem; margin-right:0.5rem; margin-left:-5rem; margin-bottom:-1rem; aspect-ratio:1/1; } &:nth-of-type(01) h3:before {content:"01";background:#8E2C56;} &:nth-of-type(02) h3:before {content:"02";background:#464068;} &:nth-of-type(03) h3:before {content:"03";background:#185070;} &:nth-of-type(04) h3:before {content:"04";background:#3DA5BE;} &:nth-of-type(05) h3:before {content:"05";background:#F7BE33;} &:nth-of-type(06) h3:before {content:"06";background:#DE7324;} &:nth-of-type(07) h3:before {content:"07";background:#E9571F;} &:nth-of-type(08) h3:before {content:"08";background:#DF353C;} } }}#crm{layout-block { grid-template-areas: "header header header" "article figure figure"; }}#who{padding-top:8rem}#testimonials{blockquote { margin: 1rem 0 0;}}}@media only screen and (max-width:804px){main{grid-row-gap:3rem}layout-block{margin-top:0}#hero{padding-top:10rem;margin-bottom:8rem;& layout-block { grid-column: main; grid-template-columns: 1fr; grid-template-areas: "header" "article" "figure" "cta"; h1 { font-size: 3rem; margin: 0; } p { margin: 0.5rem 0 0; } .cta { position: relative; max-width: 100%; } } figure { }}#hero:before{}#cannon{.tabs { figure {margin-left: -3.5rem;} article, article:nth-of-type(odd) { grid-template-areas: "subhead subhead subhead" "figure figure figure" "bullets bullets bullets" "cta cta cta"; .cta { margin-right: 3.5rem; } } }}#crm{layout-block { grid-template-areas: "header header header" "figure figure figure" "article article article"; }}#who{&:after { background-size:600vw; bottom:5%; } &:before { background-size:200vw; bottom:0; } layout-block { grid-column:logo-center/main-end; grid-template-areas:"header header header" "aside aside aside" "cta cta cta" "article article article" "figure figure figure"; } article {padding:0;} aside p {margin:0 0 1rem;} blockquote {margin:0; } p.attribution {margin:0;} figure { transform:translateY(-1rem); }}#pricing{layout-block {grid-column: logo-center / main-end; grid-template-areas: "header header header" "article article figure" "cta cta figure";}}#testimonials{layout-block { grid-column: logo-center / main-end; grid-template-columns: 1fr; grid-auto-rows: auto; }}}@media only screen and (max-width:600px){#resources{padding:2rem 0;background:conic-gradient(from 3deg at var(--half-logo) 12%,white,#ACD0D9,var(--dark));header:before {display:none;} layout-block { padding:0; grid-template-columns:1fr; grid-auto-rows:auto; grid-template-areas:"header" "item1" "item2" "item3"; a-resource { padding-right:3.5rem; } }}#hypergrowth{layout-block { grid-column: logo-center / main-end; grid-template-areas: "aside aside aside" "header header header" "article article article" "cta cta cta"; &:before { grid-column: unset; margin-left: unset; grid-row: unset; z-index: 10; clip-path: polygon(0 5.5rem, 50% 7rem, 100% 5.5rem, 100% 100%, 0% 100%); position: absolute; } } aside { padding: 0; min-height: 5rem; h3 { text-align: center; margin: 0; } }}#epilogue{layout-block { grid-column: logo-center / main-end; grid-template-areas: "header header header" "cta cta cta"; }}}.chip{background-color:#f0f0f0;color:#333;padding:5px 10px;border-radius:20px;display:inline-flex;align-items:center;font-weight:500;margin-bottom:15px;box-shadow:0 2px 5px rgba(0,0,0,.1);max-width:fit-content}.chip-icon{width:20px;height:auto;margin-right:5px}