/* * request-access.css — vendored replacement for the Tailwind Play CDN * (https://cdn.tailwindcss.com?plugins=forms,container-queries) that * frontend/request-access.html previously loaded at runtime. * * This is a hand-extracted static snapshot of exactly the utilities the page * uses, generated against the page's former inline tailwind.config (theme * colors / spacing / type scale). It is NOT a general Tailwind build and no * build step exists — if you add new utility classes to request-access.html, * add the matching rules here. * * Fidelity notes (intentional, verified against the CDN-rendered page): * - .font-display-lg / other "Source Serif 4" font-family declarations are * kept exactly as the CDN emitted them: `font-family: Source Serif 4` is * an INVALID unquoted family name (identifiers cannot start with a digit), * so browsers drop the declaration and the heading renders in the * inherited Hanken Grotesk — same as it always did under the CDN. Do not * "fix" the quoting without a deliberate design decision. * - The @tailwindcss/forms plugin subset (input/select/textarea base styles, * select chevron) is included because the page relied on it. * - dark: variant rules are included for completeness but are inert: the * page hardcodes and nothing toggles dark mode. */ /* ---------------------------------------------------------------- */ /* 1. Preflight subset (Tailwind v3 base reset, parts this page uses) */ /* ---------------------------------------------------------------- */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } body { margin: 0; line-height: inherit; } h1, h2 { font-size: inherit; font-weight: inherit; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: inherit; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; background-color: transparent; background-image: none; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg { display: block; vertical-align: middle; } img { max-width: 100%; height: auto; } ::placeholder { color: #9ca3af; opacity: 1; } /* ---------------------------------------------------------------- */ /* 2. @tailwindcss/forms plugin subset (control types this page uses) */ /* ---------------------------------------------------------------- */ [type="text"], [type="email"], [type="tel"], select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border-color: #6b7280; border-width: 1px; border-radius: 0; padding-top: 0.5rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-left: 0.75rem; font-size: 1rem; line-height: 1.5rem; } [type="text"]:focus, [type="email"]:focus, [type="tel"]:focus, select:focus, textarea:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #2563eb; /* The plugin draws a focus ring here; every control on this page carries focus:ring-0, so the net CDN rendering was "no ring". */ box-shadow: none; } input::placeholder, textarea::placeholder { color: #6b7280; opacity: 1; } select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ---------------------------------------------------------------- */ /* 3. Utilities (only the classes present in request-access.html) */ /* ---------------------------------------------------------------- */ /* Layout */ .block { display: block; } .flex { display: flex; } .grid { display: grid; } .flex-col { flex-direction: column; } .flex-grow { flex-grow: 1; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-start { justify-content: flex-start; } .justify-between { justify-content: space-between; } .overflow-hidden { overflow: hidden; } .resize-y { resize: vertical; } .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Margin */ .mx-auto { margin-left: auto; margin-right: auto; } .mt-auto { margin-top: auto; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } /* Sizing */ .min-h-screen { min-height: 100vh; } .min-h-\[58px\] { min-height: 58px; } .h-auto { height: auto; } .w-full { width: 100%; } .w-\[142px\] { width: 142px; } .max-w-md { max-width: 28rem; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; } /* Padding (theme spacing: gutter=24px, stack-md=16px, stack-lg=32px, margin-page=40px, section-gap=64px) */ .p-gutter { padding: 24px; } .p-stack-md { padding: 16px; } .pt-stack-md { padding-top: 16px; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-\[30px\] { padding-left: 30px; padding-right: 30px; } .px-margin-page { padding-left: 40px; padding-right: 40px; } .py-0 { padding-top: 0px; padding-bottom: 0px; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-stack-lg { padding-top: 32px; padding-bottom: 32px; } .py-section-gap { padding-top: 64px; padding-bottom: 64px; } /* Gap */ .gap-2 { gap: 0.5rem; } .gap-stack-sm { gap: 8px; } .gap-stack-md { gap: 16px; } .gap-stack-lg { gap: 32px; } .gap-gutter { gap: 24px; } /* Borders */ .border { border-width: 1px; } .border-b { border-bottom-width: 1px; } .border-t { border-top-width: 1px; } .border-outline-variant { border-color: #c1c8c3; } .rounded-sm { border-radius: 0.125rem; } .rounded-lg { border-radius: 0.5rem; } /* Backgrounds */ .bg-background { background-color: #fcf9f8; } .bg-primary-container { background-color: #0f2b22; } .bg-surface { background-color: #fcf9f8; } .bg-surface-container-low { background-color: #f6f3f2; } .bg-surface-container-lowest { background-color: #ffffff; } .bg-white\/95 { background-color: rgb(255 255 255 / 0.95); } /* Typography — font families (theme fontFamily) */ .font-body-base { font-family: Hanken Grotesk; } .font-headline-md { font-family: Hanken Grotesk; } .font-helper-text { font-family: Hanken Grotesk; } .font-label-caps { font-family: Hanken Grotesk; } /* Intentionally invalid; see fidelity notes in the header comment. */ .font-display-lg { font-family: Source Serif 4; } /* Typography — type scale (theme fontSize tuples) */ .text-label-caps { font-size: 12px; line-height: 1; letter-spacing: 0.1em; font-weight: 800; } .text-helper-text { font-size: 14px; line-height: 1.4; font-weight: 400; } .text-body-base { font-size: 16px; line-height: 1.6; font-weight: 400; } .text-headline-md { font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; } .text-display-lg { font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; } .text-\[18px\] { font-size: 18px; } .uppercase { text-transform: uppercase; } .tracking-widest { letter-spacing: 0.1em; } .underline { text-decoration-line: underline; } .underline-offset-4 { text-underline-offset: 4px; } /* Text colors */ .text-on-background { color: #1b1c1c; } .text-on-primary { color: #ffffff; } .text-on-primary\/80 { color: rgb(255 255 255 / 0.8); } .text-on-surface-variant { color: #424845; } .text-primary { color: #00150e; } .text-primary-container { color: #0f2b22; } /* Effects */ .backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* ---------------------------------------------------------------- */ /* 4. Variants */ /* ---------------------------------------------------------------- */ .placeholder\:text-outline::placeholder { color: #727975; } .hover\:bg-primary:hover { background-color: #00150e; } .focus\:border-primary:focus { border-color: #00150e; } .focus\:ring-0:focus { box-shadow: none; } /* dark: variants — inert (page hardcodes ) */ .dark .dark\:border-outline { border-color: #727975; } .dark .dark\:bg-primary-container { background-color: #0f2b22; } .dark .dark\:bg-surface-dim { background-color: #dcd9d9; } .dark .dark\:text-on-tertiary-container { color: #8d8e8a; } /* Responsive */ @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------------------------------------------------------------- */ /* 5. Page additions (not from the former Tailwind config) */ /* ---------------------------------------------------------------- */ /* Skip-to-content link, matching the customer-portal shells. */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 10px 16px; border: 1px solid #0f2b22; border-radius: 6px; background: #ffffff; color: #0f2b22; font-family: "Hanken Grotesk", sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: none; outline: 2px solid #0f2b22; outline-offset: 2px; }