/* Hartfield Group — single-page site Three visual directions driven by [data-direction] on : estate (default) · monument · ledger Brand: regal navy & gold, serif, typographic. */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; } a { color: inherit; text-decoration: none; } /* ---------- Tokens / themes ---------- */ :root { --display: 'Cormorant Garamond', serif; --serif: 'Cormorant Garamond', serif; --sans: 'Jost', sans-serif; --pad: clamp(24px, 6vw, 96px); } /* Estate — warm ivory, centered, letterhead-faithful (DEFAULT) */ html[data-direction="estate"] { --bg: radial-gradient(125% 120% at 50% -10%, #fcf9f2 0%, #f4eedd 55%, #ece2cd 100%); --bg-solid: #f4eedd; --ink: #43474f; --ink-strong: #14223f; --muted: #8a7f66; --accent: #b1893a; --accent-soft: rgba(177,137,58,0.5); --rule: rgba(20,34,63,0.16); --card: rgba(255,255,255,0.5); --nav-bg: rgba(247,241,228,0.82); } /* Monument — deep navy, dramatic, pillars as motif */ html[data-direction="monument"] { --bg: radial-gradient(135% 130% at 70% 0%, #1b2c50 0%, #14223f 50%, #0c1426 100%); --bg-solid: #0f1b34; --ink: #b4c0d6; --ink-strong: #f5f0e4; --muted: #7e8aa5; --accent: #d2b566; --accent-soft: rgba(210,181,102,0.55); --rule: rgba(245,240,228,0.16); --card: rgba(255,255,255,0.03); --nav-bg: rgba(12,20,38,0.7); } /* Ledger — editorial light, ruled grid, numbered */ html[data-direction="ledger"] { --bg: #faf8f3; --bg-solid: #faf8f3; --ink: #434b5c; --ink-strong: #14223f; --muted: #9a9180; --accent: #a9842f; --accent-soft: rgba(169,132,47,0.5); --rule: rgba(20,34,63,0.13); --card: #ffffff; --nav-bg: rgba(250,248,243,0.85); } body { background: var(--bg); color: var(--ink); font-family: var(--serif); min-height: 100vh; } /* Ledger faint grid overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px); background-size: calc((100vw - 2 * var(--pad)) / 12) 100%; background-position: var(--pad) 0; transition: opacity 0.4s; } html[data-direction="ledger"] body::before { opacity: 0.55; } /* ---------- H mark ---------- */ .hmark { color: var(--ink-strong); } .hmark .stroke { stroke: currentColor; fill: none; } .hmark .fill { fill: currentColor; } .hmark .accent { fill: var(--accent); } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); background: var(--nav-bg); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--rule); } .nav .brand { display: flex; align-items: center; gap: 13px; } .nav .brand .hmark { width: 26px; height: auto; } .nav .wm { display: flex; flex-direction: column; line-height: 1; } .nav .wm .n { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: 0.2em; color: var(--ink-strong); text-transform: uppercase; } .nav .wm .s { font-family: var(--sans); font-weight: 400; font-size: 8.5px; letter-spacing: 0.52em; color: var(--accent); text-transform: uppercase; padding-left: 0.52em; margin-top: 3px; } .nav .links { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); } .nav .links a { font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); opacity: 0.8; transition: opacity 0.2s, color 0.2s; white-space: nowrap; } .nav .links a:hover { opacity: 1; color: var(--accent); } .nav .links .nav-cta { color: var(--ink-strong); opacity: 1; border-bottom: 1px solid var(--accent); padding-bottom: 3px; } @media (max-width: 720px) { .nav .links .hide-sm { display: none; } } /* ---------- Shared section scaffold ---------- */ .section { position: relative; z-index: 1; padding: clamp(40px, 5vh, 64px) var(--pad); } .wrap { max-width: 1180px; margin: 0 auto; } .kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; } .kicker .kn { font-family: var(--sans); font-size: 12px; letter-spacing: 0.3em; color: var(--accent); display: none; } .kicker .kt { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } .kicker .kline { flex: 1; height: 1px; background: var(--rule); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; padding: 150px var(--pad) 110px; } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; } .hero .eyebrow { font-family: var(--sans); font-size: 13px; letter-spacing: 0.46em; text-transform: uppercase; color: var(--accent); margin-bottom: 34px; display: flex; align-items: center; gap: 16px; } .hero .eyebrow::before, .hero .eyebrow::after { content: ""; height: 1px; width: 46px; background: var(--accent-soft); } .hero .hero-mark { margin: 0 auto 38px; width: 92px; height: auto; } .headline { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 5.2vw, 82px); line-height: 1.1; letter-spacing: 0.005em; color: var(--ink-strong); margin: 0; text-wrap: pretty; } .headline em { font-style: italic; color: var(--accent); } .lede { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.55vw, 23px); line-height: 1.72; color: var(--ink); max-width: 56ch; margin: 46px 0 46px; } .hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } /* CTA button */ .cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bg-solid); white-space: nowrap; background: var(--ink-strong); padding: 16px 30px; border: 1px solid var(--ink-strong); transition: all 0.25s; } .cta .arr { transition: transform 0.25s; } .cta:hover { background: var(--accent); border-color: var(--accent); color: #1a1407; } .cta:hover .arr { transform: translateX(5px); } .cta.ghost { background: transparent; color: var(--ink-strong); border-color: var(--rule); } .cta.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; } /* Giant pillar watermark (monument) */ .hero-motif { position: absolute; z-index: 1; pointer-events: none; right: -4%; top: 50%; transform: translateY(-50%); width: min(54vw, 720px); height: auto; opacity: 0; color: var(--accent); transition: opacity 0.5s; } html[data-direction="monument"] .hero-motif { opacity: 0.1; } /* ---------- Approach / colonnade ---------- */ .statement { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.16; letter-spacing: 0.01em; color: var(--ink-strong); max-width: 22ch; margin: 0 0 44px; text-wrap: balance; } .statement .soft { color: var(--ink); opacity: 0.55; } .colonnade { border-top: 2px solid var(--accent); } .pillars { display: grid; grid-template-columns: repeat(3, 1fr); } .pillar { padding: 44px clamp(20px, 2.4vw, 40px) 50px; border-right: 1px solid var(--rule); } .pillar:first-child { border-left: 1px solid var(--rule); } .pillar .num { font-family: var(--display); font-weight: 500; font-style: italic; font-size: 34px; color: var(--accent); line-height: 1; margin-bottom: 22px; } .pillar h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 1.7vw, 27px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-strong); margin: 0 0 16px; } .pillar p { font-family: var(--serif); font-size: 16.5px; line-height: 1.78; color: var(--ink); margin: 0; text-wrap: pretty; } .stylobate { height: 2px; background: var(--accent); opacity: 0.4; } /* ---------- Contact ---------- */ .contact .wrap { text-align: center; max-width: 920px; } .contact .statement { margin: 0 auto 22px; max-width: 24ch; } .contact .c-lede { font-family: var(--serif); font-size: clamp(17px,1.4vw,21px); line-height: 1.7; color: var(--ink); max-width: 48ch; margin: 0 auto 44px; } .contact-actions { display: flex; justify-content: center; } .contact-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 48px auto 0; max-width: 660px; } .cd { background: var(--bg-solid); padding: 34px 24px; } .cd .l { font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-strong); margin-bottom: 12px; } .cd .v { font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink-strong); } .cd .v.small { font-size: 14.5px; } .cd .v a { color: inherit; border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; } .cd .v a:hover { color: var(--accent); } /* ---------- Selected Work ---------- */ .work-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(32px, 5vw, 72px); text-decoration: none; border-top: 2px solid var(--accent); padding: 36px 0 38px; margin-top: 4px; border-bottom: 1px solid var(--rule); transition: border-color 0.3s; } .work-crest { width: clamp(120px, 14vw, 188px); aspect-ratio: 1; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 14px 40px rgba(20,34,63,0.18); transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1); } .work-crest img { width: 100%; height: 100%; display: block; } .work-item:hover .work-crest { transform: translateY(-4px) rotate(-2deg); } .work-top { display: flex; align-items: center; gap: 22px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; white-space: nowrap; } .work-top .work-index { color: var(--accent); } .work-name { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 4.6vw, 68px); line-height: 1; letter-spacing: 0.01em; color: var(--ink-strong); margin: 0; transition: color 0.25s; } .work-desc { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.6; color: var(--ink); margin: 20px 0 28px; } .work-link { font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); white-space: nowrap; display: inline-flex; align-items: center; gap: 11px; } .work-link .arr { transition: transform 0.25s; } .work-item:hover { border-top-color: var(--accent); } .work-item:hover .work-name { color: var(--accent); } .work-item:hover .work-link .arr { transform: translateX(6px); } html[data-direction="estate"] .work .wrap { text-align: center; } html[data-direction="estate"] .work-item { grid-template-columns: 1fr; justify-items: center; gap: 30px; } html[data-direction="estate"] .work-top { justify-content: center; } html[data-direction="estate"] .work-link { justify-content: center; } html[data-direction="ledger"] .work-item { border-top-color: var(--ink-strong); } /* ---------- Footer ---------- */ .footer { position: relative; z-index: 1; padding: 46px var(--pad); border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer .brand { display: flex; align-items: center; gap: 12px; } .footer .brand .hmark { width: 22px; } .footer .brand .fn { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-strong); } .footer .legal { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: right; line-height: 1.8; } /* ================= Direction-specific layout ================= */ /* ESTATE — centered & symmetric */ html[data-direction="estate"] .hero-inner { text-align: center; } html[data-direction="estate"] .hero .eyebrow { justify-content: center; } html[data-direction="estate"] .lede { margin-left: auto; margin-right: auto; text-align: center; } html[data-direction="estate"] .hero-actions { justify-content: center; } html[data-direction="estate"] .kicker { justify-content: center; } html[data-direction="estate"] .kicker .kline { display: none; } html[data-direction="estate"] .approach .wrap { text-align: center; } html[data-direction="estate"] .statement { margin-left: auto; margin-right: auto; } /* MONUMENT — left, oversized, dark */ html[data-direction="monument"] .hero-mark { display: none; } html[data-direction="monument"] .hero { min-height: 100vh; } html[data-direction="monument"] .headline { font-size: clamp(46px, 7vw, 104px); font-weight: 500; letter-spacing: -0.005em; } html[data-direction="monument"] .hero .eyebrow::after { display: none; } html[data-direction="monument"] .statement { font-size: clamp(28px, 3.8vw, 56px); } html[data-direction="monument"] .colonnade { border-top-width: 3px; } html[data-direction="monument"] .pillar { border-color: var(--accent-soft); padding-top: 54px; padding-bottom: 64px; } html[data-direction="monument"] .stylobate { height: 3px; opacity: 0.6; } html[data-direction="monument"] .cta { background: var(--accent); border-color: var(--accent); color: #1a1407; } html[data-direction="monument"] .cta:hover { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--accent); } /* LEDGER — editorial grid, numbered, sans labels */ html[data-direction="ledger"] .hero-mark { display: none; } html[data-direction="ledger"] .hero .eyebrow::before, html[data-direction="ledger"] .hero .eyebrow::after { display: none; } html[data-direction="ledger"] .headline { font-weight: 500; font-size: clamp(38px, 6vw, 84px); } html[data-direction="ledger"] .kicker .kn { display: block; } html[data-direction="ledger"] .kicker .kt { color: var(--ink-strong); } html[data-direction="ledger"] .pillar .num { font-style: normal; font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; color: var(--muted); } html[data-direction="ledger"] .colonnade { border-top-color: var(--ink-strong); } html[data-direction="ledger"] .stylobate { background: var(--ink-strong); opacity: 0.25; } /* ---------- Reveal animation ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2,0.7,0.2,1); } .reveal.in { opacity: 1; transform: none; } } /* Suppress transitions during a direction switch (avoids var()+transition stick) */ html.no-trans *, html.no-trans *::before, html.no-trans *::after { transition: none !important; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } .pillar { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .pillar:first-child { border-left: 1px solid var(--rule); } .contact-details { grid-template-columns: 1fr; } .footer { flex-direction: column; align-items: flex-start; } .footer .legal { text-align: left; } html[data-direction="monument"] .hero-motif { opacity: 0.06; } }