amadan

oficina / home Public

Merge branch 'theme-calma' into main

Calma in Home: the front page, the door and your home

Home adopts estilo's Calma (estilo decisions-table row 8, 5b2ce83): the
theme and Onest; the suite's seeded sky behind Home's pages and the front
page's hero; the front page redrawn with every link kept and each app in
its own colour; the pages at the door as one card on the sky; your home as
a grid of app tiles, Mail and Files included; Calma icons; Onest credited.

Reviewed by Claude Fable 5.1 (discussion 75): request changes (dark-mode
contrast over the sky, door-page coverage, hop pages) — fixed and
re-measured — then approved.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
claude 5e91b7be0752d81768ec1c9d8f62601a9901bdd5 parent 7b81350parent 9ebbb30
37 files changed, +649 −592
  • Makefile +1 −1
  • go.mod +1 −1
  • go.sum +8 −0
  • internal/home/app.go +1 −0
  • internal/home/brand.go +3 −0
  • internal/home/calma.go +64 −0
  • internal/home/credits/notices.json +11 −0
  • internal/home/credits_inventory_test.go +1 −1
  • internal/home/directory.go +1 −0
  • internal/home/directory_catalog.go +2 −2
  • internal/home/noscript_test.go +14 −11
  • internal/home/origins_test.go +20 −3
  • internal/home/page.go +23 −13
  • internal/home/page_test.go +27 −4
  • internal/home/render.go +9 −1
  • internal/home/static/brand/apple-touch-icon.png binary
  • internal/home/static/brand/brand.css +2 −2
  • internal/home/static/brand/calendar.svg +1 −10
  • internal/home/static/brand/calls.svg +1 −2
  • internal/home/static/brand/docs.svg +1 −5
  • internal/home/static/brand/fichas.svg +1 −0
  • internal/home/static/brand/files.svg +1 −0
  • internal/home/static/brand/icon-32.png binary
  • internal/home/static/brand/icon.svg +1 −3
  • internal/home/static/brand/mail.svg +1 −0
  • internal/home/static/brand/memoria.svg +1 −4
  • internal/home/static/brand/sheets.svg +1 −4
  • internal/home/static/brand/slides.svg +1 −3
  • internal/home/static/calma.css +111 −0
  • internal/home/static/site/archivo-ext.woff2 binary
  • internal/home/static/site/archivo.woff2 binary
  • internal/home/static/site/home.css +177 −387
  • internal/home/static/site/index.html +142 −121
  • internal/home/static/site/newsreader-ext.woff2 binary
  • internal/home/static/site/newsreader.woff2 binary
  • internal/home/templates/directory.html +13 −13
  • internal/home/templates/layout.html +8 −1

CI passed — run details

CI log 
amadan: .amadan/timeout: this job's budget is 15m0s (this runner allows up to 30m0s)
=== vet ===
CGO_ENABLED=0 go vet ./...
cd handoff && CGO_ENABLED=0 go vet ./...
cd roster && CGO_ENABLED=0 go vet ./...
cd connect && CGO_ENABLED=0 go vet ./...
=== fmt ===
=== build ===
CGO_ENABLED=0 go build ./...
CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build ./cmd/home ./cmd/oficina ./internal/operatorlaunch
cd handoff && CGO_ENABLED=0 go build ./...
cd roster && CGO_ENABLED=0 go build ./...
cd connect && CGO_ENABLED=0 go build ./...
=== go-test ===
CGO_ENABLED=0 go test -count=1 ./...
?   	amadan.net/oficina/home/cmd/home	[no test files]
ok  	amadan.net/oficina/home/cmd/home-placeholder	0.480s
?   	amadan.net/oficina/home/cmd/oficina	[no test files]
ok  	amadan.net/oficina/home/internal/guardstest	0.024s
ok  	amadan.net/oficina/home/internal/home	7.676s
ok  	amadan.net/oficina/home/internal/home/directorydata	0.943s
ok  	amadan.net/oficina/home/internal/home/logtest	0.004s
ok  	amadan.net/oficina/home/internal/home/seal	0.005s
ok  	amadan.net/oficina/home/internal/home/sealtest	0.003s
ok  	amadan.net/oficina/home/internal/operator	4.964s
ok  	amadan.net/oficina/home/internal/operatorlaunch	4.140s
ok  	amadan.net/oficina/home/internal/provisioner	35.778s
cd handoff && CGO_ENABLED=0 go test -count=1 ./...
ok  	amadan.net/oficina/home/handoff	0.304s
ok  	amadan.net/oficina/home/handoff/seal	0.002s
cd roster && CGO_ENABLED=0 go test -count=1 ./...
ok  	amadan.net/oficina/home/roster	5.077s
cd connect && CGO_ENABLED=0 go test -count=1 ./...
ok  	amadan.net/oficina/home/connect	0.055s
ok  	amadan.net/oficina/home/connect/linkstore	0.194s
=== race ===
go test -race -count=1 ./internal/home/ ./internal/operator/ ./internal/operatorlaunch/ ./internal/provisioner/ ./internal/home/directorydata/
ok  	amadan.net/oficina/home/internal/home	92.870s
ok  	amadan.net/oficina/home/internal/operator	64.027s
ok  	amadan.net/oficina/home/internal/operatorlaunch	22.301s
ok  	amadan.net/oficina/home/internal/provisioner	267.702s
ok  	amadan.net/oficina/home/internal/home/directorydata	14.848s
cd handoff && CGO_ENABLED=1 go test -race -count=1 ./...
ok  	amadan.net/oficina/home/handoff	8.963s
ok  	amadan.net/oficina/home/handoff/seal	1.008s
cd roster && CGO_ENABLED=1 go test -race -count=1 ./...
ok  	amadan.net/oficina/home/roster	6.558s
cd connect && CGO_ENABLED=1 go test -race -count=1 ./...
ok  	amadan.net/oficina/home/connect	1.641s
ok  	amadan.net/oficina/home/connect/linkstore	3.776s
diff --git a/Makefile b/Makefile
index ab3b822..325fa46 100644
--- a/Makefile
+++ b/Makefile
@@ -116,7 +116,7 @@ credits:
GOOS=$$(go env GOHOSTOS) GOARCH=$$(go env GOHOSTARCH) CGO_ENABLED=0 \
go build -o "$$notices_tmp/notices" amadan.net/oficina/estilo.git/cmd/oficina-notices; \
GOOS=linux GOARCH=arm64 CGO_ENABLED=0 "$$notices_tmp/notices" \
- -package ./cmd/home -lucide \
+ -package ./cmd/home -lucide -onest \
-exclude amadan.net/oficina/estilo.git,amadan.net/oficina/home/handoff,amadan.net/oficina/home/roster \
> "$$notices_tmp/notices.json"; \
mv "$$notices_tmp/notices.json" internal/home/credits/notices.json
diff --git a/go.mod b/go.mod
index 5f720d8..7823eeb 100644
--- a/go.mod
+++ b/go.mod
@@ -5,7 +5,7 @@ go 1.25.0
toolchain go1.26.5
require (
- amadan.net/oficina/estilo.git v0.0.0-20260911182719-0bcb9287988d
+ amadan.net/oficina/estilo.git v0.0.0-20260929070530-5b2ce835e773
amadan.net/oficina/home/handoff v0.0.0-20260908102137-481d2d57f489
amadan.net/oficina/home/roster v0.0.0-20260908123429-74dda570e0cf
amadan.net/rastrillo/rastrillo v0.26.1-0.20260908075707-29e4491631bd
diff --git a/go.sum b/go.sum
index 5ceb83e..c3fdab5 100644
--- a/go.sum
+++ b/go.sum
@@ -2,6 +2,14 @@ amadan.net/carlos/platform.git/launchctx v0.0.0-20260911135504-fb577f96f7d1 h1:R
amadan.net/carlos/platform.git/launchctx v0.0.0-20260911135504-fb577f96f7d1/go.mod h1:6fBmMWgtESLFXZURzu/HyRXM0vyLuo4+XGGdKuZ+wao=
amadan.net/oficina/estilo.git v0.0.0-20260911182719-0bcb9287988d h1:3HsB96tGs+P0tGf2VzqpqA8yqYBhJ+apBh2txAoz9qI=
amadan.net/oficina/estilo.git v0.0.0-20260911182719-0bcb9287988d/go.mod h1:0R45/vCUAT+kpS7S6K/ZxBdE8f7YxFN4HT3HyDJ3nPY=
+amadan.net/oficina/estilo.git v0.0.0-20260929065402-0f830bc12f2c h1:XE8qYLSGKYLN+SNJv+/BMx0rCnHFUJusJcQ0/JLS+IM=
+amadan.net/oficina/estilo.git v0.0.0-20260929065402-0f830bc12f2c/go.mod h1:4u0jNBtIdMLOsJyrScfqoEuYDJF7BBM3qM9YWbzt6aw=
+amadan.net/oficina/estilo.git v0.0.0-20260929065843-683ccd534ead h1:t5QdNWBWWIJonOPdyD6CuwZ64XdahP7j8U+ewlTg1e8=
+amadan.net/oficina/estilo.git v0.0.0-20260929065843-683ccd534ead/go.mod h1:4u0jNBtIdMLOsJyrScfqoEuYDJF7BBM3qM9YWbzt6aw=
+amadan.net/oficina/estilo.git v0.0.0-20260929070257-7a1a376ad2ab h1:ypKDilZG0lxfXyPrEPVPmWFHnDNDsl1NE+IndxiukkY=
+amadan.net/oficina/estilo.git v0.0.0-20260929070257-7a1a376ad2ab/go.mod h1:4u0jNBtIdMLOsJyrScfqoEuYDJF7BBM3qM9YWbzt6aw=
+amadan.net/oficina/estilo.git v0.0.0-20260929070530-5b2ce835e773 h1:9DIAhG3TaGG+LE2+8LvU73ZEhfK+oNn2y2p4kFjAAi0=
+amadan.net/oficina/estilo.git v0.0.0-20260929070530-5b2ce835e773/go.mod h1:4u0jNBtIdMLOsJyrScfqoEuYDJF7BBM3qM9YWbzt6aw=
amadan.net/oficina/home/handoff v0.0.0-20260908102137-481d2d57f489 h1:RPKtyry/71i06o8L+gjAaUyexbmG56kO1YPs601URAM=
amadan.net/oficina/home/handoff v0.0.0-20260908102137-481d2d57f489/go.mod h1:YISpzFJ+iMgrM0rUL032OSzsAQbP4/nozvXLCCOcn1k=
amadan.net/oficina/home/roster v0.0.0-20260908123429-74dda570e0cf h1:SRKjCUgtk42WwR7VSn+V0eLNk20mfiY8dQmzdw13Sbo=
diff --git a/internal/home/app.go b/internal/home/app.go
index 5f9b3e5..ecb12f8 100644
--- a/internal/home/app.go
+++ b/internal/home/app.go
@@ -245,6 +245,7 @@ func (a *App) Router() http.Handler {
r.Get("/static/tokens.css", serveAsset(staticAsset("tokens.css"), "text/css; charset=utf-8"))
r.Get("/static/theme.css", serveAsset(theme.CSS(), "text/css; charset=utf-8"))
mountBrand(r)
+ mountCalma(r)
mountSite(r)
return r
diff --git a/internal/home/brand.go b/internal/home/brand.go
index f065324..7afaeb5 100644
--- a/internal/home/brand.go
+++ b/internal/home/brand.go
@@ -24,6 +24,9 @@ func mountBrand(r chi.Router) {
"calendar.svg": "image/svg+xml",
"calls.svg": "image/svg+xml",
"memoria.svg": "image/svg+xml",
+ "fichas.svg": "image/svg+xml",
+ "mail.svg": "image/svg+xml",
+ "files.svg": "image/svg+xml",
} {
body, err := brandFS.ReadFile("static/brand/" + name)
if err != nil {
diff --git a/internal/home/calma.go b/internal/home/calma.go
new file mode 100644
index 0000000..863c937
--- /dev/null
+++ b/internal/home/calma.go
@@ -0,0 +1,64 @@
+package home
+
+import (
+ _ "embed"
+
+ "amadan.net/oficina/estilo.git/sky"
+ "amadan.net/oficina/estilo.git/theme"
+ "github.com/go-chi/chi/v5"
+)
+
+// Calma is the suite's look (estilo AGENTS.md, decisions table, row 8).
+// Home is where the suite meets you — the front page, the sign-in, your
+// home — so it is where the sky goes; the apps themselves never carry it.
+
+//go:embed static/calma.css
+var calmaCSS []byte
+
+// homeFuncs are the template helpers Home's layout calls. suiteSky is the
+// sky for pages that belong to no one team: all of Home's, today, since
+// the directory lists apps rather than one team's.
+var homeFuncs = map[string]any{
+ "suiteSky": func() sky.View { return sky.For(sky.SuiteSeed) },
+ // Onest's stylesheet, under estilo's versioned prefix.
+ "fontsCSS": func() string { return theme.FontPrefix + "fonts.css" },
+}
+
+// doorPages are the pages at the door — signing in, and everything on the
+// way in or out. The layout draws them as one card on the sky with the
+// Oficina mark, as Calma's sign-in does; every other page keeps the full
+// width (the directory lists apps; credits is a long page of notices).
+// Not assertion.html or docs_continue.html: they are hops, on screen for
+// a moment, so they draw neither the card nor the sky (hopPages).
+var doorPages = map[string]bool{
+ "signin.html": true,
+ "check_your_mail.html": true,
+ "signin_confirm.html": true,
+ "signin_failed.html": true,
+ "passkey_confirm.html": true,
+ "passkey_enrol.html": true,
+ "recovery_codes.html": true,
+ "handoff_failed.html": true,
+ "signout_confirm.html": true,
+ "directory_signed_out.html": true,
+ "docs_chooser.html": true,
+ "docs_empty.html": true,
+ "docs_unavailable.html": true,
+}
+
+// hopPages move on by themselves (an auto-submit, a 0 s refresh): no sky,
+// so the slowest-feeling moment of sign-in fetches nothing it won't show.
+var hopPages = map[string]bool{
+ "assertion.html": true,
+ "docs_continue.html": true,
+}
+
+// mountCalma serves the Calma pieces Home's pages link: Onest, the sky's
+// layers and stylesheet, and Home's own few rules for placing it. Public
+// on both origins; every handler here serves a closed set.
+func mountCalma(r chi.Router) {
+ r.Handle(theme.FontPrefix+"*", theme.FontHandler())
+ r.Handle(sky.Prefix+"*", sky.Handler())
+ r.Get("/static/estilo/sky.css", serveAsset(sky.CSS(), "text/css; charset=utf-8"))
+ r.Get("/static/calma.css", serveAsset(calmaCSS, "text/css; charset=utf-8"))
+}
diff --git a/internal/home/credits/notices.json b/internal/home/credits/notices.json
index 3b82b7f..eefb54c 100644
--- a/internal/home/credits/notices.json
+++ b/internal/home/credits/notices.json
@@ -22,6 +22,17 @@
}
]
},
+ {
+ "Name": "Onest",
+ "Version": "Google Fonts v11",
+ "SourceURL": "https://github.com/googlefonts/onest",
+ "Notices": [
+ {
+ "Name": "OFL.txt",
+ "Text": "Copyright 2021 The Onest Project Authors (https://github.com/googlefonts/onest)\n\nThis Font Software is licensed under the SIL Open Font License, Version 1.1.\nThis license is copied below, and is also available with a FAQ at:\nhttps://scripts.sil.org/OFL\n\n\n-----------------------------------------------------------\nSIL OPEN FONT LICENSE Version 1.1 - 26 February 2007\n-----------------------------------------------------------\n\nPREAMBLE\nThe goals of the Open Font License (OFL) are to stimulate worldwide\ndevelopment of collaborative font projects, to support the font creation\nefforts of academic and linguistic communities, and to provide a free and\nopen framework in which fonts may be shared and improved in partnership\nwith others.\n\nThe OFL allows the licensed fonts to be used, studied, modified and\nredistributed freely as long as they are not sold by themselves. The\nfonts, including any derivative works, can be bundled, embedded, \nredistributed and/or sold with any software provided that any reserved\nnames are not used by derivative works. The fonts and derivatives,\nhowever, cannot be released under any other type of license. The\nrequirement for fonts to remain under this license does not apply\nto any document created using the fonts or their derivatives.\n\nDEFINITIONS\n\"Font Software\" refers to the set of files released by the Copyright\nHolder(s) under this license and clearly marked as such. This may\ninclude source files, build scripts and documentation.\n\n\"Reserved Font Name\" refers to any names specified as such after the\ncopyright statement(s).\n\n\"Original Version\" refers to the collection of Font Software components as\ndistributed by the Copyright Holder(s).\n\n\"Modified Version\" refers to any derivative made by adding to, deleting,\nor substituting -- in part or in whole -- any of the components of the\nOriginal Version, by changing formats or by porting the Font Software to a\nnew environment.\n\n\"Author\" refers to any designer, engineer, programmer, technical\nwriter or other person who contributed to the Font Software.\n\nPERMISSION \u0026 CONDITIONS\nPermission is hereby granted, free of charge, to any person obtaining\na copy of the Font Software, to use, study, copy, merge, embed, modify,\nredistribute, and sell modified and unmodified copies of the Font\nSoftware, subject to the following conditions:\n\n1) Neither the Font Software nor any of its individual components,\nin Original or Modified Versions, may be sold by itself.\n\n2) Original or Modified Versions of the Font Software may be bundled,\nredistributed and/or sold with any software, provided that each copy\ncontains the above copyright notice and this license. These can be\nincluded either as stand-alone text files, human-readable headers or\nin the appropriate machine-readable metadata fields within text or\nbinary files as long as those fields can be easily viewed by the user.\n\n3) No Modified Version of the Font Software may use the Reserved Font\nName(s) unless explicit written permission is granted by the corresponding\nCopyright Holder. This restriction only applies to the primary font name as\npresented to the users.\n\n4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font\nSoftware shall not be used to promote, endorse or advertise any\nModified Version, except to acknowledge the contribution(s) of the\nCopyright Holder(s) and the Author(s) or with their explicit written\npermission.\n\n5) The Font Software, modified or unmodified, in part or in whole,\nmust be distributed entirely under this license, and must not be\ndistributed under any other license. The requirement for fonts to\nremain under this license does not apply to any document created\nusing the Font Software.\n\nTERMINATION\nThis license becomes null and void if any of the above conditions are\nnot met.\n\nDISCLAIMER\nTHE FONT SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT\nOF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE\nCOPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nINCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL\nDAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM\nOTHER DEALINGS IN THE FONT SOFTWARE.\n"
+ }
+ ]
+ },
{
"Name": "amadan.net/carlos/platform.git/launchctx",
"Version": "v0.0.0-20260911135504-fb577f96f7d1",
diff --git a/internal/home/credits_inventory_test.go b/internal/home/credits_inventory_test.go
index 3d5f044..fd7352c 100644
--- a/internal/home/credits_inventory_test.go
+++ b/internal/home/credits_inventory_test.go
@@ -42,7 +42,7 @@ func TestCreditsMatchProductionDependencies(t *testing.T) {
if err != nil {
t.Fatal(err)
}
- inventory.Components = append(inventory.Components, credits.Lucide(), credits.Component{Name: "Go", Version: runtime.Version(), SourceURL: "https://go.dev/LICENSE", Notices: []credits.Notice{{Name: "LICENSE", Text: string(goLicense)}}})
+ inventory.Components = append(inventory.Components, credits.Lucide(), credits.Onest(), credits.Component{Name: "Go", Version: runtime.Version(), SourceURL: "https://go.dev/LICENSE", Notices: []credits.Notice{{Name: "LICENSE", Text: string(goLicense)}}})
sort.Slice(inventory.Components, func(i, j int) bool { return inventory.Components[i].Name < inventory.Components[j].Name })
var embedded creditInventory
if err := json.Unmarshal(creditNotices, &embedded); err != nil {
diff --git a/internal/home/directory.go b/internal/home/directory.go
index fad22de..44d052b 100644
--- a/internal/home/directory.go
+++ b/internal/home/directory.go
@@ -120,6 +120,7 @@ func (a *App) directoryRouter() http.Handler {
r.Get("/static/tokens.css", serveAsset(staticAsset("tokens.css"), "text/css; charset=utf-8"))
r.Get("/static/theme.css", serveAsset(theme.CSS(), "text/css; charset=utf-8"))
mountBrand(r)
+ mountCalma(r)
mountSite(r)
})
return http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
diff --git a/internal/home/directory_catalog.go b/internal/home/directory_catalog.go
index dcee344..d94bec8 100644
--- a/internal/home/directory_catalog.go
+++ b/internal/home/directory_catalog.go
@@ -21,8 +21,8 @@ func directoryCatalog(cfg Runtime) []catalogApp {
{Name: "Calendar", Icon: "/static/brand/calendar.svg", Status: "Not connected to Home yet"},
{Name: "Calls", Icon: "/static/brand/calls.svg", Status: "Coming soon"},
{Name: "Memoria", Icon: "/static/brand/memoria.svg", Status: "Not connected to Home yet"},
- {Name: "Mail", Status: "Separate sign-in"},
- {Name: "Files", Status: "Separate sign-in"},
+ {Name: "Mail", Icon: "/static/brand/mail.svg", Status: "Separate sign-in"},
+ {Name: "Files", Icon: "/static/brand/files.svg", Status: "Separate sign-in"},
}
for i := range apps {
for _, app := range directoryApps() {
diff --git a/internal/home/noscript_test.go b/internal/home/noscript_test.go
index ad0985b..5824568 100644
--- a/internal/home/noscript_test.go
+++ b/internal/home/noscript_test.go
@@ -390,20 +390,23 @@ func TestVendoredAssetsMatchTheLibrary(t *testing.T) {
t.Error("static/tokens.css differs from ui.TokensCSS(); run `rastrillo doctor --fix`")
}
- stripHeader := func(css []byte) []byte {
- if bytes.HasPrefix(css, []byte("/*")) {
- if end := bytes.Index(css, []byte("*/")); end >= 0 {
- return css[end+2:]
- }
- }
- return css
- }
- want, ok := ui.ThemeCSS("day")
+ // The theme is estilo's own now — Calma, not rastrillo's day (estilo
+ // AGENTS.md, decisions table, row 8) — so the check is that Home serves
+ // exactly what its estilo pin ships, below, and that the theme still
+ // declares every token tokens.css uses.
+ day, ok := ui.ThemeCSS("day")
if !ok {
t.Fatal("ui has no day theme")
}
- if !bytes.Equal(stripHeader(theme.CSS()), stripHeader(want)) {
- t.Fatal("Estilo theme differs from selected Rastrillo day")
+ names := regexp.MustCompile(`(?m)^\s*(--rst-[a-z0-9-]+)\s*:`)
+ have := map[string]bool{}
+ for _, m := range names.FindAllSubmatch(theme.CSS(), -1) {
+ have[string(m[1])] = true
+ }
+ for _, m := range names.FindAllSubmatch(day, -1) {
+ if !have[string(m[1])] {
+ t.Errorf("estilo's theme does not declare %s, which tokens.css expects", m[1])
+ }
}
app := newTestApp(t)
for _, host := range []string{directoryHost, credentialHost} {
diff --git a/internal/home/origins_test.go b/internal/home/origins_test.go
index f44d7d2..abae455 100644
--- a/internal/home/origins_test.go
+++ b/internal/home/origins_test.go
@@ -5,19 +5,35 @@ import (
"net/http/httptest"
"testing"
+ "amadan.net/oficina/estilo.git/sky"
+ "amadan.net/oficina/estilo.git/theme"
"github.com/go-chi/chi/v5"
)
// sharedPublicPaths are served on BOTH Home origins: the design tokens, the
-// brand marks, and the front page's stylesheet and fonts. They are listed
+// brand marks, Calma's font and sky, and the front page's stylesheet and fonts. They are listed
// once because two copies of this list would drift, and a route that
// quietly stopped being shared — or quietly started — is exactly what the
// two tests below exist to catch.
var sharedPublicPaths = []string{
"/healthz", "/static/tokens.css", "/static/theme.css",
"/static/brand/icon.svg", "/static/brand/icon-32.png", "/static/brand/apple-touch-icon.png", "/static/brand/brand.css", "/static/brand/LICENSE.lucide", "/static/brand/docs.svg", "/static/brand/sheets.svg", "/static/brand/slides.svg", "/static/brand/calendar.svg", "/static/brand/calls.svg", "/static/brand/memoria.svg",
- "/static/site/home.css", "/static/site/archivo.woff2", "/static/site/archivo-ext.woff2",
- "/static/site/newsreader.woff2", "/static/site/newsreader-ext.woff2",
+ "/static/brand/fichas.svg", "/static/brand/mail.svg", "/static/brand/files.svg",
+ // Calma: Onest, the sky and its stylesheet, and Home's rules for placing it.
+ "/static/estilo/fonts/v1/*", "/static/estilo/sky/v1/*", "/static/estilo/sky.css", "/static/calma.css",
+ "/static/site/home.css", "/static/site/apps.css",
+}
+
+// examplePath is a real file under a wildcard route, so fetching it
+// proves the handler is mounted rather than merely that chi has a pattern.
+func examplePath(route string) string {
+ switch route {
+ case "/static/estilo/fonts/v1/*":
+ return theme.FontPrefix + "onest-latin.woff2"
+ case "/static/estilo/sky/v1/*":
+ return sky.For(sky.SuiteSeed).Layers[0].Src
+ }
+ return route
}
func sharedPublic(route string) bool {
@@ -104,6 +120,7 @@ func TestSharedRoutesOnBothOrigins(t *testing.T) {
app := newTestApp(t)
for _, host := range []string{credentialHost, directoryHost} {
for _, path := range sharedPublicPaths {
+ path = examplePath(path)
req := httptest.NewRequest(http.MethodGet, "https://"+host+path, nil)
rec := httptest.NewRecorder()
app.Router().ServeHTTP(rec, req)
diff --git a/internal/home/page.go b/internal/home/page.go
index c6c8c38..984d5bd 100644
--- a/internal/home/page.go
+++ b/internal/home/page.go
@@ -1,9 +1,11 @@
package home
import (
+ "bytes"
"embed"
"net/http"
+ "amadan.net/oficina/estilo.git/theme"
"github.com/go-chi/chi/v5"
)
@@ -16,10 +18,11 @@ var siteFS embed.FS
// user input to escape — so it is served as bytes, with no template step
// standing between the file and the response.
//
-// It links one stylesheet and four font subsets, all from this origin.
-// SecurityPolicy's `default-src 'self'` already admits them, which is why
-// adding the page needed no change to the policy: fonts fall back to
-// default-src, and the stylesheet is covered by `style-src 'self'`.
+// It is drawn in Calma, the suite's look: estilo's theme and Onest, the
+// sky behind the hero, and each app's own colour from estilo's ring
+// (appsCSS). Everything it links is on this origin; SecurityPolicy's
+// `default-src 'self'` already admits the fonts and pictures, and the
+// stylesheets are covered by `style-src 'self'`.
//
// Everything the page points at has to exist. The app links go to the six
// live app hosts; there is no sign-up form, because there is no route that
@@ -36,19 +39,26 @@ func siteAsset(name string) []byte {
return b
}
+// appsCSS gives each app on the page its own accent: estilo's per-app
+// accent blocks, scoped from :root to [data-app="<slug>"], so a card for
+// Sheets tints green from the same ring the Sheets app itself uses, with
+// no colour copied here to drift.
+var appsCSS = func() []byte {
+ var b bytes.Buffer
+ b.WriteString("/* Each app's accent, from estilo's colour ring (theme.AccentCSS). */\n")
+ for _, a := range theme.Apps() {
+ block, _ := theme.AccentCSS(a.Slug)
+ b.Write(bytes.Replace(block, []byte(":root {"), []byte(`[data-app="`+a.Slug+`"] {`), 1))
+ }
+ return b.Bytes()
+}()
+
// Public on both Home origins, and a closed list for the same reason
// mountBrand keeps one: a request path must never be treated as a file
// name.
func mountSite(r chi.Router) {
- for name, contentType := range map[string]string{
- "home.css": "text/css; charset=utf-8",
- "archivo.woff2": "font/woff2",
- "archivo-ext.woff2": "font/woff2",
- "newsreader.woff2": "font/woff2",
- "newsreader-ext.woff2": "font/woff2",
- } {
- r.Get("/static/site/"+name, serveAsset(siteAsset(name), contentType))
- }
+ r.Get("/static/site/home.css", serveAsset(siteAsset("home.css"), "text/css; charset=utf-8"))
+ r.Get("/static/site/apps.css", serveAsset(appsCSS, "text/css; charset=utf-8"))
}
// handleIndex serves the front page.
diff --git a/internal/home/page_test.go b/internal/home/page_test.go
index f2d9cc3..b79c7f2 100644
--- a/internal/home/page_test.go
+++ b/internal/home/page_test.go
@@ -1,16 +1,39 @@
package home
import (
+ "bytes"
"regexp"
"testing"
+
+ "amadan.net/oficina/estilo.git/sky"
+ "amadan.net/oficina/estilo.git/theme"
)
-// TestFrontPageLineBreaksKeepTheirSpace: home.css hides the hero's <br> on
-// narrow screens, so a <br> glued to words on both sides runs them together
-// there — "Open your newoffice suite." on every phone (polish audit, round
-// 1). Every <br> on the front page needs whitespace on at least one side.
+// TestFrontPageLineBreaksKeepTheirSpace: an earlier hero hid its <br> on
+// narrow screens, so a <br> glued to words on both sides ran them together
+// — "Open your newoffice suite." on every phone (polish audit, round 1).
+// The Calma hero wraps by itself and has no <br>; this stays so the next
+// one to come back keeps whitespace on at least one side.
func TestFrontPageLineBreaksKeepTheirSpace(t *testing.T) {
if glued := regexp.MustCompile(`\S<br\s*/?>\S`).FindAll(indexPage, -1); len(glued) > 0 {
t.Fatalf("front page has <br> with no whitespace beside it: %q", glued)
}
}
+
+// The front page is static bytes, so it names estilo's versioned URLs
+// directly. When estilo moves one (a new sky drawing, a new font file),
+// this fails rather than the page quietly linking files that 404.
+func TestFrontPageLinksEstilosCurrentURLs(t *testing.T) {
+ want := []string{theme.FontPrefix + "fonts.css"}
+ for _, layer := range sky.For(sky.SuiteSeed).Layers {
+ want = append(want, layer.Src)
+ }
+ for _, url := range want {
+ if !bytes.Contains(indexPage, []byte(`"`+url+`"`)) {
+ t.Errorf("front page does not link %s", url)
+ }
+ }
+ if n := bytes.Count(indexPage, []byte(sky.Prefix)); n != len(sky.For(sky.SuiteSeed).Layers) {
+ t.Errorf("front page links %d sky files, want exactly the suite sky's %d", n, len(sky.For(sky.SuiteSeed).Layers))
+ }
+}
diff --git a/internal/home/render.go b/internal/home/render.go
index 4bc9705..6083f10 100644
--- a/internal/home/render.go
+++ b/internal/home/render.go
@@ -10,6 +10,7 @@ import (
"path"
"amadan.net/oficina/estilo.git/credits"
+ "amadan.net/oficina/estilo.git/sky"
"github.com/carlosframework/rastrillo/ui"
)
@@ -49,7 +50,11 @@ func newRenderer() (*renderer, error) {
// ui.Funcs supplies the helpers rastrillo's partials call —
// "T" among them — so the tree must carry them before those
// partials are parsed, not after.
- t, err := template.New(name).Funcs(ui.Funcs()).ParseFS(templatesFS, layoutFile)
+ isDoor, isHop := doorPages[name], hopPages[name]
+ t, err := template.New(name).Funcs(ui.Funcs()).Funcs(homeFuncs).Funcs(template.FuncMap{
+ "door": func() bool { return isDoor },
+ "hop": func() bool { return isHop },
+ }).ParseFS(templatesFS, layoutFile)
if err != nil {
return nil, fmt.Errorf("parse %s: %w", layoutFile, err)
}
@@ -59,6 +64,9 @@ func newRenderer() (*renderer, error) {
if t, err = t.ParseFS(credits.Templates(), "templates/*.html"); err != nil {
return nil, fmt.Errorf("parse credits partials: %w", err)
}
+ if t, err = t.ParseFS(sky.Templates(), "templates/*.html"); err != nil {
+ return nil, fmt.Errorf("parse sky partials: %w", err)
+ }
if t, err = t.ParseFS(templatesFS, f); err != nil {
return nil, fmt.Errorf("parse %s: %w", f, err)
}
diff --git a/internal/home/static/brand/apple-touch-icon.png b/internal/home/static/brand/apple-touch-icon.png
index 97b522c..0b71806 100644
Binary files a/internal/home/static/brand/apple-touch-icon.png and b/internal/home/static/brand/apple-touch-icon.png differ
diff --git a/internal/home/static/brand/brand.css b/internal/home/static/brand/brand.css
index 2e194c6..27e25ad 100644
--- a/internal/home/static/brand/brand.css
+++ b/internal/home/static/brand/brand.css
@@ -1,4 +1,5 @@
-/* Oficina brand artwork. Source: oficina/estilo brand/. */
+/* Oficina brand artwork. Source: oficina/estilo brand/. The icons carry
+ their own squircle and transparent corners, so nothing here rounds them. */
[estilo-brand] {
display: inline-flex;
align-items: center;
@@ -10,7 +11,6 @@
flex-shrink: 0;
inline-size: 1.75rem;
block-size: 1.75rem;
- border-radius: 21%;
vertical-align: middle;
}
[estilo-brand-icon="listing"] {
diff --git a/internal/home/static/brand/calendar.svg b/internal/home/static/brand/calendar.svg
index 97108f8..72c5aca 100644
--- a/internal/home/static/brand/calendar.svg
+++ b/internal/home/static/brand/calendar.svg
@@ -1,10 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" role="img" aria-label="Calendar"><title>Calendar</title><rect x="0" y="0" width="1024" height="1024" rx="0" fill="#CB3F50"/><g transform="translate(153.6 153.6) scale(29.866666666666664)" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v3" />
- <path d="M16 2v3" />
- <rect x="3" y="3" width="18" height="18" rx="2" />
- <path d="M3 9h18" />
- <path d="M8 13h.01" />
- <path d="M12 13h.01" />
- <path d="M16 13h.01" />
- <path d="M8 17h.01" />
- <path d="M12 17h.01" />
- <path d="M16 17h.01" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Calendar"><title>Calendar</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#d46568"/><stop offset="1" stop-color="#bc484f"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="44.9" width="0.88" height="11.0" fill="#feb8b4"/><rect x="5.57" y="37.3" width="0.65" height="17.8" fill="#ffaab0"/><rect x="7.47" y="29.0" width="1.11" height="25.1" fill="#ffc7c7"/><rect x="9.64" y="37.7" width="0.80" height="15.0" fill="#ffb3ad"/><rect x="11.83" y="32.4" width="1.03" height="18.9" fill="#feb9b3"/><rect x="13.88" y="15.4" width="1.15" height="34.4" fill="#ffb2b5"/><rect x="15.13" y="15.2" width="1.05" height="33.8" fill="#ffdbda"/><rect x="16.29" y="21.5" width="0.76" height="26.7" fill="#fed7d5"/><rect x="18.28" y="25.5" width="1.25" height="21.3" fill="#fedbdb"/><rect x="19.97" y="16.0" width="0.86" height="29.7" fill="#fed9d6"/><rect x="22.11" y="16.6" width="1.07" height="27.9" fill="#fed3d2"/><rect x="24.30" y="32.1" width="1.11" height="11.3" fill="#fec1c4"/><rect x="25.55" y="31.1" width="0.73" height="11.7" fill="#fba2a4"/><rect x="27.64" y="17.8" width="0.88" height="24.2" fill="#feb5b8"/><rect x="29.75" y="21.0" width="0.66" height="20.6" fill="#fecaca"/><rect x="31.86" y="26.3" width="0.89" height="15.0" fill="#fededb"/><rect x="33.40" y="15.7" width="0.61" height="25.4" fill="#fca7a3"/><rect x="35.64" y="5.5" width="0.71" height="35.8" fill="#ffd7d7"/><rect x="37.27" y="15.0" width="1.18" height="26.4" fill="#f3aca7"/><rect x="38.76" y="21.5" width="0.98" height="20.2" fill="#fec3c0"/><rect x="40.06" y="17.9" width="0.78" height="24.1" fill="#fed9d9"/><rect x="42.13" y="11.5" width="0.66" height="30.9" fill="#ffdadb"/><rect x="44.15" y="25.3" width="1.01" height="17.6" fill="#feb9bc"/><rect x="46.20" y="32.5" width="0.78" height="11.0" fill="#ffdada"/><rect x="48.18" y="21.5" width="1.03" height="22.5" fill="#ffb0af"/><rect x="50.48" y="21.7" width="0.95" height="22.8" fill="#fec0c3"/><rect x="52.36" y="29.3" width="0.79" height="15.5" fill="#ffd8d6"/><rect x="54.49" y="17.4" width="1.23" height="27.8" fill="#fdb0ac"/><rect x="56.60" y="9.1" width="1.08" height="36.1" fill="#fecacb"/><rect x="58.50" y="21.0" width="0.81" height="24.2" fill="#fed8d5"/><rect x="59.64" y="25.8" width="0.70" height="19.5" fill="#eeaaa8"/><rect x="60.93" y="22.6" width="1.29" height="22.6" fill="#fededf"/><rect x="63.09" y="15.3" width="1.28" height="29.6" fill="#fed8d5"/><rect x="65.21" y="28.9" width="0.90" height="15.7" fill="#f7acaf"/><rect x="67.24" y="33.4" width="0.89" height="11.0" fill="#feb4b6"/><rect x="69.17" y="20.7" width="0.96" height="23.4" fill="#ffd3d4"/><rect x="71.10" y="18.6" width="1.17" height="25.4" fill="#f1b2b3"/><rect x="72.51" y="25.4" width="0.90" height="18.4" fill="#faa4a9"/><rect x="74.50" y="22.6" width="1.15" height="21.2" fill="#f6abab"/><rect x="75.94" y="11.2" width="1.27" height="32.6" fill="#f6aba6"/><rect x="77.15" y="7.0" width="1.07" height="36.9" fill="#fed3d3"/><rect x="79.38" y="20.1" width="1.22" height="24.1" fill="#ffcac5"/><rect x="81.23" y="25.8" width="0.73" height="18.9" fill="#febab7"/><rect x="83.23" y="17.6" width="1.09" height="27.8" fill="#feaaa6"/><rect x="85.24" y="23.9" width="1.09" height="22.4" fill="#feb9bc"/><rect x="86.38" y="33.4" width="0.97" height="13.4" fill="#f1b4af"/><rect x="87.50" y="36.4" width="1.04" height="11.0" fill="#ffdcd9"/><rect x="88.79" y="34.2" width="0.93" height="14.0" fill="#ffbdbd"/><rect x="90.39" y="23.5" width="0.92" height="25.7" fill="#ffc1c4"/><rect x="91.70" y="22.5" width="0.97" height="27.7" fill="#eeaeb2"/><rect x="93.10" y="29.8" width="0.97" height="21.3" fill="#feb4af"/><rect x="94.72" y="33.7" width="0.66" height="18.6" fill="#fed2d3"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><rect x="22" y="26" width="56" height="52" rx="7" fill="#fff"/><path d="M22 33a7 7 0 0 1 7-7h42a7 7 0 0 1 7 7v7H22z" fill="#a4323b"/><g fill="#fff"><rect x="34" y="18" width="5" height="14" rx="2.5"/><rect x="61" y="18" width="5" height="14" rx="2.5"/></g><g fill="#a4323b"><circle cx="36" cy="52" r="3.5"/><circle cx="50" cy="52" r="3.5"/><circle cx="64" cy="52" r="3.5"/><circle cx="36" cy="65" r="3.5"/><circle cx="50" cy="65" r="3.5"/></g></svg>
diff --git a/internal/home/static/brand/calls.svg b/internal/home/static/brand/calls.svg
index a98731d..d3c4db4 100644
--- a/internal/home/static/brand/calls.svg
+++ b/internal/home/static/brand/calls.svg
@@ -1,2 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" role="img" aria-label="Calls"><title>Calls</title><rect x="0" y="0" width="1024" height="1024" rx="0" fill="#087F8C"/><g transform="translate(153.6 153.6) scale(29.866666666666664)" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" />
- <rect x="2" y="6" width="14" height="12" rx="2" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Calls"><title>Calls</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#049cbd"/><stop offset="1" stop-color="#00829e"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="31.6" width="1.17" height="21.9" fill="#7fcee8"/><rect x="5.13" y="21.3" width="1.14" height="31.3" fill="#9ce5fd"/><rect x="6.84" y="18.3" width="0.62" height="33.1" fill="#90e4ff"/><rect x="8.59" y="27.1" width="0.81" height="23.0" fill="#72dbfd"/><rect x="10.07" y="27.1" width="1.10" height="22.1" fill="#76dcfa"/><rect x="12.28" y="14.7" width="1.28" height="33.0" fill="#7adff9"/><rect x="13.44" y="15.8" width="0.72" height="31.3" fill="#9addee"/><rect x="15.08" y="28.1" width="1.01" height="18.1" fill="#8bd2ec"/><rect x="16.62" y="34.5" width="0.67" height="11.0" fill="#b4ebff"/><rect x="17.74" y="30.3" width="1.10" height="14.8" fill="#99daf2"/><rect x="18.98" y="22.1" width="1.15" height="22.5" fill="#89d4f2"/><rect x="20.67" y="20.4" width="0.74" height="23.7" fill="#a6e8ff"/><rect x="22.88" y="30.4" width="0.95" height="13.3" fill="#b2ebff"/><rect x="24.29" y="25.9" width="0.60" height="17.7" fill="#adedff"/><rect x="26.55" y="8.9" width="1.00" height="34.7" fill="#7ed3f3"/><rect x="28.40" y="13.4" width="1.25" height="30.3" fill="#98e7ff"/><rect x="29.69" y="21.4" width="1.29" height="22.3" fill="#9be2fc"/><rect x="30.94" y="22.6" width="0.76" height="21.3" fill="#76dcff"/><rect x="32.41" y="15.5" width="1.16" height="28.7" fill="#a8e6ff"/><rect x="34.24" y="13.7" width="0.95" height="30.7" fill="#9ae1fe"/><rect x="35.92" y="26.7" width="0.77" height="17.9" fill="#7edbfe"/><rect x="37.29" y="33.8" width="1.08" height="11.0" fill="#5fcef2"/><rect x="38.77" y="30.0" width="1.22" height="14.9" fill="#bfecff"/><rect x="40.88" y="19.5" width="0.96" height="25.6" fill="#86d1eb"/><rect x="43.05" y="28.2" width="1.10" height="17.0" fill="#8adffa"/><rect x="45.15" y="26.8" width="0.87" height="18.4" fill="#6fd8f8"/><rect x="46.88" y="12.6" width="1.01" height="32.4" fill="#ace8fe"/><rect x="47.98" y="8.7" width="1.15" height="36.2" fill="#a3e9fe"/><rect x="49.52" y="15.4" width="1.16" height="29.2" fill="#97dcf4"/><rect x="50.97" y="23.6" width="0.98" height="20.8" fill="#88e1fe"/><rect x="53.09" y="17.8" width="1.08" height="26.1" fill="#9addf6"/><rect x="55.28" y="14.3" width="0.64" height="29.0" fill="#b5efff"/><rect x="57.13" y="28.2" width="0.88" height="14.7" fill="#7edbf9"/><rect x="59.43" y="29.3" width="1.00" height="12.9" fill="#c0efff"/><rect x="61.19" y="17.3" width="0.86" height="24.6" fill="#73ddf7"/><rect x="62.68" y="16.8" width="1.16" height="24.9" fill="#a1e5ff"/><rect x="64.56" y="25.2" width="0.98" height="16.2" fill="#88e5ff"/><rect x="66.22" y="20.9" width="1.28" height="20.4" fill="#82e5fe"/><rect x="67.76" y="8.5" width="1.24" height="32.9" fill="#88e6fe"/><rect x="69.71" y="7.4" width="1.23" height="34.2" fill="#8fdbf7"/><rect x="71.24" y="18.3" width="0.71" height="23.4" fill="#aeeaff"/><rect x="72.69" y="22.7" width="1.28" height="19.4" fill="#84d8f5"/><rect x="74.58" y="15.1" width="0.81" height="27.7" fill="#81e1ff"/><rect x="76.77" y="19.3" width="0.73" height="24.4" fill="#7de1fe"/><rect x="78.73" y="33.8" width="0.79" height="11.0" fill="#8dd2ed"/><rect x="80.46" y="32.3" width="0.92" height="13.6" fill="#71d9f5"/><rect x="81.67" y="24.0" width="1.05" height="22.6" fill="#b2e8fe"/><rect x="83.95" y="23.6" width="0.71" height="24.6" fill="#8ce7ff"/><rect x="85.30" y="31.0" width="0.88" height="18.0" fill="#97dbef"/><rect x="87.05" y="29.5" width="1.06" height="20.8" fill="#a3ecfe"/><rect x="88.76" y="17.7" width="0.68" height="33.8" fill="#88defc"/><rect x="90.97" y="20.9" width="0.62" height="32.1" fill="#8ccee5"/><rect x="92.72" y="34.3" width="0.95" height="19.8" fill="#84e6fd"/><rect x="93.83" y="36.0" width="0.99" height="18.7" fill="#7cd0e7"/><rect x="95.31" y="30.1" width="1.01" height="25.4" fill="#91e3ff"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><rect x="33" y="21" width="47" height="33" rx="12" fill="#fff" opacity=".5"/><path d="M26 36h32a12 12 0 0 1 12 12v14a12 12 0 0 1-12 12H40l-12 10v-10a12 12 0 0 1-12-12V48a12 12 0 0 1 12-12z" fill="#fff"/><g fill="#056b83"><rect x="28" y="51" width="5" height="12" rx="2.5"/><rect x="37" y="46" width="5" height="22" rx="2.5"/><rect x="46" y="50" width="5" height="14" rx="2.5"/><rect x="55" y="53" width="5" height="8" rx="2.5"/></g></svg>
diff --git a/internal/home/static/brand/docs.svg b/internal/home/static/brand/docs.svg
index 9b7f4c6..75e0a4f 100644
--- a/internal/home/static/brand/docs.svg
+++ b/internal/home/static/brand/docs.svg
@@ -1,5 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" role="img" aria-label="Docs"><title>Docs</title><rect x="0" y="0" width="1024" height="1024" rx="0" fill="#2563EB"/><g transform="translate(153.6 153.6) scale(29.866666666666664)" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
- <path d="M14 2v5a1 1 0 0 0 1 1h5" />
- <path d="M10 9H8" />
- <path d="M16 13H8" />
- <path d="M16 17H8" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Docs"><title>Docs</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#5c8ae1"/><stop offset="1" stop-color="#4170cb"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="29.3" width="0.66" height="25.1" fill="#d5e3ff"/><rect x="6.12" y="31.1" width="0.88" height="23.1" fill="#c6dcff"/><rect x="7.79" y="21.7" width="0.96" height="32.3" fill="#a8cbfe"/><rect x="8.99" y="21.1" width="0.72" height="32.6" fill="#c1d4fe"/><rect x="11.18" y="37.2" width="1.25" height="16.0" fill="#b9d2fe"/><rect x="12.52" y="41.7" width="1.26" height="11.1" fill="#a0bfff"/><rect x="14.31" y="32.4" width="1.15" height="19.8" fill="#abc8ff"/><rect x="16.50" y="27.7" width="1.02" height="23.5" fill="#d0e0fe"/><rect x="18.25" y="36.0" width="0.76" height="14.3" fill="#bcd6fe"/><rect x="20.22" y="30.9" width="1.04" height="18.4" fill="#c0d5fe"/><rect x="21.74" y="17.1" width="0.77" height="31.2" fill="#d7e6fe"/><rect x="23.46" y="13.1" width="0.65" height="34.2" fill="#d2e3fe"/><rect x="25.33" y="23.0" width="1.17" height="23.2" fill="#a7c9fe"/><rect x="27.60" y="19.4" width="0.64" height="25.2" fill="#a3c2fe"/><rect x="29.54" y="11.2" width="1.13" height="32.3" fill="#afcdf9"/><rect x="31.49" y="22.4" width="1.07" height="20.1" fill="#bfd3fe"/><rect x="33.07" y="30.7" width="0.86" height="11.0" fill="#d7e7fe"/><rect x="34.74" y="25.0" width="1.23" height="16.0" fill="#d4e5ff"/><rect x="36.20" y="15.9" width="0.91" height="24.6" fill="#aecaff"/><rect x="38.14" y="19.1" width="1.22" height="20.8" fill="#bcd1fe"/><rect x="39.62" y="25.4" width="1.01" height="14.3" fill="#9fbffe"/><rect x="40.96" y="21.4" width="0.96" height="18.2" fill="#a2bffb"/><rect x="42.82" y="6.4" width="0.67" height="33.1" fill="#c7dbfe"/><rect x="45.04" y="8.5" width="0.76" height="31.2" fill="#a9c8ff"/><rect x="46.90" y="19.4" width="1.08" height="20.6" fill="#a4c1fb"/><rect x="49.12" y="13.1" width="0.96" height="27.5" fill="#b2cffe"/><rect x="51.29" y="13.2" width="0.82" height="28.1" fill="#9fc1fe"/><rect x="53.25" y="29.4" width="0.85" height="12.7" fill="#aac7fe"/><rect x="54.68" y="31.6" width="0.65" height="11.0" fill="#bdd2ff"/><rect x="55.92" y="25.5" width="1.12" height="17.7" fill="#d6e5fe"/><rect x="58.20" y="18.5" width="1.03" height="25.6" fill="#b5cdfe"/><rect x="59.34" y="24.1" width="0.65" height="20.4" fill="#aecefe"/><rect x="61.07" y="29.5" width="0.62" height="15.7" fill="#cfe0fe"/><rect x="63.29" y="15.2" width="1.29" height="30.7" fill="#abcaff"/><rect x="64.74" y="9.7" width="0.75" height="36.6" fill="#c5dbff"/><rect x="66.94" y="22.5" width="0.91" height="24.3" fill="#c6d8fe"/><rect x="69.15" y="25.6" width="1.24" height="21.6" fill="#aecdfe"/><rect x="70.98" y="17.6" width="0.94" height="29.7" fill="#c1d5ff"/><rect x="72.91" y="25.3" width="0.79" height="22.1" fill="#a2c3fa"/><rect x="75.16" y="36.4" width="1.20" height="11.0" fill="#a8c7fe"/><rect x="76.37" y="33.2" width="1.05" height="14.2" fill="#9ec0fe"/><rect x="77.93" y="22.3" width="1.26" height="25.1" fill="#b6d3fe"/><rect x="79.65" y="22.4" width="0.99" height="24.8" fill="#afc6fd"/><rect x="81.08" y="29.4" width="1.29" height="17.9" fill="#dce7fe"/><rect x="82.64" y="28.0" width="1.12" height="19.2" fill="#d6e3fe"/><rect x="83.93" y="18.2" width="0.65" height="29.1" fill="#a5c7fe"/><rect x="86.14" y="11.7" width="0.71" height="35.7" fill="#d2e3fe"/><rect x="88.11" y="25.4" width="0.79" height="22.2" fill="#9fc1f2"/><rect x="89.90" y="28.3" width="0.64" height="19.7" fill="#c0d7ff"/><rect x="91.43" y="21.3" width="0.77" height="27.1" fill="#b1c8fe"/><rect x="93.60" y="26.0" width="1.15" height="23.1" fill="#c7dbfe"/><rect x="95.21" y="38.7" width="1.29" height="11.1" fill="#b1ccfc"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><path d="M31 18h28l14 14v50H31z" fill="#fff"/><path d="M59 18v14h14" fill="#fff" opacity=".6"/><g fill="#2e5bb4"><rect x="38" y="44" width="28" height="4" rx="2"/><rect x="38" y="54" width="28" height="4" rx="2"/><rect x="38" y="64" width="18" height="4" rx="2"/></g></svg>
diff --git a/internal/home/static/brand/fichas.svg b/internal/home/static/brand/fichas.svg
new file mode 100644
index 0000000..2123615
--- /dev/null
+++ b/internal/home/static/brand/fichas.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Fichas"><title>Fichas</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ab8704"/><stop offset="1" stop-color="#8e7002"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="27.5" width="0.86" height="23.2" fill="#eccd83"/><rect x="6.14" y="38.6" width="0.67" height="11.9" fill="#f0dfa4"/><rect x="7.41" y="36.2" width="0.93" height="14.2" fill="#f8e2a8"/><rect x="9.14" y="21.9" width="0.69" height="28.3" fill="#ffe691"/><rect x="11.42" y="19.0" width="1.06" height="31.3" fill="#e5c682"/><rect x="12.85" y="27.2" width="0.83" height="23.0" fill="#d9c886"/><rect x="14.34" y="28.1" width="1.19" height="22.1" fill="#e1ca85"/><rect x="16.48" y="16.8" width="0.88" height="33.3" fill="#f4da8f"/><rect x="18.73" y="25.3" width="0.79" height="24.7" fill="#dac490"/><rect x="20.04" y="35.7" width="0.95" height="14.1" fill="#ebd5a0"/><rect x="21.22" y="37.8" width="1.03" height="11.8" fill="#d5bc85"/><rect x="23.13" y="27.4" width="0.71" height="21.9" fill="#f1dc93"/><rect x="25.28" y="26.7" width="1.00" height="22.0" fill="#efd999"/><rect x="27.58" y="35.3" width="1.01" height="12.6" fill="#decc87"/><rect x="28.91" y="28.0" width="0.70" height="19.4" fill="#e0c786"/><rect x="30.01" y="17.8" width="1.16" height="29.1" fill="#f2de95"/><rect x="31.41" y="11.3" width="0.70" height="35.0" fill="#eacc83"/><rect x="33.32" y="19.4" width="0.84" height="26.0" fill="#f5d181"/><rect x="35.07" y="23.2" width="1.09" height="21.2" fill="#fad781"/><rect x="36.23" y="17.5" width="1.24" height="26.4" fill="#fde395"/><rect x="38.51" y="11.1" width="1.25" height="31.6" fill="#ffe3a7"/><rect x="40.52" y="25.6" width="0.94" height="16.1" fill="#ffe19a"/><rect x="42.29" y="29.7" width="1.12" height="11.3" fill="#efca78"/><rect x="44.52" y="16.3" width="1.10" height="23.9" fill="#f9dda2"/><rect x="46.45" y="18.2" width="0.90" height="21.4" fill="#e8c875"/><rect x="47.82" y="24.8" width="1.22" height="14.5" fill="#fdda84"/><rect x="49.42" y="21.7" width="0.89" height="17.4" fill="#e9cb7d"/><rect x="50.76" y="10.4" width="0.62" height="28.6" fill="#f1d088"/><rect x="52.92" y="4.7" width="1.16" height="34.4" fill="#e6d59f"/><rect x="54.27" y="13.2" width="1.22" height="26.1" fill="#f6d07a"/><rect x="55.83" y="19.1" width="1.04" height="20.5" fill="#ebd999"/><rect x="58.01" y="10.3" width="0.74" height="29.9" fill="#f6dca2"/><rect x="59.92" y="13.2" width="1.05" height="27.8" fill="#e1c572"/><rect x="61.25" y="24.9" width="0.91" height="16.7" fill="#f2e2aa"/><rect x="62.43" y="31.1" width="0.97" height="11.0" fill="#eed78f"/><rect x="64.36" y="25.8" width="0.70" height="17.3" fill="#fae191"/><rect x="65.79" y="18.6" width="1.00" height="25.3" fill="#f3d794"/><rect x="67.26" y="21.7" width="0.61" height="23.0" fill="#e2cc96"/><rect x="68.93" y="30.4" width="0.97" height="15.2" fill="#ebd19b"/><rect x="70.71" y="25.4" width="0.70" height="21.2" fill="#ffe69e"/><rect x="72.77" y="11.7" width="0.98" height="35.9" fill="#dcc68e"/><rect x="74.65" y="18.4" width="1.18" height="30.0" fill="#dfc890"/><rect x="76.46" y="29.1" width="1.11" height="20.0" fill="#fbe0a5"/><rect x="77.97" y="26.0" width="0.65" height="23.7" fill="#e7c678"/><rect x="79.51" y="19.8" width="1.27" height="30.3" fill="#ebd183"/><rect x="81.08" y="25.4" width="0.69" height="25.1" fill="#f9d78f"/><rect x="82.34" y="36.1" width="0.68" height="14.6" fill="#dfcb89"/><rect x="83.76" y="39.9" width="1.00" height="11.0" fill="#f5db81"/><rect x="85.69" y="30.9" width="1.03" height="20.2" fill="#e4ce96"/><rect x="87.33" y="24.6" width="0.70" height="26.6" fill="#fae0a5"/><rect x="88.77" y="30.1" width="0.74" height="21.1" fill="#d6bd85"/><rect x="90.61" y="34.7" width="0.83" height="16.6" fill="#e0c47b"/><rect x="92.62" y="21.0" width="1.18" height="30.3" fill="#f7e198"/><rect x="94.72" y="16.1" width="0.65" height="35.3" fill="#e3bc68"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><rect x="30" y="22" width="48" height="34" rx="5" fill="#fff" opacity=".5"/><rect x="22" y="32" width="56" height="42" rx="5" fill="#fff"/><rect x="22" y="32" width="56" height="10" rx="5" fill="#765d00" opacity=".3"/><g fill="#765d00"><rect x="30" y="50" width="40" height="4" rx="2"/><rect x="30" y="60" width="28" height="4" rx="2"/></g></svg>
diff --git a/internal/home/static/brand/files.svg b/internal/home/static/brand/files.svg
new file mode 100644
index 0000000..d9b65a1
--- /dev/null
+++ b/internal/home/static/brand/files.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Files"><title>Files</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#01a38f"/><stop offset="1" stop-color="#098777"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="28.2" width="1.07" height="24.5" fill="#b1f5e6"/><rect x="5.44" y="34.0" width="0.67" height="18.7" fill="#abf3e9"/><rect x="6.85" y="29.7" width="0.67" height="22.9" fill="#8befd6"/><rect x="9.10" y="15.8" width="1.00" height="36.8" fill="#96e4d5"/><rect x="10.24" y="18.5" width="1.11" height="34.0" fill="#7ad7c2"/><rect x="11.66" y="29.4" width="0.77" height="22.9" fill="#8ad3c1"/><rect x="12.82" y="35.4" width="0.72" height="16.8" fill="#88f6da"/><rect x="13.93" y="33.7" width="1.23" height="18.3" fill="#79ebd8"/><rect x="16.17" y="24.6" width="0.71" height="26.9" fill="#9bddcc"/><rect x="17.66" y="30.6" width="0.93" height="20.4" fill="#9ef1dc"/><rect x="19.42" y="39.4" width="1.00" height="11.0" fill="#96edd7"/><rect x="20.99" y="35.6" width="0.73" height="14.2" fill="#79f4e4"/><rect x="22.18" y="25.3" width="1.05" height="24.0" fill="#8fd6ca"/><rect x="24.05" y="18.8" width="0.65" height="29.5" fill="#7cd6c5"/><rect x="25.69" y="25.7" width="1.29" height="21.8" fill="#8aebd9"/><rect x="26.86" y="27.1" width="1.17" height="19.7" fill="#76dece"/><rect x="29.10" y="12.8" width="1.01" height="32.7" fill="#a0e8dc"/><rect x="30.29" y="8.3" width="0.62" height="36.5" fill="#8ce9dd"/><rect x="31.90" y="16.1" width="1.02" height="27.8" fill="#6bd7c5"/><rect x="34.13" y="27.4" width="1.30" height="15.3" fill="#6edfc5"/><rect x="36.36" y="17.1" width="0.97" height="24.5" fill="#8cd6c4"/><rect x="37.80" y="16.3" width="1.13" height="24.7" fill="#8ee1ce"/><rect x="39.00" y="23.3" width="1.20" height="17.2" fill="#82d2c6"/><rect x="40.53" y="29.0" width="0.95" height="11.0" fill="#6ce3cf"/><rect x="42.09" y="23.3" width="0.78" height="16.3" fill="#8dddc7"/><rect x="43.44" y="11.9" width="1.20" height="27.5" fill="#8cf2db"/><rect x="44.80" y="8.0" width="1.26" height="31.2" fill="#80efdf"/><rect x="46.08" y="13.4" width="0.67" height="25.8" fill="#95ecd7"/><rect x="47.60" y="18.9" width="0.92" height="20.3" fill="#8ee6cf"/><rect x="49.65" y="9.5" width="0.68" height="30.0" fill="#8af7de"/><rect x="51.91" y="6.2" width="0.61" height="33.8" fill="#9aede0"/><rect x="53.29" y="17.6" width="1.05" height="22.8" fill="#65e0cf"/><rect x="55.22" y="27.0" width="0.93" height="14.1" fill="#73d6c7"/><rect x="57.17" y="18.9" width="0.90" height="23.0" fill="#90f5e5"/><rect x="59.03" y="19.7" width="0.95" height="23.1" fill="#80e7cf"/><rect x="60.47" y="29.6" width="0.61" height="13.9" fill="#7cd1be"/><rect x="62.32" y="31.9" width="0.80" height="12.4" fill="#6fd3bf"/><rect x="64.36" y="16.7" width="0.83" height="28.6" fill="#8cf5e5"/><rect x="65.47" y="13.2" width="0.72" height="32.6" fill="#a0eddb"/><rect x="67.27" y="21.1" width="0.83" height="25.4" fill="#8fe5d0"/><rect x="69.42" y="24.6" width="0.70" height="22.6" fill="#91dac6"/><rect x="70.65" y="17.5" width="0.94" height="30.1" fill="#a3f5e2"/><rect x="72.80" y="15.1" width="1.18" height="33.0" fill="#8ae4d4"/><rect x="74.26" y="27.0" width="0.77" height="21.4" fill="#7cefdf"/><rect x="75.66" y="35.5" width="0.67" height="13.1" fill="#8bfce6"/><rect x="77.23" y="31.5" width="0.81" height="17.2" fill="#94ffe9"/><rect x="79.18" y="23.8" width="1.27" height="25.1" fill="#83e0ce"/><rect x="80.95" y="31.7" width="0.74" height="17.2" fill="#7ff0da"/><rect x="82.44" y="37.7" width="1.19" height="11.2" fill="#90e7d4"/><rect x="83.69" y="32.7" width="1.08" height="16.2" fill="#69dcc7"/><rect x="85.16" y="20.2" width="1.00" height="28.8" fill="#89e0cc"/><rect x="86.89" y="16.0" width="1.03" height="33.0" fill="#6ad5c3"/><rect x="88.00" y="21.7" width="0.81" height="27.3" fill="#84e2ce"/><rect x="89.38" y="27.9" width="1.01" height="21.2" fill="#91f3e6"/><rect x="90.97" y="23.5" width="0.71" height="25.7" fill="#7cdfca"/><rect x="92.67" y="15.3" width="1.20" height="34.1" fill="#6eddc8"/><rect x="94.51" y="23.4" width="0.82" height="26.3" fill="#9ae7dc"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><path d="M20 34a6 6 0 0 1 6-6h14l6 6h28a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H26a6 6 0 0 1-6-6z" fill="#fff"/><path d="M20 44h60" stroke="#047062" stroke-width="3" opacity=".35"/></svg>
diff --git a/internal/home/static/brand/icon-32.png b/internal/home/static/brand/icon-32.png
index bbfaca7..91203c1 100644
Binary files a/internal/home/static/brand/icon-32.png and b/internal/home/static/brand/icon-32.png differ
diff --git a/internal/home/static/brand/icon.svg b/internal/home/static/brand/icon.svg
index f30e545..7cb7482 100644
--- a/internal/home/static/brand/icon.svg
+++ b/internal/home/static/brand/icon.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" role="img" aria-label="Oficina"><title>Oficina</title><rect x="0" y="0" width="1024" height="1024" rx="0" fill="#303642"/><g transform="translate(153.6 153.6) scale(29.866666666666664)" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" />
- <path d="M3 9h18" />
- <path d="M9 21V9" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Oficina"><title>Oficina</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><radialGradient id="c"><stop offset="0" stop-color="#fff" stop-opacity=".24"/><stop offset=".6" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="l" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".18"/><stop offset=".5" stop-color="#fff" stop-opacity="0"/></linearGradient><filter id="b" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="3"/></filter></defs><g clip-path="url(#s)"><g filter="url(#b)"><path d="M4 104L-34.71 -51.25L-32.31 -51.83Z" fill="#ae8a09"/><path d="M4 104L-32.48 -51.79L-30.07 -52.33Z" fill="#ab8c01"/><path d="M4 104L-30.25 -52.29L-27.83 -52.80Z" fill="#a78e04"/><path d="M4 104L-28.01 -52.76L-25.59 -53.24Z" fill="#a39009"/><path d="M4 104L-25.77 -53.21L-23.34 -53.65Z" fill="#9f9107"/><path d="M4 104L-23.52 -53.62L-21.08 -54.02Z" fill="#9b9306"/><path d="M4 104L-21.26 -53.99L-18.82 -54.36Z" fill="#979508"/><path d="M4 104L-19.00 -54.34L-16.55 -54.67Z" fill="#929703"/><path d="M4 104L-16.73 -54.65L-14.28 -54.95Z" fill="#8d990a"/><path d="M4 104L-14.46 -54.93L-12.00 -55.20Z" fill="#889a17"/><path d="M4 104L-12.18 -55.18L-9.72 -55.41Z" fill="#829c21"/><path d="M4 104L-9.91 -55.39L-7.44 -55.59Z" fill="#7c9d29"/><path d="M4 104L-7.63 -55.58L-5.16 -55.74Z" fill="#769f30"/><path d="M4 104L-5.34 -55.73L-2.87 -55.85Z" fill="#70a037"/><path d="M4 104L-3.06 -55.84L-0.59 -55.93Z" fill="#69a23e"/><path d="M4 104L-0.77 -55.93L1.70 -55.98Z" fill="#62a344"/><path d="M4 104L1.52 -55.98L3.99 -56.00Z" fill="#5ba44a"/><path d="M4 104L3.81 -56.00L6.28 -55.98Z" fill="#54a54f"/><path d="M4 104L6.09 -55.99L8.57 -55.93Z" fill="#4ea654"/><path d="M4 104L8.38 -55.94L10.85 -55.85Z" fill="#47a659"/><path d="M4 104L10.67 -55.86L13.14 -55.74Z" fill="#3fa75d"/><path d="M4 104L12.95 -55.75L15.42 -55.59Z" fill="#36a862"/><path d="M4 104L15.24 -55.60L17.70 -55.41Z" fill="#2ca867"/><path d="M4 104L17.52 -55.43L19.98 -55.20Z" fill="#20a96b"/><path d="M4 104L19.80 -55.22L22.26 -54.96Z" fill="#0ca970"/><path d="M4 104L22.07 -54.98L24.53 -54.68Z" fill="#03a975"/><path d="M4 104L24.35 -54.70L26.79 -54.37Z" fill="#0aa87a"/><path d="M4 104L26.61 -54.39L29.06 -54.03Z" fill="#09a87f"/><path d="M4 104L28.88 -54.05L31.31 -53.65Z" fill="#0ba783"/><path d="M4 104L31.13 -53.68L33.57 -53.24Z" fill="#03a787"/><path d="M4 104L33.39 -53.28L35.81 -52.81Z" fill="#0ba78b"/><path d="M4 104L35.63 -52.84L38.05 -52.33Z" fill="#08a68e"/><path d="M4 104L37.87 -52.37L40.28 -51.83Z" fill="#07a692"/><path d="M4 104L40.11 -51.87L42.51 -51.30Z" fill="#08a695"/><path d="M4 104L42.33 -51.34L44.73 -50.73Z" fill="#0ba598"/><path d="M4 104L44.55 -50.78L46.93 -50.13Z" fill="#02a59b"/><path d="M4 104L46.76 -50.18L49.13 -49.50Z" fill="#09a49e"/><path d="M4 104L48.96 -49.55L51.33 -48.84Z" fill="#03a4a1"/><path d="M4 104L51.15 -48.89L53.51 -48.15Z" fill="#0ea3a4"/><path d="M4 104L53.33 -48.20L55.68 -47.42Z" fill="#0ca3a6"/><path d="M4 104L55.50 -47.48L57.84 -46.67Z" fill="#0ba3a9"/><path d="M4 104L57.66 -46.73L59.99 -45.88Z" fill="#0ca2ac"/><path d="M4 104L59.82 -45.95L62.12 -45.07Z" fill="#00a2af"/><path d="M4 104L61.95 -45.14L64.25 -44.22Z" fill="#04a2b2"/><path d="M4 104L64.08 -44.29L66.36 -43.35Z" fill="#0ba1b4"/><path d="M4 104L66.20 -43.42L68.47 -42.44Z" fill="#04a1b8"/><path d="M4 104L68.30 -42.51L70.55 -41.50Z" fill="#0da0ba"/><path d="M4 104L70.39 -41.58L72.63 -40.53Z" fill="#0a9fbd"/><path d="M4 104L72.46 -40.61L74.69 -39.54Z" fill="#099fc0"/><path d="M4 104L74.52 -39.62L76.73 -38.51Z" fill="#0b9ec3"/><path d="M4 104L76.57 -38.60L78.76 -37.46Z" fill="#039ec7"/><path d="M4 104L78.60 -37.54L80.78 -36.37Z" fill="#0a9dcb"/><path d="M4 104L80.62 -36.46L82.78 -35.26Z" fill="#089ccf"/><path d="M4 104L82.62 -35.35L84.76 -34.12Z" fill="#099bd3"/><path d="M4 104L84.60 -34.21L86.73 -32.95Z" fill="#029ad8"/><path d="M4 104L86.57 -33.05L88.68 -31.76Z" fill="#0099dd"/><path d="M4 104L88.52 -31.85L90.61 -30.53Z" fill="#1a98de"/><path d="M4 104L90.46 -30.63L92.53 -29.28Z" fill="#2897e0"/><path d="M4 104L92.37 -29.38L94.42 -28.00Z" fill="#3295e2"/><path d="M4 104L94.27 -28.10L96.30 -26.69Z" fill="#3b94e3"/><path d="M4 104L96.15 -26.80L98.16 -25.36Z" fill="#4392e4"/><path d="M4 104L98.01 -25.47L100.00 -24.00Z" fill="#4a91e5"/><path d="M4 104L99.86 -24.11L101.82 -22.61Z" fill="#5190e6"/><path d="M4 104L101.68 -22.72L103.62 -21.20Z" fill="#578ee6"/><path d="M4 104L103.48 -21.31L105.40 -19.76Z" fill="#5d8de7"/><path d="M4 104L105.26 -19.88L107.16 -18.30Z" fill="#628be7"/><path d="M4 104L107.02 -18.42L108.90 -16.81Z" fill="#678ae7"/><path d="M4 104L108.76 -16.93L110.62 -15.30Z" fill="#6c88e7"/><path d="M4 104L110.48 -15.42L112.32 -13.76Z" fill="#7187e7"/><path d="M4 104L112.18 -13.89L113.99 -12.20Z" fill="#7686e6"/><path d="M4 104L113.86 -12.33L115.64 -10.62Z" fill="#7a84e6"/><path d="M4 104L115.51 -10.74L117.27 -9.01Z" fill="#7e83e5"/><path d="M4 104L117.14 -9.14L118.87 -7.38Z" fill="#8282e4"/><path d="M4 104L118.74 -7.51L120.45 -5.72Z" fill="#8780e3"/><path d="M4 104L120.33 -5.86L122.01 -4.05Z" fill="#8a7fe2"/><path d="M4 104L121.89 -4.18L123.54 -2.35Z" fill="#8e7ee1"/><path d="M4 104L123.42 -2.48L125.05 -0.63Z" fill="#927cdf"/><path d="M4 104L124.93 -0.76L126.54 1.12Z" fill="#967bde"/><path d="M4 104L126.42 0.98L127.99 2.88Z" fill="#997adc"/><path d="M4 104L127.88 2.74L129.43 4.66Z" fill="#9d78da"/><path d="M4 104L129.31 4.52L130.84 6.47Z" fill="#a077d8"/><path d="M4 104L130.72 6.32L132.22 8.29Z" fill="#a376d6"/><path d="M4 104L132.11 8.14L133.57 10.13Z" fill="#a675d3"/><path d="M4 104L133.47 9.99L134.90 12.00Z" fill="#aa74d1"/><path d="M4 104L134.80 11.85L136.20 13.88Z" fill="#ad73ce"/><path d="M4 104L136.10 13.73L137.48 15.78Z" fill="#af71cc"/><path d="M4 104L137.38 15.63L138.73 17.70Z" fill="#b270c9"/><path d="M4 104L138.63 17.54L139.95 19.63Z" fill="#b56fc6"/><path d="M4 104L139.85 19.48L141.14 21.58Z" fill="#b86ec3"/><path d="M4 104L141.05 21.43L142.31 23.55Z" fill="#ba6dc0"/><path d="M4 104L142.21 23.40L143.44 25.54Z" fill="#bd6cbd"/><path d="M4 104L143.35 25.38L144.55 27.54Z" fill="#bf6cb9"/><path d="M4 104L144.46 27.38L145.63 29.56Z" fill="#c16bb6"/><path d="M4 104L145.54 29.40L146.68 31.59Z" fill="#c36ab3"/><path d="M4 104L146.60 31.43L147.70 33.64Z" fill="#c569af"/><path d="M4 104L147.62 33.48L148.69 35.70Z" fill="#c769ab"/><path d="M4 104L148.61 35.54L149.65 37.78Z" fill="#c968a8"/><path d="M4 104L149.58 37.61L150.59 39.87Z" fill="#cb67a4"/><path d="M4 104L150.51 39.70L151.49 41.97Z" fill="#cd67a1"/><path d="M4 104L151.42 41.80L152.36 44.09Z" fill="#ce669d"/><path d="M4 104L152.29 43.92L153.20 46.22Z" fill="#d06699"/><path d="M4 104L153.14 46.05L154.01 48.36Z" fill="#d16695"/><path d="M4 104L153.95 48.18L154.79 50.51Z" fill="#d26592"/><path d="M4 104L154.73 50.34L155.54 52.67Z" fill="#d3658e"/><path d="M4 104L155.48 52.50L156.26 54.84Z" fill="#d4658a"/><path d="M4 104L156.20 54.67L156.95 57.02Z" fill="#d56586"/><path d="M4 104L156.89 56.85L157.60 59.22Z" fill="#d66582"/><path d="M4 104L157.55 59.04L158.23 61.42Z" fill="#d7657e"/><path d="M4 104L158.18 61.24L158.82 63.63Z" fill="#d8657a"/><path d="M4 104L158.78 63.45L159.38 65.85Z" fill="#d86576"/><path d="M4 104L159.34 65.67L159.91 68.07Z" fill="#d96572"/><path d="M4 104L159.87 67.89L160.41 70.31Z" fill="#d9666e"/><path d="M4 104L160.37 70.13L160.88 72.55Z" fill="#d9666a"/><path d="M4 104L160.84 72.37L161.31 74.79Z" fill="#d96666"/><path d="M4 104L161.28 74.61L161.71 77.05Z" fill="#d96762"/><path d="M4 104L161.68 76.87L162.08 79.30Z" fill="#d9675e"/><path d="M4 104L162.05 79.12L162.42 81.57Z" fill="#d9685a"/><path d="M4 104L162.39 81.39L162.72 83.84Z" fill="#d96956"/><path d="M4 104L162.70 83.65L163.00 86.11Z" fill="#d96952"/><path d="M4 104L162.98 85.93L163.24 88.38Z" fill="#d86a4d"/><path d="M4 104L163.22 88.20L163.44 90.66Z" fill="#d86b49"/><path d="M4 104L163.43 90.48L163.62 92.94Z" fill="#d76c45"/><path d="M4 104L163.60 92.76L163.76 95.23Z" fill="#d66d41"/><path d="M4 104L163.75 95.05L163.87 97.51Z" fill="#d66e3c"/><path d="M4 104L163.86 97.33L163.94 99.80Z" fill="#d56f38"/><path d="M4 104L163.94 99.62L163.99 102.09Z" fill="#d47033"/><path d="M4 104L163.99 101.91L164.00 104.38Z" fill="#d3712e"/><path d="M4 104L164.00 104.19L163.98 106.67Z" fill="#d17329"/><path d="M4 104L163.98 106.48L163.92 108.95Z" fill="#d07424"/><path d="M4 104L163.93 108.77L163.84 111.24Z" fill="#cf751e"/><path d="M4 104L163.84 111.06L163.72 113.52Z" fill="#ce7618"/><path d="M4 104L163.73 113.34L163.56 115.81Z" fill="#cc7810"/><path d="M4 104L163.58 115.63L163.38 118.09Z" fill="#cb7906"/><path d="M4 104L163.39 117.91L163.16 120.37Z" fill="#c87b05"/><path d="M4 104L163.18 120.18L162.91 122.64Z" fill="#c67c04"/><path d="M4 104L162.93 122.46L162.63 124.91Z" fill="#c37e05"/><path d="M4 104L162.65 124.73L162.31 127.18Z" fill="#c18007"/><path d="M4 104L162.34 127.00L161.96 129.44Z" fill="#bf8100"/><path d="M4 104L161.99 129.26L161.58 131.70Z" fill="#bc8204"/><path d="M4 104L161.62 131.52L161.17 133.95Z" fill="#ba8409"/><path d="M4 104L161.21 133.77L160.73 136.19Z" fill="#b88505"/><path d="M4 104L160.76 136.01L160.25 138.43Z" fill="#b58602"/><path d="M4 104L160.29 138.25L159.74 140.66Z" fill="#b38800"/><path d="M4 104L159.79 140.48L159.20 142.89Z" fill="#b08909"/></g><rect width="100" height="100" fill="url(#c)"/><rect width="100" height="100" fill="url(#l)"/></g><rect x="30.62" y="23.78" width="45.60" height="36.48" rx="7.98" fill="#fff" opacity=".55"/><rect x="22.64" y="36.32" width="50.16" height="38.76" rx="7.98" fill="#fff"/></svg>
diff --git a/internal/home/static/brand/mail.svg b/internal/home/static/brand/mail.svg
new file mode 100644
index 0000000..d75b4eb
--- /dev/null
+++ b/internal/home/static/brand/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Mail"><title>Mail</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#c467a4"/><stop offset="1" stop-color="#ad4b8d"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="30.0" width="0.68" height="24.6" fill="#f0b3dd"/><rect x="5.31" y="33.7" width="0.91" height="20.9" fill="#f1a4d2"/><rect x="7.04" y="26.0" width="1.14" height="28.3" fill="#ffcee7"/><rect x="8.65" y="21.6" width="1.06" height="32.4" fill="#febae4"/><rect x="9.83" y="27.9" width="0.88" height="25.8" fill="#f4abd6"/><rect x="11.78" y="41.8" width="0.61" height="11.3" fill="#febee6"/><rect x="13.41" y="38.2" width="0.77" height="14.3" fill="#fab1d7"/><rect x="15.60" y="26.2" width="0.72" height="25.4" fill="#e7afd5"/><rect x="16.96" y="29.6" width="0.98" height="21.3" fill="#f4a3d0"/><rect x="18.70" y="36.0" width="1.25" height="13.9" fill="#ffc3ec"/><rect x="20.10" y="29.9" width="1.11" height="19.2" fill="#fed4eb"/><rect x="21.81" y="14.9" width="1.06" height="33.1" fill="#ecb0da"/><rect x="23.60" y="13.4" width="0.97" height="33.5" fill="#e1afd1"/><rect x="25.82" y="24.8" width="0.61" height="20.8" fill="#f8b7e5"/><rect x="27.92" y="17.3" width="1.13" height="27.0" fill="#eca5d7"/><rect x="29.18" y="12.0" width="0.79" height="31.5" fill="#fcb2e2"/><rect x="31.08" y="20.5" width="1.17" height="21.9" fill="#f5abd9"/><rect x="32.26" y="29.3" width="1.02" height="12.5" fill="#ffbfe7"/><rect x="34.51" y="25.9" width="0.67" height="15.1" fill="#ffd6ef"/><rect x="36.26" y="14.9" width="1.29" height="25.4" fill="#eaadd4"/><rect x="38.46" y="20.7" width="0.62" height="19.2" fill="#fed0e9"/><rect x="40.23" y="23.7" width="1.13" height="15.9" fill="#e7aecb"/><rect x="42.02" y="11.0" width="1.13" height="28.6" fill="#e6b0d4"/><rect x="43.88" y="3.4" width="1.19" height="36.3" fill="#fed7ed"/><rect x="45.53" y="13.1" width="0.65" height="26.9" fill="#ffceef"/><rect x="46.98" y="20.5" width="0.83" height="19.8" fill="#fecbeb"/><rect x="49.02" y="14.2" width="1.29" height="26.7" fill="#ffd0f0"/><rect x="50.20" y="11.0" width="0.96" height="30.2" fill="#fcc0e4"/><rect x="52.27" y="23.2" width="1.16" height="18.8" fill="#fecbef"/><rect x="53.86" y="31.6" width="0.88" height="11.0" fill="#eea9d1"/><rect x="56.10" y="23.5" width="0.70" height="20.0" fill="#fed8ef"/><rect x="57.41" y="17.4" width="1.19" height="26.6" fill="#edaad3"/><rect x="59.55" y="25.1" width="1.06" height="19.7" fill="#fecee8"/><rect x="61.23" y="28.0" width="1.22" height="17.4" fill="#ffc9e4"/><rect x="62.95" y="16.5" width="0.78" height="29.4" fill="#ffc3ea"/><rect x="64.10" y="9.9" width="1.22" height="36.3" fill="#fec7e9"/><rect x="66.13" y="17.4" width="1.11" height="29.2" fill="#f7c0e6"/><rect x="67.37" y="26.2" width="1.27" height="20.7" fill="#f7c2df"/><rect x="69.58" y="23.7" width="0.93" height="23.4" fill="#f3a2d2"/><rect x="70.85" y="18.4" width="1.21" height="28.7" fill="#fec8e6"/><rect x="72.51" y="23.6" width="0.86" height="23.6" fill="#ffb9e1"/><rect x="73.71" y="33.2" width="0.82" height="14.0" fill="#fbbce7"/><rect x="74.83" y="36.2" width="0.93" height="11.0" fill="#feb7dd"/><rect x="76.31" y="32.3" width="1.23" height="14.8" fill="#eaa9cd"/><rect x="77.62" y="22.5" width="0.86" height="24.6" fill="#ffcbe5"/><rect x="79.83" y="22.6" width="0.85" height="24.4" fill="#f2b5d5"/><rect x="81.23" y="28.9" width="0.65" height="18.1" fill="#f4a8dd"/><rect x="82.96" y="24.3" width="0.82" height="22.7" fill="#febfe9"/><rect x="84.94" y="10.8" width="0.60" height="36.3" fill="#f4b1db"/><rect x="86.97" y="17.8" width="0.96" height="29.5" fill="#fedcef"/><rect x="88.66" y="29.2" width="0.99" height="18.4" fill="#fed9ed"/><rect x="90.04" y="28.1" width="1.01" height="19.8" fill="#fdc4e9"/><rect x="92.23" y="20.8" width="0.82" height="27.8" fill="#fed4f0"/><rect x="93.92" y="30.1" width="1.18" height="19.2" fill="#ffc2e5"/><rect x="95.38" y="38.9" width="1.25" height="11.0" fill="#fedaef"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><rect x="20" y="28" width="60" height="44" rx="7" fill="#fff"/><path d="M24 34l26 19 26-19" fill="none" stroke="#963578" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
diff --git a/internal/home/static/brand/memoria.svg b/internal/home/static/brand/memoria.svg
index 6d7c4c8..28a1ef4 100644
--- a/internal/home/static/brand/memoria.svg
+++ b/internal/home/static/brand/memoria.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" role="img" aria-label="Memoria"><title>Memoria</title><rect x="0" y="0" width="1024" height="1024" rx="0" fill="#7C3FC8"/><g transform="translate(153.6 153.6) scale(29.866666666666664)" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 22H5.5a1 1 0 0 1 0-5h4.501" />
- <path d="m21 22-1.879-1.878" />
- <path d="M3 19.5v-15A2.5 2.5 0 0 1 5.5 2H18a1 1 0 0 1 1 1v8" />
- <circle cx="17" cy="18" r="3" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Memoria"><title>Memoria</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#9c75d2"/><stop offset="1" stop-color="#865bbc"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="44.4" width="1.22" height="11.0" fill="#efe1ff"/><rect x="5.83" y="31.0" width="1.09" height="23.3" fill="#dfd3ff"/><rect x="7.64" y="26.8" width="1.18" height="26.3" fill="#e9e0ff"/><rect x="9.66" y="34.2" width="1.22" height="17.4" fill="#cfb0fd"/><rect x="11.60" y="25.9" width="0.74" height="24.4" fill="#e8d5ff"/><rect x="12.82" y="15.6" width="0.89" height="33.8" fill="#d6bef9"/><rect x="14.66" y="13.7" width="0.88" height="34.5" fill="#d0bbf7"/><rect x="16.75" y="26.9" width="1.04" height="19.8" fill="#e0cafc"/><rect x="17.89" y="27.5" width="0.64" height="18.5" fill="#e9dcff"/><rect x="19.92" y="17.4" width="1.05" height="27.4" fill="#ded0fe"/><rect x="21.99" y="22.0" width="0.70" height="21.8" fill="#dfd3fe"/><rect x="23.70" y="32.2" width="1.07" height="11.0" fill="#c5b2ed"/><rect x="25.68" y="27.1" width="1.05" height="15.4" fill="#e5cdfe"/><rect x="27.66" y="14.0" width="0.99" height="28.1" fill="#dac0fe"/><rect x="29.85" y="20.5" width="1.08" height="21.5" fill="#e7d6fe"/><rect x="31.64" y="22.3" width="0.70" height="19.6" fill="#e9ddff"/><rect x="33.09" y="12.5" width="0.76" height="29.5" fill="#ddcbfe"/><rect x="34.58" y="5.2" width="0.65" height="36.9" fill="#d8bcfc"/><rect x="36.12" y="11.9" width="0.94" height="30.5" fill="#d9cafe"/><rect x="37.65" y="23.6" width="0.73" height="19.0" fill="#dfd3ff"/><rect x="39.91" y="21.4" width="0.73" height="21.8" fill="#e9d8ff"/><rect x="41.05" y="16.6" width="1.14" height="26.8" fill="#ddcfff"/><rect x="43.32" y="25.7" width="0.73" height="18.2" fill="#c7b9eb"/><rect x="44.50" y="33.1" width="1.05" height="11.0" fill="#e8dffe"/><rect x="46.63" y="28.3" width="1.17" height="16.2" fill="#eaddff"/><rect x="48.68" y="15.3" width="0.98" height="29.4" fill="#e9defe"/><rect x="49.86" y="17.4" width="1.04" height="27.5" fill="#d4baff"/><rect x="52.00" y="25.8" width="0.71" height="19.2" fill="#c7b2ec"/><rect x="54.24" y="13.7" width="1.09" height="31.3" fill="#e1d6fe"/><rect x="55.41" y="8.3" width="0.89" height="36.6" fill="#d1bcf2"/><rect x="56.85" y="13.5" width="0.93" height="31.3" fill="#e0c7ff"/><rect x="59.15" y="28.6" width="0.95" height="15.9" fill="#d3b2fb"/><rect x="60.55" y="25.3" width="0.64" height="19.0" fill="#e0cffe"/><rect x="62.03" y="18.2" width="1.18" height="25.8" fill="#d7b9fd"/><rect x="63.33" y="19.8" width="0.70" height="24.0" fill="#dfcbff"/><rect x="65.17" y="31.6" width="0.80" height="11.8" fill="#ddd1ff"/><rect x="66.45" y="32.3" width="0.90" height="11.0" fill="#d9c5fb"/><rect x="68.56" y="17.6" width="0.62" height="25.4" fill="#e1ceff"/><rect x="70.28" y="12.4" width="1.15" height="30.5" fill="#cbb7f8"/><rect x="71.64" y="18.6" width="0.69" height="24.2" fill="#d5c3ff"/><rect x="73.57" y="21.7" width="0.75" height="21.2" fill="#cab5f7"/><rect x="74.80" y="14.4" width="0.97" height="28.6" fill="#eae2fe"/><rect x="76.61" y="7.2" width="0.88" height="36.1" fill="#d0bdff"/><rect x="78.10" y="15.7" width="1.28" height="28.0" fill="#e9e0ff"/><rect x="79.52" y="27.4" width="0.87" height="16.8" fill="#dbc3ff"/><rect x="81.32" y="27.9" width="0.60" height="16.9" fill="#ceb5ff"/><rect x="82.58" y="21.9" width="0.81" height="23.6" fill="#d9c9ff"/><rect x="84.56" y="24.4" width="0.80" height="22.1" fill="#dec1ff"/><rect x="86.28" y="36.1" width="1.06" height="11.4" fill="#c5b5ec"/><rect x="88.07" y="34.2" width="1.23" height="14.6" fill="#dcc1ff"/><rect x="89.18" y="25.6" width="0.73" height="23.9" fill="#d8bffd"/><rect x="90.67" y="18.5" width="0.77" height="32.1" fill="#e2c9fe"/><rect x="92.50" y="26.2" width="0.62" height="25.7" fill="#e0c3ff"/><rect x="93.83" y="32.2" width="0.83" height="20.7" fill="#e3d2ff"/><rect x="95.46" y="27.4" width="1.00" height="26.6" fill="#ebe0ff"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><rect x="28" y="18" width="44" height="64" rx="6" fill="#fff"/><path d="M52 18v24l7-5.5 7 5.5V18z" fill="#7146a6"/><rect x="28" y="18" width="6" height="64" rx="3" fill="#7146a6" opacity=".35"/></svg>
diff --git a/internal/home/static/brand/sheets.svg b/internal/home/static/brand/sheets.svg
index 3739ca0..d7a3364 100644
--- a/internal/home/static/brand/sheets.svg
+++ b/internal/home/static/brand/sheets.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" role="img" aria-label="Sheets"><title>Sheets</title><rect x="0" y="0" width="1024" height="1024" rx="0" fill="#168049"/><g transform="translate(153.6 153.6) scale(29.866666666666664)" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18" />
- <rect width="18" height="18" x="3" y="3" rx="2" />
- <path d="M3 9h18" />
- <path d="M3 15h18" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Sheets"><title>Sheets</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#5aa04a"/><stop offset="1" stop-color="#3d892a"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="44.8" width="0.65" height="11.0" fill="#accc9e"/><rect x="6.18" y="31.9" width="0.95" height="22.7" fill="#bff2b2"/><rect x="7.28" y="28.2" width="0.71" height="25.7" fill="#c5f4c4"/><rect x="9.26" y="35.2" width="0.69" height="17.4" fill="#bfeeb8"/><rect x="10.93" y="35.4" width="0.65" height="16.0" fill="#a3e19e"/><rect x="12.75" y="20.4" width="1.25" height="29.8" fill="#a8daa4"/><rect x="14.50" y="13.0" width="0.75" height="35.9" fill="#b1dbaf"/><rect x="16.53" y="23.7" width="0.71" height="23.9" fill="#c0e4b2"/><rect x="18.38" y="25.1" width="1.09" height="21.2" fill="#b2e4ab"/><rect x="19.99" y="16.2" width="0.89" height="29.2" fill="#a4cd9f"/><rect x="21.58" y="15.9" width="0.96" height="28.5" fill="#b9e5b5"/><rect x="23.79" y="31.6" width="0.77" height="11.8" fill="#a5d78e"/><rect x="25.07" y="31.9" width="0.66" height="11.0" fill="#c2e4b5"/><rect x="26.58" y="22.9" width="0.98" height="19.4" fill="#a0ce9d"/><rect x="28.56" y="15.8" width="0.92" height="26.1" fill="#9fd695"/><rect x="29.95" y="21.7" width="1.12" height="19.9" fill="#a5e5a1"/><rect x="32.03" y="23.5" width="0.62" height="18.0" fill="#a8cfa6"/><rect x="33.41" y="13.0" width="1.07" height="28.5" fill="#a6e9a5"/><rect x="35.27" y="5.0" width="1.01" height="36.6" fill="#aee1a1"/><rect x="36.51" y="11.2" width="1.11" height="30.5" fill="#c8efb6"/><rect x="38.77" y="23.0" width="0.86" height="19.1" fill="#baf9b4"/><rect x="40.86" y="15.0" width="1.00" height="27.6" fill="#c5f0c5"/><rect x="42.40" y="15.0" width="1.12" height="27.9" fill="#9ed798"/><rect x="43.52" y="23.1" width="0.92" height="20.2" fill="#a0d48f"/><rect x="45.48" y="32.7" width="0.61" height="11.0" fill="#a1da9f"/><rect x="46.71" y="30.4" width="0.80" height="13.6" fill="#97d298"/><rect x="48.73" y="17.7" width="0.80" height="26.7" fill="#c2f5b6"/><rect x="51.00" y="24.3" width="1.24" height="20.5" fill="#abdb9f"/><rect x="53.10" y="25.3" width="1.25" height="19.7" fill="#b5e9a8"/><rect x="54.21" y="17.1" width="1.28" height="28.0" fill="#9dce9a"/><rect x="55.73" y="8.4" width="1.09" height="36.8" fill="#bbeeb3"/><rect x="57.41" y="14.6" width="0.61" height="30.5" fill="#bde9b9"/><rect x="59.24" y="26.3" width="0.65" height="18.7" fill="#a1dda0"/><rect x="60.43" y="25.2" width="0.95" height="19.7" fill="#b9e4ad"/><rect x="62.25" y="16.8" width="0.71" height="27.8" fill="#b6e0a6"/><rect x="63.46" y="18.2" width="1.22" height="26.3" fill="#add9a9"/><rect x="65.01" y="29.2" width="0.93" height="15.0" fill="#b7dcad"/><rect x="66.39" y="33.0" width="1.23" height="11.0" fill="#c6e9b5"/><rect x="68.28" y="24.8" width="1.05" height="19.0" fill="#ade5ad"/><rect x="70.00" y="15.2" width="0.68" height="28.4" fill="#acdd95"/><rect x="71.92" y="21.5" width="0.83" height="22.0" fill="#b1e2ab"/><rect x="73.52" y="24.7" width="1.07" height="18.7" fill="#ccf1bc"/><rect x="75.03" y="15.8" width="1.18" height="27.6" fill="#addba9"/><rect x="76.44" y="7.2" width="0.90" height="36.4" fill="#baf3b1"/><rect x="78.59" y="15.9" width="0.76" height="28.0" fill="#a6de99"/><rect x="80.46" y="27.4" width="0.64" height="17.0" fill="#b7dca7"/><rect x="82.52" y="21.1" width="0.77" height="24.1" fill="#beefa4"/><rect x="84.53" y="21.3" width="0.86" height="24.8" fill="#c9efbc"/><rect x="86.73" y="36.3" width="0.87" height="11.0" fill="#b7e89e"/><rect x="88.29" y="35.8" width="0.73" height="12.4" fill="#a3ce95"/><rect x="89.91" y="24.1" width="0.69" height="25.2" fill="#b5e8ab"/><rect x="92.14" y="23.9" width="0.70" height="26.9" fill="#aad692"/><rect x="93.45" y="31.3" width="1.10" height="20.5" fill="#add0a0"/><rect x="95.03" y="31.3" width="0.65" height="21.7" fill="#c6f4c4"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><rect x="22" y="26" width="56" height="48" rx="6" fill="#fff"/><rect x="22" y="26" width="56" height="13" rx="6" fill="#26730e" opacity=".35"/><g stroke="#26730e" stroke-width="3"><path d="M42 26v48M22 52h56M22 64h56"/></g></svg>
diff --git a/internal/home/static/brand/slides.svg b/internal/home/static/brand/slides.svg
index ea6ead1..0fb0f9e 100644
--- a/internal/home/static/brand/slides.svg
+++ b/internal/home/static/brand/slides.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" role="img" aria-label="Slides"><title>Slides</title><rect x="0" y="0" width="1024" height="1024" rx="0" fill="#C45B16"/><g transform="translate(153.6 153.6) scale(29.866666666666664)" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h20" />
- <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
- <path d="m7 21 5-5 5 5" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Slides"><title>Slides</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#cb7227"/><stop offset="1" stop-color="#af5b03"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="39.2" width="0.73" height="16.7" fill="#fec6a5"/><rect x="5.60" y="37.1" width="1.25" height="18.3" fill="#f7b989"/><rect x="6.80" y="30.5" width="1.06" height="24.4" fill="#ffdec9"/><rect x="8.83" y="32.0" width="0.92" height="22.1" fill="#ffc79d"/><rect x="11.05" y="41.9" width="0.89" height="11.0" fill="#f8ab76"/><rect x="13.29" y="29.6" width="1.15" height="22.0" fill="#ffbf99"/><rect x="15.03" y="19.4" width="0.94" height="31.1" fill="#ffd0ad"/><rect x="17.27" y="26.9" width="0.90" height="22.1" fill="#ffd3b5"/><rect x="18.95" y="25.7" width="1.18" height="22.2" fill="#eab18a"/><rect x="20.22" y="16.6" width="0.87" height="30.4" fill="#fbb991"/><rect x="21.63" y="9.9" width="0.62" height="36.2" fill="#f9b178"/><rect x="23.67" y="20.5" width="1.29" height="24.3" fill="#f0bd9b"/><rect x="25.21" y="29.2" width="0.84" height="14.7" fill="#f1b585"/><rect x="26.54" y="26.1" width="1.05" height="17.1" fill="#ffbf91"/><rect x="28.30" y="17.1" width="0.82" height="25.3" fill="#fcc9a0"/><rect x="29.70" y="19.5" width="0.66" height="22.3" fill="#fecbad"/><rect x="31.22" y="28.8" width="0.92" height="12.5" fill="#f6b683"/><rect x="33.20" y="26.3" width="1.01" height="14.4" fill="#ffd1ad"/><rect x="34.55" y="14.8" width="0.89" height="25.8" fill="#ffbe99"/><rect x="35.70" y="8.4" width="1.30" height="32.0" fill="#fac5a7"/><rect x="36.97" y="10.7" width="0.93" height="29.7" fill="#ebb992"/><rect x="38.68" y="19.2" width="1.30" height="21.2" fill="#feb885"/><rect x="40.93" y="12.1" width="0.90" height="28.6" fill="#ffd5b4"/><rect x="42.26" y="5.8" width="1.22" height="35.2" fill="#ffd6bc"/><rect x="43.84" y="11.6" width="1.20" height="29.8" fill="#fedbc5"/><rect x="45.18" y="23.4" width="1.14" height="18.3" fill="#ffd7b9"/><rect x="47.02" y="28.3" width="0.89" height="14.0" fill="#fed1af"/><rect x="48.51" y="20.9" width="1.05" height="21.9" fill="#fecfab"/><rect x="49.83" y="18.2" width="1.07" height="25.0" fill="#ffdbc8"/><rect x="51.43" y="26.3" width="1.19" height="17.4" fill="#fed4b4"/><rect x="52.56" y="32.5" width="1.19" height="11.6" fill="#fed3b6"/><rect x="54.77" y="24.0" width="0.85" height="20.7" fill="#eab58f"/><rect x="56.66" y="11.9" width="1.29" height="33.2" fill="#f1ba9a"/><rect x="58.31" y="16.9" width="0.88" height="28.5" fill="#edb181"/><rect x="59.64" y="23.9" width="1.08" height="21.7" fill="#fdc69b"/><rect x="61.20" y="21.7" width="1.20" height="24.1" fill="#fecfae"/><rect x="62.30" y="14.9" width="0.78" height="30.9" fill="#fecea7"/><rect x="63.94" y="12.2" width="0.84" height="33.6" fill="#ffccac"/><rect x="65.73" y="25.5" width="0.75" height="20.3" fill="#f6bb8b"/><rect x="66.97" y="33.2" width="1.16" height="12.5" fill="#fec092"/><rect x="68.57" y="29.7" width="0.96" height="15.9" fill="#efba9b"/><rect x="69.87" y="22.2" width="0.76" height="23.4" fill="#fec396"/><rect x="71.46" y="22.3" width="1.03" height="23.1" fill="#ecbc95"/><rect x="73.22" y="31.9" width="0.84" height="13.3" fill="#f7ae7e"/><rect x="75.52" y="24.9" width="0.64" height="20.2" fill="#fee1ce"/><rect x="77.03" y="12.7" width="0.91" height="32.3" fill="#efbf9e"/><rect x="78.56" y="12.1" width="0.97" height="32.9" fill="#ffb183"/><rect x="80.59" y="23.3" width="1.30" height="21.8" fill="#fedfca"/><rect x="82.37" y="20.5" width="1.19" height="24.9" fill="#e5b692"/><rect x="83.58" y="13.9" width="0.64" height="31.8" fill="#f9b483"/><rect x="85.45" y="16.7" width="0.72" height="29.5" fill="#ffd2b5"/><rect x="87.10" y="31.1" width="1.17" height="15.6" fill="#febf8e"/><rect x="88.80" y="35.6" width="1.13" height="11.8" fill="#e9b190"/><rect x="90.54" y="26.5" width="1.28" height="21.8" fill="#fdbd8b"/><rect x="92.52" y="26.4" width="0.79" height="23.0" fill="#feceab"/><rect x="94.33" y="36.8" width="1.20" height="13.8" fill="#f7b182"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><rect x="18" y="24" width="64" height="42" rx="5" fill="#fff"/><g fill="#924b00"><rect x="30" y="46" width="8" height="12" rx="2"/><rect x="44" y="38" width="8" height="20" rx="2"/><rect x="58" y="32" width="8" height="26" rx="2"/></g><rect x="47.5" y="66" width="5" height="9" fill="#fff"/><rect x="37" y="74" width="26" height="5" rx="2.5" fill="#fff"/></svg>
diff --git a/internal/home/static/calma.css b/internal/home/static/calma.css
new file mode 100644
index 0000000..be2365a
--- /dev/null
+++ b/internal/home/static/calma.css
@@ -0,0 +1,111 @@
+/* Home's own Calma rules: where the sky sits on Home's pages, and the
+ card the pages at the door are drawn as. Everything else is estilo's
+ theme (theme.css) and rastrillo's tokens.css. */
+
+/* tokens.css reserves the scrollbar's gutter on every page, so short and
+ long pages are the same width. Under the sky that reserved strip is a
+ visible pale band down the trailing edge, so Home takes the documented
+ opt-out; its pages have no layout that a scrollbar's arrival could jolt. */
+:root {
+ --rst-scrollbar-gutter: auto;
+}
+
+/* The sky hangs behind the top of every Home page, fading out before the
+ content gets busy. The host is at least as tall as the part of the sky
+ that shows, so a short page does not clip it. */
+[home-sky] {
+ --estilo-sky-top: -140px;
+ --estilo-sky-height: 560px;
+ min-height: 420px;
+}
+
+/* At the door: one card on the sky, the Oficina mark at its head. */
+main[home-door] {
+ box-sizing: border-box;
+ max-width: 460px;
+ margin: max(40px, 11vh) auto 48px;
+ padding: 34px 40px 32px;
+ background: var(--rst-surface);
+ border-radius: 20px;
+ box-shadow: 0 0 0 1px light-dark(transparent, var(--rst-line)), var(--rst-shadow-lift);
+}
+main[home-door] > [estilo-brand] {
+ margin: 0 0 22px;
+ font-size: 1.2rem;
+ font-weight: 650;
+ letter-spacing: -0.01em;
+}
+main[home-door] h1 {
+ letter-spacing: -0.02em;
+}
+@media (max-width: 520px) {
+ main[home-door] {
+ margin: 28px 14px 40px;
+ padding: 26px 22px 24px;
+ }
+}
+
+/* Your home: the Oficina mark and a grid of every app, each one tile. An
+ app you can open is a link across its whole tile; one you cannot yet
+ is shown quieter, with its status saying why. */
+[home-hub-head] {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ margin: 28px 0 8px;
+}
+[home-hub-head] h1 {
+ margin: 0;
+ font-size: clamp(1.9rem, 4vw, 2.5rem);
+ letter-spacing: -0.03em;
+}
+[home-hub-head] form { margin: 0; }
+[home-hub-lede] {
+ margin: 0 0 40px;
+ color: var(--rst-text-muted);
+}
+[home-hub-h] {
+ margin: 0 0 12px;
+ color: var(--rst-text-faint);
+ font-size: 0.95rem;
+ font-weight: 600;
+}
+[home-apps] {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 12px;
+ margin: 0 0 48px;
+ padding: 0;
+ list-style: none;
+}
+[home-app] {
+ box-sizing: border-box;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ padding: 22px 12px 18px;
+ border-radius: 18px;
+ background: var(--rst-surface);
+ box-shadow: 0 0 0 1px var(--rst-line);
+ color: var(--rst-text);
+ text-align: center;
+ text-decoration: none;
+}
+a[home-app]:hover { box-shadow: 0 0 0 1px var(--rst-line), var(--rst-shadow-lift); }
+[home-app] img { margin-bottom: 4px; filter: drop-shadow(0 5px 9px rgba(20, 24, 33, 0.16)); }
+[home-app] b { font-weight: 620; }
+[home-app] small { color: var(--rst-text-faint); font-size: 0.8rem; }
+div[home-app] img { filter: saturate(0.6); opacity: 0.8; }
+
+/* In dark, the sky runs brighter (estilo's gain) and muted text on its
+ brightest band falls under 4.5:1 (review, discussion 75). So the sky
+ is quieter here, and text that sits on it is full-strength. */
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) [home-sky] { --estilo-sky-strength: 0.32; }
+ :root:not([data-theme="light"]) [home-hub-lede] { color: var(--rst-text); }
+}
+:root[data-theme="dark"] [home-sky] { --estilo-sky-strength: 0.32; }
+:root[data-theme="dark"] [home-hub-lede] { color: var(--rst-text); }
diff --git a/internal/home/static/site/archivo-ext.woff2 b/internal/home/static/site/archivo-ext.woff2
deleted file mode 100644
index 462b5cf..0000000
Binary files a/internal/home/static/site/archivo-ext.woff2 and /dev/null differ
diff --git a/internal/home/static/site/archivo.woff2 b/internal/home/static/site/archivo.woff2
deleted file mode 100644
index 7af3f7d..0000000
Binary files a/internal/home/static/site/archivo.woff2 and /dev/null differ
diff --git a/internal/home/static/site/home.css b/internal/home/static/site/home.css
index 6b9136a..47724ea 100644
--- a/internal/home/static/site/home.css
+++ b/internal/home/static/site/home.css
@@ -1,401 +1,191 @@
-/* Oficina — the front door.
- The suite's own theme (estilo) is deliberately unremarkable; this page is
- the one place that gets to have a voice. One family, two widths: Archivo
- expanded does the signage, Archivo normal does the interface, Newsreader
- does the prose. Saffron means "new, or not yet" and nothing else. */
+/* oficina.works, the front page, in Calma (estilo AGENTS.md, row 8).
-@font-face {
- font-family: "Archivo";
- src: url("/static/site/archivo.woff2") format("woff2");
- font-weight: 400 800;
- font-stretch: 62% 125%;
- font-display: swap;
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
- U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
- U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: "Archivo";
- src: url("/static/site/archivo-ext.woff2") format("woff2");
- font-weight: 400 800;
- font-stretch: 62% 125%;
- font-display: swap;
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
- U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
- font-family: "Newsreader";
- src: url("/static/site/newsreader.woff2") format("woff2");
- font-weight: 300 600;
- font-display: swap;
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
- U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
- U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
- font-family: "Newsreader";
- src: url("/static/site/newsreader-ext.woff2") format("woff2");
- font-weight: 300 600;
- font-display: swap;
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
- U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-:root {
- /* Contrast, measured against these exact values (WCAG 2.2):
- ink/paper 15.6 · muted/paper 5.2 · cobalt/paper 6.2 · ochre/paper 5.0
- bone/ink 13.4 · dim/ink 7.5 · sky/ink 7.6 · saffron/ink 7.2 · ink/saffron 8.0
- Put a colour on a surface not listed and recompute before you ship it. */
- --ink: #151e3a;
- --ink-2: #1d2848;
- --ink-rule: #37436f;
- --paper: #eeede6;
- --paper-2: #e4e2d8;
- --paper-rule: #cfcdc0;
- --cobalt: #2748cc;
- --cobalt-deep: #1b36a8;
- --sky: #93aeff;
- --saffron: #e0a02c;
- --ochre: #8a5a06;
- --bone: #eae8df;
- --dim: #a7afc8;
- --muted: #5a6178;
-
- --sig: "Archivo", system-ui, sans-serif; /* signage + interface */
- --prose: "Newsreader", Georgia, serif; /* running text */
-
- color-scheme: light;
-
- --shell: 74rem;
- --gutter: clamp(1.25rem, 5vw, 4rem);
- --step: clamp(4rem, 9vw, 7.5rem);
-}
+ Colour, type and shape are estilo's theme (theme.css, loaded first):
+ this file only lays the page out. Each app's card, and the Memoria
+ section, take their accent from estilo's colour ring through
+ [data-app] (apps.css), so the page is every app's colour at once and
+ each app is its own. The sky behind the hero is estilo's (sky.css),
+ seeded as the suite's own. Light and dark follow the reader's system;
+ the page runs no script to switch them. */
*, *::before, *::after { box-sizing: border-box; }
-
-html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
-@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
-
body {
margin: 0;
- background: var(--paper);
- color: var(--ink);
- font-family: var(--sig);
- font-size: 1.0625rem;
- line-height: 1.55;
- font-synthesis-weight: none;
+ background: var(--rst-bg);
+ color: var(--rst-text);
+ font: 400 16px/1.55 var(--rst-font);
+ -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
+img { display: block; }
+a { color: var(--rst-accent); }
+:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: 3px; border-radius: 6px; }
+h1, h2, h3 { text-wrap: balance; }
-h1, h2, h3 { margin: 0; font-weight: 700; font-stretch: 112%; letter-spacing: -0.018em; line-height: 1.02; }
-p { margin: 0 0 1.1em; }
-ul { margin: 0; padding: 0; list-style: none; }
-
-a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
-a:hover { color: var(--cobalt-deep); }
-
-:where(a, button, input, summary):focus-visible {
- outline: 2px solid var(--cobalt);
- outline-offset: 3px;
- border-radius: 2px;
-}
-.band-ink :where(a, button, input):focus-visible { outline-color: var(--sky); }
-
-.vh {
- position: absolute; width: 1px; height: 1px; margin: -1px;
- padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
-}
-
-.skip {
- position: absolute; left: 0.75rem; top: -4rem; z-index: 10;
- background: var(--bone); color: var(--ink); padding: 0.6rem 1rem;
- border-radius: 3px; font-weight: 600; text-decoration: none;
-}
-.skip:focus { top: 0.75rem; }
-
-.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
-
-/* ── Bands ────────────────────────────────────────────────────────────── */
-.band { padding-block: var(--step); }
-.band-ink { background: var(--ink); color: var(--bone); }
-.band-quiet { background: var(--paper-2); }
-.band:not(.band-ink) + .band:not(.band-ink) { border-top: 1px solid var(--paper-rule); }
-
-.band-ink a { color: var(--sky); }
-.band-ink a:hover { color: #b9caff; }
-.band h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); max-width: 18ch; }
-.band h2.wide { max-width: 24ch; margin-bottom: 1.5rem; }
-
-/* ── Bar ──────────────────────────────────────────────────────────────── */
-.bar { background: var(--ink); color: var(--bone); }
-.bar-in {
- display: flex; align-items: center; gap: clamp(1rem, 4vw, 3rem);
- min-height: 4.25rem;
-}
-.mark {
- font-weight: 800; font-stretch: 118%; font-size: 1.32rem;
- letter-spacing: -0.02em; color: var(--bone); text-decoration: none;
- margin-right: auto;
-}
-.nav { display: flex; gap: clamp(0.9rem, 2.4vw, 1.9rem); }
-.nav a {
- color: var(--dim); text-decoration: none; font-size: 0.95rem; font-weight: 500;
-}
-.nav a:hover { color: var(--bone); }
-.bar-cta { flex: none; }
-@media (max-width: 46rem) {
- .bar-in { flex-wrap: wrap; padding-block: 0.9rem; row-gap: 0.75rem; }
- .nav { order: 3; width: 100%; }
- .bar-cta { order: 2; }
-}
-
-/* ── Hero ─────────────────────────────────────────────────────────────── */
-.hero { padding-top: clamp(3rem, 7vw, 5.5rem); }
-.hero-h {
- font-size: clamp(2.2rem, 9.2vw, 6.6rem);
- font-weight: 800;
- font-stretch: 118%;
- letter-spacing: -0.03em;
- line-height: 0.92;
- margin-bottom: 1.4rem;
-}
-.hero-lead {
- font-family: var(--prose);
- font-size: clamp(1.1rem, 1.9vw, 1.3rem);
- line-height: 1.62;
- color: var(--dim);
- max-width: 56ch;
- margin-bottom: 2.6rem;
-}
-
-@media (max-width: 30rem) {
- .hero-h { font-stretch: 104%; letter-spacing: -0.022em; }
- .hero-h br { display: none; }
-}
-
-/* ── The plate: an engraved directory board ───────────────────────────── */
-.plate {
- background: var(--ink-2);
- border: 1px solid var(--ink-rule);
- border-radius: 3px;
- padding: clamp(1rem, 2.6vw, 1.6rem) clamp(1rem, 2.6vw, 2rem);
-}
-.plate-flat { padding-block: 0.4rem; }
-
-.directory { width: 100%; border-collapse: collapse; }
-.directory caption {
- text-align: left;
- font-family: var(--prose);
- font-size: 0.98rem;
- color: var(--dim);
- padding-bottom: 0.9rem;
-}
-.directory thead th {
- text-align: right;
- font-size: 0.82rem;
- font-weight: 600;
- font-stretch: 100%;
- color: var(--dim);
- padding: 0 0 0.55rem;
- border-bottom: 1px solid var(--ink-rule);
- width: 7.5rem;
-}
-.directory thead th:first-child, .directory thead th:nth-child(2) { width: auto; }
-
-.directory tbody tr { border-bottom: 1px solid var(--ink-rule); }
-.directory tbody tr:last-child { border-bottom: 0; }
-.directory tbody th, .directory tbody td { padding-block: 0.95rem; vertical-align: baseline; }
+.shell { max-width: 1180px; margin: 0 auto; padding-inline: 32px; }
-.c-app {
- text-align: left;
- font-size: clamp(1.3rem, 2.3vw, 1.7rem);
- font-weight: 700;
- font-stretch: 115%;
- letter-spacing: -0.02em;
- color: var(--bone);
- white-space: nowrap;
- padding-right: 1.5rem;
-}
-.c-app em {
- font-style: normal; font-size: 0.68rem; font-weight: 700; font-stretch: 100%;
- letter-spacing: 0.04em; color: var(--ink); background: var(--saffron);
- border-radius: 2px; padding: 0.16em 0.42em; vertical-align: 0.42em;
- margin-left: 0.45rem;
-}
-.c-what {
- font-family: var(--prose);
- font-size: 1.03rem;
- color: var(--dim);
- padding-right: 1.5rem;
-}
-.c-get { text-align: right; white-space: nowrap; }
-.c-get a { font-weight: 600; font-size: 0.97rem; text-decoration: none; border-bottom: 1px solid rgba(147,174,255,.4); }
-.c-get a:hover { border-bottom-color: currentColor; }
-.c-none span { color: #7d86a0; }
-.c-get a.soon { color: var(--saffron); border-bottom-color: rgba(224,160,44,.45); }
+.skip { position: absolute; left: 16px; top: -48px; z-index: 10; padding: 10px 14px; border-radius: 10px; background: var(--rst-surface); box-shadow: var(--rst-shadow-lift); }
+.skip:focus { top: 12px; }
-.acts { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }
+/* ── The bar ── */
+.bar { position: relative; z-index: 2; }
+.bar-in { display: flex; align-items: center; gap: 28px; padding-block: 18px; }
+.mark { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--rst-text); text-decoration: none; font: 650 19px/1 var(--rst-font); letter-spacing: -0.01em; }
+.nav { display: flex; gap: 26px; }
+.nav a { color: var(--rst-text-muted); text-decoration: none; font-size: 15px; }
+.nav a:hover { color: var(--rst-text); }
-/* ── Buttons ──────────────────────────────────────────────────────────── */
+/* ── Buttons ── */
.btn {
- display: inline-block;
- font: inherit;
- font-weight: 600;
- font-stretch: 104%;
- line-height: 1;
- padding: 0.82rem 1.35rem;
- border: 1px solid transparent;
- border-radius: 3px;
- text-decoration: none;
- cursor: pointer;
- transition: background-color .14s ease, color .14s ease, border-color .14s ease;
-}
-.btn-sm { padding: 0.6rem 1rem; font-size: 0.93rem; }
-.btn-bone { background: var(--bone); color: var(--ink); }
-.btn-bone:hover { background: #fff; color: var(--ink); }
-.btn-ghost { background: transparent; color: var(--sky); border-color: var(--ink-rule); }
-.btn-ghost:hover { border-color: var(--sky); color: var(--sky); }
-.btn-cobalt { background: var(--cobalt); color: #fff; }
-.btn-cobalt:hover { background: var(--cobalt-deep); color: #fff; }
-.btn-saffron { background: var(--saffron); color: var(--ink); }
-.btn-saffron:hover { background: #f0b444; color: var(--ink); }
-.band-ink .btn-bone, .band-ink .btn-saffron { color: var(--ink); }
-.bar .btn-bone { padding: 0.62rem 1.05rem; font-size: 0.95rem; }
-
-/* ── Two-column bands ─────────────────────────────────────────────────── */
-.two {
- display: grid;
- grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
- gap: clamp(2rem, 5vw, 4.5rem);
- align-items: start;
-}
-.two-tight { align-items: center; }
-@media (max-width: 56rem) { .two { grid-template-columns: 1fr; } }
-
-.prose {
- font-family: var(--prose);
- font-size: 1.12rem;
- line-height: 1.66;
- max-width: 60ch;
- color: #2b3350;
-}
-.prose.sm { font-size: 1rem; color: var(--muted); }
-.two-a h2 { margin-bottom: 1.3rem; }
+ display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+ padding: 12px 18px; border-radius: 10px;
+ background: var(--rst-accent); color: var(--rst-on-accent);
+ font: 600 15px/1 var(--rst-font); text-decoration: none;
+ transition: background-color .15s ease;
+}
+.btn:hover { background: var(--rst-accent-strong); }
+.btn-quiet { background: var(--rst-surface); color: var(--rst-text); box-shadow: inset 0 0 0 1px var(--rst-line); }
+.btn-quiet:hover { background: var(--rst-surface-2); }
+.btn-sm { padding: 9px 14px; font-size: 14px; }
+
+/* ── Hero: the sky behind the headline, the product beneath it ── */
+.hero { --estilo-sky-top: -10%; --estilo-sky-height: 74%; }
+.hero-in { text-align: center; padding-block: 72px 0; }
+.hero-h {
+ margin: 0 auto 22px; max-width: 13ch;
+ font: 620 clamp(44px, 7.2vw, 78px)/1.02 var(--rst-font); letter-spacing: -0.035em;
+}
+.hero-lead { margin: 0 auto 32px; max-width: 46ch; color: var(--rst-text-muted); font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55; }
+.acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
+
+.stage {
+ position: relative; height: 470px; margin-top: 60px;
+ border-radius: 24px 24px 0 0; overflow: hidden;
+ background: color-mix(in oklab, var(--rst-accent) 7%, var(--rst-surface-2));
+}
+.launch {
+ position: absolute; left: 6%; top: 56px; width: 400px;
+ padding: 18px 20px 22px; border-radius: 16px;
+ background: var(--rst-surface); box-shadow: var(--rst-shadow-lift);
+}
+.launch-h { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px; }
+.launch-h b { font-size: 15px; font-weight: 620; }
+.launch-h span { margin-left: auto; color: var(--rst-text-faint); }
+.launch-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
+.launch-apps li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 12px; font: 500 13px/1 var(--rst-font); }
+.doc {
+ position: absolute; right: 5%; top: 92px; width: 540px; height: 420px;
+ border-radius: 16px; overflow: hidden;
+ background: var(--rst-surface); box-shadow: var(--rst-shadow-lift);
+}
+.doc-bar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--rst-line); font-size: 13px; }
+.doc-bar b { font-weight: 620; }
+.doc-bar span:last-child { color: var(--rst-text-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.lights { display: flex; gap: 6px; margin-right: 4px; }
+.lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--rst-line); }
+.doc-page { padding: 26px 40px; }
+.doc-h { margin: 0 0 12px; font: 620 22px/1.2 var(--rst-font); letter-spacing: -0.02em; }
+.doc-page p:not(.doc-h) { margin: 0 0 10px; color: var(--rst-text-muted); font-size: 14px; line-height: 1.6; }
+.doc mark { background: var(--rst-accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--rst-accent); }
+
+/* ── Bands ── */
+.band { padding-block: 92px; }
+.band-quiet { background: var(--rst-surface); border-block: 1px solid var(--rst-line); }
+.band h2, .sec-head h2 { margin: 0 0 14px; font: 620 clamp(28px, 3.4vw, 40px)/1.1 var(--rst-font); letter-spacing: -0.03em; }
+.sec-head { max-width: 60ch; margin-bottom: 40px; }
+.prose { margin: 0 0 16px; max-width: 58ch; color: var(--rst-text-muted); font-size: 17px; line-height: 1.65; }
+.prose.sm { font-size: 15px; }
.lnk { font-weight: 600; }
-
-/* Memoria's demonstration */
-.ask {
- background: var(--paper-2);
- border: 1px solid var(--paper-rule);
- border-left: 3px solid var(--ochre);
- border-radius: 3px;
- padding: clamp(1.3rem, 3vw, 1.9rem);
-}
-.ask-q { font-weight: 600; font-size: 1.06rem; margin-bottom: 1.1rem; }
-.ask-a {
- font-family: var(--prose); font-size: 1.14rem; line-height: 1.6;
- margin-bottom: 1.1rem;
-}
-.ask-cite { margin: 0; font-size: 0.94rem; }
-.ask-cite a { color: var(--ochre); font-weight: 600; }
-.ask-note { margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--muted); }
-
-/* Isolation facts */
-.facts { margin: 0; }
-.facts > div { padding: 1.05rem 0; border-top: 1px solid var(--paper-rule); }
-.facts > div:first-child { border-top: 0; padding-top: 0; }
-.facts dt { font-weight: 700; font-stretch: 108%; font-size: 1.02rem; }
-.facts dd { margin: 0.32rem 0 0; font-family: var(--prose); color: var(--muted); max-width: 48ch; }
-
-/* ── Downloads ────────────────────────────────────────────────────────── */
-#native .hero-lead { margin-bottom: 2.2rem; }
-.dl-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); }
-.dl-list li {
- display: flex; align-items: center; justify-content: space-between;
- gap: 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid var(--ink-rule);
-}
-.dl-list li:nth-last-child(-n+2) { border-bottom: 0; }
-@media (max-width: 44rem) {
- .dl-list { grid-template-columns: 1fr; }
- .dl-list li:nth-last-child(2) { border-bottom: 1px solid var(--ink-rule); }
-}
-.dl-state { color: var(--dim); font-size: 0.95rem; font-family: var(--prose); }
-.dl-app { font-weight: 700; font-stretch: 112%; font-size: 1.18rem; color: var(--bone); }
-.dl-req { margin: 0; padding: 1rem 0 1.1rem; border-top: 1px solid var(--ink-rule); font-size: 0.92rem; color: var(--dim); }
-
-.tf { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 62ch; }
-.tf h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 0.85rem; }
-.tf h3::after {
- content: ""; display: block; width: 3.5rem; height: 3px;
- background: var(--saffron); margin-top: 0.85rem;
-}
-.tf p { font-family: var(--prose); color: var(--dim); font-size: 1.08rem; line-height: 1.62; }
-
-/* ── Forms ────────────────────────────────────────────────────────────── */
-.form { display: grid; gap: 1.1rem; }
-.form-inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.8rem; }
-@media (max-width: 34rem) { .form-inline { grid-template-columns: 1fr; align-items: stretch; } }
-
-.field { display: grid; gap: 0.4rem; }
-.field label { font-size: 0.88rem; font-weight: 600; color: var(--muted); }
-.band-ink .field label { color: var(--dim); }
-.field input {
- font: inherit;
- padding: 0.78rem 0.9rem;
- border: 1px solid var(--paper-rule);
- border-radius: 3px;
- background: #fff;
- color: var(--ink);
- min-width: 0;
-}
-.band-ink .field input { background: var(--ink-2); border-color: var(--ink-rule); color: var(--bone); }
-.field input::placeholder { color: #8d93a5; }
-.band-ink .field input::placeholder { color: #6e7793; }
-.field input:hover { border-color: var(--muted); }
-.hint { margin: 0; font-size: 0.88rem; color: var(--muted); }
-.hint-url { font-weight: 600; color: var(--ink); }
-#signup .form { align-content: start; }
-#signup .btn { justify-self: start; }
-
-/* ── Footer ───────────────────────────────────────────────────────────── */
-.foot { background: var(--ink); color: var(--dim); padding-block: clamp(2.5rem, 5vw, 3.75rem); }
-.foot-in { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
-@media (max-width: 46rem) { .foot-in { grid-template-columns: 1fr 1fr; } .colophon { grid-column: 1 / -1; } }
-.foot-h { font-size: 0.88rem; font-weight: 600; font-stretch: 100%; color: var(--bone); margin-bottom: 0.8rem; letter-spacing: 0; }
-.foot-col li { padding: 0.22rem 0; }
-.foot-col a { color: var(--dim); text-decoration: none; font-size: 0.95rem; }
-.foot-col a:hover { color: var(--bone); text-decoration: underline; }
-.colophon {
- margin: 0; font-family: var(--prose); font-size: 0.98rem; line-height: 1.6;
- max-width: 52ch; color: var(--dim);
-}
-
-/* ── The one orchestrated moment: the board fills in on arrival ───────── */
-@media (prefers-reduced-motion: no-preference) {
- .directory tbody tr {
- animation: settle .5s cubic-bezier(.2, .7, .3, 1) backwards;
- animation-delay: calc(var(--row) * 70ms + 120ms);
- }
- @keyframes settle {
- from { opacity: 0; transform: translateY(6px); }
- to { opacity: 1; transform: none; }
- }
-}
-
-/* ── Small screens: the board becomes a stack of entries ──────────────── */
-@media (max-width: 48rem) {
- .directory, .directory tbody, .directory tbody tr, .directory tbody th, .directory tbody td { display: block; }
- .directory thead, .directory caption { display: none; }
- .directory tbody tr { padding-block: 1.1rem; }
- .directory tbody th, .directory tbody td { padding-block: 0; }
- .c-app { padding-right: 0; }
- .c-what { padding: 0.15rem 0 0.7rem; }
- .directory tbody td.c-get {
- display: flex; justify-content: space-between; align-items: baseline;
- text-align: left; padding: 0.28rem 0; border-top: 1px solid rgba(55,67,111,.5);
- }
- .directory tbody td.c-get::before { content: attr(data-label); color: var(--dim); font-size: 0.88rem; }
- .r-new { border-left: 3px solid var(--saffron); padding-left: 0.9rem; }
+.two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
+
+/* ── The family: one card per app, in its own colour ── */
+.family { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
+.family li {
+ padding: 24px 24px 22px; border-radius: 18px;
+ background: var(--rst-surface); box-shadow: 0 0 0 1px var(--rst-line);
+ transition: box-shadow .2s ease, transform .2s ease;
+}
+.family li:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--rst-accent) 30%, var(--rst-line)), var(--rst-shadow-lift); }
+.family img { filter: drop-shadow(0 5px 9px rgba(20, 24, 33, .16)); }
+.family h3 { margin: 16px 0 4px; font: 620 18px/1.2 var(--rst-font); letter-spacing: -0.01em; }
+.family h3 em {
+ margin-left: 6px; padding: 3px 8px; border-radius: 999px; vertical-align: 2px;
+ background: var(--rst-accent-soft); color: var(--rst-accent);
+ font: 600 11.5px/1 var(--rst-font); font-style: normal;
+}
+.family p { margin: 0; color: var(--rst-text-muted); font-size: 15px; }
+.family .get { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; }
+.get a { font-weight: 600; font-size: 14px; text-decoration: none; }
+.get a:hover { text-decoration: underline; }
+.get .soon { color: var(--rst-text-faint); font-weight: 500; }
+.get .none { color: var(--rst-text-faint); font-size: 14px; }
+
+/* ── Memoria's answer, and the sign-in card ── */
+.ask { padding: 24px 28px; border-radius: 18px; background: var(--rst-bg); box-shadow: 0 0 0 1px var(--rst-line); }
+.band:not(.band-quiet) .ask { background: var(--rst-surface); }
+.ask-q { margin: 0 0 10px; font: 620 17px/1.35 var(--rst-font); }
+.ask-a { margin: 0 0 14px; color: var(--rst-text-muted); }
+.ask-cite { margin: 0; font-size: 14px; }
+.ask-cite a { font-weight: 600; text-decoration: none; }
+.ask-note { margin: 12px 0 0; color: var(--rst-text-faint); font-size: 14px; }
+
+/* ── Isolation ── */
+.facts { display: grid; gap: 12px; margin: 0; }
+.facts div { padding: 18px 20px; border-radius: 16px; background: var(--rst-surface); box-shadow: 0 0 0 1px var(--rst-line); }
+.facts dt { font-weight: 620; }
+.facts dd { margin: 4px 0 0; color: var(--rst-text-muted); font-size: 15px; }
+
+/* ── Native apps ── */
+/* One tile per Mac app: its icon and name, the download beneath. */
+.dl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
+.dl-list li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 12px; padding: 18px; border-radius: 18px; background: var(--rst-bg); box-shadow: 0 0 0 1px var(--rst-line); }
+.dl-app { font-weight: 620; }
+.dl-list .btn { grid-column: 1 / -1; }
+.dl-req { margin: 20px 0 0; color: var(--rst-text-faint); font-size: 14px; }
+.tf { margin-top: 44px; max-width: 62ch; }
+.tf h3 { margin: 0 0 10px; font: 620 20px/1.25 var(--rst-font); letter-spacing: -0.015em; }
+.tf p { margin: 0 0 10px; color: var(--rst-text-muted); }
+
+/* ── Footer ── */
+.foot { padding-block: 56px 64px; border-top: 1px solid var(--rst-line); background: var(--rst-surface); }
+.foot-in { display: grid; grid-template-columns: auto auto 1fr; gap: 56px; }
+.foot-h { margin: 0 0 12px; color: var(--rst-text-faint); font: 650 13px/1 var(--rst-font); }
+.foot ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
+.foot a { color: var(--rst-text-muted); text-decoration: none; font-size: 14.5px; }
+.foot a:hover { color: var(--rst-text); }
+.colophon { justify-self: end; max-width: 52ch; margin: 0; color: var(--rst-text-faint); font-size: 13.5px; line-height: 1.6; }
+
+/* ── Narrower screens ── */
+@media (max-width: 1060px) {
+ .family { grid-template-columns: repeat(2, 1fr); }
+ .doc { width: 460px; }
+}
+@media (max-width: 880px) {
+ .stage { height: auto; padding: 18px 14px 0; }
+ .launch { position: static; width: auto; }
+ .doc { position: static; width: auto; height: 250px; margin-top: 14px; border-radius: 16px 16px 0 0; }
+ .doc-page { padding: 18px 22px; }
+ .two { grid-template-columns: 1fr; gap: 32px; }
+ .foot-in { grid-template-columns: 1fr 1fr; gap: 32px; }
+ .colophon { grid-column: 1 / -1; justify-self: start; }
+}
+@media (max-width: 640px) {
+ .shell { padding-inline: 20px; }
+ .nav { display: none; }
+ .hero-in { padding-top: 44px; }
+ .stage { margin-top: 40px; }
+ .band { padding-block: 64px; }
+ .family { grid-template-columns: 1fr; }
+ .launch-apps li { padding: 10px 4px; }
+}
+/* In dark the sky runs brighter (estilo's gain) and the muted lead on its
+ brightest band fell under 4.5:1 (review, discussion 75): the hero's sky
+ is quieter there, and its words full-strength. */
+@media (prefers-color-scheme: dark) {
+ .hero { --estilo-sky-strength: 0.32; }
+ .hero-lead { color: var(--rst-text); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .btn, .family li { transition: none; }
}
diff --git a/internal/home/static/site/index.html b/internal/home/static/site/index.html
index 7058f2e..23e596b 100644
--- a/internal/home/static/site/index.html
+++ b/internal/home/static/site/index.html
@@ -8,105 +8,129 @@
<link rel="icon" type="image/png" sizes="32x32" href="/static/brand/icon-32.png">
<link rel="icon" type="image/svg+xml" href="/static/brand/icon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/static/brand/apple-touch-icon.png">
+<link rel="stylesheet" href="/static/estilo/fonts/v1/fonts.css">
+<link rel="stylesheet" href="/static/theme.css">
+<link rel="stylesheet" href="/static/estilo/sky.css">
+<link rel="stylesheet" href="/static/site/apps.css">
<link rel="stylesheet" href="/static/site/home.css">
</head>
<body>
-<a class="skip" href="#directory">Skip to the app directory</a>
+<a class="skip" href="#directory">Skip to the apps</a>
<header class="bar">
<div class="shell bar-in">
- <a class="mark" href="/"><span>Oficina</span></a>
+ <a class="mark" href="/"><img src="/static/brand/icon.svg" alt="" width="30" height="30"><span>Oficina</span></a>
<nav class="nav" aria-label="Sections of this page">
<a href="#directory">Apps</a>
<a href="#memoria">Memoria</a>
<a href="#isolation">Privacy</a>
- <a href="#native">Native apps</a>
+ <a href="#native">Mac apps</a>
</nav>
- <a class="btn btn-bone bar-cta" href="/auth/start?return_to=%2F">Sign in</a>
+ <a class="btn btn-quiet" href="/auth/start?return_to=%2F">Sign in</a>
</div>
</header>
<main>
- <!-- ───────── Hero: the lobby directory ───────── -->
- <section class="band band-ink hero">
- <div class="shell">
- <h1 class="hero-h">Open your new<br> office suite.</h1>
+ <!-- ───────── Hero: every app's colour, together, behind the headline ───────── -->
+ <section class="hero" estilo-sky-host>
+ <div estilo-sky aria-hidden="true">
+ <img estilo-sky-layer="haze" estilo-sky-tone="light" src="/static/estilo/sky/v1/fffadbd9c1aa2b94/haze-light.svg" alt="" loading="lazy" decoding="async">
+ <img estilo-sky-layer="haze" estilo-sky-tone="dark" src="/static/estilo/sky/v1/fffadbd9c1aa2b94/haze-dark.svg" alt="" loading="lazy" decoding="async">
+ <img estilo-sky-layer="clouds" estilo-sky-tone="light" src="/static/estilo/sky/v1/fffadbd9c1aa2b94/clouds-light.svg" alt="" loading="lazy" decoding="async">
+ <img estilo-sky-layer="clouds" estilo-sky-tone="dark" src="/static/estilo/sky/v1/fffadbd9c1aa2b94/clouds-dark.svg" alt="" loading="lazy" decoding="async">
+ <img estilo-sky-layer="filaments" src="/static/estilo/sky/v1/fffadbd9c1aa2b94/filaments.svg" alt="" loading="lazy" decoding="async">
+ </div>
+ <div class="shell hero-in">
+ <h1 class="hero-h">Open your new office suite.</h1>
<p class="hero-lead">Oficina is fast, modern and light enough to forget it&rsquo;s running.
Six apps that share one account, in the browser or as real native apps &mdash;
with your team&rsquo;s work sealed inside your team&rsquo;s own instance.</p>
+ <div class="acts">
+ <a class="btn" href="https://memoria.oficina.works">Try Memoria</a>
+ <a class="btn btn-quiet" href="/auth/start?return_to=%2F">Sign in</a>
+ </div>
+ </div>
- <div class="plate" id="directory">
- <table class="directory">
- <caption>Everything in Oficina, and where you can open it today. Every app runs in the browser, five have a Mac app, and the iPhone apps are close.</caption>
- <thead>
- <tr>
- <th scope="col"><span class="vh">App</span></th>
- <th scope="col"><span class="vh">What it does</span></th>
- <th scope="col">Web</th>
- <th scope="col">Mac</th>
- <th scope="col">iPhone</th>
- </tr>
- </thead>
- <tbody>
- <tr style="--row:1">
- <th scope="row" class="c-app">Docs</th>
- <td class="c-what">Write together, in the same paragraph.</td>
- <td class="c-get" data-label="Web"><a href="https://docs.oficina.works">Open</a></td>
- <td class="c-get" data-label="Mac"><a href="https://raw.amadan.net/oficina/native-releases/a48d4751df238594c8ee056e53e278124754c3be/docs/releases/net.amadan.oficina.docs-7.zip">Download</a></td>
- <td class="c-get" data-label="iPhone"><a class="soon" href="#testflight">Soon</a></td>
- </tr>
- <tr style="--row:2">
- <th scope="row" class="c-app">Sheets</th>
- <td class="c-what">Formulas, ranges and a grid that keeps up.</td>
- <td class="c-get" data-label="Web"><a href="https://sheets.oficina.works">Open</a></td>
- <td class="c-get" data-label="Mac"><a href="https://raw.amadan.net/oficina/native-releases/86c695b0ea23eace253a3a36133dc04b5ec4f82a/sheets/releases/net.amadan.oficina.sheets-9.zip">Download</a></td>
- <td class="c-get" data-label="iPhone"><a class="soon" href="#testflight">Soon</a></td>
- </tr>
- <tr style="--row:3">
- <th scope="row" class="c-app">Slides</th>
- <td class="c-what">Build the deck, then stand up and present it.</td>
- <td class="c-get" data-label="Web"><a href="https://slides.oficina.works">Open</a></td>
- <td class="c-get c-none" data-label="Mac"><span aria-hidden="true">—</span><span class="vh">No Mac app</span></td>
- <td class="c-get c-none" data-label="iPhone"><span aria-hidden="true">—</span><span class="vh">No iPhone app</span></td>
- </tr>
- <tr style="--row:4">
- <th scope="row" class="c-app">Calendar</th>
- <td class="c-what">Everyone&rsquo;s week, without the reply-all.</td>
- <td class="c-get" data-label="Web"><a href="https://calendar.oficina.works">Open</a></td>
- <td class="c-get" data-label="Mac"><a href="https://raw.amadan.net/oficina/native-releases/main/calendar/releases/net.amadan.oficina.calendar-2.zip">Download</a></td>
- <td class="c-get" data-label="iPhone"><a class="soon" href="#testflight">Soon</a></td>
- </tr>
- <tr style="--row:5">
- <th scope="row" class="c-app">Calls</th>
- <td class="c-what">Meet without installing anything first.</td>
- <td class="c-get" data-label="Web"><a href="https://calls.oficina.works">Open</a></td>
- <td class="c-get" data-label="Mac"><a href="https://raw.amadan.net/oficina/native-releases/2a78e04fdc6869e3c7edcccc1467e470b27c0df2/calls/releases/net.amadan.oficina.calls-18.zip">Download</a></td>
- <td class="c-get c-none" data-label="iPhone"><span aria-hidden="true">—</span><span class="vh">No iPhone app</span></td>
- </tr>
- <tr class="r-new" style="--row:6">
- <th scope="row" class="c-app">Memoria <em>New</em></th>
- <td class="c-what">Ask your own documents a question.</td>
- <td class="c-get" data-label="Web"><a href="https://memoria.oficina.works">Open</a></td>
- <td class="c-get" data-label="Mac"><a href="https://raw.amadan.net/oficina/native-releases/main/memoria/releases/net.amadan.oficina.memoria-2.zip">Download</a></td>
- <td class="c-get" data-label="iPhone"><a class="soon" href="#testflight">Soon</a></td>
- </tr>
- </tbody>
- </table>
+ <!-- The product is the picture: a launcher and a document, drawn in HTML. -->
+ <div class="shell">
+ <div class="stage" aria-hidden="true">
+ <div class="launch">
+ <p class="launch-h"><img src="/static/brand/icon.svg" alt="" width="22" height="22"><b>Your team</b><span>6 apps</span></p>
+ <ul class="launch-apps">
+ <li><img src="/static/brand/docs.svg" alt="" width="50" height="50">Docs</li>
+ <li><img src="/static/brand/sheets.svg" alt="" width="50" height="50">Sheets</li>
+ <li><img src="/static/brand/slides.svg" alt="" width="50" height="50">Slides</li>
+ <li><img src="/static/brand/calendar.svg" alt="" width="50" height="50">Calendar</li>
+ <li><img src="/static/brand/calls.svg" alt="" width="50" height="50">Calls</li>
+ <li><img src="/static/brand/memoria.svg" alt="" width="50" height="50">Memoria</li>
+ </ul>
+ </div>
+ <div class="doc" data-app="docs">
+ <p class="doc-bar"><span class="lights"><i></i><i></i><i></i></span><img src="/static/brand/docs.svg" alt="" width="20" height="20"><b>Docs</b><span>Packing list, Thursday site visit</span></p>
+ <div class="doc-page">
+ <p class="doc-h">Packing list, Thursday site visit</p>
+ <p>Leaving from the depot at 7:30, back by mid-afternoon. The forecast says overcast with rain after noon, so pack for both.</p>
+ <p>Bring hard hats (two spares are already in the van), the folding tape measure rather than the laser, high-vis vests, the signed site access letter, spare camera batteries and a <mark>full water bottle each</mark>. There is no tap on site.</p>
+ </div>
+ </div>
</div>
+ </div>
+ </section>
- <div class="acts">
- <a class="btn btn-bone" href="https://memoria.oficina.works">Try Memoria</a>
- <a class="btn btn-ghost" href="/auth/start?return_to=%2F">Sign in</a>
+ <!-- ───────── The apps, and where to open each today ───────── -->
+ <section class="band" id="directory">
+ <div class="shell">
+ <div class="sec-head">
+ <h2>Six apps, one family.</h2>
+ <p class="prose">Every app runs in the browser, five have a Mac app, and the iPhone apps are close.</p>
</div>
+ <ul class="family">
+ <li data-app="docs">
+ <img src="/static/brand/docs.svg" alt="" width="56" height="56">
+ <h3>Docs</h3>
+ <p>Write together, in the same paragraph.</p>
+ <p class="get"><a href="https://docs.oficina.works">Open</a><a href="https://raw.amadan.net/oficina/native-releases/a48d4751df238594c8ee056e53e278124754c3be/docs/releases/net.amadan.oficina.docs-7.zip">Download for Mac</a><a class="soon" href="#testflight">iPhone soon</a></p>
+ </li>
+ <li data-app="sheets">
+ <img src="/static/brand/sheets.svg" alt="" width="56" height="56">
+ <h3>Sheets</h3>
+ <p>Formulas, ranges and a grid that keeps up.</p>
+ <p class="get"><a href="https://sheets.oficina.works">Open</a><a href="https://raw.amadan.net/oficina/native-releases/86c695b0ea23eace253a3a36133dc04b5ec4f82a/sheets/releases/net.amadan.oficina.sheets-9.zip">Download for Mac</a><a class="soon" href="#testflight">iPhone soon</a></p>
+ </li>
+ <li data-app="slides">
+ <img src="/static/brand/slides.svg" alt="" width="56" height="56">
+ <h3>Slides</h3>
+ <p>Build the deck, then stand up and present it.</p>
+ <p class="get"><a href="https://slides.oficina.works">Open</a><span class="none">Browser only, for now</span></p>
+ </li>
+ <li data-app="calendar">
+ <img src="/static/brand/calendar.svg" alt="" width="56" height="56">
+ <h3>Calendar</h3>
+ <p>Everyone&rsquo;s week, without the reply-all.</p>
+ <p class="get"><a href="https://calendar.oficina.works">Open</a><a href="https://raw.amadan.net/oficina/native-releases/main/calendar/releases/net.amadan.oficina.calendar-2.zip">Download for Mac</a><a class="soon" href="#testflight">iPhone soon</a></p>
+ </li>
+ <li data-app="calls">
+ <img src="/static/brand/calls.svg" alt="" width="56" height="56">
+ <h3>Calls</h3>
+ <p>Meet without installing anything first.</p>
+ <p class="get"><a href="https://calls.oficina.works">Open</a><a href="https://raw.amadan.net/oficina/native-releases/2a78e04fdc6869e3c7edcccc1467e470b27c0df2/calls/releases/net.amadan.oficina.calls-18.zip">Download for Mac</a></p>
+ </li>
+ <li data-app="memoria">
+ <img src="/static/brand/memoria.svg" alt="" width="56" height="56">
+ <h3>Memoria <em>New</em></h3>
+ <p>Ask your own documents a question.</p>
+ <p class="get"><a href="https://memoria.oficina.works">Open</a><a href="https://raw.amadan.net/oficina/native-releases/main/memoria/releases/net.amadan.oficina.memoria-2.zip">Download for Mac</a><a class="soon" href="#testflight">iPhone soon</a></p>
+ </li>
+ </ul>
</div>
</section>
<!-- ───────── Memoria ───────── -->
- <section class="band" id="memoria">
- <div class="shell two two-tight">
- <div class="two-a">
+ <section class="band band-quiet" id="memoria" data-app="memoria">
+ <div class="shell two">
+ <div>
<h2>Introducing Memoria, your organisation&rsquo;s shared memory.</h2>
<p class="prose">Every team keeps its answers in places nobody can search: an old thread,
a deck from March, the contract nobody re-read. Memoria holds your team&rsquo;s
@@ -117,8 +141,7 @@
on your own hardware or ours.</p>
<p><a class="lnk" href="https://memoria.oficina.works">Try Memoria with your own documents</a></p>
</div>
-
- <div class="two-b">
+ <div>
<div class="ask">
<p class="ask-q">What did we promise Vitoria about keeping their data?</p>
<p class="ask-a">Ninety days by default, extendable to a year on request. Agreed
@@ -131,55 +154,52 @@
</section>
<!-- ───────── Isolation ───────── -->
- <section class="band band-quiet" id="isolation">
- <div class="shell">
- <h2 class="wide">Every team gets its own building.</h2>
- <div class="two">
- <div class="two-a">
- <p class="prose">Most suites put every customer in one enormous database and
- separate you with a column. Oficina doesn&rsquo;t. Your team gets its own
- instance, its own store and its own key, so isolation is a property of
- the architecture rather than a promise about our query filters.</p>
- <p class="prose">It also means you can take it with you. Run Oficina on our
- infrastructure, in your own cloud, or on a machine in your office &mdash;
- the apps are the same either way.</p>
- </div>
- <dl class="facts two-b">
- <div>
- <dt>One instance per team</dt>
- <dd>Your data has its own store and its own encryption key. There is no shared table to leak across.</dd>
- </div>
- <div>
- <dt>Nothing leaves to be indexed</dt>
- <dd>Search and Memoria build their indexes inside your instance. No document is sent out to be read.</dd>
- </div>
- <div>
- <dt>Sharing stops at your edge</dt>
- <dd>Documents are shared by name, inside your team, and stay that way until someone changes it.</dd>
- </div>
- </dl>
+ <section class="band" id="isolation">
+ <div class="shell two">
+ <div>
+ <h2>Every team gets its own building.</h2>
+ <p class="prose">Most suites put every customer in one enormous database and
+ separate you with a column. Oficina doesn&rsquo;t. Your team gets its own
+ instance, its own store and its own key, so isolation is a property of
+ the architecture rather than a promise about our query filters.</p>
+ <p class="prose">It also means you can take it with you. Run Oficina on our
+ infrastructure, in your own cloud, or on a machine in your office &mdash;
+ the apps are the same either way.</p>
</div>
+ <dl class="facts">
+ <div>
+ <dt>One instance per team</dt>
+ <dd>Your data has its own store and its own encryption key. There is no shared table to leak across.</dd>
+ </div>
+ <div>
+ <dt>Nothing leaves to be indexed</dt>
+ <dd>Search and Memoria build their indexes inside your instance. No document is sent out to be read.</dd>
+ </div>
+ <div>
+ <dt>Sharing stops at your edge</dt>
+ <dd>Documents are shared by name, inside your team, and stay that way until someone changes it.</dd>
+ </div>
+ </dl>
</div>
</section>
<!-- ───────── Native apps ───────── -->
- <section class="band band-ink" id="native">
+ <section class="band band-quiet" id="native">
<div class="shell">
- <h2 class="wide">Native apps, not a browser in a costume.</h2>
- <p class="hero-lead">Five of the six edit the same documents as the web apps,
- with native editors rather than an embedded web view. They launch fast, they
- keep working when the connection drops, and they sync when it comes back.</p>
-
- <div class="plate plate-flat">
- <ul class="dl-list">
- <li><span class="dl-app">Docs</span><a class="btn btn-bone btn-sm" href="https://raw.amadan.net/oficina/native-releases/a48d4751df238594c8ee056e53e278124754c3be/docs/releases/net.amadan.oficina.docs-7.zip">Download</a></li>
- <li><span class="dl-app">Sheets</span><a class="btn btn-bone btn-sm" href="https://raw.amadan.net/oficina/native-releases/86c695b0ea23eace253a3a36133dc04b5ec4f82a/sheets/releases/net.amadan.oficina.sheets-9.zip">Download</a></li>
- <li><span class="dl-app">Calendar</span><a class="btn btn-bone btn-sm" href="https://raw.amadan.net/oficina/native-releases/main/calendar/releases/net.amadan.oficina.calendar-2.zip">Download</a></li>
- <li><span class="dl-app">Memoria</span><a class="btn btn-bone btn-sm" href="https://raw.amadan.net/oficina/native-releases/main/memoria/releases/net.amadan.oficina.memoria-2.zip">Download</a></li>
- <li><span class="dl-app">Calls</span><a class="btn btn-bone btn-sm" href="https://raw.amadan.net/oficina/native-releases/2a78e04fdc6869e3c7edcccc1467e470b27c0df2/calls/releases/net.amadan.oficina.calls-18.zip">Download</a></li>
- </ul>
- <p class="dl-req">Apple silicon, signed and notarized. Docs and Sheets need macOS&nbsp;26; Calendar, Memoria and Calls need macOS&nbsp;14. Slides runs in the browser and has no Mac app yet.</p>
+ <div class="sec-head">
+ <h2>Native apps, not a browser in a costume.</h2>
+ <p class="prose">Five of the six edit the same documents as the web apps,
+ with native editors rather than an embedded web view. They launch fast, they
+ keep working when the connection drops, and they sync when it comes back.</p>
</div>
+ <ul class="dl-list">
+ <li data-app="docs"><img src="/static/brand/docs.svg" alt="" width="36" height="36"><span class="dl-app">Docs</span><a class="btn btn-sm" href="https://raw.amadan.net/oficina/native-releases/a48d4751df238594c8ee056e53e278124754c3be/docs/releases/net.amadan.oficina.docs-7.zip">Download</a></li>
+ <li data-app="sheets"><img src="/static/brand/sheets.svg" alt="" width="36" height="36"><span class="dl-app">Sheets</span><a class="btn btn-sm" href="https://raw.amadan.net/oficina/native-releases/86c695b0ea23eace253a3a36133dc04b5ec4f82a/sheets/releases/net.amadan.oficina.sheets-9.zip">Download</a></li>
+ <li data-app="calendar"><img src="/static/brand/calendar.svg" alt="" width="36" height="36"><span class="dl-app">Calendar</span><a class="btn btn-sm" href="https://raw.amadan.net/oficina/native-releases/main/calendar/releases/net.amadan.oficina.calendar-2.zip">Download</a></li>
+ <li data-app="memoria"><img src="/static/brand/memoria.svg" alt="" width="36" height="36"><span class="dl-app">Memoria</span><a class="btn btn-sm" href="https://raw.amadan.net/oficina/native-releases/main/memoria/releases/net.amadan.oficina.memoria-2.zip">Download</a></li>
+ <li data-app="calls"><img src="/static/brand/calls.svg" alt="" width="36" height="36"><span class="dl-app">Calls</span><a class="btn btn-sm" href="https://raw.amadan.net/oficina/native-releases/2a78e04fdc6869e3c7edcccc1467e470b27c0df2/calls/releases/net.amadan.oficina.calls-18.zip">Download</a></li>
+ </ul>
+ <p class="dl-req">Apple silicon, signed and notarized. Docs and Sheets need macOS&nbsp;26; Calendar, Memoria and Calls need macOS&nbsp;14. Slides runs in the browser and has no Mac app yet.</p>
<div class="tf" id="testflight">
<h3>Unzip it and move it to Applications.</h3>
@@ -195,8 +215,8 @@
<!-- ───────── Where to start ───────── -->
<section class="band" id="signup">
- <div class="shell two two-tight">
- <div class="two-a">
+ <div class="shell two">
+ <div>
<h2>Oficina isn&rsquo;t open for sign-ups yet.</h2>
<p class="prose">Creating a team still means one of us provisioning the
instance by hand, so there is no form here that would do anything. The
@@ -204,7 +224,7 @@
your time first.</p>
<p class="prose sm">When sign-ups open, the same page will say so.</p>
</div>
- <div class="two-b">
+ <div>
<div class="ask">
<p class="ask-q">Already have an Oficina account?</p>
<p class="ask-a">Open any app above and sign in with your work email.
@@ -238,9 +258,10 @@
<li><a href="https://amadan.net/oficina/docs/-/releases/v0.1.0">Releases</a></li>
</ul>
</div>
- <p class="colophon">This page is one HTML file, one stylesheet and two typefaces served
- from our own machines. It runs no scripts, sets no cookies and calls nothing
- third-party &mdash; which is why there is no banner asking your permission.</p>
+ <p class="colophon">This page is one HTML file, a few stylesheets, one typeface and
+ a sky drawn in SVG, all served from our own machines. It runs no scripts, sets no
+ cookies and calls nothing third-party &mdash; which is why there is no banner
+ asking your permission.</p>
</div>
</footer>
diff --git a/internal/home/static/site/newsreader-ext.woff2 b/internal/home/static/site/newsreader-ext.woff2
deleted file mode 100644
index 622a9f7..0000000
Binary files a/internal/home/static/site/newsreader-ext.woff2 and /dev/null differ
diff --git a/internal/home/static/site/newsreader.woff2 b/internal/home/static/site/newsreader.woff2
deleted file mode 100644
index 8cd8eff..0000000
Binary files a/internal/home/static/site/newsreader.woff2 and /dev/null differ
diff --git a/internal/home/templates/directory.html b/internal/home/templates/directory.html
index 7647515..c5854b2 100644
--- a/internal/home/templates/directory.html
+++ b/internal/home/templates/directory.html
@@ -1,22 +1,22 @@
{{define "title"}}Oficina{{end}}
{{define "content"}}
-<h1 estilo-brand><img estilo-brand-icon src="/static/brand/icon.svg" alt="" width="28" height="28">Oficina</h1>
-<p>You are signed in.</p>
+<header home-hub-head>
+<h1 estilo-brand><img estilo-brand-icon src="/static/brand/icon.svg" alt="" width="40" height="40">Oficina</h1>
+<form method="post" action="/signout"><button type="submit" rst-btn>Sign out</button></form>
+</header>
+<p home-hub-lede>You are signed in. Every app below opens with this one account.</p>
<section aria-labelledby="apps-heading">
-<h2 id="apps-heading">Apps</h2>
-<div rst-list>
+<h2 id="apps-heading" home-hub-h>Apps</h2>
+<ul home-apps>
{{range .Apps}}
-<div rst-row>
-{{if .Icon}}<img estilo-brand-icon="listing" src="{{.Icon}}" alt="" width="40" height="40">{{end}}
-<div rst-row-main>
-{{if .Href}}<a href="{{.Href}}">{{.Name}}</a>{{else}}<strong>{{.Name}}</strong>{{end}}
-<span rst-row-sub>{{.Status}}</span>
-</div>
-</div>
+<li>{{if .Href}}<a home-app href="{{.Href}}">{{else}}<div home-app>{{end}}
+{{if .Icon}}<img src="{{.Icon}}" alt="" width="56" height="56">{{end}}
+<b>{{.Name}}</b>
+<small>{{.Status}}</small>
+{{if .Href}}</a>{{else}}</div>{{end}}</li>
{{end}}
-</div>
+</ul>
</section>
-<form method="post" action="/signout" rst-form><button type="submit" rst-btn>Sign out</button></form>
{{end}}
{{define "help"}}{{template "home/help" .}}{{end}}
diff --git a/internal/home/templates/layout.html b/internal/home/templates/layout.html
index b32780f..70a7b07 100644
--- a/internal/home/templates/layout.html
+++ b/internal/home/templates/layout.html
@@ -8,15 +8,22 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{block "title" .}}Oficina{{end}}</title>
+<link rel="stylesheet" href="{{fontsCSS}}">
<link rel="stylesheet" href="/static/tokens.css">
<link rel="stylesheet" href="/static/theme.css">
+<link rel="stylesheet" href="/static/estilo/sky.css">
+<link rel="stylesheet" href="/static/calma.css">
{{block "head" .}}{{end}}
</head>
<body{{block "bodyattrs" .}}{{end}}>
+<div estilo-sky-host home-sky>
+{{if not hop}}{{template "estilo-sky" suiteSky}}{{end}}
{{block "help" .}}{{end}}
-<main rst-page>
+<main rst-page{{if door}} home-door{{end}}>
+{{if door}}<p estilo-brand><img estilo-brand-icon src="/static/brand/icon.svg" alt="" width="36" height="36">Oficina</p>{{end}}
{{template "content" .}}
</main>
+</div>
{{block "scripts" .}}{{end}}
</body>
</html>