with a button-shaped element
that visually matches the real GIS button — white pill, dark text,
4-color Google "G". When the DOB field becomes a valid 18+ date,
ensureGoogleButton() overwrites this with the real GIS widget.
The OUTER wrap is .gam-google-fake-wrap, a
. The existing
.gam-google-row > div selector (further up this file) matches
it and gives it the gold-rim pill chrome — identical to the
wrap GIS gets — so swapping placeholder ↔ real button preserves
the gold-rim surround visually.
The button is type="button" so the form is never submitted; the
onBodyClick handler in auth.js also preventDefaults belt-and-
suspenders. Click triggers a flash-red animation on the inner
text via .gam-google-fake-text.flash. */
.gam-google-fake {
/* Match the official GIS large-pill geometry as closely as we can
without controlling Google's iframe: same border-radius, similar
width, Google's grey outline color (#dadce0). Multi-line text is
allowed (guiding messages are longer than "Sign up with Google")
so min-height grows naturally; the gold-rim wrap follows. */
display: inline-flex;
align-items: center;
gap: 10px;
width: 280px;
max-width: 100%;
min-height: 40px;
padding: 8px 14px;
background: #ffffff;
color: #3c4043;
border: 1px solid #dadce0;
border-radius: 9999px;
font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 12.5px;
line-height: 1.30;
text-align: left;
cursor: pointer;
outline: none;
transition: transform 0.06s;
-webkit-tap-highlight-color: transparent;
}
.gam-google-fake:active { transform: translateY(1px); }
.gam-google-fake-icon {
flex: 0 0 18px;
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
}
.gam-google-fake-icon svg { width: 100%; height: 100%; display: block; }
.gam-google-fake-text {
flex: 1 1 auto;
/* color is on the parent so the flash animation can override the
text color via this element's own animation rule below. */
color: inherit;
}
/* Flash-red animation. Two pulses over ~700ms — long enough to
register, short enough to not feel obnoxious. After the two pulses
the text STAYS red (animation-fill-mode: forwards + a static
color rule on .flash that survives once the animation completes),
so the red persists as long as the locked button is on screen.
Once the DOB becomes valid 18+, paintGoogleSlotForSignup runs
ensureGoogleButton() which replaces the row contents with the
real GIS pill — the .flash class is gone with the element.
2026-05-22 fix: no font-weight changes in the keyframes — bold
shifts character widths and the surrounding pill geometry, which
the user reported as visible layout jiggling. Color-only now. */
.gam-google-fake-text.flash {
animation: gamGoogleFakeFlash 0.70s ease-in-out forwards;
color: #d83025; /* sticky red post-animation */
}
@keyframes gamGoogleFakeFlash {
0% { color: #3c4043; }
20% { color: #d83025; } /* Google red */
40% { color: #3c4043; }
60% { color: #d83025; }
80% { color: #3c4043; }
100% { color: #d83025; } /* end on red — fill-mode forwards keeps it */
}
/* ── Native date input + custom hint overlay ───────────────────────── */
/* Native picker opens on tap. While the input is EMPTY, the OS-default
text (e.g. "dd ---- yyyy" in red on Chromium) is hidden via
color: transparent, and a custom "YYYY-MM-DD" hint overlay is shown
instead in luxury colors. */
.gam-form-input[type="date"] {
appearance: none;
-webkit-appearance: none;
font-family: inherit;
text-align: left;
}
.gam-form-input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.gam-form-input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1) brightness(1.5);
cursor: pointer;
opacity: 0.85;
}
/* Hide OS-default empty-state text while there's no value, and show
our luxury "YYYY-MM-DD" hint instead. Driven by an .is-empty class
that JS sets on the wrap based on input.value (Chromium does NOT
match :placeholder-shown on type="date" inputs). */
.gam-dob-wrap {
position: relative;
display: block;
}
.gam-dob-wrap .gam-form-input { width: 100%; }
.gam-dob-wrap.is-empty .gam-form-input[type="date"] {
color: transparent;
}
.gam-dob-wrap.is-empty .gam-form-input[type="date"]::-webkit-datetime-edit {
color: transparent;
}
.gam-dob-hint {
position: absolute;
left: 14px; top: 50%; right: 40px;
transform: translateY(-50%);
pointer-events: none;
display: none;
color: var(--gam-cyan-soft);
font-size: 14px;
letter-spacing: 0.10em;
font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
opacity: 0.85;
}
.gam-dob-wrap.is-empty .gam-dob-hint { display: block; }
/* ── Stab 103: signup form additions ──────────────────────────────── */
/* Two-column row used by the signup form's First/Last name pair.
On phone-width viewports the form is already narrow enough that
the two inputs read comfortably side-by-side; on very narrow
(<340px) screens the @media rule collapses to one column. */
.gam-form-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.gam-form-row-2 .gam-form-row { gap: 0; }
@media (max-width: 339px) {
.gam-form-row-2 { grid-template-columns: 1fr; gap: 4px; }
}
/* Checkbox row used by the Terms acceptance + Marketing consent
checkboxes added in Stab 102. The Terms checkbox's label embeds
tags pointing at /terms/ and /privacy/ — those links are
recoloured white + underline so they read against the cobalt
modal card background (the inherited link color was blue, which
was invisible against the same-hue background — Stab 103). */
.gam-form-check-row {
margin-top: 2px;
}
.gam-form-check {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.4;
color: var(--gam-cream);
cursor: pointer;
}
.gam-form-check input[type="checkbox"] {
flex: 0 0 auto;
margin-top: 3px;
width: 16px;
height: 16px;
accent-color: var(--gam-gold-lt);
cursor: pointer;
}
.gam-form-check-label { flex: 1 1 auto; }
.gam-form-check-label a {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 2px;
}
.gam-form-check-label a:hover { color: var(--gam-gold-glow); }