:root {
--primary-color: #242424;
--secondary-color: #515151;
--accent-color: #004e64;
}
.pas-main-banner {
margin-top: 140px;
@media (max-width: 1024px) {
margin-top: 100px;
}
@media (max-width: 640px) {
margin-top: 80px;
}
.pas-main-slides {
background: url(//phoneansweringservices.com.au/staging/wp-content/themes/pas/pasv2/images/pages/contact-centre/pas-cc-banner.png)
center center / cover no-repeat;
@media (max-width: 1024px) {
background: #e7fff2
url(//phoneansweringservices.com.au/staging/wp-content/themes/pas/pasv2/images/pages/contact-centre/banner-v2/pas-cc-ipad.png) -3rem
center / 100% no-repeat;
}
@media (max-width: 820px) {
background-size: 105%;
background-position: 160% center;
}
@media (max-width: 600px) {
--line: 200px;
background:
linear-gradient(
to bottom,
transparent 0,
transparent var(--line),
#d6e4e6 var(--line),
#d6e4e6 100%
),
url(//phoneansweringservices.com.au/staging/wp-content/themes/pas/pasv2/images/pages/contact-centre/banner-v2/pas-cc-mobile.png)
no-repeat center top;
background-size:
100% 100%,
100% auto;
}
.pas-banner-caption {
@media (max-width: 600px) {
width: 100%;
margin-block-start: 200px;
text-align: center;
}
}
h1 {
color: var(--accent-color);
font-size: 45px;
line-height: 1;
margin-block: 0 12px;
@media (max-width: 1024px) {
font-size: 36px;
}
@media (max-width: 640px) {
font-size: 28px;
}
}
p {
font-weight: 500;
font-size: 18px;
line-height: 30px;
color: var(--primary-color);
@media (max-width: 640px) {
font-size: 16px;
line-height: 26px;
}
.global-slash {
font-size: 18px;
line-height: 30px;
@media (max-width: 640px) {
font-size: 16px;
line-height: 26px;
}
}
}
}
}
.global-section {
padding-block: 120px;
@media (max-width: 1024px) {
padding-block: 80px;
}
@media (max-width: 640px) {
padding-block: 60px;
}
~ .global-section {
padding-block-start: 30px;
&.section-2 .flex-row:first-child {
margin-block-end: 150px;
@media (max-width: 1024px) {
margin-block-end: 80px;
}
@media (max-width: 640px) {
margin-block-end: 50px;
}
}
}
}
.section-3 {
.global-header {
text-align: center;
margin-inline: auto;
width: min(34ch, 100%);
}
.flex-row {
justify-content: center;
gap: 60px;
@media (max-width: 1024px) {
gap: 30px;
}
@media (max-width: 768px) {
flex-direction: column;
align-items: center;
}
.flex-50 {
flex: 0 1 620px;
background-color: #f3f7f8;
border-radius: 20px;
padding: 50px;
padding-block-start: 42px;
justify-content: unset;
@media (max-width: 1024px) {
padding: 35px;
padding-block-start: 30px;
}
@media (max-width: 768px) {
flex: 1 1 100%;
width: 60%;
}
@media (max-width: 600px) {
width: 75%;
}
@media (max-width: 480px) {
padding: 24px;
border-radius: 14px;
width: 100%;
}
.gradient-box-1 {
--url: url(//phoneansweringservices.com.au/staging/wp-content/themes/pas/pasv2/images/pages/contact-centre/outbound-call.svg);
}
.gradient-box-2 {
--url: url(//phoneansweringservices.com.au/staging/wp-content/themes/pas/pasv2/images/pages/contact-centre/management-solutions.svg);
}
.gradient-p-title {
position: relative;
color: var(--accent-color);
font-size: 24px;
font-weight: 600;
display: flex;
align-items: flex-start;
@media (max-width: 600px) {
font-size: 20px;
}
@media (max-width: 820px) {
text-align: start;
}
&::before {
content: '';
width: 33px;
height: 30px;
background-size: 33px 30px;
background-repeat: no-repeat;
background-image: var(--url);
display: block;
margin-inline-end: 17px;
margin-block-start: 8px;
@media (max-width: 600px) {
width: 26px;
height: 24px;
background-size: 26px 24px;
margin-block-start: 4px;
}
}
}
.gradient-sub-p {
position: relative;
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 18px;
color: var(--secondary-color);
font-weight: 400;
margin-block-end: 10px;
@media (max-width: 600px) {
font-size: 16px;
text-align: start;
}
&::before {
content: '';
background-image: url(//phoneansweringservices.com.au/staging/wp-content/themes/pas/pasv2/images/pages/contact-centre/checkmark.svg);
background-repeat: no-repeat;
background-size: 24px 24px;
width: 24px;
height: 24px;
display: inline-block;
flex: 0 0 24px;
}
img {
display: none;
}
}
}
}
}
.section-4 {
.global-header {
width: min(34ch, 100%);
margin-inline: auto;
margin-block-end: 60px;
@media (max-width: 640px) {
margin-block-end: 40px;
}
}
.flex-33 {
padding-inline: 49.5px;
@media (max-width: 1024px) {
padding-inline: 24px;
padding-block: 40px;
}
&:first-of-type {
padding-inline-start: 0;
border-right: 3px solid #ececec;
@media (max-width: 768px) {
border-right: none;
border-bottom: 3px solid #ececec;
padding-block-start: 0;
}
}
&:last-of-type {
padding-inline-end: 0;
border-left: 3px solid #ececec;
@media (max-width: 768px) {
border-left: none;
padding-block-end: 0;
border-top: 3px solid #ececec;
}
}
@media (max-width: 768px) {
flex: 1 1 100%;
width: 100%;
padding-inline: 0;
}
.flex-hold {
text-align: center;
.feature-bpo-title {
color: var(--accent-color);
font-weight: 600;
font-size: 24px;
line-height: 32px;
text-wrap: pretty;
@media (max-width: 480px) {
font-size: 20px;
line-height: 28px;
}
}
.feature-bpo-content {
color: var(--secondary-color);
}
}
}
}
.section-5 {
background-image: url(//phoneansweringservices.com.au/staging/wp-content/themes/pas/pasv2/images/pages/homepage/v2/lastCTAbackground.png);
background-repeat: no-repeat;
background-size: cover;
padding-block: 80px !important;
@media (max-width: 640px) {
padding-block: 50px !important;
}
.cta {
margin-inline: auto;
background-color: #005866;
background-image: url(//phoneansweringservices.com.au/staging/wp-content/themes/pas/pasv2/images/pages/contact-centre/last-cta-section.png);
background-repeat: no-repeat;
background-position: right center;
border-radius: 30px;
padding: 50px 100px;
@media (max-width: 1024px) {
padding: 40px 50px;
}
@media (max-width: 768px) {
background-image: none;
}
@media (max-width: 480px) {
padding: 30px 24px;
border-radius: 20px;
}
.cta-hold {
width: 50%;
@media (max-width: 768px) {
width: 100%;
}
.cta-text-1 {
color: #00e1a9;
font-weight: 700;
font-size: 23px;
line-height: 28px;
margin-block-end: 15px;
@media (max-width: 480px) {
font-size: 19px;
line-height: 24px;
}
}
.cta-text-2 {
color: #ffffff;
font-weight: 700;
font-size: 23px;
line-height: 28px;
margin-block-end: 40px;
@media (max-width: 480px) {
font-size: 19px;
line-height: 24px;
margin-block-end: 28px;
}
}
.global-button {
all: unset;
cursor: pointer;
background-color: #ffffff;
border-radius: 3px;
padding: 13px 33px;
font-size: 16px;
color: var(--accent-color);
font-weight: 500;
&:hover span::after {
margin-left: 10px;
}
@media (max-width: 820px) {
margin-inline: auto;
width: fit-content;
display: block;
}
span::after {
all: unset;
content: '>';
color: var(--accent-color);
font-weight: 600;
font-size: inherit;
margin-left: 5px;
transition: margin-left 350ms ease-in-out;
}
}
}
}
}
@media (max-width: 1300px) {
.__appendImage {
img {
width: 420px;
object-fit: contain;
aspect-ratio: 4 / 3;
margin-inline: auto;
}
}
.section-1 {
.flex-row {
align-items: center;
}
}
.section-1,
.section-3 {
.__appendImage img {
scale: 1.5;
}
}
}
@media (max-width: 820px) {
.flex-hold {
text-align: center;
.__appendImageHere {
+ img {
width: 480px;
object-fit: contain;
aspect-ratio: 4 / 3;
margin-inline: auto;
}
}
}
}
@media (max-width: 620px) {
.flex-50 {
flex: 0 0 100%;
.flex-hold {
text-align: center;
.__appendImageHere {
+ img {
width: 100%;
object-fit: contain;
aspect-ratio: 4 / 3;
margin-inline: auto;
}
}
}
}
}
.form-section {
background-color: #f3f7f8;
padding-block: 120px;
&.__hide-form {
display: none;
}
.form-div {
margin-inline: auto;
width: 100%;
max-width: 48rem;
border-radius: 1.5rem;
background-color: #ffffff;
padding: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
.form-headline {
margin-bottom: 2rem;
font-size: 1.5rem;
line-height: 1.375;
font-weight: 700;
color: #0f172a;
}
.material-row-2 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
column-gap: 1.5rem;
row-gap: 1.25rem;
}
.material-group {
position: relative;
.material-input {
width: 100%;
border-radius: 0.25rem;
border: 1px solid #e2e8f0;
background-color: #f8fafc;
box-sizing: border-box;
padding: 1rem 0.925rem;
font-size: 0.875rem;
color: #0f172a;
outline: none;
transition:
border-color 150ms,
background-color 150ms,
box-shadow 150ms;
}
.material-input::placeholder {
color: transparent;
}
.material-input:focus {
border-color: #1bcda1;
background-color: #ffffff;
box-shadow: 0 0 0 2px rgba(27, 205, 161, 0.2);
}
textarea.material-input {
min-height: 112px;
resize: none;
padding-top: 1.5rem;
}
select.material-input {
cursor: pointer;
appearance: none;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: right 1rem center;
background-size: 16px;
padding-right: 2.5rem;
}
.__material-label {
pointer-events: none;
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.875rem;
color: #94a3b8;
background-color: #f8fafc;
transition: all 150ms;
}
&.__material-focus-in .__material-label {
top: -0.5rem;
transform: translateY(0);
font-size: 0.75rem;
font-weight: 500;
color: #0f9c7d;
background-color: #f8fafc;
}
.material-error-label {
display: none;
margin-top: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
color: #ef4444;
}
&.__is_empty .material-error-label,
&.__is_emailblank .material-error-label {
display: block;
}
&.__is_empty .material-input,
&.__is_emailblank .material-input {
border-color: #f87171;
background-color: rgba(254, 242, 242, 0.5);
}
}
.submit {
margin-top: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
border-radius: 0.75rem;
background-color: #1bcda1;
padding: 0.875rem 2rem;
font-size: 0.875rem;
font-weight: 600;
color: #ffffff;
transition: background-color 150ms;
text-decoration: none;
}
.submit:hover {
background-color: #17b88f;
}
}
}
@media (min-width: 640px) {
.form-section .form-div {
padding: 3rem;
}
.form-section .form-div .form-headline {
font-size: 1.875rem;
line-height: 2.25rem;
}
.form-section .form-div .material-row-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-section .form-div .material-group.half-input {
grid-column: span 1 / span 1;
}
.form-section .form-div .material-group.full-input,
.form-section .form-div .material-group.custom-textarea {
grid-column: span 2 / span 2;
}
.form-section .form-div .submit {
grid-column: span 2 / span 2;
width: fit-content;
}
}