/* =========================================================
THE APPLIANCE PLUG
HEADER + HERO
REFERENCE-MATCHED VERSION
Client-supplied file, implemented as given. Loaded as its own
(see partials/head.php) after app.css so these rules win.
========================================================= */
/* =========================================================
VARIABLES
========================================================= */
:root {
--red: #D62828;
--yellow: #FFC300;
--black: #1B1B1B;
--dark-blue: #1B263B;
--white: #FFFFFF;
--border: #E5E5E5;
/* --- Header/hero geometry, single source of truth -----------------
These four drive the header height, the photo's overlap up into it,
the curve overlay's own box, and the stripe thickness. They used to
be magic numbers repeated across .ap-header / .ap-hero-right / the
curve wrapper AND again inside every breakpoint -- which is exactly
how the 1150px breakpoint ended up overriding only two of the four
places that needed it (confirmed bug: the curve stayed sized for the
262px header while the header itself had shrunk to 195px). Declared
once here and overridden as a SET per breakpoint, so a header-height
change can no longer desync the pieces that are derived from it. */
--ap-header-h: 262px;
/* How far the technician photo reaches UP into the header. The white
simply stops early on the photo's side -- that partial overlap is
what reads as "the header is taller on one side" in the reference,
even though .ap-header is one uniform box. */
--ap-photo-lift: 91px;
/* Stripe thickness, in real screen px (see .ap-hero-curve-stripe --
vector-effect keeps it at exactly this value everywhere along the
curve regardless of how the SVG box is stretched). */
--ap-stripe-w: 28px;
/* How far the photo is pulled left past its own column, so there is
always real photo underneath the part of the curve that bulges into
the black panel's side. Only the sliver right of the curve is ever
visible -- the overlay covers the rest. */
--ap-photo-bleed: 120px;
}
/* =========================================================
RESET -- intentionally removed
=========================================================
The client-supplied file had a full reset here (*, html, body,
img, a). app.css (loaded just before this file, every page site-
wide) already provides equivalent rules for all of those --
EXCEPT body{background:#FFFFFF}, which was never actually needed
for the header or hero (both paint their own explicit background:
.ap-header is white, .ap-hero is black) but WAS a real, site-wide
regression: app.css's own body rule is background:var(--bg),
which switches to a dark tone in dark mode/theme, while every
section's TEXT color also comes from CSS variables that flip
together with it (e.g. --text). Locking body's background to a
literal white while text color still flips to its light/dark-mode
value produced illegible near-white-on-white text sitewide
whenever dark mode was active -- confirmed as the actual cause of
reported "damaged/illegible sections" after this file first
shipped. Removed rather than reconciled, since none of it was
doing real work here in the first place.
Bug fix: removing that reset's blanket a{text-decoration:none} turned out
NOT to be fully redundant with app.css after all -- app.css only tunes
underline thickness/offset for whenever an underline is shown, it never
actually turns the browser default underline off. Every link in the
header AND the hero (logo, nav items, phone button, the 3 CTA buttons)
came back underlined once this file stopped doing it. Scoped to these
two sections instead of restoring it globally. */
.ap-header a,
.ap-hero a {
text-decoration: none;
}
/* =========================================================
HEADER
Reference: approximately 255px tall
========================================================= */
/* Round 5: a precise pixel measurement pass against the reference (not
another visual guess) resolved the round-3-vs-round-4 contradiction --
the header element itself IS one uniform box (~262px), but the
TECHNICIAN PHOTO overlaps UP into its right portion by ~91px (photo top
sits at roughly header-height minus 91px, not at the header's own
bottom edge). That partial overlap is what reads as "one side taller"
even though .ap-header's own box never changes height -- the white
simply doesn't reach as far down on the photo side, because the photo
is painted above it there. See .ap-hero-right for the actual overlap;
this element stays a plain, single-height box. */
.ap-header {
position: relative;
width: 100%;
height: var(--ap-header-h);
background: var(--white);
border-top: 2px solid #222;
border-left: 2px solid #222;
border-right: 2px solid #222;
}
/* Nav/phone sit in the upper-middle of the tall header rather than
dead-centered in it (reference measurement: nav vertical center is
roughly a third of the way down, not half) -- flex-start + a fixed
top offset instead of align-items:center. */
.ap-header-container {
position: relative;
z-index: 20;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
padding-top: 48px;
padding-left: 74px;
padding-right: 54px;
}
/* =========================================================
LOGO
========================================================= */
/* position:absolute so its height (it occupies nearly the full 262px
header) doesn't stretch the nav/phone row, which sits at a fixed
padding-top instead. left repeats header-container's own padding-left
since an absolutely positioned child's left:0 lands on the padding
EDGE, not inset by the padding VALUE. Sized off the real logo file's
own aspect ratio (1194x816 -- confirmed on the actual asset, not
estimated from a screenshot) so it isn't stretched/squashed. */
.ap-logo {
position: absolute;
top: 10px;
left: 74px;
z-index: 5;
width: 300px;
display: block;
}
.ap-logo img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
/* =========================================================
NAVIGATION
========================================================= */
/* Bug fix: centering this via position:absolute;left:50% centers it against
the header-container's FULL width, not the space actually left over
between the logo and the phone button -- with the logo rendered at its
real width, that put nav's own left edge inside the logo's right edge
(confirmed via bounding-box measurement), so "HOME" overlapped the logo
icon. flex:1 (a normal flex item again) only ever claims space actually
left over between its flex siblings -- but with the logo taken out of
the flex row entirely (position:absolute, above), that "leftover space"
still starts at x:0 as far as flexbox is concerned, so margin-left has
to repeat the logo's own width + inset to keep nav from claiming space
the logo is already visually sitting on. */
.ap-nav {
position: static;
flex: 1;
margin-left: 390px;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
white-space: nowrap;
}
.ap-nav-link {
position: relative;
display: flex;
align-items: center;
height: 50px;
font-size: 17px;
line-height: 1;
font-weight: 700;
color: #111111;
transition:
color .2s ease;
}
.ap-nav-link:hover {
color: var(--red);
}
.ap-nav-link.active {
color: var(--red);
}
/* =========================================================
HEADER PHONE
========================================================= */
.ap-header-phone {
margin-left: auto;
width: 245px;
height: 59px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--red);
color: var(--white);
border-radius: 4px;
font-size: 20px;
font-weight: 800;
white-space: nowrap;
}
.ap-header-phone-icon {
width: 25px;
height: 25px;
flex-shrink: 0;
}
/* =========================================================
HERO
========================================================= */
.ap-hero {
position: relative;
width: 100%;
height: 582px;
min-height: 582px;
display: grid;
grid-template-columns:
55.2%
44.8%;
background: var(--black);
/* .ap-hero-right is pulled up 91px past this section's own top edge
(see below) to reproduce the header/photo overlap -- overflow:hidden
here would crop exactly that off at the boundary. */
overflow: visible;
border-left: 2px solid #222;
border-right: 2px solid #222;
border-bottom: 2px solid #222;
}
/* =========================================================
HERO LEFT
========================================================= */
/* z-index 3, above the curve overlay (2) and the photo (1) -- see the
stacking note on .ap-hero-curve. This column carries the TEXT above the
curve; it deliberately no longer paints a background of its own.
Two things broke while it did. This column's box is a straight rectangle
ending at the column seam, but the curve crosses that seam -- it bulges
~28px into this column around mid-height. So a background here (painted
at z:3, above the curve at z:2) covered the middle third of the stripe
outright: the red was visible up top and the gold down low, and the
entire bend between them was buried, which is why the curve read as two
disconnected fragments. The same rectangle also covered the sliver of
PHOTO that is supposed to show on the right-hand side of the curve
through that same bend -- the reference has photo there, not black.
Nothing is lost by dropping it: .ap-hero already paints var(--black)
across the whole section, so this column is backed by the identical
colour, and below 900px (where the curve is switched off entirely) that
section background is the only thing that was ever doing the work. */
.ap-hero-left {
position: relative;
z-index: 3;
height: 100%;
background: transparent;
display: flex;
align-items: center;
}
.ap-hero-content {
width: 100%;
padding-left: 69px;
padding-right: 35px;
padding-top: 4px;
}
/* =========================================================
MAIN TITLE
========================================================= */
.ap-hero-title {
margin: 0;
text-transform: uppercase;
font-size: 55px;
line-height: .99;
letter-spacing: -1.8px;
font-weight: 900;
}
.ap-title-white {
display: block;
color: var(--white);
}
.ap-title-yellow {
display: block;
margin-top: 7px;
color: var(--yellow);
}
/* =========================================================
SUBTITLE
========================================================= */
.ap-hero-subtitle {
margin-top: 22px;
color: var(--white);
font-size: 27px;
line-height: 1.32;
letter-spacing: -.5px;
font-weight: 700;
}
/* =========================================================
DESCRIPTION
========================================================= */
.ap-hero-description {
width: 100%;
max-width: 595px;
margin-top: 17px;
color: var(--white);
font-size: 18px;
line-height: 1.47;
font-weight: 400;
}
/* =========================================================
BUTTON ROW
========================================================= */
.ap-hero-buttons {
margin-top: 32px;
display: flex;
align-items: stretch;
gap: 30px;
}
/* =========================================================
BUTTON BASE
========================================================= */
.ap-hero-button {
height: 88px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
border-radius: 7px;
font-size: 18px;
line-height: 1.1;
font-weight: 800;
text-align: center;
transition:
transform .18s ease,
filter .18s ease,
box-shadow .18s ease;
}
.ap-hero-button:hover {
transform: translateY(-2px);
filter: brightness(1.04);
box-shadow:
0 8px 20px rgba(0, 0, 0, .28);
}
.ap-button-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
}
/* =========================================================
CALL BUTTON
========================================================= */
.ap-call-button {
width: 278px;
background: var(--red);
color: var(--white);
}
.ap-call-button .ap-button-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.ap-call-button strong {
font-size: 18px;
font-weight: 900;
}
.ap-call-button small {
font-size: 17px;
font-weight: 800;
}
/* =========================================================
SCHEDULE BUTTON
========================================================= */
.ap-schedule-button {
width: 225px;
background: var(--yellow);
color: #111111;
}
.ap-schedule-button .ap-button-icon {
width: 31px;
height: 31px;
}
.ap-schedule-button span {
display: block;
}
/* =========================================================
REVIEW BUTTON
========================================================= */
.ap-review-button {
width: 220px;
background: transparent;
color: var(--white);
border:
2px solid
rgba(255, 255, 255, .72);
}
.ap-review-button .ap-button-icon {
width: 32px;
height: 32px;
}
/* =========================================================
HERO RIGHT
========================================================= */
/* Bug fix: an earlier attempt read the reference as "the photo reaches up
behind the header," pulling this column up with a negative margin-top --
confirmed against the actual reference image that the photo starts
cleanly below the header instead (it's the LOGO that overhangs, not the
photo -- see .ap-logo above), so that's been reverted back to plain
height:100%. */
/* Reproduces the ~91px header/photo overlap measured off the reference:
pulls this column up by exactly that amount past its natural grid
position (which starts level with .ap-hero-left, right below the
header), and grows its height by the same amount to keep the BOTTOM
edge exactly where it was. overflow is left at the default (visible) --
the technician is sized to exactly 100%/100% of this box already
(object-fit:cover, no natural overflow to clip), and the curve SVG
deliberately needs to bulge past this column's own left edge into
.ap-hero-left's territory (still fully inside .ap-hero's own outer
bounds, so nothing escapes the section itself). */
/* z-index 1: the LOWEST of the three hero layers. It still needs to be a
positive z-index (that's what lifts the photo above .ap-header's own
white background, which is a plain z-index:auto positioned element and
therefore always paints below any positive layer -- that's the whole
mechanism behind the photo overlapping up into the header). But it must
sit BELOW the curve overlay, which paints the black/white over the part
of this photo that falls on the text side of the curve. This used to be
10 -- tied with .ap-hero-left, so DOM order won and the photo painted
over everything, which is why the black could never reach the stripe. */
.ap-hero-right {
position: relative;
z-index: 1;
height: calc(100% + var(--ap-photo-lift));
margin-top: calc(-1 * var(--ap-photo-lift));
/* Was #222 -- a slightly different dark than the hero's own black, so
any sub-pixel sliver of it showing at the seam read as a visible
mismatched strip. Same token as everything else now. */
background: var(--black);
}
/* =========================================================
TECHNICIAN IMAGE
========================================================= */
/* Bug fix: the curve used to be a stroked line drawn OVER a plain
rectangular photo -- floating on top of both the black panel and the
photo instead of reading as part of the hero's own structure. A
clip-path (defined once, in index.php, as an objectBoundingBox path
sharing the same curve) actually cuts the photo along that shape instead,
so the black hero-left panel's own background shows through on the
clipped-away side -- the curve becomes the true silhouette where the two
panels meet, not an overlay. Extended 90px further left (left:-90px,
width:calc(100% + 90px)) so there's real photo pixel data to reveal in
the bulge the clip allows through; without that extra width the clip
would just be cutting into empty space past the image's own left edge. */
/* Bug fix (round 6): rounds 4-5 chased an exact organic S-curve (clip-path
+ custom SVG bezier) traced off someone else's pixel landmarks -- three
rounds of "still doesn't match," and the client's own words confirm why:
"no te enfoques en lo que esta despues de la franja ya que no va a
coincidir porque la imagen es diferente" -- their photo is a different
refrigerator than the reference's, so chasing an exact silhouette off
THAT photo was never going to look right against THIS one anyway. Back
to a plain rectangular photo (no clip-path, no left extension) -- the
ring in front of it (below) is doing all the shape work now, same as
the reference. */
/* Round 7: no clip-path here, deliberately. The curve is cut into the
BLACK side instead (see .ap-hero-curve) -- the overlay paints the hero's
own black/white over everything on the text side of the curve, so the
photo underneath can stay a plain untouched rectangle and the curve
still reads as the true border between the two. That's the same result
a clip on the photo would give, minus the coordinate-system coupling
between the photo's box and the curve's box that broke rounds 4-5.
The leftward bleed IS still needed: the curve bulges ~30px past this
column's own left edge, and without real photo pixels under that bulge
there'd be a bare strip between the stripe and the photo -- exactly the
gap the client kept flagging. Only the part right of the curve is ever
visible; the overlay covers the rest of the bleed.
right:0 stays OFF -- left + right + an explicit width is over-constrained
and produced a black band down the photo's right edge last time. */
.ap-technician {
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * var(--ap-photo-bleed));
width: calc(100% + var(--ap-photo-bleed));
height: 100%;
/* app.css's base img reset is max-width:100%, which silently clamped
this back to the column width the first time the bleed was added --
the element measured 636px when it should have been 726px. */
max-width: none;
object-fit: cover;
object-position: center center;
z-index: 1;
}
/* =========================================================
RED/GOLD CURVE ("la franja")
========================================================= */
/* Round 7 -- the structural fix, not another tweak to the same idea.
Every earlier round drew this stripe as a line floating ON TOP of a plain
rectangular photo. That is what the client kept rejecting, and the reason
is geometric, not cosmetic: the REAL boundary between the black text panel
and the photo stayed a straight vertical column seam somewhere to the LEFT
of the stripe, so the stripe read as decoration hovering over the photo
with a strip of the wrong colour stranded behind it. In the reference the
stripe IS the boundary -- black on one side, photo on the other, nothing
in between: "la parte negra llegar hasta la franja que sirve como borde".
So the curve is no longer an oval drawn in front of things. It is ONE
shape used twice:
1. as a clip-path on an overlay that repaints the hero's own black
(and, above the fold line, the header's own white) across everything
on the TEXT side of the curve -- burying both the straight column
seam and the left part of the photo underneath it;
2. as the stroked stripe itself, centred on that very same edge.
Both read the identical path data (authored once, in index.php), so they
physically cannot drift apart. That drift was the actual cause of the
visible gap back in rounds 4-5, when the stroke lived in a pixel viewBox
and the clip in a fractional one and the two were tuned separately.
Consequence worth stating: the photo needs no clip-path of its own, and
the curve's shape is completely independent of the photo's box. Rounds
4-5 died trying to keep those two in sync. */
/* The overlay box.
Spans from the PHOTO'S top edge -- not the page top -- down to the hero's
bottom, across the full hero width. Anchoring the top to the photo rather
than to the page is what makes the curve breakpoint-proof: the path's y=0
is always "where the photo starts" and its y=1 is always "hero bottom",
at every header size, so the path data itself never needs a media query.
(Normalising against the whole page band instead would make y=0 the page
top, and the photo's top edge would then land at a DIFFERENT fraction per
breakpoint -- 0.203 at desktop vs 0.160 at 1150 -- silently detaching the
top of the stripe from the top of the photo on smaller screens.)
Nothing above the photo's top edge needs covering: the header's own white
is already the only thing painted up there. */
.ap-hero-curve {
position: absolute;
z-index: 2;
/* Offset is -lift, NOT (lift - header): this box is positioned against
.ap-hero's top edge, which already sits at the header's full height
down the page, so reaching the photo's top edge only means climbing
back up by the lift itself. Measured wrong once (91 vs 171) and it
put the white/black split 80px above the header's bottom edge. */
top: calc(-1 * var(--ap-photo-lift));
left: 0;
width: 100%;
height: calc(100% + var(--ap-photo-lift));
pointer-events: none;
}
/* The repaint. Two flat blocks -- white for the slice that overlaps the
header, black for the hero proper -- clipped to the text side of the
curve.
The split between them is var(--ap-photo-lift) tall, which is exactly how
far this box reaches above .ap-hero's own top edge. So the white/black
boundary lands ON the header's bottom edge to the pixel at every
breakpoint: it is the same length the header is positioned with, not a
fraction re-derived from it, so there is no rounding hairline to chase. */
.ap-hero-curve-fill {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
clip-path: url(#apHeroCurveClip);
}
.ap-hero-curve-fill-top {
display: block;
height: var(--ap-photo-lift);
background: var(--white);
}
.ap-hero-curve-fill-bottom {
display: block;
flex: 1;
background: var(--black);
}
/* preserveAspectRatio="none" (set on the element): the path is authored in
a 0..1 square and deliberately stretched to whatever box the hero happens
to be, so the curve stays proportional to the hero at every width instead
of holding a fixed aspect ratio and going pinched at one size and nearly
straight at another -- which is exactly how the old percentage-vs-fixed
sizing on the oval kept oscillating between "too swept" and "a diagonal
line". Placed after .ap-hero-curve-fill in the DOM so the stroke paints
on top of the fill's hard edge and straddles it. */
.ap-hero-curve-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* vector-effect is what finally makes the stripe UNIFORM.
The previous version built it out of border-top/border-bottom on a
border-radius:50% box. An elliptical CSS border tapers to ZERO width at
the left and right vertices of the ellipse -- and the left vertex is
precisely the part of the arc this hero shows most of. That is the whole
explanation for "debe ser mas gruesa y uniforme": it rendered thin
through the middle and fat at the two ends, and thickening the border
only exaggerated the taper. A stroked path has one width along its entire
length by definition, and non-scaling-stroke pins that width to real
screen pixels so the 0..1 viewBox's very non-uniform stretch cannot
squash it on one axis either. */
.ap-hero-curve-stripe {
fill: none;
stroke: url(#apHeroStripeGrad);
stroke-width: var(--ap-stripe-w);
vector-effect: non-scaling-stroke;
}
/* =========================================================
DESKTOP 1600+
========================================================= */
@media (min-width: 1600px) {
.ap-header-container {
padding-left: 74px;
padding-right: 54px;
}
.ap-hero-content {
padding-left: 69px;
}
}
/* =========================================================
1400px
========================================================= */
@media (max-width: 1400px) {
.ap-logo {
width: 330px;
}
.ap-nav {
gap: 28px;
}
.ap-nav-link {
font-size: 16px;
}
.ap-header-phone {
width: 220px;
font-size: 17px;
}
.ap-hero-title {
font-size: 47px;
}
.ap-hero-subtitle {
font-size: 24px;
}
.ap-hero-description {
font-size: 16px;
}
.ap-hero-buttons {
gap: 14px;
}
.ap-call-button {
width: 245px;
}
.ap-schedule-button {
width: 195px;
}
.ap-review-button {
width: 185px;
}
}
/* =========================================================
1150px
========================================================= */
@media (max-width: 1150px) {
/* The whole geometry side of this breakpoint is these four values.
.ap-header's height, the photo's lift and bleed, the curve overlay's
box and the stripe's weight are all derived from them, so they move
as a set and cannot desync -- the previous version overrode the
header height and the photo lift but left the curve's own box sized
for the 262px header, so on this breakpoint the curve reached 127px
too far up. Proportions kept from the base: lift/header stays ~0.35
(68/195 vs 91/262), stripe scales with the smaller header. */
:root {
--ap-header-h: 195px;
--ap-photo-lift: 68px;
--ap-stripe-w: 22px;
--ap-photo-bleed: 100px;
}
.ap-header-container {
padding-top: 36px;
padding-left: 35px;
padding-right: 35px;
}
.ap-logo {
width: 260px;
}
.ap-nav {
margin-left: 310px;
gap: 18px;
}
.ap-nav-link {
font-size: 13px;
}
.ap-header-phone {
width: 185px;
height: 50px;
font-size: 14px;
}
.ap-hero {
height: 600px;
min-height: 600px;
}
.ap-hero-content {
padding-left: 40px;
}
.ap-hero-title {
font-size: 39px;
}
.ap-hero-subtitle {
font-size: 21px;
}
.ap-hero-description {
max-width: 480px;
}
.ap-hero-button {
height: 75px;
font-size: 15px;
}
.ap-call-button {
width: 205px;
}
.ap-schedule-button {
width: 170px;
}
.ap-review-button {
width: 165px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.ap-header {
height: auto;
}
.ap-header-container {
min-height: 100px;
padding:
15px
25px;
flex-wrap: wrap;
}
/* The header/photo overlap and the logo overhang are both desktop-only
flourishes -- at this width the hero itself stacks into one column
(grid-template-columns:1fr, further down), so there's no header-vs-
photo relationship left to overlap in the first place. Logo goes
back to a normal in-flow flex child (header's height:auto, just
above, then simply grows to fit it) and the curve SVG (sized and
positioned for the desktop 2-column layout) is hidden rather than
trying to rescale it for a layout it was never drawn for. */
.ap-logo {
position: static;
}
/* Desktop-only flourish -- at this width .ap-hero-right is full-width in
a stacked single-column hero, so the curve's leftward bulge has no
black hero-left panel beside it to bulge into any more. */
.ap-hero-curve {
display: none;
}
/* Zeroing the lift is what actually switches the overlap off, and it has
to happen HERE rather than being left to the 1150px values: .ap-header
goes height:auto just above, so a photo still pulled up 68px would
overlap a header whose height no longer has anything to do with that
number, across the full width of a stacked layout. The bleed goes too
-- the photo is full-width in one column now, so pulling it left just
crops the subject off-centre for no reason. */
:root {
--ap-photo-lift: 0px;
--ap-photo-bleed: 0px;
}
.ap-logo {
width: 210px;
}
.ap-header-phone {
margin-left: auto;
}
.ap-nav {
position: static;
order: 3;
/* flex-basis:100% is the part that actually moves the nav onto its
own row. width:100% alone did nothing: the base rule sets flex:1,
whose flex-basis is 0%, and basis beats width -- so the nav never
forced a wrap in the header's flex-wrap container. It just stayed
on the logo/phone line and grew into whatever was left (measured:
67px wide at x=303 on a 390px screen), which is why the nav links
rendered as a squeezed stack of cut-off words pinned to the right
edge instead of a centered row underneath. */
flex: 0 0 100%;
width: 100%;
transform: none;
justify-content: center;
padding-top: 8px;
padding-bottom: 8px;
gap: 20px;
/* Both of these are undoing DESKTOP rules that were never reset on
the way down, and together they were the only real horizontal
overflow left on the page: the base .ap-nav is a flex:1 child
offset by a big margin-left to clear the absolutely-positioned
logo (310px at the 1150 breakpoint), and it carries white-space:
nowrap so the row can never break. Once the header wraps and the
logo is back in flow there is nothing left to clear, so the
margin was pure displacement -- at 390px it pushed a 309px-wide
nav to left:330, i.e. 249px past the viewport, and nowrap meant
it could not recover. Measured document.scrollWidth 639 vs a
390 viewport before this, 390 after. */
margin-left: 0;
white-space: normal;
flex-wrap: wrap;
}
.ap-nav-link {
height: 28px;
font-size: 11px;
}
.ap-hero {
height: auto;
min-height: 0;
grid-template-columns: 1fr;
}
.ap-hero-left {
min-height: 600px;
}
.ap-hero-content {
padding:
60px
30px;
}
.ap-hero-title {
font-size: 44px;
}
.ap-hero-buttons {
flex-wrap: wrap;
}
.ap-hero-right {
height: 500px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.ap-header-container {
padding:
14px
18px;
}
.ap-logo {
width: 175px;
}
.ap-header-phone {
width: auto;
height: 42px;
padding:
0
13px;
font-size: 12px;
}
.ap-header-phone-icon {
width: 18px;
height: 18px;
}
.ap-nav {
gap:
8px
13px;
}
.ap-nav-link {
font-size: 9px;
}
.ap-hero-left {
min-height: 0;
}
.ap-hero-content {
padding:
48px
20px
45px;
}
.ap-hero-title {
font-size: 34px;
line-height: 1;
letter-spacing: -1px;
}
.ap-hero-subtitle {
margin-top: 20px;
font-size: 20px;
}
.ap-hero-description {
margin-top: 16px;
font-size: 15px;
line-height: 1.5;
}
.ap-hero-buttons {
margin-top: 28px;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.ap-hero-button {
width: 100%;
height: 72px;
}
.ap-hero-right {
height: 390px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.ap-logo {
width: 150px;
}
.ap-header-phone {
font-size: 10px;
}
.ap-nav-link {
font-size: 8px;
}
.ap-hero-title {
font-size: 30px;
}
.ap-hero-subtitle {
font-size: 18px;
}
}