/* ================================================================================== */ /* == Normalize.css v8.0.1 ========================================================== */ /* ================================================================================== */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} *,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none } /* Viewport Sizing */ @-webkit-viewport{width:device-width} @-moz-viewport{width:device-width} @-ms-viewport{width:device-width} @-o-viewport{width:device-width} @viewport{width:device-width} /* ================================================================================== */ /* == Variables ===================================================================== */ /* ================================================================================== */ :root { --text-darkest: #4a4b4f; --text-default: #717586; --text-lightest: #BBBDCC; --color-primary1: #4990E2; --color-primary2: #8B95A3; --color-primary3: #A3A8F8; --color-orange: #ff9a57; --color-blue: #30affd; --color-red: #E50B0B; --color-border: #E6EAEE; --bg-body: #F6F7FC; --bg-gray: #F6F7FC; --bg-dark: #2b2b2b; --font-serif: 'PT Serif', Georgia, serif; /* 400, 700 */ --font-sans-serif: 'Saira Semi Condensed', Arial, sans-serif; /* 700 */ --font-sans-serif-condensed: 'Saira Condensed', Arial, sans-serif; /* 300, 600 */ --padding-main: 4rem; } @media (max-width:800px) { :root { --padding-main: 3rem; } } @media (max-width:480px) { :root { --padding-main: 2rem; } } /* ================================================================================== */ /* == General Styles ================================================================ */ /* ================================================================================== */ html, body { color: var(--text-default); font-family: var(--font-serif); font-size: 18px; line-height: 1.6; font-weight: 400; font-style: normal; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; /* -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */ /*text-rendering: optimizelegibility;*/ } html { background: var(--bg-body) url(img/bg1.jpg); background-size: 350px; } @media (max-width:1000px) { html, body { font-size: 17px; } } @media (max-width:480px) { html, body { font-size: 15px; } } a { text-decoration: none; color: var(--color-primary1); -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -ms-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } a:hover { color: var(--color-red); } h1, h2, h3, h4, h5 { font-we///ight: 800; color: var(--text-darkest); } h1 { margin-top: 0; } ::-moz-selection { background: var(--color-primary1); color: #fff; } ::selection { background: var(--color-primary1); color: #fff; } .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--padding-main); position: relative; } .container:after { content: ""; display: table; clear: both; } /* clearfix */ .body-container { min-height: calc(100vh - 160px); background: #fff; box-shadow: rgba(0,0,0, 0.05) -15px 0, rgba(0,0,0, 0.05) -30px 0, rgba(0,0,0, 0.05) 15px 0, rgba(0,0,0, 0.05) 30px 0, rgba(0,0,0,0.1) 0 0 30px; } .full-padding .body-container { padding-top: var(--padding-main); padding-bottom: var(--padding-main); } .ad { background: palegoldenrod; padding: calc(var(--padding-main) / 2); border: 3px solid orange; border-radius: 3px; } .ad-top { margin-bottom: var(--padding-main); } .ad-bottom { margin-top: var(--padding-main); } .narrow-content { max-width: 720px; margin: 0 auto; display: flex; justify-content: center; align-items: center; } /* ================================================================================== */ /* == Header ======================================================================== */ /* ================================================================================== */ #header { text-align: center; background: var(--bg-dark) url(img/bg3.jpg); background-size: 350px; height: 80px; line-height: 80px; } #header h1 { float: left; margin: 0; font-size: 2.5rem; font-family: var(--font-sans-serif-condensed); font-weight: 600; color: var(--bg-dark); color: #fff; text-shadow: 0px 2px 2px rgba(0,0,0,.5); line-height: 1em; text-transform: uppercase; } #header h1 a { display: block; color: #fff; padding: 0 30px; line-height: 80px; background: var(--color-red) url(img/bg-red.jpg); background-size: 350px; } #header h1:hover { } #header .container { box-shadow: 0 0 30px rgba(0,0,0,0.5); padding-left: 0; } #header .container { box-shadow: rgba(0,0,0, 0.25) -15px 0, rgba(0,0,0, 0.25) -30px 0, rgba(0,0,0, 0.25) 15px 0, rgba(0,0,0, 0.25) 30px 0, rgba(0,0,0,0.25) 0 0 30px; } /*Navigation*/ #main-nav { font-family: var(--font-sans-serif-condensed); font-weight: 600; font-size: 1.2rem; float: right; } #main-nav ul { } #main-nav ul li { display: inline; margin-left: 20px; } #main-nav ul li a { color: #fff; } /* ================================================================================== */ /* == Index ========================================================================= */ /* ================================================================================== */ .month-navigation { position: relative; overflow: hidden; } .month-navigation.top { border-bottom: 1px solid var(--color-border); padding-bottom: calc(var(--padding-main) / 4); margin-top: calc(var(--padding-main) / -2); margin-bottom: calc(var(--padding-main) / 2); } .month-navigation.bottom { border-top: 1px solid var(--color-border); padding-top: calc(var(--padding-main) / 4); margin-bottom: calc(var(--padding-main) / -4); } .month-navigation h2 { width: 200px; text-align: center; line-height: 50px; position: absolute; top: 0; left: 50%; margin-left: -100px; } .month-navigation a { border-radius: 5px; color: var(--color-red); width: 150px; height: 50px; line-height: 50px; } .month-navigation a:hover { color: var(--text-darkest); } .month-navigation .next-month { float: right; background: url(img/arrow-next.svg) no-repeat center right; background-size: 1.8em; padding-right: 2em; text-align: right; } .month-navigation .prev-month { float: left; background: url(img/arrow-prev.svg) no-repeat center left; background-size: 1.8em; padding-left: 2em; } @media (max-width:440px) { .month-navigation.top { padding: 0; width: 100%; margin-bottom: var(--padding-main); } .month-navigation h2 { position: static; left: auto; margin: 0; padding-bottom: calc(var(--padding-main) / 3); width: 100%; border-bottom: 1px solid var(--color-border); } .month-navigation a { width: 50%; } } .art-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .art-list li { flex: 0 calc(25% - 1.5rem); margin-bottom: 3%; } .art-list li img { display: block; width: 100%; } .art-list li .image { position: relative; background: #fff; padding: 8px; margin-bottom: 0.5rem; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; } .art-list li .title { font-family: var(--font-sans-serif-condensed); font-weight: 600; font-size: 1.15rem; line-height: 1.2; } .art-list li .number { position: absolute; top: 17%; left: 17%; width: 66%; padding-top: 66%; background:rgba(0,0,0,0.45); border-radius: 50%; color: #fff; vertical-align: middle; font-family: var(--font-sans-serif-condensed); font-weight: 300; } .art-list li .number span { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); text-align: center; font-size: 3rem; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .art-list li .date { color: var(--text-lightest); font-size: 0.75rem; } @media (max-width:800px) { .art-list li { flex: 0 calc(33% - 1rem); margin-bottom: 4%; } } @media (max-width:600px) { .art-list li { flex: 0 calc(50% - 1rem); margin-bottom: 4%; } } @media (max-width:420px) { .art-list li { flex: 100%; margin-bottom: var(--padding-main); } .art-list li.blank { display: none; } } /* ================================================================================== */ /* == Single ======================================================================== */ /* ================================================================================== */ .single .body-container { padding: 0; display: flex; } .content-with-sidebar { width: calc(100% - 330px); padding: var(--padding-main); } @media (max-width:1000px) { .content-with-sidebar { width: calc(100% - 250px); } } @media (max-width:800px) { .single .body-container { padding: 0; display: block; } .content-with-sidebar { width: 100%; } } .artwork {} .artwork h1 { font-family: var(--font-sans-serif); font-weight: 700; font-size: 2.25rem; line-height: 1.3; } .artwork .date { display: block; margin: -1.75rem 0 1rem 0; } .artwork .image { padding: 10px; margin-bottom: var(--padding-main); position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px; box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px; box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px; box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; } .artwork img { display: block; width: 100%; } .artwork .number { position: absolute; top: 10px; left: 10px; text-align: center; background: rgba(0,0,0,0.15); color: rgba(0,0,0,0.5); font-family: var(--font-sans-serif); font-weight: 700; font-size: 1.75rem; padding: 0.5em 0.6em; text-shad////////ow: 1px 1px 0px rgba(255,255,255,0.1), -1px -1px 0px rgba(0,0,0,0.9); } .artwork .number span { display: block; line-height: 1; } .artwork .number .of { font-family: var(--font-sans-serif-condensed); font-style: italic; font-weight: 300; font-size: 1rem; margin: -0.1rem; } .artwork .description { margin-bottom: 1rem; } .pagination { overflow: hidden; margin-top: var(--padding-main); border-top: 1px solid var(--color-border); } .pagination a { padding: 1em; border-radius: 5px; color: var(--color-red); font-size: .9rem; } .pagination a:hover { color: var(--text-darkest); } .pagination .next { float: right; background: url(img/arrow-next.svg) no-repeat center right; background-size: 1.8em; padding-right: 2em; text-align: right; } .pagination .prev { float: left; background: url(img/arrow-prev.svg) no-repeat center left; background-size: 1.8em; padding-left: 2em; } /* Article Styles */ article {} article h1 { line-height: 1.3; } article p { margin-bottom: 1em; } article p:last-child { margin-bottom: 0; } /* ================================================================================== */ /* == Sidebar ======================================================================= */ /* ================================================================================== */ .sidebar { width: 330px; background: var(--bg-dark) url(img/bg3.jpg); background-size: 350px; padding: var(--padding-main); box-shadow: inset rgba(0, 0, 0, 0.09) 0px 2px 1px, inset rgba(0, 0, 0, 0.09) 0px 4px 2px, inset rgba(0, 0, 0, 0.09) 0px 8px 4px, inset rgba(0, 0, 0, 0.09) 0px 16px 8px, inset rgba(0, 0, 0, 0.09) 0px 32px 16px; } .sidebar h3 { color: #fff; margin: 0 0 1em 0; } .sidebar .art-list {} .sidebar .art-list li { flex: none; width: 100%; margin: 0 0 calc(var(--padding-main) / 2) 0; } .sidebar .art-list .title { color: #fff; } @media (max-width:1000px) { .sidebar { width: 250px; padding: calc(var(--padding-main) / 2); } } @media (max-width:800px) { .sidebar { width: 100%; padding: var(--padding-main); } .sidebar .art-list li { flex: 0 calc(50% - 1rem); margin-bottom: 4%; } } /* ================================================================================== */ /* == Contact Page ================================================================== */ /* ================================================================================== */ .contact-page {} .contact-page form { margin-top: var(--padding-main); } .contact-page form label { display: block; color: var(--text-darkest); font-weight: 700; margin-bottom: 1rem; } .contact-page form input { margin: 0 0 2rem 0; } .contact-page form textarea { min-height: 230px; margin-bottom: 1rem; } .contact-page form input, .contact-page form textarea { width: 100%; padding: 15px 20px; border: 1px solid var(--color-border); background: var(--bg-body); border-radius: 5px; line-height: 1.5; } .contact-page form .submit { background: var(--color-red); color: #fff; cursor: pointer; font-weight: 600; margin: 0;} .contact-page form .submit:hover { background: var(--bg-dark); } /* ================================================================================== */ /* == Sitemap ======================================================================= */ /* ================================================================================== */ .sitemap-list {} .sitemap-list .title {} /* ================================================================================== */ /* == Error Page ==================================================================== */ /* ================================================================================== */ .error404 { text-align: center; } .error404 h2 { font-family: var(--font-sans-serif); font-weight: 700; font-size: 9rem; margin-bottom: -0.15em; color: var(--text-default); } /* ================================================================================== */ /* == Footer ======================================================================== */ /* ================================================================================== */ #footer { clear: both; overflow: hidden; background: var(--bg-dark) url(img/bg3.jpg); background-size: 350px; color: rgba(255,255,255,0.7); box-shadow: inset 0 10px 30px RGBA(114, 117, 133, 0.1); } #footer p { float: right; margin: 0; font-size: 0.875rem; } #footer p.copyright { float: left; } #footer a { color: rgba(255,255,255,0.7); } #footer .container { height: 80px; line-height: 80px; box-shadow: 0 0 30px rgba(0,0,0,0.5); } #footer .container { box-shadow: rgba(0,0,0, 0.25) -15px 0, rgba(0,0,0, 0.25) -30px 0, rgba(0,0,0, 0.25) 15px 0, rgba(0,0,0, 0.25) 30px 0, rgba(0,0,0,0.25) 0 0 30px; } @media (max-width:480px) { #footer p { font-size: 0.75em; } }