footer.css.scss 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. @mixin clearfix {}
  2. @mixin opacity($opacity) {
  3. opacity: $opacity;
  4. filter: unquote("alpha(opacity=#{$opacity * 100})");
  5. }
  6. /* Newsletter */
  7. #newsletter {
  8. padding: 20px 0;
  9. background: #085a78; padding: 10px 0 10px 0;
  10. h5 { font-size: 20px;font-family: "OpenSans Light", sans-serif;
  11. font-weight: 400; margin-bottom: 0px; margin-top: 10px; color: #fff; line-height: 24px; }
  12. p { clear: both; font-size: 13px; padding-top: 2px; color: #fff; }
  13. a { color: #fff; }
  14. .margintop-20px{
  15. margin-top:20px;
  16. }
  17. .row.collapse form {
  18. input[type="text"] { font-size: 17px; font-weight: 200; color: #999; border: 0; }
  19. .button { border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background: #257696; }
  20. .button:hover { background: #1b566d; }
  21. }
  22. }
  23. /* Global Footer */
  24. .zurb-footer-top {
  25. padding: 24px 0px 12px; color: white;
  26. .row .columns { @include clearfix(); }
  27. &.zurb { background-position: 10px 7px; }
  28. .property {
  29. text-align: center;
  30. .property-info { padding-top: 37px; }
  31. h2 {
  32. margin: 0; padding: 0 !important;
  33. a {
  34. -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; font-family: "zurb-logo"; font-weight: normal; font-size: em-calc(18px); padding: 0;
  35. &:hover { @include opacity(0.8); }
  36. &.services { width: 190px; }
  37. span { display: none; }
  38. strong { font-size: 17px; margin-left: -7px; }
  39. }
  40. }
  41. h3 { font-size: 1.4rem; font-weight: bold; color: white; margin-bottom: 20px; }
  42. h4 { font-size: 1.1rem; font-weight: 200; color: white; margin-bottom: 10px; }
  43. p, li, a { font-size: 13px; line-height: 21px; color: white; }
  44. a {
  45. font-weight: bold; color: white;
  46. }
  47. }
  48. .learn-links, .support-links, .connect-links {
  49. border-left: 1px solid rgba(255, 255, 255, 0.2);
  50. ul { margin-left: 0px !important;
  51. list-style: none;
  52. li { line-height: 20px; }
  53. }
  54. }
  55. .connect-links {
  56. .button { font-size: 12px; font-weight: normal; background: rgba(0, 0, 0, 0.1); color: #FFF !important; font-weight: bold; text-shadow: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; border: none; padding: 6px 16px; }
  57. }
  58. .global {
  59. border-top: 1px solid rgba(255, 255, 255, 0.2);
  60. .footer-link-block {
  61. font-weight: normal; display: block; margin: 30px 0 0 0;
  62. span {
  63. display: block; color: white; font-size: 0.75rem; padding-left: 40px; line-height: 18px;
  64. &.title { font-size: 1.0rem; margin-bottom: 5px; }
  65. }
  66. }
  67. }
  68. .zurb-footer-top .property h4 { text-transform: none; }
  69. ul.zurb-links { margin: 0; display: inline-block; padding-bottom:0px;
  70. li { display: block; float: left; margin-left: 6px; text-transform: uppercase; font-weight: 700; font-size: 0.75rem ;
  71. a { color: #666; padding: 3px 6px;
  72. &:hover { color: #777; }
  73. }
  74. }
  75. }
  76. p.copyright { margin: 6px 0 0; font-size: 0.75rem; color: #666; }
  77. ul.home-social { display: block; float: right; margin-bottom: 8px;
  78. li { list-style: none; display: block; float: left; margin-left: 10px;
  79. &:first-child { margin-left: 0; }
  80. a { display: block; height: 50px; width: 50px;
  81. &:hover { @include opacity(0.8); }
  82. &.twitter { background-position: center 0; }
  83. &.facebook { background-position: center -200px; }
  84. &.mail { background-position: center -400px; }
  85. }
  86. }
  87. }
  88. }
  89. @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  90. .zurb-footer-top .property { padding-top: 0px;
  91. .learn-links, .support-links, .connect-links { height: 240px; padding: 50px 10px 0; }
  92. }
  93. }
  94. @media only screen and (max-width: 767px) {
  95. .zurb-footer-top {
  96. .property {
  97. .property-info { padding-top: 0px; }
  98. .learn-links, .support-links, .connect-links { border: none; height: auto; padding: 80px 20px 0; margin: 4px 0 0 0; border-top: 1px dotted rgba(255, 255, 255, 0.2);
  99. li a { font-size: 15px; line-height: 2; }
  100. p, a { font-size: 16px; }
  101. }
  102. .learn-links { background-position: center -300px;padding-top: 76px 20px 0;
  103. }
  104. .support-links { padding: 76px 20px 0; background-position: center -618px; }
  105. .connect-links { padding: 76px 20px 14px ; background-position: center 10px; }
  106. }
  107. .global { border: none; }
  108. .footer-link-block {
  109. span { font-size: em-calc(11px); line-height: 16px; }
  110. &.services { border-top: 1px dotted rgba(255, 255, 255, 0.2); padding-top: 40px; margin-top: 0; background-position: center 10px !important;}
  111. }
  112. }
  113. }
  114. /* Reformating pillars */
  115. @media only screen and (max-width: 767px) {
  116. .zurb-footer-top .property .connect-links { border-bottom: 1px dotted rgba(255, 255, 255, 0.2); margin-bottom: 20px; }
  117. .zurb-footer-top .global {
  118. .footer-link-block { padding-top: 50px; text-align: center; margin: 0 !important; clear: both;
  119. span { padding-left: 0px; }
  120. &.services { border-top: 0; background-position: center 15px !important; }
  121. &.foundation { background-position: center 15px !important; }
  122. &.apps { padding-top: 80px; background-position: center 45px !important; }
  123. &.expo { padding-top: 80px; background-position: center 45px !important; }
  124. }
  125. }
  126. .zurb-footer-top .property .learn-links { background: none; border: none; padding-top: 0;margin: 0; }
  127. }
  128. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  129. .zurb-footer-top .property .learn-links { background:none; }
  130. }
  131. .zurb-footer-top {
  132. &.bg-blue { background: #118AAB; }
  133. &.bg-fblue { background: #074e68; }
  134. &.bg-green { background: #B8D30B; }
  135. &.bg-dgreen { background: #afc908; }
  136. &.bg-magenta { background: #A9014B; }
  137. &.bg-orange { background: #FF5C00; }
  138. &.bg-lorange { background: #FF6908; }
  139. &.bg-oyellow { background: #FC9200; }
  140. &.bg-loyellow { background: #FFB515; }
  141. &.bg-navy { background: #074e68; }
  142. }