DHsite/guidance.html at main · magnate/DHsite · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guidance — 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">
<link rel="stylesheet" href="shared.css">
<style>
  .route-wrap { padding: 160px 56px 120px; }
  .route-intro { max-width: 600px; margin-bottom: 64px; }
  .route-intro p { font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--soft-slate); }
  .route-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--light-grey); margin-bottom: 56px; }
  .route-card { display: block; padding: 52px 40px 48px; border-right: 1px solid var(--light-grey); text-decoration: none; color: inherit; position: relative; overflow: hidden; }
  .route-card:last-child { border-right: none; }
  .route-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); }
  .route-card:hover::after { transform: scaleX(1); }
  .route-card-number { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 300; color: var(--greige); letter-spacing: 0.12em; margin-bottom: 28px; }
  .route-card-title { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--charcoal); margin-bottom: 16px; transition: color 0.3s; }
  .route-card:hover .route-card-title { color: var(--deep-teal); }
  .route-card-desc { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--soft-slate); margin-bottom: 36px; }
  .route-card-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; }
  .route-card:hover .route-card-cta { opacity: 1; transform: translateX(0); }
  .route-close { font-size: 14px; font-weight: 300; color: var(--soft-slate); }
  .route-close a { color: var(--deep-teal); text-decoration: none; transition: opacity 0.2s; }
  .route-close a:hover { opacity: 0.7; }
  @media (max-width: 960px) {
    .route-wrap { padding: 120px 28px 80px; }
    .route-grid { grid-template-columns: 1fr; }
    .route-card { border-right: none; border-bottom: 1px solid var(--light-grey); }
    .route-card:last-child { border-bottom: none; }
  }
</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>

<div class="route-wrap">
  <div class="breadcrumb" style="margin-bottom: 48px;">
    <a href="index.html">Home</a>
    <span class="breadcrumb-sep">—</span>
    <span>Guidance</span>
  </div>

  <h1 style="font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 72px); font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; color: var(--charcoal); margin-bottom: 40px; max-width: 700px;">Who are you in this situation?</h1>

  <div class="route-intro">
    <p>Something has happened and you need to understand it — what the relevant framework requires, whether the right process was followed, and what your realistic options are. The guidance we provide differs by role. Choose the route that best reflects your position in the situation.</p>
  </div>

  <div class="route-grid">
    <a href="guidance-individual.html" class="route-card">
      <span class="route-card-number">01</span>
      <h2 class="route-card-title">Individual, family member or carer</h2>
      <p class="route-card-desc">Something has happened and you are not sure what it means or what can be done. You need a clear account of the situation — what the rules require, whether the right process was followed, and what options exist.</p>
      <span class="route-card-cta">Continue →</span>
    </a>
    <a href="guidance-deputy.html" class="route-card">
      <span class="route-card-number">02</span>
      <h2 class="route-card-title">Professional deputy</h2>
      <p class="route-card-desc">You are acting for a person who lacks capacity and need to understand the legal and regulatory framework before deciding how to respond. A clear assessment of the position is the first step.</p>
      <span class="route-card-cta">Continue →</span>
    </a>
    <a href="contact.html" class="route-card">
      <span class="route-card-number">03</span>
      <h2 class="route-card-title">Service provider or organisation</h2>
      <p class="route-card-desc">You are a care provider, organisation or professional body seeking guidance on a decision or situation in this area. Get in touch directly and we will advise on whether and how we can assist.</p>
      <span class="route-card-cta">Get in touch →</span>
    </a>
  </div>

  <p class="route-close">Not sure which route fits? <a href="contact.html">Get in touch</a> and we will help you find the right path.</p>
</div>

<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">&copy; 2026 Dawson House &mdash; 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 });
</script>
</body>
</html>