/* ============================================================ Downtown Christmas Expo — main stylesheet Brand: Holly Red #7A110E · Gilded Gold #EBB753 · Black · Winter White Type: Cinzel (Trajan Pro 3 substitute) + Montserrat ============================================================ */ :root{ --holly:#7A110E; /* Same colour as --holly, as a channel triple, so a wash can set its own alpha without hardcoding the hex a second time. Keep the two in step. */ --holly-rgb:122,17,14; /* Opacity of the Holly wash over a background texture. ONE number for every textured band, so they cannot drift apart. See the countdown block for what constrains it — it is a contrast floor, not a taste setting, and the binding element is the newsletter input's placeholder, not anything on the countdown. */ --texture-wash:.72; --holly-deep:#4d0b09; --holly-bright:#8f1712; --gold:#EBB753; --gold-soft:#f2cd84; --white:#FFFFFF; --black:#000000; --ink:#141414; --cream:#faf6f0; --cream-2:#f3ebe0; --line:rgba(0,0,0,.12); --maxw:1200px; /* Sticky header height: 56px logo + 2x16px padding + 1px border. Declared once so the anchor offset below can't drift from the real header. */ --header-h:89px; --serif:'Cinzel',Georgia,'Times New Roman',serif; --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } /* ---------- Reset / base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,.display{font-family:var(--serif);font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.15} /* Eyebrow colour is decided by ONE thing: whether the section behind it is light or dark. The --on-red modifier is that switch, so there are no per-section colour overrides — per-section is how the inconsistency arose in the first place. If a section changes background, change its modifier in the template, not the colour here. Plain .eyebrow = light field = --holly. Gold does not work as text on a light ground at any lightness: bright --gold is ~1.8:1, and darkening it far enough to pass contrast turns it to mustard and destroys the metallic quality. Holly Red is 9-11:1 on our light grounds, unmistakably on-brand, and matches the red labels the .visit__list detail rows already use. .eyebrow--on-red = dark field = --gold-soft, unchanged. */ .eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;font-weight:600;color:var(--holly);display:inline-block} .eyebrow--on-red{color:var(--gold-soft)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .wrap--narrow{max-width:760px} section{padding:96px 0} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--gold);color:var(--black);padding:10px 18px;font-size:.8rem} .skip-link:focus{left:8px;top:8px} /* ---------- Section heading alignment ---------- Structural, not viewport-based. A heading that SHARES its row with other content stays left; a heading ALONE on its row is centred with its eyebrow. Most alone-on-row sections already carry text-align:center on the section itself (.story, .shop, .stay, .parking, .vendors, .testimonials, .countdown, .hero, .page-hero). The two below are narrow-column sections whose body copy and accordion rows must stay left, so only the heading and eyebrow centre. */ .faqs h2,.faqs .eyebrow, .vendor-intro h2,.vendor-intro .eyebrow{text-align:center} .faqs .eyebrow,.vendor-intro .eyebrow{display:block} /* The side-by-side sections. Their grids all collapse to one column at 980px, which is the moment their heading stops sharing a row and becomes alone on it — so that, not an arbitrary phone width, is where they centre. Only the heading and eyebrow move: body copy, the Dates/Hours detail list and form labels stay left, where they are readable. .rates is deliberately absent. Its heading is an h3 inside .rates__card whose body, facts list and Book button are all left-aligned, so centring the heading alone would detach it from its own card — a settled decision. */ @media(max-width:980px){ .nfr h2,.nfr .eyebrow, .visit--page h2,.visit--page .eyebrow, .explore h2,.explore .eyebrow, .contact h2,.contact .eyebrow, .vendor-apply h2,.vendor-apply .eyebrow{text-align:center} .nfr .eyebrow,.visit--page .eyebrow,.explore .eyebrow, .contact .eyebrow,.vendor-apply .eyebrow{display:block} } /* ---------- Buttons ---------- */ .btn{display:inline-block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:600;padding:15px 30px;border:1.5px solid var(--gold);transition:.25s ease;cursor:pointer;background:transparent;line-height:1} .btn-gold{background:var(--gold);color:var(--black);border-color:var(--gold)} .btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft)} .btn-outline{color:var(--white);border-color:rgba(255,255,255,.6)} .btn-outline:hover{border-color:var(--gold);color:var(--gold-soft)} .btn-red{background:var(--holly);color:var(--white);border-color:var(--holly)} .btn-red:hover{background:var(--holly-deep);border-color:var(--holly-deep);color:var(--white)} .btn-ghost-dark{color:var(--ink);border-color:var(--ink)} .btn-ghost-dark:hover{background:var(--ink);color:var(--white)} /* ---------- Utility bar ---------- */ /* line-height:1 is the fix, not a padding nudge. Inheriting body's 1.7 gave each line a 19.58px box around an 11.52px font, and the browser positions the content area inside that box from the font's ascent/descent — Montserrat's are asymmetric, so the text landed 12px from the top of the bar and 13.6px from the bottom while the element box itself was a perfect 10/10. At line-height:1 the line box IS the font size, so symmetric padding centres it by construction, at any font size and any number of lines. */ .utility{background:var(--black);color:var(--white);font-size:.72rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;font-weight:500} .utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px} .utility a{color:var(--gold-soft)} .utility a:hover{color:var(--gold)} /* margin-left:auto, not space-between alone: the left slot is an ACF field and renders nothing when empty, and without this the right block would slide over to where the dates used to be. */ .utility__right{display:flex;gap:26px;align-items:center;margin-left:auto} /* Stacked, centred utility bar. Measured on dtcestg: the single row is clean down to 713px and the text starts wrapping mid-line at 712px. The breakpoint is set above that rather than at the old 640px, so the bar switches to the stacked layout BEFORE it can wrap — between 712px and 640px it used to sit in a broken half-wrapped state. The headroom also absorbs the left slot being an editable field whose copy can get longer. */ @media(max-width:780px){ /* Two lines now, so the padding comes down to keep the bar from doubling in height; it stays symmetric, which is what keeps both lines evenly placed. */ .utility .wrap{flex-direction:column;gap:8px;text-align:center;padding-top:12px;padding-bottom:12px} /* margin-left:auto is what pushes the right block away from the left one on a single row. Once the row becomes a column that same auto margin overrides align-items:center and shoves the line to the right edge, which is why the stacked bar was centred on one line and right-aligned on the other. */ .utility__right{margin-left:0;gap:16px;flex-wrap:wrap;justify-content:center} .utility__left{text-align:center} } /* ---------- Brand wordmark lockup ---------- */ .brandmark{display:inline-flex;flex-direction:column;align-items:center;line-height:1;text-align:center} .brandmark__img{max-height:56px;width:auto} .brandmark__l1{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:.36em;text-indent:.36em;color:var(--ink)} .brandmark__rule{display:block;width:100%;height:1px;background:currentColor;opacity:.25;margin:6px 0} .brandmark__l2{font-family:var(--serif);font-weight:500;font-size:.62rem;letter-spacing:.34em;text-indent:.34em;color:var(--holly)} .brandmark--light .brandmark__l1{color:var(--white)} .brandmark--light .brandmark__l2{color:var(--gold-soft)} /* ---------- Site header ---------- */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px} .site-nav{display:flex} .nav-menu{display:flex;gap:32px;align-items:center;list-style:none} .nav-menu li{display:flex;align-items:center} .nav-menu a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.15em;font-size:.74rem;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap} .nav-menu a:hover,.nav-menu .current-menu-item > a{border-color:var(--gold)} .nav-menu a.ext::after{content:"\2197";font-size:.72em;margin-left:4px;color:var(--holly)} /* The single nav CTA — a real button, vertically centered, never a stray link */ .nav-menu .menu-cta a,.nav-menu li.menu-cta > a{border:1.5px solid var(--holly);border-radius:0;padding:11px 22px;color:var(--white);background:var(--holly)} .nav-menu .menu-cta a:hover{background:var(--holly-deep);border-color:var(--holly-deep)} /* Hamburger */ .menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:8px} .menu-toggle__bar{display:block;height:2px;width:26px;background:var(--ink);transition:.25s ease} .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Hero ---------- */ .hero{position:relative;color:var(--white);text-align:center;padding:130px 0 120px;background:radial-gradient(120% 120% at 50% 30%,#7d3a2c 0%,#3a1a14 45%,#1a0f0c 100%);background-size:cover;background-position:center;overflow:hidden} .hero::before{content:"";z-index:2;position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.10'%3E%3Cg transform='translate(40 40)'%3E%3Cline x1='-14' y1='0' x2='14' y2='0'/%3E%3Cline x1='0' y1='-14' x2='0' y2='14'/%3E%3Cline x1='-10' y1='-10' x2='10' y2='10'/%3E%3Cline x1='-10' y1='10' x2='10' y2='-10'/%3E%3C/g%3E%3Cg transform='translate(120 120)'%3E%3Cline x1='-14' y1='0' x2='14' y2='0'/%3E%3Cline x1='0' y1='-14' x2='0' y2='14'/%3E%3Cline x1='-10' y1='-10' x2='10' y2='10'/%3E%3Cline x1='-10' y1='10' x2='10' y2='-10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:.6;mix-blend-mode:screen} .hero::after{content:"";z-index:2;position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.45) 100%)} .hero .wrap{position:relative;z-index:3} .hero__kicker{display:inline-block;margin-bottom:26px;letter-spacing:.34em;font-size:.72rem;font-weight:600;text-transform:uppercase;color:var(--gold-soft)} .hero__title{font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:.14em;font-weight:600;margin:0 auto;max-width:14ch} .hero__tagline{font-family:var(--sans);text-transform:uppercase;letter-spacing:.3em;font-size:clamp(.8rem,2vw,1.05rem);color:var(--gold-soft);margin-top:22px;font-weight:500} .hero__meta{margin-top:40px;display:flex;justify-content:center;flex-wrap:wrap;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;font-weight:500} .hero__meta span{padding:0 26px;position:relative} .hero__meta span + span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:14px;width:1px;background:rgba(255,255,255,.4)} .hero__cta{margin-top:44px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* Page hero (interior pages) */ .page-hero{position:relative;color:var(--white);text-align:center;padding:96px 0 80px;overflow:hidden} /* Editable colour wash. Sits above the base and any carousel, below the texture, vignette and text. Inline background + opacity come from the per-page overlay fields via dce_hero_overlay(). */ .hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none} /* Used by dce_page_hero(): neutral warm base so the tint does the colouring. .page-hero--red is kept for 404/index, which stay a static red band. */ .page-hero--overlay{background:radial-gradient(120% 130% at 50% 20%,#7d3a2c 0%,#3a1a14 45%,#1a0f0c 100%);background-size:cover;background-position:center} .page-hero--red{background:radial-gradient(120% 130% at 50% 20%, var(--holly-bright) 0%, var(--holly) 45%, var(--holly-deep) 100%)} .page-hero .hero__title{max-width:20ch} /* ---------- Announcement strip ---------- */ .strip{background:var(--gold);color:var(--black);text-align:center} .strip .wrap{padding:16px 28px} .strip p{text-transform:uppercase;letter-spacing:.2em;font-size:.76rem;font-weight:600;margin:0} /* ---------- Story ---------- */ .story{background:var(--white);text-align:center} .story__inner{max-width:760px;margin:0 auto} .story h2{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--ink);margin:14px 0 22px} .story__body p{font-size:1.02rem;color:#3a3a3a;margin-bottom:20px} .story__body p:last-child{margin-bottom:0} .divider{width:54px;height:2px;background:var(--gold);margin:34px auto 0} /* ---------- Details ---------- */ .details{background:var(--cream)} .details__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .details__card{background:var(--cream);padding:44px 32px;text-align:center} .details__ico{font-size:1.6rem;margin-bottom:14px;color:var(--holly)} .details__card h3{font-size:1rem;letter-spacing:.16em;color:var(--ink);margin-bottom:10px} .details__card p{font-size:.92rem;color:#4a4a4a;line-height:1.6} .details__card p strong{color:var(--holly);font-weight:600} /* ---------- Shop categories ---------- */ .shop{background:var(--white);text-align:center} .shop h2{font-size:clamp(1.9rem,4vw,2.8rem);color:var(--ink);margin:12px 0 12px} .shop__lead{max-width:620px;margin:0 auto 48px;color:#4a4a4a} .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* align-items:flex-end keeps the label pinned to the bottom of the tile; justify-content:center is what centres it horizontally. */ .cat{position:relative;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;color:var(--white);background:linear-gradient(160deg,var(--holly-bright),var(--holly-deep));border:1px solid rgba(0,0,0,.06)} .cat:nth-child(2){background:linear-gradient(160deg,#2a2a2a,var(--black))} .cat:nth-child(3){background:linear-gradient(160deg,#c99a3f,#a9782a)} .cat:nth-child(4){background:linear-gradient(160deg,#2a2a2a,var(--black))} .cat:nth-child(5){background:linear-gradient(160deg,var(--holly-bright),var(--holly-deep))} .cat:nth-child(6){background:linear-gradient(160deg,#c99a3f,#a9782a)} .cat .dce-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cat__label{padding:26px;position:relative;z-index:2;text-align:center} .cat__name{font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;font-size:1.15rem;font-weight:600} .cat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 60%)} .ph-note{position:absolute;top:14px;right:16px;z-index:2;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;font-weight:500} /* ---------- NFR feature ---------- */ .nfr{background:linear-gradient(135deg,var(--black),#1c1c1c);color:var(--white)} .nfr__row{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center} .nfr h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:14px 0 20px;color:var(--white)} .nfr p{color:#cfcfcf;margin-bottom:26px;max-width:46ch} .nfr__photo{aspect-ratio:5/4;background:linear-gradient(160deg,var(--holly-bright),var(--holly-deep));position:relative;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);overflow:hidden} .nfr__photo .dce-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .nfr__photo .ph-note{opacity:.6} .nfr__lasso{font-family:var(--serif);letter-spacing:.28em;opacity:.5;font-size:.9rem} /* ---------- Vendors CTA ---------- */ .vendors{text-align:center;color:var(--ink);background:var(--white);position:relative;overflow:hidden} .vendors::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%237A110E' stroke-width='1' stroke-opacity='0.10'%3E%3Cg transform='translate(40 40)'%3E%3Cline x1='-14' y1='0' x2='14' y2='0'/%3E%3Cline x1='0' y1='-14' x2='0' y2='14'/%3E%3Cline x1='-10' y1='-10' x2='10' y2='10'/%3E%3Cline x1='-10' y1='10' x2='10' y2='-10'/%3E%3C/g%3E%3Cg transform='translate(120 120)'%3E%3Cline x1='-14' y1='0' x2='14' y2='0'/%3E%3Cline x1='0' y1='-14' x2='0' y2='14'/%3E%3Cline x1='-10' y1='-10' x2='10' y2='10'/%3E%3Cline x1='-10' y1='10' x2='10' y2='-10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:.4} .vendors .wrap{position:relative;z-index:2} .vendors h2{font-size:clamp(2rem,4.5vw,3.2rem);margin:16px 0 18px} .vendors p{max-width:52ch;margin:0 auto 34px;color:#3a3a3a} /* Apply Now is a commitment action on a light field, so it is Holly Red like the nav CTA and the form submits — gold was the outlier here. Hover inverts to gold to match the form submits exactly. Scoped to .vendors so the nav CTA and Book Now keep their own holly-deep hover. */ .vendors .btn-red:hover{background:var(--gold);border-color:var(--gold);color:var(--black)} /* ---------- Plan your visit ---------- */ .visit{background:var(--cream-2)} .visit__row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .visit h2{font-size:clamp(1.8rem,4vw,2.7rem);color:var(--ink);margin:12px 0 18px} .visit p{color:#454545;margin-bottom:16px} .visit__list{list-style:none;margin:18px 0 30px} .visit__list li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;font-size:.9rem} .visit__list li span:first-child{text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:.74rem;color:var(--holly)} .visit__list li span:last-child{text-align:right;color:#333} .visit__actions{display:flex;gap:14px;flex-wrap:wrap} .map{aspect-ratio:1/1;border:1px solid var(--line);background:linear-gradient(rgba(122,17,14,.06),rgba(122,17,14,.06)),repeating-linear-gradient(0deg,#efe6d8 0 24px,#eae0d0 24px 25px),repeating-linear-gradient(90deg,#efe6d8 0 24px,#eae0d0 24px 25px);position:relative;display:flex;align-items:center;justify-content:center;text-align:center} .map__pin{background:var(--holly);color:#fff;padding:14px 20px;font-family:var(--serif);letter-spacing:.16em;font-size:.8rem;text-transform:uppercase;box-shadow:0 10px 26px rgba(0,0,0,.22)} .map__pin small{display:block;font-family:var(--sans);letter-spacing:.08em;font-size:.62rem;margin-top:6px;opacity:.9} .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---------- Vendor apply page ---------- */ .vendor-apply__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start} .vendor-apply h2{font-size:clamp(1.6rem,3.5vw,2.4rem);color:var(--ink);margin:12px 0 16px} .vendor-apply__intro{color:#454545;margin-bottom:28px} .info-card{background:var(--cream);border:1px solid var(--line);padding:30px;margin-bottom:22px} .info-card h3{font-size:1.05rem;letter-spacing:.14em;color:var(--ink);margin-bottom:16px} .info-card--gold{background:linear-gradient(160deg,var(--gold),#dca94b);border:none;color:var(--black)} .info-card--gold h3{color:var(--black)} .info-card--gold p{margin-bottom:20px;font-size:.92rem} .ticks{list-style:none} .ticks li{padding:7px 0 7px 26px;position:relative;font-size:.9rem;color:#3a3a3a} .ticks li::before{content:"\2713";position:absolute;left:0;color:var(--holly);font-weight:700} /* ---------- Generic page content ---------- */ .page-content{background:var(--white)} .page-content p{margin-bottom:18px} .page-content h2{color:var(--ink);margin:32px 0 14px;font-size:1.6rem} /* ---------- Gravity Forms fallback notice ---------- */ /* Brand form styling lives in the FORMS section at the end of this file. */ .form-fallback{border:1px dashed var(--line);padding:26px;background:var(--cream);color:#555;font-size:.9rem} .form-fallback code{background:#fff;padding:2px 6px;border:1px solid var(--line)} /* ========================================================================== HERO BACKGROUND CAROUSEL Sits inside .hero / .page-hero, behind the content and above the red gradient. Renders only when the page has slides; otherwise the hero is untouched. ========================================================================== */ /* The page hero never needed a stacking context before — it does now, or the carousel would paint over its own heading. .hero already had one. */ .page-hero .wrap{position:relative;z-index:3} .hero-carousel{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-carousel__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease} .hero-carousel__slide.is-active{opacity:1} /* Absolutely positioned and object-fit cover: the hero's height comes from its own padding, so a slow image can never shift the layout. */ .hero-carousel__img{width:100%;height:100%;object-fit:cover;display:block} .hero-carousel[data-transition="cut"] .hero-carousel__slide{transition:none} .hero-carousel[data-transition="kenburns"] .hero-carousel__slide.is-active .hero-carousel__img{animation:dce-kenburns var(--dce-hero-interval,3000ms) linear forwards} @keyframes dce-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}} /* Pause control — WCAG 2.2.2. Bottom corner, clear of the centred hero CTAs. */ /* One cluster, centred along the bottom of the hero at every width — no breakpoint repositioning. left:0/right:0 + justify-content:center centres it on the HERO box rather than on .wrap, so the 28px wrap padding (and any future change to it) cannot pull the cluster off centre. It clears the content above by construction rather than by luck: the hero reserves 120px of bottom padding (84px under 640px, 80px on .page-hero) and the cluster occupies only the lowest 64px of that, so the centred hero text and CTAs directly above it can never reach it however tall they grow. The bar spans the full width, so pointer-events are handed to the buttons only — otherwise the transparent gaps either side would sit above .wrap on z-index and quietly swallow clicks along that strip. DOM order is prev, pause, next, which is also the visual order, so tab order needs no CSS reordering to match. */ .hero-carousel__controls{position:absolute;left:0;right:0;bottom:20px;z-index:4;display:flex;align-items:center;justify-content:center;gap:16px;pointer-events:none} .hero-carousel__controls[hidden]{display:none} /* 44x44 is the floor, on every breakpoint — these are the smallest tap targets on the page and they sit near the bottom edge where thumbs already crowd. */ .hero-carousel__btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(235,183,83,.55);border-radius:50%;background:rgba(0,0,0,.62);color:var(--gold);cursor:pointer;transition:background .2s,color .2s,border-color .2s} .hero-carousel__btn:hover{background:var(--gold);border-color:var(--gold);color:var(--black)} /* 3px offset + 2px width means the ring sits 5px proud of the button on every side. The cluster's 16px gap is what keeps two adjacent rings 6px apart; do not drop that gap below 11px or neighbouring rings will touch. */ .hero-carousel__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .hero-carousel__btn[hidden]{display:none} .hero-carousel__ico{width:16px;height:16px;display:block} .hero-carousel__ico[hidden]{display:none} /* Nothing moves under reduced motion, so kill the fade and the zoom outright. The JS also stops cycling and hides the pause control. */ @media(prefers-reduced-motion:reduce){ .hero-carousel__slide{transition:none} .hero-carousel[data-transition="kenburns"] .hero-carousel__slide.is-active .hero-carousel__img{animation:none;transform:none} } /* ---------- Property-map modal ---------- */ .map-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px} .map-modal[hidden]{display:none} .map-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px)} .map-modal__panel{position:relative;display:flex;flex-direction:column;width:min(1000px,95vw);height:min(90vh,900px);background:var(--white);box-shadow:0 30px 80px rgba(0,0,0,.5)} .map-modal__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:var(--ink);color:var(--white)} .map-modal__title{font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;font-size:.82rem} .map-modal__actions{display:flex;align-items:center;gap:10px} .map-modal__actions .btn{padding:9px 18px;font-size:.68rem} .map-modal__close{background:none;border:0;color:var(--white);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 4px;transition:color .2s} .map-modal__close:hover{color:var(--gold-soft)} .map-modal__frame{flex:1;width:100%;border:0} @media(max-width:640px){ .map-modal{padding:0} .map-modal__panel{width:100vw;height:100vh} } /* ---------- Homepage countdown ---------- */ .countdown{position:relative;background-color:var(--holly);background-size:cover;background-position:center;text-align:center;padding:64px 0} /* * Optional background texture, added by dce_countdown() as an inline * background-image plus .countdown--textured. Holly Red stays the * background-COLOUR rather than a shorthand background, so the band is never * empty: correct before the image loads, and still correct if it 404s. * * The wash is what keeps the text readable, and it is deliberately here rather * than burnt into the image, so replacing the texture cannot remove it. * * --texture-wash is measured, not guessed, and it is shared with the newsletter * band so the two cannot drift. Sampling the strip of this texture that actually * survives the crop gives luminance mean 0.086, p99 0.189 and max 0.362. * * 0.72 is the LOWEST opacity at which every piece of small text still clears * 4.5:1 against the brightest pixel in the band. The binding element is not on * the countdown at all -- it is the newsletter input's placeholder, white at 68% * on 0.875rem text, which falls to 4.26:1 at 0.65 and only recovers at 0.71. * The countdown's own worst case, the .72rem gold-soft labels, would tolerate * 0.63. Lower the number and check the placeholder first, not the labels. * * Note the compositing is per-channel in sRGB, not a blend of luminances: dark * red over a mid grey stays red-dominant, which is why 0.80 holds up where a * luminance-space estimate says it should not. */ .countdown--textured::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(var(--holly-rgb),var(--texture-wash));pointer-events:none} /* Lift the content over the wash. Only needed on the textured variant, but harmless flat and cheaper than duplicating the rule. */ .countdown > .wrap{position:relative;z-index:2} .countdown__title{color:var(--white);letter-spacing:.14em;font-size:clamp(1.3rem,3.4vw,2rem);margin-bottom:34px} .countdown__grid{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(20px,6vw,70px)} .countdown__unit{display:flex;flex-direction:column;align-items:center;gap:10px} .countdown__num{font-family:var(--serif);font-weight:600;color:var(--gold);font-size:clamp(2.4rem,8vw,4.2rem);line-height:1;font-variant-numeric:tabular-nums} .countdown__label{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--gold-soft)} .countdown__live{margin-top:30px;color:var(--white);letter-spacing:.06em} .countdown__live a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px} .countdown__live a:hover{color:var(--gold)} /* ---------- Plan Your Visit: stay / rates / parking / explore ---------- */ .stay{background:var(--white);text-align:center} .stay .eyebrow{margin-bottom:12px} .stay h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:22px} .stay p{font-size:1.02rem;line-height:1.8;color:#3d3d3d} .rates{background:var(--cream-2)} .rates__row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .rates__photo{aspect-ratio:4/3;position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,var(--holly-bright),var(--holly-deep));display:flex;align-items:center;justify-content:center} .rates__photo .dce-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .rates__photo .ph-note{color:rgba(255,255,255,.75);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase} .rates__card .eyebrow{margin-bottom:12px} .rates__card h3{font-family:var(--serif);font-size:1.45rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:14px} .rates__card p{font-size:1rem;line-height:1.7;color:#3d3d3d;margin-bottom:22px} .rates__facts{list-style:none;margin:0 0 26px;padding:0} .rates__facts li{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:11px 0;font-size:.92rem} .rates__facts li span:first-child{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:600;color:var(--holly)} .parking{background:var(--white);text-align:center} .parking h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:38px} /* Holly Red, white copy. The eyebrow keeps plain .eyebrow (full Gilded Gold), which is ~6:1 on Holly Red — no --on-red variant needed here. */ .explore{background:var(--holly);color:var(--white)} .explore__row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .explore__copy .eyebrow{margin-bottom:12px} .explore__copy h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:20px} .explore__copy p{font-size:1rem;line-height:1.8;color:var(--white)} .explore__photo{aspect-ratio:4/3;position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,var(--ink),#3a3a3a);display:flex;align-items:center;justify-content:center} .explore__photo .dce-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .explore__photo .ph-note{color:rgba(255,255,255,.75);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase} @media(max-width:980px){ .rates__row,.explore__row{grid-template-columns:1fr;gap:34px} .explore__photo{order:-1} } /* ---------- Vendor intro + testimonials ---------- */ .vendor-intro{background:var(--cream)} .vendor-intro .eyebrow{margin-bottom:12px} .vendor-intro h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:26px} .vendor-intro__body p{margin-bottom:18px;font-size:1.02rem;line-height:1.8;color:#3d3d3d} .vendor-intro__body p:last-child{margin-bottom:0} .testimonials{background:radial-gradient(120% 130% at 50% 0%,var(--holly-bright) 0%,var(--holly) 45%,var(--holly-deep) 100%);color:var(--white);text-align:center} .testimonials h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:12px 0 40px} .tstm{max-width:820px;margin:0 auto} .tstm__track{position:relative;min-height:250px} .tstm__item{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .5s ease} .tstm__item.is-active{opacity:1;visibility:visible;position:relative} /* Montserrat for the quote body. The section heading stays Cinzel, and so does .tstm__photo--ph below — that is the initial-letter avatar, not copy. */ .tstm__quote{font-family:var(--sans);font-size:clamp(1.05rem,2.4vw,1.45rem);line-height:1.6;letter-spacing:.02em;margin:0 0 28px;quotes:"\201C" "\201D"} .tstm__quote::before{content:open-quote;color:var(--gold);margin-right:.1em} .tstm__quote::after{content:close-quote;color:var(--gold);margin-left:.1em} .tstm__by{display:flex;align-items:center;justify-content:center;gap:14px} .tstm__photo{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(235,183,83,.6)} .tstm__photo--ph{display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.15rem;color:var(--gold);background:rgba(0,0,0,.25)} .tstm__meta{text-align:left;line-height:1.4} .tstm__name{display:block;font-weight:600;letter-spacing:.08em;font-size:.9rem;text-transform:uppercase} .tstm__handle{display:block;font-size:.82rem;color:var(--gold-soft)} .tstm__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px} .tstm__arrow{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid rgba(235,183,83,.55);border-radius:50%;background:transparent;color:var(--gold);cursor:pointer;transition:.25s} .tstm__arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--black)} .tstm__arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .tstm__arrow svg{width:18px;height:18px;display:block} .tstm__dots{display:inline-flex;gap:9px} .tstm__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:.25s} .tstm__dot.is-active{background:var(--gold);transform:scale(1.25)} .tstm__dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px} @media(prefers-reduced-motion:reduce){ .tstm__item{transition:none} } /* ---------- Contact page ---------- */ .page-hero__body{max-width:62ch;margin:22px auto 0;color:rgba(255,255,255,.9);font-size:1.02rem;line-height:1.7} .contact{background:var(--white)} .contact__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:64px;align-items:start} .contact__form .eyebrow{margin-bottom:10px} .contact__form h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:28px} .contact__note{margin-top:18px;font-size:.86rem;color:#666;font-style:italic} .contact__aside .info-card{margin-bottom:22px} .contact__facts{list-style:none;margin:0;padding:0;font-size:.92rem;line-height:1.9;color:#4a4a4a} /* Exactly one rule in the card: between the address and the details. Rows inside each block are unruled — the old per-row border read as a table. */ .contact__facts--address{padding-bottom:14px;border-bottom:1px solid var(--line)} .contact__facts--address li:first-child{color:var(--ink);font-size:.98rem} .contact__facts--details{padding-top:14px;margin-bottom:22px} /* Gravity Forms wraps complex fields (Name) in a fieldset. Left alone it draws a box around First/Last; the legend keeps the normal label styling. */ .dce-form fieldset, .dce-form .ginput_complex fieldset{border:0;padding:0;margin:0;min-width:0} .dce-form legend{padding:0} .contact__social{padding:0 30px} .contact__social h3{font-family:var(--serif);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px} /* The icon set is styled for the dark footer; on white it needs its own colours. */ .contact__social .social-icon{border-color:rgba(122,17,14,.35);color:var(--holly)} .contact__social .social-icon:hover{background:var(--holly);border-color:var(--holly);color:var(--white)} @media(max-width:980px){ .contact__grid{grid-template-columns:1fr;gap:44px} } /* Any in-page anchor target clears the sticky header rather than landing underneath it. 24px of breathing room on top of the header height. */ [id]{scroll-margin-top:calc(var(--header-h) + 24px)} /* ---------- FAQs (details/summary accordion, no JS) ---------- */ .faqs{background:var(--cream)} .faqs .eyebrow{margin-bottom:12px} .faqs h2{font-size:clamp(1.5rem,3.2vw,2rem);margin-bottom:36px} .faq-list{border-top:1px solid var(--line)} .faq{border-bottom:1px solid var(--line)} .faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-family:var(--serif);text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;font-weight:600;line-height:1.4;color:var(--ink);transition:color .2s ease} /* Safari still paints its own disclosure triangle without this. */ .faq__q::-webkit-details-marker{display:none} .faq__q:hover{color:var(--holly)} .faq__q:focus-visible{outline:2px solid var(--holly);outline-offset:3px} .faq[open] .faq__q{color:var(--holly)} /* Red + that loses its vertical bar when the row opens, becoming a minus. */ .faq__icon{position:relative;flex:0 0 auto;width:16px;height:16px} .faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--holly);transition:transform .25s ease} .faq__icon::before{top:50%;left:0;width:16px;height:2px;transform:translateY(-50%)} .faq__icon::after{left:50%;top:0;width:2px;height:16px;transform:translateX(-50%)} .faq[open] .faq__icon::after{transform:translateX(-50%) scaleY(0)} .faq__a{padding:0 0 26px;max-width:62ch} .faq__a p{margin-bottom:14px} .faq__a p:last-child{margin-bottom:0} .faq__a a{color:var(--holly);text-decoration:underline;text-underline-offset:2px} .faq__a ul,.faq__a ol{margin:0 0 14px 20px} /* ---------- Footer social icons ---------- */ .social-icons{display:flex;gap:14px;margin-top:6px} .social-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1.5px solid rgba(235,183,83,.5);border-radius:50%;color:var(--gold-soft);transition:.25s} .social-icon:hover{background:var(--gold);border-color:var(--gold);color:var(--black)} .social-icon .dce-ico{width:19px;height:19px;display:block} /* ---------- Footer ---------- */ .site-footer{background:var(--black);color:#c9c9c9;padding:70px 0 34px} .site-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px} .site-footer__brand .brandmark{align-items:flex-start;text-align:left} .site-footer p{font-size:.86rem;margin-top:18px;max-width:34ch;color:#a9a9a9} .site-footer h4{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--gold);margin-bottom:18px;font-weight:600} .site-footer ul{list-style:none} .site-footer li{margin-bottom:11px;font-size:.86rem} .site-footer li a:hover{color:var(--gold-soft)} /* The ↗ on external items. The header's rule is scoped to .nav-menu, so footer menu items got the .ext class from nav_menu_link_attributes but no arrow. Gold rather than the header's Holly Red — red on the black footer is unreadable, and gold on dark is the brand rule. */ .site-footer a.ext::after{content:"\2197";font-size:.72em;margin-left:4px;color:var(--gold-soft)} .site-footer__bottom{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.72rem;letter-spacing:.06em;color:#8a8a8a} .site-footer .plaza{font-family:var(--serif);letter-spacing:.16em;color:#fff} .site-footer__bottom a.plaza:hover{color:var(--gold-soft)} /* ============================================================ Responsive — nav is handled here so it never breaks mid-width ============================================================ */ /* Tablet: collapse the desktop nav into the toggle earlier so links never crowd or wrap against the logo. */ @media(max-width:980px){ .menu-toggle{display:flex} .site-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(0,0,0,.08); max-height:0;overflow:hidden;transition:max-height .3s ease;display:block} .site-header{position:sticky} .site-header .wrap{position:relative} .site-nav.is-open{max-height:80vh} .nav-menu{flex-direction:column;gap:0;align-items:stretch;padding:8px 0} .nav-menu li{display:block} .nav-menu a{display:block;padding:16px 28px;border-bottom:1px solid var(--line);border-left:0} .nav-menu a:hover,.nav-menu .current-menu-item > a{border-bottom-color:var(--line);background:var(--cream)} /* CTA becomes a full-width block inside the drawer, not a floating pill */ .nav-menu .menu-cta{padding:16px 28px} .nav-menu .menu-cta a{display:block;text-align:center;padding:14px 22px} .nfr__row,.visit__row,.vendor-apply__grid{grid-template-columns:1fr;gap:40px} .details__grid{grid-template-columns:1fr} .cat-grid{grid-template-columns:1fr 1fr} .site-footer__cols{grid-template-columns:1fr 1fr} } @media(max-width:640px){ section{padding:64px 0} .hero{padding:90px 0 84px} .cat-grid{grid-template-columns:1fr} .site-footer__cols{grid-template-columns:1fr} .hero__meta span{padding:4px 14px} .hero__meta span + span::before{display:none} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important;transition:none!important} } /* Section headings are Cinzel in --ink, set by the global h1,h2,h3 rule and by each section's own block. There is deliberately no shared override here. If one is ever reintroduced, it MUST sit at this point in the file — after every section block. .rates__card h3 declares both colour and font-family at equal specificity, so a shared rule placed earlier silently loses to it and that one heading stays behind while the rest change. That cost a round trip once already. */ /* ========================================================================== FORMS — Gravity Forms (legacy ul/li markup) Scoped to .dce-form, which inc/gravityforms.php adds via the gform_form_tag filter. GF's own stylesheets are suppressed in that same file by filtering the rg_gforms_disable_css option, so everything below is the only styling the form gets — including the rules that hide GF's honeypot and hidden fields, which GF would otherwise have handled itself. Tokens are the :root ones defined at the top of this file. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Kill GF chrome we never want visible With GF's stylesheet suppressed, several things GF normally hides render on screen by default. These are not cosmetic: without them the honeypot and admin-hidden fields are visible to visitors. -------------------------------------------------------------------------- */ .dce-form .gform_validation_container, .dce-form .gform_hidden, .dce-form input[type="hidden"] { display: none !important; } /* Admin-only "Hidden" badge on visibility:hidden fields */ .dce-form .admin-hidden-markup { display: none; } /* Conditionally/admin-hidden fields must not render to visitors */ .dce-form .gfield_visibility_hidden { display: none; } /* Legacy clearfix divs — replaced by flex below */ .dce-form .gf_clear, .dce-form .gf_clear_complex { display: none; } /* Screen-reader-only sublabels (Address uses these) stay reachable but unseen */ .dce-form .screen-reader-text, .dce-form .hidden_sub_label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 2. Wrapper + field list -------------------------------------------------------------------------- */ .gform_wrapper.gform-theme--no-framework { margin: 0; } .dce-form { --dce-form-gap: 1.5rem; /* .42 on white is ~3.03:1, clearing WCAG 1.4.11 for non-text UI. Kept separate from --line (.12), which is decorative rule work, not a control boundary. */ --dce-field-border: rgba(0, 0, 0, 0.42); --dce-field-bg: var(--white); max-width: 46rem; margin: 0 auto; } .dce-form .gform_fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--dce-form-gap); } .dce-form .gfield { margin: 0; padding: 0; list-style: none; } /* -------------------------------------------------------------------------- 3. Labels -------------------------------------------------------------------------- */ .dce-form .gfield_label { display: block; margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); } .dce-form .gfield_required { margin-left: 0.25rem; } .dce-form .gfield_required_asterisk { color: var(--holly); text-decoration: none; } /* Sub-labels under complex field parts (First / Last) */ .dce-form .gform-field-label--type-sub { display: block; margin: 0.375rem 0 0; font-family: var(--sans); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: rgba(0, 0, 0, 0.6); } /* Inline labels next to radios */ .dce-form .gform-field-label--type-inline { display: inline; margin: 0; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; } /* Help text (e.g. "(if applicable)") */ .dce-form .gfield_description { margin: 0.4375rem 0 0; padding: 0; font-family: var(--sans); font-size: 0.8125rem; font-style: italic; color: rgba(0, 0, 0, 0.6); } /* -------------------------------------------------------------------------- 4. Inputs -------------------------------------------------------------------------- */ .dce-form input[type="text"], .dce-form input[type="email"], .dce-form input[type="tel"], .dce-form input[type="url"], .dce-form input[type="number"], .dce-form textarea, .dce-form select { box-sizing: border-box; width: 100%; padding: 0.8125rem 0.9375rem; font-family: var(--sans); font-size: 1rem; line-height: 1.4; color: var(--black); background-color: var(--dce-field-bg); border: 1px solid var(--dce-field-border); border-radius: 2px; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } /* GF width classes are meaningless here — everything fills its column */ .dce-form .small, .dce-form .medium, .dce-form .large { width: 100%; } /* .55 on white is ~4.67:1, clearing 4.5:1 for body text. This is not a nicety: the Address sub-labels are screen-reader-only, so these placeholders are the only visible labels for Street, City, State and ZIP. */ .dce-form ::placeholder { color: rgba(0, 0, 0, 0.55); opacity: 1; } .dce-form input:focus, .dce-form textarea:focus, .dce-form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(235, 183, 83, 0.35); } .dce-form textarea { min-height: 8rem; resize: vertical; } /* Select needs its own arrow since appearance is stripped */ .dce-form select { padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237A110E' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9375rem center; background-size: 12px 8px; } /* -------------------------------------------------------------------------- 5. Complex fields (Name, Address) — legacy grid rows -------------------------------------------------------------------------- */ .dce-form .ginput_complex.gform-grid-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; } .dce-form .ginput_complex .gform-grid-col { box-sizing: border-box; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; } /* Full-width parts (Street Address, Address Line 2) break the row */ .dce-form .ginput_complex .ginput_full { flex: 1 1 100%; } /* City / State / ZIP: two-up */ .dce-form .ginput_complex .ginput_left, .dce-form .ginput_complex .ginput_right { flex: 1 1 calc(50% - 0.5rem); } /* Name: First / Last even split */ .dce-form .ginput_container_name .gform-grid-col { flex: 1 1 calc(50% - 0.5rem); } /* -------------------------------------------------------------------------- 6. Radios (Preferred Booth Size) -------------------------------------------------------------------------- */ .dce-form .gfield_radio, .dce-form .gfield_checkbox { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; } .dce-form .gchoice { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .dce-form .gchoice input[type="radio"], .dce-form .gchoice input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin: 0; flex: 0 0 auto; accent-color: var(--holly); -webkit-appearance: auto; appearance: auto; cursor: pointer; } .dce-form .gchoice label { cursor: pointer; } /* -------------------------------------------------------------------------- 7. reCAPTCHA -------------------------------------------------------------------------- */ /* * The v2 checkbox widget is a Google iframe locked to 304px. Two consequences, * and the scale rule below only addresses the second: * * 1. LAYOUT. transform: scale() changes what is painted, not the box the layout * reserves — the inner div still measures 304px afterwards. .vendor-apply__form * is a grid item, and grid items default to min-width:auto (= min-content), so * that 304px propagated up the whole chain and pushed the page 12px wider than * a 320px viewport. Measured, not theorised: deleting the captcha field from * the DOM took scrollWidth from 332 back to 305. min-width:0 lets the track * shrink again, and the clip is the backstop for anything narrower still. * 2. PAINT. Below 360px the widget is wider than the column, so it is scaled. * * 22.5rem = 360px is not arbitrary: the widget needs 304px plus the .wrap's * 28px of padding either side, so 360px is exactly where it stops fitting. The * old 22rem (352px) left 353-359px scaling nothing while already too narrow. */ .dce-form .ginput_recaptcha { margin-top: 0.25rem; max-width: 100%; overflow: hidden; } .vendor-apply__form { min-width: 0; } @media (max-width: 22.5rem) { /* * 0.8, not 0.85. At 320px the column is 264px with overlay scrollbars but only * 249px with a classic 15px one, and 304 x 0.85 = 258.4 overflows the latter — * the clip hides it rather than letting it break the page, but it still eats * the widget's right edge. 304 x 0.8 = 243.2 clears both. */ .dce-form .ginput_recaptcha > div { transform: scale(0.8); transform-origin: 0 0; } /* Reclaim the dead space the scale leaves below: 78 x 0.8 = 62.4. */ .dce-form .ginput_recaptcha { height: 63px; } } /* -------------------------------------------------------------------------- 8. Submit -------------------------------------------------------------------------- */ .dce-form .gform_footer { margin: 2.25rem 0 0; padding: 0; } .dce-form .gform_button { display: inline-block; width: auto; padding: 1rem 2.75rem; /* Montserrat, like every other button on the site. The serif here was the odd one out — .btn has always been var(--sans). */ font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; /* Holly Red, matching the nav CTA. Red is reserved site-wide for commitment actions (nav CTA + form submit); gold stays for navigation and for anything sitting on the red hero. */ color: var(--white); background-color: var(--holly); border: 1px solid var(--holly); border-radius: 2px; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; -webkit-appearance: none; appearance: none; } .dce-form .gform_button:hover, .dce-form .gform_button:focus { color: var(--black); background-color: var(--gold); border-color: var(--gold); } /* Gold on the white page is only ~1.8:1, too weak for a focus ring. Holly reads clearly, and the 3px offset keeps it clear of the now-red button. */ .dce-form .gform_button:focus-visible { outline: 2px solid var(--holly); outline-offset: 3px; } .dce-form .gform_ajax_spinner { margin-left: 0.75rem; vertical-align: middle; } /* -------------------------------------------------------------------------- 9. Validation + confirmation Written against markup captured from a real failed validation of form 1 on dtcestg (rendered server-side via GFFormDisplay::process_form(), so no entry was created). Confirmed there: the error summary renders inside .gform_wrapper but BEFORE the
, so it cannot be scoped under .dce-form. -------------------------------------------------------------------------- */ .gform_wrapper .gform_validation_errors { margin: 0 0 1.75rem; padding: 1rem 1.125rem; background-color: rgba(122, 17, 14, 0.06); border: 1px solid var(--holly); border-left-width: 4px; border-radius: 2px; } /* GF ships an icon-font glyph in the summary heading. That font is part of the stylesheet we suppress, so it would render as a blank or tofu box. */ .gform_wrapper .gform_validation_errors .gform-icon { display: none; } /* The summary lists each failing field as a jump link. Unstyled it inherits the theme's a{color:inherit;text-decoration:none} and stops looking clickable. */ .gform_wrapper .gform_validation_errors ol { margin: 0.75rem 0 0; padding: 0 0 0 1.25rem; font-family: var(--sans); font-size: 0.875rem; line-height: 1.6; } .gform_wrapper .gform_validation_errors ol li { margin: 0 0 0.25rem; } .gform_wrapper .gform_validation_error_link { color: var(--holly); text-decoration: underline; text-underline-offset: 2px; } .gform_wrapper .gform_validation_error_link:hover, .gform_wrapper .gform_validation_error_link:focus { color: var(--holly-deep); } .gform_wrapper .gform_validation_errors > h2, .gform_wrapper .gform_submission_error { margin: 0; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--holly); } .dce-form .gfield_error .gfield_label { color: var(--holly); } .dce-form .gfield_error input[type="text"], .dce-form .gfield_error input[type="email"], .dce-form .gfield_error input[type="tel"], .dce-form .gfield_error textarea, .dce-form .gfield_error select { border-color: var(--holly); background-color: rgba(122, 17, 14, 0.03); } .dce-form .gfield_error input:focus, .dce-form .gfield_error select:focus, .dce-form .gfield_error textarea:focus { box-shadow: 0 0 0 3px rgba(122, 17, 14, 0.2); } /* GF gives the message div three classes at once — 'gfield_description validation_message gfield_validation_message' — so the help-text rule in section 3 also matches it. font-style must be reset here or error messages inherit that rule's italic. */ .dce-form .validation_message, .dce-form .gfield_validation_message { margin: 0.4375rem 0 0; padding: 0; font-family: var(--sans); font-size: 0.8125rem; font-style: normal; font-weight: 600; color: var(--holly); background: none; border: 0; } .gform_confirmation_message, .gform_wrapper .gform_confirmation_message { padding: 1.5rem 1.75rem; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--white); background-color: var(--holly); border-left: 4px solid var(--gold); border-radius: 2px; } /* -------------------------------------------------------------------------- 10. Responsive -------------------------------------------------------------------------- */ @media (max-width: 40rem) { .dce-form { --dce-form-gap: 1.25rem; } /* Stack every complex column — City/State/ZIP side-by-side is too tight */ .dce-form .ginput_complex .gform-grid-col, .dce-form .ginput_complex .ginput_left, .dce-form .ginput_complex .ginput_right, .dce-form .ginput_container_name .gform-grid-col { flex: 1 1 100%; } .dce-form .gfield_radio { flex-direction: column; gap: 0.75rem; } .dce-form .gform_button { width: 100%; padding-inline: 1.5rem; } } /* -------------------------------------------------------------------------- 11. Footer newsletter opt-in Every selector below is scoped under .footer-newsletter, which only inc/template-helpers.php's dce_newsletter_signup() emits. The vendor and contact forms share the .dce-form class but never that ancestor, so nothing here can reach them. -------------------------------------------------------------------------- */ .footer-newsletter { /* The hairline that separates this from the Connect icons above. */ margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(235, 183, 83, 0.32); } /* Matches the EXPLORE / CONNECT headings — it is the same .site-footer h4 rule, restated only to close the gap that rule's margin-bottom leaves above copy. */ .footer-newsletter__title { margin-bottom: 10px; } .footer-newsletter__copy { /* .site-footer p carries margin-top:18px, which is spacing for the brand blurb and too much here. */ margin-top: 0; margin-bottom: 16px; font-size: 0.8rem; line-height: 1.6; color: #a9a9a9; max-width: 32ch; } /* The form is a column block, not the centred 46rem sheet the page forms use. */ .footer-newsletter .dce-form { max-width: none; margin: 0; } .footer-newsletter .gform_wrapper { margin: 0; } /* A real