/* FairAuth website. Colors are the app's (Palette.swift, D-037, D-045): white page, grouped gray cards, the brand blue; text on every background reaches at least 4.5 : 1 in light and dark mode. House rule: only the page container (.wrap) limits the width; text and boxes use the full column. Compact things (the phone pictures, the store buttons) have a fixed width instead. */ :root { --bg: #ffffff; --card: #f2f2f7; --text: #1c1c1e; --secondary: #636366; --brand: #163d6e; --on-brand: #ffffff; --tint: #e6edf6; --line: #d1d1d6; --bezel: #1c1c1e; color-scheme: light dark; } /* Dark: by the system, unless the switch at the top says otherwise (assets/theme.js sets data-theme on ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --card: #1c1c1e; --text: #f2f2f7; --secondary: #aeaeb2; --brand: #9cc2f2; --on-brand: #021d3b; --tint: #16263a; --line: #38383a; --bezel: #3a3a3c; } } :root[data-theme="dark"] { --bg: #000000; --card: #1c1c1e; --text: #f2f2f7; --secondary: #aeaeb2; --brand: #9cc2f2; --on-brand: #021d3b; --tint: #16263a; --line: #38383a; --bezel: #3a3a3c; color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); /* Long words (German compounds, file names) wrap instead of widening the page on a phone; hyphenation follows the page's lang. */ overflow-wrap: break-word; hyphens: auto; font: 1.0625rem/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo", sans-serif; } .wrap { width: min(1100px, 100% - 2 * 1.25rem); margin-inline: auto; } a { color: var(--brand); text-underline-offset: 0.15em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } h1, h2, h3, h4 { line-height: 1.2; margin: 1.6em 0 0.5em; } h1 { font-size: 2.2rem; margin-top: 0.8em; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; } p, ul, ol { margin: 0 0 1em; } code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; } :not(pre) > code { overflow-wrap: anywhere; hyphens: none; } pre { background: var(--card); padding: 1rem; border-radius: 12px; overflow-x: auto; max-width: 100%; } .skip { position: absolute; left: -999px; top: 0.5rem; background: var(--brand); color: var(--on-brand); padding: 0.5rem 1rem; border-radius: 8px; z-index: 2; } .skip:focus { left: 0.5rem; } /* Top bar */ .bar { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); } .bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0.6rem 0; } .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; font-size: 1.15rem; color: var(--text); text-decoration: none; } .brand img { border-radius: 22.5%; } .bar nav { display: flex; gap: 0.3rem 1.2rem; flex-wrap: wrap; font-size: 0.97rem; } .bar nav a { text-decoration: none; color: var(--text); } .bar nav a:hover { color: var(--brand); } [hidden] { display: none !important; } /* Right side of the bar: the look (auto, light, dark) and the language. */ .controls { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; } .theme { display: flex; background: var(--card); border-radius: 999px; padding: 3px; } .theme button { display: grid; place-items: center; width: 32px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--secondary); cursor: pointer; } .theme button:hover { color: var(--text); } .theme button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / 0.18); } .lang-menu { position: relative; } .lang-menu summary { display: flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--card); font-weight: 600; font-size: 0.95rem; } .lang-menu summary::-webkit-details-marker { display: none; } .lang-menu summary::after { content: ""; width: 0.45em; height: 0.45em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); margin-left: 0.15rem; opacity: 0.6; } .lang-menu[open] summary::after { transform: rotate(-135deg) translateY(-1px); } .flag { font-size: 1.15em; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } .lang-menu ul { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 3; margin: 0; padding: 0.4rem; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(11rem, 1fr)); gap: 0.1rem; width: max-content; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.3); } .lang-menu li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; border-radius: 10px; color: var(--text); text-decoration: none; } .lang-menu li a:hover { background: var(--card); } .lang-menu li a[aria-current] { background: var(--tint); font-weight: 650; } /* Hero */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 2rem 3.5rem; padding: 3.5rem 0 2rem; } .hero-icon { border-radius: 22.5%; max-width: 30vw; height: auto; box-shadow: 0 6px 20px rgb(22 61 110 / 0.18); } .hero h1 { font-size: clamp(2.6rem, 6vw, 3.8rem); letter-spacing: -0.02em; margin: 0.45em 0 0.1em; } .tagline { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 600; color: var(--brand); margin-bottom: 0.7em; } .lead { font-size: 1.2rem; } .note { color: var(--secondary); } .hero .note { font-size: 0.97rem; margin-top: 1.2rem; } /* Store buttons: two lines, the platform above the action. */ .stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; } .store { display: flex; flex-direction: column; justify-content: center; min-width: 14rem; min-height: 3.6rem; margin: 0; padding: 0.55rem 1.3rem; border-radius: 14px; line-height: 1.25; text-decoration: none; background: var(--text); color: var(--bg); font-weight: 650; font-size: 1.02rem; } .store:hover { background: var(--brand); color: var(--on-brand); } .store .platform { font-size: 0.8rem; font-weight: 500; opacity: 0.85; } .store.soon { background: var(--card); color: var(--text); font-weight: 600; } .price .store.soon { background: var(--bg); } /* A screenshot in the outline of a phone. The corners scale with the width (the picture is 660 × 1434, so 15 % of the width is 6.9 % of the height). */ .phone { width: min(300px, 72vw); margin: 0; justify-self: center; padding: 3%; border-radius: 15% / 6.9%; background: var(--bezel); box-shadow: 0 30px 60px -20px rgb(22 61 110 / 0.35), 0 12px 24px -12px rgb(0 0 0 / 0.25); } .phone img { display: block; width: 100%; height: auto; border-radius: 12.5% / 5.75%; background: var(--card); } /* A window of the Mac app, with the shadow macOS gives it. */ .window { margin: 0; width: 100%; justify-self: center; } .window img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 28px 60px -18px rgb(22 61 110 / 0.35), 0 10px 24px -10px rgb(0 0 0 / 0.2); } /* A Mac window is wide: both columns get a share, or the picture's own pixel width would squeeze the text into a sliver. */ #features article.showcase.showcase-window { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .showcase .window { width: 100%; } /* The hero: the Mac window, the iPhone in front of its lower right corner. */ .stage { position: relative; padding-bottom: 14%; } .stage .phone { position: absolute; right: -2%; bottom: 0; width: 29%; padding: 1.1%; } /* Sections */ section { margin-top: 4.5rem; } section > h2, .showcase-text h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -0.01em; margin: 0 0 1.2rem; } .showcase { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem 4rem; padding: 2.5rem 0; border-bottom: 1px solid var(--line); } .showcase:last-of-type { border-bottom: 0; } #features .showcase:nth-of-type(even) { grid-template-columns: auto 1fr; } #features .showcase:nth-of-type(even) .phone, #features .showcase:nth-of-type(even) .window { order: -1; } .showcase-text h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0.6rem 0 0.5rem; } .showcase-text p { font-size: 1.15rem; } .icon { color: var(--brand); background: var(--tint); border-radius: 12px; padding: 8px; width: 44px; height: 44px; display: block; flex: none; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1.5rem; } .card { background: var(--card); border-radius: 20px; padding: 1.4rem 1.5rem; } .card h3 { margin: 0.8rem 0 0.4rem; } .promises { margin-top: 4.5rem; border-bottom: 0; } .promise-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.1rem; } .promise-list li { display: flex; gap: 1rem; align-items: flex-start; } .promise-list h3 { font-size: 1.15rem; margin: 0.45rem 0 0.25rem; } .promise-list p { margin: 0; color: var(--secondary); } .card p:last-child { margin-bottom: 0; } .price { margin-top: 4.5rem; padding: 2rem; } .price h2 { margin-top: 0; } .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 2rem; } .free li::marker { content: "✓ "; color: var(--brand); } .price .stores { margin-top: 0.5rem; } .toc { columns: 16rem; padding-left: 1.2rem; } .toc li { margin-bottom: 0.4rem; break-inside: avoid; } .topic { border-top: 1px solid var(--line); margin-top: 2rem; } .legal h2 { font-size: 1.2rem; } .doc table { border-collapse: collapse; width: 100%; } .table { overflow-x: auto; max-width: 100%; margin-bottom: 1em; } .doc th, .doc td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; } footer { border-top: 1px solid var(--line); margin-top: 4rem; padding: 1.5rem 0 3rem; color: var(--secondary); font-size: 0.95rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-bottom: 1.5rem; } .languages-title { font-size: 1rem; margin: 0 0 0.5rem; color: var(--text); } .languages { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; } .languages a[aria-current] { font-weight: 700; text-decoration: none; } /* Phones and narrow windows: one column, the picture under the text. */ @media (max-width: 800px) { .hero, .showcase, #features .showcase:nth-of-type(even) { grid-template-columns: 1fr; } #features .showcase:nth-of-type(even) .phone, #features .showcase:nth-of-type(even) .window { order: 0; } #features article.showcase.showcase-window { grid-template-columns: 1fr; } .stage { padding-bottom: 18%; } .hero { padding-top: 2rem; } .store { width: 100%; } .bar nav { order: 3; width: 100%; } .lang-menu ul { grid-template-columns: 1fr; max-height: 70vh; overflow-y: auto; } .price { padding: 1.4rem; } }