just collapses to nothing (safe
failure), unlike the old empty-Elementor-container approach which
rendered a visible gray placeholder block. */
.golivo-divider{
border-top: 1px solid rgba(61,43,31,0.10);
width: 100%;
}
.golivo-hero-visual{
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.golivo-hero-visual svg{
display: block;
width: 100%;
height: auto;
}
/* Real-app-screenshot frame — soft elevation, no glass/blur/glow.
A slight tilt gives it presence without tipping into 3D-mockup cliché. */
.golivo-app-frame{
max-width: 700px;
margin: 0 auto;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--golivo-border);
box-shadow:
0 30px 60px -20px rgba(58, 44, 34, 0.28),
0 8px 20px -8px rgba(58, 44, 34, 0.12);
transform: rotate(-1.2deg);
transition: transform .3s ease;
}
.golivo-app-frame:hover{ transform: rotate(0deg); }
.golivo-app-frame img{
display: block;
width: 100%;
height: auto;
}
/* Bleed past the column edge on larger screens — fills the empty right
margin instead of floating in the middle of unused space. */
@media (min-width: 1200px){
.golivo-app-frame{
max-width: 860px;
margin-right: -24px;
transform: rotate(-1.2deg) translateX(0);
}
}
@media (min-width: 1440px){
.golivo-app-frame{
max-width: 940px;
margin-right: -120px;
}
}
@media (max-width: 767px){
.golivo-app-frame{ transform: none; max-width: 100%; margin-right: 0; }
}
/* ---- Video section: hover-only progressive enhancements. Base layout,
colors and positioning are inlined directly in the widget HTML (see
golivo-video-section-v2.json) so the section renders correctly even if
this stylesheet fails to load or is served stale from cache — that is
exactly what happened with the v1 version of this section. ---- */
.golivo-video-play-btn{
transition: transform .2s ease, box-shadow .2s ease;
cursor: pointer;
}
.golivo-video-play-btn:hover{
transform: translate(-50%, -50%) scale(1.06);
box-shadow: 0 18px 36px rgba(156, 79, 30, 0.42);
}
/* ---- About section: decorative drop cap, brand-moment typographic detail.
Non-critical — paragraph reads fine without it if this file fails to load. ---- */
.golivo-about-dropcap::first-letter{
font-family: var(--golivo-font-display);
font-weight: 500;
font-size: 2.6em;
float: left;
line-height: 0.85;
margin: 0.03em 0.08em 0 0;
color: var(--golivo-olive-deep);
}
/* ---- FAQ accordion: bring the native Elementor widget onto brand type
without fighting its own generated CSS specificity (learned from the
Hero headline issue) — !important is deliberate here. ---- */
.golivo-faq-accordion .elementor-accordion-item{
border: none !important;
border-bottom: 1px solid rgba(61,43,31,0.10) !important;
}
.golivo-faq-accordion .elementor-tab-title{
font-family: var(--golivo-font-body) !important;
font-weight: 500 !important;
font-size: 15px !important;
color: var(--golivo-text-primary) !important;
padding: 20px 0 !important;
background: transparent !important;
}
.golivo-faq-accordion .elementor-tab-content{
font-family: var(--golivo-font-body) !important;
font-size: 14px !important;
line-height: 1.65 !important;
color: var(--golivo-text-secondary) !important;
padding: 0 0 20px !important;
border: none !important;
}
.golivo-faq-accordion .elementor-accordion-icon{
color: var(--golivo-terracotta-deep) !important;
}
/* Native
chevron rotation (progressive enhancement only —
details/summary works natively without this) */
.golivo-faq-list details[open] .golivo-faq-chevron{
transform: rotate(180deg);
}
.golivo-faq-list summary::-webkit-details-marker{ display: none; }
.golivo-faq-list summary::marker{ content: ""; }
.golivo-hero-microcopy{
color: var(--golivo-text-muted);
}
/* The shortcode widget wraps our .golivo-btn output in Elementor's own
— strip its default block spacing so
the button sits flush with surrounding text. */
.golivo-hero-cta .elementor-shortcode{
display: inline-block;
}
@media (max-width: 767px){
.golivo-hero-visual{ max-width: 400px; }
}