| record |
[
"template" => [
1 => "@godlife/record/topic/blank.twig"
2 => "gospel.html.twig"
3 => "gospel.twig"
5 => "@portuguese/content.twig"
6 => "record.html.twig"
]
"title" => "Chaos SG FBV"
"topic" => "chaos-sg-fbv"
"slug" => "chaos-sg-fbv"
"banner" => [
"filename" => ""
"path" => ""
"media" => ""
"thumbnail" => ""
"fieldname" => "banner"
"alt" => ""
"url" => ""
"extension" => ""
]
"head" => ""
"body" => """
<style type="text/css">\r\n
/* ==========================================================================\r\n
BASE STYLES\r\n
========================================================================== */\r\n
\r\n
body {\r\n
margin: 0;\r\n
}\r\n
\r\n
\r\n
.page-wrapper *,\r\n
.page-wrapper *::before,\r\n
.page-wrapper *::after {\r\n
box-sizing: border-box;\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
CSS CUSTOM PROPERTIES (VARIABLES)\r\n
========================================================================== */\r\n
\r\n
.page-wrapper {\r\n
\r\n
/* Box Model & Typography */\r\n
font-family: Raleway, Helvetica, Arial, sans-serif;\r\n
\r\n
/* Font Sizes */\r\n
--font-body: 1rem;\r\n
/* --h1: clamp(2.125rem, 4vw, 3rem); */\r\n
--h1: clamp(2.125rem, 4vw, 3.35rem);\r\n
--h2: clamp(1.75rem, 3.2vw, 2.25rem);\r\n
--h3: clamp(1.375rem, 2.6vw, 1.75rem);\r\n
--h4: clamp(1.125rem, 2.2vw, 1.375rem);\r\n
--h5: 1.125rem;\r\n
--h6: 1rem;\r\n
--p: 1rem;\r\n
--p-lg: 1.125rem;\r\n
--p-sm: 0.9375rem;\r\n
--small: 0.875rem;\r\n
\r\n
/* Line Heights */\r\n
--lh-heading: 1.2;\r\n
--lh-body: 1.6;\r\n
\r\n
/* Color Palette */\r\n
--page-white: #fff;\r\n
--page-black: #000;\r\n
\r\n
/* Blues */\r\n
--page-blue-dark-1: #1e639b;\r\n
--page-blue-dark-2: #2d72aa;\r\n
--page-blue-dark-3: #3d80b7;\r\n
--page-blue-dark-4: #154567;\r\n
\r\n
/* Greens */\r\n
--page-green-primary: #5DB85B;\r\n
--page-green-secondary: #5CB85C;\r\n
--page-green-border: #009688;\r\n
\r\n
/* Grays */\r\n
--page-gray-dark: #6e6e6e;\r\n
--page-gray-light: #cbd5e1;\r\n
--page-gray-lighter: #e5e7eb;\r\n
--page-gray-card: #a89678d7;\r\n
--page-grey-footer: #aaaaaa;\r\n
\r\n
/* Text Colors */\r\n
--page-text-dark: #3a3a3a;\r\n
--page-text-body: #4a4a4a;\r\n
--page-text-brown: #6b5d4f;\r\n
--page-footer-text-color: #888888;\r\n
\r\n
/* Background Colors */\r\n
--page-beige-footer: #d9d6ca;\r\n
--page-beige-accent: #eeeade;\r\n
\r\n
/* Step Colors */\r\n
--page-step1-bg: var(--page-blue-dark-1);\r\n
--page-step2-bg: var(--page-blue-dark-2);\r\n
--page-step3-bg: var(--page-blue-dark-3);\r\n
--page-step1-arrow-bg-color: var(--page-blue-dark-1);\r\n
--page-step2-arrow-bg-color: var(--page-blue-dark-2);\r\n
--page-step3-arrow-bg-color: var(--page-blue-dark-3);\r\n
\r\n
/* Split Journey */\r\n
\r\n
--page-form-bg: var(--page-blue-dark-4);\r\n
--page-form-card-bg: #123c5a;\r\n
--page-form-text-color: #ffffff;\r\n
\r\n
--page-form-button-text-color: #ffffff;\r\n
--page-form-button-bg-color: transparent;\r\n
--page-form-button-border-color: #ffffff;\r\n
\r\n
/* Form Colors */\r\n
--page-blue-form: var(--page-blue-dark-4);\r\n
--page-blue-hover: #0359a0;\r\n
\r\n
\r\n
/* Utility Colors */\r\n
--page-red-error: #e51520;\r\n
--page-placeholder-gray: #CCCCCC;\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
PAGE WRAPPER & LAYOUT\r\n
========================================================================== */\r\n
\r\n
.page-wrapper {\r\n
overflow-x: hidden;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container {\r\n
width: 100%;\r\n
max-width: 1200px;\r\n
margin: auto;\r\n
padding: 0;\r\n
background-color: var(--page-white);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container #arrow-inner-container {\r\n
margin: auto;\r\n
position: relative;\r\n
font-size: 20px;\r\n
line-height: 1.2;\r\n
font-style: normal;\r\n
padding: 0;\r\n
background-color: var(--page-white);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .clearfix:after,\r\n
.page-wrapper .container-fluid:after,\r\n
.page-wrapper .container:after,\r\n
.page-wrapper .row:after {\r\n
clear: both;\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
TYPOGRAPHY\r\n
========================================================================== */\r\n
\r\n
/* Heading Base Styles */\r\n
.page-wrapper #arrow-container h1,\r\n
.page-wrapper #arrow-container h2,\r\n
.page-wrapper #arrow-container h3,\r\n
.page-wrapper #arrow-container h4,\r\n
.page-wrapper #arrow-container h5,\r\n
.page-wrapper #arrow-container h6 {\r\n
text-transform: uppercase;\r\n
line-height: 1.2em;\r\n
letter-spacing: 0;\r\n
font-style: normal;\r\n
margin-top: 0;\r\n
margin-bottom: 10px;\r\n
font-family: Raleway, Helvetica, Arial, sans-serif;\r\n
}\r\n
\r\n
/* Individual Heading Styles */\r\n
.page-wrapper #arrow-container h1 {\r\n
font-size: var(--h1);\r\n
line-height: var(--lh-heading);\r\n
color: #ffffff;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container h2 {\r\n
font-size: var(--h2);\r\n
font-weight: 700;\r\n
line-height: var(--lh-heading);\r\n
color: #ffffff;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container h3 {\r\n
font-size: var(--h3);\r\n
line-height: var(--lh-heading);\r\n
color: #ffffff;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container h4 {\r\n
font-size: var(--h4);\r\n
line-height: var(--lh-heading);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container h5 {\r\n
font-size: var(--h5);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container h6 {\r\n
font-size: var(--h6);\r\n
font-size: 24px;\r\n
color: var(--page-text-dark);\r\n
font-weight: 700;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container small {\r\n
font-size: var(--small);\r\n
}\r\n
\r\n
/* Paragraph Styles */\r\n
.page-wrapper #arrow-container p {\r\n
font-size: var(--p);\r\n
line-height: var(--lh-body);\r\n
max-width: 70ch;\r\n
color: #ffffff;\r\n
font-family: 'Montserrat', sans-serif;\r\n
}\r\n
\r\n
/* Specific Typography Overrides */\r\n
.page-wrapper #arrow-container #arrow-inner-container .arrow-start h2 {\r\n
text-transform: none;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container #arrow-inner-container .content-prayer h1 {\r\n
color: var(--page-white);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container #arrow-inner-container h3 {\r\n
line-height: 68px;\r\n
font-weight: 700;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container #arrow-inner-container .arrow-start .body-text {\r\n
padding: 20px 10px;\r\n
text-align: center;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container #arrow-inner-container .content .body-text {\r\n
color: var(--page-text-body);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container #arrow-inner-container .content-prayer .body-text {\r\n
text-align: center;\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
ARROW LAYOUT & STEPS\r\n
========================================================================== */\r\n
\r\n
/* Header Section */\r\n
.page-wrapper #arrow-container .arrow-start {\r\n
display: flex;\r\n
justify-content: center;\r\n
align-items: center;\r\n
background: #D9D6CA;\r\n
/* background: linear-gradient(180deg, rgba(217, 214, 202, 0) 0%, rgba(217, 214, 202, 0.75) 85%, rgba(217, 214, 202, 1) 100%), url(https://gmo-media.s3.us-east-1.amazonaws.com/websites/godlife/gospel/Chaos-gsd/Chaos+Header.png) no-repeat; */\r\n
background:\r\n
radial-gradient(circle, rgba(255, 255, 255, 0) 75%, rgba(217, 214, 202, 0.2) 95%, rgba(217, 214, 202, 0.95) 100%),\r\n
/* linear-gradient(0deg, rgba(217, 214, 202, 0) 75%, rgba(217, 214, 202, 0.1) 85%, rgba(217, 214, 202, 1) 100%), */\r\n
linear-gradient(180deg, rgba(217, 214, 202, 0) 75%, rgba(217, 214, 202, 0.4) 90%, rgba(217, 214, 202, 1) 100%),\r\n
url(https://gmo-media.s3.us-east-1.amazonaws.com/websites/godlife/gospel/Chaos-gsd/Chaos+Header.png) no-repeat;\r\n
background-size: cover;\r\n
position: relative;\r\n
height: 399px;\r\n
width: auto;\r\n
padding: 40px 20px;\r\n
background-position: center;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-start h1 {\r\n
color: white;\r\n
/* color: var(--page-text-dark); */\r\n
text-shadow: 2px 2px rgba(185, 185, 185, 1);\r\n
/* text-shadow: 2px 2px rgba(138, 138, 138, 0.9); */\r\n
/* background: rgba(217, 214, 202, 0.1); */\r\n
padding: 20px 30px;\r\n
border-radius: 8px;\r\n
backdrop-filter: blur(1/px);\r\n
/* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */\r\n
/* max-width: 800px; */\r\n
text-align: center;\r\n
}\r\n
\r\n
/* Step Containers */\r\n
.page-wrapper #arrow-container .arrow-step1,\r\n
.page-wrapper #arrow-container .arrow-step2,\r\n
.page-wrapper #arrow-container .arrow-step3 {\r\n
position: relative;\r\n
padding: 49px;\r\n
min-height: 200px;\r\n
display: grid;\r\n
grid-template-columns: 60% 40%;\r\n
gap: 2rem;\r\n
align-items: center;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step1 {\r\n
background-color: var(--page-step1-bg);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step2 {\r\n
background-color: var(--page-step2-bg);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step3 {\r\n
background-color: var(--page-step3-bg);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step4 {\r\n
background-color: var(--page-form-bg);\r\n
position: relative;\r\n
padding: 45px 45px 100px 45px;\r\n
min-height: 560px;\r\n
}\r\n
\r\n
/* Arrow Pointers */\r\n
.page-wrapper #arrow-container .arrow-start .pointer,\r\n
.page-wrapper #arrow-container .arrow-step1 .pointer,\r\n
.page-wrapper #arrow-container .arrow-step2 .pointer,\r\n
.page-wrapper #arrow-container .arrow-step3 .pointer,\r\n
.page-wrapper #arrow-container .arrow-step4 .pointer {\r\n
margin: auto;\r\n
left: 0;\r\n
bottom: -32px;\r\n
width: 0;\r\n
height: 0;\r\n
z-index: 10;\r\n
position: absolute;\r\n
right: 0;\r\n
border-left: 57px solid transparent;\r\n
border-right: 57px solid transparent;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-start .pointer {\r\n
border-top: 33px solid var(--page-beige-footer);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step1 .pointer {\r\n
border-top: 33px solid var(--page-step1-arrow-bg-color);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step2 .pointer {\r\n
border-top: 33px solid var(--page-step2-arrow-bg-color);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step3 .pointer {\r\n
border-top: 33px solid var(--page-step3-arrow-bg-color);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step4 .pointer {\r\n
border-top: 33px solid var(--page-form-bg);\r\n
}\r\n
\r\n
/* Content Areas */\r\n
.page-wrapper #arrow-container .content {\r\n
width: 100%;\r\n
height: auto;\r\n
grid-column: 1;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-start .content {\r\n
width: 100%;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container #arrow-inner-container .arrow-step4 .content {\r\n
width: 100%;\r\n
}\r\n
\r\n
/* Images */\r\n
.page-wrapper #arrow-container #arrow-inner-container img {\r\n
width: 100%;\r\n
height: auto;\r\n
max-height: 350px;\r\n
object-fit: contain;\r\n
grid-column: 2;\r\n
}\r\n
\r\n
.page-wrapper img.logo.my-class {\r\n
width: 95px !important;\r\n
height: auto !important;\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
BUTTONS & INTERACTIVE ELEMENTS\r\n
========================================================================== */\r\n
\r\n
.page-wrapper #arrow-container .arrow-button {\r\n
background-color: var(--page-blue-dark-2);\r\n
border-radius: 7px;\r\n
box-shadow: 0 1px 0 0 var(--page-gray-dark) inset;\r\n
color: var(--page-white);\r\n
display: inline-block;\r\n
font-size: 18px;\r\n
font-style: normal;\r\n
font-weight: 400;\r\n
height: 65px;\r\n
line-height: 65px;\r\n
margin-bottom: 15px;\r\n
margin-left: 0;\r\n
margin-right: 15px;\r\n
text-align: center;\r\n
text-decoration: none !important;\r\n
text-indent: 0;\r\n
width: 250px;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-button:hover {\r\n
background-color: var(--page-blue-hover);\r\n
}\r\n
\r\n
.page-wrapper .btn {\r\n
display: inline-flex;\r\n
align-items: center;\r\n
font-weight: bold;\r\n
padding: .5rem 1rem;\r\n
border-radius: 4px;\r\n
cursor: pointer;\r\n
text-decoration: none;\r\n
font-size: 1rem;\r\n
max-width: fit-content;\r\n
background-color: var(--page-form-button-bg-color);\r\n
border: 2px solid var(--page-form-button-border-color);\r\n
border-radius: 0px;\r\n
color: var(--page-form-button-text-color);\r\n
text-transform: uppercase;\r\n
}\r\n
\r\n
.page-wrapper a.btn:hover {\r\n
color: var(--page-form-button-text-color);\r\n
}\r\n
\r\n
.page-wrapper .btn span {\r\n
margin-left: 0.5rem;\r\n
}\r\n
\r\n
.page-wrapper .form-container .back-btn {\r\n
background-color: unset;\r\n
color: var(--page-green-primary);\r\n
border: 1px solid var(--page-green-primary);\r\n
padding: 0 10px;\r\n
cursor: pointer;\r\n
font-size: 14px;\r\n
margin: 0 10px 0 0;\r\n
}\r\n
\r\n
.page-wrapper .form-container .back-btn:hover {\r\n
background-color: unset;\r\n
}\r\n
\r\n
.page-wrapper .gmo-button {\r\n
border: 0;\r\n
color: var(--page-white);\r\n
background-color: var(--page-black);\r\n
border-radius: 3px;\r\n
box-shadow: 1px 2px 4px;\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
PRAYER SECTION (UNUSED BUT KEEPING FOR REFERENCE)\r\n
========================================================================== */\r\n
\r\n
.page-wrapper #arrow-container .arrow-prayer {\r\n
background-color: var(--page-white);\r\n
background-image: url(//a.glcdn.co/images/gospel/arrow-praying-hands-1.jpg);\r\n
position: relative;\r\n
padding: 49px;\r\n
background-size: cover;\r\n
background-position: center;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-prayer .content-prayer {\r\n
width: 100%;\r\n
text-align: center;\r\n
position: relative;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-prayer a,\r\n
.page-wrapper #arrow-container .arrow-prayer p,\r\n
.page-wrapper .arrow-prayer a:hover,\r\n
.page-wrapper .arrow-prayer a:visited {\r\n
color: var(--page-white);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-prayer .content-prayer p {\r\n
width: 580px;\r\n
margin: auto;\r\n
text-align: center;\r\n
padding-bottom: 10px;\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
FOOTER\r\n
========================================================================== */\r\n
\r\n
.page-wrapper #arrow-container .footer {\r\n
background-color: var(--page-beige-footer);\r\n
padding: 32px 18.28571px;\r\n
/* margin: auto; */\r\n
/* max-width: 1200px; */\r\n
display: flex;\r\n
justify-content: space-between;\r\n
border-top: 2px solid var(--page-grey-footer);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .footer .footer-logo {\r\n
flex: 0;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .footer-text-container {\r\n
flex: 1;\r\n
display: flex;\r\n
flex-direction: column;\r\n
align-items: center;\r\n
gap: 5px;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container p.footer-text {\r\n
font-size: 12px;\r\n
color: var(--page-footer-text-color);\r\n
display: block;\r\n
margin-block-start: 0em;\r\n
margin-block-end: 0em;\r\n
margin: 0;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container p.footer-links {\r\n
padding-top: 0;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container p.footer-text a,\r\n
.page-wrapper #arrow-container p.footer-text a:hover,\r\n
.page-wrapper #arrow-container p.footer-text a:visited {\r\n
color: var(--page-footer-text-color);\r\n
text-decoration: underline;\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
NEXT STEPS CARDS SECTION\r\n
========================================================================== */\r\n
\r\n
.page-wrapper .next-steps-cards {\r\n
display: flex;\r\n
justify-content: space-between;\r\n
gap: 1rem;\r\n
align-items: stretch;\r\n
}\r\n
\r\n
.page-wrapper .next-steps-left {\r\n
flex: auto;\r\n
display: flex;\r\n
flex-direction: column;\r\n
gap: 25px;\r\n
min-width: 40%;\r\n
}\r\n
\r\n
.page-wrapper .next-steps-title {\r\n
font-size: 2rem;\r\n
text-transform: uppercase;\r\n
letter-spacing: 3px;\r\n
color: var(--page-form-text-color);\r\n
}\r\n
\r\n
.page-wrapper p.next-steps-paragraph1,\r\n
.page-wrapper p.next-steps-paragraph2 {\r\n
color: var(--page-form-text-color);\r\n
font-size: 1.5rem;\r\n
width: 1000px !important;\r\n
}\r\n
\r\n
.page-wrapper .next-steps-heading {\r\n
margin-bottom: 2rem;\r\n
}\r\n
\r\n
.page-wrapper .card {\r\n
background-color: var(--page-form-card-bg);\r\n
padding: 1.5rem;\r\n
border-radius: 4px;\r\n
line-height: 2;\r\n
border: 1px solid var(--page-form-card-bg);\r\n
}\r\n
\r\n
.page-wrapper .card h3 {\r\n
font-size: 21px !important;\r\n
line-height: 0.5 !important;\r\n
text-transform: none !important;\r\n
text-align: left !important;\r\n
}\r\n
\r\n
.page-wrapper .card p {\r\n
margin: 0.5rem 0 1.2rem;\r\n
font-size: 15px !important;\r\n
color: var(--page-gray-lighter);\r\n
}\r\n
\r\n
.page-wrapper .next-steps-right {\r\n
flex: auto;\r\n
min-width: 60%;\r\n
border-radius: 4px;\r\n
background-image: url(https://gmo-media.s3.us-east-1.amazonaws.com/websites/godlife/gospel/Chaos-gsd/LD-NewDesign.jpg);\r\n
background-size: cover;\r\n
background-position: center;\r\n
height: auto;\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
RESPONSIVE DESIGN - TABLET\r\n
========================================================================== */\r\n
\r\n
@media only screen and (max-width:1024px) {\r\n
.page-wrapper #arrow-container img {\r\n
padding-left: 0;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-prayer {\r\n
background-size: cover;\r\n
background-position: center;\r\n
height: auto;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-start,\r\n
.page-wrapper .arrow-prayer {\r\n
background-size: cover;\r\n
background-position: center;\r\n
height: 165px;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-start .content {\r\n
margin: 0 5px 140px;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .content {\r\n
width: 100%;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step1,\r\n
.page-wrapper #arrow-container .arrow-step2,\r\n
.page-wrapper #arrow-container .arrow-step3 {\r\n
grid-template-columns: 1fr;\r\n
gap: 1rem;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container #arrow-inner-container img {\r\n
display: none;\r\n
grid-column: 1;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container h3,\r\n
.page-wrapper h6 {\r\n
text-align: center;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-prayer {\r\n
padding: 40px 0 20px;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step1,\r\n
.page-wrapper .arrow-step4 {\r\n
min-height: fit-content;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step1,\r\n
.page-wrapper .arrow-step2,\r\n
.page-wrapper .arrow-step3,\r\n
.page-wrapper .arrow-step4 {\r\n
padding: 49px;\r\n
}\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
RESPONSIVE DESIGN - MOBILE\r\n
========================================================================== */\r\n
\r\n
@media (max-width: 768px) {\r\n
.page-wrapper #arrow-container h2 {\r\n
margin-top: 0;\r\n
}\r\n
\r\n
.page-wrapper .next-steps-cards {\r\n
flex-direction: column;\r\n
}\r\n
\r\n
.page-wrapper .next-steps-left {\r\n
margin-right: 0;\r\n
display: flex;\r\n
}\r\n
\r\n
.page-wrapper p.next-steps-paragraph1,\r\n
.page-wrapper p.next-steps-paragraph2 {\r\n
width: auto !important;\r\n
}\r\n
\r\n
.page-wrapper .card h3 {\r\n
text-align: left !important;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .content {\r\n
height: 100%;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .arrow-step4 {\r\n
padding: 45px 40px 20px 40px;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .footer {\r\n
display: flex;\r\n
flex-direction: column;\r\n
justify-content: center;\r\n
align-items: center;\r\n
border-top: 2px solid var(--page-grey-footer);\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .footer .footer-logo {\r\n
flex: 0;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container .footer-text-container {\r\n
flex: 1;\r\n
display: flex;\r\n
flex-direction: column;\r\n
align-items: center;\r\n
gap: 5px;\r\n
}\r\n
\r\n
.page-wrapper .footer {\r\n
width: 100%;\r\n
padding: 32px 0px;\r\n
display: block;\r\n
}\r\n
\r\n
.page-wrapper p.footer-text {\r\n
padding: 10px;\r\n
}\r\n
\r\n
.page-wrapper .next-steps-title {\r\n
font-size: 2.5rem !important;\r\n
text-align: center !important;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container img {\r\n
padding-left: 10px;\r\n
}\r\n
\r\n
.page-wrapper .title.return {\r\n
padding: 20px 0 25px 15px !important;\r\n
}\r\n
\r\n
.page-wrapper #form-path form {\r\n
width: 97% !important;\r\n
}\r\n
}\r\n
\r\n
/* ==========================================================================\r\n
FORM STYLES\r\n
========================================================================== */\r\n
\r\n
.page-wrapper .gmo-form {\r\n
width: 98%;\r\n
}\r\n
\r\n
.page-wrapper #arrow-container #arrow-inner-container .form-container h3 {\r\n
line-height: 100%;\r\n
text-transform: none;\r\n
}\r\n
\r\n
.page-wrapper .title.return {\r\n
display: flex;\r\n
padding: 20px 0 20px 45px;\r\n
min-height: 34px;\r\n
}\r\n
\r\n
.page-wrapper #form-path,\r\n
.page-wrapper #form-hs {\r\n
background-color: var(--page-blue-form);\r\n
}\r\n
\r\n
.page-wrapper #form-path #form {\r\n
width: 100%;\r\n
color: var(--page-white);\r\n
padding-bottom: 20px;\r\n
}\r\n
\r\n
.page-wrapper #form-path form {\r\n
width: 93%;\r\n
margin: auto;\r\n
}\r\n
\r\n
/* Form Input Styles */\r\n
.page-wrapper input[type=text]~label,\r\n
.page-wrapper input[type=email]~label {\r\n
color: var(--page-white) !important;\r\n
}\r\n
\r\n
.page-wrapper input[type=text]:focus~label,\r\n
.page-wrapper input[type=text]:valid~label,\r\n
.page-wrapper input[type=email]:focus~label,\r\n
.page-wrapper input[type=email]:valid~label {\r\n
color: var(--page-white) !important;\r\n
}\r\n
\r\n
.page-wrapper textarea:focus~label,\r\n
.page-wrapper textarea:valid~label {\r\n
color: var(--page-white) !important;\r\n
}\r\n
\r\n
.page-wrapper input[type="text"],\r\n
.page-wrapper input[type="email"],\r\n
.page-wrapper textarea {\r\n
color: var(--page-white) !important;\r\n
border: 1px solid var(--page-green-primary) !important;\r\n
}\r\n
\r\n
.page-wrapper textarea {\r\n
height: 50px !important;\r\n
padding: 10px !important;\r\n
}\r\n
\r\n
.page-wrapper input[type=text]:focus,\r\n
.page-wrapper input[type=text]:valid,\r\n
.page-wrapper input[type=email]:focus,\r\n
.page-wrapper input[type=email]:valid,\r\n
.page-wrapper textarea:focus,\r\n
.page-wrapper textarea:valid {\r\n
border-bottom: 1px solid var(--page-green-primary) !important;\r\n
}\r\n
\r\n
.page-wrapper label[for=last_name] {\r\n
display: flex;\r\n
flex-direction: column-reverse;\r\n
position: relative;\r\n
font-size: 1.2rem !important;\r\n
}\r\n
\r\n
.page-wrapper input[type=submit] {\r\n
background: var(--page-green-primary) !important;\r\n
border: 1px solid var(--page-green-primary) !important;\r\n
padding: 1rem 2rem 1rem 2rem !important;\r\n
font-size: 1.2rem !important;\r\n
width: fit-content;\r\n
/* width: auto !important; */\r\n
max-width: 100%;\r\n
white-space: normal;\r\n
}\r\n
\r\n
.page-wrapper #hubspot-form-wrapper {\r\n
width: 92%;\r\n
margin: 0 auto;\r\n
padding-bottom: 40px;\r\n
}\r\n
\r\n
/* Path Form Specific Styles */\r\n
.page-wrapper #form-path .pty-apolloapps-widget-inpage form {\r\n
display: flex;\r\n
flex-direction: column;\r\n
gap: 16px;\r\n
margin: 0 auto;\r\n
width: 92%;\r\n
}\r\n
\r\n
.page-wrapper #form-path .pty-apolloapps-widget-inpage .pty-apolloapps-input-container {\r\n
display: flex;\r\n
flex-direction: column-reverse;\r\n
padding: 0;\r\n
position: relative;\r\n
margin-bottom: 0;\r\n
}\r\n
\r\n
.page-wrapper #form-path .pty-apolloapps-widget-inpage .pty-apolloapps-input-container[data-type=select] {\r\n
flex-direction: column;\r\n
}\r\n
\r\n
.page-wrapper #form-path .pty-apolloapps-widget-inpage .pty-apolloapps-input-container[data-type=select] select {\r\n
white-space: normal;\r\n
margin: 0;\r\n
}\r\n
\r\n
.page-wrapper #form-path .pty-apolloapps-widget-inpage .pty-apolloapps-input-container[data-type=select] select option {\r\n
background-color: #0B15281A;\r\n
}\r\n
\r\n
.page-wrapper #form-path .pty-apolloapps-widget-inpage .pty-apolloapps-input-container[data-type=checkbox] {\r\n
flex-direction: row;\r\n
}\r\n
\r\n
.page-wrapper .pty-apolloapps-widget-inpage .pty-apolloapps-input-container[data-type="checkbox"] {\r\n
align-items: center;\r\n
gap: 6px;\r\n
}\r\n
\r\n
.page-wrapper .pty-apolloapps-widget-inpage .pty-apolloapps-input-container[data-type="checkbox"] label {\r\n
flex: 1;\r\n
}\r\n
\r\n
.page-wrapper #form-path .pty-apolloapps-widget-inpage .pty-apolloapps-input-container[data-type=textarea][data-name=question] {\r\n
margin-top: 0;\r\n
}\r\n
\r\n
.page-wrapper .pty-apolloapps-widget-inpage .pty-apolloapps-input-container[data-type="submit"] {\r\n
margin-top: 10px;\r\n
}\r\n
\r\n
.page-wrapper #form-path label {\r\n
position: relative;\r\n
font-size: 1.2rem;\r\n
top: auto;\r\n
left: auto;\r\n
right: auto;\r\n
bottom: auto;\r\n
}\r\n
\r\n
/* Checkbox Styles */\r\n
.page-wrapper .pty-apolloapps-input-container input[type="checkbox"] {\r\n
appearance: none;\r\n
-webkit-appearance: none;\r\n
-moz-appearance: none;\r\n
width: 20px;\r\n
height: 20px;\r\n
position: relative;\r\n
cursor: pointer;\r\n
border: 1px solid var(--page-green-primary);\r\n
}\r\n
\r\n
.page-wrapper .pty-apolloapps-input-container input[type="checkbox"]:checked {\r\n
background-color: transparent !important;\r\n
border-color: var(--page-green-border) !important;\r\n
}\r\n
\r\n
.page-wrapper .pty-apolloapps-input-container input[type="checkbox"]::after {\r\n
content: "";\r\n
position: absolute;\r\n
left: 6px;\r\n
top: 2px;\r\n
width: 5px;\r\n
height: 10px;\r\n
border: solid white;\r\n
border-width: 0 2px 2px 0;\r\n
opacity: 0;\r\n
transform: rotate(45deg);\r\n
}\r\n
\r\n
.page-wrapper .pty-apolloapps-input-container input[type="checkbox"]:checked::after {\r\n
opacity: 1;\r\n
}\r\n
\r\n
.page-wrapper textarea:focus~label,\r\n
.page-wrapper textarea:valid~label,\r\n
.page-wrapper textarea~label {\r\n
font-size: 18px !important;\r\n
font-weight: 400 !important;\r\n
font-style: normal !important;\r\n
}\r\n
\r\n
.page-wrapper select {\r\n
border: 1px solid var(--page-green-primary) !important;\r\n
background: transparent !important;\r\n
border-radius: 0 !important;\r\n
height: 2.3em !important;\r\n
}\r\n
\r\n
/* Form Responsive */\r\n
@media (max-width: 768px) {\r\n
.page-wrapper input[type=submit] {\r\n
width: auto;\r\n
max-width: 100%;\r\n
white-space: normal;\r\n
}\r\n
}\r\n
</style>\r\n
\r\n
\r\n
<link href="//glcdn.co/grant/css/font-awesome.css" rel="stylesheet" type="text/css">\r\n
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">\r\n
<script>\r\n
document.addEventListener('DOMContentLoaded', () => {\r\n
const initialContentWrapper = document.getElementById('cards-section');\r\n
const form1Container = document.getElementById('form-hs');\r\n
const form2Container = document.getElementById('form-path');\r\n
const contentHeader1Container = document.getElementById('header-next-steps-paragraph1');\r\n
const contentHeader2Container = document.getElementById('header-next-steps-paragraph2');\r\n
const bodyElement = document.body;\r\n
\r\n
\r\n
// Function to inject form content (Handles HubSpot and Generic Widget)\r\n
const injectFormContent = (targetElement, formId) => {\r\n
// Clear previous content to ensure a clean state before injecting\r\n
targetElement.innerHTML = '';\r\n
\r\n
if (formId === 'form1') {\r\n
targetElement.innerHTML = `\r\n
<div class="title return"><button class="back-btn"><i class="fa-solid fa-arrow-left"></i> Voltar</button> <h3> Explorar por conta própria</h3></div>\r\n
<!-- <div class="hs-form-frame" data-region="na1" data-form-id="bdf12142-c0d7-4fd8-9c86-b48c065466b7" data-portal-id="19492707"></div> -->\r\n
\t\t\t\t\t\t\t\t<div id="hubspot-form-wrapper"></div>\r\n
`;\r\n
setTimeout(() => {\r\n
let queryString = window.location.search;\r\n
let confirmhubspot = '/gospel/chaos-gsd/decision/submit' + queryString;\r\n
hbspt.forms.create({\r\n
portalId: "19492707",\r\n
formId: "74752cb2-299b-4a93-b438-b5fe7d0aa168",\r\n
region: "na1",\r\n
redirectUrl: confirmhubspot,\r\n
target: "#hubspot-form-wrapper",\r\n
css: `\r\n
form.hs-form {\r\n
color: #FFFFFF !important;\r\n
font-family: 'Lato', sans-serif !important;\r\n
}\r\n
.hs-form-field label {\r\n
color: #FFFFFF;\r\n
font-family: 'Lato', sans-serif !important;\r\n
}\r\n
.hs-form-field ul {\r\n
list-style: none;\r\n
margin-left: -35px;\r\n
}\r\n
.hs-fieldtype-text {\r\n
padding-bottom: 20px !important;\r\n
}\r\n
.hs-input {\r\n
background-color: transparent !important;\r\n
border: 1px solid #5DB85B !important;\r\n
color: #FFFFFF !important;\r\n
font-family: 'Lato', sans-serif !important;\r\n
padding: 10px !important;\r\n
font-size: 16px !important;\r\n
}\r\n
.hs-input::placeholder {\r\n
color: #CCCCCC !important;\r\n
font-family: 'Lato', sans-serif !important;\r\n
}\r\n
.hs-button {\r\n
background-color: #5DB85B !important;\r\n
border-color: #5DB85B !important;\r\n
color: #FFFFFF !important;\r\n
font-family: 'Lato', sans-serif !important;\r\n
padding: 5px !important;\r\n
font-size: 1.2rem !important;\r\n
}\r\n
.hs-error-msg {\r\n
color: #e51520 !important;\r\n
font-family: 'Lato', sans-serif !important;\r\n
}\r\n
.hs-form-booleancheckbox-display, .hs-richtext, .legal-consent-container {\r\n
color: #FFFFFF !important;\r\n
font-family: 'Lato', sans-serif !important;\r\n
}\r\n
.hs-form-booleancheckbox-display a, .hs-richtext a, .legal-consent-container a {\r\n
color: #FFFFFF !important;\r\n
text-decoration: underline;\r\n
font-family: 'Lato', sans-serif !important;\r\n
}\r\n
.hs-form-booleancheckbox {\r\n
list-style-type: none !important;\r\n
padding-left: 0 !important;\r\n
}\r\n
.hs-form-booleancheckbox-display {\r\n
display: flex !important;\r\n
align-items: flex-start !important;\r\n
}\r\n
.hs-form-booleancheckbox-display input {\r\n
margin-right: 10px !important;\r\n
margin-top: 4px !important;\r\n
}\r\n
.hs-form-booleancheckbox-display input[type="checkbox"] {\r\n
appearance: none;\r\n
-webkit-appearance: none;\r\n
-moz-appearance: none;\r\n
width: 20px;\r\n
height: 20px;\r\n
position: absolute;\r\n
cursor: pointer;\r\n
}\r\n
\r\n
.hs-form-booleancheckbox-display input[type="checkbox"]:checked {\r\n
background-color: transparent !important;\r\n
border-color: #009688 !important;\r\n
}\r\n
\r\n
.hs-form-booleancheckbox-display input[type="checkbox"]::after {\r\n
content: "";\r\n
position: absolute;\r\n
left: 6px;\r\n
top: 2px;\r\n
width: 5px;\r\n
height: 10px;\r\n
border: solid white;\r\n
border-width: 0 2px 2px 0;\r\n
opacity: 0;\r\n
transform: rotate(45deg);\r\n
}\r\n
\r\n
.hs-form-booleancheckbox-display input[type="checkbox"]:checked::after {\r\n
opacity: 1;\r\n
}\r\n
\r\n
.legal-consent-container .hs-form-booleancheckbox-display>span {\r\n
margin-left: 40px !important;\r\n
margin-top: 4px !important;\r\n
}\r\n
`\r\n
});\r\n
}, 50);\r\n
\r\n
\r\n
} else if (formId === 'form2') {\r\n
targetElement.innerHTML = `\r\n
<div class="title return"><button class="back-btn"><i class="fa-solid fa-arrow-left"></i>Voltar</button><h3>Conecte-se com alguém</h3></div>\r\n
<div id="form"></div>\r\n
\t\t\t\t\t\t\t\t`;\r\n
setTimeout(() => {\r\n
$(document).ready(function () {\r\n
var tokenKey = "1wuxd1099ztptf7r9k045n";\r\n
apolloApsWidget.init({\r\n
backend: "https://path-api-widget.globalmediaoutreach.com/",\r\n
token_key: tokenKey,\r\n
container: "body",\r\n
redirectUrl: '/gospel/chaos-gsd/question/submit',\r\n
// redirectUrl: '/confirmation/connect-chaos-gsd',\r\n
url: 'chaos-gsd.pt.godlife.com',\r\n
social_networks: {\r\n
email: 'conecte-se@godlife.com',\r\n
sms: '+12142394388',\r\n
telegram: 'GodLife2Bot',\r\n
facebook: '100264435620870',\r\n
whatsapp: '+12142394388',\r\n
}\r\n
});\r\n
});\r\n
}, 50);\r\n
}\r\n
};\r\n
\r\n
bodyElement.addEventListener('click', (event) => {\r\n
const clickedElement = event.target.closest('.show-form-btn');\r\n
\r\n
if (clickedElement) {\r\n
event.preventDefault();\r\n
const formId = clickedElement.dataset.formId;\r\n
\r\n
initialContentWrapper.style.display = 'none';\r\n
\r\n
form1Container.style.display = 'none';\r\n
form2Container.style.display = 'none';\r\n
contentHeader1Container.style.display = 'block';\r\n
contentHeader2Container.style.display = 'block';\r\n
\r\n
if (formId === 'form1') {\r\n
form1Container.style.display = 'block';\r\n
contentHeader1Container.style.display = 'none';\r\n
contentHeader2Container.style.display = 'none';\r\n
injectFormContent(form1Container, 'form1');\r\n
} else if (formId === 'form2') {\r\n
form2Container.style.display = 'block';\r\n
contentHeader1Container.style.display = 'none';\r\n
contentHeader2Container.style.display = 'none';\r\n
injectFormContent(form2Container, 'form2');\r\n
}\r\n
}\r\n
\r\n
if (event.target.classList.contains('back-btn')) {\r\n
form1Container.style.display = 'none';\r\n
form2Container.style.display = 'none';\r\n
initialContentWrapper.style.display = 'block'; // Or 'flex' as appropriate for your initial layout\r\n
contentHeader1Container.style.display = 'block';\r\n
contentHeader2Container.style.display = 'block';\r\n
}\r\n
});\r\n
\r\n
});\r\n
</script>\r\n
\r\n
\r\n
<div></div>\r\n
\r\n
<div class="page-wrapper">\r\n
<div id="arrow-container">\r\n
<div id="arrow-inner-container">\r\n
<div class="arrow-start row">\r\n
<h1 class="body-text">Passando Do Caos à Calma</h1>\r\n
<div class="pointer"></div>\r\n
</div>\r\n
\r\n
<div class="row arrow-step1">\r\n
<div class="content">\r\n
<h2>VOCÊ SENTE QUE A VIDA ESTÁ FORA DE CONTROLE?</h2>\r\n
<div class="body-text">\r\n
<p>Talvez a pressão em sua vida seja demais. Seus pensamentos voam à noite. Você se preocupa com dinheiro,\r\n
relacionamentos, seu futuro — e parece que ninguém entende como isso é difícil. Você tenta manter tudo\r\n
sob controle, mas por dentro tudo parece um caos. Há um caminho melhor.</p>\r\n
<p>É possível ter paz — mesmo quando a vida ainda está complicada.</p>\r\n
</div>\r\n
</div>\r\n
<img src="https://gmo-media.s3.us-east-1.amazonaws.com/websites/godlife/Portuguese/chaos/caos.webp" alt="Caos">\r\n
<div class="pointer"></div>\r\n
</div>\r\n
\r\n
<div class="row arrow-step2">\r\n
<div class="content">\r\n
<h2>JESUS OFERECE CALMA EM MEIO AO SEU CAOS.</h2>\r\n
<div class="body-text">\r\n
<p>Jesus é o Filho de Deus. Ele entende a sua dor, o estresse e o medo — porque Ele viveu isso. Ele deu a\r\n
Sua vida para remover tudo o que nos separa de Deus. Depois, Ele ressuscitou para que pudéssemos ter\r\n
esperança e paz para sempre.\r\n
</p>\r\n
</div>\r\n
</div>\r\n
<img src="https://gmo-media.s3.us-east-1.amazonaws.com/websites/godlife/Portuguese/chaos/paz.webp" alt="Paz">\r\n
<div class="pointer"></div>\r\n
</div>\r\n
\r\n
<div class="row arrow-step3">\r\n
<div class="content">\r\n
<h2>VOCÊ NÃO PRECISA FAZER ISSO SOZINHO.</h2>\r\n
<div class="body-text">\r\n
<p>Quando você coloca sua confiança em Jesus, Ele caminha com você. Ele concede uma paz duradoura — mesmo\r\n
quando a vida é incerta. E Ele deseja ter um relacionamento com você, a partir de hoje. Você pode\r\n
começar conversando com Ele — agora mesmo. Diga a Ele que você precisa da Sua ajuda. Peça que Ele te\r\n
perdoe e guie a sua vida.</p>\r\n
<p>Ele está ouvindo.</p>\r\n
</div>\r\n
</div>\r\n
<img src="https://gmo-media.s3.us-east-1.amazonaws.com/websites/godlife/gospel/Chaos-gsd/3.png" alt="Cross">\r\n
<div class="pointer"></div>\r\n
</div>\r\n
\r\n
<div class="row arrow-step4">\r\n
<div class="content">\r\n
<h2 class="next-steps-title">DOIS CAMINHOS. UMA JORNADA</h2>\r\n
\r\n
<p id="header-next-steps-paragraph1" class="next-steps-paragraph1">A vida pode parecer esmagadora — cheia de\r\n
ansiedade, decepções e perguntas. Mas há esperança. Jesus oferece calma em meio ao caos e um caminho a\r\n
seguir, não importa o que você esteja enfrentando.</p>\r\n
\r\n
<p id="header-next-steps-paragraph2" class="next-steps-paragraph2">Se você está pronto para explorar isso,\r\n
escolha o próximo passo que se encaixa melhor em sua jornada.</p>\r\n
\r\n
<h3 class="next-steps-heading">PRÓXIMOS PASSOS</h3>\r\n
\r\n
<div id="form-hs" class="form-container"></div>\r\n
\r\n
<div id="form-path" class="form-container"></div>\r\n
\r\n
<div id="cards-section" class="body-text">\r\n
<div class="next-steps-cards">\r\n
<div class="next-steps-left">\r\n
<div class="card">\r\n
<h3>Explore por conta própria</h3>\r\n
<p>Conteúdo relevante enviado diretamente para o seu e-mail.</p>\r\n
<a class="btn show-form-btn" data-form-id="form1" href="#"> Inscrever-se\r\n
<i class="fas fa-envelope" style="margin-left: 10px;"></i>\r\n
</a>\r\n
</div>\r\n
\r\n
<div class="card">\r\n
<h3>Conecte-se conosco</h3>\r\n
<p>Receba orientação espiritual de um de nossos Missionários Online.</p>\r\n
<a class="btn show-form-btn" data-form-id="form2" href="#"> Conectar-se\r\n
<i class="fas fa-comment-dots" style="margin-left: 10px;"></i>\r\n
</a>\r\n
</div>\r\n
</div>\r\n
<div class="next-steps-right"></div>\r\n
</div>\r\n
</div>\r\n
</div>\r\n
</div>\r\n
</div>\r\n
\r\n
<footer class="footer">\r\n
<a href="https://pt.godlife.com" class="footer-logo">\r\n
<img class="logo my-class" src="//a.glcdn.co/images/web/godlife-logo-small.png">\r\n
</a>\r\n
<!-- <a href="https://pt.godlife.com"><img class="logo my-class"\r\n
src="https://gmo-media.s3.amazonaws.com/websites/godlife/cms/images/godlife-logo-white.png"></a> -->\r\n
\r\n
<div class="footer-text-container">\r\n
<p class="footer-text">© 2025 pt.godlife.com é uma marca registrada da Global Media Outreach</p>\r\n
<p class="footer-text footer-links">\r\n
<a href="/article/termos-de-uso">Termos de uso</a> |\r\n
<a href="/article/politica-de-privacidade">Política de Privacidade</a>\r\n
</p>\r\n
</div>\r\n
</footer>\r\n
\r\n
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/embed/v2.js"></script>\r\n
\r\n
<script src="https://code.jquery.com/jquery-3.3.1.min.js"\r\n
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>\r\n
<link rel="stylesheet" href="https://path-widgetcdn.globalmediaoutreach.com/apolloapps.path.widget.css">\r\n
<script src="https://path-widgetcdn.globalmediaoutreach.com/apolloapps.path.widget.js"></script>\r\n
</div>\r\n
</div>
"""
"meta_title" => ""
"meta_description" => ""
"meta_keywords" => ""
"link" => "/gospel/chaos-sg-fbv?_locale=pt"
"canonical" => "chaos-sg-fbv"
] |