inside
(existing markup, not duplicated or moved in the HTML).
Why it was wrong
- Mobile: an old rule @media(max-width:520px){.hero-tagline{display:none}}
hid it completely.
- Desktop / tablet: it was placed at top:2% / right:2% INSIDE .hero-art,
i.e. inside the social-icon orbit, so it collided with Instagram.
Fix: the tagline stays position:absolute inside .hero-art (which is
already position:relative) but is now anchored to that box's TOP edge
and lifted UPWARD (bottom:calc(100% + Npx)) into the hero text area,
right-aligned beside the "Grow Your" line. Nothing inside .hero-art
(icons, orbits, centre icon) is touched, and no other element moves.
N is the fixed height of the text block that sits above .hero-art at
each breakpoint (heading + sub-text + their margins, all px-based in
V76), plus 6px so the tagline ends just above the "Social Presence"
line. Mobile and desktop are controlled separately below.
================================================================ */
.hero-art .hero-tagline{
display:block !important;
top:auto !important;
left:auto !important;
z-index:6 !important;
pointer-events:none !important;
white-space:nowrap !important;
}
/* MOBILE — small phones (≤380px) */
@media (max-width:380px){
.hero-art .hero-tagline{right:0 !important;bottom:calc(100% + 89.7px) !important}
}
/* MOBILE — regular phones (381–560px) */
@media (min-width:381px) and (max-width:560px){
.hero-art .hero-tagline{right:3% !important;bottom:calc(100% + 98.8px) !important}
}
/* TABLET / stacked layout (561–900px) */
@media (min-width:561px) and (max-width:900px){
.hero-art .hero-tagline{right:2% !important;bottom:calc(100% + 103.2px) !important}
}
/* DESKTOP / two-column layout (901px and up) */
@media (min-width:901px){
.hero-art .hero-tagline{right:1% !important;bottom:calc(100% + 123.6px) !important}
}
/* ================================================================
V79 — LOGIN HEADER: REMOVE TINTED GAP ABOVE THE WHITE HEADER
Cause: above 560px, .auth-page still had padding-top (16px on
561–900px, 24px on 901px+). The sticky header therefore started
16–24px BELOW the top of the page, and the lavender body gradient
showed through in that gap, so the top edge did not look white.
(Below 561px the header already started at 0, so mobile was fine.)
Fix: header now starts at the very top (padding-top:0). The same
distance is added to the header's margin-bottom so everything
below the header (hero, login card, stats) stays exactly where it
was. Header height, logo, menu, colors and functionality unchanged.
================================================================ */
@media (min-width:561px) and (max-width:900px){
.auth-page{padding-top:0 !important}
.topbar{margin-bottom:40px !important} /* 24px old margin + 16px old padding */
}
@media (min-width:901px){
.auth-page{padding-top:0 !important}
.topbar{margin-bottom:58px !important} /* 34px old margin + 24px old padding */
}