/* ThesisIQ public site. The palette is the product's own, from src/ThesisIQ.App/Resources/Styles/Colors.xaml, which in turn came from the Lovable design tokens: warm grey ground, petrol primary, gold-beige accent. One deliberate deviation, marked below, where an app token does not reach WCAG AA as body text. No web fonts. Libre Baskerville and Inter are the product's typefaces, but a font file served from here would be one more asset to ship and one more thing to keep in sync, and a font fetched from a foundry would be a third-party request on a site that promises none. The stacks below name Georgia and the platform's own UI face, which are the closest things every device already has. */ :root { --background: #F7F5F3; --foreground: #22282A; --card: #FDFDFC; --primary: #195257; --primary-foreground: #F9F8F5; --secondary: #F2EDE3; --accent: #EAE1CD; --border: #E0DDD7; /* Colors.xaml's MutedForeground is #6A767C, which is 4.3:1 on this background — under AA for body text. Darkened to 5.5:1 here. Web body copy sits at 16px where the app's does not. */ --muted-foreground: #5A656B; --font-serif: Georgia, "Times New Roman", serif; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --measure: 34rem; --radius: 0.5rem; } @media (prefers-color-scheme: dark) { :root { --background: #0E1415; --foreground: #EEECE7; --card: #171F21; --primary: #3B9B9B; --primary-foreground: #0F181A; --secondary: #171F21; --accent: #232D2F; --border: #2B383B; --muted-foreground: #9A917E; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; text-rendering: optimizeLegibility; } /* The whole-page language switch. Markup carries both languages; the attribute on decides which one is in the accessibility tree at all. Without JavaScript the document stays Swedish, which is the primary market — a broken toggle degrades to a complete page, not half of one. */ html[data-lang="sv"] .en { display: none; } html[data-lang="en"] .sv { display: none; } img, svg { max-width: 100%; height: auto; } a { color: var(--primary); } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--primary); color: var(--primary-foreground); padding: 0.75rem 1rem; z-index: 100; } .skip-link:focus { left: 0; } .wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; } /* The long-form sections keep the hero's left edge and constrain the line length on the elements themselves. Centring a narrow column under a left-aligned hero reads as two different pages. */ .narrow > div > * { max-width: var(--measure); } /* ── Header ─────────────────────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--border); background: var(--background); position: sticky; top: 0; z-index: 10; } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; padding-block: 0.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; } .brand img { width: 2.6rem; height: auto; } .brand-name { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; } .lang-switch { display: inline-flex; align-items: center; gap: 0.4rem; } .lang-switch-label { font-size: 0.8rem; color: var(--muted-foreground); margin-right: 0.2rem; } .lang-switch button { font: inherit; font-size: 0.9rem; min-height: 2.75rem; padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--foreground); cursor: pointer; } .lang-switch button:hover { background: var(--secondary); } .lang-switch button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } /* ── Sections ───────────────────────────────────────────────────────────── */ main:focus { outline: none; } section { padding: 3.25rem 0; border-bottom: 1px solid var(--border); } section.band { background: var(--secondary); } section:last-of-type { border-bottom: 0; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; } h1 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); margin: 0 0 1rem; } h2 { font-size: clamp(1.35rem, 3.6vw, 1.7rem); margin: 2.5rem 0 0.9rem; } section > .wrap > div > h2:first-child { margin-top: 0; } h3 { font-size: 1.05rem; margin: 0 0 0.25rem; } p { margin: 0 0 1rem; max-width: var(--measure); } .lead { font-size: 1.12rem; color: var(--foreground); } .lead-note { color: var(--muted-foreground); font-style: italic; } .status-flag { margin-top: 1.5rem; font-size: 0.95rem; } .status-flag a { display: inline-block; padding: 0.55rem 0.9rem; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); background: var(--card); color: var(--foreground); text-decoration: none; } .status-flag a:hover { border-color: var(--primary); } .fineprint { font-size: 0.9rem; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1.75rem; } /* ── Hero ───────────────────────────────────────────────────────────────── */ .hero { padding-top: 3.5rem; } .hero-grid { display: grid; gap: 2.5rem; } @media (min-width: 56rem) { .hero-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 3.5rem; } } .mockup { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; } .mockup-bar { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.8rem; color: var(--muted-foreground); letter-spacing: 0.02em; } .mockup-body { padding: 1.1rem; display: grid; gap: 0.9rem; } .turn { display: flex; gap: 0.7rem; align-items: flex-start; } .who { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; margin-top: 0.15rem; } .who-opponent { background: var(--primary); color: var(--primary-foreground); } .who-candidate { background: var(--accent); color: var(--foreground); } .bubble { margin: 0; padding: 0.65rem 0.9rem; border-radius: var(--radius); font-size: 0.94rem; line-height: 1.55; max-width: none; } .bubble-opponent { background: var(--secondary); } .bubble-candidate { background: var(--accent); } @media (prefers-color-scheme: dark) { .bubble-opponent { background: var(--accent); } .bubble-candidate { background: var(--secondary); } } .bubble-role { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin-bottom: 0.2rem; } .mockup figcaption { padding: 0.75rem 1rem 1rem; font-size: 0.82rem; color: var(--muted-foreground); } /* ── Lists ──────────────────────────────────────────────────────────────── */ ul, ol { max-width: var(--measure); } .marks { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; } .marks li { position: relative; padding-left: 1.25rem; } .marks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--primary); } .dashes { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.6rem; } .dashes li { position: relative; padding-left: 1.4rem; } .dashes li::before { content: "\2014"; position: absolute; left: 0; color: var(--primary); } .plain-list { list-style: none; padding: 1rem 0 0; margin: 1.75rem 0 0; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.94rem; display: grid; gap: 0.35rem; } .steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1rem; display: grid; gap: 1.6rem; } .steps li { counter-increment: step; display: grid; grid-template-columns: 2.35rem 1fr; column-gap: 0.9rem; row-gap: 0.3rem; } /* The numbered disc is the ::before and auto-places into the first cell. Everything else belongs in the second column — without this the paragraph falls into the disc's column and wraps one word to a line. */ .steps li > * { grid-column: 2; } .steps li::before { content: counter(step); width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; } .steps p { margin: 0; } /* ── Details ────────────────────────────────────────────────────────────── */ details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 0.6rem; max-width: var(--measure); } summary { cursor: pointer; padding: 0.85rem 1rem; font-weight: 600; list-style-position: inside; min-height: 2.75rem; } summary:hover { color: var(--primary); } details p { padding: 0 1rem 1rem; margin: 0; color: var(--muted-foreground); } /* ── Buttons and footer ─────────────────────────────────────────────────── */ .cta { margin-top: 1.5rem; } .button { display: inline-block; background: var(--primary); color: var(--primary-foreground); padding: 0.8rem 1.4rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; min-height: 2.75rem; } .button:hover { text-decoration: underline; } .site-footer { border-top: 1px solid var(--border); padding: 2.25rem 0 3rem; font-size: 0.9rem; color: var(--muted-foreground); } .footer-brand { font-family: var(--font-serif); font-weight: 700; color: var(--foreground); margin-bottom: 0.5rem; } .site-footer p { margin-bottom: 0.4rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }