/* Be Vietnam Pro, self-hosted. The fleet's typeface, and self-hosted rather than pulled from Google Fonts because a webfont request leaks every visitor's IP to a third party — the harmonization audit calls this out as the GDPR-safe choice. Four weights, woff2 only. */ @font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* HOIV community page. ──────────────────────────────────────────────────────────────────────────────────────────── Separate from styles.css on purpose: that one dresses a dense admin tool, this one has a single job — make someone want to press one button. Shared tokens, different rhythm (bigger type, more air, far less on screen). Dark-first like the rest of the fleet, and it follows the OS. Brand orange is #FF8A00. */ :root { --orange: #ff8a00; --orange-glow: rgba(255, 138, 0, 0.16); --blurple: #5865f2; --bg: #0d0d0f; --bg-raised: #16161a; --border: #2a2a32; --text: #f2f2f4; --text-muted: #a0a0ab; --text-faint: #6b6b78; --radius: 12px; --radius-lg: 18px; --maxw: 860px; --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif; } /* Follows the OS by default. The toggle stamps data-theme on , which must win in BOTH directions — a visitor who picks light on a dark machine, and vice versa. */ @media (prefers-color-scheme: light) { :root { --bg: #fbfbfc; --bg-raised: #ffffff; --border: #e6e6ec; --text: #16161a; --text-muted: #5a5a66; --text-faint: #8a8a96; } } :root[data-theme='light'] { --bg: #fbfbfc; --bg-raised: #ffffff; --border: #e6e6ec; --text: #16161a; --text-muted: #5a5a66; --text-faint: #8a8a96; } :root[data-theme='dark'] { --bg: #0d0d0f; --bg-raised: #16161a; --border: #2a2a32; --text: #f2f2f4; --text-muted: #a0a0ab; --text-faint: #6b6b78; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; /* The glow sits behind everything and never scrolls away — it is the only decoration. */ background-image: radial-gradient(ellipse 80% 45% at 50% -5%, var(--orange-glow), transparent 70%); background-repeat: no-repeat; } a { color: inherit; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; } /* ── nav ────────────────────────────────────────────────────────────────────────────────── */ .nav { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; text-decoration: none; } .wordmark { height: 24px; width: auto; display: block; } /* Two files: black wordmark for light backgrounds, near-white for dark. Swapped rather than tinted, so the brand asset always renders exactly as supplied. */ .logo-dark { display: block; } .logo-light { display: none; } @media (prefers-color-scheme: light) { .logo-dark { display: none; } .logo-light { display: block; } } :root[data-theme='light'] .logo-dark { display: none; } :root[data-theme='light'] .logo-light { display: block; } :root[data-theme='dark'] .logo-dark { display: block; } :root[data-theme='dark'] .logo-light { display: none; } .nav-cta { font-size: 14px; font-weight: 650; text-decoration: none; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; transition: border-color 0.15s, color 0.15s; } .nav-cta:hover { border-color: var(--orange); color: var(--orange); } main { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ── hero ───────────────────────────────────────────────────────────────────────────────── */ .hero { padding: 56px 0 72px; text-align: center; } .eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); } .hero h1 { margin: 0 0 22px; font-size: clamp(40px, 8.5vw, 76px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; } .lede { margin: 0 auto 36px; max-width: 32em; font-size: clamp(17px, 2.2vw, 20px); color: var(--text-muted); } /* The one button the whole page exists for. Blurple because it IS Discord — the same reasoning as the dashboard's sign-in button; everywhere else the brand colour leads. */ .cta { display: inline-flex; align-items: center; gap: 11px; background: var(--blurple); color: #fff; text-decoration: none; font-size: 17px; font-weight: 700; padding: 15px 30px; border-radius: 999px; transition: filter 0.15s, transform 0.15s; } .cta:hover { filter: brightness(1.12); transform: translateY(-1px); } .cta-mark { width: 22px; height: auto; flex-shrink: 0; } .cta-note { margin: 16px 0 0; font-size: 13.5px; color: var(--text-faint); } /* ── values ─────────────────────────────────────────────────────────────────────────────── */ .values { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); padding-bottom: 72px; } .values article { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; } .values h2 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; } .values p { margin: 0; font-size: 14.5px; color: var(--text-muted); } /* ── steps ──────────────────────────────────────────────────────────────────────────────── */ .section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 26px; text-align: center; } .steps { padding-bottom: 72px; } .steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; max-width: 34em; margin-inline: auto; } .steps li { display: flex; gap: 18px; align-items: flex-start; } .steps .n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; background: var(--orange); color: #14140f; font-weight: 800; font-size: 14px; display: grid; place-items: center; margin-top: 2px; } .steps h3 { margin: 0 0 3px; font-size: 16px; } .steps p { margin: 0; font-size: 14.5px; color: var(--text-muted); } /* ── credo ──────────────────────────────────────────────────────────────────────────────── */ .credo { text-align: center; padding: 56px 0 80px; border-top: 1px solid var(--border); } .credo p { margin: 0 auto 10px; max-width: 30em; font-size: clamp(16px, 2vw, 18px); color: var(--text-muted); font-style: italic; } .signoff { font-style: normal !important; font-size: clamp(24px, 4.5vw, 34px) !important; font-weight: 800; letter-spacing: -0.03em; color: var(--text) !important; margin: 22px 0 30px !important; } /* ── footer ─────────────────────────────────────────────────────────────────────────────── */ footer { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 48px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint); } footer a { color: var(--text-faint); text-decoration: none; } footer a:hover { color: var(--text); } /* ── welcome page ───────────────────────────────────────────────────────────────────────── */ .welcome { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; } .welcome .tick { font-size: 54px; line-height: 1; margin-bottom: 18px; } .welcome h1 { margin: 0 0 14px; font-size: clamp(30px, 6vw, 46px); letter-spacing: -0.03em; } .welcome p { margin: 0 auto 28px; max-width: 30em; color: var(--text-muted); font-size: 17px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ── hero mark + bigger wordmark ────────────────────────────────────────────────────────────── */ /* The H is the brand's strongest asset. It leads, at a size you cannot miss. */ .hero-mark { width: clamp(84px, 15vw, 128px); height: auto; display: block; margin: 0 auto 26px; } /* "HOME OF INNOVATION" is the name, not a label — sized to read as a statement rather than a caption above the headline. */ .hero .eyebrow { font-size: clamp(15px, 2.6vw, 22px); letter-spacing: 0.2em; margin-bottom: 22px; font-weight: 700; } .nav .wordmark { height: 32px; } /* ── theme toggle ───────────────────────────────────────────────────────────────────────────── */ .nav-right { display: flex; align-items: center; gap: 12px; } .theme-toggle { background: none; border: 1px solid var(--border); color: var(--text-muted); width: 34px; height: 34px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; font-size: 15px; line-height: 1; transition: border-color 0.15s, color 0.15s; } .theme-toggle:hover { border-color: var(--orange); color: var(--orange); } /* ── membership ─────────────────────────────────────────────────────────────────────────────── */ .membership { padding-bottom: 76px; } .tiers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .tier { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; } /* The paid tier leads with the brand colour; the free one must still feel like a real welcome, not a consolation prize — hence equal size and weight, differing only in accent. */ .tier.paid { border-color: var(--orange); background: linear-gradient(180deg, var(--orange-glow), transparent 60%), var(--bg-raised); } .tier .kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; } .tier.paid .kicker { color: var(--orange); } .tier h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -0.02em; } .tier p { margin: 0 0 18px; font-size: 14.5px; color: var(--text-muted); flex: 1; } .tier-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14.5px; text-decoration: none; color: var(--orange); } .tier-link:hover { text-decoration: underline; } .tier .included { align-self: flex-start; font-size: 13px; color: var(--text-faint); } /* ── the application form ───────────────────────────────────────────────────────────────────── */ .form-wrap { max-width: 560px; padding-bottom: 72px; } .form-title { font-size: clamp(30px, 6vw, 44px); letter-spacing: -0.03em; margin: 0 0 12px; font-weight: 800; } .form-lede { color: var(--text-muted); margin: 0 0 34px; font-size: 16.5px; } .who { font-size: 13.5px; color: var(--text-faint); } .field { margin-bottom: 24px; } .field label { display: block; font-weight: 650; font-size: 15px; margin-bottom: 4px; } .field .req { color: var(--orange); } .field .hint { margin: 0 0 8px; font-size: 13.5px; color: var(--text-faint); } .field input, .field textarea { width: 100%; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font: inherit; font-size: 16px; /* 16px minimum, or iOS zooms the page on focus */ padding: 13px 15px; } .field textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .field input:focus, .field textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Chips rather than a