/* ============================================================ davidpaterni.com / portfolio intake component Place at: assets/css/intake.css and link in after style.css Light and dark aware. Accent inherits --bs-primary from your Mizzle theme. ============================================================ */ /* ---------- HERO TYPE BUMP (scoped to .pi-hero on the hero container) ---------- */ .pi-hero h1{ font-size:clamp(2.4rem, 5.2vw, 4.4rem); line-height:1.04; letter-spacing:-.03em; margin-bottom:1.1rem; } .pi-hero .lead{ font-size:clamp(1.12rem, 1.8vw, 1.5rem); line-height:1.5; max-width:54ch; } /* ---------- PAGE COMPONENTS (use Bootstrap theme vars so they track light/dark) ---------- */ .pi-avail{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:"DM Sans",system-ui,sans-serif; font-size:.95rem; font-weight:500; letter-spacing:.01em; color:var(--bs-secondary-color); background:transparent; border:none; padding:6px 0; margin-bottom:1rem; transition:color .2s ease; } .pi-avail:hover{ color:var(--bs-body-color); } .pi-avail:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb,9,184,80),.4); border-radius:8px; } .pi-avail u{ text-decoration:none; color:var(--bs-primary); font-weight:600; } .pi-avail .dot{ width:9px; height:9px; border-radius:50%; background:#22c55e; flex:none; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:pi-pulse 2.6s ease infinite; } .pi-cta-block{ display:flex; flex-direction:column; gap:13px; align-items:flex-start; margin-top:.5rem; } .pi-cta{ display:inline-flex; align-items:center; gap:11px; cursor:pointer; font-family:"DM Sans",system-ui,sans-serif; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; color:#fff; background:var(--bs-primary); border:1px solid var(--bs-primary); border-radius:999px; padding:15px 26px; box-shadow:0 10px 26px -10px rgba(var(--bs-primary-rgb,9,184,80),.55); transition:transform .2s ease, box-shadow .25s ease, filter .2s ease; } .pi-cta:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 16px 38px -12px rgba(var(--bs-primary-rgb,9,184,80),.7); color:#fff; } .pi-cta:active{ transform:translateY(0); } .pi-cta:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb,9,184,80),.5), 0 10px 26px -10px rgba(var(--bs-primary-rgb,9,184,80),.55); } .pi-cta .arrow{ display:inline-flex; transition:transform .2s ease; } .pi-cta:hover .arrow{ transform:translateX(3px); } .pi-cta-note{ display:flex; align-items:center; gap:8px; font-family:"DM Sans",system-ui,sans-serif; font-size:.85rem; color:var(--bs-secondary-color); } .pi-cta-note .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; flex:none; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:pi-pulse 2.6s ease infinite; } @keyframes pi-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} /* ============================================================ THE MODAL. Dark by default; light tokens when data-bs-theme=light. ============================================================ */ .pi-overlay{ --pi-ink:#14161B; --pi-raised:#1C2027; --pi-raised-2:#232830; --pi-paper:#F1EDE4; --pi-muted:#9AA0AB; --pi-faint:#6B7280; --pi-line:rgba(241,237,228,.10); --pi-line-strong:rgba(241,237,228,.22); --pi-accent:var(--bs-primary); --pi-accent-rgb:var(--bs-primary-rgb,9,184,80); --pi-shadow:0 24px 70px -20px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3); --pi-font:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --pi-ease:cubic-bezier(.22,.61,.36,1); } .pi-overlay[data-bs-theme="light"]{ --pi-ink:#ffffff; --pi-raised:#f2f4f6; --pi-raised-2:#e8ebef; --pi-paper:#16181d; --pi-muted:#565d67; --pi-faint:#8b919b; --pi-line:rgba(20,22,27,.09); --pi-line-strong:rgba(20,22,27,.17); --pi-shadow:0 24px 70px -20px rgba(20,30,50,.30), 0 2px 8px rgba(0,0,0,.08); } .pi-overlay{ position:fixed; inset:0; z-index:99999; background:rgba(8,9,12,.62); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .3s var(--pi-ease); } .pi-overlay.is-open{ opacity:1; pointer-events:auto; } .pi-panel{ width:100%; max-width:540px; max-height:min(90vh,720px); background:var(--pi-ink); color:var(--pi-paper); border:1px solid var(--pi-line); border-radius:18px; box-shadow:var(--pi-shadow); font-family:var(--pi-font); display:flex; flex-direction:column; overflow:hidden; transform:translateY(14px) scale(.985); opacity:0; transition:transform .34s var(--pi-ease), opacity .34s var(--pi-ease); } .pi-overlay.is-open .pi-panel{ transform:none; opacity:1; } /* header */ .pi-head{ padding:22px 26px 0; flex:none; } .pi-head-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .pi-overlay .pi-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--pi-muted); margin:0; } .pi-close{ width:34px; height:34px; border-radius:50%; border:1px solid var(--pi-line-strong); background:transparent; color:var(--pi-muted); cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; transition:color .2s, border-color .2s; } .pi-close:hover{ color:var(--pi-paper); border-color:var(--pi-paper); } .pi-close:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--pi-accent-rgb),.45); } /* clickable progress stepper */ .pi-spine{ display:flex; gap:6px; margin:16px 0 2px; } .pi-spine.hide{ display:none; } .pi-step{ flex:1; height:4px; padding:0; border:none; border-radius:2px; background:var(--pi-line-strong); position:relative; overflow:hidden; cursor:default; transition:filter .15s ease; } .pi-step::after{ content:""; position:absolute; inset:0; width:0; background:var(--pi-accent); transition:width .45s var(--pi-ease); } .pi-step.done::after, .pi-step.active::after{ width:100%; } .pi-step.clickable{ cursor:pointer; } .pi-step.clickable:hover{ filter:brightness(1.2); } .pi-step:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--pi-accent-rgb),.45); } /* body + screens. screens reset so they never inherit theme section padding. */ .pi-body{ padding:22px 26px 24px; overflow-y:auto; flex:0 1 auto; } .pi-overlay .pi-screen{ display:none; margin:0; padding:0; min-height:0; } .pi-overlay .pi-screen.is-active{ display:block; animation:pi-slide .34s var(--pi-ease) both; } @keyframes pi-slide{ from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:none} } .pi-overlay .pi-h{ font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.18; margin:0 0 8px; color:var(--pi-paper); } .pi-overlay .pi-sub{ font-size:14.5px; line-height:1.55; color:var(--pi-muted); margin:0 0 22px; max-width:44ch; } /* intent choice cards */ .pi-choices{ display:grid; gap:12px; } .pi-choice{ text-align:left; width:100%; cursor:pointer; background:var(--pi-raised); border:1px solid var(--pi-line); border-radius:12px; padding:16px 18px; color:var(--pi-paper); font-family:var(--pi-font); display:flex; align-items:center; gap:14px; transition:border-color .2s, background .2s, transform .15s var(--pi-ease); } .pi-choice:hover{ background:var(--pi-raised-2); border-color:var(--pi-line-strong); transform:translateY(-1px); } .pi-choice:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--pi-accent-rgb),.45); } .pi-choice .ci{ width:36px; height:36px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(var(--pi-accent-rgb),.14); color:var(--pi-accent); } .pi-choice .cx{ flex:1; min-width:0; } .pi-choice .ct{ display:block; font-size:15.5px; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--pi-paper); } .pi-choice .cd{ display:block; font-size:13px; color:var(--pi-muted); margin-top:4px; line-height:1.4; } .pi-choice .cgo{ color:var(--pi-faint); transition:color .2s, transform .2s var(--pi-ease); } .pi-choice:hover .cgo{ color:var(--pi-accent); transform:translateX(2px); } /* fields */ .pi-field{ margin-bottom:20px; } .pi-overlay .pi-screen .pi-field:last-of-type{ margin-bottom:0; } .pi-overlay .pi-label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--pi-paper); margin-bottom:9px; } .pi-overlay .pi-label .opt{ color:var(--pi-faint); font-weight:500; letter-spacing:0; } .pi-seg{ display:flex; flex-wrap:wrap; gap:9px; } .pi-seg button{ font-family:var(--pi-font); font-size:13.5px; font-weight:500; cursor:pointer; color:var(--pi-paper); background:var(--pi-raised); border:1px solid var(--pi-line); border-radius:999px; padding:9px 15px; transition:border-color .18s, background .18s, color .18s; } .pi-seg button:hover{ border-color:var(--pi-line-strong); } .pi-seg button[aria-pressed="true"]{ background:var(--pi-accent); color:#fff; border-color:var(--pi-accent); font-weight:600; } .pi-seg button:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--pi-accent-rgb),.45); } .pi-input, .pi-textarea{ width:100%; box-sizing:border-box; font-family:var(--pi-font); font-size:15px; color:var(--pi-paper); background:var(--pi-raised); border:1px solid var(--pi-line); border-radius:10px; padding:12px 14px; transition:border-color .18s, box-shadow .18s; } .pi-textarea{ resize:vertical; min-height:84px; line-height:1.5; } .pi-input::placeholder, .pi-textarea::placeholder{ color:var(--pi-faint); } .pi-input:focus, .pi-textarea:focus{ outline:none; border-color:var(--pi-accent); box-shadow:0 0 0 3px rgba(var(--pi-accent-rgb),.22); } .pi-input.bad, .pi-textarea.bad{ border-color:#e5484d; } .pi-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media(max-width:440px){ .pi-row{ grid-template-columns:1fr; } } .pi-err{ font-size:12.5px; color:#e5484d; margin-top:7px; display:none; } .pi-err.show{ display:block; } /* footer */ .pi-foot{ padding:18px 26px 20px; flex:none; border-top:1px solid var(--pi-line); display:flex; align-items:center; gap:10px; background:var(--pi-ink); } .pi-foot.hide{ display:none; } .pi-back{ background:transparent; border:none; color:var(--pi-muted); font-family:var(--pi-font); font-size:14px; font-weight:500; cursor:pointer; padding:8px 10px; border-radius:8px; } .pi-back:hover{ color:var(--pi-paper); } .pi-back:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--pi-accent-rgb),.45); } .pi-spacer{ flex:1; } .pi-next{ font-family:var(--pi-font); font-size:14.5px; font-weight:600; letter-spacing:-.01em; cursor:pointer; color:#fff; background:var(--pi-accent); border:1px solid var(--pi-accent); border-radius:999px; padding:11px 22px; display:inline-flex; align-items:center; gap:8px; transition:filter .18s, transform .15s var(--pi-ease), opacity .2s; } .pi-next:hover{ filter:brightness(1.07); transform:translateY(-1px); } .pi-next:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--pi-accent-rgb),.5); } .pi-next[disabled]{ opacity:.45; cursor:not-allowed; transform:none; filter:none; } .pi-next .spin{ width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:pi-rot .7s linear infinite; display:none; } .pi-next.loading .spin{ display:inline-block; } .pi-next.loading .lbl{ opacity:.7; } @keyframes pi-rot{ to{ transform:rotate(360deg); } } /* confirmation */ .pi-confirm{ text-align:center; padding:8px 6px 4px; } .pi-check{ width:56px; height:56px; margin:6px auto 18px; border-radius:50%; background:rgba(34,197,94,.14); color:#22c55e; display:flex; align-items:center; justify-content:center; animation:pi-pop .5s var(--pi-ease) both; } @keyframes pi-pop{ 0%{transform:scale(.6); opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1); opacity:1} } .pi-confirm h3{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0 0 10px; color:var(--pi-paper); } .pi-confirm p{ font-size:14.5px; line-height:1.6; color:var(--pi-muted); margin:0 auto 6px; max-width:36ch; } .pi-give{ margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .pi-give a{ font-size:13.5px; font-weight:500; text-decoration:none; color:var(--pi-paper); border:1px solid var(--pi-line-strong); border-radius:999px; padding:9px 16px; transition:border-color .18s, color .18s; } .pi-give a:hover{ border-color:var(--pi-accent); color:var(--pi-accent); } .pi-give a:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--pi-accent-rgb),.45); } .pi-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .pi-overlay .pi-fine{ font-size:11.5px; color:var(--pi-faint); margin-top:14px; line-height:1.5; } @media (prefers-reduced-motion: reduce){ .pi-avail .dot, .pi-cta-note .dot{ animation:none; } .pi-overlay, .pi-panel, .pi-overlay .pi-screen, .pi-check, .pi-step::after{ transition:none; animation:none; } .pi-next .spin{ animation:pi-rot .7s linear infinite; } }