Difference between revisions of "MediaWiki:Darkvector.css"
From Twisted Hollywood
(793 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | /* ######### */ | + | /* ############### */ |
− | /* VARIABLES */ | + | /* VARIABLES/FONTS */ |
− | /* ######### */ | + | /* ############### */ |
:root | :root | ||
{ | { | ||
--primary: #C53CFC; | --primary: #C53CFC; | ||
+ | --visited: #A300E4; | ||
+ | --secondary: #AD75C9; | ||
+ | --empty1: #C00048; | ||
+ | --empty2: #830031; | ||
+ | } | ||
+ | @font-face | ||
+ | { | ||
+ | font-family: 'Voltaire'; | ||
+ | src: url('fonts/Voltaire-Regular.ttf') format('truetype'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | font-display: block; | ||
+ | } | ||
+ | @font-face | ||
+ | { | ||
+ | font-family: 'Scope One'; | ||
+ | src: url('fonts/ScopeOne-Regular.ttf') format('truetype'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | font-display: block; | ||
+ | } | ||
+ | @font-face | ||
+ | { | ||
+ | font-family: 'Cutive'; | ||
+ | src: url('fonts/Cutive-Regular.ttf') format('truetype'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | font-display: block; | ||
+ | } | ||
+ | @font-face | ||
+ | { | ||
+ | font-family: 'Mouse Memoirs'; | ||
+ | src: url('fonts/MouseMemoirs-Regular.ttf') format('truetype'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | font-display: block; | ||
+ | } | ||
+ | @font-face | ||
+ | { | ||
+ | font-family: 'Special Elite'; | ||
+ | src: url('fonts/SpecialElite-Regular.ttf') format('truetype'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | font-display: block; | ||
+ | } | ||
+ | @font-face | ||
+ | { | ||
+ | font-family: 'VTPortableRemington'; | ||
+ | src: url('fonts/vtRemingtonPortable.ttf') format('truetype'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | font-display: block; | ||
+ | } | ||
+ | @font-face | ||
+ | { | ||
+ | font-family: 'Paytone One'; | ||
+ | src: url('fonts/PaytoneOne-Regular.ttf') format('truetype'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | font-display: block; | ||
} | } | ||
+ | html { font-size: 110% } | ||
+ | @media screen and (min-width: 982px) { | ||
+ | html { font-size: 110% } | ||
+ | } | ||
+ | |||
+ | img { | ||
+ | max-width:100%; | ||
+ | height:auto; | ||
+ | } | ||
+ | |||
+ | ::selection { | ||
+ | color: #fff; | ||
+ | background: #C53CFC; | ||
+ | text-shadow: none; | ||
+ | } | ||
+ | |||
+ | /* ############ */ | ||
+ | /* PAGE HEADERS */ | ||
+ | /* ############ */ | ||
+ | .mw-body #firstHeading, .mw-body h1, .mw-body h2 { font-family: 'Voltaire', sans-serif; font-weight: 400; } | ||
+ | @media screen and (min-width: 982px) { | ||
+ | .mw-body #firstHeading, .mw-body h1, .mw-body h2 { font-family: 'Voltaire', sans-serif; font-weight: 400; } | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | . | + | /* ############ */ |
+ | /* T.O.C. */ | ||
+ | /* ############ */ | ||
+ | .tocnumber, .toctogglelabel { color: var(--secondary); } | ||
@media screen and (min-width: 982px) { | @media screen and (min-width: 982px) { | ||
− | . | + | .tocnumber, .toctogglelabel { color: var(--secondary); } |
} | } | ||
Line 22: | Line 104: | ||
/* HYPERLINKS */ | /* HYPERLINKS */ | ||
/* ########## */ | /* ########## */ | ||
− | a | + | |
+ | /* Valid Links */ | ||
+ | a:not([role='button']), #mw-head div.darkvectorMenu h3 span, .mw-body a.external, .mw-body a.extiw | ||
{ | { | ||
color: var(--primary) !important; | color: var(--primary) !important; | ||
} | } | ||
@media screen and (min-width: 982px) { | @media screen and (min-width: 982px) { | ||
− | a | + | a:not([role='button']), #mw-head div.darkvectorMenu h3 span, .mw-body a.external, .mw-body a.extiw |
{ | { | ||
color: var(--primary) !important; | color: var(--primary) !important; | ||
} | } | ||
} | } | ||
+ | |||
+ | a:visited:not([role='button']), .mw-body a.external:visited, .mw-body a.extiw:visited | ||
+ | { | ||
+ | color: var(--visited) !important; | ||
+ | } | ||
+ | @media screen and (min-width: 982px) { | ||
+ | a:visited:not([role='button']), .mw-body a.external:visited, .mw-body a.extiw:visited | ||
+ | { | ||
+ | color: var(--visited) !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* Red Links */ | ||
+ | a.plainlinks, a.new | ||
+ | { | ||
+ | color: var(--empty1) !important; | ||
+ | } | ||
+ | @media screen and (min-width: 982px) { | ||
+ | a.plainlinks, a.new | ||
+ | { | ||
+ | color: var(--empty1) !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | a.plainlinks:visited, a.new:visited | ||
+ | { | ||
+ | color: var(--empty2) !important; | ||
+ | } | ||
+ | @media screen and (min-width: 982px) { | ||
+ | a.plainlinks:visited, a.new:visited | ||
+ | { | ||
+ | color: var(--empty2) !important; | ||
+ | } | ||
+ | } | ||
+ | |||
Line 64: | Line 183: | ||
} | } | ||
+ | div #simpleSearch #searchButton { background-color: #250b2d !important; } | ||
+ | @media screen and (min-width: 982px) { | ||
+ | div #simpleSearch #searchButton { background-color: #250b2d !important; } | ||
+ | } | ||
/* ############# */ | /* ############# */ | ||
/* BULLET POINTS */ | /* BULLET POINTS */ | ||
/* ############# */ | /* ############# */ | ||
− | ul { list-style-image: url( | + | ul { list-style-image: url(images/e/ee/bullet-icon.svg); } |
@media screen and (min-width: 982px) { | @media screen and (min-width: 982px) { | ||
− | ul { list-style-image: url( | + | ul { list-style-image: url(images/e/ee/bullet-icon.svg); } |
} | } | ||
Line 100: | Line 223: | ||
#ca-watch.icon a:hover, #ca-watch.icon a:focus | #ca-watch.icon a:hover, #ca-watch.icon a:focus | ||
{ | { | ||
− | background-image: url( | + | background-image: url(images/c/c1/watch-icon-hl.svg); |
− | background-image: -webkit-linear-gradient(transparent,transparent),url( | + | background-image: -webkit-linear-gradient(transparent,transparent),url(images/c/c1/watch-icon-hl.svg); |
− | background-image: linear-gradient(transparent,transparent),url( | + | background-image: linear-gradient(transparent,transparent),url(images/c/c1/watch-icon-hl.svg); |
} | } | ||
#ca-watch.icon a | #ca-watch.icon a | ||
{ | { | ||
− | background-image: url( | + | background-image: url(images/9/92/watch-icon.svg); |
− | background-image: -webkit-linear-gradient(transparent,transparent),url( | + | background-image: -webkit-linear-gradient(transparent,transparent),url(images/9/92/watch-icon.svg); |
− | background-image: linear-gradient(transparent,transparent),url( | + | background-image: linear-gradient(transparent,transparent),url(images/9/92/watch-icon.svg); |
} | } | ||
@media screen and (min-width: 982px) { | @media screen and (min-width: 982px) { | ||
#ca-watch.icon a | #ca-watch.icon a | ||
{ | { | ||
− | background-image: url( | + | background-image: url(images/9/92/watch-icon.svg); |
− | background-image: -webkit-linear-gradient(transparent,transparent),url( | + | background-image: -webkit-linear-gradient(transparent,transparent),url(images/9/92/watch-icon.svg); |
− | background-image: linear-gradient(transparent,transparent),url( | + | background-image: linear-gradient(transparent,transparent),url(images/9/92/watch-icon.svg); |
} | } | ||
#ca-watch.icon a:hover, #ca-watch.icon a:focus | #ca-watch.icon a:hover, #ca-watch.icon a:focus | ||
{ | { | ||
− | background-image: url( | + | background-image: url(images/c/c1/watch-icon-hl.svg); |
− | background-image: -webkit-linear-gradient(transparent,transparent),url( | + | background-image: -webkit-linear-gradient(transparent,transparent),url(images/c/c1/watch-icon-hl.svg); |
− | background-image: linear-gradient(transparent,transparent),url( | + | background-image: linear-gradient(transparent,transparent),url(images/c/c1/watch-icon-hl.svg); |
} | } | ||
} | } | ||
+ | |||
+ | /* ############## */ | ||
+ | /* CONTAINERS */ | ||
+ | /* ############## */ | ||
+ | |||
+ | .box-span { | ||
+ | width: 100%; | ||
+ | min-height: 5vw; | ||
+ | margin: auto; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .box-mainpage1 { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | min-height: 27vw; | ||
+ | margin: auto; | ||
+ | font-size: 1rem; | ||
+ | background-image: radial-gradient(circle at center bottom, rgba(255,0,0,0) 70%, rgba(51,51,51,1) 85%), url(images/skyline.png); | ||
+ | background-position: center bottom, center bottom; | ||
+ | background-repeat: no-repeat, repeat-x; | ||
+ | #background-origin: content-box; | ||
+ | background-size: auto, contain; | ||
+ | } | ||
+ | |||
+ | .box-mainpage2 { | ||
+ | position: relative; | ||
+ | background-image: linear-gradient(rgba(33,33,33,1) 15%, rgba(51,51,51,1) 60%); | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | top: -3px; | ||
+ | } | ||
+ | |||
+ | .box-mainpage3 { | ||
+ | width: 20vw; | ||
+ | position: absolute; | ||
+ | bottom: 5vw; | ||
+ | right: 3.5vw; | ||
+ | #margin: 10vw 1vw 1vw; | ||
+ | #float: right; | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | |||
+ | .box-wide { | ||
+ | max-width: 75%; | ||
+ | margin: 1rem auto 1rem; | ||
+ | font-size: 1.25rem; | ||
+ | } | ||
+ | |||
+ | .box-left { | ||
+ | width: 30%; | ||
+ | margin: 1vw 2vw 1vw 0.5vw; | ||
+ | float: left; | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | |||
+ | .box-right { | ||
+ | width: 30%; | ||
+ | margin: 1vw 0.5vw 1vw 2vw; | ||
+ | float: right; | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | |||
+ | /* ############### */ | ||
+ | /* QUOTATION */ | ||
+ | /* ############### */ | ||
+ | |||
+ | .quotation { | ||
+ | font-family: 'Scope One', serif; | ||
+ | font-weight: 400; | ||
+ | line-height: 1.2; | ||
+ | text-align: justify; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding: .5rem; | ||
+ | color: #aaa; | ||
+ | text-shadow: 0 0 2px #aaa; | ||
+ | } | ||
+ | |||
+ | .quotation::before, | ||
+ | .quotation::after { | ||
+ | font-family: 'Voltaire'; | ||
+ | position: absolute; | ||
+ | color: transparent; | ||
+ | text-shadow: 0 0 6px #2a2a2a; | ||
+ | font-size: 24rem; | ||
+ | width: 5rem; | ||
+ | height: 5rem; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .quotation::before { | ||
+ | content: '“'; | ||
+ | left: -2.5rem; | ||
+ | top: -5.5rem; | ||
+ | transform: rotate(7deg); | ||
+ | } | ||
+ | |||
+ | .quotation::after { | ||
+ | content: '”'; | ||
+ | right: 2.5rem; | ||
+ | bottom: 6.5rem; | ||
+ | transform: rotate(7deg); | ||
+ | } | ||
+ | |||
+ | .miniquote { | ||
+ | font-family: 'Scope One', serif; | ||
+ | font-weight: 400; | ||
+ | line-height: 1.2; | ||
+ | text-align: justify; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding: .5rem; | ||
+ | color: #aaa; | ||
+ | text-shadow: 0 0 2px #aaa; | ||
+ | } | ||
+ | |||
+ | .miniquote::before, | ||
+ | .miniquote::after { | ||
+ | font-family: 'Voltaire'; | ||
+ | position: absolute; | ||
+ | color: transparent; | ||
+ | text-shadow: 0 0 6px #2a2a2a; | ||
+ | font-size: 12rem; | ||
+ | width: 5rem; | ||
+ | height: 5rem; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .miniquote::before { | ||
+ | content: '“'; | ||
+ | left: -1.5rem; | ||
+ | top: -2.8rem; | ||
+ | transform: rotate(4deg); | ||
+ | } | ||
+ | |||
+ | .miniquote::after { | ||
+ | content: '”'; | ||
+ | right: -1rem; | ||
+ | bottom: 0.8rem; | ||
+ | transform: rotate(4deg); | ||
+ | } | ||
+ | |||
+ | .quotation-citation { | ||
+ | font-family: 'Scope One', serif; | ||
+ | font-weight: 400; | ||
+ | text-align: right; | ||
+ | min-width: 50%; | ||
+ | line-height: 1.4; | ||
+ | position: relative; | ||
+ | margin: auto; | ||
+ | padding: 0rem; | ||
+ | color: #aaa; | ||
+ | text-shadow: 0 0 2px #aaa; | ||
+ | } | ||
+ | |||
+ | /* ######## */ | ||
+ | /* PAPERS */ | ||
+ | /* ######## */ | ||
+ | |||
+ | .papers { | ||
+ | background: #f0d5f6; | ||
+ | background-image: linear-gradient(135deg, rgba(240,213,246,1), rgba(212,177,220,1)); | ||
+ | box-shadow: 0 0 10px rgba(0,0,0,0.6); | ||
+ | margin-top: -1em; | ||
+ | padding: 1rem; | ||
+ | position: relative; | ||
+ | font-family: 'Cutive', serif; | ||
+ | font-size: 75%; | ||
+ | font-weight: 400; | ||
+ | line-height: 1.75; | ||
+ | text-align: justify; | ||
+ | color: #250b2d; | ||
+ | width: 95%; | ||
+ | } | ||
+ | .papers:before, .papers:after { | ||
+ | content: ""; | ||
+ | height: 98%; | ||
+ | position: absolute; | ||
+ | width: 97%; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | .papers:before { | ||
+ | background: #7c5885; | ||
+ | background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); | ||
+ | box-shadow: 0 0 8px rgba(0,0,0,0.4); | ||
+ | left: -4px; | ||
+ | top: -3px; | ||
+ | transform: rotate(-1.2deg); | ||
+ | } | ||
+ | .papers:after { | ||
+ | background: #cfa1da; | ||
+ | background-image: linear-gradient(135deg, rgba(207,161,218,1), rgba(177,136,186,1)); | ||
+ | box-shadow: 0 0 3px rgba(0,0,0,0.4); | ||
+ | right: -3px; | ||
+ | top: -5px; | ||
+ | transform: rotate(1.4deg); | ||
+ | } | ||
+ | |||
+ | /* ############# */ | ||
+ | /* PROMOTION */ | ||
+ | /* ############# */ | ||
+ | |||
+ | .blurb { | ||
+ | margin-right: 11vw; | ||
+ | margin-bottom: -0.5vw; | ||
+ | min-height: 5em; | ||
+ | padding: 2.5em 1.5em 0; | ||
+ | font-family: 'Cutive', serif; | ||
+ | font-size: 1vw; | ||
+ | line-height: 1.5; | ||
+ | } | ||
+ | |||
+ | .blurb-header { | ||
+ | background: #f0d5f6; | ||
+ | font-family: 'Voltaire'; | ||
+ | font-weight: bold; | ||
+ | color: #250b2d; | ||
+ | box-shadow: 2px 2px 2px #250b2d; | ||
+ | font-size: 1.8vw; | ||
+ | line-height: 1.2; | ||
+ | min-width: 2em; | ||
+ | min-height: 1em; | ||
+ | position: absolute; | ||
+ | top: -0.25vw; | ||
+ | left: 3.3vw; | ||
+ | padding: 0.2em; | ||
+ | transform: rotate(-2.5deg); | ||
+ | } | ||
+ | |||
+ | .blurb-header:before { | ||
+ | content: "Read it now:"; | ||
+ | text-transform: uppercase; | ||
+ | background: #f0d5f6; | ||
+ | font-family: 'Voltaire'; | ||
+ | font-weight: bold; | ||
+ | color: #7d1ca4; | ||
+ | box-shadow: 2px 2px 2px #250b2d; | ||
+ | font-size: 60%; | ||
+ | line-height: 0.9em; | ||
+ | position: absolute; | ||
+ | top: -1rem; | ||
+ | left: 0.75rem; | ||
+ | padding: 0.25rem; | ||
+ | transform: rotate(5deg); | ||
+ | } | ||
+ | |||
+ | .blurb-cover { | ||
+ | position: absolute; | ||
+ | width: 9vw; | ||
+ | height: auto; | ||
+ | top: -2.75vw; | ||
+ | right: 1.5vw; | ||
+ | transform: rotate(8deg); | ||
+ | } | ||
+ | |||
+ | .blurb-cover:after{ | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | left: 1vw; | ||
+ | top: 0.8vw; | ||
+ | background: black; | ||
+ | opacity: 25%; | ||
+ | width: 93%; | ||
+ | height: 93%; | ||
+ | box-shadow: 0px 0px 6px rgba(0,0,0,1); | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | /* ############# */ | ||
+ | /* AESTHETIC */ | ||
+ | /* ############# */ | ||
+ | |||
+ | .filmstrip { | ||
+ | --background: rgba(0, 0, 0, .35); | ||
+ | --size: 1vw; | ||
+ | background-image: | ||
+ | linear-gradient(to right, var(--background) var(--size), transparent var(--size)), | ||
+ | linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)), | ||
+ | linear-gradient(to right, var(--background) var(--size), transparent var(--size)), | ||
+ | linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)), | ||
+ | linear-gradient(to bottom, transparent var(--size), var(--background) var(--size)); | ||
+ | background-size: calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), 100% calc(100% - var(--size) * 3); | ||
+ | background-repeat: repeat-x; | ||
+ | background-position: 0 var(--size), top left, 0 calc(100% - var(--size)), bottom left, 0 var(--size); | ||
+ | padding: calc(var(--size) * 3) calc(var(--size) * 2.5); | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | .pane-container { | ||
+ | width: 100%; | ||
+ | height: 5.5vw; | ||
+ | columns: 10vw 7; | ||
+ | column-gap: 2vw; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | .pane { | ||
+ | height: 5.5vw; | ||
+ | width: 100%; | ||
+ | background: #2a2a2a; | ||
+ | background-image: radial-gradient(rgba(64,64,64,1) 25%, rgba(40,40,40,1)); | ||
+ | border-radius: 8px; | ||
+ | box-sizing: border-box; | ||
+ | display: inline-block; | ||
+ | font-family: 'Voltaire'; | ||
+ | font-weight: bold; | ||
+ | font-size: 1.45vw; | ||
+ | text-align: center; | ||
+ | text-transform: uppercase; | ||
+ | line-height: 1.1; | ||
+ | color: #fff; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | .pane-blank { | ||
+ | height: 5.5vw; | ||
+ | width: 100%; | ||
+ | border-radius: 8px; | ||
+ | box-sizing: border-box; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .pane-blank:first-of-type { | ||
+ | background-image: linear-gradient(90deg, rgba(42,42,42,0), rgba(42,42,42,1)); | ||
+ | } | ||
+ | |||
+ | .pane-blank:last-of-type { | ||
+ | background-image: linear-gradient(90deg, rgba(42,42,42,1), rgba(42,42,42,0)); | ||
+ | } | ||
+ | |||
+ | .pane:hover { | ||
+ | background: #f0d5f6; | ||
+ | background-image: radial-gradient(rgba(240,213,246,1) 25%, rgba(210,160,220,1));; | ||
+ | color: #2a2a2a; | ||
+ | } | ||
+ | |||
+ | /* ############# */ | ||
+ | /* FUN FACTS */ | ||
+ | /* ############# */ | ||
+ | |||
+ | .dyk { | ||
+ | position: absolute; | ||
+ | top: -2vw; | ||
+ | left: -2vw; | ||
+ | transform: rotate(-1.3deg); | ||
+ | font-family: 'Voltaire'; | ||
+ | font-weight: bold; | ||
+ | font-size: 3.5vw; | ||
+ | line-height: 0.75; | ||
+ | text-align: center; | ||
+ | padding: 0 0.5vw; | ||
+ | color: #AD75C9; | ||
+ | text-shadow: 2px 2px 2px #7c5885; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .factoid { | ||
+ | width: 95%; | ||
+ | color: #f0d5f6; | ||
+ | background: #2a2a2a; | ||
+ | border: 4px solid #5B00A8; | ||
+ | box-shadow: 3px 3px 8px rgba(0,0,0,0.6); | ||
+ | font-family: 'Cutive', serif; | ||
+ | font-size: 1.1vw; | ||
+ | line-height: 1.25; | ||
+ | text-align: center; | ||
+ | padding: 1.2vw 0.75vw 1.5vw; | ||
+ | transform: rotate(0.8deg); | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .wow { | ||
+ | position: relative; | ||
+ | bottom: -0.15vw; | ||
+ | right: -0.5vw; | ||
+ | transform: rotate(-2deg); | ||
+ | font-family: 'Voltaire'; | ||
+ | font-weight: bold; | ||
+ | font-size: 1.5vw; | ||
+ | line-height: 0.75; | ||
+ | color: #AD75C9; | ||
+ | text-shadow: 1px 1px 2px #7c5885; | ||
+ | text-align: right; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | /* ######## */ | ||
+ | /* BUBBLE */ | ||
+ | /* ######## */ | ||
+ | |||
+ | .bubble { | ||
+ | position: relative; | ||
+ | left: 2%; | ||
+ | top: 5%; | ||
+ | width: 49%; | ||
+ | margin: 2vw 6vw 2vw 4vw; | ||
+ | background-color: #f0d5f6; | ||
+ | border-radius: 3vw; | ||
+ | padding: 0.75vw 1vw; | ||
+ | font-family: 'Mouse Memoirs'; | ||
+ | font-size: 1.75vw; | ||
+ | line-height: 1.25; | ||
+ | text-align: center; | ||
+ | color: #452949; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | .speaker { | ||
+ | position: absolute; | ||
+ | left: 56.5%; | ||
+ | bottom: -5%; | ||
+ | width: 9vw; | ||
+ | height: auto; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | |||
+ | hr.heart { | ||
+ | width: 70%; | ||
+ | border-top: 2px solid; | ||
+ | border-image: linear-gradient(90deg, rgba(124,88,133,0) 10%, rgba(124,88,133,1), rgba(124,88,133,0) 90%) 100 stretch; | ||
+ | position: relative; | ||
+ | margin: 1.85vw auto -0.85vw; | ||
+ | min-height: 2vw; | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | /* ########### */ | ||
+ | /* DIVIDER */ | ||
+ | /* ########### */ | ||
+ | |||
+ | #hr.heart:after { | ||
+ | content: '❤'; | ||
+ | display: inline-block; | ||
+ | position: absolute; | ||
+ | top: -1.4vw; | ||
+ | left: 47.75%; | ||
+ | padding: 0 0.5vw; | ||
+ | background: #f0d5f6; | ||
+ | color: #7c5885; | ||
+ | font-size: 2vw; | ||
+ | } | ||
+ | |||
+ | .stars { | ||
+ | margin: 1.5vw auto; | ||
+ | width: 100%; | ||
+ | height: 3vw; | ||
+ | background-image: url(images/stars.png); | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | #background-origin: content-box; | ||
+ | background-size: auto 100%; | ||
+ | } | ||
+ | |||
+ | /* ########### */ | ||
+ | /* POSTERS */ | ||
+ | /* ########### */ | ||
+ | |||
+ | .posters { | ||
+ | width: 90%; | ||
+ | margin-left: 10%; | ||
+ | display: grid; | ||
+ | grid-template-columns: 30% 30% 30%; | ||
+ | grid-gap: 1.25vw; | ||
+ | font-size: 1vw; | ||
+ | text-align: justify; | ||
+ | color: #250b2d; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .poster-top { | ||
+ | font-family: 'Voltaire'; | ||
+ | font-size: 2.75vw; | ||
+ | text-decoration: underline 10%; | ||
+ | font-variant: small-caps; | ||
+ | line-height: 1.5; | ||
+ | color: #250b2d; | ||
+ | text-align: center; | ||
+ | opacity: 90%; | ||
+ | transform: rotate(-0.6deg); | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | |||
+ | .poster-top:before, | ||
+ | .poster-top:after { | ||
+ | content: " "; | ||
+ | } | ||
+ | |||
+ | .poster1 { | ||
+ | min-height: 5vw; | ||
+ | background: #f0d5f6; | ||
+ | background-image: linear-gradient(135deg, rgba(240,213,246,1), rgba(212,177,220,1)); | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.4); | ||
+ | transform: rotate(-1.3deg); | ||
+ | padding: 0.75em; | ||
+ | margin-top: 1vw; | ||
+ | margin-bottom: 2vw; | ||
+ | font-weight: 500; | ||
+ | position: relative; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .poster1 p { | ||
+ | transform: rotate(0.6deg); | ||
+ | margin: 0; | ||
+ | opacity: 80%; | ||
+ | } | ||
+ | |||
+ | .poster2 { | ||
+ | min-height: 5vw; | ||
+ | background: #e0a5eb; | ||
+ | background-image: linear-gradient(135deg, rgba(220,182,229,1), rgba(207,161,218,1)); | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.4); | ||
+ | transform: rotate(1deg); | ||
+ | padding: 0.75em; | ||
+ | margin-top: 3vw; | ||
+ | font-weight: 550; | ||
+ | position: relative; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | .poster2 p { | ||
+ | transform: rotate(-0.5deg); | ||
+ | margin: 0; | ||
+ | opacity: 75%; | ||
+ | } | ||
+ | |||
+ | .poster3 { | ||
+ | min-height: 5vw; | ||
+ | background: #f0d5f6; | ||
+ | background-image: linear-gradient(135deg, rgba(240,213,246,1), rgba(212,177,220,1)); | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.4); | ||
+ | transform: rotate(-0.7deg); | ||
+ | padding: 0.75em; | ||
+ | margin-top: 2vw; | ||
+ | margin-bottom: 1vw; | ||
+ | font-weight: 500; | ||
+ | position: relative; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | .poster3 p { | ||
+ | transform: rotate(1.1deg); | ||
+ | margin: 0; | ||
+ | opacity: 80%; | ||
+ | } | ||
+ | |||
+ | .poster4 { | ||
+ | width: 28vw; | ||
+ | height: 95%; | ||
+ | position: absolute; | ||
+ | left: 7%; | ||
+ | top: 3%; | ||
+ | transform: rotate(2.3deg); | ||
+ | background: #433845; | ||
+ | #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.1); | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .poster4:before { | ||
+ | content: ""; | ||
+ | width: 26vw; | ||
+ | height: 92%; | ||
+ | position: absolute; | ||
+ | left: -30%; | ||
+ | top: 8%; | ||
+ | transform: rotate(-3.9deg); | ||
+ | background: #533d58; | ||
+ | #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.2); | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .poster5 { | ||
+ | width: 28vw; | ||
+ | height: 90%; | ||
+ | position: absolute; | ||
+ | left: 45%; | ||
+ | top: 11%; | ||
+ | transform: rotate(-0.3deg); | ||
+ | background: #433845; | ||
+ | #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.1); | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .poster5:after { | ||
+ | content: ""; | ||
+ | width: 26vw; | ||
+ | height: 92%; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: -2%; | ||
+ | transform: rotate(1.8deg); | ||
+ | background: #533d58; | ||
+ | #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.2); | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .poster-para1 { | ||
+ | font-family: 'Cutive'; | ||
+ | text-align: center; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | .poster-inter { | ||
+ | text-align: center; | ||
+ | font-weight: 400; | ||
+ | line-height: 0em; | ||
+ | margin: 0.1em auto 0.1em; | ||
+ | } | ||
+ | |||
+ | .poster-para2 { | ||
+ | font-family: 'Cutive'; | ||
+ | text-align: center; | ||
+ | font-weight: 600; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ################ */ | ||
+ | /* NEWS SECTION */ | ||
+ | /* ################ */ | ||
+ | |||
+ | .updates { | ||
+ | width: 80%; | ||
+ | margin: auto; | ||
+ | position: relative; | ||
+ | padding-top: 3vw; | ||
+ | } | ||
+ | |||
+ | .top-tab { | ||
+ | position: absolute; | ||
+ | top: 15%; | ||
+ | left: 5%; | ||
+ | color: #250b2d; | ||
+ | font-family: 'Cutive', serif; | ||
+ | background: #ebc5f2; | ||
+ | padding: 0.35em 0.5em; | ||
+ | font-size: 3vw; | ||
+ | line-height: 0.5; | ||
+ | transform: rotate(-0.3deg); | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | .top-tab:before { | ||
+ | content: ""; | ||
+ | width: 10%; | ||
+ | height: 100%; | ||
+ | background: #ebc5f2; | ||
+ | position: absolute; | ||
+ | left: -3.5%; | ||
+ | top: 2%; | ||
+ | transform: rotate(10deg); | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .top-tab:after { | ||
+ | content: ""; | ||
+ | width: 10%; | ||
+ | height: 100%; | ||
+ | background: #ebc5f2; | ||
+ | position: absolute; | ||
+ | right: -3.5%; | ||
+ | top: 2%; | ||
+ | transform: rotate(-10deg); | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .banner { | ||
+ | min-height: 4vw; | ||
+ | background: #ebc5f2; | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.4); | ||
+ | transform: rotate(-0.3deg); | ||
+ | padding: 2.75em 0.75em 0.75em; | ||
+ | margin: 3vw auto 0.5vw; | ||
+ | font-size: 0.9vw; | ||
+ | font-weight: 500; | ||
+ | position: relative; | ||
+ | color: #250b2d; | ||
+ | font-family: 'Cutive', serif; | ||
+ | } | ||
+ | |||
+ | .banner-mini { | ||
+ | min-height: 2vw; | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.4); | ||
+ | padding: 2.75em 0.75em 0.75em; | ||
+ | margin: 1vw auto 0.5vw; | ||
+ | font-weight: 500; | ||
+ | position: relative; | ||
+ | background: #ebc5f2; | ||
+ | color: #3f1050; | ||
+ | font-family: 'Cutive', serif; | ||
+ | } | ||
+ | |||
+ | .banner-mini:nth-last-child(4) { | ||
+ | transform: rotate(0.2deg); | ||
+ | margin: 0.75vw 0vw 0.25vw 2.25vw; | ||
+ | width: 86%; | ||
+ | font-size: 0.8vw; | ||
+ | } | ||
+ | |||
+ | .banner-mini:nth-last-child(3) { | ||
+ | transform: rotate(-0.3deg); | ||
+ | margin: 0.5vw 0.2vw 0.25vw 3.5vw; | ||
+ | width: 92%; | ||
+ | font-size: 0.7vw; | ||
+ | } | ||
+ | |||
+ | .banner-mini:nth-last-child(2) { | ||
+ | transform: rotate(0.35deg); | ||
+ | margin: 1vw 0.5vw 0.5vw 1.25vw; | ||
+ | width: 80%; | ||
+ | font-size: 0.65vw; | ||
+ | } | ||
+ | |||
+ | .more-news { | ||
+ | position: absolute; | ||
+ | bottom: 0%; | ||
+ | right: 5%; | ||
+ | background: #ebc5f2; | ||
+ | box-shadow: 3px 3px 6px rgba(0,0,0,0.4); | ||
+ | transform: rotate(-1.3deg); | ||
+ | padding: 0.75em; | ||
+ | font-size: 1vw; | ||
+ | font-weight: 500; | ||
+ | font-family: 'Cutive', serif; | ||
+ | } | ||
+ | |||
+ | .banner-date { | ||
+ | position: absolute; | ||
+ | top: 2%; | ||
+ | right: 1%; | ||
+ | text-align: right; | ||
+ | border-bottom: 1px solid #250b2d; | ||
+ | } | ||
+ | |||
+ | .banner-title { | ||
+ | position: absolute; | ||
+ | top: 2%; | ||
+ | left: 1%; | ||
+ | text-align: left; | ||
+ | font-size: 120%; | ||
+ | font-weight: 800; | ||
+ | border-bottom: 2px solid #250b2d; | ||
+ | } | ||
+ | |||
+ | /* ############# */ | ||
+ | /* NEWSPAPER */ | ||
+ | /* ############# */ | ||
+ | |||
+ | .newspaper { | ||
+ | width: 20vw; | ||
+ | min-height: 5vw; | ||
+ | margin: 0vw 1vw 3vw 1vw; | ||
+ | float: left; | ||
+ | #box-shadow: 2px 2px 8px rgba(0,0,0,0.8); | ||
+ | padding-bottom: 1vw; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .broadsheet { | ||
+ | background-image: linear-gradient(0deg, rgba(183,180,176,0) 1%, rgba(221,218,213,1) 14%, rgba(247,243,237,1) 96%, rgba(221,218,213,1)); | ||
+ | font-family: 'Cutive'; | ||
+ | } | ||
+ | |||
+ | .tabloid { | ||
+ | background-image: linear-gradient(0deg, rgba(183,180,176,0) 1%, rgba(221,218,213,1) 14%, rgba(247,243,237,1) 96%, rgba(221,218,213,1)); | ||
+ | font-family: 'Paytone One'; | ||
+ | } | ||
+ | |||
+ | .vintage { | ||
+ | background-image: linear-gradient(0deg, rgba(191,153,105,0) 1%, rgba(217,185,126,1) 14%, rgba(242,221,182,1) 96%, rgba(217,185,126,1)); | ||
+ | font-family: 'VTPortableRemington'; | ||
+ | } | ||
+ | |||
+ | .newspaper-formatting { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .newspaper-formatting::before { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | left: .05vw; | ||
+ | top: 0; | ||
+ | height: 100%; | ||
+ | width: 2px; | ||
+ | background-image: linear-gradient(0deg, rgba(56,55,53,0), rgba(56,55,53,1) 80%, rgba(56,55,53,1)); | ||
+ | } | ||
+ | .newspaper-formatting::after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | right: .05vw; | ||
+ | top: 0; | ||
+ | height: 100%; | ||
+ | width: 2px; | ||
+ | background-image: linear-gradient(0deg, rgba(56,55,53,0), rgba(56,55,53,1) 80%, rgba(56,55,53,1)); | ||
+ | } | ||
+ | |||
+ | .newspaper-headline { | ||
+ | width: 90%; | ||
+ | margin: auto; | ||
+ | color: #2f2f2f; | ||
+ | text-shadow: 0 0 2px #383735; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 900; | ||
+ | text-align: justify; | ||
+ | text-align-last: justify; | ||
+ | text-justify: inter-character; | ||
+ | font-size: 1.5vw; | ||
+ | letter-spacing: .05em; | ||
+ | line-height: 125%; | ||
+ | padding: 0.5vw 0.5vw 0.25vw; | ||
+ | } | ||
+ | |||
+ | .newspaper-subheading { | ||
+ | width: 90%; | ||
+ | margin: auto; | ||
+ | color: #2f2f2f; | ||
+ | text-shadow: 0 0 2px #383735; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 900; | ||
+ | text-align: justify; | ||
+ | text-align-last: justify; | ||
+ | text-justify: inter-character; | ||
+ | font-size: 0.9vw; | ||
+ | line-height: 130%; | ||
+ | padding: 0.5vw 0vw 0.5vw; | ||
+ | border-top: 2px solid #777673; | ||
+ | } | ||
+ | |||
+ | .newspaper-article { | ||
+ | width: 90%; | ||
+ | margin: auto; | ||
+ | color: #2f2f2f; | ||
+ | text-shadow: 0 0 2px #383735; | ||
+ | font-size: 0.85vw; | ||
+ | text-align: justify; | ||
+ | text-justify: inter-word; | ||
+ | letter-spacing: .05em; | ||
+ | padding: 0.5vw 0vw 0.5vw; | ||
+ | border-top: 2px solid #777673; | ||
+ | line-height: 130%; | ||
+ | } | ||
+ | |||
+ | .newspaper-citation { | ||
+ | color: #eee; | ||
+ | text-align: right; | ||
+ | position: absolute; | ||
+ | font-size: 0.9vw; | ||
+ | bottom: -1.25vw; | ||
+ | right: 0; | ||
+ | font-family: 'Voltaire'; | ||
+ | } | ||
+ | |||
+ | /* ########### */ | ||
+ | /* FICTION */ | ||
+ | /* ########### */ | ||
+ | |||
+ | .fiction-full { | ||
+ | color: #f0d5f6; | ||
+ | border-top: 2px solid #A300E4; | ||
+ | border-bottom: 2px solid #A300E4; | ||
+ | font-size: 0.8rem; | ||
+ | line-height: 175%; | ||
+ | text-align: justify; | ||
+ | text-justify: inter-word; | ||
+ | letter-spacing: .05rem; | ||
+ | width: 80%; | ||
+ | min-height: 5vw; | ||
+ | margin: 0.25vw auto 1.25vw; | ||
+ | padding: 0.7rem 1rem 1rem; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .fiction-left { | ||
+ | color: #f0d5f6; | ||
+ | border-top: 2px solid #A300E4; | ||
+ | border-bottom: 2px solid #A300E4; | ||
+ | font-size: 0.75rem; | ||
+ | line-height: 150%; | ||
+ | text-align: justify; | ||
+ | text-justify: inter-word; | ||
+ | letter-spacing: .1rem; | ||
+ | width: 20vw; | ||
+ | float: left; | ||
+ | min-height: 5vw; | ||
+ | margin: 0.25vw 1.5vw 1.25vw 0.5vw; | ||
+ | padding: 0.7rem 0.7rem 1rem; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .fiction-right { | ||
+ | color: #f0d5f6; | ||
+ | border-top: 2px solid #A300E4; | ||
+ | border-bottom: 2px solid #A300E4; | ||
+ | font-size: 0.75rem; | ||
+ | line-height: 150%; | ||
+ | text-align: justify; | ||
+ | text-justify: inter-word; | ||
+ | letter-spacing: .05rem; | ||
+ | width: 20vw; | ||
+ | float: right; | ||
+ | min-height: 5vw; | ||
+ | margin: 0.25vw 0.5vw 1.25vw 1.5vw; | ||
+ | padding: 0.7rem 0.7rem 1rem; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .fiction-citation { | ||
+ | color: #999; | ||
+ | text-align: right; | ||
+ | position: absolute; | ||
+ | font-size: 1rem; | ||
+ | bottom: -1.3rem; | ||
+ | right: 0; | ||
+ | font-family: 'Voltaire'; | ||
+ | } |
Latest revision as of 04:22, 17 February 2024
/* ############### */ /* VARIABLES/FONTS */ /* ############### */ :root { --primary: #C53CFC; --visited: #A300E4; --secondary: #AD75C9; --empty1: #C00048; --empty2: #830031; } @font-face { font-family: 'Voltaire'; src: url('fonts/Voltaire-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Scope One'; src: url('fonts/ScopeOne-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Cutive'; src: url('fonts/Cutive-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Mouse Memoirs'; src: url('fonts/MouseMemoirs-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Special Elite'; src: url('fonts/SpecialElite-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'VTPortableRemington'; src: url('fonts/vtRemingtonPortable.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Paytone One'; src: url('fonts/PaytoneOne-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } html { font-size: 110% } @media screen and (min-width: 982px) { html { font-size: 110% } } img { max-width:100%; height:auto; } ::selection { color: #fff; background: #C53CFC; text-shadow: none; } /* ############ */ /* PAGE HEADERS */ /* ############ */ .mw-body #firstHeading, .mw-body h1, .mw-body h2 { font-family: 'Voltaire', sans-serif; font-weight: 400; } @media screen and (min-width: 982px) { .mw-body #firstHeading, .mw-body h1, .mw-body h2 { font-family: 'Voltaire', sans-serif; font-weight: 400; } } /* ############ */ /* T.O.C. */ /* ############ */ .tocnumber, .toctogglelabel { color: var(--secondary); } @media screen and (min-width: 982px) { .tocnumber, .toctogglelabel { color: var(--secondary); } } /* ########## */ /* HYPERLINKS */ /* ########## */ /* Valid Links */ a:not([role='button']), #mw-head div.darkvectorMenu h3 span, .mw-body a.external, .mw-body a.extiw { color: var(--primary) !important; } @media screen and (min-width: 982px) { a:not([role='button']), #mw-head div.darkvectorMenu h3 span, .mw-body a.external, .mw-body a.extiw { color: var(--primary) !important; } } a:visited:not([role='button']), .mw-body a.external:visited, .mw-body a.extiw:visited { color: var(--visited) !important; } @media screen and (min-width: 982px) { a:visited:not([role='button']), .mw-body a.external:visited, .mw-body a.extiw:visited { color: var(--visited) !important; } } /* Red Links */ a.plainlinks, a.new { color: var(--empty1) !important; } @media screen and (min-width: 982px) { a.plainlinks, a.new { color: var(--empty1) !important; } } a.plainlinks:visited, a.new:visited { color: var(--empty2) !important; } @media screen and (min-width: 982px) { a.plainlinks:visited, a.new:visited { color: var(--empty2) !important; } } /* ####### */ /* BUTTONS*/ /* ####### */ .oo-ui-buttonElement-button, .mw-ui-button { color: #ffffff !important; background-color: var(--primary) !important; border-color: var(--primary) !important; } .oo-ui-buttonElement-button:hover, .mw-ui-button:hover { color: #ffffff !important; background-color: #5B00A8 !important; border-color: #5B00A8 !important; } @media screen and (min-width: 982px) { .oo-ui-buttonElement-button, .mw-ui-button { color: #ffffff !important; background-color: var(--primary) !important; border-color: var(--primary) !important; } .oo-ui-buttonElement-button:hover, .mw-ui-button:hover { color: #ffffff !important; background-color: #5B00A8 !important; border-color: #5B00A8 !important; } } div #simpleSearch #searchButton { background-color: #250b2d !important; } @media screen and (min-width: 982px) { div #simpleSearch #searchButton { background-color: #250b2d !important; } } /* ############# */ /* BULLET POINTS */ /* ############# */ ul { list-style-image: url(images/e/ee/bullet-icon.svg); } @media screen and (min-width: 982px) { ul { list-style-image: url(images/e/ee/bullet-icon.svg); } } /* ################### */ /* ACTIVE TAB OVERLINE */ /* ################### */ #left-navigation div.darkvectorTabs li.selected, #right-navigation div.darkvectorTabs li.selected { background-image: -moz-linear-gradient(top,var(--primary) 0,#333333 10%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,var(--primary)),color-stop(10%,#333333)); background-image: -webkit-linear-gradient(top,var(--primary) 0,#333333 10%); background-image: linear-gradient(var(--primary) 0,#333333 10%); } @media screen and (min-width: 982px) { #left-navigation div.darkvectorTabs li.selected, #right-navigation div.darkvectorTabs li.selected { background-image: -moz-linear-gradient(top,var(--primary) 0,#333333 10%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,var(--primary)),color-stop(10%,#333333)); background-image: -webkit-linear-gradient(top,var(--primary) 0,#333333 10%); background-image: linear-gradient(var(--primary) 0,#333333 10%); } } /* ########## */ /* WATCH ICON */ /* ########## */ #ca-watch.icon a:hover, #ca-watch.icon a:focus { background-image: url(images/c/c1/watch-icon-hl.svg); background-image: -webkit-linear-gradient(transparent,transparent),url(images/c/c1/watch-icon-hl.svg); background-image: linear-gradient(transparent,transparent),url(images/c/c1/watch-icon-hl.svg); } #ca-watch.icon a { background-image: url(images/9/92/watch-icon.svg); background-image: -webkit-linear-gradient(transparent,transparent),url(images/9/92/watch-icon.svg); background-image: linear-gradient(transparent,transparent),url(images/9/92/watch-icon.svg); } @media screen and (min-width: 982px) { #ca-watch.icon a { background-image: url(images/9/92/watch-icon.svg); background-image: -webkit-linear-gradient(transparent,transparent),url(images/9/92/watch-icon.svg); background-image: linear-gradient(transparent,transparent),url(images/9/92/watch-icon.svg); } #ca-watch.icon a:hover, #ca-watch.icon a:focus { background-image: url(images/c/c1/watch-icon-hl.svg); background-image: -webkit-linear-gradient(transparent,transparent),url(images/c/c1/watch-icon-hl.svg); background-image: linear-gradient(transparent,transparent),url(images/c/c1/watch-icon-hl.svg); } } /* ############## */ /* CONTAINERS */ /* ############## */ .box-span { width: 100%; min-height: 5vw; margin: auto; position: relative; } .box-mainpage1 { position: relative; width: 100%; min-height: 27vw; margin: auto; font-size: 1rem; background-image: radial-gradient(circle at center bottom, rgba(255,0,0,0) 70%, rgba(51,51,51,1) 85%), url(images/skyline.png); background-position: center bottom, center bottom; background-repeat: no-repeat, repeat-x; #background-origin: content-box; background-size: auto, contain; } .box-mainpage2 { position: relative; background-image: linear-gradient(rgba(33,33,33,1) 15%, rgba(51,51,51,1) 60%); width: 100%; margin: auto; top: -3px; } .box-mainpage3 { width: 20vw; position: absolute; bottom: 5vw; right: 3.5vw; #margin: 10vw 1vw 1vw; #float: right; font-size: 1rem; } .box-wide { max-width: 75%; margin: 1rem auto 1rem; font-size: 1.25rem; } .box-left { width: 30%; margin: 1vw 2vw 1vw 0.5vw; float: left; font-size: 1rem; } .box-right { width: 30%; margin: 1vw 0.5vw 1vw 2vw; float: right; font-size: 1rem; } /* ############### */ /* QUOTATION */ /* ############### */ .quotation { font-family: 'Scope One', serif; font-weight: 400; line-height: 1.2; text-align: justify; position: relative; width: 100%; margin: auto; padding: .5rem; color: #aaa; text-shadow: 0 0 2px #aaa; } .quotation::before, .quotation::after { font-family: 'Voltaire'; position: absolute; color: transparent; text-shadow: 0 0 6px #2a2a2a; font-size: 24rem; width: 5rem; height: 5rem; z-index: -1; } .quotation::before { content: '“'; left: -2.5rem; top: -5.5rem; transform: rotate(7deg); } .quotation::after { content: '”'; right: 2.5rem; bottom: 6.5rem; transform: rotate(7deg); } .miniquote { font-family: 'Scope One', serif; font-weight: 400; line-height: 1.2; text-align: justify; position: relative; width: 100%; margin: auto; padding: .5rem; color: #aaa; text-shadow: 0 0 2px #aaa; } .miniquote::before, .miniquote::after { font-family: 'Voltaire'; position: absolute; color: transparent; text-shadow: 0 0 6px #2a2a2a; font-size: 12rem; width: 5rem; height: 5rem; z-index: -1; } .miniquote::before { content: '“'; left: -1.5rem; top: -2.8rem; transform: rotate(4deg); } .miniquote::after { content: '”'; right: -1rem; bottom: 0.8rem; transform: rotate(4deg); } .quotation-citation { font-family: 'Scope One', serif; font-weight: 400; text-align: right; min-width: 50%; line-height: 1.4; position: relative; margin: auto; padding: 0rem; color: #aaa; text-shadow: 0 0 2px #aaa; } /* ######## */ /* PAPERS */ /* ######## */ .papers { background: #f0d5f6; background-image: linear-gradient(135deg, rgba(240,213,246,1), rgba(212,177,220,1)); box-shadow: 0 0 10px rgba(0,0,0,0.6); margin-top: -1em; padding: 1rem; position: relative; font-family: 'Cutive', serif; font-size: 75%; font-weight: 400; line-height: 1.75; text-align: justify; color: #250b2d; width: 95%; } .papers:before, .papers:after { content: ""; height: 98%; position: absolute; width: 97%; z-index: -1; } .papers:before { background: #7c5885; background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 0 0 8px rgba(0,0,0,0.4); left: -4px; top: -3px; transform: rotate(-1.2deg); } .papers:after { background: #cfa1da; background-image: linear-gradient(135deg, rgba(207,161,218,1), rgba(177,136,186,1)); box-shadow: 0 0 3px rgba(0,0,0,0.4); right: -3px; top: -5px; transform: rotate(1.4deg); } /* ############# */ /* PROMOTION */ /* ############# */ .blurb { margin-right: 11vw; margin-bottom: -0.5vw; min-height: 5em; padding: 2.5em 1.5em 0; font-family: 'Cutive', serif; font-size: 1vw; line-height: 1.5; } .blurb-header { background: #f0d5f6; font-family: 'Voltaire'; font-weight: bold; color: #250b2d; box-shadow: 2px 2px 2px #250b2d; font-size: 1.8vw; line-height: 1.2; min-width: 2em; min-height: 1em; position: absolute; top: -0.25vw; left: 3.3vw; padding: 0.2em; transform: rotate(-2.5deg); } .blurb-header:before { content: "Read it now:"; text-transform: uppercase; background: #f0d5f6; font-family: 'Voltaire'; font-weight: bold; color: #7d1ca4; box-shadow: 2px 2px 2px #250b2d; font-size: 60%; line-height: 0.9em; position: absolute; top: -1rem; left: 0.75rem; padding: 0.25rem; transform: rotate(5deg); } .blurb-cover { position: absolute; width: 9vw; height: auto; top: -2.75vw; right: 1.5vw; transform: rotate(8deg); } .blurb-cover:after{ content: ""; position: absolute; left: 1vw; top: 0.8vw; background: black; opacity: 25%; width: 93%; height: 93%; box-shadow: 0px 0px 6px rgba(0,0,0,1); z-index: -1; } /* ############# */ /* AESTHETIC */ /* ############# */ .filmstrip { --background: rgba(0, 0, 0, .35); --size: 1vw; background-image: linear-gradient(to right, var(--background) var(--size), transparent var(--size)), linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)), linear-gradient(to right, var(--background) var(--size), transparent var(--size)), linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)), linear-gradient(to bottom, transparent var(--size), var(--background) var(--size)); background-size: calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), 100% calc(100% - var(--size) * 3); background-repeat: repeat-x; background-position: 0 var(--size), top left, 0 calc(100% - var(--size)), bottom left, 0 var(--size); padding: calc(var(--size) * 3) calc(var(--size) * 2.5); box-sizing: border-box; } .pane-container { width: 100%; height: 5.5vw; columns: 10vw 7; column-gap: 2vw; display: flex; justify-content: center; align-items: center; } .pane { height: 5.5vw; width: 100%; background: #2a2a2a; background-image: radial-gradient(rgba(64,64,64,1) 25%, rgba(40,40,40,1)); border-radius: 8px; box-sizing: border-box; display: inline-block; font-family: 'Voltaire'; font-weight: bold; font-size: 1.45vw; text-align: center; text-transform: uppercase; line-height: 1.1; color: #fff; display: flex; justify-content: center; align-items: center; } .pane-blank { height: 5.5vw; width: 100%; border-radius: 8px; box-sizing: border-box; display: inline-block; } .pane-blank:first-of-type { background-image: linear-gradient(90deg, rgba(42,42,42,0), rgba(42,42,42,1)); } .pane-blank:last-of-type { background-image: linear-gradient(90deg, rgba(42,42,42,1), rgba(42,42,42,0)); } .pane:hover { background: #f0d5f6; background-image: radial-gradient(rgba(240,213,246,1) 25%, rgba(210,160,220,1));; color: #2a2a2a; } /* ############# */ /* FUN FACTS */ /* ############# */ .dyk { position: absolute; top: -2vw; left: -2vw; transform: rotate(-1.3deg); font-family: 'Voltaire'; font-weight: bold; font-size: 3.5vw; line-height: 0.75; text-align: center; padding: 0 0.5vw; color: #AD75C9; text-shadow: 2px 2px 2px #7c5885; z-index: 1; } .factoid { width: 95%; color: #f0d5f6; background: #2a2a2a; border: 4px solid #5B00A8; box-shadow: 3px 3px 8px rgba(0,0,0,0.6); font-family: 'Cutive', serif; font-size: 1.1vw; line-height: 1.25; text-align: center; padding: 1.2vw 0.75vw 1.5vw; transform: rotate(0.8deg); z-index: -1; } .wow { position: relative; bottom: -0.15vw; right: -0.5vw; transform: rotate(-2deg); font-family: 'Voltaire'; font-weight: bold; font-size: 1.5vw; line-height: 0.75; color: #AD75C9; text-shadow: 1px 1px 2px #7c5885; text-align: right; z-index: 1; } /* ######## */ /* BUBBLE */ /* ######## */ .bubble { position: relative; left: 2%; top: 5%; width: 49%; margin: 2vw 6vw 2vw 4vw; background-color: #f0d5f6; border-radius: 3vw; padding: 0.75vw 1vw; font-family: 'Mouse Memoirs'; font-size: 1.75vw; line-height: 1.25; text-align: center; color: #452949; z-index: 2; } .speaker { position: absolute; left: 56.5%; bottom: -5%; width: 9vw; height: auto; z-index: 3; } hr.heart { width: 70%; border-top: 2px solid; border-image: linear-gradient(90deg, rgba(124,88,133,0) 10%, rgba(124,88,133,1), rgba(124,88,133,0) 90%) 100 stretch; position: relative; margin: 1.85vw auto -0.85vw; min-height: 2vw; background: transparent; } /* ########### */ /* DIVIDER */ /* ########### */ #hr.heart:after { content: '❤'; display: inline-block; position: absolute; top: -1.4vw; left: 47.75%; padding: 0 0.5vw; background: #f0d5f6; color: #7c5885; font-size: 2vw; } .stars { margin: 1.5vw auto; width: 100%; height: 3vw; background-image: url(images/stars.png); background-position: center; background-repeat: no-repeat; #background-origin: content-box; background-size: auto 100%; } /* ########### */ /* POSTERS */ /* ########### */ .posters { width: 90%; margin-left: 10%; display: grid; grid-template-columns: 30% 30% 30%; grid-gap: 1.25vw; font-size: 1vw; text-align: justify; color: #250b2d; position: relative; } .poster-top { font-family: 'Voltaire'; font-size: 2.75vw; text-decoration: underline 10%; font-variant: small-caps; line-height: 1.5; color: #250b2d; text-align: center; opacity: 90%; transform: rotate(-0.6deg); font-weight: 700; } .poster-top:before, .poster-top:after { content: " "; } .poster1 { min-height: 5vw; background: #f0d5f6; background-image: linear-gradient(135deg, rgba(240,213,246,1), rgba(212,177,220,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(-1.3deg); padding: 0.75em; margin-top: 1vw; margin-bottom: 2vw; font-weight: 500; position: relative; z-index: 2; } .poster1 p { transform: rotate(0.6deg); margin: 0; opacity: 80%; } .poster2 { min-height: 5vw; background: #e0a5eb; background-image: linear-gradient(135deg, rgba(220,182,229,1), rgba(207,161,218,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(1deg); padding: 0.75em; margin-top: 3vw; font-weight: 550; position: relative; z-index: 2; } .poster2 p { transform: rotate(-0.5deg); margin: 0; opacity: 75%; } .poster3 { min-height: 5vw; background: #f0d5f6; background-image: linear-gradient(135deg, rgba(240,213,246,1), rgba(212,177,220,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(-0.7deg); padding: 0.75em; margin-top: 2vw; margin-bottom: 1vw; font-weight: 500; position: relative; z-index: 2; } .poster3 p { transform: rotate(1.1deg); margin: 0; opacity: 80%; } .poster4 { width: 28vw; height: 95%; position: absolute; left: 7%; top: 3%; transform: rotate(2.3deg); background: #433845; #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.1); z-index: -1; } .poster4:before { content: ""; width: 26vw; height: 92%; position: absolute; left: -30%; top: 8%; transform: rotate(-3.9deg); background: #533d58; #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.2); z-index: -1; } .poster5 { width: 28vw; height: 90%; position: absolute; left: 45%; top: 11%; transform: rotate(-0.3deg); background: #433845; #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.1); z-index: -1; } .poster5:after { content: ""; width: 26vw; height: 92%; position: absolute; left: 50%; top: -2%; transform: rotate(1.8deg); background: #533d58; #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.2); z-index: -1; } .poster-para1 { font-family: 'Cutive'; text-align: center; font-weight: 400; } .poster-inter { text-align: center; font-weight: 400; line-height: 0em; margin: 0.1em auto 0.1em; } .poster-para2 { font-family: 'Cutive'; text-align: center; font-weight: 600; } /* ################ */ /* NEWS SECTION */ /* ################ */ .updates { width: 80%; margin: auto; position: relative; padding-top: 3vw; } .top-tab { position: absolute; top: 15%; left: 5%; color: #250b2d; font-family: 'Cutive', serif; background: #ebc5f2; padding: 0.35em 0.5em; font-size: 3vw; line-height: 0.5; transform: rotate(-0.3deg); z-index: 2; } .top-tab:before { content: ""; width: 10%; height: 100%; background: #ebc5f2; position: absolute; left: -3.5%; top: 2%; transform: rotate(10deg); z-index: -1; } .top-tab:after { content: ""; width: 10%; height: 100%; background: #ebc5f2; position: absolute; right: -3.5%; top: 2%; transform: rotate(-10deg); z-index: -1; } .banner { min-height: 4vw; background: #ebc5f2; box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(-0.3deg); padding: 2.75em 0.75em 0.75em; margin: 3vw auto 0.5vw; font-size: 0.9vw; font-weight: 500; position: relative; color: #250b2d; font-family: 'Cutive', serif; } .banner-mini { min-height: 2vw; box-shadow: 3px 3px 6px rgba(0,0,0,0.4); padding: 2.75em 0.75em 0.75em; margin: 1vw auto 0.5vw; font-weight: 500; position: relative; background: #ebc5f2; color: #3f1050; font-family: 'Cutive', serif; } .banner-mini:nth-last-child(4) { transform: rotate(0.2deg); margin: 0.75vw 0vw 0.25vw 2.25vw; width: 86%; font-size: 0.8vw; } .banner-mini:nth-last-child(3) { transform: rotate(-0.3deg); margin: 0.5vw 0.2vw 0.25vw 3.5vw; width: 92%; font-size: 0.7vw; } .banner-mini:nth-last-child(2) { transform: rotate(0.35deg); margin: 1vw 0.5vw 0.5vw 1.25vw; width: 80%; font-size: 0.65vw; } .more-news { position: absolute; bottom: 0%; right: 5%; background: #ebc5f2; box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(-1.3deg); padding: 0.75em; font-size: 1vw; font-weight: 500; font-family: 'Cutive', serif; } .banner-date { position: absolute; top: 2%; right: 1%; text-align: right; border-bottom: 1px solid #250b2d; } .banner-title { position: absolute; top: 2%; left: 1%; text-align: left; font-size: 120%; font-weight: 800; border-bottom: 2px solid #250b2d; } /* ############# */ /* NEWSPAPER */ /* ############# */ .newspaper { width: 20vw; min-height: 5vw; margin: 0vw 1vw 3vw 1vw; float: left; #box-shadow: 2px 2px 8px rgba(0,0,0,0.8); padding-bottom: 1vw; position: relative; } .broadsheet { background-image: linear-gradient(0deg, rgba(183,180,176,0) 1%, rgba(221,218,213,1) 14%, rgba(247,243,237,1) 96%, rgba(221,218,213,1)); font-family: 'Cutive'; } .tabloid { background-image: linear-gradient(0deg, rgba(183,180,176,0) 1%, rgba(221,218,213,1) 14%, rgba(247,243,237,1) 96%, rgba(221,218,213,1)); font-family: 'Paytone One'; } .vintage { background-image: linear-gradient(0deg, rgba(191,153,105,0) 1%, rgba(217,185,126,1) 14%, rgba(242,221,182,1) 96%, rgba(217,185,126,1)); font-family: 'VTPortableRemington'; } .newspaper-formatting { position: absolute; top: 0; height: 100%; width: 100%; } .newspaper-formatting::before { content: ''; position: absolute; left: .05vw; top: 0; height: 100%; width: 2px; background-image: linear-gradient(0deg, rgba(56,55,53,0), rgba(56,55,53,1) 80%, rgba(56,55,53,1)); } .newspaper-formatting::after { content: ''; position: absolute; right: .05vw; top: 0; height: 100%; width: 2px; background-image: linear-gradient(0deg, rgba(56,55,53,0), rgba(56,55,53,1) 80%, rgba(56,55,53,1)); } .newspaper-headline { width: 90%; margin: auto; color: #2f2f2f; text-shadow: 0 0 2px #383735; text-transform: uppercase; font-weight: 900; text-align: justify; text-align-last: justify; text-justify: inter-character; font-size: 1.5vw; letter-spacing: .05em; line-height: 125%; padding: 0.5vw 0.5vw 0.25vw; } .newspaper-subheading { width: 90%; margin: auto; color: #2f2f2f; text-shadow: 0 0 2px #383735; text-transform: uppercase; font-weight: 900; text-align: justify; text-align-last: justify; text-justify: inter-character; font-size: 0.9vw; line-height: 130%; padding: 0.5vw 0vw 0.5vw; border-top: 2px solid #777673; } .newspaper-article { width: 90%; margin: auto; color: #2f2f2f; text-shadow: 0 0 2px #383735; font-size: 0.85vw; text-align: justify; text-justify: inter-word; letter-spacing: .05em; padding: 0.5vw 0vw 0.5vw; border-top: 2px solid #777673; line-height: 130%; } .newspaper-citation { color: #eee; text-align: right; position: absolute; font-size: 0.9vw; bottom: -1.25vw; right: 0; font-family: 'Voltaire'; } /* ########### */ /* FICTION */ /* ########### */ .fiction-full { color: #f0d5f6; border-top: 2px solid #A300E4; border-bottom: 2px solid #A300E4; font-size: 0.8rem; line-height: 175%; text-align: justify; text-justify: inter-word; letter-spacing: .05rem; width: 80%; min-height: 5vw; margin: 0.25vw auto 1.25vw; padding: 0.7rem 1rem 1rem; position: relative; } .fiction-left { color: #f0d5f6; border-top: 2px solid #A300E4; border-bottom: 2px solid #A300E4; font-size: 0.75rem; line-height: 150%; text-align: justify; text-justify: inter-word; letter-spacing: .1rem; width: 20vw; float: left; min-height: 5vw; margin: 0.25vw 1.5vw 1.25vw 0.5vw; padding: 0.7rem 0.7rem 1rem; position: relative; } .fiction-right { color: #f0d5f6; border-top: 2px solid #A300E4; border-bottom: 2px solid #A300E4; font-size: 0.75rem; line-height: 150%; text-align: justify; text-justify: inter-word; letter-spacing: .05rem; width: 20vw; float: right; min-height: 5vw; margin: 0.25vw 0.5vw 1.25vw 1.5vw; padding: 0.7rem 0.7rem 1rem; position: relative; } .fiction-citation { color: #999; text-align: right; position: absolute; font-size: 1rem; bottom: -1.3rem; right: 0; font-family: 'Voltaire'; }