/* AI Society at Baylor — application form styles Shares the main site's design system (see ../website/css/site.css): light, near-white base, brand green + marigold gold as sparing accents, teal/iris/peach pillar coding, Cormorant Garamond + Figtree/Inter type. */ :root { /* Brand: Baylor pine green */ --brand: #0E543A; --brand-strong: #0A3B28; --on-brand: #FFFFFF; /* Accent: marigold gold (sparing — CTAs, kicker, emphasis, warn state) */ --gold-500: #F4BA38; --gold-300: #F8CE6B; --gold-600: #D99E1F; --gold-text: #6E4E12; /* Secondary palette (pillar coding + spare accent). *-700 = text-safe on light */ --teal: #79CBC4; --teal-700: #1A786E; --iris: #9AA0D6; --iris-700: #4F56A6; --peach: #F1A38A; --peach-700: #B5552F; --sky: #77B6E3; --sky-700: #2A6C9C; /* Deep navy */ --navy: #1F2933; --navy-900: #141C24; /* Neutrals (light) */ --bg: #FBFCFC; --surface-1: #FFFFFF; --surface-2: #F3F5F6; --ink: #1F2933; --ink-soft: #3C4853; --muted: #5E6B75; --line: #E3E7EA; --line-strong: #CFD6DB; /* Semantic */ --error: #B5552F; --success: #15724E; --info: #2A6C9C; /* Typography */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-sans: "Figtree", "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font: var(--font-body); /* Geometry */ --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* Elevation (tinted, per site.css's light shadow formula) */ --shadow-tint: 16, 60, 44; --sh-1: 0 1px 2px rgba(var(--shadow-tint), 0.06), 0 1px 1px rgba(var(--shadow-tint), 0.04); --sh-2: 0 4px 16px rgba(var(--shadow-tint), 0.08), 0 1px 3px rgba(var(--shadow-tint), 0.06); --sh-3: 0 18px 50px rgba(var(--shadow-tint), 0.16), 0 6px 16px rgba(var(--shadow-tint), 0.08); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 140ms; --t: 240ms; --t-slow: 520ms; color-scheme: light; } /* Dark mode: opt-in via [data-theme="dark"] on , set pre-paint by the inline script in index.html. Mirrors the main site's dark palette (../website/css/site.css) so /apply matches ais.baylor.tech in either mode. Headings stay --ink; the brand green brightens so fills, borders, and accent text stay legible on the dark surfaces. */ [data-theme="dark"] { --bg: #141715; --surface-1: #1C201D; --surface-2: #232823; --ink: #EDEEE9; --ink-soft: #CDD2CB; --muted: #9AA398; --line: #2E332D; --line-strong: #454B43; --brand: #1E9488; /* green fills: primary button, selected key */ --brand-strong: #7FC2B8; /* accent text, borders, focus ring, caret */ --on-brand: #FFFFFF; --gold-text: #E8BC5F; /* light gold (matches site.css dark) */ /* semantic + pillar accents brightened so they read on dark surfaces */ --teal-700: #7FC2B8; --iris-700: #A2A8D6; --peach-700: #E9A98E; --sky-700: #77B6E3; --info: #77B6E3; --error: #E9A98E; --success: #7FC2B8; --shadow-tint: 0, 0, 0; color-scheme: dark; } /* Keep the primary button a solid green fill on hover (the --brand-strong accent is a light green in dark mode, which would wash out white text). */ [data-theme="dark"] .btn:hover { background: #178076; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-body); color: var(--ink); background: radial-gradient(1100px 750px at 80% -10%, color-mix(in srgb, var(--brand-strong) 9%, transparent), transparent 60%), radial-gradient(900px 650px at -10% 110%, color-mix(in srgb, var(--gold-500) 7%, transparent), transparent 55%), var(--bg); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2.5px solid var(--brand-strong); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--gold-300); color: var(--navy-900); } /* ---------- progress bar ---------- */ .progress-track { position: fixed; top: 0; left: 0; right: 0; height: 5px; background: rgba(0, 0, 0, 0.06); z-index: 10; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); border-radius: 0 3px 3px 0; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- layout ---------- */ main#app { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 24px 32px; } .screen { width: 100%; max-width: 640px; animation: slideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } .screen.leaving { animation: slideOut 0.22s ease-in both; } .screen.entering-back { animation: slideInBack 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes slideIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInBack { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-24px); } } /* ---------- welcome ---------- */ .kicker { display: inline-block; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); background: color-mix(in srgb, var(--gold-500) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold-500) 35%, transparent); padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 18px; } .welcome h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 18px; } .welcome .lede { font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 10px; } .welcome .lede strong { color: var(--gold-text); font-weight: 600; } .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0; } /* order must match questions.js welcome.pillars: Learn&teach=teal, Build=iris, Connect=peach */ .pillar-card:nth-child(1) { --pc: var(--teal); --pc-text: var(--teal-700); } .pillar-card:nth-child(2) { --pc: var(--iris); --pc-text: var(--iris-700); } .pillar-card:nth-child(3) { --pc: var(--peach); --pc-text: var(--peach-700); } .pillar-card { background: var(--surface-1); border: 1px solid var(--line); border-top: 3px solid var(--pc); border-radius: var(--radius); box-shadow: var(--sh-1); padding: 14px; } .pillar-card .icon { font-size: 1.4rem; display: block; margin-bottom: 8px; } .pillar-card .name { font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; color: var(--pc-text); margin-bottom: 4px; } .pillar-card .desc { font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); } .timeline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .timeline .step { background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-size: 0.85rem; } .timeline .step .lbl { color: var(--ink-soft); margin-right: 6px; } .timeline .step .dt { font-weight: 700; color: var(--gold-text); } .timeline .arrow { color: var(--muted); } .duration { font-size: 0.88rem; color: var(--muted); margin-top: 14px; } /* ---------- question screens ---------- */ .part-label { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 12px; } .q-number { color: var(--brand-strong); font-weight: 700; margin-right: 6px; } .prompt { font-family: var(--font-display); font-size: clamp(1.35rem, 3.6vw, 1.75rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; } .helper { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; margin-bottom: 22px; } .optional-tag { font-size: 0.75rem; font-weight: 600; color: var(--sky-700); border: 1px solid color-mix(in srgb, var(--sky-700) 40%, transparent); border-radius: var(--radius-pill); padding: 3px 10px; vertical-align: middle; margin-left: 8px; } /* section-intro callout: sits ABOVE .prompt, distinct from .helper below it */ .q-intro { background: color-mix(in srgb, var(--info) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--info) 28%, var(--line)); border-left: 3px solid var(--info); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; } .q-intro-label { display: block; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--info); margin-bottom: 6px; } .q-intro p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; } .q-intro p + p { margin-top: 8px; } /* text inputs */ input[type="text"], input[type="email"], textarea, .search-box { width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--line-strong); color: var(--ink); font-family: var(--font-body); font-size: 1.3rem; padding: 10px 2px 12px; outline: none; transition: border-color 0.2s; caret-color: var(--brand-strong); } input:focus, textarea:focus, .search-box:focus { border-bottom-color: var(--brand-strong); } .search-box:focus { border-bottom-color: var(--sky-700); } input::placeholder, textarea::placeholder { color: var(--muted); } textarea { font-size: 1.05rem; line-height: 1.6; resize: none; min-height: 120px; border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--surface-1); } textarea:focus { border-color: var(--brand-strong); } .char-counter { text-align: right; font-size: 0.8rem; color: var(--muted); margin-top: 6px; } .char-counter.warn { color: var(--gold-text); } /* option cards */ .options { display: flex; flex-direction: column; gap: 10px; } .options.grid-2 { display: grid; grid-template-columns: 1fr 1fr; } .opt-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface-1); border: 1.5px solid var(--line); border-radius: var(--radius); color: var(--ink); font-family: var(--font-body); font-size: 1.02rem; box-shadow: var(--sh-1); padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; } .opt-card:hover { border-color: var(--brand-strong); transform: translateY(-1px); } .opt-card.selected { border-color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 12%, var(--surface-1)); } .opt-card.add-custom { border-style: dashed; } .opt-card.add-custom .key { color: var(--brand-strong); border-color: var(--brand-strong); } .opt-card .key { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); } .opt-card.selected .key { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .opt-card .opt-label { font-weight: 600; } .opt-card .opt-caption { display: block; font-size: 0.82rem; font-weight: 400; color: var(--ink-soft); margin-top: 2px; } .opt-card .check { margin-left: auto; color: var(--brand-strong); font-weight: 700; opacity: 0; transition: opacity 0.15s; } .opt-card.selected .check { opacity: 1; } /* chips */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { background: var(--surface-1); border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); font-family: var(--font-body); padding: 10px 14px; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s, transform 0.1s; } .chip:hover { border-color: var(--brand-strong); } .chip.selected { border-color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 12%, var(--surface-1)); } .chip.disabled { opacity: 0.4; cursor: not-allowed; } .chip .opt-label { font-weight: 600; font-size: 0.95rem; } .chip .opt-caption { display: block; font-size: 0.76rem; color: var(--ink-soft); margin-top: 2px; } .chips-count { margin-top: 14px; font-size: 0.85rem; color: var(--muted); } .chips-count strong { color: var(--brand-strong); } .extra-input { margin-top: 16px; font-size: 1.05rem; } /* search select */ .search-results { margin-top: 14px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .search-results .opt-card:hover { border-color: var(--sky-700); } .search-results .opt-card.selected { border-color: var(--sky-700); background: color-mix(in srgb, var(--sky) 16%, var(--surface-1)); } /* multi-select pills (search-select with multiple:true) */ .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .pill { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--brand) 12%, var(--surface-1)); border: 1px solid var(--brand-strong); color: var(--brand-strong); border-radius: var(--radius-pill); padding: 6px 8px 6px 12px; font-size: 0.88rem; font-weight: 600; } .pill-remove { background: none; border: none; cursor: pointer; color: var(--brand-strong); font-size: 1rem; line-height: 1; padding: 2px; border-radius: 50%; } .pill-remove:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); } /* resume upload */ .resume-block { display: flex; flex-direction: column; gap: 10px; } .resume-file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .resume-file-name { color: var(--ink-soft); font-size: 0.92rem; } .resume-remove { background: none; border: 1px solid var(--line-strong); color: var(--muted); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; line-height: 1; font-family: var(--font-body); } .resume-remove:hover { color: var(--error); border-color: var(--error); } .resume-note { color: var(--muted); font-size: 0.78rem; } .resume-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .resume-divider::before, .resume-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .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; } /* nav */ .nav-row { display: flex; align-items: center; gap: 14px; margin-top: 28px; } .btn { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; border: none; border-radius: var(--radius-pill); padding: 13px 26px; cursor: pointer; background: var(--brand); color: var(--on-brand); transition: transform 0.1s, box-shadow 0.15s, background 0.15s; box-shadow: var(--sh-1); } .btn:hover { transform: translateY(-1px); background: var(--brand-strong); } .btn:active { transform: translateY(0); } .btn.big { font-size: 1.15rem; padding: 15px 32px; background: var(--gold-500); color: var(--navy-900); box-shadow: var(--sh-2); } .btn.big:hover { background: var(--gold-300); } .btn-ghost { background: transparent; border: 1.5px solid var(--line-strong); color: var(--ink-soft); box-shadow: none; font-weight: 600; } .btn-ghost:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink); border-color: var(--brand-strong); } .key-hint { font-size: 0.82rem; color: var(--muted); } .key-hint kbd { font-family: var(--font-mono); background: var(--surface-1); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; font-size: 0.78rem; } .error-msg { color: var(--error); font-size: 0.9rem; margin-top: 12px; min-height: 1.2em; } /* shake on invalid */ .shake { animation: shake 0.35s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } } /* ---------- confirmation ---------- */ .confetti-title { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--ink); margin-bottom: 12px; } .recap { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 24px 0; max-height: 320px; overflow-y: auto; } .recap-row { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; } .recap-row:last-child { border-bottom: none; } .recap-row .k { font-family: var(--font-sans); color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 2px; } .recap-row.clickable { position: relative; cursor: pointer; padding-right: 52px; padding-left: 10px; margin: 0 -10px; border-radius: 8px; transition: background 0.12s; } .recap-row.clickable:hover { background: var(--surface-2); } .recap-row.clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .recap-row .edit-hint { position: absolute; right: 10px; top: 8px; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); opacity: 0; transition: opacity 0.12s; } .recap-row.clickable:hover .edit-hint, .recap-row.clickable:focus-visible .edit-hint { opacity: 1; } /* ---------- footer ---------- */ .site-footer { text-align: center; padding: 14px 20px 20px; font-size: 0.8rem; color: var(--muted); } .site-footer a { color: var(--brand-strong); text-decoration: none; } /* ---------- mobile ---------- */ @media (max-width: 560px) { main#app { padding: 40px 18px 24px; align-items: flex-start; padding-top: 12vh; } .pillars { grid-template-columns: 1fr; } .options.grid-2 { grid-template-columns: 1fr; } .timeline { gap: 6px; } .timeline .step { padding: 7px 10px; font-size: 0.78rem; } .key-hint { display: none; } .btn { width: 100%; } .nav-row { flex-direction: column; align-items: stretch; } .nav-row .btn-ghost { order: 2; } } @media (prefers-reduced-motion: reduce) { .screen, .screen.leaving, .screen.entering-back { animation: none; } .progress-fill { transition: none; } }