/* ========================================================================== Handy Daniel Services — shared chrome for the scroll-world site. Used by index.html (outro + footer), about.html and contact.html. Brand palette taken from the live site's CSS custom properties. No external CSS/font/icon dependencies — social icons are inline SVG. ========================================================================== */ :root { --hd-primary: #2563eb; --hd-primary-dark: #1d4ed8; --hd-primary-light:#3b82f6; --hd-indigo: #667eea; --hd-violet: #764ba2; --hd-dark: #1e293b; --hd-ink: #1e293b; --hd-ink-soft: #64748b; --hd-line: #e2e8f0; --hd-bg: #ffffff; --hd-bg-soft: #f8fafc; --hd-radius: 14px; --hd-shadow: 0 10px 25px rgba(15, 23, 42, .08); --hd-shadow-lg: 0 18px 42px rgba(15, 23, 42, .14); --hd-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hd-maxw: 1180px; } /* Explicit light canvas. Without this the page inherits the UA dark-mode canvas when the OS/browser prefers dark, and the ink-on-white palette below goes dark-on-dark. The scene clips are all shot on a white studio background, so this site commits to light in both schemes. */ html { background: var(--hd-bg); color-scheme: light; } .hd { font-family: var(--hd-font); color: var(--hd-ink); line-height: 1.6; background: var(--hd-bg); margin: 0; } .hd *, .hd *::before, .hd *::after { box-sizing: border-box; } .hd-wrap { max-width: var(--hd-maxw); margin: 0 auto; padding: 0 clamp(18px, 5vw, 40px); } .hd img { max-width: 100%; height: auto; display: block; } /* Vertical rhythm only — deliberately LONGHAND. These selectors are element-qualified (`.hd p` = 0,1,1) so they outrank single-class rules like `.hd-footer__blurb` (0,1,0). Using the `margin` shorthand here would reset those blocks' `margin-left/right:auto` to 0 and shove every centred, max-width block flush left. Never use the shorthand in this section. */ .hd h1, .hd h2, .hd h3, .hd h4 { line-height: 1.18; margin-top: 0; margin-bottom: .5em; font-weight: 700; letter-spacing: -.02em; } .hd h1 { font-size: clamp(2rem, 5vw, 3.2rem); } .hd h2 { font-size: clamp(1.55rem, 3.4vw, 2.35rem); } .hd h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); } .hd p { margin-top: 0; margin-bottom: 1rem; } /* The homepage puts class="hd" on , which also wraps the scroll engine's DOM. The engine styles its own controls with single-class rules like `.sw-topcta{color:#fff}` (0,1,0), so an unscoped `.hd a` (0,1,1) would override them and paint the engine's buttons link-blue on their dark pills. Never match `sw-`-prefixed elements here. */ .hd a:not([class*="sw-"]) { color: var(--hd-primary); } .hd-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hd-primary); margin-bottom: .75rem; } .hd-lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--hd-ink-soft); max-width: 68ch; } /* ---------- buttons ---------- */ .hd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem; border-radius: 999px; font-weight: 650; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, background .18s, color .18s; } /* NOTE ON SPECIFICITY — buttons are usually , and both `.hd a` (0,1,1) and `.hd-nav__links a` (0,2,0) outrank a bare `.hd-btn--primary` (0,1,0). Without the `.hd a.hd-btn--*` (0,2,1) form below, the label inherits the link colour and you get blue text on a blue button. Keep the element qualifier on every colour rule here. */ .hd .hd-btn--primary, .hd a.hd-btn--primary, .hd button.hd-btn--primary { background: var(--hd-primary); color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.28); } .hd .hd-btn--primary:hover, .hd a.hd-btn--primary:hover, .hd button.hd-btn--primary:hover { background: var(--hd-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37,99,235,.36); } .hd .hd-btn--ghost, .hd a.hd-btn--ghost, .hd button.hd-btn--ghost { border-color: currentColor; color: var(--hd-primary); background: transparent; } .hd .hd-btn--ghost:hover, .hd a.hd-btn--ghost:hover, .hd button.hd-btn--ghost:hover { background: var(--hd-primary); border-color: var(--hd-primary); color: #fff; transform: translateY(-2px); } .hd .hd-btn--light, .hd a.hd-btn--light, .hd button.hd-btn--light { background: #fff; color: var(--hd-primary); } .hd .hd-btn--light:hover, .hd a.hd-btn--light:hover, .hd button.hd-btn--light:hover { transform: translateY(-2px); box-shadow: var(--hd-shadow-lg); } /* Buttons inside the dark footer must not pick up the footer's pale link colour. */ .hd-footer a.hd-btn--primary { color: #fff; } /* ---------- page header (about / contact) ---------- */ .hd-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hd-line); } .hd-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px clamp(18px,5vw,40px); max-width: var(--hd-maxw); margin: 0 auto; } .hd-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hd-ink); font-weight: 750; letter-spacing: -.01em; } .hd-brand__mark { width: 24px; height: 24px; border-radius: 7px; flex: none; background: linear-gradient(135deg, var(--hd-primary-light), var(--hd-violet)); } .hd-nav__links { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); } .hd-nav__links a { color: var(--hd-ink-soft); text-decoration: none; font-weight: 600; font-size: .95rem; } .hd-nav__links a:hover, .hd-nav__links a[aria-current="page"] { color: var(--hd-primary); } @media (max-width: 720px) { .hd-nav__links .hd-nav__hide-sm { display: none; } } /* Services dropdown — CSS-only (hover on pointer devices, :focus-within for keyboard), so the new pages need no JS to expose the ported service pages. */ .hd-dropdown { position: relative; } .hd-dropdown__toggle { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; color: var(--hd-ink-soft); font-weight: 600; font-size: .95rem; background: none; border: 0; font-family: inherit; padding: 0; } .hd-dropdown__toggle svg { width: 11px; height: 11px; transition: transform .18s; } .hd-dropdown:hover .hd-dropdown__toggle, .hd-dropdown:focus-within .hd-dropdown__toggle { color: var(--hd-primary); } .hd-dropdown:hover .hd-dropdown__toggle svg, .hd-dropdown:focus-within .hd-dropdown__toggle svg { transform: rotate(180deg); } .hd-dropdown__menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 190px; background: #fff; border: 1px solid var(--hd-line); border-radius: 12px; box-shadow: var(--hd-shadow-lg); padding: 6px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; } /* keeps the menu reachable across the gap between toggle and panel */ .hd-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; } .hd-dropdown:hover .hd-dropdown__menu, .hd-dropdown:focus-within .hd-dropdown__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .hd-dropdown__menu li { margin: 0; } .hd .hd-dropdown__menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: .93rem; color: var(--hd-ink); text-decoration: none; } .hd .hd-dropdown__menu a:hover { background: var(--hd-bg-soft); color: var(--hd-primary); } @media (max-width: 720px) { .hd-dropdown { display: none; } } /* ---------- generic section ---------- */ .hd-section { padding: clamp(48px, 8vw, 96px) 0; } .hd-section--soft { background: var(--hd-bg-soft); } .hd-section__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); } /* Centre the whole section, not just its head — the pre-footer CTA has no .hd-section__head wrapper, so heading/lede/buttons were staying left-aligned. */ .hd-section--center { text-align: center; } .hd-section--center .hd-section__head { margin-left: auto; margin-right: auto; } .hd-section--center .hd-lede { margin-left: auto; margin-right: auto; } /* ---------- cards ---------- */ .hd-grid { display: grid; gap: clamp(18px, 2.5vw, 28px); } .hd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .hd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Main content + sidebar (contact form). Must live in a class, NOT an inline style — inline styles beat media queries, so a hard-coded two-column track would stay two columns on a phone and squash the form into an unusable sliver. */ .hd-grid--sidebar { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); align-items: start; } @media (max-width: 860px) { .hd-grid--sidebar { grid-template-columns: minmax(0, 1fr); } /* Below the form, the four contact cards read better 2-up than as a long stack. */ .hd-contact-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .hd-contact-aside { grid-template-columns: minmax(0, 1fr); } } .hd-card { background: #fff; border: 1px solid var(--hd-line); border-radius: var(--hd-radius); padding: clamp(22px, 3vw, 32px); box-shadow: var(--hd-shadow); transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s, border-color .22s; display: flex; flex-direction: column; min-width: 0; } /* Long addresses / emails must wrap rather than force the card wider than the screen. */ .hd-card p, .hd-card a { overflow-wrap: anywhere; } .hd-card__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1rem; color: #fff; flex: none; background: linear-gradient(135deg, var(--hd-primary-light), var(--hd-primary-dark)); } .hd-card__icon svg { width: 24px; height: 24px; } .hd-card h3 { margin-bottom: .4rem; } .hd-card p { color: var(--hd-ink-soft); } .hd-card__cta { font-weight: 700; color: var(--hd-primary); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; } .hd-card__cta svg { width: 15px; height: 15px; transition: transform .18s; } .hd-card__cta:hover { text-decoration: underline; text-underline-offset: 3px; } .hd-card__cta:hover svg { transform: translate(2px, -2px); } /* Partner cards carry two actions: out to the partner's own site, and back into our own lead form. Stacked so the external link reads as the primary. */ .hd-card__actions { margin-top: auto; padding-top: .8rem; display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; } .hd-card__cta--soft { font-weight: 600; font-size: .93rem; color: var(--hd-ink-soft); } .hd-card__cta--soft:hover { color: var(--hd-primary); } .hd-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* partner portrait — sits above the eyebrow in the About partnership cards */ .hd-partner { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; } .hd-partner__photo { width: 92px; height: 92px; border-radius: 50%; flex: none; object-fit: cover; background: var(--hd-bg-soft); box-shadow: 0 6px 18px rgba(15,23,42,.16); outline: 3px solid #fff; outline-offset: -1px; } .hd-partner__name { display: inline-block; font-weight: 750; font-size: 1.08rem; line-height: 1.25; color: var(--hd-ink); text-decoration: none; } a.hd-partner__name:hover, a.hd-partner__name:focus-visible { color: var(--hd-primary); text-decoration: underline; text-underline-offset: 3px; } .hd-partner__role { font-size: .88rem; color: var(--hd-ink-soft); } .hd-partner__badge { display: inline-block; margin-top: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hd-primary); background: color-mix(in srgb, var(--hd-primary) 10%, transparent); padding: .18rem .55rem; border-radius: 999px; } @media (max-width: 420px) { .hd-partner { flex-direction: column; align-items: flex-start; text-align: left; } .hd-partner__photo { width: 78px; height: 78px; } } /* linked partner cards (homepage outro + about) */ a.hd-card { text-decoration: none; color: inherit; } a.hd-card:hover, a.hd-card:focus-visible { transform: translateY(-6px); box-shadow: var(--hd-shadow-lg); border-color: color-mix(in srgb, var(--hd-primary) 40%, var(--hd-line)); } a.hd-card:hover .hd-card__cta svg { transform: translateX(4px); } .hd-card--design .hd-card__icon { background: linear-gradient(135deg, var(--hd-indigo), var(--hd-violet)); } .hd-card--realty .hd-card__icon { background: linear-gradient(135deg, var(--hd-primary), #0ea5e9); } /* ---------- footer ---------- */ .hd-footer { background: var(--hd-dark); color: #cbd5e1; padding: clamp(44px, 6vw, 68px) 0 28px; } .hd-footer a { color: #cbd5e1; text-decoration: none; } .hd-footer a:hover { color: #fff; } .hd-footer h5 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 .9rem; letter-spacing: .01em; } .hd-footer__top { text-align: center; margin-bottom: clamp(30px, 4vw, 46px); } .hd-footer__top h5 { font-size: 1.25rem; } .hd-footer__motto { color: #93c5fd; font-weight: 600; margin-bottom: .5rem; } .hd-footer .hd-footer__blurb { max-width: 60ch; margin-left: auto; margin-right: auto; margin-bottom: 1.4rem; color: #94a3b8; } .hd-footer__contact { display: flex; justify-content: center; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; } .hd-contact-item { display: flex; align-items: center; gap: .7rem; text-align: left; } .hd-contact-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(59,130,246,.16); color: #93c5fd; flex: none; } .hd-contact-icon svg { width: 18px; height: 18px; } .hd-contact-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; } .hd-contact-item a, .hd-contact-item span { font-weight: 650; color: #fff; } /* Fixed-width tracks + justify-content:center keeps the remaining columns as a tidy centred pair. With `1fr` tracks they stretch to fill and drift to the far edges, which looks sparse now that Services has been removed. */ .hd-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 230px)); justify-content: center; gap: clamp(20px, 4vw, 56px); text-align: center; } .hd-footer__cols ul { list-style: none; margin: 0; padding: 0; } .hd-footer__cols li { margin-bottom: .45rem; font-size: .94rem; } .hd-footer__contact { text-align: center; } .hd-contact-item { text-align: left; } .hd-footer hr { border: 0; border-top: 1px solid rgba(148,163,184,.22); margin: clamp(28px,4vw,40px) 0 24px; } .hd-footer__bottom { text-align: center; font-size: .9rem; } .hd-social { display: flex; justify-content: center; gap: 14px; margin: 1.1rem 0; } .hd-social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(148,163,184,.14); color: #cbd5e1; transition: background .2s, color .2s, transform .2s; } .hd-social a:hover { background: var(--hd-primary); color: #fff; transform: translateY(-3px); } .hd-social svg { width: 19px; height: 19px; fill: currentColor; } .hd-footer__legal a { margin: 0 .6rem; font-size: .88rem; color: #94a3b8; } /* ---------- forms (contact) ---------- */ .hd-form { display: grid; gap: 1.1rem; min-width: 0; } .hd-form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* min-width:0 lets grid/flex children actually shrink; without it the intrinsic width of an keeps the column wider than the viewport. */ .hd-field { display: flex; flex-direction: column; min-width: 0; } .hd-field label { font-weight: 650; font-size: .93rem; margin-bottom: .35rem; } .hd-field input, .hd-field select, .hd-field textarea { font: inherit; color: inherit; padding: .72rem .9rem; border: 1.5px solid var(--hd-line); border-radius: 10px; background: #fff; transition: border-color .18s, box-shadow .18s; width: 100%; } .hd-field textarea { resize: vertical; min-height: 130px; } .hd-field input:focus, .hd-field select:focus, .hd-field textarea:focus { outline: none; border-color: var(--hd-primary); box-shadow: 0 0 0 4px rgba(37,99,235,.14); } .hd-field .hd-help { font-size: .82rem; color: var(--hd-ink-soft); margin-top: .3rem; } .hd-field .hd-invalid { display: none; font-size: .84rem; color: #dc2626; margin-top: .3rem; font-weight: 600; } .hd-field.is-invalid input, .hd-field.is-invalid select, .hd-field.is-invalid textarea { border-color: #dc2626; } .hd-field.is-invalid .hd-invalid { display: block; } .hd-field.is-valid input, .hd-field.is-valid select, .hd-field.is-valid textarea { border-color: #16a34a; } .hd-req { color: #dc2626; } /* Google renders the reCAPTCHA checkbox as a fixed 304px iframe that ignores the viewport. Inside a padded card on a 320px phone that overflows the page, so scale it down below 420px. The wrapper's fixed height stops the transform leaving a gap. */ .hd-captcha { max-width: 100%; } @media (max-width: 420px) { .hd-captcha { height: 62px; } .hd-captcha .g-recaptcha { transform: scale(.78); transform-origin: left top; } } /* 320px-class phones: card interior drops to ~215px, so 0.78 still overflows. */ @media (max-width: 360px) { .hd-captcha { height: 56px; } .hd-captcha .g-recaptcha { transform: scale(.68); } } .hd-alert { border-radius: 10px; padding: .9rem 1.1rem; font-weight: 600; display: none; } .hd-alert--err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .hd-alert--ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } /* thank-you popup */ .hd-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.6); z-index: 1000; backdrop-filter: blur(3px); } .hd-popup { display: none; position: fixed; z-index: 1001; inset: 0; margin: auto; width: min(440px, 90vw); height: fit-content; background: #fff; border-radius: 18px; padding: clamp(28px, 4vw, 40px); text-align: center; box-shadow: var(--hd-shadow-lg); } .hd-popup__check { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center; background: #dcfce7; color: #16a34a; } .hd-popup__check svg { width: 32px; height: 32px; } @media (prefers-reduced-motion: reduce) { .hd *, .hd *::before, .hd *::after { transition: none !important; animation: none !important; } }