//
// BBB Content
//
body{
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
font-family: 'Lato', sans-serif;
}
h1, h3{
color: #a2bd30;
}
h2{
text-transform: uppercase;
}
$base-spacing-unit: 24px;
$half-spacing-unit: $base-spacing-unit;
$color-alpha: #a2bd30;
$base-font-size: 16px !default;
/////
//
// Mixin - Font Size
//
// Create a fully formed type style (sizing and vertical rhythm) by passing in a
// single value, e.g.:
//
// @include font-size(10px);
// @include font-size(24px, false); // exclude line-height
// @include font-size(24px, true, true) // apply the !important flag
//
/////
@mixin font-size($font-size, $line-height:true, $important:false){
@if $important == true {
font-size:($font-size / $base-font-size)*1rem !important;
@if $line-height == true {
line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size) !important;
}
} @else {
font-size:($font-size / $base-font-size)*1rem;
@if $line-height == true {
line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
}
}
}
/////
//
// Mixin - Simple min-width media query
//
// @include min-width($base-spacing-unit * 40) {
//
// }
//
/////
@mixin min-width($min-width) {
@media screen and (min-width: ($min-width)) {
@content
}
}
/////
//
// Flex Mixin - Provide support all the way back to IE8
//
/////
@mixin flex($flex-grow, $flex-shrink, $flex-basis) {
display: inline-block;
width: $flex-basis;
@supports(display: flex) {
flex: $flex-grow $flex-shrink $flex-basis;
width: auto;
}
}
/////
//
// Base Grid
// The base grid consists of a progressively enhanced grid utilising
// CSS Grid where supported, falling back to flexbox where CSS Grid
// support is missing and eventually falling back to inline-block when
// flexbox isn't supported.
//
/////
$base-grid-breakpoint-one: $base-spacing-unit * 30;
$base-grid-breakpoint-two: $base-spacing-unit * 40;
.grid {
font-size: 0;
display: inline-block;
margin-left: -($half-spacing-unit);
margin-right: -($half-spacing-unit);
&--full {
margin-left: 0;
margin-right: 0;
}
@supports(display: flex) {
display: flex;
flex-wrap: wrap;
}
@supports(display: grid) {
display: grid;
grid-gap: $base-spacing-unit;
margin-left: 0;
margin-right: 0;
&.grid--full {
grid-gap: 0;
}
&.grid--ends {
grid-gap: $base-spacing-unit 0;
}
&.grid--sides {
grid-gap: 0 $base-spacing-unit;
}
&.grid--halves {
@include min-width($base-grid-breakpoint-one) {
grid-template-columns: repeat(2, 1fr);
}
}
&.grid--thirds {
@include min-width($base-grid-breakpoint-one) {
grid-template-columns: repeat(2, 1fr);
}
@include min-width($base-grid-breakpoint-two) {
grid-template-columns: repeat(3, 1fr);
}
}
&.grid--quarters {
@include min-width($base-grid-breakpoint-one) {
grid-template-columns: repeat(2, 1fr);
}
@include min-width($base-grid-breakpoint-two) {
grid-template-columns: repeat(4, 1fr);
}
}
}
&__item {
@include font-size($base-font-size, false, false);
display: inline-block;
padding-left: $half-spacing-unit;
padding-right: $half-spacing-unit;
margin-bottom: $base-spacing-unit;
.grid--sides & {
margin-bottom: 0;
}
.grid--full & {
padding-left: 0;
padding-right: 0;
}
@include flex(0, 0, 100%);
@supports(display: grid) {
padding-left: 0;
padding-right: 0;
margin-bottom: 0 !important;
flex: none !important;
}
.grid--halves & {
@include min-width($base-grid-breakpoint-one) {
@include flex(0, 0, 50%);
}
}
.grid--thirds & {
@include min-width($base-grid-breakpoint-one) {
@include flex(0, 0, 50%);
}
@include min-width($base-grid-breakpoint-two) {
@include flex(0, 0, 33.333%);
}
}
.grid--quarters & {
@include min-width($base-grid-breakpoint-one) {
@include flex(0, 0, 50%);
}
@include min-width($base-grid-breakpoint-two) {
@include flex(0, 0, 25%);
}
}
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.content-container--large {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
.bbb {
position: relative;
display: flex;
flex-direction: column;
// justify-content: center;
height: 100%;
padding: $base-spacing-unit;
&__content {
display: none;
}
&__split {
display: none;
}
&__controls {
position: absolute;
bottom: 0;
left: 0;
padding: $base-spacing-unit;
width: 100%;
}
&__control-button {
position: relative;
text-indent: -9999px;
display: inline-block;
width: $base-spacing-unit * 2;
height: $base-spacing-unit * 2;
border: 1px solid #a2bd30;
border-radius: 50%;
margin-right: $half-spacing-unit / 2;
svg {
width: 80%;
height: 80%;
fill: #E5E6E7;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:hover {
border: 1px solid $color-alpha;
svg {
fill: $color-alpha;
}
}
&--next {
float: right;
svg {
transform: translate(-50%, -50%) rotate(180deg);
}
}
}
}
//
// Brand Builder Animation - All in one
//
$active-color: #6C6E70;
$highlight-color: darken($active-color, 15%);
#bbb {
.line,
.line-main {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.line-main {
animation: draw 3s forwards;
}
.line-pulse {
animation: pulse 1s forwards;
}
.middle-circle {
transform: scale(0);
animation: grow 500ms 750ms forwards;
transform-origin: 398.5px;
}
.middle-line {
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: draw 1s 2s forwards;
}
.outer-left,
.outer-right,
.outer-bottom {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: draw 1s 1s forwards;
}
.number-circle {
stroke-dasharray: 600;
stroke-dashoffset: 600;
}
.number {
opacity: 0;
}
.arrow-line {
stroke-dasharray: 750;
stroke-dashoffset: 750;
}
.arrow-head {
opacity: 0;
}
// .center-dial-container {
// transform: rotate(0);
// transform-origin: 398.5px;
// animation: rotate 2s 2.5s infinite cubic-bezier(.75,.01,.25,1.01);
// }
.center-dial {
transform: rotate(120deg);
transform-origin: 398.5px;
}
.outer-pinkcircle {
stroke-dasharray: 1800;
stroke-dashoffset: 1800;
transform-origin: 398.5px;
transform: rotate(90deg) translate(3px, -3px);
pointer-events: none;
}
.outer-segment {
transition: stroke 500ms;
cursor: pointer;
&.is-active {
stroke: $active-color;
}
&:hover {
stroke: $highlight-color;
}
}
// Initial State
&.bbb-init {
.outer-pinkcircle {
animation: outerCircleOne 500ms 2s forwards;
}
#discover .number-circle {
animation: draw 3s 1.75s forwards;
}
#discover .number {
animation: fadeIn 500ms 2s forwards;
}
#discover .arrow-line {
animation: draw 500ms 2s forwards;
}
#discover .arrow-head {
animation: fadeIn 500ms 2.5s forwards;
}
}
// From Discover to Create
&.bbb-discover-create {
.outer-pinkcircle {
animation: discoverCreate_outerCircle 500ms forwards;
}
.center-dial {
animation: discoverCreate_rotate 500ms forwards;
}
#discover .arrow-line {
animation: eraseArrow 500ms forwards;
}
#discover .number-circle {
animation: eraseCircle 500ms forwards;
}
#discover .arrow-head,
#discover .number {
animation: fadeIn 500ms reverse;
}
#create .number-circle {
animation: draw 3s forwards;
}
#create .number {
animation: fadeIn 500ms forwards;
}
#create .arrow-line {
animation: draw 500ms forwards;
}
#create .arrow-head {
animation: fadeIn 500ms forwards;
}
}
// From Discover to Deliver
&.bbb-discover-deliver {
.outer-pinkcircle {
animation: discoverDeliver_outerCircle 500ms forwards;
}
.center-dial {
animation: discoverDeliver_rotate 500ms forwards;
}
#discover .arrow-line {
animation: eraseArrow 500ms forwards;
}
#discover .number-circle {
animation: eraseCircle 500ms forwards;
}
#discover .arrow-head,
#discover .number {
animation: fadeIn 500ms reverse;
}
#deliver .number-circle {
animation: draw 3s forwards;
}
#deliver .number {
animation: fadeIn 500ms forwards;
}
#deliver .arrow-line {
animation: draw 500ms forwards;
}
#deliver .arrow-head {
animation: fadeIn 500ms forwards;
}
}
// From Create to Discover
&.bbb-create-discover {
.outer-pinkcircle {
animation: createDiscover_outerCircle 500ms forwards;
}
.center-dial {
animation: createDiscover_rotate 500ms forwards;
}
#create .arrow-line {
animation: eraseArrow 500ms forwards;
}
#create .number-circle {
animation: eraseCircle 500ms forwards;
}
#create .arrow-head,
#create .number {
animation: fadeIn 500ms reverse;
}
#discover .number-circle {
animation: draw 3s forwards;
}
#discover .number {
animation: fadeIn 500ms forwards;
}
#discover .arrow-line {
animation: draw 500ms forwards;
}
#discover .arrow-head {
animation: fadeIn 500ms forwards;
}
}
// From Create to Deliver
&.bbb-create-deliver {
.outer-pinkcircle {
animation: createDeliver_outerCircle 500ms forwards;
}
.center-dial {
animation: createDeliver_rotate 500ms forwards;
}
#create .arrow-line {
animation: eraseArrow 500ms forwards;
}
#create .number-circle {
animation: eraseCircle 500ms forwards;
}
#create .arrow-head,
#create .number {
animation: fadeIn 500ms reverse;
}
#deliver .number-circle {
animation: draw 3s forwards;
}
#deliver .number {
animation: fadeIn 500ms forwards;
}
#deliver .arrow-line {
animation: draw 500ms forwards;
}
#deliver .arrow-head {
animation: fadeIn 500ms forwards;
}
}
// From Deliver to Create
&.bbb-deliver-create {
.outer-pinkcircle {
animation: deliverCreate_outerCircle 500ms forwards;
}
.center-dial {
animation: deliverCreate_rotate 500ms forwards;
}
#deliver .arrow-line {
animation: eraseArrow 500ms forwards;
}
#deliver .number-circle {
animation: eraseCircle 500ms forwards;
}
#deliver .arrow-head,
#deliver .number {
animation: fadeIn 500ms reverse;
}
#create .number-circle {
animation: draw 3s forwards;
}
#create .number {
animation: fadeIn 500ms forwards;
}
#create .arrow-line {
animation: draw 500ms forwards;
}
#create .arrow-head {
animation: fadeIn 500ms forwards;
}
}
// From Deliver to Discover
&.bbb-deliver-discover {
.outer-pinkcircle {
animation: deliverDiscover_outerCircle 500ms forwards;
}
.center-dial {
animation: deliverDiscover_rotate 500ms forwards;
}
#deliver .arrow-line {
animation: eraseArrow 500ms forwards;
}
#deliver .number-circle {
animation: eraseCircle 500ms forwards;
}
#deliver .arrow-head,
#deliver .number {
animation: fadeIn 500ms reverse;
}
#discover .number-circle {
animation: draw 3s forwards;
}
#discover .number {
animation: fadeIn 500ms forwards;
}
#discover .arrow-line {
animation: draw 500ms forwards;
}
#discover .arrow-head {
animation: fadeIn 500ms forwards;
}
}
}
@keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
@keyframes grow {
100% {
transform: scale(1);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes pulse {
50% {
stroke: #D8D803;
}
}
@keyframes rotate {
100% {
transform: rotate(720deg);
}
}
@keyframes eraseArrow {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 750;
}
}
@keyframes eraseCircle {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 600;
}
}
@keyframes outerCircleOne {
100% {
stroke-dashoffset: 1205;
}
}
// From Discover to Create
@keyframes discoverCreate_outerCircle {
0% {
stroke-dashoffset: 1205;
}
100% {
stroke-dashoffset: 617;
}
}
@keyframes discoverCreate_rotate {
0% {
transform: rotate(120deg);
}
100% {
transform: rotate(240deg);
}
}
// From Discover to Deliver
@keyframes discoverDeliver_outerCircle {
0% {
stroke-dashoffset: 1205;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes discoverDeliver_rotate {
0% {
transform: rotate(120deg);
}
100% {
transform: rotate(360deg);
}
}
// From Create to Discover
@keyframes createDiscover_outerCircle {
0% {
stroke-dashoffset: 617;
}
100% {
stroke-dashoffset: 1205;
}
}
@keyframes createDiscover_rotate {
0% {
transform: rotate(240deg);
}
100% {
transform: rotate(120deg);
}
}
// From Create to Deliver
@keyframes createDeliver_outerCircle {
0% {
stroke-dashoffset: 617;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes createDeliver_rotate {
0% {
transform: rotate(240deg);
}
100% {
transform: rotate(360deg);
}
}
// From Deliver to Create
@keyframes deliverCreate_outerCircle {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 617;
}
}
@keyframes deliverCreate_rotate {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(240deg);
}
}
// From Deliver to Discover
@keyframes deliverDiscover_outerCircle {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 1205;
}
}
@keyframes deliverDiscover_rotate {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(120deg);
}
}
!
