/*! Theme Name: Jake Van Extension Theme URI: https://jakevan.ca Description: Jvb-theme child theme, for Jake. Author: Jake Author URI: https://jakevan.ca/ Template: jvb-theme Version: 0.1.5 !*/ :root{ --filter: grayscale(.3) sepia(.4); /** Download your Fonts from: https://gwfh.mranftl.com/ **/ --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --heading: 'Open Sans', var(--font-base); --body: 'Montserrat', var(--font-base); --fw-h: 900; --fw-h-light: 400; --fw-h-bold: 800; --fw-b: 400; --fw-b-bold: 900; --fw-b-light: 200; --txt-small: clamp(0.75rem, calc(0.682rem + 0.341vw), 0.90rem); --txt-x-small: clamp(0.88rem, calc(0.809rem + 0.355vw), 1.05rem); --txt-medium: clamp(1.00rem, calc(0.920rem + 0.400vw), 1.20rem); --txt-x-medium: clamp(1.13rem, calc(1.036rem + 0.466vw), 1.40rem); --txt-large: clamp(1.35rem, calc(1.227rem + 0.614vw), 1.70rem); --txt-x-large:clamp(1.62rem, calc(1.455rem + 0.830vw), 2.10rem); --txt-xx-large: clamp(1.94rem, calc(1.714rem + 1.143vw), 2.60rem); --txt-xxx-large: clamp(2.33rem, calc(2.014rem + 1.591vw), 3.30rem); --txt-enormous: calc(26vh - 4rem); /* Colours For best results, generate colours from base colours using: https://uicolors.app/generate/ or sass darken/lighten by 5%: http://scg.ar-ch.org/ */ --light-0: 237,237,244; /* #ededf4; */ --light-50: 227,227,238; /* #e3e3ee; */ --light-100: 218,218,232; /* #dadae8; */ --light-200: 209,209,227; /* #d1d1e3; */ --dark-0: 42,43,42; /* #2a2b2a; */ --dark-50: 47,48,47; /* #2f302f; */ --dark-100: 57,58,57; /* #393a39; */ --dark-200: 62,64,62; /* #3e403e; */ --action-0: 239,118,122; /* #ef767a; */ --action-50: 242,141,144; /* #f28d90; */ --action-100: 244,164,166; /* #f4a4a6; */ --action-200: 247,187,189; /* #f7bbbd; */ --action-contrast: var(--light-0); --secondary-0: 50,157,203; /* #329dcb; */ --secondary-50: 90,177,214; /* #5ab1d6; */ --secondary-100: 131,196,224;/* #83c4e0; */ --secondary-200: 172,216,234;/* #acd8ea; */ --secondary-contrast: var(--light-0); --success: 34,197,94; /* #22C55E; */ --successLight: 212,237,218;/* #d4edda; */ --successDark: 21,87,36; /* #155724; */ --warning: 232,167,55; /* #E8A737; */ --warningLight: 246,229,203;/* #F6E5CB; */ --warningDark: 35,24,6; /* #231806; */ --error: 239,68,68; /* #EF4444; */ --errorLight: 248,215,218; /* #f8d7da; */ --errorDark: 114,28,36; /* #721c24; */ --red-0: 239,118,122; /* #ef767a; */ --red-50: 236,95,100; /* #ec5f64; */ --red-100: 234,72,78; /* #ea484e; */ --red-200: 231,50,56; /* #e73238; */ --red-contrast: var(--dark-0); --orange-0: 239,158,118; /* #ef9e76; */ --orange-50: 242,174,141; /* #f2ae8d; */ --orange-100: 244,190,164; /* #f4bea4; */ --orange-200: 247,207,187; /* #f7cfbb; */ --orange-contrast: var(--dark-0); --yellow-0: 227,190,57; /* #E3BE39; */ --yellow-50: 233,205,102; /* #e9cd66; */ --yellow-100: 240,219,146; /* #f0db92; */ --yellow-200: 246,234,191; /* #f6eabf; */ --yellow-contrast: var(--dark-0); --green-0: 50,203,130; /* #32cb82; */ --green-50: 90,214,155; /* #5ad69b; */ --green-100: 131,224,180; /* #83e0b4; */ --green-200: 172,234,204; /* #aceacc; */ --green-contrast: var(--dark-0); --blue-0: 50,157,203; /* #329dcb; */ --blue-50: 90,177,214; /* #5ab1d6; */ --blue-100: 131,196,224; /* #83c4e0; */ --blue-200: 172,216,234; /* #acd8ea; */ --blue-contrast: var(--dark-0); --purple-0: 186,118,239; /* #ba76ef; */ --purple-50: 197,141,242; /* #c58df2; */ --purple-100: 209,164,244; /* #d1a4f4; */ --purple-200: 220,187,247; /* #dcbbf7; */ --purple-contrast: var(--dark-0); --base: var(--light-0); --base-50: var(--light-50); --base-100: var(--light-100); --base-200: var(--light-200); --contrast: var(--dark-0); --contrast-50: var(--dark-50); --contrast-100: var(--dark-100); --contrast-200: var(--dark-200); --successBack: var(--successLight); --successText: var(--successDark); --warningBack: var(--warningLight); --warningText: var(--warningDark); --errorBack: var(--errorLight); --errorText: var(--errorDark); } body:has(#theme-switcher:checked){ --action-50: 236,95,100; /* #ec5f64; */ --action-100: 234,72,78; /* #ea484e; */ --action-200: 231,50,56; /* #e73238; */ --secondary-50: 40,125,162; /* #287da2; */ --secondary-100: 30,94,121; /* #1e5e79; */ --secondary-200: 20,62,80; /* #143e50; */ --contrast: var(--light-0); --contrast-50: var(--light-50); --contrast-100: var(--light-100); --contrast-200: var(--light-200); --base: var(--dark-0); --base-50: var(--dark-50); --base-100: var(--dark-100); --base-200: var(--dark-200); --successBack: var(--successDark); --successText: var(--successLight); --warningBack: var(--warningDark); --warningText: var(--warningLight); --errorBack: var(--errorDark); --errorText: var(--errorLight); --red-50: 236,95,100; /* #ec5f64; */ --red-100: 234,72,78; /* #ea484e; */ --red-200: 231,50,56; /* #e73238; */ --red-contrast: var(--light-0); --orange-50: 236,142,95; /* #ec8e5f; */ --orange-100: 234,126,72; /* #ea7e48; */ --orange-200: 231,110,50; /* #e76e32; */ --orange-contrast: var(--light-0); --yellow-50: 204,166,29; /* #cca61d; */ --yellow-100: 159,130,23; /* #9f8217; */ --yellow-200: 115,93,16; /* #735d10; */ --yellow-contrast: var(--light-0); --green-50: 40,162,104; /* #28a268; */ --green-100: 30,121,78; /* #1e794e; */ --green-200: 20,80,51; /* #145033; */ --green-contrast: var(--light-0); --blue-50: 40,125,162; /* #287da2; */ --blue-100: 30,94,121; /* #1e5e79; */ --blue-200: 20,62,80; /* #143e50; */ --blue-contrast: var(--dark-0); --purple-50: 163,72,234; /* #a348ea; */ --purple-100: 140,27,228; /* #8c1be4; */ --purple-200: 112,21,183; /* #7015b7; */ --purple-contrast: var(--light-0); } body { overflow-x: clip; } /*** FONTS START **/ /** Download your Fonts from: https://gwfh.mranftl.com/ use ./assets/fonts/ as a base **/ /* open-sans-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('./assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('./assets/fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('./assets/fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-800italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('./assets/fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-200 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 200; src: url('./assets/fonts/montserrat-v31-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/montserrat-v31-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-200italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 200; src: url('./assets/fonts/montserrat-v31-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/montserrat-v31-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('./assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/montserrat-v31-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('./assets/fonts/montserrat-v31-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/montserrat-v31-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-900 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('./assets/fonts/montserrat-v31-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/montserrat-v31-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-900italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 900; src: url('./assets/fonts/montserrat-v31-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('./assets/fonts/montserrat-v31-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /*** FONTS END ***/ body.art.art, .art { --action-0: var(--blue-0); --action-50: var(--blue-50)!important; --action-100: var(--blue-100)!important; --action-200: var(--blue-200)!important; --action-contrast: var(--blue-contrast)!important; } body.design.design, .design { --action-0: var(--red-0); --action-50: var(--red-50)!important; --action-100: var(--red-100)!important; --action-200: var(--red-200)!important; --action-contrast: var(--red-contrast)!important; } body.development.development, .development { --action-0: var(--orange-0); --action-50: var(--orange-50)!important; --action-100: var(--orange-100)!important; --action-200: var(--orange-200)!important; --action-contrast: var(--orange-contrast)!important; } body.strategy.strategy, .strategy { --action-0: var(--green-0); --action-50: var(--green-50)!important; --action-100: var(--green-100)!important; --action-200: var(--green-200)!important; --action-contrast: var(--green-contrast)!important; } body.writing.writing, .writing { --action-0: var(--purple-0); --action-50: var(--purple-50)!important; --action-100: var(--purple-100)!important; --action-200: var(--purple-200)!important; --action-contrast: var(--purple-contrast)!important; } body.project.project, .project { --action-0: var(--yellow-0); --action-50: var(--yellow-50)!important; --action-100: var(--yellow-100)!important; --action-200: var(--yellow-200)!important; --action-contrast: var(--yellow-contrast)!important; } a { color: rgb(var(--action-0)); } a:visited { color: rgb(var(--action-100)); } a.current.current, a:hover, a:focus, a:visited:hover, a:visited:focus { background-color: rgb(var(--action-0)); color: rgb(var(--action-200)); } li { list-style: inside; padding-left: 1em; } .dashboard li { list-style: none; padding-left: 0; } .condensed.condensed a { color: rgb(var(--contrast)); border-radius: 0; border-bottom: 2px solid rgb(var(--action-0)); padding: .25rem 1rem; } .condensed.condensed a:hover, .condensed.condensed a:focus { color: var(--action-contrast); } .intro + nav { grid-column: full; margin: 0!important; } /* .intro + nav ul {*/ /* width: 100%;*/ /* }*/ /* .intro + nav li,*/ /* .intro + nav a {*/ /* min-height: var(--chip_);*/ /* }*/ :is(h1, h2, h3, h4, h5, h6) { margin: 1.5em auto .25em 1.5rem; } h1 { margin: 0 auto .25em 1.5rem; } .pre-footer { background: rgb(var(--base)); padding: 3rem 0 2rem; } .pre-footer p { margin: 0 auto .25rem 1rem; } .pre-footer a { background-color: rgb(var(--action-0)); color: rgb(var(--action-contrast)); } footer { margin: 0; padding: 1rem 2rem; } footer p { text-align: left; } .buttons { margin: 1rem auto 1rem 1.5rem; } footer nav.condensed ul { --justify: flex-start; --gap: 0 .5rem; margin-bottom: 1rem; } .wp-site-blocks.wp-site-blocks > header { --justify: center; gap: 1rem; } header .icon-logo { --w: var(--chipchip); } header .icon-jakevan { --w: var(--btn_); margin-left: 1rem; } header p { width: max-content; } #theme-switch { position: absolute; left: 1rem; } section.intro { --w: min(40vw, 350px); height: max-content; } section.intro .icon { margin: 0; } section.intro h1 { max-width: var(--w); } .home .media-text { --w: min(40vw, 350px); height: max-content; } .home .media-text figure, .home .media-text >div { margin: 0; width: var(--w); padding: 2rem 0 2rem 2rem; } .home h1 { font-size: var(--txt-medium); font-family: var(--body); font-weight: var(--fw-b-light); text-transform: none; margin: 0; } @media (min-width:768px) { .home h1 { font-size: var(--txt-x-large); } } footer { z-index: var(--z-9); padding: 1rem 2rem!important; } @media (min-width:768px) { .w-50 { max-width: calc(50% - 3rem)!important; margin: 0 1rem!important; } } main > * { margin-left: var(--btn)!important; } main > section { max-width: 100vw; padding: 3rem var(--btn) 3rem 1.5rem; margin-left: 0!important; } main > section:nth-of-type(even) { background-color: rgb(var(--base-100)); } main > section > * { width: 100%; max-width: var(--content); margin-left: 1.5rem!important; } main > section.callout:last-of-type { margin-bottom: 0; } nav.fixed.bottom { transition: var(--trans-size); } .drawer.open + .fixed.bottom { width: calc(100% - 240px); transition: var(--trans-size); } .cover { padding: 0; color: rgb(var(--action-0)); background-color: rgb(var(--action-200)); } .cover.alt { min-height: 0; } .cover > .content { background-color: rgba(var(--base), var(--op-6)); width: 100%; margin: 0 !important; color: rgb(var(--contrast)); padding: 2rem var(--btn) 2rem 2rem; } .cover h1 { margin: 0; } .cover > img { margin-left: 0!important; } .cover.alt > svg { max-width: none; margin: 0 auto!important; } .cover.alt + header#top { margin: 0!important; grid-column: full; padding-right: var(--btn_); } .cover.alt + header h1 { line-height: .75; margin: 0 0 0 .5rem; } .cover.alt + #top h1 small { line-height: 1; } @media (min-width: 768px) { .cover.alt > svg { max-width: 40vw; margin: 0!important; } .cover.alt + #top { flex-direction: column; position: absolute; right: 0; top: 35vw; max-width: 60vw; grid-column: narrow; z-index: 10; color: rgb(var(--action-contrast)); padding: 0 var(--btn_) 0 0!important; } .cover.alt + #top a { background-color: rgba(var(--action-0),var(--op-5)); color: rgb(var(--action-contrast)); } .cover.alt + #top a:hover, .cover.alt + #top a:focus { background-color: rgb(var(--action-contrast)); color: rgb(var(--action-0)); } } .halftone::before { content: ''; position:absolute; inset:0; background: radial-gradient(#fff, #888) 0 0 / 1em 1em, radial-gradient(circle at bottom left, #fff, #000); background-blend-mode: multiply; filter: contrast(50) blur(2px) contrast(4); mix-blend-mode: darken; } .halftone::after { z-index: 1; background: rgb(var(--base-50)); mix-blend-mode: lighten; content: ''; position:absolute; inset:0; } /**** END THIS ONE WORKS WELL **/ #top h1 small { margin: 0; line-height: .5; } #top p { margin-left: auto; font-size:var(--txt-x-small); } h2.subtitle { font-weight: var(--fw-h-light); text-transform: none; font-size: var(--txt-medium); margin: .5rem 0; } figure { margin: 0; } .loading[open] .spinner { display: none; } .loading[open] i.icon { --w: var(--txt-enormous); background-color: rgb(var(--action-0)); animation: spin .36s var(--trans-fn) infinite; } .row.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding-bottom: 2rem; } .row.services h2 { margin: 1.5em 0 .25rem; font-size: var(--txt-x-medium); } section#gallery div { max-width: var(--wide); display: grid; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 200px; } #gallery div figure img { width:100%; height: 100%; object-fit: cover; transform: scale(1); transition: var(--trans-transform); } #gallery div figure:hover img { transform: scale(1.05); } #gallery div figure:nth-of-type(3n+1) { padding: 15px; } #gallery div figure:nth-of-type(5n+1) { padding: 25px; } /*section#gallery div img:nth-of-type(3n+1) {*/ /* padding: 1rem;*/ /*}*/ #gallery div figure:nth-of-type(6n + 1), #gallery div figure:nth-of-type(6n + 5){ grid-row: span 2; } #gallery div figure:nth-of-type(6n + 0), #gallery div figure:nth-of-type(6n + 6){ grid-column: span 2; } #gallery div figure:nth-of-type(6n+4) { grid-column: span 2; grid-row: span 2; } /*#gallery div img:nth-of-type(3n+2) {*/ /* grid-row: span 1;*/ /* grid-column: span 2;*/ /*}*/ .needs-wants.needs-wants { max-width: var(--wide); margin: 0!important; } details.info { max-width: var(--wider); } .needs-wants .info{ max-width: var(--content); } .needs-wants li { list-style: none; padding:0; display: flex; flex-wrap: wrap; align-items: flex-start; } .needs-wants h3 { margin: 4rem 0 2rem; } @media (min-width: 768px) { .needs-wants img { max-width: 45%; margin-right: 4%; position:sticky; top: var(--btnbtn); } .needs-wants img + .info { max-width: 50%; display: inline-block; } } .term-list .title { text-transform: none; padding: 0; } #summary .summary { display: grid; grid-template-columns: repeat(1, 1fr); max-width: var(--wide); } #summary .summary .term-list { height: var(--chipchip); } #summary .summary > li { list-style: none; height: var(--chipchip) } #summary .summary .icon { --w: 1.5em; margin-right: 1rem; } #summary .summary > li span:first-of-type { margin-right: 1.5rem; } .project-list.item-grid.list-view img { width: 100%; } .project-list h3 { font-size: var(--txt-large); margin: 0; } @media (min-width: 768px) { #summary .summary { grid-template-columns: repeat(2, 1fr); } } body:has(.on-this-page) .qtoggle { bottom: calc(var(--btn_) + var(--btn_)); } .index.open.open { max-height: var(--maxHeight); height: max-content; } .development .item-grid .item .images { aspect-ratio: 16/9; } .main-actions.main-actions .buttons.buttons { bottom: unset; top: var(--btn_); right: 0!important; } aside.main.right { padding-bottom: 0; padding-top: var(--btn); } aside.main.right.expanded { right: var(--btn); } .main-actions button.expanded { border-top-left-radius: var(--radius-outer); border-bottom-left-radius: var(--radius); right: var(--btn); } /**************************************************************** CONTENT LIST ****************************************************************/ ul.content-term-list { margin-left:0!important; margin-right: 0!important; grid-column: full; max-width: var(--full); } ul.content-term-list > li { padding: var(--sp3) var(--btn_) var(--sp3) 0; list-style: none; } ul.content-term-list > li:nth-of-type(even) { background-color: rgb(var(--base-100)); } ul.content-term-list img { width: 40vw; max-inline-size: none; } .content-term-list .cover { padding-bottom: 0; min-height: 40vh; } .content-term-list .cover::before { display: none; } .content-term-list .cover .content { background-color: rgba(var(--base), var(--op-6)); width: 100%; border-radius: 1rem 1rem 0 0; padding: 1rem; } .content-term-list .cover h2 { margin: 0; } .feed-block .item-grid { padding-right: var(--btnbtn); } div.poster { height: 20vh; grid-column: full; max-width: 100vw; margin: 0!important; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } @media (min-width: 768px) { div.poster { height: 35vh; background-size: cover; } } .cover.cover { padding: 0; }