forked from NDR-DH/DHsite
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
304 lines (280 loc) · 21.6 KB
/
index.html
File metadata and controls
304 lines (280 loc) · 21.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dawson House</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--deep-slate: #2F3235; --warm-white: #F6F4F1; --charcoal: #1F1F1F;
--soft-slate: #3E4A59; --deep-teal: #335D63; --soft-teal: #2B4F55;
--mist-teal: #8EA2B0; --greige: #CFC7BA; --light-grey: #D9DADA; --brass: #A38F6D;
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'DM Sans', sans-serif;
}
html { scroll-behavior: smooth; }
body { background: var(--warm-white); color: var(--deep-slate); font-family: var(--font-body); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; }
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 28px 56px; background: var(--warm-white); border-bottom: 1px solid transparent; transition: border-color 0.4s, background 0.4s; }
nav.scrolled { border-color: var(--light-grey); background: rgba(246,244,241,0.96); backdrop-filter: blur(12px); }
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-logo svg { width: 24px; height: auto; }
.nav-wordmark { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep-slate); }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a { font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep-slate); text-decoration: none; opacity: 0.6; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 1; }
.nav-links .nav-contact { opacity: 1; color: var(--deep-teal); }
/* HERO */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 56px 88px; position: relative; overflow: hidden; }
.hero-bg-mark { position: absolute; top: 50%; right: -60px; transform: translateY(-56%); width: 44vw; max-width: 680px; opacity: 0.028; pointer-events: none; }
.hero-content { max-width: 780px; animation: fadeUp 1s cubic-bezier(0.65,0,0.35,1) 0.2s both; position: relative; }
.hero h1 { font-family: var(--font-display); font-size: clamp(48px, 6.5vw, 92px); font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; color: var(--charcoal); margin-bottom: 32px; }
.hero-sub { font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--soft-slate); max-width: 520px; margin-bottom: 52px; }
.hero-prompt { display: flex; align-items: center; gap: 18px; font-family: var(--font-display); font-size: 19px; font-style: italic; font-weight: 300; color: var(--deep-slate); opacity: 0.5; user-select: none; }
.hero-prompt-line { width: 36px; height: 1px; background: var(--brass); flex-shrink: 0; }
/* DIAGNOSTIC */
.diagnostic { padding: 80px 56px 0; max-width: 740px; }
.diagnostic p { font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--soft-slate); margin-bottom: 20px; }
.diagnostic p:last-child { margin-bottom: 0; }
/* STAGE 1 — PROBLEM TYPE */
.decision { padding: 56px 56px 120px; }
.decision-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.decision-prompt { font-family: var(--font-display); font-size: 13px; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: var(--greige); }
.decision-note { font-size: 12px; font-weight: 300; color: var(--soft-slate); opacity: 0.65; font-style: italic; }
.decision-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--light-grey); }
.decision-card { display: block; padding: 52px 40px 48px; border-right: 1px solid var(--light-grey); text-decoration: none; color: inherit; position: relative; overflow: hidden; }
.decision-card:last-child { border-right: none; }
.decision-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--deep-teal); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.65,0,0.35,1); }
.decision-card:hover::after { transform: scaleX(1); }
.decision-number { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 300; color: var(--greige); letter-spacing: 0.12em; margin-bottom: 28px; }
.decision-title { font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.2; color: var(--charcoal); margin-bottom: 8px; transition: color 0.3s; }
.decision-card:hover .decision-title { color: var(--deep-teal); }
.decision-subtitle { font-family: var(--font-display); font-size: 15px; font-style: italic; font-weight: 300; color: var(--mist-teal); margin-bottom: 18px; line-height: 1.4; }
.decision-body { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--soft-slate); margin-bottom: 36px; }
.decision-cta { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; }
.decision-card:hover .decision-cta { opacity: 1; transform: translateX(0); }
/* APPROACH */
section { padding: 120px 56px; }
.section-label { font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist-teal); margin-bottom: 56px; display: flex; align-items: center; gap: 18px; }
.section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--mist-teal); flex-shrink: 0; }
.framing { background: var(--deep-slate); color: var(--warm-white); }
.framing .section-label { color: var(--mist-teal); }
.framing .section-label::before { background: var(--mist-teal); }
.framing-intro { max-width: 620px; margin-bottom: 72px; }
.framing-intro p { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 30px); font-weight: 300; line-height: 1.4; color: var(--warm-white); margin-bottom: 12px; }
.framing-pillars { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(246,244,241,0.1); padding-top: 52px; }
.framing-pillar { padding-right: 44px; border-right: 1px solid rgba(246,244,241,0.1); margin-right: 44px; }
.framing-pillar:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.framing-pillar-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); margin-bottom: 16px; }
.framing-pillar-text { font-size: 14px; font-weight: 300; line-height: 1.8; color: rgba(246,244,241,0.6); }
/* LOCAL KNOWLEDGE */
.local { background: var(--warm-white); }
.local-inner { display: grid; grid-template-columns: 320px 1fr; gap: 100px; align-items: start; }
.local-left { position: sticky; top: 120px; }
.local-headline { font-family: var(--font-display); font-size: clamp(36px, 3.5vw, 52px); font-weight: 300; line-height: 1.1; color: var(--charcoal); }
.local-rule { width: 40px; height: 1px; background: var(--brass); margin: 32px 0; }
.local-right p { font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--soft-slate); margin-bottom: 28px; }
.local-right p:last-child { margin-bottom: 0; }
.section-divider { height: 1px; background: var(--light-grey); margin: 0 56px; }
/* COLLECTIVE */
.collective { background: var(--deep-teal); color: var(--warm-white); }
.collective .section-label { color: rgba(246,244,241,0.45); }
.collective .section-label::before { background: rgba(246,244,241,0.3); }
.collective-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.collective-headline { font-family: var(--font-display); font-size: clamp(34px, 3.5vw, 50px); font-weight: 300; line-height: 1.15; color: var(--warm-white); }
.collective-body p { font-size: 16px; font-weight: 300; line-height: 1.85; color: rgba(246,244,241,0.72); margin-bottom: 20px; }
.collective-body p:last-child { margin-bottom: 0; }
.collective-tag { display: inline-block; margin-top: 32px; padding: 9px 18px; border: 1px solid rgba(246,244,241,0.25); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246,244,241,0.5); }
/* CLOSING */
.closing { background: var(--warm-white); text-align: center; padding: 160px 56px; }
.closing h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 76px); font-weight: 300; font-style: italic; line-height: 1.1; color: var(--charcoal); margin-bottom: 56px; max-width: 780px; margin-left: auto; margin-right: auto; }
.closing-ctas { display: flex; align-items: center; justify-content: center; gap: 24px; }
.btn-primary-dark { display: inline-block; padding: 17px 40px; background: var(--deep-teal); color: var(--warm-white); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background 0.3s, transform 0.2s; }
.btn-primary-dark:hover { background: var(--soft-teal); transform: translateY(-1px); }
.btn-secondary { display: inline-block; padding: 16px 40px; border: 1px solid var(--deep-slate); color: var(--deep-slate); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: border-color 0.3s, color 0.3s, transform 0.2s; }
.btn-secondary:hover { border-color: var(--deep-teal); color: var(--deep-teal); transform: translateY(-1px); }
footer { background: var(--charcoal); padding: 44px 56px 36px; }
.footer-main { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.footer-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.footer-logo svg { width: 18px; }
.footer-name { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246,244,241,0.45); }
.footer-links { display: flex; gap: 32px; list-style: none; }
.footer-links a { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(246,244,241,0.35); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: rgba(246,244,241,0.75); }
.footer-copy { font-size: 11px; color: rgba(246,244,241,0.25); }
.footer-compliance { border-top: 1px solid rgba(246,244,241,0.08); padding-top: 20px; }
.footer-compliance p { font-size: 11px; line-height: 1.7; color: rgba(246,244,241,0.22); max-width: 760px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
@media (max-width: 960px) {
nav { padding: 22px 28px; }
.nav-links { gap: 20px; }
.nav-hide { display: none; }
.hero { padding: 0 28px 64px; }
.hero-bg-mark { display: none; }
.diagnostic { padding: 60px 28px 0; }
.decision { padding: 48px 28px 80px; }
.decision-grid { grid-template-columns: 1fr; }
.decision-card { border-right: none; border-bottom: 1px solid var(--light-grey); }
.decision-card:last-child { border-bottom: none; }
section { padding: 80px 28px; }
.framing-pillars { grid-template-columns: 1fr; }
.framing-pillar { border-right: none; margin-right: 0; padding-right: 0; border-bottom: 1px solid rgba(246,244,241,0.1); padding-bottom: 28px; margin-bottom: 28px; }
.framing-pillar:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.local-inner { grid-template-columns: 1fr; gap: 36px; }
.local-left { position: static; }
.collective-inner { grid-template-columns: 1fr; gap: 40px; }
.closing { padding: 100px 28px; }
.closing-ctas { flex-direction: column; gap: 16px; }
footer { padding: 36px 28px 28px; }
.footer-main { flex-direction: column; gap: 24px; text-align: center; }
.footer-links { flex-wrap: wrap; justify-content: center; gap: 20px; }
.section-divider { margin: 0 28px; }
}
</style>
</head>
<body>
<nav id="main-nav">
<a href="index.html" class="nav-logo" aria-label="Dawson House home">
<svg viewBox="0 0 835 1000" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="#2F3235" d="M357.2,21.1H22v957.8h794V480C816,226.5,610.6,21.1,357.2,21.1z M92.3,91.5h264.8c214.2,0,388.5,174.3,388.5,388.5v87H414V308.9h-74.4v599.6H92.3V91.5z M414,908.5V636.5h331.6v272.1H414z"/></svg>
<span class="nav-wordmark">Dawson House</span>
</a>
<ul class="nav-links">
<li class="nav-hide"><a href="about.html">About</a></li>
<li class="nav-hide"><a href="deputy.html">Deputies</a></li>
<li class="nav-hide"><a href="mediation.html">Mediation</a></li>
<li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>
</nav>
<header class="hero">
<svg class="hero-bg-mark" viewBox="0 0 835 1000" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="#2F3235" d="M357.2,21.1H22v957.8h794V480C816,226.5,610.6,21.1,357.2,21.1z M92.3,91.5h264.8c214.2,0,388.5,174.3,388.5,388.5v87H414V308.9h-74.4v599.6H92.3V91.5z M414,908.5V636.5h331.6v272.1H414z"/></svg>
<div class="hero-content">
<h1>The systems are complex.<br>The decisions are consequential.</h1>
<p class="hero-sub">We help people understand and navigate the systems in which those decisions are made.</p>
<p class="hero-prompt"><span class="hero-prompt-line"></span>Tell us what's brought you here ↓</p>
</div>
</header>
<div class="diagnostic reveal">
<p>Most difficulties in these systems are not purely legal problems. They involve overlapping institutions, competing obligations, and constrained resources — frequently experienced by people under considerable pressure.</p>
<p>Before a path forward becomes clear, the situation needs to be understood. That is where we begin.</p>
</div>
<div class="decision">
<div class="decision-heading">
<p class="decision-prompt reveal">How can we help?</p>
<p class="decision-note reveal">Select the kind of problem you are facing — you will then be guided to the route that fits your role in the situation.</p>
</div>
<div class="decision-grid">
<a href="guidance.html" class="decision-card reveal">
<span class="decision-number">01</span>
<h2 class="decision-title">Need guidance</h2>
<p class="decision-subtitle">I need to understand what's happening.</p>
<p class="decision-body">You are navigating a complex system and need to understand how it works, what the rules actually require, and what your realistic options are — before things go further.</p>
<span class="decision-cta">Begin here →</span>
</a>
<a href="dispute.html" class="decision-card reveal reveal-delay-1">
<span class="decision-number">02</span>
<h2 class="decision-title">Facing a dispute</h2>
<p class="decision-subtitle">Something has become a dispute — or is heading that way.</p>
<p class="decision-body">You are facing a conflict — with a public body, a family member, a service provider, or another professional. You may be considering proceedings, or already in them.</p>
<span class="decision-cta">Begin here →</span>
</a>
<a href="mediation.html" class="decision-card reveal reveal-delay-2">
<span class="decision-number">03</span>
<h2 class="decision-title">Looking for mediation</h2>
<p class="decision-subtitle">I am looking for a way to resolve this without litigation.</p>
<p class="decision-body">You are seeking a structured process to resolve a dispute without litigation, or have been directed toward mediation before proceedings can continue.</p>
<span class="decision-cta">Begin here →</span>
</a>
</div>
</div>
<section class="framing">
<p class="section-label reveal">The approach</p>
<div class="framing-intro reveal">
<p>We do not begin with a preferred route. We begin with your situation.</p>
<p>We work in three modes — and move between them.</p>
</div>
<div class="framing-pillars reveal">
<div class="framing-pillar">
<p class="framing-pillar-label">Advisory</p>
<p class="framing-pillar-text">Understanding a system before a dispute forms, or while one is live. We help clients map the legal and institutional landscape: what the rules require, how they are applied in practice, and where the margins lie.<br><br>What happens at this stage often determines everything that follows.</p>
</div>
<div class="framing-pillar">
<p class="framing-pillar-label">Mediation</p>
<p class="framing-pillar-text">Our mediators bring deep knowledge of the regulatory and legal frameworks that govern these systems — the Mental Capacity Act, health and social care commissioning, public law.<br><br>That grounding keeps mediated discussions tethered to what is achievable. It prevents discussions drifting into the theoretical. And it produces durable outcomes.</p>
</div>
<div class="framing-pillar">
<p class="framing-pillar-label">Litigation</p>
<p class="framing-pillar-text">When other approaches are exhausted — or when formal challenge is simply the right course — we pursue it without hesitation.<br><br>We have extensive experience in Court of Protection proceedings, public law and regulatory challenge. We do not litigate as a default. When we do, we do it deliberately and well.</p>
</div>
</div>
</section>
<section class="local">
<p class="section-label reveal">Local knowledge</p>
<div class="local-inner">
<div class="local-left reveal">
<h2 class="local-headline">The gap between rules and how they are applied</h2>
<div class="local-rule"></div>
</div>
<div class="local-right reveal reveal-delay-1">
<p>The gap between what the rules say and how they are applied is where most of the difficulty in these systems lives.</p>
<p>We understand the institutions involved — how decisions are made within them, where discretion sits, and where challenge is realistic.</p>
<p>This is not generic legal knowledge. It is the kind of local, operational understanding that only comes from sustained practice in a specific field.</p>
<p>It is what allows us to advise with accuracy, mediate without losing grip on what is legally possible, and litigate with precision.</p>
<p>It is also what allows us to explain those realities clearly — so clients can make informed decisions about what is worth pursuing, and what is not.</p>
</div>
</div>
</section>
<div class="section-divider"></div>
<section class="collective">
<p class="section-label reveal">The practice</p>
<div class="collective-inner">
<div class="reveal">
<h2 class="collective-headline">Dawson House is a specialist advisory and mediation practice.</h2>
</div>
<div class="collective-body reveal reveal-delay-1">
<p>We are a social enterprise, structured deliberately: to serve the people navigating these systems, and to give the specialists who practice within them the conditions in which careful, rigorous work is possible.</p>
<p>The quality of the work depends on how it is done — and that is not incidental to the model.</p>
<a href="about.html" style="display:inline-block;margin-top:32px;padding:9px 18px;border:1px solid rgba(246,244,241,0.25);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(246,244,241,0.5);text-decoration:none;transition:color 0.2s,border-color 0.2s;" onmouseover="this.style.color='rgba(246,244,241,0.85)';this.style.borderColor='rgba(246,244,241,0.45)'" onmouseout="this.style.color='rgba(246,244,241,0.5)';this.style.borderColor='rgba(246,244,241,0.25)'">About Dawson House</a>
</div>
</div>
</section>
<section class="closing">
<h2 class="reveal">Bring us the problem.<br>We will help you find the way through it.</h2>
<div class="closing-ctas reveal reveal-delay-1">
<a href="contact.html" class="btn-primary-dark">Get in touch →</a>
<a href="about.html" class="btn-secondary">About Dawson House →</a>
</div>
</section>
<footer>
<div class="footer-main">
<a href="index.html" class="footer-logo" aria-label="Dawson House">
<svg viewBox="0 0 835 1000" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="rgba(246,244,241,0.5)" d="M357.2,21.1H22v957.8h794V480C816,226.5,610.6,21.1,357.2,21.1z M92.3,91.5h264.8c214.2,0,388.5,174.3,388.5,388.5v87H414V308.9h-74.4v599.6H92.3V91.5z M414,908.5V636.5h331.6v272.1H414z"/></svg>
<span class="footer-name">Dawson House</span>
</a>
<ul class="footer-links">
<li><a href="about.html">About</a></li>
<li><a href="deputy.html">Deputies</a></li>
<li><a href="mediation.html">Mediation</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<p class="footer-copy">© 2026 Dawson House — dawsonhouse.org.uk</p>
</div>
<div class="footer-compliance">
<p>Dawson House is not a firm of solicitors. Our work encompasses advisory, mediation and consultancy services. Where matters require regulated legal representation, we will say so and can assist in identifying appropriate referrals.</p>
</div>
</footer>
<script>
const nav = document.getElementById('main-nav');
window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 60); }, { passive: true });
const reveals = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); } }); }, { threshold: 0.08, rootMargin: '0px 0px -48px 0px' });
reveals.forEach(el => io.observe(el));
</script>
</body>
</html>