/* ════════════════════════════════════════════════════ REQUEST PAGES — SHARED STYLES Used by: request-students.html, request-organizations.html Color theming: each page sets --rq-accent and --rq-accent2 on (or :root) before this file's rules apply, e.g.: body { --rq-accent: var(--green); --rq-accent2: var(--accent2); } Falls back to --accent/--accent2 if not set, so this file is safe to use standalone too. ════════════════════════════════════════════════════ */ :root { --rq-accent: var(--accent); --rq-accent2: var(--accent2); /* Static rgba fallbacks — each page overrides these directly with a real rgba() string matching its theme color, so no color-mix() is needed and support is universal across all browsers. */ --rq-accent-soft: rgba(59,126,248,.1); --rq-accent-border: rgba(59,126,248,.25); --rq-accent-shadow: rgba(59,126,248,.25); } /* ═══ PAGE SHELL — app-like, minimal scroll ═══ */ .rq-shell { max-width: 1240px; margin: 0 auto; padding: 2rem clamp(1rem,4vw,2rem) 3.5rem; display: grid; grid-template-columns: 1fr 400px; gap: 1.75rem; align-items: start; } /* ═══ LEFT: compact hero + tabbed info ═══ */ .rq-left { min-width: 0; } .rq-mini-hero { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: 1.75rem 1.85rem; margin-bottom: 1.1rem; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 28px rgba(0,0,0,.22); } .rq-mini-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--rq-accent), var(--rq-accent2)); } .rq-badge-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem; } .rq-badge { display:inline-flex; align-items:center; gap:5px; background: var(--rq-accent-soft); border: 1px solid var(--rq-accent-border); color: var(--rq-accent); font-size:.7rem; font-weight:800; padding:.32rem .75rem; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; } .rq-badge.alt { background: rgba(59,126,248,.1); border-color: rgba(59,126,248,.22); color: var(--accent); } /* Hero banner image — optional, sits above the headline inside the hero card. If no image is provided (or the URL fails to load), it falls back to a clean gradient placeholder so the layout never looks broken either way. */ .rq-hero-banner { width: calc(100% + 3.7rem); margin: -1.75rem -1.85rem 1.4rem; aspect-ratio: 16/7; max-height: 220px; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--surface2), var(--surface3)); } .rq-hero-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .rq-hero-banner-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; background: linear-gradient(135deg, var(--rq-accent-soft), var(--surface3)); } .rq-hero-banner-ph svg { width: 38px; height: 38px; color: var(--rq-accent); opacity: .55; } .rq-hero-banner-ph span { font-size: .8rem; color: var(--muted); font-weight: 600; } .rq-hero-banner-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, var(--surface) 100%); } .rq-mini-hero h1 { font-size:clamp(1.5rem,2.7vw,1.95rem); font-weight:900; line-height:1.18; letter-spacing:-.01em; margin-bottom:.6rem; } .rq-mini-hero h1 em, .rq-mini-hero h1 .grad { font-style:normal; background: linear-gradient(135deg, var(--rq-accent), var(--rq-accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .rq-mini-hero p { color:var(--text2); font-size:.9rem; line-height:1.7; margin-bottom: 0; } /* Quick stats strip */ .rq-stats-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin-top:1.3rem; } .rq-stat { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:.7rem .5rem; text-align:center; transition:border-color .18s; } .rq-stat .num { font-size:1.1rem; font-weight:900; color: var(--rq-accent); display:block; line-height:1.1; } .rq-stat .lbl { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; } /* Travel/virtual notice — important callout (students page only, harmless if unused) */ .travel-notice { background: linear-gradient(135deg, rgba(245,166,35,.07), rgba(59,126,248,.04)); border: 1px solid rgba(245,166,35,.22); border-radius: 13px; padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; display: flex; gap: .9rem; align-items: flex-start; } .travel-notice .tn-icon { width:36px; height:36px; background:rgba(245,166,35,.14); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .travel-notice .tn-icon svg { width:18px; height:18px; color:var(--yellow); } .travel-notice h4 { font-size:.87rem; font-weight:800; margin-bottom:.35rem; color:var(--text); } .travel-notice p { font-size:.81rem; color:var(--text2); line-height:1.6; margin:0; } .travel-notice p strong { color: var(--text); font-weight: 700; } /* Tabbed content card — replaces long scroll of sections */ .rq-tabs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 28px rgba(0,0,0,.18); } .rq-tabs-nav { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; background: var(--surface2); position: relative; } .rq-tabs-nav::-webkit-scrollbar { display: none; } .rq-tab-btn { flex: 1; min-width: max-content; padding: .95rem 1.2rem; background: none; border: none; cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; transition: color .18s; white-space: nowrap; font-family: inherit; position: relative; } .rq-tab-btn:hover { color: var(--text2); } .rq-tab-btn.active { color: var(--rq-accent); border-bottom-color: var(--rq-accent); background: var(--surface); } .rq-tab-panels { padding: 1.6rem 1.7rem; min-height: 320px; } .rq-tab-panel { display: none; } .rq-tab-panel.active { display: block; animation: rqPanelFade .22s ease; } @keyframes rqPanelFade { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} } /* Overview tab content — compact benefit list */ .compact-benefits { display: flex; flex-direction: column; gap: 1rem; } .cb-item { display: flex; gap: .85rem; align-items: flex-start; } .cb-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--rq-accent-soft); } .cb-icon svg { width: 16px; height: 16px; color: var(--rq-accent); } .cb-text h4 { font-size: .87rem; font-weight: 800; margin-bottom: .2rem; letter-spacing:-.005em; } .cb-text p { font-size: .81rem; color: var(--text2); line-height: 1.6; } /* Eligibility chips inline (students page) */ .elig-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; } .elig-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: .45rem .8rem; font-size: .78rem; color: var(--text2); font-weight: 600; transition: border-color .18s, transform .15s; } .elig-chip:hover { border-color: var(--border2); transform: translateY(-1px); } .elig-chip svg { width: 13px; height: 13px; color: var(--rq-accent); flex-shrink: 0; } /* Process tab — compact vertical steps (students page) */ .compact-steps { display: flex; flex-direction: column; gap: 0; } .cs-item { display: flex; gap: 1rem; position: relative; padding-bottom: 1.5rem; } .cs-item:last-child { padding-bottom: 0; } .cs-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .cs-num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: .8rem; flex-shrink: 0; background: linear-gradient(135deg, var(--rq-accent), var(--rq-accent2)); box-shadow: 0 3px 10px var(--rq-accent-shadow); } .cs-line { width: 2px; flex: 1; background: var(--border); margin-top: .35rem; min-height: 16px; } .cs-item:last-child .cs-line { display: none; } .cs-content { padding-top: .2rem; } .cs-content h4 { font-size: .87rem; font-weight: 800; margin-bottom: .3rem; letter-spacing:-.005em; } .cs-content p { font-size: .81rem; color: var(--text2); line-height: 1.6; } /* Pricing tiers — compact (organizations page) */ .compact-tiers { display: flex; flex-direction: column; gap: .85rem; } .ct-card { border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem 1.3rem; position: relative; transition: border-color .18s, transform .18s; background: var(--surface2); } .ct-card:hover { transform: translateY(-1px); border-color: var(--border2); } .ct-card.featured { border-color: var(--rq-accent); background: var(--rq-accent-soft); box-shadow: 0 4px 20px var(--rq-accent-shadow); } .ct-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; } .ct-top h4 { font-size: .92rem; font-weight: 800; letter-spacing:-.005em; } .ct-tag { font-size: .63rem; font-weight: 800; background: var(--rq-accent); color: #fff; padding: .18rem .55rem; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; } .ct-audience { font-size: .78rem; color: var(--muted); margin-bottom: .7rem; } .ct-feats { display: flex; flex-wrap: wrap; gap: .45rem; } .ct-feat { font-size: .73rem; color: var(--text2); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .28rem .62rem; font-weight: 500; } /* Curriculum compact grid (organizations page) */ .curriculum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; } .curr-item { display: flex; gap: .7rem; align-items: flex-start; } .curr-num { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: .73rem; flex-shrink: 0; background: linear-gradient(135deg, var(--rq-accent), var(--rq-accent2)); } .curr-item h5 { font-size: .81rem; font-weight: 800; margin-bottom: .2rem; line-height: 1.35; letter-spacing:-.005em; } .curr-item p { font-size: .74rem; color: var(--muted); line-height: 1.5; } /* FAQ tab — compact accordion */ .compact-faq { display: flex; flex-direction: column; gap: .55rem; } .cf-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color .18s; } .cf-item.open { border-color: var(--border2); } .cf-q { width: 100%; text-align: left; background: var(--surface2); border: none; padding: .85rem 1.1rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: .83rem; font-weight: 700; color: var(--text); gap: .75rem; font-family: inherit; transition: background .15s; } .cf-q:hover { background: var(--surface3); } .cf-q svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; transition: transform .2s; } .cf-item.open .cf-q svg { transform: rotate(180deg); } .cf-a { max-height: 0; overflow: hidden; transition: max-height .22s ease; background: var(--surface); } .cf-item.open .cf-a { max-height: 280px; } .cf-a-inner { padding: .8rem 1.1rem; font-size: .8rem; color: var(--text2); line-height: 1.65; } /* Quote strip (students page) */ .quote-strip { background: var(--surface2); border-left: 3px solid var(--rq-accent); border-radius: 0 10px 10px 0; padding: .95rem 1.1rem; margin-top: 1.25rem; font-size: .8rem; color: var(--text2); line-height: 1.65; font-style: italic; } .quote-strip .qa { font-size: .73rem; color: var(--muted); font-style: normal; font-weight: 700; margin-top: .45rem; } /* ═══ RIGHT: compact CTA card (form opens in modal) ═══ */ .rq-right { position: sticky; top: 80px; } .cta-card { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-lg); overflow: hidden; text-align: center; box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 10px 36px rgba(0,0,0,.28); } .cta-card-top { height: 3px; background: linear-gradient(90deg, var(--rq-accent), var(--rq-accent2)); } .cta-card-body { padding: 2.25rem 1.75rem; } .cta-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; background: var(--rq-accent-soft); border: 1px solid var(--rq-accent-border); } .cta-icon svg { width: 28px; height: 28px; color: var(--rq-accent); } .cta-card-body h2 { font-size: 1.15rem; font-weight: 900; margin-bottom: .55rem; letter-spacing:-.01em; } .cta-card-body p { color: var(--text2); font-size: .86rem; line-height: 1.65; margin-bottom: 1.5rem; } .cta-mini-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.6rem; text-align: left; } .cta-mini-item { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--text2); font-weight: 500; } .cta-mini-item svg { width: 15px; height: 15px; color: var(--rq-accent); flex-shrink: 0; } .cta-card-foot { font-size: .73rem; color: var(--muted); margin-top: 1.1rem; } /* ═══ MODAL — request form popup ═══ */ .rq-modal-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(5,7,12,.78); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 1.25rem; overflow-y: auto; } .rq-modal-overlay.open { display: flex; animation: rqModalFade .2s ease; } @keyframes rqModalFade { from { opacity: 0; } to { opacity: 1; } } .rq-modal { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; position: relative; animation: rqModalUp .28s cubic-bezier(.16,1,.3,1); margin: auto; box-shadow: 0 24px 80px rgba(0,0,0,.55); } @keyframes rqModalUp { from { opacity:0; transform: translateY(20px) scale(.97); } to { opacity:1; transform: none; } } .rq-modal-top { height: 3px; background: linear-gradient(90deg, var(--rq-accent), var(--rq-accent2)); position: sticky; top: 0; z-index: 2; } .rq-modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 34px; height: 34px; background: var(--surface2); border: 1px solid var(--border); border-radius: 50%; color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; } .rq-modal-close:hover { background: var(--surface3); color: var(--text); transform: rotate(90deg); } .rq-form-head { padding: 1.75rem 1.75rem .3rem; } .rq-form-head h2 { font-size: 1.2rem; font-weight: 900; margin-bottom: .35rem; padding-right: 2rem; letter-spacing:-.01em; } .rq-form-head p { color: var(--muted); font-size: .82rem; margin-bottom: 0; } .rq-form-body { padding: 1.2rem 1.75rem 1.75rem; } .rq-form-body .field { margin-bottom: .95rem; } .rq-form-body .field label { font-size: .69rem; margin-bottom: .32rem; } .rq-form-body .field input, .rq-form-body .field select, .rq-form-body .field textarea { padding: .62rem .85rem; font-size: .85rem; } .rq-form-body .field-row { gap: .75rem; } .success-panel { display: none; text-align: center; padding: 2.75rem 1.75rem; } .success-panel .s-icon { width: 64px; height: 64px; background: rgba(18,201,122,.1); border: 2px solid rgba(18,201,122,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; } .success-panel .s-icon svg { width: 30px; height: 30px; color: var(--green); } .success-panel h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: .55rem; } .success-panel p { color: var(--text2); font-size: .87rem; line-height: 1.7; } /* sticky mobile bottom CTA bar */ .mobile-cta-bar { display: none; } /* ═══ MOBILE / TABLET ═══ */ @media(max-width:1000px){ .rq-shell { grid-template-columns: 1fr; } .rq-right { position: static; } } /* Tablet & large phones — tighten side margins, keep 2-col fields until truly narrow */ @media(max-width:768px){ .rq-shell { padding: 1.25rem 1rem 2rem; } .rq-mini-hero, .rq-tab-panels { padding-left: 1.25rem; padding-right: 1.25rem; } .rq-form-head, .rq-form-body { padding-left: 1.5rem; padding-right: 1.5rem; } /* Banner bleed must match the hero's new side padding (1.25rem × 2 = 2.5rem) */ .rq-hero-banner { width: calc(100% + 2.5rem); margin: -1.75rem -1.25rem 1.4rem; } } /* Phones — full mobile treatment */ @media(max-width:640px){ .rq-shell { padding: 1rem .85rem 2rem; } .rq-mini-hero, .rq-tab-panels { padding-left: 1.1rem; padding-right: 1.1rem; } /* Banner bleed must match the hero's new side padding (1.1rem × 2 = 2.2rem) */ .rq-hero-banner { width: calc(100% + 2.2rem); margin: -1.75rem -1.1rem 1.4rem; max-height: 170px; } .rq-form-head, .rq-form-body { padding-left: 1.25rem; padding-right: 1.25rem; } .rq-stats-strip { grid-template-columns: repeat(3,1fr); gap: .4rem; } .rq-stat { padding: .5rem .3rem; } .rq-tab-btn { padding: .75rem .85rem; font-size: .78rem; } .curriculum-grid { grid-template-columns: 1fr; } /* Form fields inside the modal: stack to 1 column, same as the rest of the site */ .rq-form-body .field-row { grid-template-columns: 1fr; gap: 0; } .rq-form-body .field-row .field { margin-bottom: .95rem; } /* 16px minimum prevents iOS Safari auto-zoom on input focus */ .rq-form-body .field input, .rq-form-body .field select, .rq-form-body .field textarea { font-size: 1rem; padding: .7rem .9rem; } /* Modal becomes a full-width bottom sheet with safe side margins */ .rq-modal-overlay { align-items: flex-end; padding: 0; } .rq-modal { max-width: 100%; width: 100%; max-height: 90vh; border-radius: 18px 18px 0 0; align-self: flex-end; margin: auto 0 0; } .rq-modal-overlay.open { animation: rqSheetFadeIn .22s ease; } @keyframes rqSheetFadeIn { from { opacity:0 } to { opacity:1 } } .rq-modal-close { top: .85rem; right: .85rem; width: 36px; height: 36px; } .rq-form-head { padding-top: 1.5rem; } .rq-form-head h2 { font-size: 1.1rem; } .rq-right { display: none; } .mobile-cta-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150; background: var(--surface); border-top: 1px solid var(--border2); padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(0,0,0,.35); } .mobile-cta-bar button { width: 100%; background: var(--rq-accent); color: #fff; border: none; padding: .9rem; border-radius: 10px; font-size: .92rem; font-weight: 800; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; /* comfortable tap target */ } /* Reserve space at the bottom of the page so the fixed bar above never covers footer content — the bar is ~80px tall including safe-area inset, so the footer gets that much extra breathing room at the very end. */ .site-footer { padding-bottom: calc(2rem + 80px + env(safe-area-inset-bottom, 0px)); } } /* Smallest phones (iPhone SE etc.) — extra tight side margins */ @media(max-width:380px){ .rq-shell { padding: .85rem .65rem 1.5rem; } .rq-mini-hero, .rq-tab-panels { padding-left: 1rem; padding-right: 1rem; } /* Banner bleed must match the hero's new side padding (1rem × 2 = 2rem) */ .rq-hero-banner { width: calc(100% + 2rem); margin: -1.75rem -1rem 1.4rem; max-height: 150px; } .rq-form-head, .rq-form-body { padding-left: 1.1rem; padding-right: 1.1rem; } .rq-stats-strip { gap: .3rem; } }