/**! * 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); }