/* Dottl web — shared stylesheet. * Tokens transcribed from the app design system (DottlColors / DottlTypography): * warm cream + espresso neutrals, constant coral accent, Newsreader for display, * Hanken Grotesk for body text. Fonts are self-hosted (OFL) — no external requests. */ /* --- Fonts ----------------------------------------------------------------- */ @font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } /* --- Color tokens ---------------------------------------------------------- */ :root { --accent: #ff6b3d; --accent-pressed: #aa5042; --accent-soft: #ffb394; --background: #f4ecdd; --surface: #ffffff; --surface-2: #fbf5ec; --border: #ece0cd; --border-strong: #e2d4bf; --text: #3a2322; --text-secondary: #7a615a; --text-muted: #95786e; --banner-bg: #ffede5; --banner-text: #b8431f; } @media (prefers-color-scheme: dark) { :root { --background: #161210; --surface: #221a16; --surface-2: #2a201a; --border: #2e231d; --border-strong: #3a2c24; --text: #fff3ec; --text-secondary: #c9b3a6; --text-muted: #a48e80; --banner-bg: #33201a; --banner-text: #ff9a75; } } /* --- Base ------------------------------------------------------------------ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--background); color: var(--text); font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif; font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: "Newsreader", Georgia, serif; font-weight: 500; line-height: 1.2; text-wrap: balance; } h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin: 0 0 0.5rem; } h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; } p, ul, ol { margin: 0.75rem 0; } li { margin: 0.35rem 0; } a { color: var(--accent-pressed); text-decoration-color: var(--accent-soft); text-underline-offset: 3px; } @media (prefers-color-scheme: dark) { a { color: var(--accent-soft); } } a:hover { color: var(--accent); } strong { font-weight: 600; } table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; } th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; } /* --- Language switching ---------------------------------------------------- */ /* The active language is stamped on by lang.js; the inactive language is * hidden. Without JavaScript, French (the authoritative version) is shown. */ :root[data-lang="fr"] [data-l="en"] { display: none !important; } :root[data-lang="en"] [data-l="fr"] { display: none !important; } html:not([data-lang]) [data-l="en"] { display: none !important; } .lang-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); } .lang-toggle button { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.32rem 0.65rem; cursor: pointer; line-height: 1; } .lang-toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; } /* Pending information that must be filled in before publishing. */ .todo { background: var(--banner-bg); color: var(--banner-text); border-radius: 4px; padding: 0.05rem 0.35rem; font-style: normal; } /* --- Wordmark -------------------------------------------------------------- */ .wordmark { display: inline-flex; align-items: center; gap: 0.045em; font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 500; font-size: 1.75rem; color: var(--text); text-decoration: none; line-height: 1; } .wordmark:hover { color: var(--text); } /* The "o" of the wordmark — the coral ring (Pip). */ .wordmark .pip { width: 0.56em; height: 0.56em; border: 0.15em solid var(--accent); border-radius: 50%; display: inline-block; } /* --- Layout ---------------------------------------------------------------- */ .site-header { padding: 1.25rem clamp(1.25rem, 4vw, 3rem); border-bottom: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .site-header nav { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.95rem; } .site-header nav a { color: var(--text-secondary); text-decoration: none; } .site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--accent); } /* Adaptive two-column composition: sticky in-page nav beside the document on * wide screens, stacked on narrow ones. */ .page { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) 4rem; align-items: start; } @media (min-width: 900px) { .page.with-toc { grid-template-columns: 15rem minmax(0, 46rem); } } .toc { display: none; position: sticky; top: 2rem; font-size: 0.9rem; } @media (min-width: 900px) { .toc { display: block; } } .toc p { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.5rem; } .toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border-strong); } .toc li { margin: 0; } .toc a { display: block; padding: 0.3rem 0 0.3rem 0.9rem; color: var(--text-secondary); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; } .toc a:hover { color: var(--accent); border-left-color: var(--accent); } .doc-meta { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 2rem; } /* --- Home ------------------------------------------------------------------ */ .hero { padding: clamp(3rem, 10vw, 7rem) clamp(1.25rem, 4vw, 3rem); display: grid; gap: 1rem; justify-items: start; } .hero .wordmark { font-size: clamp(3rem, 9vw, 5.5rem); } .hero p { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(1.2rem, 2.5vw, 1.6rem); color: var(--text-secondary); max-width: 34ch; margin: 0; } /* --- Auth landings --------------------------------------------------------- */ /* Arrival pages for the links Supabase mails out (confirmation, e-mail change, * password reset…) plus the post-deletion landing. Same composition as .hero: * left-aligned and edge-to-edge, never a centred card. On wide screens the * status mark moves beside the text instead of above it. */ .status { padding: clamp(2.5rem, 9vw, 6rem) clamp(1.25rem, 4vw, 3rem) 4rem; display: grid; gap: 0.75rem 2.5rem; justify-items: start; align-content: start; } @media (min-width: 800px) { /* `justify-content: start` keeps the first track sized to the mark — an `auto` * track would otherwise swallow the leftover width and strand it far left. */ .status { grid-template-columns: auto minmax(0, 44rem); justify-content: start; } /* Every text row is pinned to the second column: relying on auto-placement * drops the children past the mark's row span back into the first one. */ .status > * { grid-column: 2; } .status .mark { grid-column: 1; grid-row: 1; align-self: start; margin-bottom: 0; } } /* Status mark — the coral ring of the wordmark, scaled up. The glyph inside * carries the meaning; the ring color carries the tone. */ .status .mark { width: 3.5rem; height: 3.5rem; border: 0.5rem solid var(--accent); border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; margin-bottom: 0.5rem; } .status .mark.warn { border-color: var(--border-strong); } .status .kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-pressed); margin: 0; } @media (prefers-color-scheme: dark) { .status .kicker { color: var(--accent-soft); } } .status h1 { margin: 0; max-width: 20ch; } .status p { max-width: 56ch; color: var(--text-secondary); } .status .detail { color: var(--text-muted); font-size: 0.95rem; } /* Secondary explanation (what was deleted, what is kept…). */ .status .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.25rem; margin-top: 0.75rem; max-width: 56rem; width: 100%; } .status .panel p:first-child, .status .panel ul:first-child { margin-top: 0; } .status .panel p:last-child, .status .panel ul:last-child { margin-bottom: 0; } .status .actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 1rem; } /* --- Footer ---------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--surface-2); padding: 2rem clamp(1.25rem, 4vw, 3rem); font-size: 0.9rem; color: var(--text-secondary); display: grid; gap: 0.75rem; } .site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; } .site-footer nav a { color: var(--text-secondary); } .site-footer .moderation { color: var(--text-muted); font-size: 0.85rem; }