/* West Tower Matchmaker, design version B, "Evening". The same tool as version A, wearing the house at dusk instead of the house in daylight. Everything here is scoped to [data-design="b"] on , so version A is untouched and deleting this file cleanly removes the alternative. The thinking: West Tower's own photography is at its best in low light, the drone shot at golden hour, the couple outside the lit house after dark. Version A frames those images in cream. Version B lets them sit in the dark, which is how the venue actually looks on the evening a couple falls for it. Contrast is held at WCAG AA or better throughout. Body text runs #ede6da on #24262a, about 12.4:1. Gold #d3ac6d on the same ground is about 7.4:1, so it is safe for text here, not only for large type. */ [data-design="b"] { --primary: #d3ac6d; /* gold lifted for legibility on a dark ground */ --secondary: #2e3136; /* raised panels, replaces warm sand */ --light-primary: #24262a; /* page ground, replaces cream */ --body-color: #ede6da; /* warm off white, never pure #fff */ --dark-grey: #f2ece1; /* headings, which were mid grey on cream */ --darker-grey: #1a1c1f; /* footer, one step below the page */ --line: #3c4046; } [data-design="b"] body { background: var(--light-primary); color: var(--body-color); } /* The header carries the white lockup and sits flush with the hero below it. */ [data-design="b"] .site-head { background: var(--darker-grey); border-bottom-color: transparent; } [data-design="b"] .site-foot { background: #141618; } /* Panels lift off the ground rather than being outlined, which is how depth reads in the dark. Borders alone disappear at low brightness on a phone outdoors. */ [data-design="b"] .choice, [data-design="b"] .field, [data-design="b"] .bracket, [data-design="b"] .yours, [data-design="b"] .breakdown, [data-design="b"] .includes, [data-design="b"] .r-cta-soft, [data-design="b"] .runorder, [data-design="b"] .trust, [data-design="b"] .voice, [data-design="b"] .how-col { background: var(--secondary); border-color: var(--line); } /* Selected state needs to be unmistakable against a dark panel, so the gold fills rather than just outlines. */ [data-design="b"] .choice[aria-pressed="true"], [data-design="b"] .choice.is-on { background: rgba(211, 172, 109, .16); border-color: var(--primary); } /* Inputs stay dark so the page does not flash white boxes at the couple, and the caret and placeholder both stay legible. */ [data-design="b"] .input, [data-design="b"] .date-input, [data-design="b"] .link-field { background: #1b1d21; color: var(--body-color); border-color: var(--line); } [data-design="b"] .input::placeholder, [data-design="b"] .date-placeholder { color: #8b9098; } /* The gold CTA keeps dark text on it, which is the only combination that passes in both directions. */ [data-design="b"] .btn-primary { background: var(--primary); color: #1a1c1f; } [data-design="b"] .btn-quiet { color: var(--body-color); border-color: var(--line); } [data-design="b"] .progress { background: #2e3136; } [data-design="b"] .progress-fill { background: var(--primary); } [data-design="b"] .track { background: #3c4046; } /* Photography is the point of this version, so it runs taller and the scrim over the caption gets deeper to hold the type. */ [data-design="b"] .hero-shot img { height: clamp(260px, 56vh, 620px); } [data-design="b"] .hero-cap { background: linear-gradient(to top, rgba(20, 22, 24, .88), rgba(20, 22, 24, 0)); } [data-design="b"] .shot img, [data-design="b"] .spaces-shot img { border-color: var(--line); } /* Placeholders must still read as unfinished in the dark, not as a black hole. */ [data-design="b"] .shot-placeholder { background: #2e3136; } [data-design="b"] .step-count, [data-design="b"] .q-help, [data-design="b"] .r-note-quiet, [data-design="b"] .hero-small, [data-design="b"] .close-small, [data-design="b"] .slider-help { color: #a8adb5; } [data-design="b"] .flag-good { color: #9fd0a4; } [data-design="b"] .flag-warn { color: #e8c07a; } [data-design="b"] .toast { background: var(--primary); color: #1a1c1f; } /* Logo swap. Both lockups ship in the markup and CSS chooses, so there is no flash of the wrong one and the static landing page needs no JavaScript. */ .brand-dark { display: none; } [data-design="b"] .brand-light { display: none; } [data-design="b"] .brand-dark { display: block; } /* --------------------------------------------------------------------------- The switcher control itself. Deliberately styled as an obvious piece of tooling rather than part of the venue's design, so nobody reviewing mistakes it for a component of the page. Sits opposite the Preview mode badge. */ .ds-switch { position: fixed; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: calc(100vw - 24px); padding: 8px 10px; border-radius: 999px; background: rgba(26, 28, 31, .94); box-shadow: 0 6px 20px rgba(0, 0, 0, .28); font-family: var(--body); font-size: 13px; color: #fff; } .ds-lab { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .62; padding-left: 4px; /* The word "Design" is the first thing to go when space is tight; the A and B buttons carry the meaning on their own. */ display: none; } .ds-k { font-weight: 500; } .ds-n { display: none; } .ds-btn { appearance: none; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; font: inherit; /* 44px, the same floor the rest of the tool holds to. */ padding: 7px 12px; min-height: 44px; border-radius: 999px; cursor: pointer; } .ds-btn:hover { border-color: rgba(255, 255, 255, .55); } .ds-btn:focus-visible { outline: 2px solid #d3ac6d; outline-offset: 2px; } .ds-on { background: #d3ac6d; border-color: #d3ac6d; color: #1a1c1f; font-weight: 500; } /* The one line explanation is useful on a laptop and just clutter on a phone, where the pill would otherwise wrap over the content. */ .ds-note { display: none; } /* Both fixed controls live along the bottom edge, so the page needs room to scroll clear of them rather than leaving the last field permanently covered. */ body { padding-bottom: 64px; } @media (min-width: 560px) { .ds-lab { display: inline; } .ds-n { display: inline; margin-left: 5px; } } @media (min-width: 900px) { .ds-note { display: inline; opacity: .68; padding-right: 4px; max-width: 240px; } body { padding-bottom: 0; } }