/* Minification failed. Returning unminified contents. (23,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (40,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (41,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (42,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (44,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (45,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (46,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (47,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (48,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (50,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (51,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (52,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (53,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (54,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (55,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (56,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (59,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (60,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (61,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (62,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (64,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (65,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (66,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (103,19): run-time error CSS1039: Token not allowed after unary operator: '-canvas' (104,14): run-time error CSS1039: Token not allowed after unary operator: '-body' (106,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-base' (112,14): run-time error CSS1039: Token not allowed after unary operator: '-accent' (116,14): run-time error CSS1039: Token not allowed after unary operator: '-accent-dark' (124,19): run-time error CSS1039: Token not allowed after unary operator: '-canvas' (130,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (131,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (136,18): run-time error CSS1039: Token not allowed after unary operator: '-s-5' (144,12): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (147,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (153,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (158,14): run-time error CSS1039: Token not allowed after unary operator: '-accent' (164,12): run-time error CSS1039: Token not allowed after unary operator: '-s-3' (171,16): run-time error CSS1039: Token not allowed after unary operator: '-s-6' (171,27): run-time error CSS1039: Token not allowed after unary operator: '-s-4' (181,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (182,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-sm' (183,16): run-time error CSS1039: Token not allowed after unary operator: '-s-5' (183,27): run-time error CSS1039: Token not allowed after unary operator: '-s-4' (186,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (191,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (198,22): run-time error CSS1039: Token not allowed after unary operator: '-s-5' (201,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-display' (203,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (205,19): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (208,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-base' (209,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (217,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (218,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (219,22): run-time error CSS1039: Token not allowed after unary operator: '-r-lg' (220,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (221,22): run-time error CSS1039: Token not allowed after unary operator: '-s-5' (224,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (225,32): run-time error CSS1039: Token not allowed after unary operator: '-line' (226,31): run-time error CSS1039: Token not allowed after unary operator: '-r-lg' (227,32): run-time error CSS1039: Token not allowed after unary operator: '-r-lg' (228,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (230,16): run-time error CSS1039: Token not allowed after unary operator: '-s-4' (230,27): run-time error CSS1039: Token not allowed after unary operator: '-s-5' (233,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-h2' (235,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (238,16): run-time error CSS1039: Token not allowed after unary operator: '-s-5' (245,19): run-time error CSS1039: Token not allowed after unary operator: '-accent' (246,25): run-time error CSS1039: Token not allowed after unary operator: '-accent' (249,22): run-time error CSS1039: Token not allowed after unary operator: '-r-md' (257,19): run-time error CSS1039: Token not allowed after unary operator: '-accent-dark' (258,21): run-time error CSS1039: Token not allowed after unary operator: '-accent-dark' (265,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (265,59): run-time error CSS1039: Token not allowed after unary operator: '-accent' (269,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (270,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (271,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (273,22): run-time error CSS1039: Token not allowed after unary operator: '-r-md' (281,19): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (282,21): run-time error CSS1039: Token not allowed after unary operator: '-accent' (283,14): run-time error CSS1039: Token not allowed after unary operator: '-accent-dark' (288,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (306,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (307,22): run-time error CSS1039: Token not allowed after unary operator: '-r-md' (309,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (319,21): run-time error CSS1039: Token not allowed after unary operator: '-accent' (320,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (324,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (331,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (332,22): run-time error CSS1039: Token not allowed after unary operator: '-s-1' (336,22): run-time error CSS1039: Token not allowed after unary operator: '-s-4' (344,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (346,19): run-time error CSS1039: Token not allowed after unary operator: '-s-1' (351,14): run-time error CSS1039: Token not allowed after unary operator: '-danger' (363,22): run-time error CSS1039: Token not allowed after unary operator: '-r-pill' (364,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-xs' (372,19): run-time error CSS1039: Token not allowed after unary operator: '-info-soft' (373,14): run-time error CSS1039: Token not allowed after unary operator: '-info' (376,19): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (377,14): run-time error CSS1039: Token not allowed after unary operator: '-accent-dark' (380,19): run-time error CSS1039: Token not allowed after unary operator: '-success-soft' (381,14): run-time error CSS1039: Token not allowed after unary operator: '-success' (384,19): run-time error CSS1039: Token not allowed after unary operator: '-warning-soft' (385,14): run-time error CSS1039: Token not allowed after unary operator: '-warning' (388,19): run-time error CSS1039: Token not allowed after unary operator: '-success-soft' (389,14): run-time error CSS1039: Token not allowed after unary operator: '-success' (392,19): run-time error CSS1039: Token not allowed after unary operator: '-danger-soft' (393,14): run-time error CSS1039: Token not allowed after unary operator: '-danger' (412,19): run-time error CSS1039: Token not allowed after unary operator: '-s-6' (431,19): run-time error CSS1039: Token not allowed after unary operator: '-line' (440,19): run-time error CSS1039: Token not allowed after unary operator: '-accent' (452,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (453,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (454,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (456,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-sm' (457,22): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (460,19): run-time error CSS1039: Token not allowed after unary operator: '-accent' (461,21): run-time error CSS1039: Token not allowed after unary operator: '-accent' (465,19): run-time error CSS1039: Token not allowed after unary operator: '-accent' (466,21): run-time error CSS1039: Token not allowed after unary operator: '-accent' (468,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (473,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-sm' (474,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (476,18): run-time error CSS1039: Token not allowed after unary operator: '-s-1' (480,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (493,13): run-time error CSS1039: Token not allowed after unary operator: '-s-3' (494,21): run-time error CSS1039: Token not allowed after unary operator: '-s-4' (522,19): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (523,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (524,22): run-time error CSS1039: Token not allowed after unary operator: '-r-md' (525,16): run-time error CSS1039: Token not allowed after unary operator: '-s-4' (526,14): run-time error CSS1039: Token not allowed after unary operator: '-body' (527,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-sm' (531,14): run-time error CSS1039: Token not allowed after unary operator: '-body' (541,12): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (554,12): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (555,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (556,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (557,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (559,22): run-time error CSS1039: Token not allowed after unary operator: '-r-md' (566,21): run-time error CSS1039: Token not allowed after unary operator: '-accent' (567,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (572,12): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (573,19): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (574,14): run-time error CSS1039: Token not allowed after unary operator: '-accent-dark' (575,22): run-time error CSS1039: Token not allowed after unary operator: '-r-pill' (577,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-sm' (590,12): run-time error CSS1039: Token not allowed after unary operator: '-s-3' (591,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (592,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (593,22): run-time error CSS1039: Token not allowed after unary operator: '-r-md' (594,16): run-time error CSS1039: Token not allowed after unary operator: '-s-4' (595,22): run-time error CSS1039: Token not allowed after unary operator: '-s-3' (600,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (609,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (612,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (613,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-sm' (616,21): run-time error CSS1039: Token not allowed after unary operator: '-success' (617,19): run-time error CSS1039: Token not allowed after unary operator: '-success-soft' (620,14): run-time error CSS1039: Token not allowed after unary operator: '-success' (628,16): run-time error CSS1039: Token not allowed after unary operator: '-s-7' (628,27): run-time error CSS1039: Token not allowed after unary operator: '-s-4' (629,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (633,14): run-time error CSS1039: Token not allowed after unary operator: '-line' (634,22): run-time error CSS1039: Token not allowed after unary operator: '-s-3' (637,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-h2' (639,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (640,22): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (643,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (644,22): run-time error CSS1039: Token not allowed after unary operator: '-s-4' (672,26): run-time error CSS1039: Token not allowed after unary operator: '-accent' (686,19): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (692,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (693,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (694,22): run-time error CSS1039: Token not allowed after unary operator: '-r-md' (695,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (696,16): run-time error CSS1039: Token not allowed after unary operator: '-s-5' (697,22): run-time error CSS1039: Token not allowed after unary operator: '-s-5' (699,14): run-time error CSS1039: Token not allowed after unary operator: '-body' (705,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (706,21): run-time error CSS1039: Token not allowed after unary operator: '-accent' (708,14): run-time error CSS1039: Token not allowed after unary operator: '-body' (711,26): run-time error CSS1039: Token not allowed after unary operator: '-accent' (717,22): run-time error CSS1039: Token not allowed after unary operator: '-r-md' (718,19): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft' (719,14): run-time error CSS1039: Token not allowed after unary operator: '-accent' (724,22): run-time error CSS1039: Token not allowed after unary operator: '-s-3' (729,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (730,19): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (734,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-sm' (735,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (736,19): run-time error CSS1039: Token not allowed after unary operator: '-s-3' (746,12): run-time error CSS1039: Token not allowed after unary operator: '-s-2' (747,18): run-time error CSS1039: Token not allowed after unary operator: '-fs-sm' (749,14): run-time error CSS1039: Token not allowed after unary operator: '-accent' (752,14): run-time error CSS1039: Token not allowed after unary operator: '-accent' */ /* ===================================================================== enroll.css — shared visual + accessibility foundation for the PUBLIC enrollment flow (12 Mississippi community colleges). Loaded by Views/Shared/LayoutTransparentUnauth.cshtml AFTER the admin "Color Admin" theme so it overrides. Per-view agents build on the component classes defined here. SCOPING RULE: every component is scoped under `.enroll-page` (set on the ) so NOTHING leaks into the admin theme — staff pages share that theme and must not change. The ONLY exception is the :root design tokens, which are intentionally global so other public pages (e.g. the catalog) can reference them. Tenant note: only the --accent* tokens are meant to be swapped per college later; status colors (success/warning/danger/info) are fixed. ===================================================================== */ /* --------------------------------------------------------------------- Design tokens (GLOBAL — not scoped). WCAG AA verified on --canvas. --------------------------------------------------------------------- */ :root { --accent: #2563eb; --accent-dark: #1e3a8a; --accent-soft: #eaf1fe; --ink: #1f2733; --body: #404a57; --muted: #5a6470; /* darker than the old #72808e — passes AA (>=4.5:1) on --canvas */ --line: #e4e8ee; --surface: #ffffff; --canvas: #f4f6fa; --success: #1f9d6b; --success-soft: #e6f6ef; --warning: #b7791f; --warning-soft: #fdf4e3; --danger: #d64545; --danger-soft: #fae8e8; --info: #2b7da3; --info-soft: #e7f2f8; --fs-display: 1.875rem; /* 30px */ --fs-h2: 1.25rem; /* 20px */ --fs-base: 1rem; /* 16px */ --fs-sm: .875rem; /* 14px */ --fs-xs: .75rem; /* 12px */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --shadow-md: 0 2px 6px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08); --shadow-lg: 0 8px 24px rgba(16, 24, 40, .10), 0 12px 40px rgba(16, 24, 40, .12); } /* --------------------------------------------------------------------- KILL the orphaned admin chrome on public pages. The unauth layout reuses the Color Admin "#page-container.page-header-fixed" shell, which (a) reserves 50px for a fixed #header that does not exist (the "decapitated" gap) and (b) lets pace.js paint a teal (#00acac) progress bar across the very top (the "stray teal line"). --------------------------------------------------------------------- */ .enroll-page #header, .enroll-page .pace, .enroll-page .pace-progress, .enroll-page .pace-activity { display: none !important; } /* Neutralize the fixed-header top padding the shell reserves. */ .enroll-page.page-header-fixed, .enroll-page .page-header-fixed, .enroll-page #page-container.page-header-fixed { padding-top: 0 !important; } /* The theme hides #page-container until App.init() fades it in; on public pages we never want it stuck invisible, so force it visible. */ .enroll-page #page-container.fade { opacity: 1 !important; } .enroll-page #page-loader { display: none !important; } /* --------------------------------------------------------------------- Page canvas + base typography --------------------------------------------------------------------- */ .enroll-page { background: var(--canvas); color: var(--body); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased; } .enroll-page a { color: var(--accent); } .enroll-page a:hover, .enroll-page a:focus { color: var(--accent-dark); } /* --------------------------------------------------------------------- Shell + chrome (top bar / centered container / footer) --------------------------------------------------------------------- */ .enroll-shell { min-height: 100vh; background: var(--canvas); display: flex; flex-direction: column; } .enroll-topbar { background: var(--surface); box-shadow: var(--shadow-sm); min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-5); position: relative; z-index: 10; } .enroll-topbar .enroll-wordmark { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 1.0625rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .2px; } .enroll-topbar .enroll-wordmark:hover, .enroll-topbar .enroll-wordmark:focus { color: var(--ink); text-decoration: none; } .enroll-topbar .enroll-wordmark i, .enroll-topbar .enroll-wordmark .enroll-wordmark-mark { color: var(--accent); } .enroll-topbar .enroll-topbar-actions { display: inline-flex; align-items: center; gap: var(--s-3); } .enroll-container { width: 100%; max-width: 720px; margin: 0 auto; padding: var(--s-6) var(--s-4); flex: 1 0 auto; } .enroll-container--wide { max-width: 960px; } .enroll-footer { flex-shrink: 0; text-align: center; color: var(--muted); font-size: var(--fs-sm); padding: var(--s-5) var(--s-4); } .enroll-footer a { color: var(--muted); text-decoration: underline; } .enroll-footer a:hover, .enroll-footer a:focus { color: var(--ink); } /* --------------------------------------------------------------------- Page head (replaces the faint font-weight:300 h2 + muted p pattern) --------------------------------------------------------------------- */ .enroll-head { margin-bottom: var(--s-5); } .enroll-title { font-size: var(--fs-display); font-weight: 600; color: var(--ink); line-height: 1.25; margin: 0 0 var(--s-2) 0; } .enroll-sub { font-size: var(--fs-base); color: var(--muted); margin: 0; } /* --------------------------------------------------------------------- Panels (restyle within scope only) --------------------------------------------------------------------- */ .enroll-page .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); margin-bottom: var(--s-5); } .enroll-page .panel > .panel-heading { background: var(--surface); border-bottom: 1px solid var(--line); border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); color: var(--ink); font-weight: 600; padding: var(--s-4) var(--s-5); } .enroll-page .panel > .panel-heading .panel-title { font-size: var(--fs-h2); font-weight: 600; color: var(--ink); } .enroll-page .panel > .panel-body { padding: var(--s-5); } /* --------------------------------------------------------------------- Buttons --------------------------------------------------------------------- */ .enroll-page .btn-enroll { background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600; border-radius: var(--r-md); min-height: 44px; padding: 10px 20px; line-height: 1.4; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .enroll-page .btn-enroll:hover, .enroll-page .btn-enroll:active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; } .enroll-page .btn-enroll:focus, .enroll-page .btn-enroll:focus-visible { color: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); } .enroll-page .btn-ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 600; border-radius: var(--r-md); min-height: 44px; padding: 10px 20px; line-height: 1.4; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .enroll-page .btn-ghost:hover, .enroll-page .btn-ghost:active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); } .enroll-page .btn-ghost:focus, .enroll-page .btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } /* Keep the existing block/large mobile sizing usable. */ .enroll-page .btn-block { display: block; width: 100%; } .enroll-page .btn-lg { min-height: 48px; font-size: 1.0625rem; } /* --------------------------------------------------------------------- Form controls --------------------------------------------------------------------- */ .enroll-page .form-control { height: 44px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 16px; /* 16px prevents iOS zoom-on-focus */ color: var(--ink); padding: 8px 12px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .enroll-page textarea.form-control { height: auto; min-height: 88px; } .enroll-page .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } .enroll-page .form-control::placeholder { color: var(--muted); opacity: 1; } .enroll-page label, .enroll-page .control-label { font-weight: 600; color: var(--ink); margin-bottom: var(--s-1); } .enroll-page .form-group { margin-bottom: var(--s-4); } /* Helper text under inputs. Also catches the existing .text-muted small. */ .enroll-page small, .enroll-page .form-text, .enroll-page small.text-muted { display: inline-block; color: var(--muted); font-size: 13px; margin-top: var(--s-1); } /* Required-field marker (mirror of Site.css convention, retinted to token). */ .enroll-page .form-required-marker { color: var(--danger); margin-left: 3px; font-weight: 700; } /* --------------------------------------------------------------------- Status pills (replace the failing white-on-light label-* badges). Each uses the *-soft background + the solid token foreground = AA pass. --------------------------------------------------------------------- */ .enroll-page .pill { display: inline-block; padding: 3px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; } .enroll-page .pill-started { background: var(--info-soft); color: var(--info); } .enroll-page .pill-progress { background: var(--accent-soft); color: var(--accent-dark); } .enroll-page .pill-paid { background: var(--success-soft); color: var(--success); } .enroll-page .pill-review { background: var(--warning-soft); color: var(--warning); } .enroll-page .pill-enrolled { background: var(--success-soft); color: var(--success); } .enroll-page .pill-returned { background: var(--danger-soft); color: var(--danger); } /* --------------------------------------------------------------------- THE STEPPER (signature element) Horizontal by default; collapses to a vertical timeline on small screens. Markup expected by per-view agents:
  1. Account
  2. 2 Apply
  3. 3 Pay
Add aria-current="step" + an .sr-only "current step" / "completed" note to each
  • in the views for screen readers. --------------------------------------------------------------------- */ .enroll-page .stepper { display: flex; align-items: flex-start; list-style: none; margin: 0 0 var(--s-6) 0; padding: 0; counter-reset: step; } .enroll-page .stepper .step { position: relative; flex: 1 1 0; text-align: center; min-width: 0; } /* connector line between steps (sits behind the dot) */ .enroll-page .stepper .step::before { content: ""; position: absolute; top: 16px; /* vertical center of the 32px dot */ left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; } .enroll-page .stepper .step:first-child::before { display: none; } /* the segment LEADING INTO a done/current step is accent-filled */ .enroll-page .stepper .step.done::before, .enroll-page .stepper .step.current::before { background: var(--accent); } .enroll-page .stepper .step-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); color: var(--muted); font-weight: 700; font-size: var(--fs-sm); margin: 0 auto var(--s-2) auto; } .enroll-page .stepper .step.done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; } .enroll-page .stepper .step.current .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); } .enroll-page .stepper .step-label { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.3; padding: 0 var(--s-1); } .enroll-page .stepper .step.done .step-label, .enroll-page .stepper .step.current .step-label { color: var(--ink); font-weight: 600; } /* Vertical timeline on phones. Single @media (this is an external .css). */ @media (max-width: 560px) { .enroll-page .stepper { display: block; } .enroll-page .stepper .step { display: flex; align-items: center; text-align: left; gap: var(--s-3); padding: 0 0 var(--s-4) 0; min-height: 40px; } .enroll-page .stepper .step::before { top: 32px; /* below this row's dot */ left: 15px; /* center of the 32px dot */ width: 2px; height: 100%; } .enroll-page .stepper .step:last-child::before { display: none; } .enroll-page .stepper .step:first-child::before { display: block; } .enroll-page .stepper .step-dot { margin: 0; flex: 0 0 32px; } .enroll-page .stepper .step-label { padding: 0; } } /* --------------------------------------------------------------------- e-Sign consent box --------------------------------------------------------------------- */ .enroll-page .consent-box { background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); color: var(--body); font-size: var(--fs-sm); } .enroll-page .consent-box label { font-weight: 400; color: var(--body); } /* --------------------------------------------------------------------- File pick / upload requirement rows --------------------------------------------------------------------- */ .enroll-page .file-pick { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); } .enroll-page .file-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .enroll-page .file-pick .file-pick-btn { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 600; border-radius: var(--r-md); min-height: 44px; padding: 8px 16px; cursor: pointer; } .enroll-page .file-pick input[type="file"]:focus + .file-pick-btn, .enroll-page .file-pick:focus-within .file-pick-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .enroll-page .file-chip { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--accent-soft); color: var(--accent-dark); border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-sm); max-width: 100%; } .enroll-page .file-chip .file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Requirement / upload row card */ .enroll-page .req-card { display: flex; align-items: flex-start; gap: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-3); } .enroll-page .req-card .req-card-icon { flex: 0 0 auto; font-size: 1.25rem; color: var(--muted); margin-top: 2px; } .enroll-page .req-card .req-card-body { flex: 1 1 auto; min-width: 0; } .enroll-page .req-card .req-card-title { font-weight: 600; color: var(--ink); } .enroll-page .req-card .req-card-meta { color: var(--muted); font-size: var(--fs-sm); } .enroll-page .req-card.is-complete { border-color: var(--success); background: var(--success-soft); } .enroll-page .req-card.is-complete .req-card-icon { color: var(--success); } /* --------------------------------------------------------------------- Empty state --------------------------------------------------------------------- */ .enroll-page .enroll-empty { text-align: center; padding: var(--s-7) var(--s-4); color: var(--muted); } .enroll-page .enroll-empty .enroll-empty-icon { font-size: 2.5rem; color: var(--line); margin-bottom: var(--s-3); } .enroll-page .enroll-empty .enroll-empty-title { font-size: var(--fs-h2); font-weight: 600; color: var(--ink); margin-bottom: var(--s-2); } .enroll-page .enroll-empty .enroll-empty-sub { color: var(--muted); margin-bottom: var(--s-4); } /* --------------------------------------------------------------------- Accessibility utilities --------------------------------------------------------------------- */ /* Visually-hidden but available to screen readers. Global (not scoped) so per-view agents can use it anywhere in the public flow. Guarded — only defined if not already present globally. */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Visible focus ring on every interactive element (>=3:1 against canvas). */ .enroll-page a:focus-visible, .enroll-page button:focus-visible, .enroll-page input:focus-visible, .enroll-page select:focus-visible, .enroll-page textarea:focus-visible, .enroll-page [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* --------------------------------------------------------------------- OPTIONAL two-level "program tile" catalog (CatalogGroupByProgram). GLOBAL (not .enroll-page scoped) on purpose: the public catalog renders WITHOUT ViewBag.EnrollChrome, so its is not .enroll-page (it is full-width, like the flat catalog's own .course-card styles). These reuse the global :root design tokens so the tiles read as one product with the rest of the enrollment flow. Default-OFF: only emitted when a tenant opts into program grouping, so the other 11 tenants never see these. --------------------------------------------------------------------- */ .program-tile-grid { margin-top: var(--s-2); } .program-tile { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: var(--s-5); margin-bottom: var(--s-5); text-decoration: none; color: var(--body); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .program-tile:hover, .program-tile:focus { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); text-decoration: none; color: var(--body); } .program-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .program-tile-icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: var(--s-3); } .program-tile-name { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0 0 var(--s-2); line-height: 1.3; } .program-tile-desc { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .program-tile-count { margin-top: auto; display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); } .program-tile-count i { color: var(--accent); }