/* ============================================================================
TEMPORARY OPEN HOUSE STYLES — REMOVE AFTER SEPTEMBER 26
Main Street Court — homepage hero Open House announcement.
Linked ONLY from index.html. Every selector is scoped to .home-open-house,
so nothing in this file can reach any other element or any other page.
Colour tokens (--navy, --teal, --gold, --ink, --ease) come from style.css.
To remove after the event:
1. delete the to open-house.css in index.html
2. delete the block between the TEMPORARY OPEN HOUSE ANNOUNCEMENT comments
3. delete the Caveat Brush segment from the fonts in index.html
4. delete this file
Nothing else needs to be touched.
============================================================================ */
.home-open-house{
--hoh-coral:#FA5A46; /* approved Sept 21 by Lisa — option B */
position:relative;
font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
background:none; /* no card, box, panel or container */
border:0;
box-shadow:none;
border-radius:0;
text-align:center;
width:100%;
/* optical nudge right so the block centres over the photograph */
padding:0 clamp(2px,.4vw,8px) 0 clamp(6px,1.1vw,18px);
margin:0 0 clamp(24px,2.4vw,34px);
}
/* headline group — decorative marks anchor to the type, not to the column */
.home-open-house .home-open-house__head{
position:relative;
display:inline-block;
max-width:100%;
}
/* two small turquoise accent marks, upper left */
.home-open-house .home-open-house__ticks{
position:absolute;
left:clamp(-34px,-2.3vw,-22px);
top:2px;
width:22px;
height:28px;
pointer-events:none;
}
.home-open-house .home-open-house__ticks::before,
.home-open-house .home-open-house__ticks::after{
content:"";
position:absolute;
width:4px;
border-radius:999px;
background:var(--teal);
}
.home-open-house .home-open-house__ticks::before{height:17px;left:0;top:9px;transform:rotate(21deg)}
.home-open-house .home-open-house__ticks::after{height:11px;left:11px;top:0;transform:rotate(21deg)}
/* one handwritten phrase */
.home-open-house .home-open-house__hand{
font-family:'Caveat Brush',cursive;
font-weight:400;
color:var(--hoh-coral);
font-size:clamp(2.15rem,2.55vw,2.45rem); /* ~34px -> ~39px */
line-height:1;
margin:0 0 clamp(2px,.4vw,6px);
transform:rotate(-2.5deg);
}
.home-open-house .home-open-house__title{
font-family:inherit;
font-weight:800;
color:var(--navy);
font-size:clamp(2.6rem,3.85vw,3.6rem); /* ~42px -> ~58px */
line-height:1.02;
letter-spacing:-.018em;
text-transform:uppercase;
white-space:nowrap;
margin:0;
}
/* one restrained coral brushstroke under the headline */
.home-open-house .home-open-house__swoosh{
display:block;
margin:clamp(4px,.55vw,8px) auto clamp(18px,2vw,28px);
width:clamp(250px,98%,470px);
height:clamp(13px,1.6vw,21px);
fill:var(--hoh-coral);
transform:scaleX(0);
transform-origin:left center;
transition:transform .75s .2s var(--ease);
}
.home-open-house.in .home-open-house__swoosh{transform:scaleX(1)}
.home-open-house .home-open-house__date{
font-family:inherit;
font-weight:700;
color:var(--navy);
font-size:clamp(1.38rem,1.62vw,1.6rem); /* ~22px -> ~26px */
line-height:1.25;
margin:0 0 clamp(9px,1.05vw,15px);
}
/* gold time circle */
.home-open-house .home-open-house__time{
margin:0 0 clamp(20px,2.3vw,32px);
line-height:1;
}
.home-open-house .home-open-house__circle{
display:inline-flex;
align-items:center;
justify-content:center;
font-family:inherit;
font-weight:800;
color:var(--navy);
font-size:clamp(1.66rem,1.92vw,1.86rem); /* ~27px -> ~30px */
letter-spacing:-.012em;
background:var(--gold);
border-radius:999px;
padding:clamp(12px,1.25vw,17px) clamp(22px,2.1vw,30px);
min-width:clamp(150px,11vw,182px);
box-shadow:0 8px 20px -12px rgba(255,201,60,.95);
transform:scale(.82);
opacity:0;
transition:transform .6s .38s var(--ease),opacity .5s .38s var(--ease);
}
.home-open-house.in .home-open-house__circle{transform:scale(1);opacity:1}
.home-open-house .home-open-house__rsvp{
font-family:inherit;
font-weight:600;
color:var(--ink);
font-size:clamp(1.08rem,1.26vw,1.22rem); /* ~17px -> ~20px */
line-height:1.25;
letter-spacing:.13em;
text-transform:uppercase;
margin:0 0 clamp(3px,.4vw,7px);
}
.home-open-house .home-open-house__tel{
position:relative;
display:inline-block;
font-family:inherit;
font-weight:800;
font-size:clamp(1.56rem,1.78vw,1.72rem); /* ~25px -> ~28px */
line-height:1.2;
letter-spacing:-.008em;
margin:0;
}
.home-open-house .home-open-house__tel a{
color:var(--navy);
white-space:nowrap; /* number never breaks */
text-decoration:none;
transition:color .25s;
}
.home-open-house .home-open-house__tel a:hover{color:var(--teal-txt)}
.home-open-house .home-open-house__tel a:focus-visible{
outline:3px solid var(--teal);
outline-offset:4px;
border-radius:4px;
}
/* small turquoise arrow pointing at the phone number */
.home-open-house .home-open-house__arrow{
position:absolute;
left:clamp(-62px,-4vw,-46px);
top:50%;
width:clamp(34px,2.6vw,42px);
height:auto;
transform:translateY(-58%);
fill:none;
stroke:var(--teal);
stroke-width:3.4;
stroke-linecap:round;
stroke-linejoin:round;
pointer-events:none;
opacity:0;
transition:opacity .5s .55s var(--ease);
}
.home-open-house.in .home-open-house__arrow{opacity:1}
@media (prefers-reduced-motion:reduce){
.home-open-house .home-open-house__swoosh{transform:none;transition:none}
.home-open-house .home-open-house__circle{transform:none;opacity:1;transition:none}
.home-open-house .home-open-house__arrow{opacity:1;transition:none}
}
/* ---------------- tablet ---------------- */
@media (max-width:1080px){
.home-open-house{padding-left:clamp(4px,.8vw,12px)}
.home-open-house .home-open-house__swoosh{width:min(98%,400px)}
.home-open-house .home-open-house__arrow{left:clamp(-54px,-3.6vw,-42px)}
}
/* ---------------- mobile ----------------
Decorative marks simplify or reposition. No font size is overridden,
so every line stays readable without zooming. */
@media (max-width:860px){
.home-open-house{padding:0;margin-bottom:20px}
.home-open-house .home-open-house__ticks{left:-20px;top:0}
.home-open-house .home-open-house__swoosh{width:min(94%,330px);margin-bottom:20px}
.home-open-house .home-open-house__time{margin-bottom:22px}
.home-open-house .home-open-house__arrow{display:none}
}