@import url("https://fonts.googleapis.com/css2?family=Martel:wght@400;700&family=Raleway:ital,wght@0,900;1,700&display=swap"); :root { --primary: #000; --secondary: white; --background: white; --border: #333; --highlight: #00ffff; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { padding: 0; margin: 0; } body { font-size: 14px; line-height: 20px; } /* || Helpers */ .border, nav header { border-width: 0; border-color: var(--border); border-style: solid; } .border.all, nav header.all { border-width: 1px; } .border.bottom, nav header { border-bottom-width: 1px; } .border.top, nav header.top { border-top-width: 1px; } .border.right, nav header.right { border-right-width: 1px; } .border.left, nav header.left { border-left-width: 1px; } /* || Typography */ /* Set font stacks */ html , body { font-family: "Martel", Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; } h1, h2, h3, h4, h5 { font-family: "Raleway", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; } h1, h2, h3 { letter-spacing: -2%; text-transform: uppercase; text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin: 0; } h1 { font-size: 54px; line-height: 50px; } h2 { font-size: 40px; line-height: 40px; } h3 { font-size: 28px; line-height: 30px; } h4 { font-size: 16px; line-height: 20px; } h5 { font-size: 14px; line-height: 20px; } h6 { font-size: 1em; line-height: 1em; font-weight: 900; } .text-small-caps { text-transform: uppercase; } .text-large, .text-block-quote, blockquote { font-size: 19px; line-height: 30px; } .text-caption { font-size: 12px; line-height: 20px; } a[href], a[href]:visited { color: var(--primary); } ul, li { padding: 0; margin: 0; } .text-link, .layout-list a { text-decoration: underline; text-underline-offset: 2px; } code { display: block; padding: 8px 16px; background: rgba(0, 0, 0, 0.05); font-family: Fira Code, monospace; font-style: normal; font-weight: 300; font-size: 13; line-height: 20px; } /* Typography Helpers */ .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } .text-lowercase { text-transform: lowercase; } /* |x End Typography */ /* || Layout */ /* Layout Helpers */ .layout-frame:not(.large), .nav-list li:not(.large) { padding: 5px 10px; } .layout-frame:not(.large):first-child, .nav-list li:not(.large):first-child { padding-top: 10px; } .layout-frame:not(.large):last-child, .nav-list li:not(.large):last-child { padding-bottom: 10px; } .layout-frame.large, nav footer, nav section, .nav-top, .nav-search, .nav-list, .nav-list li.large, .site-content header, .site-content article, .site-content section, .site-content footer { padding: 10px 20px; } .layout-frame.large:first-child, nav footer:first-child, nav section:first-child, .nav-top:first-child, .nav-search:first-child, .nav-list:first-child, .nav-list li.large:first-child, .site-content header:first-child, .site-content article:first-child, .site-content section:first-child, .site-content footer:first-child { padding-top: 20px; } .layout-frame.large:last-child, nav footer:last-child, nav section:last-child, .nav-top:last-child, .nav-search:last-child, .nav-list:last-child, .nav-list li.large:last-child, .site-content header:last-child, .site-content article:last-child, .site-content section:last-child, .site-content footer:last-child { padding-bottom: 20px; } .flex-space-between { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .layout-space { margin-bottom: 10px; } .layout-space-large, .layout-list.spaced-list .list-header, .layout-list.spaced-list .list-item:not(:last-child) { margin-bottom: 20px; } .layout-text-columns.two { -webkit-columns: auto 2; columns: auto 2; } .layout-text-columns.three { -webkit-columns: auto 2; columns: auto 2; } .interactable:hover, .nav-list a:hover { background-color: rgba(0, 0, 0, 0.05); } .interactable:pressed, .nav-list a:pressed { background-color: rgba(0, 0, 0, 0.15); } /* Layout Lists */ .layout-list { padding: 0px; margin: 0px; /* Special Lists */ } .layout-list .list-item, .layout-list .list-header { list-style: none; } .layout-list .flex-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .layout-list .flex-row > .primary { -ms-flex-preferred-size: 66.66%; flex-basis: 66.66%; } .layout-list .flex-row > .secondary { -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; text-align: right; } .layout-list p { margin: 0; } /* Layout Sections */ body { display: -ms-grid; display: grid; height: 100vh; -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; background-color: var(--background); } main { width: 1440px; margin: 0 auto; background-color: var(--background); border: 1px solid var(--border); display: -ms-grid; display: grid; -ms-grid-columns: 290px 13fr 10fr; grid-template-columns: 290px 13fr 10fr; -ms-grid-rows: 1fr; grid-template-rows: 1fr; gap: 1px 1px; background-color: var(--border); } main > nav, main > div, main > section, main > aside { background-color: var(--background); } /* Nav */ nav { position: relative; } nav section:not(:last-child) { border-bottom: 1px solid var(--border); } nav footer { border-top: 1px solid var(--border); position: absolute; bottom: 0; width: 100%; } .nav-top { height: 50px; } .nav-search form { padding: 0; border: 1px solid var(--border); position: relative; } .nav-search form:focus .input[type="submit"] { display: block; } .nav-search form label { display: none; } .nav-search form input { border: 0; background-color: transparent; } .nav-search form input[type="text"] { width: 100%; height: 40px; padding: 10px; border-radius: 0; } .nav-search form input[type="submit"] { position: absolute; right: 0; top: 0; width: 40px; height: 40px; display: none; } .nav-list { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px 10px; } .nav-list li { list-style: none; border: 1px solid var(--border); min-height: 80px; } .nav-list a { text-decoration: none; } .site-content header, .site-content section:not(:last-child) { border-bottom: 1px solid var(--border); } /* Page Layouts */ /* |x End Layout */ /* --------------- clean everything below here ----------- */ img { max-width: 100%; height: auto; } main :first-child, main > article :first-child { margin-top: 0; } pre { font-size: 14px; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; padding: 1em; margin: 0.5em 0; } /* Site BG */ .site-bg { position: fixed; z-index: -1; width: 100%; height: 100%; } /*# sourceMappingURL=inline.css.map */