/* ============================================================ HAWKHILL HOMES — institutional residential investment platform Three visual directions controlled by [data-direction] on : midnight — dark, technical, institutional editorial — light, premium, whitespace slate — graphite / mid-tone Accent driven by --accent (set by JS), tinted per theme via color-mix. ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ---------- Type ---------- */ :root { --font-display: "Jost", "Century Gothic", "Futura", ui-sans-serif, sans-serif; --font-body: "Jost", "Century Gothic", ui-sans-serif, system-ui, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; --accent: #0068BC; /* overridden by JS */ --logo-color: url("assets/logo-color.png"); --logo-white: url("assets/logo-white.png"); --maxw: 1280px; --gutter: clamp(20px, 5vw, 88px); --section-y: clamp(54px, 7vw, 108px); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Theme tokens ---------- */ html[data-direction="midnight"] { --bg: #061F27; --bg-2: #0A2A34; --bg-3: #0E3540; --bg-inset: #04181E; --line: rgba(231,242,244,0.12); --line-2: rgba(231,242,244,0.06); --ink: #ECF3F4; --ink-soft: rgba(236,243,244,0.66); --ink-faint: rgba(236,243,244,0.40); --brand: #0C4452; --logo-filter: none; /* uses white logo */ --logo-src: var(--logo-white); --accent-text: color-mix(in oklab, var(--accent), white 26%); --accent-line: color-mix(in oklab, var(--accent), white 8%); --on-accent: #04181E; --grid-color: rgba(231,242,244,0.05); --halo: color-mix(in oklab, var(--accent), transparent 80%); --card: rgba(255,255,255,0.025); --card-hover: rgba(255,255,255,0.05); --eagle-filter: invert(1) brightness(1.7); color-scheme: dark; } html[data-direction="slate"] { --bg: #1A1E22; --bg-2: #21262B; --bg-3: #2A3036; --bg-inset: #14181B; --line: rgba(232,236,239,0.13); --line-2: rgba(232,236,239,0.06); --ink: #EAEEF1; --ink-soft: rgba(234,238,241,0.64); --ink-faint: rgba(234,238,241,0.40); --brand: #4C6B76; --logo-src: var(--logo-white); --accent-text: color-mix(in oklab, var(--accent), white 28%); --accent-line: color-mix(in oklab, var(--accent), white 10%); --on-accent: #14181B; --grid-color: rgba(232,236,239,0.05); --halo: color-mix(in oklab, var(--accent), transparent 82%); --card: rgba(255,255,255,0.022); --card-hover: rgba(255,255,255,0.05); --eagle-filter: invert(1) brightness(1.7); color-scheme: dark; } html[data-direction="editorial"] { --bg: #F4F4F0; --bg-2: #FBFBF8; --bg-3: #ECECE5; --bg-inset: #E8E8E1; --line: rgba(12,42,51,0.15); --line-2: rgba(12,42,51,0.08); --ink: #0E2A32; --ink-soft: rgba(14,42,50,0.66); --ink-faint: rgba(14,42,50,0.44); --brand: #0C4452; --logo-src: var(--logo-color); --accent-text: var(--accent); --accent-line: var(--accent); --on-accent: #FBFBF8; --grid-color: rgba(12,42,51,0.05); --halo: color-mix(in oklab, var(--accent), transparent 86%); --card: rgba(255,255,255,0.55); --card-hover: #FFFFFF; --eagle-filter: none; color-scheme: light; } body { font-family: var(--font-body); background-color: var(--bg); color: var(--ink); font-weight: 400; line-height: 1.6; letter-spacing: 0.005em; transition: background-color 0.5s var(--ease), color 0.5s var(--ease); overflow-x: hidden; } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .divider { border: 0; border-top: 1px solid var(--line); } /* ---------- Eyebrow / mono labels ---------- */ .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent-line); display: inline-block; } .eyebrow.no-rule::before { display: none; } .mono { font-family: var(--font-mono); letter-spacing: 0.02em; } .kicker { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); } /* ---------- Headings ---------- */ .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; } h1.display { font-size: clamp(2.1rem, 4vw, 3.7rem); } h2.display { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.05; } h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; } .lead { font-size: clamp(1.08rem, 1.5vw, 1.35rem); line-height: 1.55; color: var(--ink-soft); font-weight: 300; } .muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); } em.hl { font-style: normal; color: var(--accent-text); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.95em 1.5em; border: 1px solid transparent; transition: all 0.35s var(--ease); white-space: nowrap; } .btn .arr { transition: transform 0.35s var(--ease); } .btn:hover .arr { transform: translateX(4px); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: color-mix(in oklab, var(--accent), white 12%); } .btn-ghost { border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--accent-text); color: var(--accent-text); } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in oklab, var(--bg), transparent 12%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); padding-block: 12px; } .nav-logo { height: 48px; width: 200px; background: var(--logo-src) left center / contain no-repeat; transition: height 0.4s var(--ease), width 0.4s var(--ease); } .nav.scrolled .nav-logo { height: 42px; width: 175px; } .nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); } .nav-links a { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.25s; position: relative; } .nav-links a:hover { color: var(--ink); } .nav-links a.is-cta { color: var(--ink); padding: 0.7em 1.15em; border: 1px solid var(--line); transition: all 0.3s var(--ease); } .nav-links a.is-cta:hover { border-color: var(--accent-text); color: var(--accent-text); } .nav-toggle { display: none; } @media (max-width: 900px) { .nav-links .nav-link { display: none; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding-top: clamp(104px, 12vh, 150px); padding-bottom: clamp(40px, 5vw, 70px); overflow: hidden; } .hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(120% 80% at 70% 18%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(120% 80% at 70% 18%, #000 30%, transparent 78%); opacity: 0; transition: opacity 0.5s; } html[data-texture="on"] .hero-grid { opacity: 1; } .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.5fr 0.6fr; gap: clamp(28px, 4vw, 56px); align-items: center; } @media (max-width: 940px) { .hero-inner { grid-template-columns: 1fr; } } .hero h1 { margin: 0.35em 0 0; } .hero h1 .line { display: block; overflow: hidden; } .hero-sub { margin-top: 1.15em; max-width: 33ch; } .hero-cta { margin-top: 1.7em; display: flex; gap: 14px; flex-wrap: wrap; } /* hero data viz panel */ .hero-viz { position: relative; aspect-ratio: 1 / 1.02; width: 100%; } .hero-viz svg { width: 100%; height: 100%; overflow: visible; } @media (max-width: 940px) { .hero-viz { max-width: 460px; margin-inline: auto; } } /* hero overview card */ .hero-card { width: 100%; max-width: 298px; margin-left: auto; border: 1px solid var(--line); background: var(--bg-2); } @media (max-width: 940px) { .hero-card { max-width: 440px; margin-inline: auto; } } .hc-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .hc-row { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 12px; padding: 10px 15px; border-bottom: 1px solid var(--line); align-items: baseline; } .hc-row dt { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .hc-row dd { font-size: 0.84rem; color: var(--ink); line-height: 1.3; } .hc-row dd.hl-dd { color: var(--accent-text); } .hc-foot { padding: 16px 18px 18px; color: var(--accent-text); } .hc-foot svg { width: 100%; height: auto; display: block; } /* trust strip */ .trust { margin-top: clamp(36px, 5vw, 68px); position: relative; z-index: 2; } .trust-label { color: var(--ink-faint); } .stat-strip { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } @media (max-width: 720px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } } .stat { padding: 26px 24px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat .num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .stat .num .unit { color: var(--accent-text); } .stat .lbl { margin-top: 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .trust-now { margin-top: 20px; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--accent-text); display: inline-flex; align-items: center; gap: 0.7em; } .trust-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px var(--halo); } /* ============================================================ THESIS / statement ============================================================ */ .statement { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.015em; line-height: 1.22; font-size: clamp(1.7rem, 3.4vw, 3rem); max-width: 22ch; } .statement .em { color: var(--accent-text); } .thesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,80px); align-items: start; } @media (max-width: 860px){ .thesis-grid { grid-template-columns: 1fr; gap: 36px; } } .thesis-points { display: grid; gap: 26px; } .thesis-point { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding-top: 22px; border-top: 1px solid var(--line); } .thesis-point .idx { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent-text); letter-spacing: 0.1em; } .thesis-point h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; margin-bottom: 6px; } .thesis-point p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; } /* ============================================================ SECTION HEADER ============================================================ */ .sec-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,4vw,64px); align-items: end; margin-bottom: clamp(40px,5vw,72px); } .sec-head .sec-meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--ink-faint); white-space: nowrap; padding-top: 8px; } .sec-head .sec-title { max-width: 18ch; } .sec-head p.sec-desc { color: var(--ink-soft); max-width: 46ch; margin-top: 16px; font-size: 1.02rem; } @media (max-width: 760px){ .sec-head { grid-template-columns: 1fr; gap: 14px; } } /* ============================================================ SOLUTIONS (the six) ============================================================ */ .solutions { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); } @media (max-width: 800px){ .solutions { grid-template-columns: 1fr; } } .sol { position: relative; padding: clamp(28px,3vw,44px) clamp(24px,2.6vw,40px) clamp(34px,3vw,48px); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); transition: background 0.4s var(--ease); } .sol:nth-child(2n) { border-right: none; } @media (max-width: 800px){ .sol { border-right: none; } } .sol:hover { background: var(--card); } .sol-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .sol-num { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--accent-text); } .sol-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); padding: 4px 9px; } .sol h3 { font-size: clamp(1.4rem, 2.2vw, 1.95rem); margin-bottom: 14px; line-height: 1.08; } .sol p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.62; max-width: 46ch; } .sol .barline { margin-top: 24px; height: 1px; background: var(--line); position: relative; overflow: hidden; } .sol .barline::after { content:""; position:absolute; inset:0; width:0; background: var(--accent); transition: width 0.6s var(--ease); } .sol:hover .barline::after { width: 100%; } /* ============================================================ PRINCIPLES (data / people / relationships / focus) ============================================================ */ .principles-wrap { background: var(--bg-2); } .principle-row { display: grid; grid-template-columns: 0.9fr 1.4fr 1fr; gap: clamp(20px,3vw,48px); padding-block: clamp(26px,3vw,40px); border-top: 1px solid var(--line); align-items: baseline; transition: padding-left 0.4s var(--ease); } .principle-row:last-child { border-bottom: 1px solid var(--line); } .principle-row:hover { padding-left: 12px; } .principle-row .p-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem,3vw,2.6rem); letter-spacing: -0.01em; } .principle-row .p-name .pi { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-text); vertical-align: top; margin-right: 12px; letter-spacing: 0.1em; } .principle-row .p-desc { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; } .principle-row .p-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } @media (max-width: 820px){ .principle-row { grid-template-columns: 1fr; gap: 10px; } .principle-row .p-tag { display:none; } } /* ============================================================ TRACK RECORD + MARKET MAP ============================================================ */ .track-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(34px,5vw,80px); align-items: start; } @media (max-width: 920px){ .track-grid { grid-template-columns: 1fr; gap: 44px; } } .bignum { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 8vw, 6.4rem); letter-spacing: -0.03em; line-height: 0.95; font-variant-numeric: tabular-nums; } .bignum .unit { color: var(--accent-text); } /* vertical integration chain */ .vint { margin-bottom: clamp(36px,4vw,56px); } .vint-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .vint-cap .vc-note { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-faint); } .vint-rail { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); } @media (max-width: 860px){ .vint-rail { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px){ .vint-rail { grid-template-columns: repeat(2, 1fr); } } .vint-node { position: relative; padding: 18px 16px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-height: 104px; transition: background 0.35s var(--ease); } .vint-node:last-child { border-right: none; } @media (max-width: 860px){ .vint-node:nth-child(3n) { border-right: none; } .vint-node:nth-child(-n+3) { border-bottom: 1px solid var(--line); } } @media (max-width: 520px){ .vint-node { border-right: 1px solid var(--line); } .vint-node:nth-child(2n) { border-right: none; } .vint-node:nth-child(3n) { border-right: 1px solid var(--line); } .vint-node:nth-child(4) { border-right: none; } .vint-node:nth-child(-n+4) { border-bottom: 1px solid var(--line); } } .vint-node .vn-i { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--ink-faint); } .vint-node .vn-l { font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; line-height: 1.2; letter-spacing: -0.01em; margin-top: auto; } .vint-node.is-inhouse { background: var(--halo); } .vint-node.is-inhouse .vn-i { color: var(--accent-text); } .vint-node .vn-badge { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 7px; } .track-list { margin-top: 30px; display: grid; gap: 0; } .track-li { display: grid; grid-template-columns: 92px 1fr; gap: 20px; padding-block: 16px; border-top: 1px solid var(--line); font-size: 0.96rem; color: var(--ink-soft); align-items: baseline; } .track-li:last-child { border-bottom: 1px solid var(--line); } .track-li .tk { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-text); letter-spacing: 0.06em; white-space: nowrap; } /* market map */ .map-panel { position: relative; border: 1px solid var(--line); background: var(--bg-inset); aspect-ratio: 4 / 3.1; overflow: hidden; } .map-panel .map-head { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 14px 16px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); z-index: 3; } .map-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; } .partners { margin-top: 26px; } .partners .pl { display: flex; flex-wrap: wrap; gap: 10px 10px; margin-top: 14px; } .partner-chip { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ink-soft); border: 1px solid var(--line); padding: 8px 13px; transition: all 0.3s var(--ease); } .partner-chip:hover { border-color: var(--accent-text); color: var(--ink); } .hawkhill-now { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); } .hawkhill-now .kicker { color: var(--accent-text); } .hawkhill-now p { margin-top: 10px; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; max-width: 48ch; } /* ============================================================ TEAM ============================================================ */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); } @media (max-width: 880px){ .team-grid { grid-template-columns: 1fr; } } .member { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(26px,2.6vw,38px); display: flex; flex-direction: column; } .member:last-child { border-right: none; } @media (max-width: 880px){ .member { border-right: none; } } .avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--accent-text); border: 1px solid var(--accent-line); background: var(--halo); margin-bottom: 24px; } .member .m-name { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; } .member .m-role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin-top: 8px; } .member .m-exp { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 4px; } .member .m-bio { margin-top: 18px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; } .member .pedigree { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; } .ped { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.05em; color: var(--ink-soft); border: 1px solid var(--line); padding: 5px 9px; } .member .m-more { margin-top: auto; padding-top: 22px; } .bio-toggle { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; align-items: center; gap: 8px; } .bio-toggle .ic { transition: transform 0.3s; } .bio-toggle[aria-expanded="true"] .ic { transform: rotate(45deg); } .bio-full { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); } .bio-full > div { overflow: hidden; } .bio-full.open { grid-template-rows: 1fr; } .bio-full p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.62; margin-top: 16px; } /* backers note */ .backers { margin-top: clamp(40px,5vw,64px); display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,4vw,60px); padding-top: 32px; border-top: 1px solid var(--line); } @media (max-width: 760px){ .backers { grid-template-columns: 1fr; gap: 16px; } } .backers .b-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .backers p { font-size: clamp(1.05rem,1.7vw,1.35rem); line-height: 1.5; font-weight: 300; max-width: 52ch; } /* ============================================================ HPS subsidiary callout ============================================================ */ .hps { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hps-inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px,4vw,64px); align-items: center; } @media (max-width: 820px){ .hps-inner { grid-template-columns: 1fr; gap: 28px; } } .hps .eagle { height: 120px; width: auto; opacity: 0.95; filter: var(--eagle-filter, none); } .hps h3 { font-size: clamp(1.5rem,2.6vw,2.2rem); margin: 10px 0 14px; } .hps p { color: var(--ink-soft); max-width: 50ch; } .hps .hps-cta { margin-top: 22px; } .hps-trusted { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); } .hps-trusted .kicker { display: block; margin-bottom: 9px; } .hps-trusted .hps-trusted-txt { font-size: 0.92rem; color: var(--ink-faint); line-height: 1.5; max-width: 54ch; } /* ============================================================ PERSPECTIVES ============================================================ */ .persp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid var(--line); } @media (max-width: 880px){ .persp-grid { grid-template-columns: 1fr; } } .persp { padding: clamp(26px,2.6vw,38px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; transition: background 0.35s var(--ease); } .persp:last-child { border-right: none; } @media (max-width: 880px){ .persp { border-right: none; } } .persp:hover { background: var(--card); } .persp .p-date { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .persp h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; line-height: 1.18; letter-spacing: -0.01em; } .persp h4 a { color: inherit; transition: color 0.25s; } .persp:hover h4 a { color: var(--accent-text); } .persp .p-ex { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; } .persp .p-read { margin-top: auto; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; gap: 8px; } /* ============================================================ CTA / contact ============================================================ */ .cta { position: relative; overflow: hidden; } .cta-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px,5vw,72px); align-items: center; } @media (max-width: 860px){ .cta-inner { grid-template-columns: 1fr; gap: 36px; } } .cta h2 { font-size: clamp(2.2rem,4.6vw,4rem); } .cta-card { border: 1px solid var(--line); background: var(--bg-2); padding: clamp(26px,3vw,40px); } .cta-card .row { display: grid; gap: 6px; padding-block: 16px; border-top: 1px solid var(--line); } .cta-card .row:first-of-type { border-top: none; } .cta-card .rk { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .cta-card .rv { font-size: 1.02rem; } .cta-card .btn { width: 100%; justify-content: center; margin-top: 22px; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); padding-block: clamp(48px,6vw,80px) 36px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; } @media (max-width: 820px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 520px){ .footer-top { grid-template-columns: 1fr; } } .footer .f-logo { height: 42px; width: 178px; background: var(--logo-src) left center / contain no-repeat; margin-bottom: 18px; } .footer .f-tag { color: var(--ink-soft); font-size: 0.92rem; max-width: 30ch; } .footer h5 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; } .footer ul { display: grid; gap: 11px; } .footer ul a { font-size: 0.92rem; color: var(--ink-soft); transition: color 0.25s; } .footer ul a:hover { color: var(--ink); } .footer-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: clamp(40px,5vw,72px); padding-top: 26px; border-top: 1px solid var(--line); } .footer-bot .fineprint { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-faint); } .f-social { display: flex; align-items: center; gap: 10px; } .f-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-soft); transition: all 0.3s var(--ease); } .f-social a:hover { border-color: var(--accent-text); color: var(--accent-text); transform: translateY(-2px); } .f-social svg { width: 17px; height: 17px; fill: currentColor; } .f-social .f-handle { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-faint); margin-right: 4px; } /* ---------- Hero headline line reveal ---------- */ .hero h1 .line { display: block; overflow: hidden; } .hero h1 .ln-i { display: block; transform: translateY(102%); animation: lineUp 0.9s var(--ease) forwards; } .hero h1 .line:nth-child(1) .ln-i { animation-delay: 0.05s; } .hero h1 .line:nth-child(2) .ln-i { animation-delay: 0.16s; } .hero h1 .line:nth-child(3) .ln-i { animation-delay: 0.27s; } @keyframes lineUp { to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero h1 .ln-i { transform: none; animation: none; } } /* ---------- SVG pulses ---------- */ .viz-pulse { transform-box: fill-box; transform-origin: center; animation: vizPulse 2.6s ease-in-out infinite; } @keyframes vizPulse { 0%,100% { opacity: 0.5; r: 11px; } 50% { opacity: 0.12; r: 15px; } } .map-pulse { transform-box: fill-box; transform-origin: center; animation: mapPulse 3s ease-in-out infinite; } @keyframes mapPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 0.12; } } @media (prefers-reduced-motion: reduce) { .viz-pulse, .map-pulse { animation: none; } } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; } } /* ============================================================ TWEAKS PANEL ============================================================ */ #tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 200; width: 290px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,0.32); font-family: var(--font-body); display: none; } #tweaks.show { display: block; } #tweaks .tw-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: grab; } #tweaks .tw-head .tt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); } #tweaks .tw-x { color: var(--ink-faint); font-size: 1.1rem; line-height: 1; padding: 2px 6px; } #tweaks .tw-x:hover { color: var(--ink); } #tweaks .tw-body { padding: 16px; display: grid; gap: 20px; max-height: 70vh; overflow-y: auto; } .tw-group > .tw-lbl { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 10px; } .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); } .seg button { padding: 9px 6px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-right: 1px solid var(--line); transition: all 0.25s; } .seg button:last-child { border-right: none; } .seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } .seg.col { grid-auto-flow: row; } .seg.col button { border-right: none; border-bottom: 1px solid var(--line); text-align: left; } .seg.col button:last-child { border-bottom: none; } .swatches { display: flex; gap: 10px; } .swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; outline: 1px solid var(--line); transition: transform 0.2s; } .swatch[aria-pressed="true"] { border-color: var(--ink); transform: scale(1.08); } .tw-toggle { display: flex; align-items: center; justify-content: space-between; } .tw-toggle .switch { width: 42px; height: 24px; border-radius: 20px; background: var(--bg-3); border: 1px solid var(--line); position: relative; transition: background 0.3s; } .tw-toggle .switch::after { content:""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-soft); transition: transform 0.3s, background 0.3s; } .tw-toggle[aria-pressed="true"] .switch { background: var(--accent); } .tw-toggle[aria-pressed="true"] .switch::after { transform: translateX(18px); background: var(--on-accent); } .tw-toggle .tlbl { font-size: 0.86rem; }