/* PortModels — Harbor Signal design system (see notes/brand/design guideline.html) */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root { --font-primary: "Sora", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-secondary: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-code: "Space Grotesk", "SFMono-Regular", Consolas, monospace; --navy-950: #06161B; --navy-900: #082A33; --navy-800: #0B3742; --harbor-blue: #0F4C5C; --signal-teal: #138A8A; --signal-amber: #E9A92B; --copper-amber: #B56F17; --mist-mint: #BFE3D7; --mint-100: #EFF9F5; --error: #DC2626; --success: #21A179; /* Light is the default palette. Dark lives in [data-theme="dark"] below and is only reached when the visitor picks it from the header toggle; every page ships with data-theme set on , so both blocks are explicit. */ --bg: #F3FAF8; --bg-soft: #DDEEE8; --surface: rgba(255, 255, 255, .82); --surface-strong: #FFFFFF; --surface-inset: #EFF9F5; --text: #082A33; --text-soft: rgba(8, 42, 51, .72); --text-muted: rgba(8, 42, 51, .68); --line: rgba(8, 42, 51, .12); --line-strong: rgba(8, 42, 51, .22); --page-grid-line: rgba(8, 42, 51, .085); --shadow: rgba(15, 76, 92, .16); --code: #F8FCFB; /* The footer is a tinted slab rather than page surface, so it carries its own colours instead of borrowing --surface/--text. */ --footer-from: #FFFFFF; --footer-to: #DCEDE7; --footer-tint: rgba(19, 138, 138, .16); --footer-text: #082A33; --footer-text-strong: #04191F; --footer-text-soft: rgba(8, 42, 51, .74); --footer-text-muted: rgba(8, 42, 51, .68); --footer-heading: rgba(8, 42, 51, .78); --footer-line: rgba(8, 42, 51, .12); --footer-field-bg: rgba(255, 255, 255, .86); --footer-field-border: rgba(8, 42, 51, .18); --footer-shadow: rgba(15, 76, 92, .14); --accent-text: #0E6E6E; --accent-warm-text: #96590F; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --copy-size-sm: 17px; --copy-size-md: 18px; --copy-size-lg: 21.5px; } [data-theme="dark"] { --bg: #06161B; --bg-soft: #082A33; --surface: rgba(11, 55, 66, .74); --surface-strong: #0B3742; --surface-inset: #092F39; --text: #EFF9F5; --text-soft: rgba(239, 249, 245, .72); --text-muted: rgba(239, 249, 245, .54); --line: rgba(239, 249, 245, .12); --line-strong: rgba(239, 249, 245, .22); --page-grid-line: rgba(239, 249, 245, .045); --shadow: rgba(0, 0, 0, .34); --code: #031216; --footer-from: #06161B; --footer-to: #082A33; --footer-tint: rgba(19, 138, 138, .22); --footer-text: #EFF9F5; --footer-text-strong: #FFFFFF; --footer-text-soft: rgba(239, 249, 245, .68); --footer-text-muted: rgba(239, 249, 245, .54); --footer-heading: rgba(239, 249, 245, .85); --footer-line: rgba(239, 249, 245, .12); --footer-field-bg: rgba(255, 255, 255, .06); --footer-field-border: rgba(239, 249, 245, .18); --footer-shadow: rgba(0, 0, 0, .28); --accent-text: var(--signal-teal); --accent-warm-text: var(--signal-amber); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--bg); background-image: linear-gradient(var(--page-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--page-grid-line) 1px, transparent 1px), radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--signal-teal) 16%, transparent), transparent 40%), radial-gradient(circle at 86% 6%, color-mix(in srgb, var(--signal-amber) 10%, transparent), transparent 36%), radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--harbor-blue) 22%, transparent), transparent 46%), linear-gradient(180deg, var(--bg), var(--bg-soft)); background-size: 48px 48px, 48px 48px, auto, auto, auto, auto; background-attachment: fixed; color: var(--text); font-family: var(--font-secondary); font-size: var(--copy-size-md); line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--signal-amber); color: #3A2400; } :focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 3px; border-radius: 4px; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, .font-primary { font-family: var(--font-primary); color: var(--text); font-weight: 700; } p { color: var(--text-soft); margin: 0 0 1em; } img { max-width: 100%; display: block; } code, pre { font-family: var(--font-code); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -60px; left: 16px; z-index: 200; background: var(--signal-amber); color: #3A2400; font-weight: 850; padding: 13px 20px; border-radius: 12px; transition: transform .18s ease; } .skip-link:focus { top: 16px; } /* Layout */ .page { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 31px 0 70px; } .page-narrow { max-width: 860px; margin: 0 auto; } /* Topbar / nav */ .topbar { position: sticky; top: 16px; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 15px 18px; /* The bar is inset by a badge's-overhang on both sides: the brand mark sits in the left gap and laps over the bar's corner, so the border runs behind it, and the right gap matches so the bar itself stays centred on the page. */ margin: 0 28px 54px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(18px); } .brand-lockup { display: flex; align-items: center; gap: 13px; min-width: 190px; } .topbar .brand-lockup { gap: 14px; } .logo-mark { width: 42px; height: 42px; flex: 0 0 auto; /* never let a cramped row squash the mark out of square */ border-radius: 14px; display: grid; place-items: center; padding: 8px; overflow: hidden; color: #fff; background: conic-gradient(from 135deg, var(--signal-amber), var(--copper-amber), var(--harbor-blue), var(--signal-teal), var(--signal-amber)); box-shadow: 0 10px 26px color-mix(in srgb, var(--signal-amber) 24%, transparent); } .logo-mark svg { width: 100%; height: 100%; display: block; fill: currentColor; } /* The topbar mark is an oversized badge that deliberately bleeds past the bar - about a fifth taller than the bar itself, and hung far enough left to cover its left border and rounded corner. Sized honestly rather than scaled up, so its layout box matches what is drawn; the negative margins keep the bar the same height, and the same left edge, as a plain 42px mark would give. */ .topbar .logo-mark { width: 88px; height: 88px; border-radius: 29px; padding: 16px; margin: -23px 0 -23px -28px; } .brand-name { display: grid; gap: 1px; } .brand-name strong { font-family: var(--font-primary); font-size: 20px; letter-spacing: -.025em; line-height: 1.05; } .topbar .brand-name strong { font-size: 27px; } .topnav { display: flex; justify-content: center; gap: 6px; overflow: auto; scrollbar-width: none; } .topnav::-webkit-scrollbar { display: none; } .topnav a { color: var(--text-soft); padding: 12px 14px; border-radius: 999px; font-family: var(--font-primary); font-size: 15.5px; font-weight: 700; line-height: 1; white-space: nowrap; border: 1px solid transparent; } .topnav a:hover { color: var(--text); background: color-mix(in srgb, var(--surface-inset) 70%, transparent); border-color: var(--line); } .topnav a[aria-current="true"] { color: var(--text); background: color-mix(in srgb, var(--signal-teal) 24%, var(--surface-inset)); border-color: color-mix(in srgb, var(--signal-teal) 44%, transparent); } .topbar-actions { display: flex; align-items: center; gap: 11px; } .theme-toggle { border: 1px solid var(--line); border-radius: 999px; padding: 11px 15px; color: var(--text); background: color-mix(in srgb, var(--surface-inset) 80%, transparent); font-family: var(--font-primary); font-size: 15.5px; font-weight: 700; white-space: nowrap; } /* Buttons */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 16px; padding: 15px 22px; font-family: var(--font-primary); font-size: 17px; font-weight: 750; border: 1px solid transparent; cursor: pointer; line-height: 1.1; white-space: nowrap; } .button.small { padding: 9px 15px; font-size: 15.5px; border-radius: 12px; } .button.primary { background: var(--signal-amber); color: #3A2400; box-shadow: 0 18px 40px color-mix(in srgb, var(--signal-amber) 26%, transparent); } .button.secondary { color: var(--text); background: color-mix(in srgb, var(--surface) 68%, transparent); border-color: var(--line); } .button.ghost { color: var(--text-soft); background: transparent; border-color: transparent; } .button.danger { color: #fff; background: var(--error); } .button[disabled] { opacity: .5; cursor: not-allowed; } /* Hero */ .hero { display: grid; grid-template-columns: 1.06fr .94fr; gap: 53px; align-items: center; margin-bottom: 78px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--signal-teal) 14%, transparent); color: var(--text); font-family: var(--font-primary); font-size: 15.5px; font-weight: 700; margin-bottom: 22px; } .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-amber); box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal-amber) 18%, transparent); font-style: normal; } h1 { margin: 0 0 24px; max-width: 12ch; font-size: clamp(45px, 6.7vw, 94px); line-height: .98; letter-spacing: -.045em; text-wrap: balance; } h1 span { color: var(--signal-teal); } /* Homepage headline: the same display treatment as the developer page - tight leading and tracking - held a step below its size so the left column doesn't outweigh the launcher panel next to it. */ .hero-title { max-width: none; margin-bottom: 26px; font-size: clamp(38px, 5vw, 74px); line-height: .98; letter-spacing: -.045em; } /* Each line is its own block, so the plain `h1 span` accent would paint the whole headline teal. Reset it here and let the inner span carry the accent on its own. */ .hero-line { display: block; text-wrap: balance; color: var(--text); } .hero-line span { color: var(--signal-teal); } .hero-copy { max-width: 720px; margin: 0; color: var(--text-soft); font-size: 22.5px; line-height: 1.65; } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin: 22px 0 0; font-family: var(--font-primary); font-size: 15.5px; font-weight: 700; color: var(--text); } .hero-meta span { display: inline-flex; align-items: center; gap: 15px; } .hero-meta span + span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--signal-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal-teal) 16%, transparent); } .hero-proof { display: flex; align-items: center; gap: 11px 22px; flex-wrap: wrap; margin-top: 22px; color: var(--text-muted); font-size: 14.5px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; } .hero-proof span { display: inline-flex; align-items: center; gap: 8px; } .hero-proof span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal-teal) 14%, transparent); } .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 30px; } .hero-art { position: relative; border: 1px solid var(--line); border-radius: var(--radius-2xl); padding: 26px; background: linear-gradient(145deg, color-mix(in srgb, var(--harbor-blue) 42%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)); box-shadow: 0 30px 90px color-mix(in srgb, var(--shadow) 80%, transparent); min-height: 420px; overflow: hidden; } .hero-art-inner { position: relative; height: 100%; border-radius: 28px; padding: 29px; display: grid; gap: 15px; align-content: start; background: radial-gradient(circle at 72% 22%, color-mix(in srgb, var(--signal-amber) 18%, transparent), transparent 22%), radial-gradient(circle at 24% 76%, color-mix(in srgb, var(--signal-teal) 26%, transparent), transparent 24%), linear-gradient(180deg, var(--harbor-blue), var(--navy-900)); color: #EFF9F5; } /* Hero launcher — shows what you can do here first; the balance is a footnote, not the subject. */ .launcher-head { margin: 0; font-family: var(--font-primary); font-size: 13.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: rgba(239, 249, 245, .58); } .launcher-list { display: grid; gap: 6px; } .launcher-empty { margin: 0; font-size: 15px; color: rgba(239, 249, 245, .58); } .launcher-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; border: 1px solid transparent; border-radius: 13px; background: rgba(255, 255, 255, .05); transition: background .16s ease, border-color .16s ease, transform .16s ease; } .launcher-item:hover { background: rgba(255, 255, 255, .11); border-color: rgba(239, 249, 245, .24); transform: translateX(3px); } .launcher-item-label { font-family: var(--font-primary); font-weight: 650; font-size: 17px; color: #EFF9F5; } .launcher-item-cat { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(239, 249, 245, .48); white-space: nowrap; } .launcher-foot { margin-top: 2px; } .launcher-browse { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-size: 15.5px; font-weight: 750; color: var(--signal-amber); } .launcher-browse:hover { text-decoration: underline; } .launcher-balance { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 11px; margin-top: 4px; padding-top: 15px; border-top: 1px solid rgba(239, 249, 245, .14); } .launcher-balance-label { font-size: 14.5px; color: rgba(239, 249, 245, .6); } .launcher-balance-amount { font-family: var(--font-primary); font-size: 15.5px; font-weight: 750; color: #EFF9F5; } .launcher-balance-tag { margin-left: auto; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(239, 249, 245, .38); } .hero-cta-note { margin-top: 12px; color: var(--text-muted); font-size: 14.5px; } /* Hero motion — slow, directional, tied to system state. No bouncy/decorative motion. */ @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes art-in { from { opacity: 0; transform: translateY(22px) scale(.988); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes art-sweep { 0% { transform: translateX(-130%); } 58%, 100% { transform: translateX(130%); } } /* Left column rises in sequence. */ .hero > div:first-child > * { animation: rise-in .72s cubic-bezier(.22, .61, .36, 1) both; } .hero > div:first-child > *:nth-child(1) { animation-delay: .04s; } .hero > div:first-child > *:nth-child(2) { animation-delay: .12s; } .hero > div:first-child > *:nth-child(3) { animation-delay: .20s; } .hero > div:first-child > *:nth-child(4) { animation-delay: .28s; } .hero > div:first-child > *:nth-child(5) { animation-delay: .36s; } .hero > div:first-child > *:nth-child(6) { animation-delay: .44s; } .hero-art { animation: art-in .82s cubic-bezier(.22, .61, .36, 1) .16s both; } .hero-art-inner > * { animation: rise-in .6s cubic-bezier(.22, .61, .36, 1) both; } .hero-art-inner > *:nth-child(1) { animation-delay: .38s; } .hero-art-inner > *:nth-child(2) { animation-delay: .48s; } .hero-art-inner > *:nth-child(3) { animation-delay: .58s; } .hero-art-inner > *:nth-child(4) { animation-delay: .68s; } /* Slow line traversal across the panel. */ .hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(114deg, transparent 44%, color-mix(in srgb, var(--signal-teal) 15%, transparent) 50%, transparent 56%); transform: translateX(-130%); animation: art-sweep 11s ease-in-out 1.8s infinite; } @media (prefers-reduced-motion: reduce) { .hero > div:first-child > *, .hero-art, .hero-art-inner > * { animation: none; } .hero-art::after { animation: none; opacity: 0; } .launcher-item:hover { transform: none; } } .category-cloud { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; } .category-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; font-family: var(--font-primary); font-size: 15.5px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); } .category-chip:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-inset) 80%, transparent); } /* Homepage: input → output examples */ .transform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 44px; } .transform { display: flex; align-items: baseline; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); } .transform-from { color: var(--text-muted); font-size: 17px; } .transform-arrow { color: var(--accent-text); font-size: 17px; } .transform-to { font-family: var(--font-primary); font-size: 17px; font-weight: 700; color: var(--text); } /* Homepage: use-case grid */ .use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .use-card { display: grid; align-content: start; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px; background: color-mix(in srgb, var(--surface) 60%, transparent); transition: border-color .16s ease, background .16s ease, transform .16s ease; } .use-card:hover { border-color: color-mix(in srgb, var(--signal-teal) 42%, transparent); background: color-mix(in srgb, var(--surface) 88%, transparent); transform: translateY(-2px); } .use-card h3 { margin: 0; font-size: 21.5px; } .use-card p { margin: 0; color: var(--text-soft); font-size: 15.5px; line-height: 1.55; } .use-card-link { margin-top: 8px; font-family: var(--font-primary); font-size: 14.5px; font-weight: 750; color: var(--accent-text); } /* Homepage: shared-account comparison */ .compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .compare-col { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px; background: color-mix(in srgb, var(--surface) 50%, transparent); } .compare-col h3 { margin: 0 0 14px; font-size: 19px; color: var(--text-muted); } .compare-col-good { border-color: color-mix(in srgb, var(--signal-teal) 40%, transparent); background: color-mix(in srgb, var(--signal-teal) 12%, transparent); } .compare-col-good h3 { color: var(--text); } .compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .compare-list li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; color: var(--text-soft); font-size: 17px; line-height: 1.5; } .compare-list li::before { content: "\00D7"; color: var(--text-muted); font-weight: 700; line-height: 1.5; } .compare-col-good .compare-list li { color: var(--text); } .compare-col-good .compare-list li::before { content: "\2713"; color: var(--accent-text); } /* Homepage: closing call to action */ .cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; border: 1px solid var(--line); border-radius: var(--radius-2xl); padding: 42px 44px; background: radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--signal-teal) 18%, transparent), transparent 46%), color-mix(in srgb, var(--surface) 74%, transparent); box-shadow: 0 20px 56px color-mix(in srgb, var(--shadow) 34%, transparent); } .cta-band h2 { margin: 0; font-size: clamp(27px, 2.9vw, 38px); } .cta-band p { margin: 10px 0 0; color: var(--text-soft); } .cta-band .hero-actions { margin-top: 0; } .dev-note { margin: 0; color: var(--text-muted); font-size: 17px; text-align: center; } .dev-note a { color: var(--accent-text); font-weight: 650; } .dev-note a:hover { text-decoration: underline; } /* Gallery hero: /apps opens on the question people actually arrive with - do I need yet another account and another subscription for this one? - instead of a header that repeats the word already in the nav. */ .gallery-hero { display: grid; grid-template-columns: 1.24fr .76fr; gap: 30px 46px; align-items: center; margin-bottom: 30px; padding: 40px 44px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--signal-teal) 18%, transparent), transparent 48%), color-mix(in srgb, var(--surface) 74%, transparent); box-shadow: 0 20px 56px color-mix(in srgb, var(--shadow) 34%, transparent); } /* A step down from the homepage headline: this one shares the page with a toolbar and twenty covers, so it states the promise without taking the whole screen. */ .gallery-hero-title { margin: 0 0 16px; font-size: clamp(31.5px, 3.5vw, 52px); } .gallery-hero .hero-copy { max-width: 640px; font-size: 18.5px; line-height: 1.6; } /* The three promises as sentences rather than a chip row - "no subscriptions" only lands once it says what happens instead. */ .gallery-hero-points { list-style: none; display: grid; gap: 15px; margin: 0; padding: 0; } .gallery-hero-points li { position: relative; padding-left: 27px; color: var(--text-soft); font-size: 14.5px; line-height: 1.5; } .gallery-hero-points li::before { content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border-radius: 50%; background: var(--signal-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal-teal) 16%, transparent); } .gallery-hero-points strong { display: block; margin-bottom: 2px; color: var(--text); font-family: var(--font-primary); font-size: 15.5px; font-weight: 750; } /* Sections */ .section { margin: 0 0 74px; scroll-margin-top: 118px; } .section-head { max-width: 1030px; margin-bottom: 24px; padding-left: 20px; border-left: 3px solid var(--signal-teal); } .section-head.center { border-left: none; padding-left: 0; text-align: center; margin-left: auto; margin-right: auto; } .section-kicker { display: inline-flex; width: fit-content; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: var(--text-muted); font-size: 13.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--surface) 50%, transparent); } h2 { margin: 12px 0 0; font-size: clamp(31.5px, 3.6vw, 49.5px); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; } h3 { margin: 0 0 10px; font-size: 23.5px; letter-spacing: -.03em; } .section-head p, .lead { max-width: 850px; margin: 14px 0 0; color: var(--text-soft); font-size: var(--copy-size-lg); line-height: 1.7; } .section-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 28px; text-align: center; } /* Cards */ .card { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px; background: color-mix(in srgb, var(--surface) 74%, transparent); box-shadow: 0 16px 42px color-mix(in srgb, var(--shadow) 32%, transparent); } .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } /* App gallery */ .app-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 12px; } .app-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 420px; } .app-filter { display: flex; min-width: 0; } .app-filter-search { flex: 1 1 200px; } /* Compact copies of the page form controls: this is a toolbar, not a form, and the 17px inputs used elsewhere tower over the cards sitting under them. */ .app-filter input[type="search"], .app-filter select { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: color-mix(in srgb, var(--surface-inset) 76%, transparent); color: var(--text); font-family: var(--font-secondary); font-size: 14.5px; width: 100%; } .app-filter input[type="search"]:focus, .app-filter select:focus { border-color: var(--signal-teal); outline: none; } .app-toolbar .button.small { padding: 8px 15px; font-size: 14.5px; } /* Segmented control. Links, not buttons - the layout lives in the URL. */ .view-toggle { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-inset) 76%, transparent); } .view-toggle-option { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; color: var(--text-muted); font-size: 13.5px; font-weight: 750; text-decoration: none; white-space: nowrap; } .view-toggle-option svg { width: 12px; height: 12px; fill: currentColor; } .view-toggle-option:hover { color: var(--text); } .view-toggle-option.is-active { background: var(--surface-strong); color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 60%, transparent); } .app-result-count { margin: 0 0 14px; color: var(--text-muted); font-size: 13.5px; } .app-result-count a { margin-left: 8px; } /* auto-fill, not auto-fit: with auto-fit the empty tracks collapse, so a gallery holding one or two apps stretches those cards across the whole page and the cover becomes several hundred pixels tall. auto-fill keeps the track width honest. The 300px floor is also the column cap: the page tops out at 1480px, which cannot hold a fifth 300px track plus its gap, so the grid never goes past four across. */ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .app-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; background: color-mix(in srgb, var(--surface) 74%, transparent); box-shadow: 0 16px 42px color-mix(in srgb, var(--shadow) 32%, transparent); } /* Covers are uploaded at 1200x630 and shown at that ratio, so the artwork arrives the way the developer framed it - nothing cropped off the top and bottom. */ .app-card-cover { aspect-ratio: 1200 / 630; background: linear-gradient(145deg, var(--harbor-blue), var(--navy-900)); display: block; } .app-card-cover img { width: 100%; height: 100%; object-fit: cover; } .app-card-body { padding: 15px 16px 16px; display: grid; gap: 6px; flex: 1; } .app-card-body h3 { margin: 0; font-size: 17.5px; letter-spacing: -.015em; } .app-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; } .app-card-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-card-rating { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; } .app-card-tagline { color: var(--text-soft); font-size: 14px; line-height: 1.45; margin: 0; flex: 1; /* Two lines for every card, so rows line up instead of stair-stepping. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .app-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; font-size: 12.5px; color: var(--text-muted); margin-top: 3px; } .app-card-meta .badge { padding: 3px 7px; font-size: 11px; letter-spacing: .03em; } .app-card-dev { color: var(--text-muted); font-size: 12.5px; margin: -3px 0 0; } .stars { color: var(--accent-warm-text); font-size: 13px; letter-spacing: .5px; } .rating-count { color: var(--text-muted); font-size: 12.5px; } .app-card-cta { display: flex; flex-direction: column; border: 1px dashed var(--line-strong); border-radius: var(--radius-xl); overflow: hidden; background: transparent; } .app-card-cta-cover { aspect-ratio: 1200 / 380; display: grid; place-items: center; background: color-mix(in srgb, var(--surface-inset) 55%, transparent); color: var(--text-muted); font-size: 36px; } .app-card-cta-body { padding: 13px 14px 14px; display: grid; gap: 5px; flex: 1; align-content: center; text-align: center; } .app-card-cta-body h3 { margin: 0; font-size: 15.5px; } .app-card-cta-body p { margin: 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.45; } /* List view: the same records as the gallery, one row each. Trades the artwork for density, so a long gallery can be scanned by name and rating. */ .app-list { display: grid; gap: 8px; } .app-row { display: grid; /* Fixed trailing columns so the badges and the score line up down the page instead of stepping in and out with the length of each tagline. */ grid-template-columns: 168px minmax(0, 1fr) 190px 84px; align-items: center; gap: 16px; padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 74%, transparent); color: inherit; text-decoration: none; } .app-row:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 92%, transparent); } .app-row-cover { aspect-ratio: 1200 / 630; border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, var(--harbor-blue), var(--navy-900)); } .app-row-cover img { width: 100%; height: 100%; object-fit: cover; } .app-row-main { min-width: 0; } .app-row-main h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; } .app-row-dev { color: var(--text-muted); font-size: 12.5px; font-weight: 550; } .app-row-tagline { margin: 2px 0 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.4; /* A single line: an even row height is the whole point of this view. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-row-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .app-row-meta .badge { padding: 3px 7px; font-size: 11px; letter-spacing: .03em; } .app-row-rating { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; white-space: nowrap; } /* Badges */ .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 11px; font-size: 13.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; } .badge.live { background: color-mix(in srgb, var(--signal-teal) 16%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--signal-teal) 30%, transparent); } .badge.value { background: var(--signal-amber); color: #3A2400; } .badge.info { background: color-mix(in srgb, var(--harbor-blue) 26%, transparent); color: var(--text); border-color: var(--line); } .badge.warning { background: color-mix(in srgb, var(--copper-amber) 22%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--copper-amber) 32%, transparent); } .badge.muted { background: color-mix(in srgb, var(--surface-inset) 90%, transparent); color: var(--text-muted); border-color: var(--line); } /* Forms */ .form { display: grid; gap: 20px; max-width: 630px; } .form.wide { max-width: 100%; } .field { display: grid; gap: 8px; } .field label { color: var(--text-muted); font-size: 14.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .field .hint { color: var(--text-muted); font-size: 14.5px; margin: 0; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="url"], .field input[type="search"], .field input[type="file"], .field select, .field textarea { border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; background: color-mix(in srgb, var(--surface-inset) 76%, transparent); color: var(--text); font-family: var(--font-secondary); font-size: 17px; width: 100%; } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--signal-teal); } .field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .form-error { border: 1px solid color-mix(in srgb, var(--error) 45%, var(--line)); background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--text); border-radius: 14px; padding: 13px 15px; font-size: 15.5px; } .flash { border-radius: 14px; padding: 13px 18px; margin-bottom: 20px; font-size: 15.5px; border: 1px solid var(--line); } .flash.success { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); background: color-mix(in srgb, var(--success) 14%, transparent); } .flash.error { border-color: color-mix(in srgb, var(--error) 45%, var(--line)); background: color-mix(in srgb, var(--error) 14%, transparent); } .flash.info { background: color-mix(in srgb, var(--surface) 60%, transparent); } /* Star rating input */ .rating-input { display: inline-flex; gap: 4px; } .rating-input button { background: none; border: none; color: var(--text-muted); font-size: 24.5px; cursor: pointer; padding: 2px; } .rating-input button.filled { color: var(--accent-warm-text); } /* Tables (admin) */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); } table { width: 100%; border-collapse: collapse; font-size: 15.5px; } th, td { text-align: left; padding: 13px 15px; border-top: 1px solid var(--line); white-space: nowrap; } thead th { border-top: none; color: var(--text-muted); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 750; } tbody tr:hover { background: color-mix(in srgb, var(--surface-inset) 50%, transparent); } td.wrap, th.wrap { white-space: normal; } .table-actions { display: flex; gap: 8px; } /* Comments */ .comment-list { display: grid; gap: 18px; margin-top: 20px; } .comment { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; background: color-mix(in srgb, var(--surface) 60%, transparent); } .comment-meta { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; font-size: 14.5px; color: var(--text-muted); } .comment-meta strong { color: var(--text); font-family: var(--font-primary); } .comment p { margin: 0; color: var(--text-soft); } /* Blog */ /* The index is a two-up grid: one column of full-page-width rows left the same empty side gutters the centred reading column did. */ .blog-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .blog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 28px; } .blog-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; } .blog-count { color: var(--text-muted); font-size: 13.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } .blog-post-card { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px; background: color-mix(in srgb, var(--surface) 74%, transparent); transition: border-color .16s ease, background .16s ease, transform .16s ease; } .blog-post-card:hover { border-color: color-mix(in srgb, var(--signal-teal) 42%, transparent); background: color-mix(in srgb, var(--surface) 92%, transparent); transform: translateY(-2px); } .blog-post-card h3 { margin: 0; font-size: 24px; } .blog-post-card p { margin: 0; color: var(--text-soft); line-height: 1.6; } .blog-post-card-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; width: 100%; margin-top: auto; padding-top: 16px; } .blog-post-card-link { font-family: var(--font-primary); font-size: 14.5px; font-weight: 750; color: var(--accent-text); } .blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 11px; margin: 0; color: var(--text-muted); font-size: 14.5px; } .blog-meta span + span::before { content: "\00B7"; margin-right: 11px; color: color-mix(in srgb, var(--text-muted) 55%, transparent); } .section-head .blog-meta { margin-top: 18px; } /* Width is handled by .blog-shell now, so the article no longer centres itself inside a column that is already the right measure. */ .blog-body { max-width: none; margin: 0; } .blog-body h2 { margin-top: 1.6em; } .blog-body h3 { margin-top: 1.4em; } .blog-body p, .blog-body li { color: var(--text-soft); font-size: var(--copy-size-lg); line-height: 1.75; } .blog-body img { border-radius: var(--radius-lg); margin: 1.4em 0; } .blog-body a { color: var(--accent-text); text-decoration: underline; } .markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 1.6em; } .markdown-body p, .markdown-body li { color: var(--text-soft); font-size: var(--copy-size-lg); line-height: 1.75; } .markdown-body a { color: var(--accent-text); text-decoration: underline; } /* Footer */ .footer { margin-top: 80px; border: 1px solid var(--line); border-radius: 30px; padding: 44px 35px 29px; background: radial-gradient(circle at 16% 20%, var(--footer-tint), transparent 28%), linear-gradient(135deg, var(--footer-from), var(--footer-to)); color: var(--footer-text); box-shadow: 0 22px 70px var(--footer-shadow); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 35px; padding-bottom: 35px; border-bottom: 1px solid var(--footer-line); } .footer-brand p { color: var(--footer-text-soft); font-size: 15.5px; margin-top: 12px; max-width: 290px; } .footer-brand .brand-lockup { margin-bottom: 4px; } .footer-brand .brand-name strong { color: var(--footer-text-strong); } .footer h4 { font-family: var(--font-primary); color: var(--footer-heading); font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .footer ul a { color: var(--footer-text-soft); font-size: 15.5px; } .footer ul a:hover { color: var(--footer-text-strong); } .footer-newsletter { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .footer-newsletter input { flex: 1; min-width: 180px; border: 1px solid var(--footer-field-border); border-radius: 12px; padding: 12px 14px; background: var(--footer-field-bg); color: var(--footer-text); font-family: var(--font-secondary); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 13px; padding-top: 22px; color: var(--footer-text-muted); font-size: 14.5px; } .footer-bottom .footer-legal { display: flex; gap: 20px; } .footer-bottom a { color: var(--footer-text-muted); } .footer-bottom a:hover { color: var(--footer-text-strong); } /* Developers page */ .dev-flow { display: grid; justify-items: center; gap: 11px; padding: 26px 8px; } .dev-flow-node { width: 100%; max-width: 360px; border: 1px solid rgba(239, 249, 245, .16); border-radius: 16px; padding: 18px 20px; background: rgba(255, 255, 255, .05); text-align: center; } .dev-flow-node-platform { border-color: rgba(239, 249, 245, .28); background: rgba(255, 255, 255, .08); } .dev-flow-label { font-family: var(--font-primary); font-weight: 750; font-size: 17px; color: #EFF9F5; } .dev-flow-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; } .dev-flow-chip { border: 1px solid rgba(239, 249, 245, .16); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 700; color: rgba(239, 249, 245, .85); background: rgba(255, 255, 255, .04); } .dev-flow-arrow { color: rgba(239, 249, 245, .4); font-size: 20px; line-height: 1; } .dev-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0 0 28px; padding: 0; list-style: none; } .dev-steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dev-step { display: grid; gap: 11px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 18px; background: color-mix(in srgb, var(--surface) 60%, transparent); } .dev-step-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--signal-amber); color: #3A2400; font-family: var(--font-primary); font-weight: 800; font-size: 15.5px; } .dev-step h3 { margin: 0 0 4px; font-size: 19px; } .dev-step p { margin: 0; font-size: 15.5px; color: var(--text-soft); } .code-sample { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--code); } .code-sample-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px; border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .code-sample-tag { border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; font-size: 12.5px; } .code-sample pre { margin: 0; padding: 20px 22px 24px; overflow-x: auto; color: var(--text-soft); font-size: 15px; line-height: 1.6; } .econ-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; } .econ-node { border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; font-size: 15.5px; font-weight: 650; color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); } .econ-node-highlight { border-color: color-mix(in srgb, var(--signal-teal) 40%, transparent); background: color-mix(in srgb, var(--signal-teal) 16%, transparent); } .econ-arrow { color: var(--text-muted); font-size: 18px; } /* Utility */ .muted { color: var(--text-muted); } .text-center { text-align: center; } .stack { display: grid; gap: 22px; } .inline { display: flex; align-items: center; gap: 11px; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 13px; flex-wrap: wrap; } .mt-0 { margin-top: 0; } .empty-state { text-align: center; padding: 66px 22px; border: 1px dashed var(--line); border-radius: var(--radius-xl); color: var(--text-muted); } /* Responsive */ /* The list row sheds its least useful columns as it narrows, rather than wrapping into a shape that is taller than the gallery card it was meant to compress. */ @media (max-width: 760px) { .app-filter-search { flex: 1 1 100%; } } @media (max-width: 900px) { .gallery-hero { grid-template-columns: 1fr; gap: 26px; padding: 30px 28px; } .app-row { grid-template-columns: 132px minmax(0, 1fr) 104px 84px; gap: 14px; } /* Only the category survives here; the app type is repeated on the detail page. */ .app-row-meta .badge:nth-of-type(2) { display: none; } } @media (max-width: 620px) { .gallery-hero { padding: 26px 21px; border-radius: var(--radius-xl); } .gallery-hero .hero-copy { font-size: 17px; } .app-row { grid-template-columns: 104px minmax(0, 1fr) 78px; gap: 12px; padding: 8px 12px 8px 8px; } .app-row-meta { display: none; } .app-row-main h3 { font-size: 15px; } .app-row-dev { display: block; margin-top: 1px; } .app-filters { flex: 1 1 100%; } .app-filter:not(.app-filter-search) { flex: 1 1 130px; } .view-toggle { flex: 1 1 100%; } .view-toggle-option { flex: 1; justify-content: center; } } @media (max-width: 1040px) { .topbar { grid-template-columns: 1fr auto; } .topnav { grid-column: 1 / -1; justify-content: flex-start; order: 3; } .hero { grid-template-columns: 1fr; } .card-grid { grid-template-columns: repeat(2, 1fr); } .dev-steps { grid-template-columns: repeat(2, 1fr); } .transform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 35px; } .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; } .field-row { grid-template-columns: 1fr; } } @media (max-width: 700px) { .page { width: min(100% - 28px, 1480px); padding-top: 15px; } /* Compact header: the desktop lockup (76px badge, 27px wordmark, 190px floor) cannot fit beside the actions on a phone, so it is scaled down rather than left to overflow. The badge also stops bleeding past the bar — at this size it just looked like a stray blob over the rounded corner. */ .topbar { top: 8px; border-radius: 20px; padding: 10px 12px; gap: 10px; margin-inline: 0; } .topbar .brand-lockup { gap: 10px; min-width: 0; } .topbar .logo-mark { width: 40px; height: 40px; border-radius: 13px; padding: 8px; margin: 0; } .topbar .brand-name strong { font-size: 19px; } .topbar-actions { gap: 8px; } .theme-toggle { padding: 9px 12px; } /* All four links fit across a 360px phone at this size, so nothing is stranded off the right edge of the scroll container. */ .topnav { gap: 2px; justify-content: space-between; } .topnav a { padding: 9px 10px; font-size: 14px; } h1 { font-size: clamp(45px, 14.6vw, 62.5px); letter-spacing: -.04em; } .hero-title { font-size: clamp(33.5px, 9.4vw, 47px); } .card-grid { grid-template-columns: 1fr; } .dev-steps, .dev-steps.three { grid-template-columns: 1fr; } .transform-grid { grid-template-columns: 1fr; gap: 0; } .use-grid { grid-template-columns: 1fr; } .compare { grid-template-columns: 1fr; } .cta-band { padding: 31px 26px; } .footer-grid { grid-template-columns: 1fr; } .section { margin-bottom: 54px; } } /* Signed in, "Dashboard" and "Log out" sit beside the theme toggle and the wordmark collides with them on a narrow phone. There the badge carries the brand on its own; signed out, the single button is short enough that the full lockup still fits. */ @media (max-width: 620px) { .topbar.is-authed .brand-name { display: none; } } /* Rendered Markdown — shared by /docs, /blog, and standalone pages */ .markdown-body > :first-child { margin-top: 0; } .markdown-body h1 { font-size: clamp(33.5px, 4.5vw, 45px); } .markdown-body h2 { font-size: 29px; padding-top: 6px; border-top: 1px solid var(--line); } .markdown-body h3 { font-size: 22.5px; } .markdown-body h2, .markdown-body h3, .markdown-body h4 { scroll-margin-top: 120px; } .markdown-body ul, .markdown-body ol { padding-left: 24px; } .markdown-body li { margin-bottom: .4em; } .markdown-body li > ul, .markdown-body li > ol { margin-top: .4em; } .markdown-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; } .markdown-body img { border-radius: var(--radius-lg); margin: 1.4em 0; } .markdown-body :not(pre) > code { font-size: .88em; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-inset) 70%, transparent); color: var(--text); white-space: nowrap; } .markdown-body blockquote { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--signal-teal); color: var(--text-muted); } .heading-anchor { margin-left: .4em; color: var(--text-muted); text-decoration: none; opacity: 0; font-weight: 400; transition: opacity .12s ease; } h2:hover > .heading-anchor, h3:hover > .heading-anchor, h4:hover > .heading-anchor, .heading-anchor:focus-visible { opacity: 1; } /* Code blocks */ .code-block { position: relative; margin: 1.6em 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--code); overflow: hidden; } .code-block pre { margin: 0; padding: 20px 18px; overflow-x: auto; font-size: 15.5px; line-height: 1.65; color: var(--text); } [data-theme="light"] .code-block pre { color: var(--navy-900); } .code-block code { background: none; border: 0; padding: 0; white-space: pre; } .code-lang { position: absolute; top: 8px; left: 14px; font-family: var(--font-code); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; } .code-block:has(.code-lang) pre { padding-top: 35px; } .code-copy { position: absolute; top: 6px; right: 6px; padding: 5px 11px; font-family: var(--font-secondary); font-size: 13.5px; color: var(--text-muted); background: color-mix(in srgb, var(--surface-strong) 80%, transparent); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; opacity: 0; transition: opacity .12s ease, color .12s ease; } .code-block:hover .code-copy, .code-copy:focus-visible { opacity: 1; } .code-copy:hover { color: var(--text); border-color: var(--line-strong); } .code-copy.is-copied { color: var(--success); opacity: 1; } /* Markdown tables */ .markdown-body .table-wrap { margin: 1.6em 0; background: color-mix(in srgb, var(--surface) 50%, transparent); } .md-table { width: 100%; border-collapse: collapse; font-size: var(--copy-size-sm); } .md-table th, .md-table td { white-space: normal; vertical-align: top; padding: 12px 15px; border-top: 1px solid var(--line); color: var(--text-soft); } .md-table th { color: var(--text); font-family: var(--font-primary); font-weight: 650; } .md-table thead th { border-top: 0; } .md-table td code { white-space: nowrap; } /* Callouts */ .callout { margin: 1.7em 0; padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--signal-teal); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 55%, transparent); } .callout > :last-child { margin-bottom: 0; } .callout p { font-size: var(--copy-size-md); } .callout-title { font-family: var(--font-primary); font-weight: 700; font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .5em; } .callout-tip, .callout-note, .callout-info { border-left-color: var(--signal-teal); } .callout-important { border-left-color: var(--mist-mint); } .callout-important .callout-title { color: var(--mist-mint); } [data-theme="light"] .callout-important { border-left-color: var(--harbor-blue); } [data-theme="light"] .callout-important .callout-title { color: var(--harbor-blue); } .callout-warning, .callout-caution { border-left-color: var(--signal-amber); } .callout-warning .callout-title, .callout-caution .callout-title { color: var(--accent-warm-text); } [data-theme="dark"] .callout-warning .callout-title, [data-theme="dark"] .callout-caution .callout-title { color: var(--signal-amber); } .callout-danger { border-left-color: var(--error); } .callout-danger .callout-title { color: var(--error); } /* Docs layout */ .docs-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr) 232px; gap: 48px; align-items: start; margin-top: 26px; } /* The sidebar itself must not scroll: a scroll container clips on both axes, which would crop the search dropdown at the 272px column edge. Only the nav scrolls, so search stays pinned to the top and its panel overflows. */ .docs-sidebar { position: sticky; top: 104px; display: flex; flex-direction: column; max-height: calc(100vh - 130px); overflow: visible; padding-bottom: 22px; } .docs-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; } .docs-nav::-webkit-scrollbar { width: 8px; } .docs-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; } .docs-sidebar-toggle { display: none; align-items: center; gap: 8px; margin-bottom: 16px; padding: 11px 15px; font-family: var(--font-primary); font-size: 15.5px; font-weight: 650; color: var(--text); background: color-mix(in srgb, var(--surface) 74%, transparent); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; } /* Search — pinned above the menu */ .docs-search { position: relative; flex: none; margin-bottom: 18px; } .docs-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 19px; pointer-events: none; } .docs-search-input { width: 100%; padding: 12px 44px 12px 37px; font-family: var(--font-secondary); font-size: 15.5px; color: var(--text); background: color-mix(in srgb, var(--surface-inset) 72%, transparent); border: 1px solid var(--line); border-radius: var(--radius-md); appearance: none; } .docs-search-input::placeholder { color: var(--text-muted); } .docs-search-input:focus { outline: none; border-color: var(--signal-teal); } .docs-search-input::-webkit-search-cancel-button { display: none; } .docs-search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 1px 7px; font-family: var(--font-code); font-size: 13.5px; color: var(--text-muted); border: 1px solid var(--line); border-radius: 5px; } .docs-search-input:focus ~ .docs-search-kbd { opacity: 0; } .docs-search-results { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: max(100%, min(470px, calc(100vw - 60px))); max-height: min(60vh, 480px); overflow-y: auto; padding: 6px; background: var(--surface-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: 0 18px 50px var(--shadow); } .docs-search-result { display: block; padding: 9px 12px; border-radius: 9px; cursor: pointer; } .docs-search-result.is-active, .docs-search-result:hover { background: color-mix(in srgb, var(--signal-teal) 18%, transparent); } .docs-search-result-title { display: block; overflow-wrap: anywhere; font-family: var(--font-primary); font-weight: 650; font-size: 15.5px; color: var(--text); } .docs-search-result-path { display: block; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; } .docs-search-result-snippet { display: block; overflow-wrap: anywhere; font-size: 14.5px; color: var(--text-soft); margin-top: 4px; line-height: 1.5; } .docs-search-result mark { background: color-mix(in srgb, var(--signal-amber) 40%, transparent); color: inherit; border-radius: 3px; } .docs-search-empty, .docs-search-hint { padding: 13px; font-size: 14.5px; color: var(--text-muted); } .docs-search-hint { border-top: 1px solid var(--line); } /* Sidebar menu */ .docs-nav-list { list-style: none; margin: 0; padding: 0; } .docs-nav-list.docs-nav-depth-1, .docs-nav-list.docs-nav-depth-2 { margin-left: 3px; padding-left: 12px; border-left: 1px solid var(--line); } .docs-nav-item { margin: 0; } .docs-nav-link { display: block; padding: 6px 9px; border-radius: 8px; font-size: 15.5px; line-height: 1.4; color: var(--text-soft); text-decoration: none; } .docs-nav-link:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); } .docs-nav-link.is-current { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--signal-teal) 20%, transparent); } .docs-nav-home { margin-bottom: 8px; font-family: var(--font-primary); font-weight: 650; } .docs-nav-section { margin: 2px 0; } .docs-nav-summary { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; cursor: pointer; list-style: none; font-family: var(--font-primary); font-size: 14.5px; font-weight: 700; letter-spacing: .03em; color: var(--text); } .docs-nav-summary::-webkit-details-marker { display: none; } .docs-nav-summary::before { content: "›"; display: inline-block; font-size: 17px; color: var(--text-muted); transition: transform .14s ease; } .docs-nav-section[open] > .docs-nav-summary::before { transform: rotate(90deg); } .docs-nav-summary:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); } .docs-nav-foot { flex: none; margin: 20px 0 0; font-size: 13.5px; color: var(--text-muted); } /* Article */ .docs-article { min-width: 0; max-width: 900px; } .docs-breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; } .docs-breadcrumbs a { color: var(--text-muted); } .docs-breadcrumbs a:hover { color: var(--accent-text); } .docs-breadcrumb-sep { color: var(--line-strong); } .docs-article-head { margin-bottom: 26px; } .docs-article-head h1 { margin: 0 0 10px; font-size: clamp(36px, 4.9vw, 49.5px); letter-spacing: -.02em; } .docs-article-lead { font-size: var(--copy-size-lg); color: var(--text-soft); margin: 0; max-width: 62ch; } .docs-body h2:first-of-type { border-top: 0; padding-top: 0; } .docs-article-foot { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); } .docs-updated { font-size: 14.5px; color: var(--text-muted); } .docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 18px; } .docs-pager-link { padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 55%, transparent); } .docs-pager-link:hover { border-color: var(--signal-teal); } .docs-pager-next { text-align: right; } .docs-pager-label { display: block; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .docs-pager-title { display: block; margin-top: 4px; font-family: var(--font-primary); font-weight: 650; color: var(--text); } /* On this page */ .docs-toc { position: sticky; top: 104px; max-height: calc(100vh - 130px); overflow-y: auto; } .docs-toc-title { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } .docs-toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); } .docs-toc-item a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.45; color: var(--text-muted); } .docs-toc-item a:hover { color: var(--text); } .docs-toc-item.is-active > a { color: var(--accent-text); border-left-color: var(--signal-teal); } .docs-toc-h3 a { padding-left: 29px; font-size: 14px; } /* Landing and search results */ .docs-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; } .docs-section-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface) 62%, transparent); } .docs-section-card h2 { margin: 0 0 6px; font-size: 21.5px; border: 0; padding: 0; } .docs-section-card p { font-size: 15.5px; color: var(--text-muted); margin-bottom: 12px; } .docs-section-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .docs-section-card a { font-size: 15.5px; color: var(--text-soft); } .docs-section-card a:hover { color: var(--accent-text); } .docs-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; } .docs-result { padding-bottom: 22px; border-bottom: 1px solid var(--line); } .docs-result:last-child { padding-bottom: 0; border-bottom: 0; } .docs-result-title { display: block; text-decoration: none; font-family: var(--font-primary); font-size: 20px; font-weight: 700; color: var(--text); } .docs-result-title:hover { color: var(--accent-text); } .docs-result-path { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 3px 0 6px; } .docs-result-snippet { font-size: 15.5px; color: var(--text-soft); margin: 0; } .docs-empty { color: var(--text-muted); } @media (max-width: 1180px) { .docs-shell { grid-template-columns: 260px minmax(0, 1fr); } .docs-toc { display: none; } } @media (max-width: 860px) { .docs-shell { grid-template-columns: 1fr; gap: 0; } .docs-sidebar-toggle { display: inline-flex; } .docs-sidebar { position: static; max-height: none; overflow: visible; display: none; margin-bottom: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line); } .docs-sidebar.is-open { display: block; } .docs-search-results { width: 100%; } .docs-pager { grid-template-columns: 1fr; } .docs-section-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ */ /* Legal & standalone Markdown pages (/terms, /privacy) */ /* ------------------------------------------------------------------ */ .legal-shell { max-width: 920px; margin: 0 auto; } .legal-head { margin-bottom: 40px; } .legal-head h1 { max-width: none; margin: 10px 0 0; } .legal-head .lead { margin: 14px 0 0; max-width: 64ch; } .legal-meta { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--text-muted); } .legal-meta time { color: var(--text); font-weight: 600; } .legal-toc { margin: 0 0 44px; padding: 24px 29px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .legal-toc-title { margin: 0 0 14px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border: 0; padding: 0; } .legal-toc-list { margin: 0; padding: 0 0 0 22px; columns: 2; column-gap: 40px; font-size: 15.5px; } .legal-toc-list li { margin: 0 0 8px; break-inside: avoid; } .legal-toc-list a { color: var(--text-muted); text-decoration: none; } .legal-toc-list a:hover { color: var(--accent-text); text-decoration: underline; } .legal-body { font-size: 17.5px; } .legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .legal-foot { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--text-muted); } .legal-foot p { margin: 0; } .legal-foot-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; } .legal-foot-links a { color: var(--text-muted); text-decoration: none; } .legal-foot-links a:hover { color: var(--accent-text); } @media (max-width: 640px) { .legal-toc-list { columns: 1; } } /* ------------------------------------------------------------------ */ /* Account screens: auth (/login, /register) and /publish */ /* ------------------------------------------------------------------ */ /* The header keeps the session controls together: the form is only here so the sign-out is a POST with a CSRF token rather than a followable link. */ .logout-form { display: flex; margin: 0; } .button.block { width: 100%; } /* Long forms read as labelled blocks instead of one tall column of inputs. */ .form-group { display: grid; gap: 20px; } .form-group-title { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .form-actions .hint { flex: 1 1 240px; margin: 0; color: var(--text-muted); font-size: 14.5px; } /* A 630px form centred on a 1480px page left both sides empty. These shells put the width to work: the form takes the main column and the second column carries the panel that explains what the form is for. */ .auth-shell, .publish-shell, .invest-shell, .request-shell { display: grid; align-items: start; gap: 30px; } .auth-shell { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); max-width: 1180px; margin: 0 auto; } .publish-shell, .invest-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } .request-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 366px); } .request-main { min-width: 0; } .auth-main { min-width: 0; } .auth-card, .publish-card, .invest-card { padding: 30px 32px; } .auth-card .form-error, .publish-card .form-error, .invest-card .form-error { margin-bottom: 22px; } .publish-card .form { gap: 32px; } .auth-alt { margin: 18px 0 0; color: var(--text-muted); font-size: 16px; } .auth-alt a { color: var(--accent-text); text-decoration: underline; } .auth-aside, .publish-aside, .blog-aside, .request-aside { display: grid; gap: 20px; padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface-inset) 58%, transparent); } /* Only the auth panel is short enough to sit still while the form scrolls; the publish panel is taller than a viewport, so sticking it would strand its end. */ .auth-aside { position: sticky; top: 112px; } .auth-aside h3 { margin: 0; font-size: 20px; } .auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .auth-point { padding-left: 16px; border-left: 2px solid var(--signal-teal); } .auth-point strong { font-family: var(--font-primary); font-size: 16.5px; letter-spacing: -.015em; } .auth-point p { margin: 5px 0 0; color: var(--text-soft); font-size: 15.5px; line-height: 1.55; } .auth-aside-foot { margin: 0; font-size: 15.5px; } .auth-aside-foot a { color: var(--accent-text); } .publish-aside-block h3 { margin: 0 0 10px; font-size: 16.5px; } .publish-aside-block p { margin: 0 0 10px; color: var(--text-soft); font-size: 15px; line-height: 1.55; } .publish-aside-block p:last-child { margin-bottom: 0; } .publish-aside-foot a { color: var(--accent-text); } .publish-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--text-soft); font-size: 15px; line-height: 1.5; } .publish-list li { position: relative; padding-left: 20px; } .publish-list li::before { content: "\2022"; position: absolute; left: 3px; color: var(--text-muted); } .publish-list.check li::before { content: "\2713"; font-size: 13px; color: var(--signal-teal); } .publish-cover-preview { width: 100%; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); } .publish-facts { margin: 0; display: grid; gap: 9px; font-size: 15px; } .publish-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .publish-facts dt { color: var(--text-muted); font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } .publish-facts dd { margin: 0; color: var(--text); } /* Paired fields keep their two columns down to the tablet break; the shared .field-row rule drops them a column earlier, which these cards do not need. */ @media (min-width: 761px) { .auth-card .field-row, .publish-card .field-row, .invest-card .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1040px) { .auth-shell, .publish-shell, .invest-shell, .request-shell { grid-template-columns: minmax(0, 1fr); gap: 26px; } .auth-shell { max-width: 980px; } .auth-aside { position: static; } } @media (max-width: 700px) { .auth-card, .publish-card, .invest-card { padding: 22px 20px; } .auth-aside, .publish-aside, .blog-aside, .request-aside { padding: 22px 20px; } .form-actions .button { width: 100%; } } /* ------------------------------------------------------------------ */ /* Blog: post view shell and index cards */ /* ------------------------------------------------------------------ */ /* A post used to be an 810px column centred on a 1480px page. The column stays at a readable measure — that part was right — but the leftover width now carries the post's own context instead of being blank on both sides. */ .blog-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 56px; align-items: start; max-width: 1240px; margin: 0 auto; } .blog-article { min-width: 0; } .blog-article-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); } /* Short enough to ride along with the reader; if a post ever grows the panel past the viewport, the panel scrolls rather than stranding its last block. */ .blog-aside { position: sticky; top: 112px; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; } .blog-aside::-webkit-scrollbar { width: 8px; } .blog-aside::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; } .blog-aside-block h3 { margin: 0 0 12px; font-size: 16.5px; } .blog-aside-block p { margin: 0 0 12px; color: var(--text-soft); font-size: 15px; line-height: 1.55; } .blog-aside-block p:last-child { margin-bottom: 0; } .blog-aside-list { list-style: none; margin: 0; padding: 0; display: grid; } .blog-aside-list li + li { border-top: 1px solid var(--line); } .blog-aside-list a { display: grid; gap: 3px; padding: 11px 0; } .blog-aside-list li:first-child a { padding-top: 0; } .blog-aside-list li:last-child a { padding-bottom: 0; } .blog-aside-list strong { font-family: var(--font-primary); font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--text); } .blog-aside-list span { color: var(--text-muted); font-size: 13.5px; } .blog-aside-list a:hover strong { color: var(--accent-text); } .blog-aside-cta { padding: 20px; border: 1px solid color-mix(in srgb, var(--signal-teal) 34%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--signal-teal) 11%, transparent); } .blog-aside-cta .button { margin-top: 14px; } @media (max-width: 1080px) { .blog-shell { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 900px; } .blog-aside { position: static; max-height: none; overflow: visible; } .blog-list { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------ */ /* Investors */ /* ------------------------------------------------------------------ */ /* Sits inside the dark .hero-art panel, so it is light-on-dark like the launcher and the developer flow diagram. */ .invest-art { display: grid; margin: 0; } .invest-art-row { display: grid; gap: 4px; padding: 13px 0; border-bottom: 1px solid rgba(239, 249, 245, .12); } .invest-art-row:last-child { border-bottom: 0; padding-bottom: 0; } .invest-art dt { font-size: 12.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: rgba(239, 249, 245, .5); } .invest-art dd { margin: 0; font-family: var(--font-primary); font-size: 16.5px; font-weight: 650; line-height: 1.4; color: #EFF9F5; } .invest-status { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; align-items: start; } .invest-status-block { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px; background: color-mix(in srgb, var(--surface) 60%, transparent); } .invest-status-block:first-child { border-color: color-mix(in srgb, var(--signal-teal) 34%, transparent); background: color-mix(in srgb, var(--signal-teal) 10%, transparent); } .invest-status-block h3 { margin: 0 0 16px; font-size: 20px; } .invest-status-block .publish-list { font-size: 16px; gap: 10px; } .invest-status-note { margin: 18px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.55; } .invest-aside .publish-aside-block a { color: var(--accent-text); } @media (max-width: 1040px) { .invest-status { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------ */ /* Jobs */ /* ------------------------------------------------------------------ */ /* A job ad is two lists and a summary, so the card puts the lists side by side rather than making the reader scroll a single tall column per role. */ .job-list { display: grid; gap: 24px; } .job-card { border: 1px solid var(--line); border-radius: var(--radius-2xl); padding: 32px 34px; background: color-mix(in srgb, var(--surface) 70%, transparent); scroll-margin-top: 118px; } .job-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; } .job-card-head h3 { margin: 0; font-size: 27px; letter-spacing: -.02em; } .job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; } .job-summary { margin: 18px 0 0; max-width: 78ch; color: var(--text-soft); font-size: var(--copy-size-lg); line-height: 1.65; } /* The growth role is defined by a specific plan rather than a job title, so the plan gets its own block instead of being buried in the bullet lists. */ .job-idea { margin: 20px 0 0; padding: 20px 22px; border-left: 3px solid var(--signal-teal); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: color-mix(in srgb, var(--signal-teal) 10%, transparent); color: var(--text-soft); font-size: 16.5px; line-height: 1.62; } .job-idea::first-line { color: var(--text); } .job-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 26px; } .job-col h4 { margin: 0 0 12px; font-size: 13.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .job-col .publish-list { font-size: 15.5px; gap: 10px; } .job-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); } .job-bonus { margin: 0; flex: 1 1 320px; color: var(--text-muted); font-size: 15px; line-height: 1.55; } @media (max-width: 860px) { .job-card { padding: 26px 22px; } .job-card-head h3 { font-size: 23px; } .job-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; } .job-foot .button { width: 100%; } } /* ------------------------------------------------------------------ */ /* App requests */ /* ------------------------------------------------------------------ */ .request-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; } .request-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; } .request-sort { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; } .request-sort-option { padding: 7px 15px; border-radius: 999px; font-family: var(--font-primary); font-size: 14px; font-weight: 700; color: var(--text-muted); } .request-sort-option:hover { color: var(--text); } .request-sort-option.is-active { color: var(--text); background: var(--surface-inset); } .request-categories { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; } .request-categories .category-chip { padding: 7px 14px; font-size: 14px; font-weight: 650; } .category-chip.is-active { border-color: color-mix(in srgb, var(--signal-teal) 55%, transparent); background: color-mix(in srgb, var(--signal-teal) 14%, transparent); color: var(--accent-text); } .request-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } /* Vote first, then the brief: the count is the whole point of the board, so it holds a fixed column instead of floating somewhere inside the text. */ .request-card { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface) 72%, transparent); scroll-margin-top: 118px; transition: border-color .16s ease, background .16s ease; } .request-card:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 92%, transparent); } .request-vote-form { margin: 0; } .request-vote { display: grid; justify-items: center; gap: 1px; width: 100%; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-inset) 70%, transparent); color: var(--text-muted); cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; } .request-vote:hover { border-color: var(--signal-teal); color: var(--accent-text); } .request-vote.is-voted { border-color: color-mix(in srgb, var(--signal-teal) 60%, transparent); background: color-mix(in srgb, var(--signal-teal) 16%, transparent); color: var(--accent-text); } .request-vote-arrow { font-size: 14px; line-height: 1; } .request-vote-count { font-family: var(--font-primary); font-size: 19px; font-weight: 750; line-height: 1.1; } .request-body { min-width: 0; } .request-body h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.015em; } .request-body h3 a { color: inherit; text-decoration: none; } .request-body h3 a:hover { color: var(--accent-text); } .request-body p { margin: 0; color: var(--text-soft); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; } .request-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; margin-top: 14px; } .request-byline { color: var(--text-muted); font-size: 14px; } .request-comments-link { color: var(--text-muted); font-size: 14px; text-decoration: none; border-bottom: 1px solid transparent; } .request-comments-link:hover { color: var(--accent-text); border-bottom-color: currentColor; } /* One request on its own page. A card is how a request looks as a row in a list; here it is the whole page, so it drops the border and the 66px vote column and takes the same shell every other single-subject page uses. The aside spans both rows so the vote sits beside the brief and stays on screen while the thread runs down the main column. */ .request-detail-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; gap: 38px 34px; } .request-detail-head { grid-column: 1; grid-row: 1; min-width: 0; } .request-detail-aside { grid-column: 2; grid-row: 1 / span 2; align-content: start; } .request-discussion { grid-column: 1; grid-row: 2; min-width: 0; padding-top: 34px; border-top: 1px solid var(--line); } .request-crumb { margin: 0 0 18px; font-size: 14.5px; } .request-crumb a { color: var(--text-muted); text-decoration: none; } .request-crumb a:hover { color: var(--accent-text); } .request-detail-head .request-meta { margin: 0 0 14px; } /* h1 is capped at 12ch site-wide for the display headlines it was written for. A request title is somebody's sentence, so it gets a measure it can live in. */ .request-detail-title { margin: 0; max-width: 26ch; font-size: clamp(31px, 3.4vw, 45px); line-height: 1.05; letter-spacing: -.032em; } .request-detail-brief { margin: 20px 0 0; max-width: 70ch; color: var(--text-soft); font-size: 17.5px; line-height: 1.68; overflow-wrap: anywhere; } /* The vote as an action rather than a counter, now that it has room to say what it does. */ .request-back-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-inset) 70%, transparent); color: var(--text); font-family: var(--font-primary); font-size: 16.5px; font-weight: 750; line-height: 1.1; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; } .request-back-button:hover { border-color: var(--signal-teal); color: var(--accent-text); } .request-back-button.is-voted { border-color: color-mix(in srgb, var(--signal-teal) 60%, transparent); background: color-mix(in srgb, var(--signal-teal) 16%, transparent); color: var(--accent-text); } .request-back-arrow { font-size: 14px; line-height: 1; } .request-back-count { font-size: 19px; font-weight: 800; } .request-vote-note { margin: 12px 0 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.5; } /* The thread is a thread, not a landing section: a heading the size of a heading, and the count beside it instead of standing in for it. */ .request-discussion-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .request-discussion-head h2 { margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; } .request-discussion-count { color: var(--text-muted); font-size: 14.5px; } .request-discussion-lead { margin: 8px 0 22px; max-width: 70ch; color: var(--text-soft); font-size: 16px; line-height: 1.6; } .request-comment-form { max-width: 100%; gap: 14px; } .request-comment-form textarea { min-height: 104px; } .request-comment-actions { display: flex; } .request-login-note { margin: 0; color: var(--text-muted); font-size: 15.5px; } .request-login-note a { color: var(--accent-text); text-decoration: underline; } .request-comments-empty { margin-top: 24px; padding: 34px 24px; text-align: left; } .request-comments-empty p { margin: 0; } /* Same break as the other shells: one column, and the aside falls between the brief and the thread rather than after everything. */ @media (max-width: 1040px) { .request-detail-shell { grid-template-columns: minmax(0, 1fr); gap: 30px; } .request-detail-head, .request-detail-aside, .request-discussion { grid-column: 1; grid-row: auto; } } .request-aside .request-form { gap: 16px; max-width: 100%; } .request-aside .request-form .field textarea { min-height: 128px; } .request-aside .publish-aside-block .button { margin-top: 4px; } @media (max-width: 620px) { .request-card { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 18px 16px; } .request-detail-brief { font-size: 16.5px; } .request-comment-actions .button { width: 100%; } .request-body h3 { font-size: 19px; } .request-sort { width: 100%; } .request-sort-option { flex: 1; text-align: center; } } /* ---------------------------------------------------------------- * * Admin * * ---------------------------------------------------------------- */ .admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .admin-nav-item { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-family: var(--font-primary); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; } .admin-nav-item:hover { border-color: var(--line-strong); color: var(--text); } .admin-nav-item.active { background: var(--harbor-blue); border-color: var(--harbor-blue); color: #EFF9F5; } /* The overview: one tile per thing that has a count worth glancing at. */ .admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 32px; } .admin-card { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; } .admin-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 24px -18px var(--shadow); } .admin-card-value { display: block; font-family: var(--font-primary); font-size: 30px; font-weight: 800; line-height: 1.1; } .admin-card-label { display: block; margin-top: 4px; font-size: 14.5px; color: var(--text-muted); } .admin-card.attention .admin-card-value { color: var(--copper-amber); } /* A row of controls above a table: a search box, a filter, a New button. */ .admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; } .admin-toolbar form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } .admin-toolbar input[type="search"], .admin-toolbar input[type="text"], .admin-toolbar select { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-strong); color: var(--text); font-family: var(--font-secondary); font-size: 15px; } .admin-toolbar .spacer { flex: 1 1 auto; } .admin-toolbar-count { color: var(--text-muted); font-size: 14.5px; } .admin-pager { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 14.5px; color: var(--text-muted); } /* Tables in here carry a lot of columns, so they are tighter than the ones on the public pages and never wrap a cell into three lines. */ .table-wrap table.compact th, .table-wrap table.compact td { padding: 9px 12px; font-size: 14.5px; } .table-wrap table.compact td { white-space: nowrap; } .table-wrap table.compact td.wrap { white-space: normal; min-width: 260px; } .admin-cell-mono { font-family: var(--font-code); font-size: 13.5px; } /* Which kind of thing a row points at, when a column can point at two. */ .admin-cell-note { margin-left: 6px; color: var(--text-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; } /* Fields that live inside a table cell — the password box on /admin/users, the inline sort order on /admin/jobs — are outside .field and style themselves. */ .table-wrap table input[type="text"], .table-wrap table input[type="number"], .table-wrap table select { padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-strong); color: var(--text); font-family: var(--font-secondary); font-size: 14px; } .admin-note { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--signal-amber); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--signal-amber) 8%, transparent); font-size: 15px; color: var(--text-soft); } .admin-sql textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--code); color: var(--text); font-family: var(--font-code); font-size: 14px; resize: vertical; } .admin-subhead { margin: 36px 0 14px; font-family: var(--font-primary); font-size: 20px; font-weight: 700; }