/* variables */ // colours $white: rgba(254, 255, 250, 1); $grey: rgba(220, 231, 235, 1); $lightgrey: rgba(220, 231, 235, 0.25); $blue: rgba(34, 190, 198, 1); $black: rgba(48, 69, 92, 0.8); // fonts $sans: 'Ubuntu', sans-serif; $heading: 'Source Sans Pro', sans-serif; .transition { transition: all 0.25s ease-in-out; } .flipIn { animation: flipdown 0.5s ease both; } .no-select { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html { width: 100%; height: 100%; perspective: 900; overflow-y: scroll; background-color: $grey; font-family: $sans; font-weight: 300; color: $black; } body { min-height: 0; display: inline-block; position: relative; left: 50%; margin: 90px 0; transform: translate(-50%, 0); box-shadow: 0 10px 0 0 $blue inset; background-color: $white; max-width: 450px; padding: 30px; // responsive @media ( max-width: 550px) { box-sizing: border-box; transform: translate( 0, 0); max-width: 100%; min-height: 100%; margin: 0; left: 0; } } h1, h2 { color: $blue; font-family: $heading; font-weight: 700; } h1 { text-transform: uppercase; font-size: 2.5em; @extend .flipIn; } h2 { font-size: 1.5em; line-height: 1; display: block; background-color: $white; padding: 0.5em 0.5em; margin: 0; cursor: pointer; @extend .no-select; } .small { position: relative; color: $black; font-family: $heading; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.5em; font-weight: 400; top: -1em; } p { margin-top: 0; max-height: 0; opacity: 0; transform: translate( 0, 50%); } ul { list-style: none; perspective: 900; padding: 0; margin: 2.5em 0 0; li { position: relative; padding: 0; margin: 0; border-top: 1px dotted $grey; @extend .flipIn; &:nth-of-type(1) { animation-delay: 0.5s; } &:nth-of-type(2) { animation-delay: 0.75s; } &:nth-of-type(3) { animation-delay: 1.0s; } &:last-of-type { padding-bottom: 0; } i { position: absolute; transform: translate( -6px, 0); margin-top: 1.5em; right: 0.75em; &:before, &:after { content: ""; @extend .transition; position: absolute; background-color: $blue; width: 3px; height: 9px; } &:before { transform: translate( -2px, 0) rotate( 45deg); } &:after { transform: translate( 2px, 0) rotate( -45deg) } } // the radio input input[type=radio] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; // radio input:checked &:checked { & ~ h2 { background-color: $lightgrey; } & ~ p { color: $black; font-size: 1em; line-height: 26px; letter-spacing: 1px; position: relative; overflow: hidden; max-height: 800px; height: auto; @extend .transition; opacity: 1; transform: translate( 0, 0); margin-top: 1.2em; z-index: 2; } & ~ i { &:before { transform: translate( 2px, 0) rotate( 45deg); } &:after { transform: translate( -2px, 0) rotate( -45deg); } } } } } } @keyframes flipdown { 0% { opacity: 0; transform-origin: top center; transform: rotateX(-90deg); } 5% { opacity: 1; } 80% { transform: rotateX(8deg); } 83% { transform: rotateX(6deg); } 92% { transform: rotateX(-3deg); } 100% { transform-origin: top center; transform: rotateX(0deg); } }