BCB Bank static website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

308 line
9.0 KiB

  1. @font-face {
  2. src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
  3. font-family: archivo-black;
  4. font-style: normal; }
  5. @font-face {
  6. src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
  7. font-family: open-sans;
  8. font-weight: bolder; }
  9. @font-face {
  10. src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype");
  11. font-family: open-sans;
  12. font-weight: bold; }
  13. @font-face {
  14. src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
  15. font-family: open-sans;
  16. font-style: normal; }
  17. @font-face {
  18. src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype");
  19. font-family: open-sans;
  20. font-weight: normal;
  21. font-style: italic; }
  22. *, *:before, *:after {
  23. -webkit-tap-highlight-color: transparent;
  24. box-sizing: border-box; }
  25. * {
  26. margin: 0;
  27. padding: 0;
  28. box-sizing: border-box; }
  29. a {
  30. color: inherit;
  31. text-decoration: none; }
  32. html, body {
  33. font-family: open-sans; }
  34. html.non-scrollable, body.non-scrollable {
  35. overflow: hidden; }
  36. mark {
  37. background-color: transparent; }
  38. .temp-intro,
  39. .temp-intro-home,
  40. #footer {
  41. background-color: #403e41;
  42. display: flex;
  43. justify-content: space-between;
  44. padding: 15px 0;
  45. color: #808285;
  46. font-size: 14px; }
  47. .temp-intro .temp-name,
  48. .temp-intro-home .temp-name,
  49. #footer .temp-name {
  50. margin-left: 125px; }
  51. @media screen and (max-width: 1024px) {
  52. .temp-intro .temp-name,
  53. .temp-intro-home .temp-name,
  54. #footer .temp-name {
  55. margin-left: 20px; } }
  56. .temp-intro .temp-name mark,
  57. .temp-intro-home .temp-name mark,
  58. #footer .temp-name mark {
  59. color: white;
  60. font-weight: bold;
  61. letter-spacing: 0.8px; }
  62. .temp-intro .temp-social,
  63. .temp-intro-home .temp-social,
  64. #footer .temp-social {
  65. display: flex;
  66. margin-right: 125px; }
  67. @media screen and (max-width: 1024px) {
  68. .temp-intro .temp-social,
  69. .temp-intro-home .temp-social,
  70. #footer .temp-social {
  71. margin-right: 20px; } }
  72. .temp-intro .temp-social li,
  73. .temp-intro-home .temp-social li,
  74. #footer .temp-social li {
  75. list-style: none;
  76. align-self: center;
  77. padding: 0 10px;
  78. font-size: 12px; }
  79. .temp-intro small,
  80. .temp-intro-home small,
  81. #footer small {
  82. font-size: 14px; }
  83. @media screen and (max-width: 1024px) {
  84. .temp-intro small,
  85. .temp-intro-home small,
  86. #footer small {
  87. display: block;
  88. text-align: center;
  89. padding: 5px 0; } }
  90. .temp-intro small:first-child,
  91. .temp-intro-home small:first-child,
  92. #footer small:first-child {
  93. margin-left: 125px; }
  94. @media screen and (max-width: 1024px) {
  95. .temp-intro small:first-child,
  96. .temp-intro-home small:first-child,
  97. #footer small:first-child {
  98. margin: 0; } }
  99. .temp-intro small:last-child,
  100. .temp-intro-home small:last-child,
  101. #footer small:last-child {
  102. margin-right: 125px; }
  103. @media screen and (max-width: 1024px) {
  104. .temp-intro small:last-child,
  105. .temp-intro-home small:last-child,
  106. #footer small:last-child {
  107. margin: 0; } }
  108. .temp-intro small mark,
  109. .temp-intro-home small mark,
  110. #footer small mark {
  111. color: #d2d4d5; }
  112. @media screen and (max-width: 1024px) {
  113. #footer {
  114. display: block; } }
  115. #page-header {
  116. height: 20vh;
  117. position: sticky;
  118. display: flex;
  119. top: 0;
  120. left: 0;
  121. background-color: white;
  122. z-index: 100;
  123. transition: height 500ms linear; }
  124. @media screen and (max-width: 1024px) {
  125. #page-header {
  126. height: 10vh; } }
  127. #page-header.minimize {
  128. height: 10vh;
  129. padding: 10px 0; }
  130. #page-header .inner-header {
  131. width: 90%;
  132. display: flex;
  133. justify-content: space-between;
  134. margin: 0 auto;
  135. align-self: center; }
  136. @media screen and (max-width: 1024px) {
  137. #page-header .inner-header {
  138. width: 100%;
  139. justify-content: none; } }
  140. #page-header .temp-brand {
  141. display: flex;
  142. align-self: center;
  143. width: auto;
  144. justify-content: center;
  145. cursor: pointer; }
  146. @media screen and (max-width: 1024px) {
  147. #page-header .temp-brand {
  148. justify-content: unset;
  149. width: calc(100% -55px); } }
  150. #page-header .temp-brand figure {
  151. margin-right: 15px;
  152. width: 60px;
  153. height: 60px; }
  154. #page-header .temp-brand figure img {
  155. width: 100%;
  156. height: 100%; }
  157. #page-header .temp-brand h1 {
  158. font-size: 20px;
  159. align-self: center;
  160. letter-spacing: -0.65px;
  161. font-family: 'Archivo Black', sans-serif; }
  162. @media screen and (max-width: 1024px) {
  163. #page-header .temp-brand h1 {
  164. font-size: 15px; } }
  165. #page-header .temp-brand h1 mark {
  166. color: #28aae2; }
  167. #page-header #desktop-navigation-menu {
  168. width: 55%;
  169. align-self: center;
  170. font-size: 16px; }
  171. @media screen and (max-width: 1024px) {
  172. #page-header #desktop-navigation-menu {
  173. display: none; } }
  174. #page-header #desktop-navigation-menu ul {
  175. display: flex;
  176. justify-content: space-between; }
  177. #page-header #desktop-navigation-menu ul li {
  178. list-style: none;
  179. color: #808285; }
  180. #page-header #desktop-navigation-menu ul li.active {
  181. color: #28aae2; }
  182. #page-header #mobile-hamburger-menu {
  183. display: none;
  184. position: relative;
  185. height: 25px; }
  186. @media screen and (max-width: 1024px) {
  187. #page-header #mobile-hamburger-menu {
  188. width: 45px; } }
  189. #page-header #mobile-hamburger-menu.active .icon-line {
  190. transform: rotate(45deg) translate(2px, 10px); }
  191. #page-header #mobile-hamburger-menu.active .icon-line:after {
  192. transform: rotate(-95deg) translate(20px, 2px); }
  193. #page-header #mobile-hamburger-menu.active .icon-line:before {
  194. opacity: 0; }
  195. @media screen and (max-width: 1024px) {
  196. #page-header #mobile-hamburger-menu {
  197. display: block;
  198. align-self: center; } }
  199. #page-header #mobile-hamburger-menu .icon-line {
  200. display: inline-block;
  201. width: 35px;
  202. height: 5px;
  203. background-color: black;
  204. position: absolute;
  205. transition: transform 500ms ease; }
  206. #page-header #mobile-hamburger-menu .icon-line:before, #page-header #mobile-hamburger-menu .icon-line:after {
  207. content: '';
  208. display: inline-block;
  209. width: 35px;
  210. height: 5px;
  211. position: absolute; }
  212. #page-header #mobile-hamburger-menu .icon-line:before {
  213. top: 200%;
  214. background-color: #28aae2;
  215. transition: opacity 500ms ease; }
  216. #page-header #mobile-hamburger-menu .icon-line:after {
  217. top: 400%;
  218. background-color: black;
  219. transition: transform 500ms ease; }
  220. #mobile-nav-menu {
  221. display: none; }
  222. @media screen and (max-width: 1024px) {
  223. #mobile-nav-menu {
  224. display: block;
  225. height: 0;
  226. overflow: hidden;
  227. position: sticky;
  228. top: 10vh;
  229. z-index: 5;
  230. background-color: white;
  231. transition: height 500ms ease; }
  232. #mobile-nav-menu.show {
  233. height: 90vh; }
  234. #mobile-nav-menu.show ul {
  235. margin-top: 50px; }
  236. #mobile-nav-menu.show li {
  237. opacity: 1; }
  238. #mobile-nav-menu ul li {
  239. list-style: none;
  240. font-size: 36px;
  241. text-align: center;
  242. padding: 10px 0;
  243. opacity: 0;
  244. transition: opacity 500ms ease; } }
  245. .temp-contact-info {
  246. background-color: #fafafa;
  247. border-top: 1px solid #d2d4d5;
  248. color: #57595b; }
  249. .temp-contact-info ul {
  250. display: flex;
  251. width: 80%;
  252. margin: 0 auto; }
  253. @media screen and (max-width: 1024px) {
  254. .temp-contact-info ul {
  255. width: 100%; } }
  256. .temp-contact-info ul .owl-item img {
  257. width: 10%; }
  258. .temp-contact-info ul li {
  259. list-style: none;
  260. border-left: 2px solid #d2d4d5;
  261. font-size: 14px;
  262. display: flex;
  263. justify-content: center;
  264. width: 35%;
  265. padding: 20px 0; }
  266. @media screen and (max-width: 1024px) {
  267. .temp-contact-info ul li {
  268. width: 40%; }
  269. .temp-contact-info ul li .contact-content {
  270. display: none; }
  271. .temp-contact-info ul li img {
  272. width: 35%; }
  273. .temp-contact-info ul li.active {
  274. width: 100%; }
  275. .temp-contact-info ul li.active img {
  276. width: 10%; }
  277. .temp-contact-info ul li.active .contact-content {
  278. display: block; } }
  279. .temp-contact-info ul li:last-child {
  280. border-right: 2px solid #d2d4d5; }
  281. .temp-contact-info ul li img {
  282. width: 10%;
  283. align-self: center; }
  284. @media screen and (max-width: 1024px) {
  285. .temp-contact-info ul li img {
  286. width: 30%; } }
  287. .temp-contact-info ul li .contact-content {
  288. margin-left: 20px;
  289. color: #808285; }
  290. .temp-contact-info ul li .contact-content span {
  291. display: block; }
  292. .temp-contact-info ul li .contact-content span:last-child {
  293. color: #28aae2; }
  294. .temp-contact-info ul li .contact-content a {
  295. display: block;
  296. color: #28aae2; }
  297. /*# sourceMappingURL=common.css.map */