diff --git a/i18n/en.yaml b/i18n/en.yaml index 4acb9ea..edddcb7 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -61,10 +61,12 @@ - id: features-grid-footer translation: And we have many other features in preparation... -- id: discover-title +- id: discover-eyebrow translation: "How it works" +- id: discover-title + translation: "Three steps, zero commitment" - id: discover-lead - translation: "A simple approach to efficient domain management." + translation: "Connect a domain and happyDomain starts watching over it. No migration, no configuration, and nothing changes on your side." - id: features-wip-lead translation: "happyDomain is functional but still very much a work in progress: it's a carefully crafted proof of concept that evolves thanks to your feedbacks!" @@ -85,18 +87,115 @@ - id: features-wip-p2-end translation: "." +- id: discover-1-tag + translation: "Connect" +- id: discover-2-tag + translation: "Monitor" +- id: discover-3-tag + translation: "Relax" + +- id: checks-eyebrow + translation: "Monitoring" +- id: checks-title + translation: "Deep checks on everything your domain exposes" +- id: checks-lead + translation: "The moment a domain joins happyDomain, our checkers start inspecting it from the outside, exactly as the rest of the world sees it. From the registration down to each live service, every layer is covered." +- id: checks-domain-tag + translation: "Domain" +- id: checks-domain-title + translation: "Your registration" +- id: checks-domain-text + translation: "Expiration date, transfer lock, registrar status: the administrative side of your domain, watched continuously." +- id: checks-zone-tag + translation: "Zone" +- id: checks-zone-title + translation: "Your DNS zone" +- id: checks-zone-text + translation: "DNSSEC validity, delegation consistency, server response: the technical foundation, verified end to end." +- id: checks-services-tag + translation: "Services" +- id: checks-services-title + translation: "Your live services" +- id: checks-services-text + translation: "Websites, certificates, mail: every service your domain points to, probed like a real visitor would." +- id: checks-item-expiration + translation: "Expiration" +- id: checks-item-expiration-detail + translation: "in 23 days" +- id: checks-item-transferlock + translation: "Transfer lock" +- id: checks-item-registration + translation: "Registration status" +- id: checks-item-dnssec + translation: "DNSSEC chain" +- id: checks-item-delegation + translation: "Delegation" +- id: checks-item-responsetime + translation: "Response time" +- id: checks-item-tls + translation: "TLS certificate" +- id: checks-item-http + translation: "HTTP availability" +- id: checks-item-ping + translation: "Ping" +- id: checks-dangling-tag + translation: "Case study" +- id: checks-dangling-title + translation: "Dangling records: the takeover nobody sees coming" +- id: checks-dangling-text + translation: "When a CNAME, MX, NS or SRV record keeps pointing at a resource you no longer control (a decommissioned SaaS, an expired domain, a mistyped name server), anyone can claim that target and publish content, intercept mail or obtain valid certificates under your name." +- id: checks-dangling-text2 + translation: | + It is not a theoretical risk. The reference study on the topic, presented at ACM CCS 2016, found 467 exploitable dangling records across 277 of the Alexa top 10,000 domains and 52 .edu zones. Since then, top universities have been caught serving porn through forgotten CNAMEs (April 2026), and a typo in one of MasterCard's name servers went unnoticed for nearly five years (January 2025). happyDomain's dangling-records checker walks every pointer in your zone, resolves its target and verifies its registration, so these forgotten records surface before someone else finds them. +- id: checks-dangling-link + translation: "Read about the dangling-records checker" +- id: checks-dangling-caption + translation: "happyDomain's dangling-records check in action: a forgotten CNAME flagged before anyone can claim it." +- id: checks-footer + translation: "Each check reports a clear status, and you're notified the moment one of them changes." +- id: checks-footer-link + translation: "Browse all checkers in the documentation" +- id: checks-more + translation: "+{{ .Count }} more checkers" + +- id: personas-eyebrow + translation: "For everyone" +- id: personas-title + translation: "Made for the way you work" +- id: personas-lead + translation: "One domain or a thousand, deep DNS expertise or none at all: happyDomain meets you where you are. Pick the profile that sounds like you and see what it changes day to day." + - id: discover-1-title - translation: "Connect your accounts" + translation: "Connect your domains" - id: discover-1-text - translation: "Add your access information to the various registrars and DNS hosts." + translation: "Link your registrar, DNS host or authoritative server in a few clicks. Your domains stay exactly where they are: no transfer, no change of ownership." - id: discover-2-title - translation: "Import your domains" + translation: "Get instant health checks" - id: discover-2-text - translation: "Automatically import all your domain names and configurations into happyDomain." + translation: "From the very first minute, happyDomain runs deep checks on every domain: expiration, DNSSEC, certificates, response time and more. Nothing to install, nothing to configure." - id: discover-3-title - translation: "Manage with efficiently" + translation: "Enjoy peace of mind" - id: discover-3-text - translation: "Edit, add and synchronize all your DNS records from a single interface." + translation: "happyDomain notifies you as soon as a problem affects your domain's configuration or any service discoverable through DNS. And when action is needed, guided editing and one-click rollback are there to help." + +- id: discover-assurances-title + translation: "Our promises" +- id: discover-assurance-1-title + translation: "Your data stays at your provider" +- id: discover-assurance-1-text + translation: "happyDomain connects to your existing provider. Nothing is moved, nothing is locked in." +- id: discover-assurance-2-title + translation: "No migration needed" +- id: discover-assurance-2-text + translation: "Bring your domains as they are today, and leave whenever you like." +- id: discover-assurance-3-title + translation: "Your usual console still works" +- id: discover-assurance-3-text + translation: "Keep using your provider's interface alongside happyDomain, with no conflict." +- id: discover-assurance-4-title + translation: "Everything is optional" +- id: discover-assurance-4-text + translation: "Monitoring works out of the box. Use the editor, history and API only if and when you need them." - id: downloads-title translation: | diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 6a3c734..d426d92 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -79,23 +79,122 @@ - id: features-grid-footer translation: Et nous avons encore bien d'autres fonctionnalités en préparation... -- id: discover-title +- id: discover-eyebrow translation: "Comment ça marche" +- id: discover-title + translation: "Trois étapes, zéro engagement" - id: discover-lead - translation: "Une approche simple pour une gestion de domaine efficace." + translation: "Connectez un domaine et happyDomain commence à veiller dessus. Pas de migration, pas de configuration, et rien ne change de votre côté." + +- id: discover-1-tag + translation: "Connexion" +- id: discover-2-tag + translation: "Surveillance" +- id: discover-3-tag + translation: "Profitez" + +- id: checks-eyebrow + translation: "Surveillance" +- id: checks-title + translation: "Des vérifications approfondies sur tout ce que votre domaine expose" +- id: checks-lead + translation: "Dès qu'un domaine rejoint happyDomain, nos testeurs l'inspectent depuis l'extérieur, exactement comme le reste du monde le voit. De l'enregistrement jusqu'à chaque service en ligne, toutes les couches sont couvertes." +- id: checks-domain-tag + translation: "Domaine" +- id: checks-domain-title + translation: "Votre enregistrement" +- id: checks-domain-text + translation: "Date d'expiration, verrou de transfert, statut auprès du registre : le volet administratif de votre domaine, surveillé en continu." +- id: checks-zone-tag + translation: "Zone" +- id: checks-zone-title + translation: "Votre zone DNS" +- id: checks-zone-text + translation: "Validité DNSSEC, cohérence de la délégation, réponse des serveurs : les fondations techniques, vérifiées de bout en bout." +- id: checks-services-tag + translation: "Services" +- id: checks-services-title + translation: "Vos services en ligne" +- id: checks-services-text + translation: "Sites web, certificats, courriel : chaque service vers lequel pointe votre domaine, sondé comme le ferait un vrai visiteur." +- id: checks-item-expiration + translation: "Expiration" +- id: checks-item-expiration-detail + translation: "dans 23 jours" +- id: checks-item-transferlock + translation: "Verrou de transfert" +- id: checks-item-registration + translation: "Statut d'enregistrement" +- id: checks-item-dnssec + translation: "Chaîne DNSSEC" +- id: checks-item-delegation + translation: "Délégation" +- id: checks-item-responsetime + translation: "Temps de réponse" +- id: checks-item-tls + translation: "Certificat TLS" +- id: checks-item-http + translation: "Disponibilité HTTP" +- id: checks-item-ping + translation: "Ping" +- id: checks-dangling-tag + translation: "Étude de cas" +- id: checks-dangling-title + translation: "Enregistrements orphelins : le détournement que personne ne voit venir" +- id: checks-dangling-text + translation: "Quand un enregistrement CNAME, MX, NS ou SRV continue de pointer vers une ressource que vous ne contrôlez plus (un SaaS décommissionné, un domaine expiré, un serveur de noms mal orthographié), n'importe qui peut récupérer cette cible et publier du contenu, intercepter vos mails ou obtenir des certificats valides en votre nom." +- id: checks-dangling-text2 + translation: | + Le risque n'est pas théorique. L'étude de référence sur le sujet, présentée à l'ACM CCS 2016, a recensé 467 enregistrements orphelins exploitables dans 277 domaines du top 10 000 Alexa et 52 zones .edu. Depuis, de grandes universités ont été surprises à servir du porno via des CNAME oubliés (avril 2026), et une faute de frappe dans l'un des serveurs de noms de MasterCard est passée inaperçue pendant près de cinq ans (janvier 2025). Le testeur dangling-records de happyDomain parcourt chaque pointeur de votre zone, résout sa cible et vérifie son enregistrement, pour que ces enregistrements oubliés remontent avant que quelqu'un d'autre ne les trouve. +- id: checks-dangling-link + translation: "Découvrir notre testeur dangling-records" +- id: checks-dangling-caption + translation: "La vérification des enregistrements orphelins de happyDomain en action : un CNAME oublié signalé avant que quelqu'un ne puisse le récupérer." +- id: checks-footer + translation: "Chaque vérification rapporte un statut clair, et vous êtes notifié dès que l'un d'eux change." +- id: checks-footer-link + translation: "Découvrez tous les testeurs dans la documentation" +- id: checks-more + translation: "+{{ .Count }} autres testeurs" + +- id: personas-eyebrow + translation: "Pour tout le monde" +- id: personas-title + translation: "Conçu pour votre façon de travailler" +- id: personas-lead + translation: "Un domaine ou un millier, expert DNS ou débutant : happyDomain s'adapte à votre réalité. Choisissez le profil qui vous ressemble et découvrez ce que ça change au quotidien." - id: discover-1-title - translation: "Connectez vos comptes" + translation: "Connectez vos domaines" - id: discover-1-text - translation: "Ajoutez vos informations d'accès aux différents bureaux d'enregistrement et hébergeurs DNS." + translation: "Reliez votre bureau d'enregistrement, votre hébergeur DNS ou votre serveur faisant autorité en quelques clics. Vos domaines restent exactement là où ils sont : pas de transfert, pas de changement de propriétaire." - id: discover-2-title - translation: "Importez vos domaines" + translation: "Des vérifications immédiates" - id: discover-2-text - translation: "Importez automatiquement tous vos noms de domaine et leurs configurations dans happyDomain." + translation: "Dès la première minute, happyDomain effectue des vérifications approfondies sur chaque domaine : expiration, DNSSEC, certificats, temps de réponse et bien plus. Rien à installer, rien à configurer." - id: discover-3-title - translation: "Gérez efficacement" + translation: "Profitez l'esprit tranquille" - id: discover-3-text - translation: "Modifiez, ajoutez et synchronisez tous vos enregistrements DNS depuis une seule interface." + translation: "happyDomain vous prévient dès qu'un problème touche la configuration de votre domaine ou l'un des services découvrables via le DNS. Et quand il faut agir, l'édition guidée et le retour arrière en un clic sont là pour vous aider." + +- id: discover-assurances-title + translation: "Nos promesses" +- id: discover-assurance-1-title + translation: "Vos données restent chez votre hébergeur" +- id: discover-assurance-1-text + translation: "happyDomain se connecte à votre hébergeur actuel. Rien n'est déplacé, rien n'est verrouillé." +- id: discover-assurance-2-title + translation: "Aucune migration nécessaire" +- id: discover-assurance-2-text + translation: "Amenez vos domaines tels qu'ils sont aujourd'hui, et repartez quand vous voulez." +- id: discover-assurance-3-title + translation: "Votre console habituelle fonctionne toujours" +- id: discover-assurance-3-text + translation: "Continuez d'utiliser l'interface de votre hébergeur en parallèle de happyDomain, sans aucun conflit." +- id: discover-assurance-4-title + translation: "Tout est optionnel" +- id: discover-assurance-4-text + translation: "La surveillance fonctionne immédiatement. Utilisez l'éditeur, l'historique et l'API seulement si vous en avez besoin, quand vous en avez besoin." - id: downloads-title translation: | diff --git a/layouts/index.html b/layouts/index.html index 140e8b0..5dc8b3c 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -15,10 +15,14 @@ {{ partial "carousel.html" . }} + {{ partial "checks.html" . }} + {{ partial "features.html" . }} {{ partial "discover.html" . }} + {{ partial "personas.html" . }} + {{/* partial "testimonials.html" . */}} {{ partial "cta-join.html" . }} diff --git a/layouts/partials/checks.html b/layouts/partials/checks.html new file mode 100644 index 0000000..ad103d7 --- /dev/null +++ b/layouts/partials/checks.html @@ -0,0 +1,136 @@ +
+
+
+ {{ i18n "checks-eyebrow" }} +

{{ i18n "checks-title" }}

+

{{ i18n "checks-lead" }}

+
+ + {{ $base := printf "https://help.happydomain.org/%s/reference/checkers" .Site.Language.Lang }} +
+
+
{{ i18n "checks-domain-tag" }}
+

{{ i18n "checks-domain-title" }}

+

{{ i18n "checks-domain-text" }}

+ +
+
+
{{ i18n "checks-zone-tag" }}
+

{{ i18n "checks-zone-title" }}

+

{{ i18n "checks-zone-text" }}

+ +
+
+
{{ i18n "checks-services-tag" }}
+

{{ i18n "checks-services-title" }}

+

{{ i18n "checks-services-text" }}

+ +
+
+ +
+
+
{{ i18n "checks-dangling-tag" }}
+

{{ i18n "checks-dangling-title" }}

+

{{ i18n "checks-dangling-text" }}

+

{{ i18n "checks-dangling-text2" | safeHTML }}

+ + {{ i18n "checks-dangling-link" }} + + +
+
+ {{ i18n +
{{ i18n "checks-dangling-caption" }}
+
+
+ +

+ {{ i18n "checks-footer" }} + {{ i18n "checks-footer-link" }} +

+
+
diff --git a/layouts/partials/cta-join.html b/layouts/partials/cta-join.html index 85cc31a..36be503 100644 --- a/layouts/partials/cta-join.html +++ b/layouts/partials/cta-join.html @@ -1,24 +1,21 @@
-
+

{{ i18n "cta-account-title" }}

-
-

- {{ i18n "cta-account-text" }} -

+
+

{{ i18n "cta-account-text" }}

{{ i18n "cta-account-button" }} + {{ i18n "cta-account-button" }} +
diff --git a/layouts/partials/discover.html b/layouts/partials/discover.html index 4fee0d6..e94648f 100644 --- a/layouts/partials/discover.html +++ b/layouts/partials/discover.html @@ -1,68 +1,60 @@ -
+
-
-

- {{ i18n "discover-title" }} -

-
-

- {{ i18n "discover-lead" }} -

-
+
+ {{ i18n "discover-eyebrow" }} +

{{ i18n "discover-title" }}

+

{{ i18n "discover-lead" }}

-
-
-
1
+
+
+
1 {{ i18n "discover-1-tag" }}

{{ i18n "discover-1-title" }}

{{ i18n "discover-1-text" }}

-
-
2
+
+
2 {{ i18n "discover-2-tag" }}

{{ i18n "discover-2-title" }}

{{ i18n "discover-2-text" }}

-
-
3
+
+
3 {{ i18n "discover-3-tag" }}

{{ i18n "discover-3-title" }}

{{ i18n "discover-3-text" }}

-

- {{ i18n "learnhow" }} happyDomain {{ i18n "canhelpyou" }} -

-
-
- - {{ i18n -

{{ i18n "freelance" }}

- -
-
- - {{ i18n -

{{ i18n "sysadmin" }}

- -
-
- - {{ i18n -

{{ i18n "devops" }}

- -
-
- - {{ i18n -

{{ i18n "cio" }}

- -
-
- - {{ i18n -

{{ i18n "geek" }}

- -
-
+
    +
  • + +
    + {{ i18n "discover-assurance-1-title" }} +

    {{ i18n "discover-assurance-1-text" }}

    +
    +
    • +
  • + +
    + {{ i18n "discover-assurance-2-title" }} +

    {{ i18n "discover-assurance-2-text" }}

    +
    +
    • +
  • + +
    + {{ i18n "discover-assurance-3-title" }} +

    {{ i18n "discover-assurance-3-text" }}

    +
    +
    • +
  • + +
    + {{ i18n "discover-assurance-4-title" }} +

    {{ i18n "discover-assurance-4-text" }}

    +
    +
    • +
diff --git a/layouts/partials/downloads.html b/layouts/partials/downloads.html index 750b190..71d9c16 100644 --- a/layouts/partials/downloads.html +++ b/layouts/partials/downloads.html @@ -1,5 +1,5 @@ -
-
+
+
-

+

{{ i18n "downloads-title" }} {{ i18n "downloads-subtitle" }}

+
+
+
+ {{ i18n "personas-eyebrow" }} +

{{ i18n "personas-title" }}

+

{{ i18n "personas-lead" }}

+
+ +
+ + + {{ i18n "freelance" }} + + + + {{ i18n "sysadmin" }} + + + + {{ i18n "devops" }} + + + + {{ i18n "cio" }} + + + + {{ i18n "geek" }} + +
+
+
diff --git a/static/css/custom.css b/static/css/custom.css index 3d41426..8b61f05 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -314,70 +314,428 @@ img { max-width: 100%; } -#discover .steps { +/* ── How it works (#discover) ── + Same flat language as the big-idea section: one bordered surface, + columns split by hairlines, mono step tags. */ +#discover .steps-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + border: 1px solid var(--hd-border-1); + border-radius: 12px; + overflow: hidden; + background: var(--hd-bg-canvas); +} + +#discover .step-col { + padding: 28px 28px 24px; +} + +#discover .step-col + .step-col { + border-left: 1px solid var(--hd-border-1); +} + +#discover .step-col h3 { + font-weight: 700; + font-size: 1.125rem; + color: var(--hd-fg-1); + letter-spacing: -0.015em; + margin: 0 0 10px; +} + +#discover .step-col p { + font-size: 0.9375rem; + line-height: 1.6; + color: var(--hd-fg-3); + margin: 0; +} + +#discover .assurances { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px 28px; + margin: 40px 0 0; + padding-top: 32px; + border-top: 1px solid var(--hd-border-1); +} + +#discover .assurance { display: flex; - justify-content: space-between; - flex-wrap: wrap; - margin-top: 60px; - position: relative; + align-items: flex-start; + gap: 10px; } -#discover .steps::before { - content: ""; - position: absolute; - top: 25px; - left: 10%; - width: 80%; - height: 2px; - background: linear-gradient( - to right, - var(--hd-accent) 0%, - var(--hd-brand-dark) 100% - ); - z-index: 1; -} - -#discover .step { - flex-basis: 30%; - text-align: center; - position: relative; - z-index: 2; -} - -#discover .step-number { - background: linear-gradient( - 135deg, - var(--hd-accent) 0%, - var(--hd-brand-dark) 100% - ); - color: white; - width: 50px; - height: 50px; - border-radius: 50%; +#discover .assurance-check { + flex-shrink: 0; display: flex; align-items: center; justify-content: center; - font-size: 24px; - font-weight: bold; - margin: 0 auto 20px; + width: 20px; + height: 20px; + margin-top: 1px; + border-radius: 6px; + background: var(--hd-accent-subtle); + border: 1px solid var(--hd-accent-border); + color: var(--hd-accent); + font-size: 11px; + font-weight: 700; } -#discover .step h3 { - margin-bottom: 15px; - font-size: 22px; +[data-bs-theme="dark"] #discover .assurance-check { + background: var(--hd-accent-muted); } -#discover .step p { +#discover .assurance strong { + display: block; + font-size: 0.875rem; + color: var(--hd-fg-1); + margin-bottom: 3px; +} + +#discover .assurance p { color: var(--hd-fg-3); + font-size: 0.8125rem; + line-height: 1.55; +} + +@media (max-width: 991px) { + #discover .assurances { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + #discover .steps-grid { + grid-template-columns: 1fr; + } + #discover .step-col + .step-col { + border-left: none; + border-top: 1px solid var(--hd-border-1); + } + #discover .assurances { + grid-template-columns: 1fr; + } +} + +/* ── Checks deep-dive (#checks) ── + Three scope columns sharing one bordered surface, each ending with a + mock check-list whose rows echo the .svc rows of the big-idea section. */ +.checks-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + border: 1px solid var(--hd-border-1); + border-radius: 12px; + overflow: hidden; + background: var(--hd-bg-canvas); +} + +.checks-col { + display: flex; + flex-direction: column; + padding: 28px 28px 24px; +} + +.checks-col + .checks-col { + border-left: 1px solid var(--hd-border-1); +} + +.checks-col h3 { + font-weight: 700; + font-size: 1.125rem; + color: var(--hd-fg-1); + letter-spacing: -0.015em; + margin: 0 0 10px; +} + +.checks-col > p { + font-size: 0.9375rem; + line-height: 1.6; + color: var(--hd-fg-3); + margin: 0 0 18px; +} + +.check-list { + margin: auto 0 0; + border: 1px solid var(--hd-border-1); + border-radius: 8px; + background: var(--hd-bg-subtle); + overflow: hidden; +} + +.check-list li + li { + border-top: 1px solid var(--hd-border-1); +} + +.check-list li > a { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 9px 12px; + text-decoration: none; + transition: background 0.15s ease, color 0.15s ease; +} + +.check-list li > a:hover, +.check-list li > a:focus-visible { + background: var(--hd-accent-subtle); +} + +[data-bs-theme="dark"] .check-list li > a:hover, +[data-bs-theme="dark"] .check-list li > a:focus-visible { + background: var(--hd-accent-muted); +} + +.check-name { + font-size: 12.5px; + font-weight: 600; + color: var(--hd-fg-2); +} + +.check-arrow { + font-size: 13px; + font-weight: 700; + color: var(--hd-fg-4, var(--hd-fg-3)); + transform: translateX(-2px); + opacity: 0; + transition: transform 0.15s ease, opacity 0.15s ease; +} + +.check-list li > a:hover .check-name, +.check-list li > a:focus-visible .check-name, +.check-list li > a:hover .check-arrow, +.check-list li > a:focus-visible .check-arrow { + color: var(--hd-accent); +} + +.check-list li > a:hover .check-arrow, +.check-list li > a:focus-visible .check-arrow { + transform: translateX(0); + opacity: 1; +} + +.check-list li.check-more { + background: var(--hd-bg-canvas); +} + +.check-list li.check-more .check-name { + color: var(--hd-accent); + font-weight: 700; +} + +.check-list li.check-more .check-arrow { + color: var(--hd-accent); + opacity: 1; + transform: translateX(0); +} + +/* Dangling-records case study: copy on the left, mock check report on the + right, sharing the same bordered surface language as .checks-grid. */ +.checks-spotlight { + display: grid; + grid-template-columns: 1.15fr 1fr; + gap: 36px; + align-items: center; + margin-top: 24px; + padding: 32px; + border: 1px solid var(--hd-border-1); + border-radius: 12px; + background: var(--hd-bg-canvas); +} + +.idea-tag-danger { + color: var(--hd-danger); +} + +.spotlight-copy h3 { + font-weight: 700; + font-size: 1.25rem; + color: var(--hd-fg-1); + letter-spacing: -0.015em; + margin: 0 0 12px; +} + +.spotlight-copy p { + font-size: 0.9375rem; + line-height: 1.6; + color: var(--hd-fg-3); + margin: 0 0 14px; +} + +.spotlight-sources-label { + font-weight: 700; + color: var(--hd-fg-2); + margin-bottom: 6px; +} + +.spotlight-sources { + margin: 0 0 18px; +} + +.spotlight-sources li { + font-size: 0.875rem; + line-height: 1.7; +} + +.spotlight-sources a { + color: var(--hd-fg-2); + text-decoration: underline; + text-decoration-color: var(--hd-border-3); + text-underline-offset: 3px; +} + +.spotlight-sources a:hover, +.spotlight-sources a:focus-visible { + color: var(--hd-accent); + text-decoration-color: var(--hd-accent); +} + +.spotlight-cta { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 0.9375rem; + font-weight: 600; + color: var(--hd-accent); + text-decoration: none; +} + +.spotlight-cta:hover, +.spotlight-cta:focus-visible { + text-decoration: underline; +} + +.spotlight-demo { + margin: 0; +} + +.spotlight-demo img { + display: block; + width: 100%; + height: auto; + border: 1px solid var(--hd-border-1); + border-radius: 10px; + box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25); +} + +.spotlight-demo figcaption { + margin-top: 10px; + font-size: 0.8125rem; + line-height: 1.5; + color: var(--hd-fg-4); + text-align: center; +} + +@media (max-width: 991px) { + .checks-spotlight { + grid-template-columns: 1fr; + gap: 24px; + padding: 24px; + } +} + +.checks-footer { + margin: 24px 0 0; + font-size: 0.9375rem; + color: var(--hd-fg-3); +} + +.checks-footer a { + color: var(--hd-accent); + font-weight: 600; +} + +@media (max-width: 767px) { + .checks-grid { + grid-template-columns: 1fr; + } + .checks-col + .checks-col { + border-left: none; + border-top: 1px solid var(--hd-border-1); + } +} + +/* ── Personas (#personas) ── */ +.personas-grid { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 16px; +} + +.persona-card { + display: flex; + flex-direction: column; + text-decoration: none; + background: var(--hd-bg-canvas); + border: 1px solid var(--hd-border-1); + border-radius: 12px; + overflow: hidden; + transition: + border-color 0.15s, + transform 0.15s, + box-shadow 0.15s; +} + +.persona-card:hover { + border-color: var(--hd-accent-border); + transform: translateY(-3px); + box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35); +} + +.persona-card img { + display: block; + width: 100%; + height: auto; + aspect-ratio: 4 / 3; + object-fit: cover; +} + +.persona-card .persona-name { + display: flex; + align-items: center; + justify-content: space-between; + padding: 11px 14px; + font-size: 0.875rem; + font-weight: 600; + color: var(--hd-fg-1); + border-top: 1px solid var(--hd-border-1); +} + +.persona-card .persona-name::after { + content: "\2192"; + color: var(--hd-fg-4); + transition: + color 0.15s, + transform 0.15s; +} + +.persona-card:hover .persona-name::after { + color: var(--hd-accent); + transform: translateX(3px); +} + +@media (max-width: 991px) { + .personas-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 575px) { + .personas-grid { + grid-template-columns: repeat(2, 1fr); + } } #cta { padding: 100px 0; - background: linear-gradient( - 135deg, - var(--hd-brand-dark) 0%, - var(--hd-accent) 100% - ); + background: + linear-gradient( + 135deg, + rgba(54, 11, 72, 0.65) 0%, + rgba(28, 180, 135, 0.55) 100% + ), + url("/img/screenshots/home.webp"); + background-size: cover; + background-position: center; color: white; text-align: center; position: relative; diff --git a/static/img/screenshots/dangling-record.webp b/static/img/screenshots/dangling-record.webp new file mode 100644 index 0000000..2079525 Binary files /dev/null and b/static/img/screenshots/dangling-record.webp differ