/* ellensworld.com — the Phase 2 design layer. Ellen's palette and faces, with the contrast failures from the 2026-09-07 audit corrected: gold #f0cc6a on cream was 1.51:1 -> --gold-ink #8a6a00 (4.99:1) for light grounds sky #6ab8f0 on cream was 2.10:1 -> --sky-ink #1d6a97 (5.80:1) for light grounds magenta #a62d68 on navy was 2.94:1 -> --magenta-light #e05a9a (5.60:1) for dark grounds The bright gold/sky stay in use, but only on dark grounds where they already pass. Fonts are the ones Duda already mirrored locally — no extra network hop, no Google dependency. */ @font-face { font-family: 'Hedvig Letters Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/0d95ec00c2.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/e9c5e1cc95.ttf') format('truetype'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/5ba7f48b6b.ttf') format('truetype'); } @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/84f4496bd5.woff2') format('woff2'); } @font-face { font-family: 'Unna Italic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/740e982fad.ttf') format('truetype'); } :root { --ink: #1e0030; --plum: #350040; --navy: #0e003d; --cream: #fffcf7; --cream-2: #f7f0e6; --white: #ffffff; --magenta: #a62d68; --magenta-light: #e05a9a; --gold: #f0cc6a; --gold-ink: #8a6a00; --sky: #6ab8f0; --sky-ink: #1d6a97; --muted: #5b4a63; --muted-dark: #cbbcd4; --line: #e3d8ea; --line-dark: #3d2a48; --serif: 'Hedvig Letters Serif', Georgia, 'Times New Roman', serif; --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --script: 'Dancing Script', 'Segoe Script', cursive; --italic: 'Unna Italic', Georgia, serif; --head-h: 68px; --wrap: 1180px; --narrow: 760px; --r: 10px; } /* ---------- base ---------- */ .ew { -webkit-font-smoothing: antialiased; margin: 0; } .ew :focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 2px; } /* Base styling applies ONLY to the Phase 2 pages. On .ew-frozen the Duda stylesheet owns every element, and a stray `color` or `font-family` on there turns white-on-dark text into dark-on-dark. */ .ew-clean { font-family: var(--sans); color: var(--ink); background: var(--cream); } .ew-clean *, .ew-clean *::before, .ew-clean *::after { box-sizing: border-box; } .ew-clean img { max-width: 100%; display: block; } .ew-clean a { color: var(--magenta); } .ew-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .ew-narrow { max-width: var(--narrow); } .ew-skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--cream); padding: 12px 18px; z-index: 200; border-radius: 0 0 var(--r) 0; } .ew-skip:focus { left: 0; } .ew-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- type ---------- */ .ew-clean h1, .ew-clean h2, .ew-clean h3, .ew-clean h4 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.08; text-wrap: balance; letter-spacing: -0.01em; } .ew-clean h1 { font-size: clamp(2.35rem, 6vw, 4.1rem); } .ew-clean h2 { font-size: clamp(1.85rem, 3.9vw, 2.85rem); } .ew-clean h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } .ew-clean h4 { font-size: 1.08rem; } .ew-clean p { margin: 0 0 1.1em; font-size: 1.0625rem; line-height: 1.62; max-width: 68ch; } .ew-clean .lede, .ew-home-hero .lede { font-size: clamp(1.12rem, 1.9vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 60ch; } .ew .eyebrow { font-family: var(--sans); box-sizing: border-box; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; color: var(--magenta); margin: 0 0 14px; } .ew .script { font-family: var(--script); } .ew-clean em, .ew .it { font-family: var(--italic); font-style: normal; } /* ---------- grounds ---------- */ .ew-dark { background: var(--ink); color: var(--cream); } .ew-navy { background: var(--navy); color: var(--cream); } .ew-dark h1, .ew-dark h2, .ew-dark h3, .ew-dark h4, .ew-navy h1, .ew-navy h2, .ew-navy h3, .ew-navy h4 { color: var(--cream); } .ew-dark p, .ew-navy p { color: #e6dced; } .ew-dark .lede, .ew-navy .lede { color: #d6c9df; } .ew-dark .eyebrow, .ew-navy .eyebrow { color: var(--magenta-light); } .ew-dark a, .ew-navy a { color: var(--magenta-light); } .ew-cream2 { background: var(--cream-2); } .ew-section { padding: clamp(56px, 8vw, 104px) 0; } .ew-section--tight { padding: clamp(40px, 5vw, 64px) 0; } /* ---------- buttons ---------- */ .ew-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--sans); font-size: 0.98rem; font-weight: 500; line-height: 1; padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease; } .ew-btn:hover { transform: translateY(-2px); } /* NOTE: these need one more class than `.ew-clean a` (0,1,1) or the generic link colour paints magenta text on a magenta button. Hence `.ew .ew-btn--*` rather than `.ew-btn--*`. */ .ew .ew-btn--primary { background: var(--magenta); color: #fff; } .ew .ew-btn--primary:hover { background: #8e2359; color: #fff; } .ew .ew-btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; } .ew .ew-btn--ghost:hover { background: var(--ink); color: var(--cream); } .ew .ew-btn--gold { background: var(--gold); color: #2a2000; } .ew .ew-btn--gold:hover { background: #f7d980; } .ew-dark .ew-btn--primary, .ew-navy .ew-btn--primary { background: var(--magenta-light); color: var(--ink); } .ew-dark .ew-btn--primary:hover, .ew-navy .ew-btn--primary:hover { background: #ef79b0; color: var(--ink); } .ew-dark .ew-btn--ghost, .ew-navy .ew-btn--ghost { color: var(--cream); } .ew-dark .ew-btn--ghost:hover, .ew-navy .ew-btn--ghost:hover { background: var(--cream); color: var(--ink); } @media (prefers-reduced-motion: reduce) { .ew-btn, .ew-btn:hover { transition: none; transform: none; } } /* ---------- header ---------- */ .ew-head { font-family: var(--sans); position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--head-h); display: flex; align-items: center; transition: background-color .25s ease, box-shadow .25s ease; background: var(--ink); } .ew-head[data-transparent] { background: transparent; } .ew-head[data-scrolled] { background: var(--ink); box-shadow: 0 1px 0 rgba(255, 252, 247, .12); } .ew-head__in { display: flex; align-items: center; gap: 20px; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .ew-head__logo { flex: 0 0 auto; line-height: 0; } .ew-head .ew-head__logo img { height: 30px; width: auto; } /* (0,2,1) to beat Duda's img[width][height] */ /* the home hero carries the big signature; the header picks it up once you scroll past it */ .ew-head[data-transparent]:not([data-scrolled]) .ew-head__logo { opacity: 0; pointer-events: none; } .ew-head__logo { transition: opacity .25s ease; } .ew-head__nav { display: flex; align-items: center; gap: 26px; margin-left: auto; } .ew-head__nav a { font-size: 0.92rem; color: var(--cream); text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; white-space: nowrap; } .ew-head__nav a:hover { border-bottom-color: var(--magenta-light); } .ew-head__nav a[aria-current='page'] { border-bottom-color: var(--magenta-light); } .ew-head .ew-btn { padding: 11px 22px; font-size: 0.9rem; } .ew-burger { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--cream); } .ew-burger span { display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: transform .25s ease, opacity .2s ease; } .ew-burger span::before, .ew-burger span::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; transition: transform .25s ease; } .ew-burger span::before { top: -7px; } .ew-burger span::after { top: 7px; } .ew-burger[aria-expanded='true'] span { transform: rotate(45deg); } .ew-burger[aria-expanded='true'] span::before { transform: translateY(7px) rotate(-90deg); } .ew-burger[aria-expanded='true'] span::after { opacity: 0; } @media (max-width: 940px) { .ew-head__nav, .ew-head > .ew-head__in > .ew-btn { display: none; } .ew-burger { display: flex; } } .ew-drawer { font-family: var(--sans); position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); background: var(--ink); z-index: 70; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; gap: 6px; padding: 26px 26px 40px; overflow-y: auto; } .ew-drawer[data-open] { transform: translateX(0); } .ew-drawer .ew-drawer__sig { height: 44px; width: auto; align-self: flex-start; margin: 8px 0 30px; } .ew-drawer a.ew-drawer__link { font-family: var(--serif); font-size: 1.5rem; color: var(--cream); text-decoration: none; padding: 11px 0; border-bottom: 1px solid var(--line-dark); } .ew-drawer a.ew-drawer__link:hover { color: var(--magenta-light); } .ew-drawer .ew-btn { margin-top: 22px; } .ew-scrim { position: fixed; inset: 0; background: rgba(14, 0, 61, .6); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .ew-scrim[data-open] { opacity: 1; pointer-events: auto; } body.ew-locked { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .ew-drawer, .ew-scrim, .ew-head { transition: none; } } /* ---------- sticky mobile CTA ---------- */ .ew-sticky { font-family: var(--sans); position: fixed; inset: auto 0 0 0; z-index: 55; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(30, 0, 48, .96); display: none; } .ew-sticky .ew-btn { width: 100%; } @media (max-width: 760px) { .ew-sticky { display: block; } .ew-foot { padding-bottom: 92px; } } /* ---------- hero ---------- */ .ew-hero { position: relative; padding-top: calc(var(--head-h) + 40px); padding-bottom: 56px; overflow: hidden; } .ew-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } /* grid and flex children default to min-width:auto, so a row of non-shrinking buttons makes the whole column wider than the screen instead of wrapping. This is what lets .ew-hero__cta actually wrap. */ .ew-hero__grid > *, .ew-home-hero__in > * { min-width: 0; } .ew-hero__photo { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--plum); } .ew-hero__photo img { width: 100%; height: 100%; object-fit: cover; } .ew-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* flex items shrink before they wrap, so without this the two buttons squeeze onto one line and overflow a narrow screen instead of stacking */ .ew-hero__cta > .ew-btn { flex: 0 0 auto; max-width: 100%; } .ew-hero .ew-hero__sig { height: 52px; width: auto; margin-bottom: 18px; } @media (max-width: 860px) { .ew-hero__grid { grid-template-columns: 1fr; } .ew-hero__photo { aspect-ratio: 3 / 2; max-height: 420px; } } /* ---------- logo strip ---------- */ .ew-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(26px, 5vw, 60px); } .ew-logos img { height: clamp(24px, 3.2vw, 34px); width: auto; opacity: .92; } .ew-logos__label { text-align: center; margin-bottom: 26px; } /* ---------- cards / lists ---------- */ .ew-grid { display: grid; gap: 22px; } .ew-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ew-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .ew-grid--2, .ew-grid--3 { grid-template-columns: 1fr; } } .ew-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; } .ew-card img { max-height: 320px; width: auto; object-fit: contain; } .ew-dark .ew-card { background: rgba(255, 252, 247, .05); border-color: var(--line-dark); } /* topic blocks: a rule and generous space, not another card */ .ew-topic { padding: 34px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); } .ew-dark .ew-topic { border-top-color: var(--line-dark); } @media (max-width: 860px) { .ew-topic { grid-template-columns: 1fr; gap: 18px; } } .ew-takeaways { list-style: none; margin: 0; padding: 0; } .ew-takeaways li { position: relative; padding: 0 0 0 30px; margin: 0 0 12px; line-height: 1.5; } .ew-takeaways li::before { content: '↑'; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--magenta); color: #fff; font-size: 11px; line-height: 1; } .ew-dark .ew-takeaways li::before { background: var(--magenta-light); color: var(--ink); } /* framework steps — a real sequence, so numbering is honest */ .ew-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; } .ew-steps li { display: grid; grid-template-columns: 66px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line-dark); align-items: baseline; } .ew-steps__n { font-family: var(--serif); font-size: 1.9rem; color: var(--gold); font-variant-numeric: tabular-nums; } /* testimonials */ .ew-quotes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); } .ew-quote { background: rgba(255, 252, 247, .05); border: 1px solid var(--line-dark); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; } .ew-quote blockquote { margin: 0 0 16px; font-family: var(--serif); font-size: 1.14rem; line-height: 1.44; color: var(--cream); } .ew-quote cite { margin-top: auto; font-style: normal; font-family: var(--script); font-size: 1.35rem; color: var(--magenta-light); } /* video */ .ew-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; border: 1px solid var(--line-dark); } .ew-video iframe, .ew-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .ew-video__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(14, 0, 61, .34); border: 0; cursor: pointer; width: 100%; padding: 0; } .ew-video__play span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--magenta-light); color: var(--ink); font-size: 26px; padding-left: 5px; } .ew-video__play:hover span { background: #ef79b0; } /* ---------- form ---------- */ .ew-form { display: grid; gap: 16px; } .ew-form__row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .ew-form__row { grid-template-columns: 1fr; } } .ew-field { display: grid; gap: 7px; } .ew-field label { font-size: 0.86rem; font-weight: 500; letter-spacing: .01em; } .ew-field label .hint { font-weight: 400; color: var(--muted); } /* the booking form sits on a dark card, where the light-ground muted tone drops to 2.14:1 */ .ew-dark .ew-field label .hint, .ew-navy .ew-field label .hint { color: var(--muted-dark); } .ew-field input, .ew-field textarea, .ew-field select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); border: 1.5px solid var(--line); border-radius: 8px; padding: 13px 14px; width: 100%; } .ew-field textarea { min-height: 132px; resize: vertical; } .ew-field input:focus, .ew-field textarea:focus, .ew-field select:focus { border-color: var(--magenta); outline: 2px solid rgba(166, 45, 104, .25); outline-offset: 0; } .ew-field[data-invalid] input, .ew-field[data-invalid] textarea { border-color: #b3261e; } .ew-field__err { font-size: 0.83rem; color: #b3261e; display: none; } .ew-field[data-invalid] .ew-field__err { display: block; } .ew-consent { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; font-size: 0.9rem; line-height: 1.45; } .ew-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--magenta); } .ew-form__status { border-radius: var(--r); padding: 16px 18px; font-size: 0.96rem; } .ew-form__status[hidden] { display: none; } .ew-form__status--ok { background: #e6f3ea; border: 1px solid #b5d9c1; color: #1d5130; } .ew-form__status--bad { background: #fbe6e4; border: 1px solid #eabbb6; color: #8c231b; } .ew-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ---------- footer ---------- */ .ew-foot { font-family: var(--sans); background: var(--ink); color: var(--cream); padding: 64px 0 34px; } .ew-foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; } @media (max-width: 860px) { .ew-foot__grid { grid-template-columns: 1fr; gap: 30px; } } .ew-foot h2 { font-family: var(--serif); font-weight: 400; color: var(--cream); margin-top: 0; font-size: 1.18rem; margin-bottom: 14px; } .ew-foot .ew-foot__sig { height: 52px; width: auto; margin-bottom: 16px; } .ew-foot p { font-size: 1rem; line-height: 1.55; } .ew-foot ul { list-style: none; margin: 0; padding: 0; } .ew-foot li { margin-bottom: 10px; } .ew-foot a { color: var(--cream); text-decoration: none; border-bottom: 1px solid transparent; } .ew-foot a:hover { border-bottom-color: var(--magenta-light); color: var(--magenta-light); } .ew-foot__bar { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; font-size: 0.85rem; color: var(--muted-dark); } .ew-foot__bar a { color: var(--muted-dark); } /* ---------- prose (privacy) ---------- */ .ew-prose h2 { margin: 40px 0 12px; font-size: 1.5rem; } .ew-prose h2:first-of-type { margin-top: 0; } .ew-prose ul { padding-left: 20px; margin: 0 0 1.1em; } .ew-prose li { margin-bottom: 8px; line-height: 1.6; max-width: 68ch; }