diff --git a/apps/nxtgauge-coming-soon/base/configmap-html.yaml b/apps/nxtgauge-coming-soon/base/configmap-html.yaml index 7b38799..c83c5b2 100644 --- a/apps/nxtgauge-coming-soon/base/configmap-html.yaml +++ b/apps/nxtgauge-coming-soon/base/configmap-html.yaml @@ -114,7 +114,11 @@ data: font-size: clamp(44px, 10vw, 86px); font-weight: 900; letter-spacing: -0.04em; - line-height: 0.95; + /* Was 0.95 - tighter than the font's own ascender/descender box, so + descenders (the tail on lowercase g/y/p/q/j - e.g. "Coming") got + clipped at the bottom of the line box. 1.08 keeps the tight, + modern look without cutting anything off. */ + line-height: 1.08; color: #fff; margin-bottom: 26px; } @@ -208,6 +212,15 @@ data: @media (max-width: 480px) { .form { flex-direction: column; } .form input { + /* .form input's base rule sets `flex: 1`, meant for the row layout + above. In a column flex container `flex: 1` computes flex-basis + to 0% along the (now vertical) main axis, which overrides the + explicit height: 50px and collapses the input to ~18px (just its + line box) instead - the placeholder text wasn't a contrast + problem, the input itself was nearly invisible. `flex: none` + keeps it at its real 50px height when stacked. */ + flex: none; + height: 50px; border-right: 1.5px solid rgba(255,255,255,0.12); border-bottom: none; border-radius: 10px 10px 0 0; diff --git a/coming-soon/index.html b/coming-soon/index.html index edef559..eaef007 100644 --- a/coming-soon/index.html +++ b/coming-soon/index.html @@ -111,7 +111,11 @@ font-size: clamp(44px, 10vw, 86px); font-weight: 900; letter-spacing: -0.04em; - line-height: 0.95; + /* Was 0.95 - tighter than the font's own ascender/descender box, so + descenders (the tail on lowercase g/y/p/q/j - e.g. "Coming") got + clipped at the bottom of the line box. 1.08 keeps the tight, + modern look without cutting anything off. */ + line-height: 1.08; color: #fff; margin-bottom: 26px; } @@ -205,6 +209,15 @@ @media (max-width: 480px) { .form { flex-direction: column; } .form input { + /* .form input's base rule sets `flex: 1`, meant for the row layout + above. In a column flex container `flex: 1` computes flex-basis + to 0% along the (now vertical) main axis, which overrides the + explicit height: 50px and collapses the input to ~18px (just its + line box) instead - the placeholder text wasn't a contrast + problem, the input itself was nearly invisible. `flex: none` + keeps it at its real 50px height when stacked. */ + flex: none; + height: 50px; border-right: 1.5px solid rgba(255,255,255,0.12); border-bottom: none; border-radius: 10px 10px 0 0;