/* ================================================================= Domain Portfolio — Contact Luxury theme. Two coordinated palettes swapped purely by the .wa-dark / .wa-light class on (set from prefers-color-scheme). ================================================================= */ :root { --accent: #c9a35a; /* restrained metallic gold */ --accent-soft: rgba(201, 163, 90, 0.16); --radius: 14px; --maxw: 540px; --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --transition: 480ms cubic-bezier(0.22, 1, 0.36, 1); } /* ---- Dark palette (deep charcoal) ---- */ html.wa-dark { --bg: #0c0c0e; --bg-grad: radial-gradient(120% 80% at 50% -20%, #1a1916 0%, #0c0c0e 55%); --surface: #15151a; --surface-border: rgba(201, 163, 90, 0.22); --text: #f3efe7; --text-muted: #9b968c; --hairline: rgba(255, 255, 255, 0.08); --shadow: 0 24px 70px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* ---- Light palette (warm ivory) ---- */ html.wa-light { --bg: #f5f1ea; --bg-grad: radial-gradient(120% 80% at 50% -20%, #fffdf8 0%, #f0eadf 55%); --surface: #fffdf9; --surface-border: rgba(168, 132, 60, 0.30); --text: #23211c; --text-muted: #6f6a5f; --hairline: rgba(0, 0, 0, 0.08); --shadow: 0 24px 60px rgba(120, 100, 60, 0.16); color-scheme: light; } /* Bridge our palette into Web Awesome's brand tokens. */ :root { --wa-color-brand-fill-loud: var(--accent); --wa-color-brand-fill-normal: var(--accent); --wa-color-brand-border-loud: var(--accent); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Base colour lives on too, so the UA color-scheme default never shows through (e.g. overscroll, or below short content on a tall 4K screen). */ html { min-height: 100%; background-color: var(--bg); } body { font-family: var(--font-body); min-height: 100vh; background-color: var(--bg); background-image: var(--bg-grad); background-repeat: no-repeat; background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.55; } /* ---- Top bar / language ---- */ .topbar { display: flex; justify-content: flex-end; padding: 22px 26px 0; } .lang-select { width: 168px; } /* ---- Stage layout ---- */ .stage { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 64px; display: flex; flex-direction: column; align-items: center; } /* After a successful send the form is gone. The card keeps the height the form occupied (set inline from JS) and the confirmation is centred within it, so the message sits in the middle of where the form was. */ .card.is-confirmed { display: flex; flex-direction: column; align-items: center; justify-content: center; } .card.is-confirmed .confirmation { width: 100%; } /* ---- Hero ---- */ .hero { text-align: center; margin: 26px 0 30px; } .eyebrow { font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .domain { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 7vw, 3.7rem); line-height: 1.05; margin: 0; letter-spacing: 0.01em; } .tagline { color: var(--text-muted); font-size: 1.02rem; font-weight: 300; max-width: 30rem; margin: 16px auto 0; } /* ---- Card ---- */ .card { width: 100%; background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 38px 34px; position: relative; overflow: hidden; } /* Fine gold hairline along the top edge. */ .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.7; } #contact-form { display: flex; flex-direction: column; gap: 20px; transition: opacity var(--transition), transform var(--transition); } /* ----------------------------------------------------------------- FOUCE guard. Web Awesome form controls render as empty inline boxes until their JS upgrades them, so without this the form appears to "build up" piece by piece. Hide the un-upgraded controls and reserve the form's height, then reveal it all at once when every control is defined (the :has() check passes only once none are :not(:defined)). ----------------------------------------------------------------- */ wa-input:not(:defined), wa-select:not(:defined), wa-textarea:not(:defined), wa-button:not(:defined), wa-icon:not(:defined) { visibility: hidden; } /* Rather than show an empty bordered card while the Web Awesome controls are still upgrading, hide the whole card and reveal it once every control is defined. The reserved min-height keeps the footer from jumping. Everything clears automatically when the :has() check stops matching (all defined). Cinematic entrance: the card rises ~20px and resolves from a soft blur into focus as it fades in, over ~2.2s. Uses a smooth ease-in-out (not the site's front-loaded curve) so the motion stays perceptible across the whole duration rather than finishing in the first fraction of a second. */ #card { transition: opacity 2200ms cubic-bezier(0.4, 0, 0.2, 1), transform 2200ms cubic-bezier(0.4, 0, 0.2, 1), filter 2200ms cubic-bezier(0.4, 0, 0.2, 1); } #card:has(wa-input:not(:defined), wa-select:not(:defined), wa-textarea:not(:defined), wa-button:not(:defined)) { opacity: 0; transform: translateY(20px); filter: blur(8px); min-height: 560px; } /* Reduced motion: appear instantly, no rise/blur/fade — but still hide the un-upgraded card so the empty-card flash never returns. */ @media (prefers-reduced-motion: reduce) { #card { transition: none; } #card:has(wa-input:not(:defined), wa-select:not(:defined), wa-textarea:not(:defined), wa-button:not(:defined)) { transform: none; filter: none; } } /* The domain is filled in from the request host by an inline script. Keep it hidden (but still occupying its line, so there's no layout shift) until that runs, so the "example.com" markup fallback never flashes on screen. */ #domain-name:not(.is-ready), #footer-domain:not(.is-ready) { visibility: hidden; } /* The ID selector above outranks the plain [hidden] rule, so without this the "hidden" form would keep occupying space and shove the confirmation down. */ #contact-form[hidden] { display: none; } .submit { margin-top: 6px; } .submit::part(base) { width: 100%; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; } .form-error { margin: 0; text-align: center; color: #d9534f; font-size: 0.9rem; } /* ---- Honeypot: removed from view & a11y tree, still in the DOM ---- */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- Confirmation ---- */ .confirmation { text-align: center; padding: 18px 6px 8px; animation: rise var(--transition) both; } .confirmation-mark { font-size: 3.2rem; color: var(--accent); line-height: 1; margin-bottom: 14px; } .confirmation h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; margin: 0 0 10px; } .confirmation p { color: var(--text-muted); font-weight: 300; margin: 0 auto; max-width: 26rem; } /* ---- Footer ---- */ .footnote { margin-top: 30px; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.06em; } /* ---- State helpers ---- */ .is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---- RTL safety (no RTL languages selected today, but harmless) ---- */ [dir="rtl"] .topbar { justify-content: flex-start; }