/* ===================================================================== * GRADIFY ecosystem-landing — intake modal (TK-4) * * Dark-glass three-step intake panel that opens from any element with * [data-gd-intake]. Mobile-first bottom sheet at <=600px, centered * card at desktop. Self-contained styles — every selector is prefixed * `.gd-intake-` so it cannot collide with the locked design's tokens. * * Loaded as a separate in the layout. The DOM the rules target * is created at runtime by intake.js (after the bundler's * documentElement swap), appended to , and torn down on close. * ===================================================================== */ /* ---- 0. Trigger affordance ------------------------------------------ * * Any element wired as an intake trigger should read as clickable. The * locked design's CTA spans (e.g. EcosystemEntry .role .go) ship with * cursor:auto; this restores the pointer + a visible focus ring for the * keyboard path that cta-wire/intake.js enable. */ [data-gd-intake] { cursor: pointer; } [data-gd-intake][role="button"]:focus-visible { outline: 2px solid #ff8a6f; outline-offset: 3px; border-radius: 4px; } /* ---- 1. Backdrop + sheet root ---------------------------------------- */ .gd-intake-root { position: fixed; inset: 0; z-index: 12000; display: none; align-items: flex-end; justify-content: center; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif; color: #e9eef7; } .gd-intake-root[data-open="true"] { display: flex; } .gd-intake-backdrop { position: absolute; inset: 0; background: rgba(6, 9, 18, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transition: opacity 240ms ease; } .gd-intake-root[data-open="true"] .gd-intake-backdrop { opacity: 1; } .gd-intake-sheet { position: relative; z-index: 1; width: 100%; max-width: 560px; /* dvh first-class: 92vh ignores the mobile address bar, clipping the sheet bottom while the bar is visible (TK-7 phone-QA fix). vh line stays as the fallback for browsers without dynamic units. */ max-height: 92vh; max-height: 92dvh; overflow-y: auto; background: linear-gradient(180deg, rgba(20, 26, 42, 0.96) 0%, rgba(10, 14, 26, 0.98) 100%); border: 1px solid rgba(255, 116, 88, 0.18); border-bottom: none; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; padding: 22px 22px 26px; transform: translateY(20px); opacity: 0; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease; } .gd-intake-root[data-open="true"] .gd-intake-sheet { transform: translateY(0); opacity: 1; } @media (min-width: 601px) { .gd-intake-root { align-items: center; padding: 24px; } .gd-intake-sheet { border: 1px solid rgba(255, 116, 88, 0.18); border-radius: 18px; padding: 28px 30px 30px; max-height: 86vh; max-height: 86dvh; } } /* ---- 2. Header / close ------------------------------------------------ */ .gd-intake-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 14px; } .gd-intake-eyebrow { font: 11px/1 "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #ff8a6f; opacity: 0.9; } .gd-intake-close { appearance: none; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #e9eef7; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 160ms ease, transform 160ms ease; } .gd-intake-close:hover { background: rgba(255, 255, 255, 0.12); } .gd-intake-close:focus { outline: 2px solid #ff8a6f; outline-offset: 2px; } .gd-intake-close:active { transform: scale(0.96); } /* ---- 3. Step indicator ------------------------------------------------ */ .gd-intake-steps { display: flex; gap: 6px; margin: 0 0 18px; } .gd-intake-steps span { display: block; height: 3px; flex: 1; border-radius: 2px; background: rgba(255, 255, 255, 0.08); transition: background 200ms ease; } .gd-intake-steps span[data-active="true"] { background: linear-gradient(90deg, #ff8a6f, #ffbd4f); } /* ---- 4. Step bodies --------------------------------------------------- */ .gd-intake-step { display: none; } .gd-intake-step[data-active="true"] { display: block; } .gd-intake-step h2 { font: 600 22px/1.2 "Source Serif 4", "Source Serif Pro", Georgia, serif; margin: 0 0 4px; color: #f4f6fb; letter-spacing: -0.005em; } .gd-intake-step .gd-intake-sub { font-size: 14px; color: #a9b2c4; margin: 0 0 18px; } /* ---- 5. Role / intent cards ------------------------------------------ */ .gd-intake-cards { display: grid; gap: 10px; margin: 0 0 18px; } .gd-intake-card { appearance: none; width: 100%; text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); color: #e9eef7; padding: 13px 16px; border-radius: 12px; cursor: pointer; font-size: 15px; line-height: 1.35; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: border-color 160ms ease, background 160ms ease, transform 120ms ease; } .gd-intake-card .gd-intake-card-sub { display: block; font: 11px/1.4 "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #8290a8; margin-top: 2px; } .gd-intake-card .gd-intake-arrow { flex-shrink: 0; opacity: 0.4; transition: transform 160ms ease, opacity 160ms ease; } /* Hover states only on devices that actually hover — on touch, the last tapped card kept a "stuck" hover ring that read as a second selection (TK-7 phone-QA fix). */ @media (hover: hover) { .gd-intake-card:hover { border-color: rgba(255, 138, 111, 0.55); background: rgba(255, 138, 111, 0.06); } .gd-intake-card:hover .gd-intake-arrow { opacity: 1; transform: translateX(2px); } } .gd-intake-card:focus { outline: 2px solid #ff8a6f; outline-offset: 2px; } .gd-intake-card[data-selected="true"] { border-color: #ff8a6f; background: rgba(255, 138, 111, 0.1); } /* ---- 6. Contact form -------------------------------------------------- */ .gd-intake-form { display: grid; gap: 12px; } .gd-intake-row { display: grid; gap: 4px; } .gd-intake-row > label { font: 600 12px/1.2 "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #8290a8; } .gd-intake-row > input { appearance: none; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 11px 13px; font: inherit; color: #f4f6fb; transition: border-color 160ms ease, background 160ms ease; } .gd-intake-row > input:focus { outline: none; border-color: #ff8a6f; background: rgba(255, 255, 255, 0.06); } .gd-intake-row[data-error="true"] > input { border-color: #ff5a5a; } .gd-intake-row > .gd-intake-msg { font-size: 12px; color: #ff8b8b; min-height: 1em; } .gd-intake-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } @media (max-width: 420px) { .gd-intake-grid2 { grid-template-columns: minmax(0, 1fr); } } /* TK-8 (new Places Data API) — custom autocomplete dropdown rendered directly under the Street Address field. intake.js builds the markup from AutocompleteSuggestion results, so we fully own the dark theme + stacking (unlike Google's shadow-DOM PlaceAutocompleteElement). Anchored inside the position:relative street row; intake.js sets `top` to sit under the input. */ .gd-intake-ac { list-style: none; margin: 0; padding: 4px; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; max-height: 248px; overflow-y: auto; background: #131a2b; border: 1px solid rgba(255, 138, 111, 0.28); border-radius: 12px; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55); -webkit-overflow-scrolling: touch; } .gd-intake-ac-item { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 8px; cursor: pointer; transition: background 120ms ease; } .gd-intake-ac-item:hover, .gd-intake-ac-item.is-active { background: rgba(255, 138, 111, 0.14); } .gd-intake-ac-main { font-size: 14px; color: #f4f6fb; line-height: 1.3; } .gd-intake-ac-sec { font-size: 12px; color: #8290a8; line-height: 1.3; } .gd-intake-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #c5cdde; line-height: 1.45; padding: 8px 0 0; } .gd-intake-consent input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; accent-color: #ff8a6f; } .gd-intake-consent a { color: #ffbd4f; text-decoration: underline; text-underline-offset: 2px; } /* Honeypot: never visible, never tab-able. */ .gd-intake-honeypot { position: absolute !important; left: -10000px !important; top: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* ---- 7. Actions ------------------------------------------------------- */ .gd-intake-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; } .gd-intake-btn { appearance: none; cursor: pointer; border-radius: 999px; padding: 12px 22px; font: 600 14px/1 "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.04em; text-transform: uppercase; transition: transform 120ms ease, background 160ms ease, opacity 160ms ease; } .gd-intake-btn-primary { background: linear-gradient(135deg, #ff8a6f, #ffa566); color: #1a1208; border: 1px solid rgba(255, 138, 111, 0.6); } .gd-intake-btn-primary:hover { transform: translateY(-1px); } .gd-intake-btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; } .gd-intake-btn-ghost { background: transparent; color: #c5cdde; border: 1px solid rgba(255, 255, 255, 0.12); } .gd-intake-btn-ghost:hover { background: rgba(255, 255, 255, 0.05); } .gd-intake-btn:focus { outline: 2px solid #ff8a6f; outline-offset: 2px; } /* ---- 8. Banner (top-of-modal errors) --------------------------------- */ .gd-intake-banner { display: none; background: rgba(255, 90, 90, 0.1); border: 1px solid rgba(255, 90, 90, 0.35); color: #ffb5b5; padding: 10px 14px; border-radius: 10px; font-size: 13px; margin: 0 0 14px; } .gd-intake-banner[data-visible="true"] { display: block; } /* ---- 9. Success ------------------------------------------------------- */ .gd-intake-success-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(86, 220, 154, 0.12); color: #56dc9a; display: flex; align-items: center; justify-content: center; margin: 6px 0 14px; font-size: 28px; } .gd-intake-ref { font: 600 12px/1 "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.1em; color: #8290a8; margin: 14px 0 4px; } /* ---- 10. Reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .gd-intake-backdrop, .gd-intake-sheet, .gd-intake-card, .gd-intake-btn, .gd-intake-arrow { transition: none !important; transform: none !important; } } /* ---- 11. Lock body scroll when modal is open ------------------------- */ .gd-intake-locked, .gd-intake-locked body { overflow: hidden !important; }