Thank You 2020: Difference between revisions
Content deleted Content added
Seddon (WMF) (talk | contribs) No edit summary |
Seddon (WMF) (talk | contribs) No edit summary |
||
Line 1:
<html><body>
<style>
html, body {
margin: 0 auto;
text-align: center; }
body {
margin: 0 auto; }
html{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
body{
margin:0
}
*{
box-sizing:border-box
}
address,article,aside,blockquote,canvas,dd,div,dl,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,li,main,nav,noscript,ol,output,p,.p,pre,section,table,tfoot,ul,video{
margin:0;
padding:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
display:block
}
input, textarea {
display: block;
width: 100%;
border: 1px solid
#b6c3cc;
border-radius: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding: .625rem;
background: 0 0;
}
button, input, optgroup, select, progress, meter, textarea {
color: inherit;
font: inherit;
font-size: inherit;
margin: 0;
padding: 0;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
a{
text-decoration:none;
color:inherit
}
a:focus {outline:1px dotted currentColor}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:100%;background:#fff;color:#000;text-align:left;direction:ltr}
.mar-bottom{margin-bottom:16px}
h1,h2 {
font-size:inherit;
font-weight:700
}
h1,.h1{font-size:1.875rem}
@media (min-width:768px) and (max-width:1280px){
h1,.h1{font-size:2.9375rem}
}
@media (min-width:1281px){
h1,.h1{font-size:4rem}
}
h2,.h2{margin-bottom:2rem;font-size:1.125rem}
@media (min-width:768px){
h2,.h2{margin-bottom:2rem}
}
@media (min-width:768px) and (max-width:1280px){
h2,.h2{font-size:1.25rem}
}
@media (min-width:1281px){
h2,.h2{font-size:1.375rem}
}
h3,.h3{margin-bottom:2rem;font-size:1.125rem}
@media (min-width:768px){
h3,.h3{margin-bottom:2rem}
}
@media (min-width:768px) and (max-width:1280px){
h3,.h3{font-size:1.25rem}
}
@media (min-width:1281px){
h3,.h3{font-size:1.375rem}
}
p,.p{font-size:.8125rem;line-height:1.466}
@media (min-width:768px) and (max-width:1280px){
p,.p{font-size:.875rem}
}
@media (min-width:1281px){
p,.p{font-size:.9375rem}
}
strong {font-weight:700}
.mw-1120{max-width:70rem;padding:0 1.25rem;margin:0 auto}
@media (min-width:768px){.mw-1120{padding:0}}
.w-100p{width:100%;max-width:100%}
.flex.flex-medium{display:flex;flex-direction:column}
@media (min-width:768px){.flex.flex-medium{flex-direction:row;flex-wrap:nowrap}}
.flex.flex-wrap{flex-wrap:wrap}
.flex.flex-space-between{justify-content:space-between}
.flex.flex-align-center{align-items:center}
.mod-margin-bottom_sm{margin-bottom:2rem}
@media (min-width:768px){.mod-margin-bottom_sm{margin-bottom:0}}
.wysiwyg p a,.wysiwyg .p a,.wysiwyg li a{color:#3a25ff}
.wysiwyg p a:hover,.wysiwyg .p a:hover{text-decoration:underline}
.header-home a{transition:.3s all}
.header-home .header-content{position:relative;z-index:1}
.card{position:relative}
@media (min-width:768px){
.card{margin-right:1.25rem}
.card:last-child{margin-right:0}
}
@media (min-width:768px){.img-left-content-right .card{display:flex;justify-content:flex-end}}
.screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* buttons */
.btn{
display:inline-block;
font-weight:700;
border-radius:5px;
cursor:pointer;
padding:1rem 1.5rem;
padding:.6rem 1rem;
transition:.3s all;
border:none;
outline:none
}
.btn:hover{
box-shadow:0 10px 20px 0 rgba(0,0,0,.21)
}
@media (min-width:1200px){
.btn.btn-blue,
.btn.btn-pink{
padding:11px 1.5rem
}
}
.btn.btn-blue,
.btn.btn-blue:hover{
background-color:#3a25ff;
color:#fff;
}
.btn.btn-blue:focus{
outline:1px dotted #3a25ff
}
.btn.btn-pink,
.btn.btn-pink:hover{
background-color:#d40356;
color:#fff;
}
.btn.btn-pink:focus{
outline:1px dotted #d40356
}
.btn.btn-lt-blue{
background-color:#eeeaff;
color:#3a25ff;
}
.btn.btn-lt-blue:hover{
background-color:#3a25ff;
color:#fff;
}
.btn.btn-lt-blue:focus{
outline:1px dotted #3a25ff
}
.btn.btn-lt-pink {
background-color:#fde8f0;
color:#d40356;
}
.btn.btn-lt-pink:hover{
background-color:#d40356;
color:#fff;
}
.btn.btn-lt-pink:focus{
outline:1px dotted #d40356
}
/* header */
.header-home {
position: relative;
background: #fff
}
.logo-container {
width:320px;
margin: auto;
margin-bottom: 1.5rem;
}
.logo-container a {
display:inline-block;
width: 45%;
margin: 0 2%;
}
.logo-container a:hover {
opacity:.8
}
.logo-container svg {
width:100%;
max-width:17.4375rem;
margin: auto
}
.logo-container svg path {
fill: white;
}
.wikipedia-logo {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.btn-label-a11y{font-size:0;height:1px;overflow:hidden;display:block}
/* hero */
.header-img {
width: 100%;
position: relative;
left: 50%;
right: 50%;
margin-left: -50%;
margin-right: -50%;
padding: 0;
height: auto;
/*overflow-x: hidden;*/
}
@media (min-width:768px){
.header-img {
height: 175px;
}
}
.header-bg-img {
position:relative;
height: 175px;
width:100%;
background-image:url("https://wikimediafoundation.org/wp-content/themes/shiro/assets/src/svg/header.svg");
background-size:cover;
background-position: -150px center;
background-repeat:repeat-x;
animation:mover 300s linear infinite
}
@media (min-width:768px){
.header-bg-img {
position:absolute;
height:100%;
width:100%;
z-index:-1;
background-position:0 0;
}
}
.mw-1120{
max-width:70rem;
height: 100%;
padding:0;
margin:0 auto;
position: relative;
}
.vision_container {
transition: height .3s ease;
display: inline-block;
padding: .4rem 1rem .6rem;
text-align: center;
background: #fefd34;
position: absolute;
bottom: -1rem;
left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media (max-width:767px){
.vision_container {
width: 100%;
position: relative;
bottom: auto;
}
}
.vision_container h1 {
font-size: 1.4rem;
}
@media (min-width:768px){
.vision_container h1 {
white-space: nowrap;
}
}
@media (min-width:1023px){
.vision_container h1 {
font-size: 1.8rem;
}
}
/* thank you message */
.w-68p, .email-signup .w-32p {
width:100%;
text-align: center;
}
@media (min-width:1025px){
.w-68p {
width:68%;
margin: auto;
padding: 0;
}
.w-32p,
.email-signup .w-32p {
width: 32%;
}
}
.page-intro {
margin:2rem auto auto;
padding: .5rem 0 2rem;
text-align: center;
max-width: 1000px;
}
@media (max-width:1024px){
.page-intro {
padding:1.5rem;
margin:0;
}
}
.page-intro p {
font-size: 1.1rem;
}
/* share links */
.w-50p {
width:100%;
margin: auto;
}
@media (min-width:768px){ .w-50p { width:50% } }
.social-share{margin-top:auto;width:100%;align-self:flex-end}
@media (min-width:768px){
.mw-600 {
max-width:37.5rem;
margin: auto;
}
.mw-620 {
max-width:38.75rem;
margin: auto;
}
.page-intro .mw-600 {
padding: 1rem 0;
}
}
@media (min-width:1025px){
.page-intro .mw-600 {
padding: 1rem 0 2.5rem;
}
}
.link-list a {
color: #3a25ff;
display: inline-flex;
}
.link-list > li {
list-style-type: none;
}
.link-list {
font-size: .8125rem;
}
/* featured action */
.cta-primary {
background: #fdf3f8;
padding: 3rem 0;
}
.cta-primary .card {
color:#000;
padding: 0 1.25rem;
text-align: center;
}
@media (min-width:768px){
.cta-primary .card{
padding: 0;
text-align: left;
}
}
.cta-primary .card-content.w-68p {
text-align: left;
}
@media (min-width:768px){.cta-primary .card-content{padding:2rem 0;margin-top:0}}
@media (max-width:768px){.cta-primary .card-content{padding:1rem 0}}
.cta-primary .h2,
.cta-primary .h3 { color:#d40356;line-height:1.2 }
.cta .card-content{position:relative;z-index:2}
@media (min-width:768px){.cta .card-content{padding:.75rem 0}}
.cta .card-content .h2 {
font-size:2rem;
margin-bottom: 1rem;
}
.cta .card-content p,.
.cta .card-content .p { margin-bottom:1.5rem }
@media (min-width:768px){
.cta .card-content p,
.cta .card-content .p {
margin-bottom:1.25rem
}
}
.cta-description {
font-size:1.1rem;
line-height:1.45;
}
.small {
font-size:.95rem;
line-height:1.45;
}
.cta-primary a { color:#d40356; }
.cta-primary p a:hover { color:#3a25ff; }
.w-25p,
.w-32p,
.w-75p { width:100% }
@media (min-width:768px){
.w-25p { width:25% }
.w-32p { width:32% }
.w-75p { width:75% }
}
.sm-img-container {
vertical-align: top;
}
.sm-img {
position:relative;
overflow:hidden;
position:relative;
height:auto;
width:35%;
max-width: 120px;
}
@media (min-width:768px){
.sm-img {
width:70%;
}
}
/* other ctas */
.other-ctas {
padding: 1.25rem;
}
@media (min-width:1025px){
.other-ctas {
padding: 3rem;
}
}
.bg-ltgray {
background: #eaecf0;
}
.other-ctas .h2 {
text-align: center;
font-size: 1.5rem;
}
@media (min-width:768px){
.other-ctas .h2 {
font-size: 2rem;
}
}
.rounded{border-radius:5px}
.shadow{border:1px solid #e5e5e5;transition:all .25s ease}
/*.shadow:hover{box-shadow:0 5px 20px 0 rgba(0,0,0,.15)} */
.focus-block {
background-color:#fff;
overflow:hidden;
display:block
}
.focus-block .card,
.focus-block .card-content {
height:100%;
display:block
}
.focus-block .card-content{ padding:1.5rem }
@media (max-width:1023px){
.focus-block .card-content .btn { max-width: calc(100% - 3rem);}
}
.focus-block .stick-to-bottom {
position:absolute;
bottom:22px
}
@media (max-width:1023px){
.focus-block .email-signup.stick-to-bottom { position:relative; bottom:auto }
}
.focus-block .mar-bottom {
padding-bottom:2rem;
display:block
}
@media (max-width:1023px){
.signup.focus-block .mar-bottom { padding-bottom:0; }
}
.focus-block .h3 {
margin-bottom:.3125rem;
font-size:1.5rem;
line-height: 1.2;
}
@media (min-width:768px){.focus-block .h3{margin-bottom:.3125rem}}
.focus-block p {
margin-bottom: 1rem;
}
.focus-block .small {
font-size: .85rem;
}
.focus-block p a {
text-decoration: underline;
}
.focus-block a:hover {
color: #3a25ff;
}
/* footer */
footer{padding:3rem 1.5rem;}
footer.bg-black{background:#54595d}
.color-white{color:#fff;transition:.3s all}
@media (min-width:768px){footer{padding:3rem 0 4rem}}
footer .footer-legal {
text-align:center;
}
footer .footer-legal p,
footer .footer-legal .p {
padding-bottom:.75rem;
font-size:.75rem;
line-height: 1.3;
}
@media (min-width:768px) and (max-width:1280px){footer .footer-legal p,footer .footer-legal .p{font-size:.85rem}}
@media (min-width:1281px){footer .footer-legal p,footer .footer-legal .p{font-size:.95rem}}
footer .footer-legal p a,
footer .footer-legal .p a {text-decoration:underline}
/* Video */
.video-container {
position: relative;
width: 100vw;
height: 56.25vw;
max-height: 81vh;
max-width: 144vh;
max-height: 72vh;
max-width: 128vh;
margin: auto auto 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Email form */
.email-signup #wmf-subscribe-input-email {
box-sizing: border-box;
padding-left: 1rem;
border-radius: 5px;
background:
#fff;
margin: 0;
height: 100%;
}
@media (min-width:1024px){
.email-signup #wmf-subscribe-input-email {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.email-signup input {
padding:.8rem 1rem;
color:#3a25ff;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input {
font-size:1.25rem
}
}
.email-signup input:focus {
background:#f1f3f5;
outline:2px solid #3a25ff;
box-shadow:0px 0px 5px 1px #3a25ff
}
@media (max-width:1155px) {
.email-signup input {
max-width:31.25rem
}
}
.email-signup input::-webkit-input-placeholder {
color:#6d7378;
font-weight:700;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input::-webkit-input-placeholder {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input::-webkit-input-placeholder {
font-size:1.25rem
}
}
.email-signup input::-moz-placeholder {
color:#6d7378;
font-weight:700;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input::-moz-placeholder {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input::-moz-placeholder {
font-size:1.25rem
}
}
.email-signup input:-ms-input-placeholder {
color:#6d7378;
font-weight:700;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input:-ms-input-placeholder {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input:-ms-input-placeholder {
font-size:1.25rem
}
}
.email-signup input:-moz-placeholder {
color:#6d7378;
font-weight:700;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input:-moz-placeholder {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input:-moz-placeholder {
font-size:1.25rem
}
}
.email-signup .btn {
box-sizing: border-box;
height: 100%;
}
@media (min-width:1025px){
.email-signup .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 1.03rem .78rem;
}
.email-signup .flex { width: calc(100% - 1.5rem); }
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
</style>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
| |||