@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i'); body { color: var(--black); font-family: 'Roboto Mono', -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-size: 100%; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; } /** * @font-face definitions should be in /assets/fonts.css.liquid * and linked in of theme.liquid */ h1, h2, h3, h4, h5, h6 { font-weight: 400; } .h0 { font-size: calc((54 /16) * 1rem); @media (--600) { font-size: calc((96 /16) * 1rem); } } .s1, h1, .h1 { font-size: calc((32 /16) * 1rem); @media (--600) { font-size: calc((50 /16) * 1rem); } } h1, .h1 { line-height: 1.1; } .s2, h2, .h2 { font-size: calc((24 /16) * 1rem); @media (--600) { font-size: calc((32 /16) * 1rem); } } h2, .h2 { line-height: 1.2; } .s3, h3, .h3 { font-size: calc((22 /16) * 1rem); @media (--600) { font-size: calc((24 /16) * 1rem); } } h3, .h3 { line-height: 1.3; } .s4, h4, .h4 { font-size: calc((18 /16) * 1rem); @media (--600) { font-size: calc((22 /16) * 1rem); } } h4, .h4 { line-height: 1.4; } .s5, h5, .h5 { font-size: calc((16 /16) * 1rem); } h5, .h5 { line-height: 1.5; } .s6, h6, .h6 { font-size: calc((14 /16) * 1rem); } h6, .h6 { line-height: 1.5; } .s0, p, .p { font-size: 1rem; } p, .p { line-height: 1.6; } small, .small { font-size: calc((12 /16) * 1rem); } .xsmall { font-size: calc((10 /16) * 1rem); } blockquote { text-align: center; color: var(--blue); padding: 10px; margin: 0; p { font-family: 'freight-display-pro', serif; font-size: 26px; line-height: 1.4; @media (--m) { font-size: 36px; line-height: 1.3; } } } a { color: inherit; text-decoration: none; } hr { display: block; border: 0; margin: 0; height: 1px; width: 100%; background-color: currentColor; color: inherit; } strong, .b { font-weight: bold; } em, .i { font-style: italic; } .caps { text-transform: uppercase; } .no-under { text-decoration: none; } .light { font-weight: 300; } .book, .regular, .medium { font-weight: 400; } .medium { font-weight: 500; } .semi { font-weight: 600; } .bold { font-weight: 700; } .track { letter-spacing: 0.1em; } .track--wide { letter-spacing: 0.3em; } .underline { position: relative; overflow: hidden; &:after { content: ''; transition: all .25s; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; border-bottom: 1px solid var(--orange); } &--black { &:after { bottom: 4px; border-bottom-color: var(--black); } } &--white { &:after { bottom: -2px; border-bottom-color: white; border-bottom-width: 2px; } &:hover { &:after { transform: translateY(4px); } } } &:hover { &:after { transform: translateY(4px); } } } .link-hover { transition: all var(--fast) var(--ease); &:hover { color: var(--yellow); } }