https://www.bushbeansfoodservice.com/dist/bushs-beans/static/js/ConcaveHero.styles.b6d989a4.chunk.js

1"use strict";(self.webpackChunkbushs_beans=self.webpackChunkbushs_beans||[]).push([[7741],{23825:(t,e,o)=>{o.r(e),o.d(e,{ConcaveHeroComponent:()=>r,ContentWrapper:()=>s,CopyDiv:()=>d,FadeInUpElement:()=>l,FadeInUpElementQuart:()=>p,MediaDiv:()=>c,TopBadge:()=>m,default:()=>a});var i=o(75497);const a=i.ZP.section``,n=i.F4`
2  0% {
3    opacity: 0;
4    transform: translateY(20px);
5  }
6  100% {
7    opacity: 1;
8    transform: translateY(0);
9  }
10`,r=(i.F4`
11  0% {
12    opacity: 0;
13    transform: translateX(-50px);
14  }
15  100% {
16    opacity: 1;
17    transform: translateX(0);
18  }
19`,i.ZP.section`
20	/* Move keyframes into the component scope */
21	@keyframes fadeInUp {
22		0% {
23			opacity: 0;
24			transform: translateY(20px);
25		}
26		100% {
27			opacity: 1;
28			transform: translateY(0);
29		}
30	}
31
32	position: relative;
33	background-color: ${t=>{let{theme:e,backgroundColor:o}=t;return o?function(){let{backgroundColor:t,theme:e}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const o={tan:{background:e.colours.tan,text:e.colours.brown,heading:e.colours.red},yellow:{background:e.colours.yellow,text:e.colours.brown,heading:e.colours.red},blue:{background:e.colours.blue,text:e.colours.tan,heading:e.colours.yellow},red:{background:e.colours.red,text:e.colours.yellow,heading:e.colours.yellow},bluey:{background:"#CCE7FD",text:"#404164",heading:"#1263BA"}};return t in o?o[t]:o.yellow}({theme:e,backgroundColor:o}).background:e.colours.yellow}};
34  padding: 25% 0 13% 0;
35  ${t=>{let{backgroundImage:e}=t;return e&&`\n        background-image: url(${e});\n        background-size: cover;\n        background-position: center;\n        background-repeat: no-repeat;\n    `}}
36  .bottom-svg-border{
37    position: absolute;
38    width: 100%;
39    bottom: -6%;
40    right: 0;
41    left: 0;
42    height: auto;
43  }
44	&[data-loaded="true"] {
45		.inner {
46			animation: fadeInUp 0.8s ease forwards;
47		}
48		.mediaDiv img {
49			animation: fadeInUp 0.8s ease forwards 0.3s; /* 0.3s delay for staggering */
50		}
51	}
52
53	@media (max-width: 900px) {
54    .bottom-svg-border{
55      bottom: -5%;
56    }
57	}
58  @media (max-width: 600px) {
59    .bottom-svg-border{
60      bottom: -4%;
61    }
62  }
63  @media (max-width: 400px) {
64    .bottom-svg-border{
65      bottom: -3%;
66    }
67  }
68`),s=i.ZP.div`
69  display: flex;
70  height: 100%;
71  position: relative;
72  width: 100%;
73`,d=i.ZP.div`
74	position: relative;
75  left: 0;
76  right: 0;
77  top: 0;
78	display: flex;
79	flex-flow: column;
80  width: 100%;
81	align-self: center;
82	order: 0;
83  z-index: 3;
84	.inner{
85		width: 90%;
86		max-width: 100%;
87		margin: 50px auto;
88		display: flex;
89		flex-flow: column;
90		gap: 30px;
91	}
92	.large-heading{
93    font-family: 'apercu condensed pro', 'impact', sans-serif;
94    color: ${t=>{let{theme:e}=t;return e.colours.red}};
95    font-size: 7.5vw;
96    line-height: 0.7;
97    position: relative;
98    text-align: center;
99    width: 100%;
100    display: block;
101    margin-bottom: 30px;
102    font-weight: 700;
103    text-transform: uppercase;
104    span{
105      font-family: bordonaro, sans-serif !important;
106      border-bottom: 0;
107      position: relative;
108      top: 0;
109      line-height: 1;
110      text-transform: lowercase;
111    }
112	}
113	.description{
114		text-align: center;
115		display: block;
116		color: ${t=>{let{theme:e}=t;return e.colours.brown}};
117		font-size: 46px;
118    font-family: 'apercu condensed pro', 'impact', sans-serif;
119		line-height: 1.3;
120		font-weight: 700;
121    max-width: 90%;
122    width: 641px;
123    margin: 0 auto 20px auto;
124    animation: ${n} 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
125	}
126  .buttonWrapper{
127    justify-content: center;
128    display: flex;
129    animation: ${n} 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
130  }
131	@media (max-width: 1130px){
132		.description{
133			font-size: 18px;
134		}
135	}
136	@media (max-width: 900px){
137		grid-column: span 12 / span 12;
138    position: relative;
139    margin: 0 auto 0 auto;
140		.buttonWrapper{
141			display: flex;
142			justify-content: center;
143		}
144    .large-heading{
145      margin-bottom: 20px;
146      span{
147        border-bottom: 7px solid;
148        top: -8px;
149      }
150    }
151	}
152	@media (max-width: 600px){
153		.description{
154			font-size: 16px;
155		}
156    .large-heading{
157      span{
158        border-bottom: 3px solid;
159        top: -5px;
160      }
161    }
162		width: 100%;
163		p{
164			font-size: 18px;
165		}
166	}
167`,l=i.ZP.div`
168	opacity: 0;
169	animation: ${n} 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
170`,p=i.ZP.div`
171    opacity: 0;
172    animation: ${n} 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
173`,c=i.ZP.div`
174	position: relative;

175	display: flex;
176	flex-flow: column;
177	grid-column: span 6 / span 6;
178	align-self: baseline;
179	height: 100%;
180	justify-content: end;
181	order: 1;
182  animation: ${n} 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
183	@media (max-width: 900px){
184		grid-column: span 12 / span 12;
185		padding: 0;
186		order: 0;
187	}
188	@media (max-width: 600px){
189		padding: 0;
190	}
191	img{
192		opacity: 1;
193		max-height: 100%;
194		height: 100%;
195		object-fit: cover;
196		object-position: bottom;
197    width: 90%;
198    max-width: 1450px;
199    margin: auto;
200	}
201`,m=i.ZP.div`
202  display: block;
203  width: 100%;
204  position: relative;
205  top: 20px;
206  left: 0;
207  right: 0;
208  z-index: 4;
209  text-align: center;
210  img{
211    max-height: 353px;
212    height: auto;
213    width: auto;
214    max-width: 90%;
215    @media (max-width: 600px){
216      max-height: 100px;
217    }
218  }
219`}}]);
220//# sourceMappingURL=ConcaveHero.styles.b6d989a4.chunk.js.map