/* =====================================================================
House style-guide compliance layer for the Eve Chuang static replica.
Goal: satisfy the preview design guide (single h1 + clean heading order,
18px/1.7 body, WCAG 2.2 AA, no orphan lines) WITHOUT changing how the
original site looks. Loaded after custom.css so it wins.
===================================================================== */
/* --- §2 Body type: 18px / 1.7 on main content copy ---------------------
Targets body paragraphs only. Text with an explicit inline size
(14px footer, 18px tagline, 60px hero) keeps that size via the inline span. */
.ed-text p { font-size: 1.125rem; line-height: 1.7; }
/* --- §3 Heading hierarchy: preserve the exact look of re-tagged headings ---
Elements were re-tagged to enforce one and no skipped levels; these
rules reproduce their original computed typography pixel-for-pixel. */
/* Home hero brand — was a
; now the styled
. Give it the site's
display serif (Playfair Display, as used by every other heading) for a
consistent, polished identity, and snap it onto the h1 scale step (56px).
A soft light halo keeps it legible over the bright hero video. */
h1.sg-hero {
margin: 0; padding: 0; line-height: 1.08; letter-spacing: 0.5px;
font-family: "Playfair Display", Georgia, serif;
}
/* "Eve" and "Chuang" sit in adjacent inline boxes and the word-space between
them collapses to zero, so the name reads as one word. Restore the gap with
an explicit margin on the "Chuang" wrapper. */
h1.sg-hero > span > span { margin-left: 0.2em; }
/* The size lives on an inline 60px span, so this one override needs !important
to move it onto the scale. */
h1.sg-hero span { font-size: 3.5rem !important; }
h1.sg-hero strong { font-weight: 700; }
/* Home descriptor — was an ; now a
(keeps the heading order gapless).
A refined, tracked-out label rather than a heavy bold line. */
/* Controlled weight hierarchy (not binary bold): the subtitle is a deliberate
semibold (600), heavier than the 400 credentials line below it but lighter
than the Playfair title above — so importance reads through weight. */
.sg-subtitle {
margin: 8px 0 0; font-size: 1rem; line-height: 1.6; font-weight: 600;
text-transform: uppercase; letter-spacing: 2px;
}
/* Darker than the shipped inline grey for legible contrast on the panel
(needs !important to beat the inline colour on the span). */
.sg-subtitle strong { font-weight: 600; color: #1a1a1a !important; }
/* Hero panel: a touch more opaque so all the hero text reads on it cleanly,
without any text-shadow/glow (overrides the inline 0.5 alpha). */
#ed-562713860 { background-color: rgba(245, 245, 245, 0.74) !important; }
/* Hero credentials line ("13 Years… | Property Management | …"): lighter than
the shipped bold so it sits below the name and subtitle in the hierarchy. */
#ed-562713872 strong { font-weight: 400; }
/* Sub-page main title — was the first
; on the h2 scale step (36px). */
h1.sg-title {
margin: 0; font-family: "Playfair Display", serif;
font-size: 2.25rem; line-height: 1.2; font-weight: 400; color: rgb(16, 48, 69);
}
/* Contact page title — was ; on the 20px scale step. */
h1.sg-h4 {
margin: 0; font-family: "Montserrat", sans-serif;
font-size: 1.25rem; line-height: 1.3; font-weight: 500; color: rgb(16, 48, 69);
}
/* --- §5 WCAG AA legibility for white text over the video/photo hero -----
The nav links and hero info-bar (phone/email) are white over full-motion
video, so a flat colour ratio can't be guaranteed against bright frames.
A soft shadow scrim keeps them legible without a visible dark bar. */
.preset-menu-v2-financia .ed-menu a,
.preset-info-bar-v3-financia .ed-text,
.preset-info-bar-v3-financia .ed-text a,
.mobile-cont .ed-icon svg { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
/* keep the active "Home" pill (dark text on solid) shadow-free */
.preset-menu-v2-financia .ed-menu a.active { text-shadow: none; }
/* Language toggle: EN / 中文 shipped as two look-alike words with no sign of
which is active or that they're clickable. Present them as a real segmented
toggle — a bordered control with the active language filled in the brand
colour and a hover state on the other. */
.ed-language {
display: inline-flex; align-items: stretch; vertical-align: middle;
border: 1px solid rgba(255, 255, 255, 0.7);
}
.ed-language .language {
padding: 11px 16px; font-size: 14px; letter-spacing: 1px; line-height: 1.6;
color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
transition: background-color 0.15s ease;
}
.ed-language .language + .language { border-left: 1px solid rgba(255, 255, 255, 0.5); }
.ed-language .language.active { background-color: #462c5d; font-weight: 500; text-shadow: none; }
.ed-language .language:not(.active):hover,
.ed-language .language:not(.active):focus-visible { background-color: rgba(255, 255, 255, 0.22); }
/* Scrim: a full-width dark gradient behind the top nav so the white links clear
AA (>=4.5:1) against even a pure-white video frame. Fades out below the bar. */
.preset-menu-v2-financia { position: relative; }
.preset-menu-v2-financia::before {
content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 100vw; height: 150px; pointer-events: none; z-index: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.34) 50%, rgba(0,0,0,0) 100%);
}
.preset-menu-v2-financia > .inner { position: relative; z-index: 1; }
/* Matching scrim behind the hero info-bar (phone / email) at the base of the video. */
.preset-info-bar-v3-financia { position: relative; }
.preset-info-bar-v3-financia::before {
content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: 100vw; top: -12px; pointer-events: none; z-index: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.34) 55%, rgba(0,0,0,0) 100%);
}
.preset-info-bar-v3-financia > .inner { position: relative; z-index: 1; }
/* "Search by Community": present each card's label as a real button — a
consistent bordered pill on a dark scrim that fills with the brand colour
and lifts on hover/focus — instead of a plain hover underline. White text
keeps AA over the (mostly dark) cityscape photos and the scrim. */
.preset-columns-financia .columns-box .ed-text {
position: relative; /* anchor for the full-button tap area below */
background-color: rgba(0, 0, 0, 0.5); /* hard (square) edges, as before */
padding: 14px 32px !important; /* unify (shipped per-ID at 20/30px) */
transition: background-color 0.2s ease, transform 0.2s ease;
}
.preset-columns-financia .columns-box .ed-text a { text-decoration: none; letter-spacing: 0.5px; }
/* Stretch the link over the whole button (incl. its padding) so the entire
button is the tap target, not just the text. */
.preset-columns-financia .columns-box .ed-text a::after {
content: ""; position: absolute; inset: 0;
}
.preset-columns-financia .columns-box .ed-text a,
.preset-columns-financia .columns-box .ed-text a strong,
.preset-columns-financia .columns-box .ed-text span,
.preset-columns-financia .columns-box .ed-text strong {
color: #fff !important; /* overrides the inline dark span colour */
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.5);
}
.preset-columns-financia .columns-box:hover .ed-text,
.preset-columns-financia .columns-box .ed-text:focus-within {
background-color: rgba(70, 44, 93, 0.92); transform: translateY(-3px);
}
/* Footer: one info section (RE/MAX logo + office contact + QR) centred in a row,
and the copyright line centred (its empty social column is removed). */
.sg-foot-info > .inner { display: flex; flex-wrap: wrap; justify-content: center;
align-items: center; gap: 16px 40px; padding: 30px 0; }
.sg-foot-info .ed-image { flex-basis: auto !important; text-align: center !important; margin: 0 !important; }
.sg-foot-info .ed-image img { padding: 0 !important; }
.sg-foot-info .ed-text { flex-basis: auto !important; }
.sg-foot-copy > .inner { justify-content: center !important; }
.sg-foot-copy .ed-text, .sg-foot-copy .ed-text p { text-align: center !important; }
/* Contact section: after the address block moved to the footer, stack the
heading over a centred, width-constrained form instead of leaving the
heading alone in a half-empty column. */
.footer-hel-content > .inner { display: block !important; text-align: center; }
.footer-hel-content .footer-hel-box,
.footer-hel-content .footer-hel-box-form { display: block !important; width: 100%; max-width: 640px; margin: 0 auto !important; }
.footer-hel-content .footer-hel-box { text-align: center; }
.footer-hel-content .footer-hel-box h1,
.footer-hel-content .footer-hel-box h2 { text-align: center !important; }
.footer-hel-content .ed-form-button { text-align: center; margin-top: 6px; }
/* --- Consistent form styling -----------------------------------------
The "Get in touch" footer form and the Contact-page form share the same
markup but shipped with different field borders/radii and button colours.
Unify both here (targeting the shared .footer-hel-box-form) so every form
field and submit button looks identical, on the dark footer and the light
contact section alike.
The builder ships per-preset rules (.ed-element.preset-footer-hel-financia
form … , specificity 0,3,2) that only wrap the FOOTER form, so the two forms
diverged. We match those selectors too and use !important so both forms —
footer and contact page — render identically. */
.footer-hel-box-form .ed-form-input input,
.footer-hel-box-form .ed-form-email input,
.footer-hel-box-form .ed-form-phone input,
.footer-hel-box-form .ed-form-number input,
.footer-hel-box-form .ed-form-textarea textarea,
.ed-element.preset-footer-hel-financia form input[type="text"],
.ed-element.preset-footer-hel-financia form input[type="email"],
.ed-element.preset-footer-hel-financia form input[type="phone"],
.ed-element.preset-footer-hel-financia form input[type="number"],
.ed-element.preset-footer-hel-financia form textarea {
width: 100%; box-sizing: border-box;
font-size: 16px !important; line-height: 1.5; color: #333 !important;
background-color: #fff !important;
border: 1px solid #cccccc !important; border-radius: 0 !important;
padding: 12px 14px !important; box-shadow: none !important;
}
.footer-hel-box-form .ed-form-textarea textarea,
.ed-element.preset-footer-hel-financia form textarea {
min-height: 120px !important; resize: vertical;
}
.footer-hel-box-form input::placeholder,
.footer-hel-box-form textarea::placeholder { color: #6b6b6b; opacity: 1; }
/* Visible keyboard focus (WCAG 2.4.7) in the brand colour. */
.footer-hel-box-form .ed-form-input input:focus,
.footer-hel-box-form .ed-form-email input:focus,
.footer-hel-box-form .ed-form-phone input:focus,
.footer-hel-box-form .ed-form-number input:focus,
.footer-hel-box-form .ed-form-textarea textarea:focus,
.ed-element.preset-footer-hel-financia form input:focus,
.ed-element.preset-footer-hel-financia form textarea:focus {
outline: none; border-color: #462c5d !important;
box-shadow: 0 0 0 3px rgba(70, 44, 93, 0.22) !important;
}
/* One solid brand-purple submit button everywhere (white text = ~9:1 on
#462c5d, AA on both the dark and light sections). */
.footer-hel-box-form .ed-form-button { text-align: center; margin-top: 6px; }
.footer-hel-box-form .ed-form-button button,
.ed-element.preset-footer-hel-financia form button[type="submit"] {
width: auto !important; min-width: 200px !important; height: 46px !important;
background-color: #462c5d !important; color: #fff !important;
border: 1px solid #462c5d !important; border-radius: 0 !important;
font-size: 16px !important; font-weight: 600; letter-spacing: 0.2px;
padding: 10px 34px !important; cursor: pointer; transition: background-color 0.15s ease;
}
.footer-hel-box-form .ed-form-button button:hover,
.footer-hel-box-form .ed-form-button button:focus-visible,
.ed-element.preset-footer-hel-financia form button[type="submit"]:hover,
.ed-element.preset-footer-hel-financia form button[type="submit"]:focus-visible {
background-color: #35204a !important; border-color: #35204a !important;
}
/* --- §6 Orphan / widow control ---------------------------------------- */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
.ed-text p, .ed-headline p { text-wrap: pretty; }