// _ar2017.scss /* =================================== PEPPERDINE SASS MIXINS =================================== */ @import 'pepperdine-mixins'; /* ====================================================================== */ /* ============================================== PHONE 300px ============================================== */ .hidemobile, .hidemobile2 { display: none; } /* =============== TEMPLATE =============== */ .copyright { position: relative; display: block; float: left; width: 100%; margin: 0; padding: $gridGutter 0; color: $pepBone; text-indent: 50px; background-color: $altWarmGrey; .full { background-image: url('/_resources/images/template/pepperdine-seal.svg'); background-repeat: no-repeat; background-position: 0 50%; background-size: 48px 96px; } p, address { color: $pepBone; font-size: .8em; a { color: $pepBone; } } .phone { display: block; margin-top: .6em; } a { text-decoration: underline; } a[href^="http://a.cms.omniupdate.com"] { cursor: text; text-decoration: none; } address + p { margin-bottom: 0; } p.homelink { margin-bottom: .5em; } } main { max-width: 1020px; margin: 20px auto; } /* =============== HOME =============== */ .home main { max-width: none; width: 100%; margin: 0 auto; padding: 0; } .home article { padding: 0; background-color: #fdd892; } .home .bkg { display: inline-block; width: (100% - ($gridGutter *4)); padding: 0 ($gridGutter *2) ($gridGutter *1.5) ($gridGutter *2); background-repeat: no-repeat; background-size: cover; background-position: center top; background-image: url(/annualreports/2017/images/home/bread.jpg); box-shadow: 0 0 50px rgba(0, 0, 0, .8); &.home { transform: scale(1); -webkit-animation: movebackground 6s ease-out; -moz-animation: movebackground 6s ease-out; -o-animation: movebackground 6s ease-out; } } .home .nobkg { display: inline-block; padding: ($gridGutter *1.5) ($gridGutter *2); } @-webkit-keyframes movebackground { 0% { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-moz-keyframes movebackground { 0% { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } /* ========== MENU ========== */ .section-row { &.fullwide { figure { width: 100% - $gridGutter; } } &.halves { figure { width: 100% - $gridGutter; } } &.thirds { figure { width: 100% - $gridGutter; } } &.quarters { figure { width: (1/2 * 100%) - $gridGutter; } } .section-row { width: 100% + $gridGutter; margin: -$gridMargin; figure { margin: 0; } &.fullwide { figure { position: absolute; top: 0; left: 0; width: 100%; border-bottom: 12px solid $white; } } &.halves { figure:nth-of-type(1) { position: absolute; bottom: 0; left: 0; width: (1/2 * 100%) - $gridMargin; margin-right: $gridMargin; border-top: 12px solid $white; border-right: 9px solid $white; } figure:nth-of-type(2) { position: absolute; bottom: 0; right: 0; width: (1/2 * 100%) - $gridMargin; margin-left: $gridMargin; border-top: 12px solid $white; border-left: 9px solid $white; } } } } .standard .section-row { &.thirds { figure { width: (1/3 * 100%) - $gridGutter; } } } figure.menutiles { position: relative; display: block; float: left; max-width: 100%; width: auto; margin: $gridMargin; padding: 0; background-color: #513629; vertical-align: top; overflow: hidden; -webkit-backface-visibility: hidden; /* for Chrome lines */ box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); img { display: block; } img.svgtext { width: 90%; margin: 3% auto 5% auto; } figcaption { position: absolute; display: block; bottom: 0; width: 100%; height: inherit; margin: 0; padding-top: 5px; color: $white; } &:hover { /* box-shadow: 0 0 30px #000;*/ box-shadow: 5px 5px 25px #000; } h3 { margin: 0; /* padding: .95em 18px;*/ padding: .6em 15px; color: $white; font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif; font-size: 2.25rem; line-height: 1.1em; text-align: center; } } .standard figure.menutiles { &:hover { box-shadow: 0 0 30px #fdd892; outline: 1px solid rgba(253, 216, 146, 0.6); outline-offset: -1; } } /* =============== PAGES =============== */ body.standard { background-color: $RichBlack; } .sitetitle { padding: 0 $gridMargin 9px $gridMargin; background-color: $RichBlack; a { color: #fff; font-size: .85rem; &:before { content: '\e80c'; color: $pepOrange; font-family: "fontello"; padding-right: 5px; } &:hover { color: #fff; } } } header { .mainimage { position: relative; overflow: hidden; .pagetitle { position: absolute; display: block; bottom: 0; right: 0; width: 75%; height: inherit; margin: 0 20px 0 0; } } } article { display: inline-block; padding: $gridMargin ($gridGutter * 2) ($gridGutter * 2) ($gridGutter * 2); background-color: #fff; } article:not(onecol) { background-repeat: no-repeat; background-position: center -35px; background-size: 90%; } footer { display: inline-block; width: 100% - ($gridGutter *2); padding: $gridGutter $gridGutter 0 $gridGutter; margin: 0; .grid_container .item { background-color: darken(#a8aca1, 15%); &.current { background-color: #a8aca1; } } } .grid-close { z-index:30; position: fixed; display: inline-block; top: $gridGutter; right: $gridGutter; width: 41px; height: 41px; background-size: cover; background-image: url(/annualreports/2017/images/template/grid-close-orange.png); background-position: 0 0; background-repeat: no-repeat; background-size: 41px 41px; background-color: #fff; border-radius: 100%; &:hover { background-image: url(/annualreports/2017/images/template/grid-close-drkorange.png); } } /* text elements */ article p { font-size: 1.15rem; /*15px*/ margin-bottom: 1em; } blockquote { max-width: 680px; margin: 40px auto 15px auto; color: $pepBlue; text-align: center; p { margin-bottom: .5em !important; font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif; font-size: 1.4rem !important; font-weight: 400; letter-spacing: .02em; } .byline { color: $altWarmGrey; font-size: 1rem !important; font-weight: 300; font-style:italic; } } /*.onecol blockquote { margin: 15px auto 40px auto; padding: 0 1.5em 10px 1.5em; border-bottom: 1px dashed #fecf85; }*/ article p { .leadtext { color: $altOrange; font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif; font-size: 2rem; line-height: 1.1em; font-weight: 300; letter-spacing: .03em; text-transform: uppercase; } .secondary { color: #513629; font-family: 'Helvetica Neue', Helvetica, sans-serif, 'Oswald'; font-size: 1.45rem; line-height: 1.3em; font-weight: 300; } } .sidebar { float: left; width: 100% - $gridGutter; margin: -$gridMargin $gridMargin $gridMargin $gridMargin; padding-top: 4px; .sideimage { float: left; width: (1/2 * 100%) - ($gridGutter *2); margin: 15px $gridGutter; } .sideimage:nth-of-type(3) { clear: left; } } .support-stories .full { width: 100% - ($gridGutter * 3); padding: 2% $gridGutter; &:nth-of-type(odd) { background-color: $LightGrey; } p { font-size: 1rem; .leadtext { font-size: 1.5rem; } .secondary { font-size: .8em; font-size: 1.25rem; } } figure.caption.third { width: 100%; img { max-width: 90%; margin: 0 auto 1.1em auto; } } } /* ===== BOARDS ===== */ ul.columns { margin: 0; padding: 0; list-style: none; column-count: 2; column-gap: 20px; column-width: 180px; -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-width: 180px; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-width: 180px; li { display: inline-block; width: 100%; margin: 0 0 1em 0; font-size: 1rem; line-height: 1.15em; h4 { margin: 0; } p { margin: .2em 0 .5em 0; font-size: .9rem; line-height: 1.39em; } } } /* ========================================== Phone Landscape 480px ========================================== */ @media only screen and (min-width:380px) { /* =============== Footer =============== */ .copyright { text-indent: 83px; .full { background-position: 10px 50%; background-size: 54px 108px; } } } @media only screen and (min-width:450px) {} @media only screen and (min-width:480px) { /* =============== Footer =============== */ .copyright { text-indent: 105px; .full { background-position: 15px 50%; background-size: 57px 114px; } } } /* =============================================== NEW 560px =============================================== */ @media only screen and (min-width:560px) { /* =============== HOME =============== */ /* =============== PAGES =============== */ .threequarters { width: 100 - $gridGutter; } } @media only screen and (min-width:600px) { /* =============== HOME =============== */ figure.menutiles { h3 { padding: 1.15em 18px; font-size: 2.7rem; } } } /* =============================================== TABLET 640px =============================================== */ @media only screen and (min-width:640px) { main { margin: 60px auto; } /* =============== Footer =============== */ .copyright { padding: 5px 0 15px 0; text-indent: 75px; text-align: left; .full { background-position: 15px 50%; background-size: 42px 84px; } .phone { display: inline; margin-top: 0; &::before { content: ' \A0| \A0'; } } } /* =============== HOME =============== */ figure.menutiles { h3 { padding: .7em 10px; font-size: 1.5rem; } } /* ========== MENU ========== */ .section-row { &.fullwide { figure { width: 100% - $gridGutter; } } &.halves { figure { width: (1/2 * 100%) - $gridGutter; } } &.thirds { figure { width: (1/3 * 100%) - $gridGutter; } } &.quarters { figure { width: (1/4 * 100%) - $gridGutter; } } .section-row { width: 100% + $gridGutter; margin: -$gridMargin; figure { } &.fullwide { figure { border-bottom: 15px solid $white; } } &.halves { figure:nth-of-type(1) { width: (1/2 * 100%) - $gridGutter; margin-right: $gridGutter; border-top: 15px solid $white; border-right: 15px solid $white; } figure:nth-of-type(2) { width: (1/2 * 100%) - $gridGutter; margin-left: $gridGutter; border-top: 15px solid $white; border-left: 15px solid $white; } } } } /* =============== PAGES =============== */ article p { font-size: 1.05rem; /*15px*/ margin-bottom: 1em; } blockquote { margin: 60px auto 8.8% auto; } /*.onecol blockquote { margin: 20px auto 50px auto; padding: 0 2.5em 10px 2.5em; }*/ /*changed spot of 3/4 and sidebar */ .support-stories .full { p { font-size: .95rem; .leadtext { font-size: 1.65rem; } .secondary { font-size: .7em; font-size: 1.25rem; } } figure.caption.third { width: ((1/3)*100%) + $gridGutter; img { max-width: auto; margin: 0; } } } .articles .support-stories .full { p { .leadtext { font-size: 1.5rem; } } background: none; border-bottom: 1px dashed #fecf85; padding-bottom: 15px; margin-bottom: 15px; } } /* ============================================== NEW 768px ============================================== */ @media only screen and (min-width:768px) { .hidemobile { display: block; } /* =============== HOME =============== */ figure.menutiles { h3 { padding: .5em 10px; font-size: 2rem; } } /* =============== PAGES =============== */ header { .mainimage { .pagetitle { width: 60%; margin: 0 20px 0 0; } } } .threequarters { width: ((3/4)*100) - $gridGutter; } .sidebar { width: (1/4 * 100%) - $gridGutter; .sideimage { width: 100% - $gridGutter; margin: 30px 0 30px $gridGutter; } .sideimage:nth-of-type(3) { clear: none; } } /*.onecol blockquote { margin: 20px 2.5em 50px 2.5em; }*/ } /* ============================================ TABLET (2) 840px ============================================ */ @media only screen and (min-width:840px) { /* =============== Footer =============== */ .copyright { .full { margin: 20px auto 15px auto; float: none; width: 57%; background-size: 44px 88px; } } /* =============== HOME =============== */ /* =============== PAGES =============== */ /* ===== BOARDS ===== */ ul.columns { margin: 0; padding: 0; list-style: none; column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; } } /* ============================================ DESKTOP 980px ============================================ */ @media only screen and (min-width:900px) { /* =============== HOME =============== */ figure.menutiles { h3 { padding: .7em 12px; font-size: 2.1rem; } } } @media only screen and (min-width:980px) { /* =============== PAGES =============== */ header { .mainimage { .pagetitle { width: 55%; margin: 0 20px 15px 0; } } } } @media only screen and (min-width:1080px) { /* =============== HOME =============== */ .hidemobile2 { display: initial; } figure.menutiles { h3 { padding: 20% 12px; font-size: 2.2rem; } } } /* ======================================== LARGE DESKTOP 1655px ======================================== */ @media only screen and (min-width:1655px) {} @media only screen and (max-height:500px) {} @media only screen and (min-height:640px) {}