/* ========================================================================== Autheris — autheris.app Hand-written CSS. No framework, no build step. Dark-first, with automatic (and manually toggleable) light mode. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { color-scheme: dark; --bg: #05070f; --bg-elevated: #0a0e1c; --surface: rgba(255, 255, 255, 0.035); --surface-strong: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --text: #eef2fb; --text-dim: #b9c4dd; --muted: #8b98b8; --brand: #0091ff; --brand-bright: #4fb0ff; --brand-deep: #2a42dc; --brand-wash: rgba(0, 145, 255, 0.12); --brand-wash-strong: rgba(0, 145, 255, 0.22); --ok: #34d399; --shadow-sm: 0 1px 2px rgba(2, 4, 12, 0.4); --shadow-md: 0 18px 40px -22px rgba(0, 0, 0, 0.85); --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 0.95); --glow: 0 0 0 1px rgba(0, 145, 255, 0.28), 0 18px 44px -18px rgba(0, 145, 255, 0.55); --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --radius-xl: 30px; --wrap: 1120px; --gutter: 24px; --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --header-bg: rgba(5, 7, 15, 0.78); --header-h: 64px; --ease: cubic-bezier(0.22, 0.7, 0.24, 1); } html[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-elevated: #f5f7fc; --surface: #ffffff; --surface-strong: #f3f6fd; --border: rgba(10, 16, 40, 0.1); --border-strong: rgba(10, 16, 40, 0.18); --text: #0a1024; --text-dim: #2c3550; --muted: #5b6784; --brand-wash: rgba(0, 116, 214, 0.09); --brand-wash-strong: rgba(0, 116, 214, 0.16); --brand-bright: #0074d6; --header-bg: rgba(255, 255, 255, 0.8); --shadow-sm: 0 1px 2px rgba(10, 16, 40, 0.06); --shadow-md: 0 18px 40px -26px rgba(10, 16, 40, 0.35); --shadow-lg: 0 40px 80px -46px rgba(10, 16, 40, 0.45); --glow: 0 0 0 1px rgba(0, 116, 214, 0.22), 0 18px 44px -20px rgba(0, 116, 214, 0.4); } @media (prefers-color-scheme: light) { html:not([data-theme]) { color-scheme: light; --bg: #ffffff; --bg-elevated: #f5f7fc; --surface: #ffffff; --surface-strong: #f3f6fd; --border: rgba(10, 16, 40, 0.1); --border-strong: rgba(10, 16, 40, 0.18); --text: #0a1024; --text-dim: #2c3550; --muted: #5b6784; --brand-wash: rgba(0, 116, 214, 0.09); --brand-wash-strong: rgba(0, 116, 214, 0.16); --brand-bright: #0074d6; --header-bg: rgba(255, 255, 255, 0.8); --shadow-sm: 0 1px 2px rgba(10, 16, 40, 0.06); --shadow-md: 0 18px 40px -26px rgba(10, 16, 40, 0.35); --shadow-lg: 0 40px 80px -46px rgba(10, 16, 40, 0.45); --glow: 0 0 0 1px rgba(0, 116, 214, 0.22), 0 18px 44px -20px rgba(0, 116, 214, 0.4); } } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } /* Every inline icon in the page chrome is sized here so a stray , outside these containers, and keeps its 0x0 attributes. */ header svg, main svg, footer svg { width: 20px; height: 20px; } figure { margin: 0; } a { color: var(--brand-bright); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: var(--text); text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--brand-wash-strong); color: var(--text); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .skip-link { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -160%); z-index: 200; background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text); padding: 10px 18px; border-radius: 999px; transition: transform 0.2s var(--ease); } .skip-link:focus { transform: translate(-50%, 0); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Buttons & pills -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--surface-strong); --btn-fg: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--btn-bg); color: var(--btn-fg); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: transform 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn svg { width: 18px; height: 18px; flex: none; } .btn-primary { --btn-bg: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 140%); --btn-fg: #ffffff; border-color: rgba(255, 255, 255, 0.18); box-shadow: var(--glow); } .btn-primary:hover { --btn-bg: linear-gradient(180deg, var(--brand-bright) 0%, var(--brand) 140%); } .btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-ghost:hover { background: var(--surface-strong); } .btn-sm { padding: 9px 16px; border-radius: 11px; font-size: 14px; } .btn-lg { padding: 15px 26px; font-size: 16px; } .apple-glyph { width: 18px; height: 18px; fill: currentColor; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-size: 13.5px; font-weight: 500; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16); } /* -------------------------------------------------------------------------- 4. Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--border); } .header-inner { height: var(--header-h); display: flex; align-items: center; gap: 18px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; letter-spacing: -0.02em; font-size: 17px; flex: none; } .brand:hover { text-decoration: none; } .brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: var(--shadow-sm); } /* Trademark marker on the wordmark: small, raised, and not part of the name. */ .brand .tm { font-size: 0.55em; font-weight: 600; vertical-align: 0.62em; color: var(--muted); margin-left: 1px; } .brand small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1; margin-top: 2px; } .nav { margin-left: auto; } .nav-list { display: flex; align-items: center; gap: 4px; } .nav-list a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: 14.5px; font-weight: 500; transition: color 0.18s var(--ease), background 0.18s var(--ease); } .nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--text); background: var(--surface-strong); text-decoration: none; } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; transition: color 0.18s var(--ease), border-color 0.18s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun, html[data-theme="light"] .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: light) { html:not([data-theme]) .theme-toggle .icon-moon { display: none; } html:not([data-theme]) .theme-toggle .icon-sun { display: block; } } .nav-toggle { display: none; width: 38px; height: 38px; place-items: center; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; } .nav-toggle svg { width: 20px; height: 20px; } @media (max-width: 880px) { .nav { position: fixed; inset: var(--header-h) 0 auto 0; margin: 0; padding: 14px var(--gutter) 22px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); display: none; } .nav.is-open { display: block; } .nav-list { flex-direction: column; align-items: stretch; gap: 2px; } .nav-list a { padding: 12px 14px; font-size: 16px; } .nav-toggle { display: grid; } .header-actions .btn { display: none; } } /* -------------------------------------------------------------------------- 5. Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding: 76px 0 84px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 760px; background: radial-gradient( 46% 46% at 22% 34%, var(--brand-wash-strong) 0%, transparent 70% ), radial-gradient(40% 40% at 78% 22%, rgba(42, 66, 220, 0.24) 0%, transparent 72%); pointer-events: none; z-index: -1; } .hero::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); } .hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-dim); font-size: 13.5px; font-weight: 500; } .eyebrow span.tag { padding: 3px 9px; border-radius: 999px; background: var(--brand-wash-strong); color: var(--brand-bright); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .hero-title { margin-top: 26px; font-size: clamp(2.4rem, 5.4vw, 3.9rem); letter-spacing: -0.035em; } .hero-title em { font-style: normal; background: linear-gradient(100deg, var(--brand-bright), var(--brand-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lede { margin-top: 22px; max-width: 34rem; font-size: 18.5px; color: var(--text-dim); } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; color: var(--muted); font-size: 14.5px; } .hero-trust li { display: flex; align-items: center; gap: 8px; } .hero-trust svg { width: 16px; height: 16px; color: var(--brand-bright); } @media (max-width: 940px) { .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; text-align: left; } .hero { padding: 56px 0 64px; } } /* -------------------------------------------------------------------------- 6. Phone mockup -------------------------------------------------------------------------- */ .phone-stage { position: relative; display: flex; justify-content: center; perspective: 1400px; } .phone { position: relative; width: 302px; padding: 12px; border-radius: 46px; background: linear-gradient(160deg, #2c3145 0%, #12151f 46%, #3a4055 100%); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; transform: rotateY(-9deg) rotateX(4deg) translateZ(0); transition: transform 0.6s var(--ease); } .phone-stage:hover .phone { transform: rotateY(-4deg) rotateX(2deg) translateY(-4px); } .phone-screen { position: relative; border-radius: 36px; overflow: hidden; background: #f4f5f9; line-height: 0; } .phone-shot { width: 100%; height: auto; display: block; } /* Dynamic Island pill, drawn over the screenshot's status bar. */ .phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 86px; height: 26px; border-radius: 999px; background: #080b12; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); z-index: 2; } .float-badge { position: absolute; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 15px; background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; } .float-badge svg { width: 17px; height: 17px; color: var(--brand-bright); } .float-badge small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); } .float-badge-1 { top: 42px; left: -16px; animation: float 7s ease-in-out infinite; } .float-badge-2 { bottom: 54px; right: -18px; animation: float 8.5s ease-in-out infinite reverse; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (max-width: 940px) { .phone { transform: none; } .float-badge-1 { left: 0; } .float-badge-2 { right: 0; } } @media (max-width: 420px) { .float-badge { display: none; } .phone { width: 100%; max-width: 302px; } } /* -------------------------------------------------------------------------- 7. Strip -------------------------------------------------------------------------- */ .strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-elevated); } .strip-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; } .strip-list li { padding: 26px 22px; text-align: center; border-left: 1px solid var(--border); } .strip-list li:first-child { border-left: 0; } .strip-list strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .strip-list span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); } @media (max-width: 760px) { .strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip-list li:nth-child(odd) { border-left: 0; } .strip-list li:nth-child(n + 3) { border-top: 1px solid var(--border); } } /* -------------------------------------------------------------------------- 8. Sections -------------------------------------------------------------------------- */ .section { padding: 92px 0; border-bottom: 1px solid var(--border); } .section-alt { background: var(--bg-elevated); } .section-head { max-width: 44rem; margin-bottom: 52px; } .section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; } .section-kicker { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-bright); margin-bottom: 14px; } .section-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); } .section-sub { margin-top: 16px; font-size: 17.5px; color: var(--muted); } @media (max-width: 640px) { .section { padding: 64px 0; } } /* -------------------------------------------------------------------------- 9. Feature grid -------------------------------------------------------------------------- */ .grid { display: grid; gap: 18px; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .card { padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease); } .card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .card h3 { font-size: 17px; margin-bottom: 8px; } .card p { font-size: 15px; color: var(--muted); } .icon-badge { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--border); background: var(--brand-wash); color: var(--brand-bright); margin-bottom: 18px; } .icon-badge svg { width: 22px; height: 22px; } @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- 10. Release / What's new -------------------------------------------------------------------------- */ .release { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 44px; align-items: start; } .changelog { display: grid; gap: 72px; } .release-version { position: sticky; top: calc(var(--header-h) + 28px); } .version-chip { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-family: var(--font-mono); font-size: 14px; color: var(--brand-bright); } .version-chip b { font-family: var(--font-sans); font-size: 15px; color: var(--text); } .release-notes { display: grid; gap: 26px; } .note-group h3 { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 14px; } .note-list { display: grid; gap: 12px; } .note-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 15px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); } .note-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--brand-bright); } .note-list b { font-weight: 650; } .note-list p { font-size: 15px; color: var(--muted); } @media (max-width: 880px) { .release { grid-template-columns: minmax(0, 1fr); gap: 30px; } .release-version { position: static; } } /* -------------------------------------------------------------------------- 11. Steps -------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: step; } .step { position: relative; padding: 30px 26px 26px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--brand-bright); display: block; margin-bottom: 16px; letter-spacing: 0.08em; } .step h3 { font-size: 18px; margin-bottom: 8px; } .step p { font-size: 15px; color: var(--muted); } @media (max-width: 820px) { .steps { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- 12. Security -------------------------------------------------------------------------- */ .security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .security-card { padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); } .security-card h3 { font-size: 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .security-card h3 svg { width: 20px; height: 20px; color: var(--brand-bright); flex: none; } .security-card p { font-size: 15px; color: var(--muted); } .security-card p + p { margin-top: 12px; } code, .code { font-family: var(--font-mono); font-size: 0.88em; padding: 2px 6px; border-radius: 6px; background: var(--surface-strong); border: 1px solid var(--border); color: var(--text-dim); } .callout { margin-top: 22px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--border-strong); border-left: 3px solid var(--brand); background: var(--brand-wash); } .callout svg { width: 20px; height: 20px; color: var(--brand-bright); margin-top: 2px; } .callout p { font-size: 15px; color: var(--text-dim); } @media (max-width: 820px) { .security-grid { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- 13. Screenshot gallery -------------------------------------------------------------------------- */ .gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .gallery-nav { display: flex; gap: 8px; flex: none; } .gallery-nav button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-dim); cursor: pointer; transition: color 0.18s var(--ease), background 0.18s var(--ease); } .gallery-nav button:hover:not(:disabled) { color: var(--text); background: var(--surface-strong); } .gallery-nav button:disabled { opacity: 0.4; cursor: default; } .gallery-nav svg { width: 18px; height: 18px; } .gallery-track { display: flex; gap: 16px; margin-top: 34px; padding: 4px 4px 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .gallery-track::-webkit-scrollbar { height: 8px; } .gallery-track::-webkit-scrollbar-track { background: var(--surface-strong); border-radius: 999px; } .gallery-track::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; } .shot { flex: 0 0 auto; width: 252px; scroll-snap-align: center; border-radius: 26px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow-md); } .shot img { width: 100%; height: auto; transition: transform 0.3s var(--ease); } .shot:hover img { transform: scale(1.015); } @media (max-width: 640px) { .shot { width: 214px; } } @media (max-width: 720px) { .gallery-head { flex-direction: column; align-items: flex-start; gap: 18px; } } /* -------------------------------------------------------------------------- 14. FAQ -------------------------------------------------------------------------- */ .faq { display: grid; gap: 12px; max-width: 46rem; margin: 0 auto; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .faq-item summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform 0.22s var(--ease); } .faq-item[open] summary::after { transform: rotate(-135deg) translateY(-3px); } .faq-item summary:hover { color: var(--brand-bright); } .faq-body { padding: 0 22px 20px; font-size: 15.5px; color: var(--muted); } .faq-body p + p { margin-top: 12px; } .faq-body ul { margin-top: 14px; display: grid; gap: 10px; } /* Hanging indent, not a grid: a grid would place a and the text that follows it in separate cells and stack the answer into a narrow column. */ .faq .faq-body li { position: relative; display: block; padding-left: 18px; font-size: 15.5px; line-height: 1.6; } .faq .faq-body li::before { content: ""; position: absolute; left: 1px; top: 0.66em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-bright); } /* -------------------------------------------------------------------------- 15. CTA band -------------------------------------------------------------------------- */ .cta-band { position: relative; padding: 92px 0; overflow: hidden; text-align: center; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%); } .cta-band::before { content: ""; position: absolute; inset: auto 0 0 0; height: 520px; background: radial-gradient(48% 62% at 50% 100%, var(--brand-wash-strong) 0%, transparent 72%); pointer-events: none; } .cta-band .wrap { position: relative; } .cta-band img.app-icon { width: 84px; height: 84px; border-radius: 20px; margin: 0 auto 26px; box-shadow: var(--shadow-lg); } .cta-band h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); } .cta-band p { max-width: 34rem; margin: 18px auto 0; font-size: 18px; color: var(--text-dim); } .cta-band .hero-cta { justify-content: center; } .cta-note { margin-top: 22px; font-size: 14px; color: var(--muted); } /* -------------------------------------------------------------------------- 16. Footer -------------------------------------------------------------------------- */ .site-footer { padding: 64px 0 40px; border-top: 1px solid var(--border); background: var(--bg); } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.9fr)); gap: 36px; } .footer-brand p { margin-top: 16px; font-size: 14.5px; color: var(--muted); max-width: 24rem; } .footer-col h3 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .footer-col ul { display: grid; gap: 11px; } .footer-col a { color: var(--text-dim); font-size: 14.5px; } .footer-col a:hover { color: var(--brand-bright); } .footer-bottom { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 13.5px; color: var(--muted); } .footer-bottom p { max-width: 46rem; } @media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- 17. Legal / long-form pages -------------------------------------------------------------------------- */ .page-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%); } .page-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); } .page-hero p { margin-top: 16px; max-width: 40rem; font-size: 17.5px; color: var(--muted); } .page-hero .pill { margin-bottom: 18px; } .prose { max-width: 44rem; padding: 56px 0 80px; } .prose > * + * { margin-top: 18px; } .prose h2 { margin-top: 46px; font-size: 1.5rem; } .prose h3 { margin-top: 30px; font-size: 1.12rem; } .prose p, .prose li { color: var(--text-dim); font-size: 16px; } .prose ul, .prose ol { display: grid; gap: 10px; } .prose ul li { position: relative; display: block; padding-left: 20px; line-height: 1.65; } .prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.68em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-bright); } .prose a { text-decoration: underline; text-underline-offset: 3px; } .prose .lede { font-size: 17.5px; color: var(--text); } .toc { padding: 20px 24px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); } /* Higher specificity than the .prose ul rules above, which otherwise turn the contents list into a bulleted two-column grid. */ .prose .toc > strong { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .prose .toc ul { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 28px; } .prose .toc ul li { display: block; padding-left: 0; font-size: 15px; line-height: 1.45; } .prose .toc ul li::before { content: none; } @media (max-width: 640px) { .prose .toc ul { grid-template-columns: minmax(0, 1fr); } } .contact-card { margin-top: 18px; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface); } .contact-card a { font-weight: 600; } /* -------------------------------------------------------------------------- 18. Reveal animations -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } .gallery-track { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- 19. 404 -------------------------------------------------------------------------- */ .error-page { padding: 120px 0 140px; text-align: center; } .error-page h1 { font-size: clamp(3rem, 10vw, 6rem); background: linear-gradient(100deg, var(--brand-bright), var(--brand-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-page p { margin: 18px auto 34px; max-width: 32rem; color: var(--muted); font-size: 17.5px; } .error-page .hero-cta { justify-content: center; } /* -------------------------------------------------------------------------- 20. Print -------------------------------------------------------------------------- */ @media print { .site-header, .cta-band, .gallery-track, .site-footer { display: none; } body { background: #ffffff; color: #000000; } }