Innova-AI/dictia-public
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor(ui): V3 fully square buttons + inputs (rounded-none, brutalist/Swiss aesthetic)

Browse Source 
V3 finalizes the radii pass to a fully brutalist/Swiss visual language:

- Buttons (CTAs, submit, secondary, ghost, OAuth provider tiles): rounded-none (0px)
- Form inputs (text/email/password/select/textarea/code-entry): rounded-none (0px)
- Checkboxes: rounded-none (0px) — was rounded-sm
- Small icon tiles (w-10 h-10 / w-12 h-12 grad-bg squares): rounded-none (0px)
- Inline code blocks (totp recovery <pre>, secret <code>): rounded-none (0px)
- Cards (pricing, bento, content panels, modals, prev/next nav): rounded (4px) — was rounded-lg
- Alert / flash boxes: rounded (4px) — was rounded-lg
- Pills, badges, status chips, ordres pros avatars, decorative cosmic orbs: rounded-full preserved
- Legal _layout.html inline <style> blockquote/pre/code/draft-callout: border-radius 0 — was 4px

Updated tests/test_marketing_landing_template.py assertions:
- bento icon assertion: "grad-bg rounded " -> "grad-bg rounded-none "
- pricing recommended frame: "rounded-lg" -> "rounded" (with strict trailing-char match to avoid rounded-none false positive)

Verification: 18/18 legal tests pass, 58/58 marketing landing tests pass, 5/5 root redirect tests pass. Two pre-existing failures in test_marketing_secondary_pages (SOC 2 hedge text + gitea.innova-ai.ca URL) are unrelated to this radii pass.
This commit is contained in:
Allison
2026-04-28 10:26:51 -04:00
parent 0b91294c45
commit f83fdfcd68
24 changed files with 133 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
templates/legal/_layout.html
View File

@@ -99,21 +99,21 @@
background-color: rgba(247, 249, 252, 0.6);
padding: 0.75rem 1rem;
margin: 1.25rem 0;
border-radius: 0 4px 4px 0;
border-radius: 0;
font-style: italic;
color: rgba(6, 13, 26, 0.75);
}
.legal-content code {
padding: 0.15rem 0.4rem;
background-color: #f7f9fc;
border-radius: 4px;
border-radius: 0;
font-size: 0.875rem;
font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
}
.legal-content pre {
background-color: #f7f9fc;
border: 1px solid #e6ebf2;
border-radius: 4px;
border-radius: 0;
padding: 1rem;
overflow-x: auto;
margin-bottom: 1.25rem;
@@ -137,7 +137,7 @@
border-left: 4px solid #f59e0b;
padding: 0.75rem 1rem;
margin: 1rem 0 1.5rem;
border-radius: 0 4px 4px 0;
border-radius: 0;
font-size: 0.9rem;
color: #78350f;
}
@@ -199,16 +199,16 @@
{% block content %}
{# Skip link (WCAG 2.4.1) — visible uniquement au focus clavier. #}
<a href="#main-content"
class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-brand-navy focus:text-white focus:rounded focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-brand-navy focus:text-white focus:rounded-none focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
Aller au contenu principal
</a>
{# Breadcrumb sticky #}
<nav class="legal-breadcrumb px-4 py-3" aria-label="Fil d'Ariane">
<ol class="max-w-[1200px] mx-auto flex flex-wrap items-center gap-2 text-xs md:text-sm text-brand-navy/70">
<li><a href="/" class="hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded">Accueil</a></li>
<li><a href="/" class="hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded-none">Accueil</a></li>
<li aria-hidden="true" class="text-brand-navy/40">›</li>
<li><a href="{{ url_for('legal.legal_index') }}" class="hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded">Documents légaux</a></li>
<li><a href="{{ url_for('legal.legal_index') }}" class="hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded-none">Documents légaux</a></li>
<li aria-hidden="true" class="text-brand-navy/40">›</li>
<li class="text-brand-navy font-semibold truncate" aria-current="page">{{ title }}</li>
</ol>
@@ -221,7 +221,7 @@
<article id="main-content"
role="main"
aria-labelledby="legal-title"
class="bg-white p-6 md:p-10 rounded-lg border border-brand-border shadow-cta order-1">
class="bg-white p-6 md:p-10 rounded border border-brand-border shadow-cta order-1">
<header class="mb-8 pb-6 border-b border-brand-border">
<p class="text-xs uppercase tracking-wider text-brand-navy/70 mb-2">Document légal DictIA</p>
<h1 id="legal-title" class="text-3xl md:text-4xl font-black text-brand-navy mb-4 tracking-tight">{{ title }}</h1>
@@ -244,8 +244,8 @@
</header>
{# TOC mobile (collapsible) — visible < lg seulement #}
<details class="lg:hidden mb-6 border border-brand-border rounded-lg bg-brand-bg/50">
<summary class="cursor-pointer px-4 py-3 text-sm font-semibold text-brand-navy flex items-center justify-between focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded-lg">
<details class="lg:hidden mb-6 border border-brand-border rounded bg-brand-bg/50">
<summary class="cursor-pointer px-4 py-3 text-sm font-semibold text-brand-navy flex items-center justify-between focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded">
<span>Sur cette page</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -268,7 +268,7 @@
{% if prev_page %}
<a href="{{ url_for('legal.legal_page', page=prev_page) }}"
rel="prev"
class="block p-4 bg-brand-bg/60 border border-brand-border rounded-lg hover:border-brand-b1 hover:bg-white transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
class="block p-4 bg-brand-bg/60 border border-brand-border rounded hover:border-brand-b1 hover:bg-white transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
<span class="block text-xs uppercase tracking-wider text-brand-navy/60 mb-1">
<span aria-hidden="true">←</span> Précédent
</span>
@@ -281,7 +281,7 @@
{% if next_page %}
<a href="{{ url_for('legal.legal_page', page=next_page) }}"
rel="next"
class="block p-4 bg-brand-bg/60 border border-brand-border rounded-lg hover:border-brand-b1 hover:bg-white transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 sm:text-right">
class="block p-4 bg-brand-bg/60 border border-brand-border rounded hover:border-brand-b1 hover:bg-white transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 sm:text-right">
<span class="block text-xs uppercase tracking-wider text-brand-navy/60 mb-1">
Suivant <span aria-hidden="true">→</span>
</span>
@@ -304,7 +304,7 @@
aria-label="Table des matières">
<div x-data="legalToc()"
x-init="init()"
class="legal-toc bg-white border border-brand-border rounded-lg p-5 mt-0">
class="legal-toc bg-white border border-brand-border rounded p-5 mt-0">
<h2 class="text-xs font-bold uppercase tracking-wider text-brand-navy/70 mb-3">
Sur cette page
</h2>
@@ -314,7 +314,7 @@
<a :href="'#' + item.id"
:class="active === item.id ? 'is-active font-semibold' : ''"
:aria-current="active === item.id ? 'true' : null"
class="block py-1.5 pl-3 pr-2 text-sm text-brand-navy/70 hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded"
class="block py-1.5 pl-3 pr-2 text-sm text-brand-navy/70 hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded-none"
x-text="item.text"></a>
</li>
</template>
@@ -355,7 +355,7 @@
const a = document.createElement('a');
a.href = '#' + it.id;
a.textContent = it.text;
a.className = 'block py-1.5 text-brand-navy/80 hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded';
a.className = 'block py-1.5 text-brand-navy/80 hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded-none';
li.appendChild(a);
mobileList.appendChild(li);
});