/* ========================================================================== base.css — structure, layout, and accessibility shared by every theme. Colors, fonts, radii, and spacing "flavor" all come from CSS custom properties set in css/theme-.css. This file never hardcodes a color or a font family so any theme can be swapped in cleanly. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; } /* The header toggle forces a mode by stamping data-color-mode on ; these keep native UI (form controls, scrollbars) in sync with it. */ html[data-color-mode="light"] { color-scheme: light; } html[data-color-mode="dark"] { color-scheme: dark; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Full-bleed bands use 50vw margins, which can overhang by the scrollbar width on some platforms; clip absorbs it. */ overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } main { display: block; } a { color: var(--accent); text-underline-offset: 0.15em; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wrap { max-width: 72rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; border-radius: var(--radius, 4px); z-index: 100; transition: top 0.15s ease; } .skip-link:focus { top: 1rem; } /* ---------- Header / nav ---------- */ .site-header { border-bottom: 1px solid var(--line); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem; } .site-logo { font-family: var(--font-label); font-weight: var(--logo-weight, 700); font-size: var(--logo-size, 1rem); letter-spacing: var(--logo-tracking, 0); text-transform: var(--logo-case, none); color: var(--ink); text-decoration: none; } /* The brand's "LIA" ending picks up the accent (VisibiLIA) */ .site-logo .logo-ia { color: var(--accent); } .site-nav ul { display: flex; gap: clamp(1rem, 2vw, 1.75rem); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .site-nav a { font-family: var(--font-label); font-size: var(--nav-size, 0.9rem); font-weight: var(--nav-weight, 500); letter-spacing: var(--nav-tracking, 0); text-transform: var(--nav-case, none); color: var(--muted); text-decoration: none; padding: 0.2rem 0.1rem; } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--accent); } /* ---------- Language switcher (header) ---------- */ .lang-switcher ul { display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0; } .lang-switcher a { font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); text-decoration: none; padding: 0.35rem 0.45rem; border: 1px solid transparent; border-radius: var(--radius, 4px); } .lang-switcher a:hover { color: var(--ink); border-color: var(--line); } .lang-switcher a[aria-current="true"] { color: var(--accent); border-color: var(--accent); } /* ---------- Light/dark toggle (header) ---------- Shows the icon for the mode you would switch TO: sun when dark is active, moon when light is active. With no data-color-mode attribute the system preference decides; the attribute (set by the button and restored from localStorage before paint) wins in both directions. */ .color-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; background: none; border: 1px solid var(--line); border-radius: var(--radius, 4px); color: var(--muted); cursor: pointer; } .color-mode-toggle:hover { color: var(--accent); border-color: var(--accent); } .color-mode-toggle .icon-sun { display: none; } .color-mode-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { .color-mode-toggle .icon-sun { display: block; } .color-mode-toggle .icon-moon { display: none; } } html[data-color-mode="light"] .color-mode-toggle .icon-sun { display: none; } html[data-color-mode="light"] .color-mode-toggle .icon-moon { display: block; } html[data-color-mode="dark"] .color-mode-toggle .icon-sun { display: block; } html[data-color-mode="dark"] .color-mode-toggle .icon-moon { display: none; } /* ---------- Workflow graphic (homepage) ---------- Semantic warning red for the "AI gets it wrong" chip. Theme-independent (declared here, adapts to light/dark), so it works under every theme. */ :root { --wf-warn: #c81e1e; } @media (prefers-color-scheme: dark) { :root { --wf-warn: #f28a8a; } } html[data-color-mode="light"] { --wf-warn: #c81e1e; } html[data-color-mode="dark"] { --wf-warn: #f28a8a; } .workflow { margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem); } .wf-flow { list-style: none; margin: 0; padding: 0; display: flex; gap: 2.25rem; align-items: stretch; } .wf-node { position: relative; flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius, 4px); padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.55rem; } /* Connector arrow between nodes (horizontal on desktop) */ .wf-node::after { content: "\2192"; position: absolute; right: -1.55rem; top: 50%; transform: translateY(-50%); font-family: var(--font-label); font-size: 1.05rem; color: var(--accent); pointer-events: none; } .wf-node:last-child::after { content: none; } .wf-node--accent { border-color: var(--accent); border-width: 2px; padding: calc(1rem - 1px) calc(1.1rem - 1px) calc(1.15rem - 1px); } .wf-num { font-family: var(--font-label); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); } .wf-text { margin: 0; font-size: 0.92rem; line-height: 1.4; color: var(--ink); max-width: none; } .wf-chip { align-self: flex-start; font-family: var(--font-label); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wf-warn); border: 1px solid var(--wf-warn); border-radius: 999px; padding: 0.15rem 0.55rem; } .wf-loop { align-self: flex-start; font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--accent); } .wf-caption { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--muted); max-width: 60ch; } @media (max-width: 720px) { .wf-flow { flex-direction: column; gap: 1.7rem; } .wf-node::after { right: auto; left: 1.4rem; top: auto; bottom: -1.35rem; transform: rotate(90deg); } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); margin-top: clamp(3rem, 8vw, 6rem); } .site-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1.5rem; font-size: 0.85rem; color: var(--muted); } .footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .footer-links a { color: var(--muted); } .footer-links a:hover { color: var(--ink); } /* ---------- Page / article prose ---------- */ .page { padding-block: clamp(2rem, 4.5vw, 3.25rem); font-size: 0.95rem; line-height: 1.55; } .page h1 { font-family: var(--font-display); font-weight: var(--headline-weight, 600); font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: var(--headline-lh, 1.15); letter-spacing: var(--headline-tracking, -0.01em); max-width: 24ch; text-wrap: balance; margin: 0 0 1.25rem; } .page h2 { font-family: var(--font-display); font-weight: var(--headline-weight, 600); font-size: clamp(1.3rem, 2.3vw, 1.65rem); line-height: 1.25; margin: clamp(1.9rem, 3.5vw, 2.6rem) 0 0.85rem; } .page h3 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; } .page h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 1.5rem 0 0.4rem; } .page p { max-width: 68ch; color: var(--ink); margin: 0 0 0.95rem; } .page ul, .page ol { max-width: 68ch; padding-left: 1.4rem; margin: 0 0 0.95rem; } .page li { margin-bottom: 0.35rem; } .page strong { color: var(--ink); } /* Bold "call to action" links (markdown **[Label]**) render as buttons */ .page p > strong:first-child > a:only-child { display: inline-block; font-family: var(--font-label); font-size: 0.92rem; font-weight: 600; letter-spacing: var(--cta-tracking, 0); text-transform: var(--cta-case, none); background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--cta-radius, 4px); padding: 0.85rem 1.5rem; text-decoration: none; margin-right: 1rem; margin-bottom: 0.5rem; } .page p > strong:first-child > a:only-child:hover { opacity: 0.88; } /* Plain (non-bold) inline links act as the "secondary" call to action */ .page p > a { font-family: var(--font-label); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; } .breadcrumb { margin-bottom: 1.5rem; } .breadcrumb a { font-size: 0.9rem; font-weight: 600; text-decoration: none; } /* Meta lines (dates, read time) render as micro-labels in each theme's label register: monospace in instrument/synthesis, tracked caps in brief, sentence case in studio. */ .article-meta { font-family: var(--font-label); color: var(--muted); font-size: 0.75rem; letter-spacing: var(--nav-tracking, 0); text-transform: var(--nav-case, none); margin-bottom: 2rem; } /* ---------- Home page composition ---------- */ .home .hero { padding-block: clamp(0.75rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 4.5vw, 3rem); } .home .hero h1 { max-width: 20ch; } .home .hero > h1 + p { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; color: var(--muted); max-width: 52ch; } /* The hero eyebrow ships in the markup on every theme but is opt-in: hidden here, displayed (and styled) by themes that use it. */ .hero-eyebrow { display: none; } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2rem); } @media (max-width: 700px) { .card-grid { grid-template-columns: 1fr; } } .card h3 { margin-top: 0; } .card p { color: var(--muted); font-size: 0.95rem; } /* ---------- Numbered step cards (home "How it works") ---------- Sequence cards with connecting arrows: card -> arrow -> card on desktop, stacked with rotated arrows on mobile. Colors, borders, and radii come from each theme's variables. */ .step-cards { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: clamp(0.75rem, 1.5vw, 1.25rem); align-items: stretch; } .step-card { border: 1px solid var(--line); border-radius: var(--radius, 4px); background: var(--step-card-bg, transparent); padding: clamp(1.1rem, 2vw, 1.4rem); } .step-card h3 { margin: 0 0 0.5rem; } .step-card p { color: var(--muted); font-size: 0.95rem; margin: 0; } .step-num { display: block; font-family: var(--font-label); font-size: 0.8rem; font-weight: 600; letter-spacing: var(--nav-tracking, 0); color: var(--accent); margin-bottom: 0.6rem; } .step-arrow { align-self: center; font-family: var(--font-label); font-size: 1.1rem; color: var(--accent); user-select: none; } @media (max-width: 700px) { .step-cards { grid-template-columns: 1fr; } .step-arrow { justify-self: center; transform: rotate(90deg); } } /* ---------- FAQ embed on the Contact page ---------- */ .faq-embed { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); } /* ---------- Insights list ---------- */ .post-list { list-style: none; margin: 0; padding: 0; } .post-list-item { padding-block: 1.75rem; border-top: 1px solid var(--line); } .post-list-item:first-child { border-top: none; } .post-list-title { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; text-decoration: none; margin-bottom: 0.35rem; } .post-list-item p:last-child { color: var(--muted); margin-bottom: 0; } /* ---------- Dev-only theme switcher (invisible unless injected by JS) --- */ .dev-theme-switcher { position: fixed; right: 1rem; bottom: 1rem; display: flex; gap: 0.4rem; padding: 0.4rem; background: var(--surface, var(--bg)); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4); z-index: 1000; } .dev-theme-switcher button { font-family: var(--font-label); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 0.4rem 0.6rem; cursor: pointer; } .dev-theme-switcher button:hover { border-color: var(--accent); color: var(--accent); }