/**!
* Not meant as a reference for good CSS practices. The goal of Hugo in Action
* is for us to understand Hugo. The HTML/CSS/JS code has been intentionally
* made complicated so that we can simplify the Go HTML Template pieces of Hugo.
* There are intentional cases where CSS selectors are used instead of class
* parameters for targeting. Many of the targeting done in CSS is more
* specific than it should be. Some of the decisions taken are sub-optimal.
* You are free to use this code on your website but beware of caveats and
* do understand that support may be lacking where expected.
**/
:root {
--red: 79;
--green: 70;
--blue: 229;
-moz-tab-size: 4;
tab-size: 4;
}
html {
-webkit-text-size-adjust: 100%;
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
line-height: 1.5;
background: url(image/background.svg) 0 0/cover;
min-height: 100vh;
width: 100vw;
scroll-snap-type: y proximity;
max-height: 100vh;
}
body {
margin: 0 auto;
font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
font-family: inherit;
line-height: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100vw;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
strong {
font-weight: bolder;
}
code,
pre {
font-size: 1em;
font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
}
small {
font-size: 80%;
}
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
padding: 0;
line-height: inherit;
color: inherit;
}
button,
select {
text-transform: none;
}
[type=button],
[type=submit],
button {
-webkit-appearance: button;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
summary {
display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h6,
hr,
p,
pre {
margin: 0;
}
button {
background-color: transparent;
background-image: none;
}
button:focus {
outline: dotted 1px;
outline: -webkit-focus-ring-color auto 5px;
}
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
*,
:after,
:before {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
img {
border-style: solid;
}
textarea {
resize: vertical;
}
input::placeholder,
textarea::placeholder {
color: #6b7280;
opacity: 1;
}
[role=button],
button {
cursor: pointer;
}
h1,
h2,
h3,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
iframe,
img,
svg,
video {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
[multiple],
[type=email],
[type=search],
[type=text],
[type=time],
[type=url],
select,
textarea {
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.5rem;
}
[multiple]:focus,
[type=email]:focus,
[type=search]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
select:focus,
textarea:focus {
outline: transparent solid 2px;
outline-offset: 2px;
box-shadow: 0 0 0 0 #fff,0 0 0 calc(1px + 0px) #2563eb,0 0 transparent;
border-color: #2563eb;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right .5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
color-adjust: exact;
}
[multiple] {
background-image: none;
background-position: 0 0;
background-repeat: unset;
background-size: initial;
padding-right: .75rem;
color-adjust: unset;
}
[type=checkbox],
[type=radio] {
appearance: none;
padding: 0;
color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #2563eb;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
}
[type=checkbox] {
border-radius: 0;
}
[type=radio] {
border-radius: 100%;
}
[type=checkbox]:focus,
[type=radio]:focus {
outline: transparent solid 2px;
outline-offset: 2px;
box-shadow: 0 0 0 2px #fff,0 0 0 calc(2px + 2px) #2563eb,0 0 transparent;
}
[type=checkbox]:checked,
[type=radio]:checked {
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: 50%;
background-repeat: no-repeat;
}
[type=checkbox]:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
[type=radio]:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
[type=checkbox]:checked:focus,
[type=checkbox]:checked:hover,
[type=radio]:checked:focus,
[type=radio]:checked:hover {
border-color: transparent;
background-color: currentColor;
}
[type=checkbox]:indeterminate {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: 50%;
background-repeat: no-repeat;
}
[type=checkbox]:indeterminate:focus,
[type=checkbox]:indeterminate:hover {
border-color: transparent;
background-color: currentColor;
}
[type=file] {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type=file]:focus {
outline: -webkit-focus-ring-color auto 1px;
}
body > * {
width: 100%;
margin-left: 1.25rem;
margin-right: 1.25rem;
}
@media (min-width:640px) {
body>*,
header {
max-width: 640px;
}
}
@media (min-width:768px) {
body > * {
max-width: 768px;
margin-left: 1.75rem;
margin-right: 1.75rem;
}
}
@media (min-width:1024px) {
body > * {
max-width: 1024px;
margin-left: 2.5rem;
margin-right: 2.5rem;
}
}
.btn {
background-color: #fff;
border-radius: .75rem;
border: 2px solid rgb(var(--red), var(--green), var(--blue));
display: inline-block;
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
margin-left: auto;
margin-right: auto;
padding: .5rem 1rem;
color: rgb(var(--red), var(--green), var(--blue));
text-decoration: none;
transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
.btn:hover,
.home #description a:hover,
.home #products>a:hover,
.home #store>a:hover,
body.page form button:hover {
background-color: rgb(var(--red), var(--green), var(--blue));
color: #fff;
text-decoration: none;
}
.btn:focus,
.home #description a:focus,
.home #products>a:focus,
.home #store>a:focus,
.home section:first-of-type>a:focus,
body.page form button:focus {
box-shadow: 0 0 0 0 #fff,0 0 0 calc(4px + 0px) rgba(59,130,246,.5),0 0 transparent;
}
.icon-blog {
background: url('data:image/svg+xml;utf8,') 50% no-repeat;
}
.icon-facebook {
background: url('data:image/svg+xml;utf8,') 50% no-repeat;
}
.icon-rss {
background: url('data:image/svg+xml;utf8,') 50% no-repeat;
}
.icon-twitter {
background: url('data:image/svg+xml;utf8,') 50% no-repeat;
}
.icon-email {
background: url('data:image/svg+xml;utf8,') 50% no-repeat;
}
.icon-news {
background: url('data:image/svg+xml;utf8,') 50% no-repeat;
}
.icon-about {
background: url('data:image/svg+xml;utf8,') 50% no-repeat;
}
.icon-contact {
background: url('data:image/svg+xml;utf8,') 50% no-repeat;
}
.icon-editor {
background: url("data:image/svg+xml;utf8,") 50% no-repeat;
}
.icon-store {
background: url("data:image/svg+xml;utf8,") 50% no-repeat;
}
.icon-reader {
background: url("data:image/svg+xml;utf8,") 50% no-repeat;
}
.posts {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-around;
margin-left: auto;
margin-right: auto;
}
html body .post a {
text-decoration: none;
}
.post {
background-color: #fff;
border: 2px solid transparent;
cursor: pointer;
overflow: hidden;
padding: .5rem;
transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
.post:hover {
border-color: rgba(209,213,219,.4);
border-radius: .5rem;
box-shadow: 0 0 transparent,0 0 transparent,0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .3s;
filter: contrast(1.5) saturate(1.5) drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06));
transform: scale(1.02);
z-index: 9;
position: relative;
}
.post:hover a:before {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 2000px hsla(0,0%,100%,.3);
}
.post img {
display: inline-block;
height: 16rem;
object-fit: cover;
width: 100%;
}
.post div {
font-weight: 700;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
color: rgb(var(--red), var(--green), var(--blue));
}
.post div:hover {
text-decoration: underline;
}
.post h2 {
font-weight: 700;
font-size: 1.25rem;
line-height: 1.75rem;
padding-bottom: .75rem;
padding-top: 2rem;
color: #1f2937;
}
.post article {
color: #4b5563;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text {
color: #4b5563;
}
header {
width: 100%;
background-color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 1rem .5rem .5rem;
justify-content: stretch;
}
header:before {
content: " ";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'%3E%3Cpattern id='diagonalHatch' patternUnits='userSpaceOnUse' width='4' height='4'%3E%3Cpath d='M-1,1 l2,-2 M0, 4 l4, -4 M3, 5 l2, -2' style='stroke:rgba(255,255,255,.3); stroke-width:1.5'/%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23diagonalHatch)'/%3E%3C/svg%3E%0A");
border-bottom-width: 1px;
border-top-width: 1px;
background-color: rgb(var(--red), var(--green), var(--blue));
border-color: rgb(var(--red), var(--green), var(--blue));
height: .5rem;
position: absolute;
top: 0;
right: 0;
left: 0;
}
@media (min-width:768px) {
.btn {
font-size: 1.125rem;
line-height: 1.75rem;
padding: .75rem 1.25rem;
}
.post {
padding: .75rem;
width: 50%;
}
.post article,
.text {
font-size: .875rem;
line-height: 1.25rem;
}
header {
max-width: 768px;
padding-bottom: 1rem;
padding-top: 1.5rem;
}
}
@media (min-width:1024px) {
.btn {
padding: 1rem 1.5rem;
}
.post {
padding: 1rem;
width: 33.333333%;
}
.post article,
.text {
font-size: 1rem;
line-height: 1.5rem;
}
header {
max-width: 1024px;
padding: 2.5rem .25rem 2rem;
}
header nav li a:hover {
text-decoration: underline;
}
}
header > a > img {
padding-right: .75rem;
width: 3rem;
align-self: center;
}
header > a {
display: flex;
align-items: center;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.75rem;
white-space: nowrap;
flex: 1;
}
header nav li {
border-color: #374151;
cursor: pointer;
display: block;
text-align: center;
width: 100%;
}
header nav li a {
border-top-width: 1px;
border-color: #d1d5db;
display: inline-block;
padding-top: .5rem;
padding-bottom: .5rem;
width: 100%;
}
header nav ul {
background-color: #fff;
border-radius: .375rem;
display: none;
box-shadow: 0 0 transparent,0 0 transparent,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
z-index: 20;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
.relative,
header nav ul>li {
position: relative;
}
header nav ul > li ul {
display: block;
font-size: .875rem;
line-height: 1.25rem;
position: static;
left: 0;
top: 3rem;
z-index: 10;
}
header nav ul > li ul li:first-of-type a {
border-top-width: 0;
}
header nav ul > li:hover ul {
visibility: visible;
}
header .hamburger {
border-color: #6b7280;
border-radius: .125rem;
border-width: 1px;
padding: .5rem 1rem;
}
header nav:hover .hamburger {
background-color: rgba(var(--red), var(--green), var(--blue), .3);
border-color: rgba(var(--red), var(--green), var(--blue), .7);
}
.block,
header nav:hover>ul {
display: block;
}
@media (max-width:1023px) {
header nav:hover > ul ul {
background-color: #fff;
position: static;
}
header nav:hover > ul {
padding-top: .25rem;
position: absolute;
right: .75rem;
left: .75rem;
}
header nav:hover > ul li {
background-color: #fff;
}
header nav:hover > ul li > a:hover {
background-color: rgba(var(--red), var(--green), var(--blue), .3);
border-color: rgba(var(--red), var(--green), var(--blue), .7);
}
header nav:hover > ul > li:hover + li > a {
border-color: rgba(var(--red), var(--green), var(--blue), .7);
}
header nav:hover > ul > li:hover:last-of-type > a {
border-bottom-width: 1px;
}
}
.page header ~ main {
margin-top: 0;
margin-bottom: 0;
}
.page main {
width: 100%;
background-color: #fff;
border-radius: .5rem;
margin: 4rem;
padding: 1.25rem;
box-shadow: 0 0 transparent,0 0 transparent,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
}
.page main h1 {
font-size: 1.5rem;
line-height: 2rem;
padding-top: .75rem;
padding-bottom: .75rem;
text-align: center;
margin-left: auto;
margin-right: auto;
position: relative;
width: fit-content;
width: -moz-fit-content;
}
.home h1:after,
.page main h1:after {
content: "";
height: 2px;
width: 50%;
background-color: rgb(var(--red), var(--green), var(--blue));
position: absolute;
bottom: .5rem;
left: 25%;
}
.page main h2 {
font-weight: 300;
font-size: 1.25rem;
line-height: 1.75rem;
padding-top: 1.5rem;
padding-bottom: .5rem;
color: #4b5563;
}
.home #description h1 strong,
.home section:first-of-type h2 strong,
.page main h2 strong {
font-weight: 700;
color: rgb(var(--red), var(--green), var(--blue));
text-shadow: 0 0 1px rgba(0,0,0,20%),0 0 1px rgba(1,0,5,10%);
}
.page main h3 {
font-weight: 300;
font-size: 1.25rem;
line-height: 1.75rem;
padding-top: 1rem;
padding-bottom: .5rem;
}
.page main h4 {
font-weight: 700;
font-size: 1.125rem;
line-height: 1.75rem;
padding-top: .75rem;
padding-bottom: .5rem;
}
.page main h5 {
font-size: 1.125rem;
line-height: 1.75rem;
padding-top: .5rem;
padding-bottom: .25rem;
}
.page main h6 {
font-weight: 700;
padding-top: .25rem;
padding-bottom: .25rem;
}
.page main p {
padding-top: .75rem;
padding-bottom: 1.25rem;
}
.page main ol,
.page main ul {
padding: 1.25rem 1.25rem 1.25rem 2rem;
}
.page main ol {
list-style: upper-roman;
}
.page main ol ol {
list-style: lower-roman;
}
.page main ol ol ol {
list-style: lower-alpha;
}
.page main ul {
list-style-type: "→ ";
}
.page main ul ul {
list-style: disc;
}
.page main ul ul ul {
list-style: circle;
}
.page main blockquote {
background-color: #f3f4f6;
border-radius: .25rem;
padding: .75rem;
box-shadow: 0 0 transparent,0 0 transparent,inset 0 2px 4px 0 rgba(0,0,0,.06);
}
.page main code {
background-color: #272822;
border-radius: .25rem;
padding: .25rem;
color: #f3f4f6;
}
.page main pre {
display: block;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.home #intro nav li a:hover,
.page main a,
footer a:hover {
color: rgb(var(--red), var(--green), var(--blue));
text-decoration: underline;
}
.page main table {
border-color: #e5e7eb;
border-width: 2px;
}
.page main td,
.page main th {
padding: .5rem .75rem;
}
.page main thead {
background-color: #e5e7eb;
}
.home #menu h1:after,
.home #products h1:after,
.home #store h1:after,
.home #testimonials h1:after,
.page main tr:nth-child(2) {
background-color: #f3f4f6;
}
.page main dl {
border-color: #f3f4f6;
border-width: 2px;
}
.page main dl dt {
border-left-width: 8px;
font-weight: 700;
padding-left: 1rem;
}
.page main dl dd {
padding-left: 6rem;
}
@media (min-width:640px) {
.page main {
max-width: 640px;
}
}
@media (min-width:768px) {
.page main h1 {
font-size: 1.875rem;
line-height: 2.25rem;
}
.page main {
max-width: 768px;
}
}
@media (min-width:1024px) {
header nav li a {
border-top-width: 0;
width: auto;
}
header nav ul > li ul {
background-color: #e5e7eb;
display: none;
position: absolute;
top: 2rem;
}
header nav ul > li:hover ul {
display: block;
visibility: visible;
}
header nav:hover > ul {
display: inline-block;
}
header nav li {
display: inline-block;
padding-left: 1rem;
padding-right: 1rem;
width: auto;
}
header nav ul {
background-color: transparent;
display: inline-block;
box-shadow: 0 0 transparent,0 0 transparent,0 0 transparent;
width: auto;
}
header .hamburger {
display: none;
}
.page main h1 {
font-size: 2.25rem;
line-height: 2.5rem;
padding-top: 2.5rem;
}
.page main h2,
.page main h3 {
font-size: 1.5rem;
line-height: 2rem;
}
.page main {
max-width: 1024px;
}
}
.home section:not(:last-of-type) {
border-bottom: 1px solid #e5e7eb;
}
.home footer,
.home header,
.home section {
scroll-snap-align: start;
}
.home header + section {
scroll-snap-align: none;
}
.home #intro nav {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
.home #intro nav li {
display: inline-block;
font-size: .75rem;
line-height: 1rem;
}
.home #intro nav li a {
display: inline-block;
padding: .75rem;
}
.home #intro {
padding-bottom: 2.5rem;
position: relative;
}
.home h1 {
font-size: 1.5rem;
line-height: 2rem;
padding-top: .75rem;
padding-bottom: .75rem;
margin-left: auto;
margin-right: auto;
position: relative;
width: fit-content;
width: -moz-fit-content;
}
.home section:first-of-type:not(:last-of-type):after {
content: "↓";
border-radius: 9999px;
border: 2px dashed rgb(var(--red), var(--green), var(--blue));
height: 2.5rem;
font-size: 1.125rem;
line-height: 2.5rem;
opacity: .8;
color: rgb(var(--red), var(--green), var(--blue));
width: 2.5rem;
margin: 50px auto 20px;
}
.home section:first-of-type:not(:last-of-type) {
min-height: 100vh;
}
.home header + section:first-of-type:not(:last-of-type) {
min-height: calc(100vh - 40px - 1.5rem);
}
.home section:first-of-type {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
flex-grow: 1;
text-align: center;
}
.home section:first-of-type img {
background-color: #fff;
margin-left: auto;
margin-right: auto;
width: 3rem;
}
.home section:first-of-type h1 {
background-color: #fff;
font-size: 1.875rem;
line-height: 2.25rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.hidden,
.home #testimonials li .twitter-tweet *,
.home section:first-of-type h1:after {
display: none;
}
.home section:first-of-type h2 {
background-color: #fff;
font-weight: 300;
color: #4b5563;
}
.home section:first-of-type > a {
border-radius: .75rem;
border: 2px solid rgb(var(--red), var(--green), var(--blue));
display: inline-block;
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
margin-left: auto;
margin-right: auto;
padding: .5rem 1rem;
text-decoration: none;
transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
background-color: rgb(var(--red), var(--green), var(--blue));
margin-top: 2.5rem;
color: #fff;
}
.home section:first-of-type > a:hover {
background-color: rgb(var(--red), var(--green), var(--blue));
color: #fff;
text-decoration: none;
filter: brightness(.75) contrast(1.25);
}
@media (min-width:640px) {
.home section:first-of-type img {
width: 3.5rem;
}
.home section:first-of-type h1 {
font-size: 3rem;
line-height: 1;
}
}
.home #description {
background-color: #fff;
min-height: 100vh;
padding-left: 1.75rem;
padding-right: 1.75rem;
padding-bottom: 2.5rem;
}
.home #description p {
padding-top: .5rem;
padding-bottom: .5rem;
color: #000;
}
.home #description a {
background-color: #fff;
border-radius: .75rem;
border: 2px solid rgb(var(--red), var(--green), var(--blue));
display: inline-block;
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
margin-left: auto;
margin-right: auto;
padding: .5rem 1rem;
color: rgb(var(--red), var(--green), var(--blue));
text-decoration: none;
transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
margin-bottom: 2.5rem;
}
.home #description h1 {
margin-top: 2.5rem;
text-align: center;
}
.home #description h2 {
font-weight: 700;
font-size: 1.125rem;
line-height: 1.75rem;
padding-top: .75rem;
padding-bottom: .75rem;
margin-top: 5rem;
}
.home #description hr {
clear: both;
scroll-snap-align: start;
}
.home #description img {
border-radius: .125rem;
float: left;
margin-top: 1.25rem;
margin-bottom: 2.5rem;
box-shadow: 0 0 transparent,0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
width: 100%;
}
.float-right,
.home #description hr:nth-of-type(odd)~p img {
float: right;
}
.home #menu {
background-color: rgba(var(--red), var(--green), var(--blue), .7);
margin: 0;
max-width: none;
padding: 1.75rem 1.25rem;
color: #fff;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
}
.home #menu h1 {
text-align: center;
text-shadow: 0 1px 2px rgba(30,29,39,19%),1px 2px 4px rgba(54,64,147,18%);
}
.home #menu h2 {
font-weight: 300;
opacity: .9;
color: #f3f4f6;
text-shadow: 1px 1px 3px rgba(36,37,47,25%);
}
.home #menu ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
width: 100%;
}
.home #menu li {
border-color: #c7d2fe;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 1.25rem;
line-height: 1.75rem;
padding: 1.25rem;
text-align: center;
transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
.home #menu li a {
display: block;
padding-bottom: .25rem;
padding-top: .5rem;
text-shadow: 0 1px 2px rgba(30,29,39,19%),1px 2px 4px rgba(54,64,147,18%);
}
.home #menu li p {
opacity: .9;
color: #f3f4f6;
text-shadow: 1px 1px 3px rgba(36,37,47,25%);
}
.home #menu i {
background-color: #f3f4f6;
border-radius: 9999px;
display: block;
height: 4rem;
margin: 1rem auto;
width: 4rem;
filter: drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06));
background-size: 30px;
}
.home #blog {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.home #blog .posts {
margin-top: 6rem;
margin-bottom: 6rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.home #blog h1 {
background-color: #fff;
text-align: center;
}
.home #testimonials {
display: flex;
flex-direction: column;
align-items: stretch;
padding-top: 1.75rem;
padding-bottom: 1.75rem;
background-color: rgba(var(--red), var(--green), var(--blue), .7);
margin: 0;
max-width: none;
color: #fff;
width: 100vw;
}
.home #testimonials h1 {
flex-grow: 0;
text-align: center;
text-shadow: 0 1px 2px rgba(30,29,39,19%),1px 2px 4px rgba(54,64,147,18%);
}
.home #testimonials > div {
display: flex;
align-items: center;
flex-grow: 1;
margin-left: auto;
margin-right: auto;
overflow: scroll;
scroll-snap-type: x mandatory;
width: 100vw;
}
.home #testimonials ol {
display: flex;
padding: .75rem;
width: fit-content;
}
.home #store ul li:hover .price,
.home #store ul li:hover h2,
.home #testimonials ol:hover li {
color: #000;
}
.home #testimonials li {
scroll-snap-align: center;
background-color: #fff;
border-radius: .125rem;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 1.125rem;
line-height: 1.75rem;
padding: 1.5rem .75rem;
box-shadow: 0 0 transparent,0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
text-align: center;
color: #1f2937;
width: calc(100vw - 4rem);
margin: .5rem;
}
.home #testimonials li:hover {
box-shadow: 0 0 transparent,0 0 transparent,0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
}
.home #testimonials li > div {
margin-top: 2rem;
}
.home #testimonials li h2 {
display: block;
font-weight: 700;
font-size: 1rem;
line-height: 1.5rem;
text-align: left;
}
.home #testimonials li h2:before {
content: "-";
display: inline-block;
text-align: left;
width: .75rem;
}
.home #testimonials li h3 {
font-size: 1rem;
line-height: 1.5rem;
padding-left: .75rem;
padding-right: .75rem;
text-align: left;
}
.home #testimonials li .twitter-tweet {
font-size: 0;
visibility: hidden;
}
.home #testimonials li .twitter-tweet p {
display: inline-block;
font-size: 1.125rem;
line-height: 1.75rem;
visibility: visible;
}
.home #testimonials li .twitter-tweet p:before,
.home #testimonials li > p:first-of-type:not(:empty):before {
content: " ";
background-position-y: top;
float: left;
height: 100%;
opacity: .5;
width: 1.5rem;
background: url('data:image/svg+xml;utf8,') top no-repeat;
margin-top: -10px;
margin-bottom: 10px;
min-height: 30px;
}
@media (min-width:640px) {
.home #testimonials li .twitter-tweet p {
font-size: 1.25rem;
line-height: 1.75rem;
}
.home #testimonials > div {
max-width: 640px;
width: 612px;
}
}
.home #testimonials li:first-child {
margin-left: 1rem;
}
@media (min-width:768px) {
.home header + section:first-of-type:not(:last-of-type) {
min-height: calc(100vh - 40px - 2.5rem);
}
.home section:first-of-type img {
width: 4rem;
}
.home section:first-of-type h1 {
font-size: 3.75rem;
line-height: 1;
}
.home section:first-of-type > a {
font-size: 1.125rem;
line-height: 1.75rem;
padding: .75rem 1.25rem;
margin-top: 5rem;
}
.home #description p {
font-size: .875rem;
line-height: 1.25rem;
margin-left: 1rem;
margin-right: 1rem;
padding-top: .75rem;
padding-bottom: .75rem;
}
.home #description a {
font-size: 1.125rem;
line-height: 1.75rem;
padding: .75rem 1.25rem;
}
.home #description hr~h2,
.home #description hr~p {
margin-left: 2rem;
margin-right: 2rem;
}
.home #description img {
border-radius: .375rem;
margin: 2.5rem 1rem;
max-width: 24rem;
}
.home #description h2 {
margin-left: 1rem;
margin-right: 1rem;
margin-top: .75rem;
}
.home #menu li p {
font-size: .875rem;
line-height: 1.25rem;
}
.home #testimonials li .twitter-tweet p {
font-size: 1.5rem;
line-height: 2rem;
}
.home #testimonials > div {
max-width: 768px;
width: 740px;
}
}
@media (min-width:1024px) {
.home #intro nav li {
font-size: .875rem;
line-height: 1.25rem;
}
.home header + section:first-of-type:not(:last-of-type) {
min-height: calc(100vh - 46px - 4.5rem);
}
.home section:first-of-type h1 {
font-size: 4.5rem;
line-height: 1;
}
.home section:first-of-type h2 {
font-size: 1.5rem;
line-height: 2rem;
}
.home #description a,
.home section:first-of-type>a {
padding: 1rem 1.5rem;
}
.home #description p {
font-size: 1rem;
line-height: 1.5rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.home #description h1 {
margin-top: 5rem;
}
.home #description h2 {
font-size: 1.5rem;
line-height: 2rem;
padding-top: 2.5rem;
}
.home #description img {
margin-top: 5rem;
margin-bottom: 5rem;
max-width: 36rem;
}
.home #menu h2 {
font-size: 1.125rem;
line-height: 1.75rem;
}
.home #menu li p {
font-size: 1rem;
line-height: 1.5rem;
}
.home #testimonials > div {
max-width: 1024px;
width: 968px;
}
}
@media (min-width:640px) {
.home #testimonials ol {
padding: 1.25rem;
}
.home #testimonials li {
border-radius: .375rem;
font-size: 1.25rem;
line-height: 1.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
margin: .75rem;
width: 530px;
}
}
.home #products,
.home #store {
background-color: rgba(var(--red), var(--green), var(--blue), .7);
margin: 0;
max-width: none;
padding: 1.75rem 1.25rem;
color: #fff;
width: 100vw;
}
.home #products h1,
.home #store h1 {
opacity: .9;
text-align: center;
color: #f3f4f6;
text-shadow: 1px 1px 3px rgba(36,37,47,25%);
}
.home #products>a,
.home #store>a {
background-color: #fff;
border-radius: .75rem;
border: 2px solid rgb(var(--red), var(--green), var(--blue));
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
padding: .5rem 1rem;
color: rgb(var(--red), var(--green), var(--blue));
text-decoration: none;
transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
width: max-content;
}
.home #products>a:before,
.home #store>a:before {
content: "↓ ";
}
.home #products table {
background-color: #fff;
border-radius: .375rem;
margin: 1.5rem auto;
overflow: hidden;
box-shadow: 0 0 transparent,0 0 transparent,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
color: #000;
}
.home #products table thead {
border-bottom: 4px solid #fff;
background-color: rgba(var(--red), var(--green), var(--blue), .1);
border-color: rgba(var(--red), var(--green), var(--blue), .3);
font-weight: 700;
}
.home #products table thead td {
padding: 1.25rem;
}
.home #products table thead td:nth-of-type(3):before {
content: "";
}
.home #products table td:first-child {
font-weight: 700;
}
.home #products table td {
padding: 1rem;
}
.home #products table td:nth-of-type(3):before {
content: "$ ";
}
.home #products table tr:nth-child(2n) {
background-color: rgba(var(--red), var(--green), var(--blue), .1);
}
.home #products table tr:hover {
background-color: rgba(var(--red), var(--green), var(--blue), .3);
}
.home #store ul {
display: grid;
align-items: stretch;
justify-content: space-around;
margin: 4rem auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
gap: 1rem;
grid-template-columns: repeat(1,minmax(0,1fr));
}
.home #store ul h2 {
font-weight: 700;
font-size: 1.5rem;
line-height: 2rem;
padding: 2rem 1rem .75rem;
color: #1f2937;
}
.home #store ul li {
background-color: #f3f4f6;
border-radius: .375rem;
display: inline-block;
display: flex;
flex-direction: column;
place-content: stretch;
overflow: hidden;
position: relative;
box-shadow: 0 0 transparent,0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
width: 100%;
}
.home #store ul li:hover {
background-color: #fff;
box-shadow: 0 0 transparent,0 0 transparent,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
transform: scale(1.02);
}
.home #store ul li:hover img {
filter: saturate(2);
}
.home #store ul li > a {
background-color: transparent;
border-radius: 0;
cursor: pointer;
display: inline-block;
overflow: hidden;
box-shadow: 0 0 transparent,0 0 transparent,0 0 transparent;
width: 100%;
transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .3s;
}
.home #store ul li > a img {
background-color: #f3f4f6;
height: 12rem;
object-fit: cover;
width: 100%;
box-shadow: inset 0 0 240px rgba(var(--red), var(--green), var(--blue), .6);
object-position: bottom center;
}
.home #store ul li > a .price {
font-weight: 700;
font-size: 1.875rem;
line-height: 2.25rem;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 2rem;
color: #1f2937;
}
.home #store ul li > a .price:first-letter {
display: inline-block;
font-weight: 600;
padding-right: .25rem;
color: #374151;
}
.home #store ul li > a .rating {
background-color: rgba(var(--red), var(--green), var(--blue), .7);
border-radius: 9999px;
font-weight: 700;
height: 2rem;
font-size: .875rem;
margin-top: 2rem;
position: absolute;
right: 2rem;
top: 12rem;
box-shadow: 0 0 transparent,0 0 transparent,inset 0 2px 4px 0 rgba(0,0,0,.06);
text-align: center;
color: #fff;
width: 5rem;
text-shadow: 0 0 1px rgba(0,0,0,20%),0 0 1px rgba(1,0,5,10%);
line-height: 2rem!important;
}
@media (min-width:640px) {
.home #intro nav {
max-width: 640px;
}
}
@media (min-width:768px) {
.home #testimonials ol {
padding: 1.75rem;
}
.home #testimonials li {
border-radius: .5rem;
font-size: 1.5rem;
line-height: 2rem;
padding: 2.5rem 1.75rem;
margin: 1rem;
width: 622px;
}
.home #products>a,
.home #store>a {
font-size: 1.125rem;
line-height: 1.75rem;
padding: .75rem 1.25rem;
}
.home #store ul {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.home #intro nav {
max-width: 768px;
}
.home h1 {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
@media (min-width:1024px) {
.home #testimonials ol {
padding: 2.5rem;
}
.home #testimonials li {
padding: 5rem 2.5rem;
margin: 1.25rem;
width: 850px;
}
.home #products>a,
.home #store>a {
padding: 1rem 1.5rem;
}
.home #store ul li > a img {
height: 16rem;
}
.home #store ul li > a .rating {
font-size: 1rem;
line-height: 1.5rem;
top: 16rem;
width: 6rem;
}
.home #store ul li {
width: 100%;
}
.home #store ul {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.home #intro nav {
max-width: 1024px;
}
.home #intro {
padding-bottom: 3rem;
}
}
@media (min-width:1280px) {
.home #intro nav,
.home #testimonials>div,
.page main,
body>*,
header {
max-width: 1280px;
}
}
@media (min-width:1536px) {
.home #intro nav,
.home #testimonials>div,
.page main,
body>*,
header {
max-width: 1536px;
}
}
.contact-box {
display: grid;
grid-template-columns: repeat(1,minmax(0,1fr));
}
.contact-box p {
color: #1f2937;
}
.contact-box form div,
footer nav {
margin: 1rem;
}
body.page form button {
border-radius: .75rem;
border: 2px solid rgb(var(--red), var(--green), var(--blue));
display: inline-block;
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
margin-left: auto;
margin-right: auto;
padding: .25rem .5rem;
text-decoration: none;
transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
background-color: rgb(var(--red), var(--green), var(--blue));
color: #fff;
}
body.page form label {
display: inline-block;
color: #374151;
width: 5rem;
}
body.page form input,
body.page form select,
body.page form textarea {
background-color: #f3f4f6;
border-color: transparent;
border-radius: .375rem;
display: block;
margin-top: .25rem;
width: 100%;
}
body.page form input:focus,
body.page form select:focus,
body.page form textarea:focus {
background-color: #fff;
border-color: #6b7280;
box-shadow: 0 0 0 0 #fff,0 0 0 calc(0px) rgba(59,130,246,.5),0 0 transparent;
}
@media (min-width:768px) {
.home #description {
padding-left: 0;
padding-right: 0;
}
body.page form button {
font-size: 1.125rem;
line-height: 1.75rem;
padding: .5rem 1rem;
}
}
.page.survey form li {
margin: 1rem;
clear: both;
}
.page.survey form label {
width: auto;
}
.page.survey form input,
.page.survey form select {
float: right;
width: 12rem;
}
.page.survey form button {
display: block;
margin-left: auto;
margin-right: auto;
}
footer {
text-align: center;
vertical-align: bottom;
}
footer a {
display: inline-block;
flex-grow: 0;
font-weight: 700;
font-size: .75rem;
line-height: 1rem;
padding: .75rem;
color: #374151;
transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
footer a:focus {
color: rgb(var(--red), var(--green), var(--blue));
}
footer img {
margin: .75rem auto;
}
footer ul {
align-items: center;
}
footer li {
display: inline-block;
}
footer > div {
font-size: .875rem;
line-height: 1.25rem;
margin: 1.75rem;
}
footer i {
display: block;
height: 2rem;
width: 2rem;
transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
footer i:hover {
opacity: .9;
}
footer.dark {
background-color: #111827;
margin: 0;
max-width: none;
padding: 1.25rem;
color: #d1d5db;
width: 100vw;
}
footer.dark a {
color: #e5e7eb;
}
footer.dark a:focus {
color: #f3f4f6;
}
@media (min-width:640px) {
footer a {
padding: .5rem;
}
}
@media (min-width:1024px) {
.home h1 {
font-size: 2.25rem;
line-height: 2.5rem;
padding-top: 2.5rem;
}
.contact-box {
grid-template-columns: repeat(2,minmax(0,1fr));
}
body.page form button {
padding: .75rem 1.25rem;
}
footer a {
font-size: .875rem;
line-height: 1.25rem;
}
}
.border {
border-width: 1px;
}
.inline {
display: inline;
}
.table {
display: table;
}
.contents {
display: contents;
}
.float-left {
float: left;
}
.transform {
transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}