/* * components.css — Reusable UI pieces * ----------------------------------- * Buttons, badges, cards, etc. Each component has its base class + * size/variant modifiers. Everything reads from tokens. * * RULE: Zero hardcoded values allowed anywhere in this file. * Every color, font-size, spacing, radius, line-height, and letter-spacing * MUST reference a variable from tokens.css. If a value doesn't have a token * yet, add the token to tokens.css first — never write a raw value here. */ /* ===================================================================== BUTTON — one size, four color variants --------------------------------------------------------------------- Spec (from brand decision): • padding 12px 24px (--space-3 --space-6) • border radius 6px (--radius-md) • font-weight 500 (--font-weight-medium) • single size — no sm/md/lg variants ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--btn-padding-y) var(--space-5); font-family: inherit; font-weight: var(--font-weight-regular); /* 400 — matches nav links so header CTA feels cohesive */ font-size: var(--font-size-base); line-height: var(--line-height-tight); text-transform: capitalize; /* "Learn More" — first letter of each word */ border: var(--border-width-strong) solid transparent; border-radius: var(--radius-md); text-align: center; cursor: pointer; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .btn:active { transform: translateY(1px); } /* --------------------------------------------------------------------- Variant 1 — .btn--accent (red → navy on hover) The header Compare button uses this. --------------------------------------------------------------------- */ .btn--accent { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); } .btn--accent:hover, .btn--accent:focus-visible { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); } /* --------------------------------------------------------------------- Variant 2 — .btn--primary (navy → red on hover) Use for primary CTAs across the site. --------------------------------------------------------------------- */ .btn--primary { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); } .btn--primary:hover, .btn--primary:focus-visible { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); } /* --------------------------------------------------------------------- Variant 3 — .btn--outline-primary (navy outline → fills navy on hover) --------------------------------------------------------------------- */ .btn--outline-primary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--outline-primary:hover, .btn--outline-primary:focus-visible { background: var(--color-primary); color: var(--color-text-on-primary); } /* --------------------------------------------------------------------- Variant 4 — .btn--outline-accent (red outline → fills red on hover) --------------------------------------------------------------------- */ .btn--outline-accent { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } .btn--outline-accent:hover, .btn--outline-accent:focus-visible { background: var(--color-accent); color: var(--color-text-on-accent); } /* ===================================================================== BADGE — small inline label ===================================================================== */ .badge { display: inline-block; padding: var(--space-0-5) var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); background: var(--color-offwhite); color: var(--color-text); border-radius: var(--radius-full); line-height: var(--line-height-prose); } .badge--primary { background: var(--color-primary); color: var(--color-text-on-primary); } .badge--accent { background: var(--color-accent); color: var(--color-text-on-accent); } .badge--star { background: var(--color-star); color: var(--color-secondary); } /* ===================================================================== STAT (used across cards + dashboards) ===================================================================== */ .stat { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-offwhite); } .stat__label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin-bottom: var(--space-1); } .stat__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-regular); /* 400 — only h1 uses 500 */ color: var(--color-primary); line-height: var(--line-height-tight); } /* ===================================================================== STAT GRID — auto-fit grid for stats / metric tiles ===================================================================== */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; } /* ===================================================================== COLLEGE CARD --------------------------------------------------------------------- Sections, top to bottom: 1. Header — square navy avatar + name + (📍 city/state below it) 2. Score — score number + "Strong" + "UCD Score / 100" (bottom-aligned) 3. Stats — 3 columns with horizontal dividers above + below + verticals 4. Tags — top 3 program chips 5. Footer — "View Profile →" + ownership outline badge (with divider above) The whole card is clickable (the name link's ::before stretches across). Section heights are normalized so cards in a grid align uniformly. ===================================================================== */ .card-college { position: relative; background: var(--color-card-bg); /* warm off-white #FEFCFD */ border: var(--border-width) solid var(--color-border); /* #DDD default — uniform across all cards */ border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); cursor: pointer; /* whole card is clickable (via JS) */ height: 100%; transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } /* Hover: navy border (unique to college — major/program/career don't get this), PLUS a 2px upward lift to match the other cards. No shadow — the lift alone provides the "interactive" cue without darkening the edges. */ .card-college:hover { border-color: var(--color-primary); transform: translateY(-2px); } /* --- 1. Header: avatar + (name + location) --- min-height reserves space for the worst case (2-line title + location) so every card's score/stats/tags/footer line up horizontally across the grid regardless of whether the title is 1 or 2 lines. 2-line title: 2.6em × 16px = 41.6px gap to location: 4px location: 1.3em × 12px = 15.6px total ≈ 62px Avatar (44px) is shorter, so it sits at the top of the header (align-items: flex-start) — same visual position whether the title is 1 or 2 lines. */ .card-college__header { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 62px; } .card-college__avatar { flex-shrink: 0; width: 44px; height: 44px; background: var(--color-primary); color: var(--color-text-on-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); /* 400 */ letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; } .card-college__title-block { min-width: 0; flex: 1; } /* Title may be 1 OR 2 lines — location sits 4px below. Cards in the same grid row stay equal height via grid stretch. */ .card-college__name { font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-medium); /* 500 — explicit carve-out from "h1-only" rule */ line-height: var(--line-height-base); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; /* clamp safety: never more than 2 lines */ -webkit-box-orient: vertical; overflow: hidden; } /* Title color stays navy (primary). No red on hover. */ .card-college__name a { color: var(--color-primary); text-decoration: none; } .card-college__name a:hover { color: var(--color-primary); } /* Whole-card click is handled by JavaScript on the article element (data-href). No CSS pseudo-overlay → individual text elements remain inspectable. */ .card-college__location { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); /* 12px */ color: var(--color-text-muted); margin: var(--space-1) 0 0 0; /* small gap below title */ font-weight: var(--font-weight-light); /* 300 */ line-height: var(--line-height-base); } /* Map pin SVG sits inline before the city name */ .card-college__location-icon { flex-shrink: 0; width: 12px; height: 12px; color: var(--color-text-muted); } /* --- 2. UCD Score: cleaner, more readable layout. Top row: tier label (left) + score number (right) Middle: thin pill bar showing the score visually Bottom: small "UCD Score / 100" caption */ .card-college__score-block { display: flex; flex-direction: column; gap: var(--space-1-5); } .card-college__score-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .card-college__score-label { font-size: var(--font-size-sm); /* 14px */ font-weight: var(--font-weight-regular); color: var(--color-secondary); line-height: var(--line-height-tight); } .card-college__score-value { font-size: var(--font-size-sm); /* 14px — same size as label, balanced */ font-weight: var(--font-weight-medium); /* 500 — slightly heavier to draw the eye */ color: var(--color-secondary); line-height: var(--line-height-tight); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--letter-spacing-subtle); } /* Thin pill bar — purely visual. No text inside. */ .card-college__score-bar { position: relative; width: 100%; height: 8px; background: var(--color-border-strong); /* light gray track */ border-radius: var(--radius-full); overflow: hidden; } .card-college__score-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--color-score-fill); /* friendly bright blue #3B82F6 */ border-radius: inherit; /* width: NN% set inline */ animation: card-college-score-bar-grow 700ms ease-out; transform-origin: left center; } .card-college__score-meta { font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-light); color: var(--color-text-muted); margin-top: 2px; } @keyframes card-college-score-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .card-college__score-bar-fill { animation: none; } } /* --- 3. Stats: dividers above + below + verticals between columns --- Negative horizontal margin pulls the grid 12px past the card's content edges, then each column's 12px padding cancels that — net effect: first/last column content is flush with the rest of the card content while all 3 column widths stay perfectly equal. */ .card-college__stats { display: grid; /* minmax(0, 1fr) — prevents columns from auto-expanding to fit long content ("$19,857" was wider than "26.6%" so columns went unequal). With minmax(0,1fr) each column is exactly 1/3 of the grid; content longer than the column width wraps or truncates instead of pushing the column wider. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: var(--space-4) 0; margin: 0 calc(-1 * var(--space-3)); border-top: var(--border-width) solid var(--color-border); border-bottom: var(--border-width) solid var(--color-border); } /* All 3 columns have IDENTICAL padding so content widths match exactly. The grid uses negative horizontal margin to extend slightly beyond the card's content edges — this lets the first/last columns' content visually align with the rest of the card content while keeping all column widths equal. */ .card-college__stat { text-align: left; padding: 0 var(--space-3); /* 12px L/R — same on every column */ border-right: var(--border-width) solid var(--color-border); } .card-college__stat:nth-child(3) { border-right: 0; /* no divider after the 3rd (last) stat column — nth-child, not last-child, because the badge row is now the final grid child */ } .card-college__stat-label { display: block; font-size: var(--font-size-2xs); /* 10px — small uppercase label */ color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); font-weight: var(--font-weight-regular); /* 400 */ margin-bottom: 4px; } .card-college__stat-value { display: block; font-size: var(--font-size-sm); /* 14px — the value */ font-weight: var(--font-weight-medium); /* 500 — explicit carve-out from "h1-only" rule */ color: var(--color-secondary); font-variant-numeric: tabular-nums; line-height: var(--line-height-tight); } /* Admission badge sits on its own full-width row below the three stats, close above the stats block's bottom divider (but not touching it). */ .card-college__admission { grid-column: 1 / -1; padding: 0 var(--space-3); margin-top: var(--space-4); } /* Tighten the gap down to the divider — only when the badge row is present, so badge-less cards keep their balanced padding. */ .card-college__stats:has(.card-college__admission) { padding-bottom: var(--space-2); } /* Tier badges — admission-difficulty + UCD-score labels. Shared shape; the colour modifier carries a green→red read (good odds / high quality = green, long shot / low quality = red). Used on the college card, college profile, Compare tool, and the Methodology page. */ .admission-badge, .score-badge { display: inline-block; margin-top: var(--space-1); padding: var(--space-0-5) var(--space-2); font-size: var(--font-size-3xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); line-height: var(--line-height-button); color: var(--color-tag-text); background: var(--color-tag-bg); border-radius: var(--radius-full); white-space: nowrap; } /* Admission difficulty — green = best odds of getting in, red = longest shot. */ .admission-badge--open { background: var(--color-tier-1-bg); color: var(--color-tier-1-text); } .admission-badge--easy { background: var(--color-tier-2-bg); color: var(--color-tier-2-text); } .admission-badge--moderate { background: var(--color-tier-3-bg); color: var(--color-tier-3-text); } .admission-badge--selective { background: var(--color-tier-4-bg); color: var(--color-tier-4-text); } .admission-badge--very-selective { background: var(--color-tier-5-bg); color: var(--color-tier-5-text); } .admission-badge--highly-selective { background: var(--color-tier-6-bg); color: var(--color-tier-6-text); } /* UCD Score labels — green = Excellent, red = Average. */ .score-badge--excellent { background: var(--color-tier-1-bg); color: var(--color-tier-1-text); } .score-badge--strong { background: var(--color-tier-2-bg); color: var(--color-tier-2-text); } .score-badge--good { background: var(--color-tier-3-bg); color: var(--color-tier-3-text); } .score-badge--fair { background: var(--color-tier-5-bg); color: var(--color-tier-5-text); } .score-badge--average { background: var(--color-tier-6-bg); color: var(--color-tier-6-text); } /* In a Methodology table cell: no top margin, and keep the larger 10px size. */ .trust-table .admission-badge, .trust-table .score-badge { margin-top: 0; font-size: var(--font-size-2xs); } /* --- 4. Program tags --- */ .card-college__tags { display: flex; flex-wrap: nowrap; gap: var(--space-2); overflow: hidden; } .card-college__tag { display: inline-block; padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-regular); color: var(--color-tag-text); /* dark slate on soft gray-blue */ background: var(--color-tag-bg); border: 0; /* no border — fill carries the shape */ border-radius: var(--radius-full); /* fully rounded pill */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; line-height: var(--line-height-normal); } /* --- 5. Footer: pushed to bottom of card via margin-top: auto. Asymmetric padding: more breathing room ABOVE the divider (it sits ~16px below the tags), less BELOW (the divider visually attaches to the CTA action zone — "everything above is info; this row is the action"). */ .card-college__footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); /* 12px (was 16px) — divider sits closer to CTA */ border-top: var(--border-width) solid var(--color-border); margin-top: auto; } /* CTA — small filled button. Normal: navy bg + white text. On CARD hover: bg shifts to red (accent). Size: roughly tag-size, but with our standard button radius (--radius-md). */ .card-college__cta-link { position: relative; z-index: 2; display: inline-flex; align-items: center; padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-xs); /* 12px — close to tag size */ font-weight: var(--font-weight-regular); /* 400 */ color: var(--color-text-on-primary); /* white */ background: var(--color-primary); /* navy */ border-radius: var(--radius-md); /* 4px — standard button radius (NOT pill) */ text-decoration: none; line-height: var(--line-height-button); transition: background var(--transition-fast); } /* Hover trigger is on the card itself — bg shifts navy → red. No separate :hover on the link; the card's hover state drives both border and CTA. */ .card-college:hover .card-college__cta-link { background: var(--color-accent); color: var(--color-text-on-accent); } .card-college__cta-link::after { content: " →"; display: inline-block; margin-left: 4px; } /* Ownership badge — base style (shared by all variants) */ .card-college__type-badge { display: inline-block; padding: var(--space-0-75) var(--space-3); font-size: var(--font-size-2xs); /* 10px */ font-weight: var(--font-weight-regular); /* 400 */ border: 0; /* no border — soft fill carries the shape */ border-radius: var(--radius-full); /* fully rounded pill */ text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); line-height: var(--line-height-relaxed); } /* Ownership variants — soft, distinct backgrounds with matching dark text */ .card-college__type-badge--public { background: var(--color-tag-public-bg); color: var(--color-tag-public-text); } .card-college__type-badge--nonprofit { background: var(--color-tag-nonprofit-bg); color: var(--color-tag-nonprofit-text); } .card-college__type-badge--forprofit { background: var(--color-tag-forprofit-bg); color: var(--color-tag-forprofit-text); } /* ===================================================================== CARD: Major (.card-major) --------------------------------------------------------------------- DELIBERATELY DIFFERENT from .card-college so a user scanning the site can tell at a glance "this is not a college, it's a field of study." - Whole card body is tinted with the soft category color (no white card) - No avatar, no accent bar — the body color IS the identifier - One hero metric (1-yr earnings) instead of a stats grid - BLS job-growth pill — soft green for positive, soft red for negative - Plain text "VIEW MAJOR →" link instead of a filled CTA button Category color via modifier class: .card-major--stem / --health / --business / --humanities / --social / --trades Each sets --card-cat (solid) and --card-cat-bg / --card-cat-text (soft pair). The body uses the soft pair; the category label uses the dark text color. ===================================================================== */ .card-major { position: relative; /* Subtle vertical gradient — same neutral tint on every card regardless of category. Starts as a soft off-white at the top and fades to pure white near the bottom. 180deg = top → bottom. */ background: linear-gradient( 180deg, var(--color-card-major-grad) 0%, var(--color-white) 80% ); border: var(--border-width) solid var(--color-border); /* faint outline so the lighter card still has a defined edge */ border-radius: var(--radius-lg); padding: var(--space-5); /* 20px — matches .card-college */ display: flex; flex-direction: column; gap: var(--space-3); /* 12px between sibling blocks */ cursor: pointer; height: 100%; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); /* Defaults — overridden by category modifiers below */ --card-cat: var(--color-text-muted); --card-cat-bg: var(--color-offwhite); --card-cat-text: var(--color-text-muted); } /* Hover: subtle lift + soft shadow. No border-color change (no border to begin with). */ .card-major:hover { transform: translateY(calc(-1 * var(--space-0-5))); } /* Category modifiers — each sets the 3 local vars */ .card-major--stem { --card-cat: var(--color-cat-stem); --card-cat-bg: var(--color-cat-stem-bg); --card-cat-text: var(--color-cat-stem-text); } .card-major--health { --card-cat: var(--color-cat-health); --card-cat-bg: var(--color-cat-health-bg); --card-cat-text: var(--color-cat-health-text); } .card-major--business { --card-cat: var(--color-cat-business); --card-cat-bg: var(--color-cat-business-bg); --card-cat-text: var(--color-cat-business-text); } .card-major--humanities { --card-cat: var(--color-cat-humanities); --card-cat-bg: var(--color-cat-humanities-bg); --card-cat-text: var(--color-cat-humanities-text); } .card-major--social { --card-cat: var(--color-cat-social); --card-cat-bg: var(--color-cat-social-bg); --card-cat-text: var(--color-cat-social-text); } .card-major--trades { --card-cat: var(--color-cat-trades); --card-cat-bg: var(--color-cat-trades-bg); --card-cat-text: var(--color-cat-trades-text); } /* --- 1. Top row: category label (left) + growth pill (right) --- */ .card-major__top-row { display: flex; align-items: flex-end; /* bottom-align category + pill on a shared baseline */ justify-content: space-between; gap: var(--space-2); } /* --- 1a. Category label --- */ .card-major__category { font-size: var(--font-size-2xs); /* 10px */ text-transform: uppercase; letter-spacing: var(--letter-spacing-widest); color: var(--card-cat-text); font-weight: var(--font-weight-medium); margin: 0; line-height: var(--line-height-button); } /* --- 2. Divider between top-row and title --- */ .card-major__divider { border: none; border-top: var(--border-width) solid var(--color-divider-medium); margin: 0; } /* --- 3. Major name --- No min-height: cards stay aligned via .card-major__meta { margin-top: auto }, which pins meta + footer to the bottom of every card. Title takes its natural height (1 line for short names, 2 lines for long ones), so the intro can sit tight against the title with no reserved empty space. */ .card-major__name { font-size: var(--font-size-lg); /* 18px */ font-weight: var(--font-weight-medium); /* 500 */ color: var(--color-secondary); margin: 0; line-height: var(--line-height-base); } .card-major__name a { color: inherit; text-decoration: none; } .card-major__name a:hover { color: inherit; } /* --- 4. Intro paragraph --- Sits at the natural card gap (12px) below the title — no negative margin needed now that the title's reserved 2-line min-height is gone. */ .card-major__intro { margin: 0; font-size: var(--font-size-sm); /* 14px */ font-weight: var(--font-weight-light); color: var(--color-text); line-height: var(--line-height-prose); } /* --- 5. Growth pill (positive = green, negative = red) --- */ .card-major__growth { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-0-75) var(--space-2-5); border-radius: var(--radius-full); font-size: var(--font-size-xs); /* 12px */ line-height: var(--line-height-normal); flex-shrink: 0; white-space: nowrap; } .card-major__growth--up { background: var(--color-pill-positive-bg); color: var(--color-pill-positive-text); } .card-major__growth--down { background: var(--color-pill-negative-bg); color: var(--color-pill-negative-text); } .card-major__growth-arrow { font-weight: var(--font-weight-medium); } .card-major__growth-value { font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; } .card-major__growth-meta { color: var(--color-text-muted); font-weight: var(--font-weight-light); } /* --- 6. Metadata — colleges + specializations in a single row. margin-top: auto pins this row just above the footer divider; the padding-top guarantees a large minimum gap above the meta even when the intro is long enough to fill most of the card. */ .card-major__meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-5); /* 20px between colleges and specializations */ font-size: var(--font-size-xs); /* 12px */ color: var(--color-text-muted); font-weight: var(--font-weight-light); margin: 0; margin-top: auto; /* push to just above the footer divider */ padding-top: var(--space-6); /* 24px minimum visual gap above the meta */ } .card-major__meta-item { display: flex; align-items: center; gap: var(--space-1); /* 4px between icon and text */ } .card-major__meta-icon { flex-shrink: 0; color: var(--color-text-muted); } /* --- 7. Footer: button (left) + yearly earning (right). No margin-top: auto here — .card-major__meta now owns that, so the meta row pins itself just above the footer divider. */ .card-major__footer { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-divider); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .card-major__footer-earnings { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-0-5); } .card-major__footer-earnings-label { font-size: var(--font-size-2xs); /* 10px */ text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); font-weight: var(--font-weight-regular); white-space: nowrap; } .card-major__footer-earnings-value { font-size: var(--font-size-sm); /* 14px — reduced from 16px */ font-weight: var(--font-weight-medium); color: var(--color-secondary); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--letter-spacing-tight); white-space: nowrap; } /* CTA — matches .card-college__cta-link exactly: small filled button, navy bg + white text, navy → red on card hover. */ .card-major__link { position: relative; z-index: 2; display: inline-flex; align-items: center; padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-regular); /* 400 */ color: var(--color-text-on-primary); /* white */ background: var(--color-primary); /* navy */ border-radius: var(--radius-md); /* 4px — standard button radius (NOT pill) */ text-decoration: none; line-height: var(--line-height-button); transition: background var(--transition-fast); } .card-major:hover .card-major__link { background: var(--color-accent); color: var(--color-text-on-accent); } .card-major__link::after { content: " →"; display: inline-block; margin-left: 4px; } /* ===================================================================== CARD: Program (.card-program) --------------------------------------------------------------------- Sibling of .card-major — shares the gradient + category color system so users see them as the same family ("tinted gradient = field of study"). But programs are CONCRETE (a specific field, not a broad umbrella), so the card surfaces MORE prominent data: - Earnings RANGE (P25 → P75) instead of a single number, 30px hero - Credential distribution mini-bar (cert / assoc / BA / MA / doc) - Parent major as breadcrumb context Category color is set via modifier class (same pattern as card-major): .card-program--stem / --health / --business / --humanities / --social / --trades ===================================================================== */ .card-program { position: relative; /* Subtle vertical gradient — same neutral tint on every card regardless of category. Category color survives only on the category pill + credential bar; the card surface itself fades from the tint to white. */ background: linear-gradient( 180deg, var(--color-card-program-grad) 0%, var(--color-white) 80% ); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); /* 20px — matches major card */ display: flex; flex-direction: column; gap: var(--space-3); /* 12px between sibling blocks */ cursor: pointer; height: 100%; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); /* Defaults — overridden by category modifiers */ --card-cat: var(--color-text-muted); --card-cat-bg: var(--color-offwhite); --card-cat-text: var(--color-text-muted); } .card-program:hover { transform: translateY(calc(-1 * var(--space-0-5))); } /* Category modifiers — same vars as card-major */ .card-program--stem { --card-cat: var(--color-cat-stem); --card-cat-bg: var(--color-cat-stem-bg); --card-cat-text: var(--color-cat-stem-text); } .card-program--health { --card-cat: var(--color-cat-health); --card-cat-bg: var(--color-cat-health-bg); --card-cat-text: var(--color-cat-health-text); } .card-program--business { --card-cat: var(--color-cat-business); --card-cat-bg: var(--color-cat-business-bg); --card-cat-text: var(--color-cat-business-text); } .card-program--humanities { --card-cat: var(--color-cat-humanities); --card-cat-bg: var(--color-cat-humanities-bg); --card-cat-text: var(--color-cat-humanities-text); } .card-program--social { --card-cat: var(--color-cat-social); --card-cat-bg: var(--color-cat-social-bg); --card-cat-text: var(--color-cat-social-text); } .card-program--trades { --card-cat: var(--color-cat-trades); --card-cat-bg: var(--color-cat-trades-bg); --card-cat-text: var(--color-cat-trades-text); } /* --- 1. Category label — pill styled (auto-shrinks to content via inline-flex + align-self so it doesn't stretch the full card width). Uses the soft category bg + dark category text already defined per modifier. */ .card-program__category { display: inline-flex; align-items: center; align-self: flex-start; padding: var(--space-0-75) var(--space-2-5); border-radius: var(--radius-full); background: var(--card-cat-bg); color: var(--card-cat-text); font-size: var(--font-size-2xs); /* 10px */ text-transform: uppercase; letter-spacing: var(--letter-spacing-widest); font-weight: var(--font-weight-medium); margin: 0; line-height: var(--line-height-button); } /* --- 2. Program name (BUMPED for prominence: 18px → 20px) --- No min-height — cards align via .card-program__footer { margin-top: auto }, so the title takes its natural 1- or 2-line height with no reserved empty space below it. Pulls the parent caption tight against the title. */ .card-program__name { font-size: var(--font-size-xl); /* 20px — bigger than major card's 18px */ font-weight: var(--font-weight-medium); color: var(--color-secondary); margin: 0; line-height: var(--line-height-snug); } .card-program__name a { color: inherit; text-decoration: none; } .card-program__name a:hover { color: inherit; } /* --- 3. Parent major context line --- Negative margin-top pulls this 8px closer to the name above (12px flex gap − 8px = 4px effective gap between name and parent caption). They read as one tight title group. Positive margin-bottom adds 8px of breathing room below, so the parent caption visually "closes" the title section before the EARNINGS block starts (12px flex gap + 8px = 20px effective gap below parent). */ .card-program__parent { font-size: var(--font-size-xs); /* 12px */ color: var(--color-text-muted); font-weight: var(--font-weight-light); margin: calc(-1 * var(--space-2)) 0 var(--space-2) 0; line-height: var(--line-height-base); } /* --- 4. Earnings (range — the headline) --- */ .card-program__earnings { display: flex; flex-direction: column; gap: var(--space-0-5); } .card-program__earnings-label { font-size: var(--font-size-2xs); /* 10px */ text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); font-weight: var(--font-weight-regular); margin: 0; } .card-program__earnings-range { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-2xl); /* 24px — reduced from 28px */ font-weight: var(--font-weight-medium); color: var(--color-secondary); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-display); margin: 0; } .card-program__earnings-low, .card-program__earnings-high { /* Both endpoints share the same weight — the range is the signal. */ } .card-program__earnings-divider { font-weight: var(--font-weight-light); color: var(--color-text-muted); font-size: var(--font-size-xl); /* 20px — slightly smaller than the values */ } .card-program__earnings-median { font-size: var(--font-size-xs); /* 12px */ color: var(--color-text-muted); font-weight: var(--font-weight-light); margin: 0; } /* --- 5. Growth pill — lives in the footer (right side) next to the CTA. */ .card-program__growth { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-0-75) var(--space-2-5); border-radius: var(--radius-full); font-size: var(--font-size-xs); line-height: var(--line-height-normal); flex-shrink: 0; white-space: nowrap; } .card-program__growth--up { background: var(--color-pill-positive-bg); color: var(--color-pill-positive-text); } .card-program__growth--down { background: var(--color-pill-negative-bg); color: var(--color-pill-negative-text); } .card-program__growth-arrow, .card-program__growth-value { font-weight: var(--font-weight-medium); } .card-program__growth-value { font-variant-numeric: tabular-nums; } .card-program__growth-meta { color: var(--color-text-muted); font-weight: var(--font-weight-light); } /* --- 6. Credential distribution bar (UNIQUE to program card) --- Stacked horizontal bar showing what % of graduates got each credential. All segments use the category color in different shades — light → dark roughly maps to lower → higher credential level. */ .card-program__credentials { display: flex; flex-direction: column; gap: var(--space-1-5); margin-top: var(--space-2); } .card-program__credentials-label { font-size: var(--font-size-2xs); /* 10px */ text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); font-weight: var(--font-weight-regular); margin: 0; } .card-program__credential-bar { display: flex; height: 10px; width: 100%; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-divider-soft); /* subtle track behind tiny segments */ gap: var(--space-px); /* hairline white separation between segments */ } .card-program__credential-segment { height: 100%; min-width: 1px; } /* Color shades: low credential → light, high credential → dark. All 5 shades are mix(category, white) at increasing strength, so the progression is monotonic light → dark for ANY base color (a dark base like navy gets visibly distinct shades; a light base like green also does, just within a smaller range). The previous version mixed the high-end shades with secondary (near-black), which made dark bases like STEM navy look like a single solid color. */ .card-program__credential-segment--cert { background: color-mix(in srgb, var(--card-cat) 20%, var(--color-white)); } .card-program__credential-segment--assoc { background: color-mix(in srgb, var(--card-cat) 36%, var(--color-white)); } .card-program__credential-segment--ba { background: color-mix(in srgb, var(--card-cat) 52%, var(--color-white)); } .card-program__credential-segment--postbac { background: color-mix(in srgb, var(--card-cat) 65%, var(--color-white)); } .card-program__credential-segment--ma { background: color-mix(in srgb, var(--card-cat) 78%, var(--color-white)); } .card-program__credential-segment--postma { background: color-mix(in srgb, var(--card-cat) 90%, var(--color-white)); } .card-program__credential-segment--doc { background: var(--card-cat); } .card-program__credential-legend { font-size: var(--font-size-xs); /* 12px */ color: var(--color-text-muted); font-weight: var(--font-weight-light); margin: 0; } /* --- 7. Meta — colleges + grads/yr in a single row with icons. margin-top: auto pins this row just above the footer divider; padding-top guarantees a minimum visual gap above the meta even when the credentials block above is short. */ .card-program__meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-5); /* 20px between meta items */ font-size: var(--font-size-xs); /* 12px */ color: var(--color-text-muted); font-weight: var(--font-weight-light); margin: 0; margin-top: auto; /* pin to just above the footer */ padding-top: var(--space-6); /* 24px minimum gap above */ } .card-program__meta-item { display: flex; align-items: center; gap: var(--space-1); } .card-program__meta-icon { flex-shrink: 0; color: var(--color-text-muted); } /* --- 8. Footer: button (left) + growth pill (right). No margin-top: auto — .card-program__meta now owns that. */ .card-program__footer { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-divider); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .card-program__link { position: relative; z-index: 2; display: inline-flex; align-items: center; padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-text-on-primary); background: var(--color-primary); border-radius: var(--radius-md); text-decoration: none; line-height: var(--line-height-button); transition: background var(--transition-fast); } .card-program:hover .card-program__link { background: var(--color-accent); color: var(--color-text-on-accent); } .card-program__link::after { content: " →"; display: inline-block; margin-left: 4px; } /* ===================================================================== CARD: Career (.card-career) --------------------------------------------------------------------- Sibling of card-major + card-program — same gradient + category color visual system. Career adds a job-market dimension that the others can't: - Wage range (median + P25–P75) - Employment count (how many people do this job nationally) - Annual openings (how many positions open up each year) - Top feeder programs (which majors lead here) Category color is derived from the most common CIP-2 across the career's related_cip_4digit list — set in PHP via the same .card-career-- modifier classes used by major + program cards. ===================================================================== */ .card-career { position: relative; /* Solid warm off-white — same on every card regardless of category. Category color survives only on the category pill in the footer. */ background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); /* 16px — tighter than the 20px used on other cards */ display: flex; flex-direction: column; gap: var(--space-3); cursor: pointer; height: 100%; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); --card-cat: var(--color-text-muted); --card-cat-bg: var(--color-offwhite); --card-cat-text: var(--color-text-muted); } .card-career:hover { transform: translateY(calc(-1 * var(--space-0-5))); } /* Category modifiers — same vars as card-major + card-program */ .card-career--stem { --card-cat: var(--color-cat-stem); --card-cat-bg: var(--color-cat-stem-bg); --card-cat-text: var(--color-cat-stem-text); } .card-career--health { --card-cat: var(--color-cat-health); --card-cat-bg: var(--color-cat-health-bg); --card-cat-text: var(--color-cat-health-text); } .card-career--business { --card-cat: var(--color-cat-business); --card-cat-bg: var(--color-cat-business-bg); --card-cat-text: var(--color-cat-business-text); } .card-career--humanities { --card-cat: var(--color-cat-humanities); --card-cat-bg: var(--color-cat-humanities-bg); --card-cat-text: var(--color-cat-humanities-text); } .card-career--social { --card-cat: var(--color-cat-social); --card-cat-bg: var(--color-cat-social-bg); --card-cat-text: var(--color-cat-social-text); } .card-career--trades { --card-cat: var(--color-cat-trades); --card-cat-bg: var(--color-cat-trades-bg); --card-cat-text: var(--color-cat-trades-text); } /* Neutral fallback — used when a career has no SOC↔CIP crosswalk OR the derived CIP-2 doesn't map to one of the 6 mapped categories. Grey pill visually signals "uncategorized" without breaking card consistency. */ .card-career--general { --card-cat: var(--color-text-muted); --card-cat-bg: var(--color-offwhite); --card-cat-text: var(--color-text-muted); } /* --- 1. Category pill — lives in the footer (right of the CTA). Soft category bg + dark category text per modifier class. */ .card-career__category { display: inline-flex; align-items: center; padding: var(--space-0-75) var(--space-2-5); border-radius: var(--radius-full); background: var(--card-cat-bg); color: var(--card-cat-text); font-size: var(--font-size-2xs); /* 10px */ text-transform: uppercase; letter-spacing: var(--letter-spacing-widest); font-weight: var(--font-weight-medium); margin: 0; line-height: var(--line-height-button); flex-shrink: 0; white-space: nowrap; } /* --- 2. Career name --- line-clamp: 2 caps the title at exactly 2 lines (longer titles get ellipsised). min-height keeps 1-line cards aligned with 2-line cards in the grid. */ .card-career__name { font-size: var(--font-size-xl); /* 20px */ font-weight: var(--font-weight-medium); color: var(--color-secondary); margin: 0; line-height: var(--line-height-snug); min-height: 2.5em; /* reserve 2 lines for grid alignment */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-career__name a { color: inherit; text-decoration: none; } .card-career__name a:hover { color: inherit; } /* --- 3. Entry education sub-line — same spacing rhythm as card-program__parent --- */ /* Entry-education caption — pinned just above the footer divider via margin-top: auto. Sits at a consistent vertical position across cards regardless of content height above. */ .card-career__entry { font-size: var(--font-size-xs); /* 12px */ color: var(--color-text-muted); font-weight: var(--font-weight-light); margin: 0; margin-top: auto; /* pin to just above the footer */ line-height: var(--line-height-base); } /* --- 4. Wage hero --- */ .card-career__wage { display: flex; flex-direction: column; gap: var(--space-0-5); } .card-career__wage-label { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); font-weight: var(--font-weight-regular); margin: 0; } .card-career__wage-value { font-size: var(--font-size-card-hero); /* 22px — reduced from 28 */ font-weight: var(--font-weight-medium); color: var(--color-secondary); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-display); margin: 0; } .card-career__wage-range { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); margin: 0; } /* --- 5. Growth pill --- */ .card-career__growth { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-0-75) var(--space-2-5); border-radius: var(--radius-full); font-size: var(--font-size-xs); line-height: var(--line-height-normal); align-self: flex-start; margin-top: var(--space-2); } .card-career__growth--up { background: var(--color-pill-positive-bg); color: var(--color-pill-positive-text); } .card-career__growth--down { background: var(--color-pill-negative-bg); color: var(--color-pill-negative-text); } .card-career__growth-arrow, .card-career__growth-value { font-weight: var(--font-weight-medium); } .card-career__growth-value { font-variant-numeric: tabular-nums; } .card-career__growth-meta { color: var(--color-text-muted); font-weight: var(--font-weight-light); } /* --- 6. Job market 2-stat row --- Same visual pattern as the college card's stats grid (negative horizontal margin so columns align flush with card content edges, central divider). */ .card-career__market { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: var(--space-3) 0; margin: var(--space-1) calc(-1 * var(--space-3)) 0; border-top: var(--border-width) solid var(--color-divider); border-bottom: var(--border-width) solid var(--color-divider); } .card-career__market-stat { text-align: left; padding: 0 var(--space-3); border-right: var(--border-width) solid var(--color-divider); } .card-career__market-stat:last-child { border-right: 0; } .card-career__market-label { display: block; font-size: var(--font-size-2xs); /* 10px */ color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); font-weight: var(--font-weight-regular); margin-bottom: 4px; } .card-career__market-value { display: block; font-size: var(--font-size-base); /* 16px — bigger than college stats' 14px */ font-weight: var(--font-weight-medium); color: var(--color-secondary); font-variant-numeric: tabular-nums; line-height: var(--line-height-tight); } /* --- 7. Top feeder programs --- */ .card-career__related { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); margin: 0; line-height: var(--line-height-button); } .card-career__related strong { color: var(--color-secondary); font-weight: var(--font-weight-regular); } /* --- 8. Footer + CTA — same pattern as card-program --- */ /* Footer: CTA (left) + Category pill (right). No margin-top: auto here — .card-career__entry now owns that, pinning the entry+divider+footer block to the bottom of every card together. */ .card-career__footer { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-divider); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .card-career__link { position: relative; z-index: 2; display: inline-flex; align-items: center; padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-text-on-primary); background: var(--color-primary); border-radius: var(--radius-md); text-decoration: none; line-height: var(--line-height-button); transition: background var(--transition-fast); } .card-career:hover .card-career__link { background: var(--color-accent); color: var(--color-text-on-accent); } .card-career__link::after { content: " →"; display: inline-block; margin-left: 4px; } /* ===================================================================== CARD GRID — responsive grid for any card type --------------------------------------------------------------------- minmax(0, 1fr) instead of plain 1fr — prevents columns from auto-expanding to fit min-content (long college names like "The University of Texas at Austin" were pushing one column wider than the others). ===================================================================== */ .card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4-5); /* mobile: 18px */ } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); /* tablet: 20px */ } } @media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); /* desktop: 24px */ } } /* Archive page override — tighter row + column gaps so the grid feels denser. Scoped to .archive-results__grid so site-wide card grids (brand page, sidebars, "related" sections) keep their original spacing. */ .archive-results__grid { gap: var(--space-3); /* mobile: 12px */ } @media (min-width: 640px) { .archive-results__grid { gap: var(--space-3); /* tablet: 12px */ } } @media (min-width: 1024px) { .archive-results__grid { gap: var(--space-4); /* desktop: 16px */ } } /* ===================================================================== ARCHIVE PAGE — sidebar (filters) + results (cards) --------------------------------------------------------------------- Used by /colleges/, and reused by future archives (/majors, /programs, /careers). The card grid inside .archive-results uses the existing .card-grid component, so any card type drops in unchanged. ===================================================================== */ /* ===================================================================== ARCHIVE HERO — full-width dark navy banner on archive landing pages --------------------------------------------------------------------- Used by /colleges/ (and reused by /majors/, /programs/, /careers/). Breaks out of the page container via negative margins so the gradient extends edge-to-edge, while .archive-hero__inner re-applies the container's max-width + padding so content stays aligned with the rest of the page. The grid pattern is two stacked CSS gradients — horizontal + vertical 1px lines at 40px intervals with very low alpha — giving a subtle blueprint feel without an image asset. ===================================================================== */ /* Hero base — breaks out to full viewport width via negative margins so the gradient + grid go edge-to-edge. Inner wrapper re-clamps content to the container max-width. Default styles target tablet + mobile (no fixed height, content + padding decide the height); desktop overrides below set a fixed 65vh − header-height and vertically center the main content. */ .archive-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: calc(-1 * var(--space-6)); /* eat the .site-main top padding */ margin-bottom: var(--space-10); /* Vertical gradient + 40px blueprint grid (all values from tokens) */ background: linear-gradient(var(--color-on-dark-grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--color-on-dark-grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(180deg, var(--color-hero-grad-top) 0%, var(--color-hero-grad-mid) 60%, var(--color-hero-grad-bottom) 100%); color: var(--color-white); overflow: hidden; /* Tablet + mobile defaults: 10px top so the breadcrumb sits close to the header (matches the desktop position). 50px bottom for content breathing room. 18px left/right per spec. The gap between breadcrumb and the main content block is added on .archive-hero__main below. */ padding: var(--space-2-5) var(--space-4-5) var(--space-12-5); } /* Inner wrapper — recentres content within the container max-width. On desktop, becomes a flex column so breadcrumb pins to top and main content sits centered in the remaining space. */ .archive-hero__inner { max-width: var(--container-max-width); margin-inline: auto; } /* The block that holds badge → title → subtitle → buttons. Stays as a normal block on tablet/mobile; gets vertically-centered on desktop. margin-top creates the gap between breadcrumb (10px from hero top) and the badge below — desktop overrides this to 0 since flex handles it. */ .archive-hero__main { display: flex; flex-direction: column; align-items: flex-start; /* left-aligned content group */ margin-top: var(--space-10); /* 40px — sits 50px below hero top after the 10px hero pad */ } /* Desktop / laptop: hero is a fixed slab — together with the 60px sticky header, fills 75vh of the viewport. Inner becomes a vertical flex so the breadcrumb anchors to the top while the main content centers in what's left. The hero's own padding goes to 0; __inner inherits the container's responsive padding so hero content lines up perfectly with the page content below the hero (1300px max-width + 32–48px side padding). */ @media (min-width: 1024px) { .archive-hero { height: calc(75vh - var(--header-height-desktop)); /* 75vh − 60px → header+hero = 75vh */ padding: 0; /* alignment handled by __inner */ } .archive-hero__inner { height: 100%; display: flex; flex-direction: column; padding-inline: var(--container-padding-x); /* match .container — 32 / 48px */ } /* Breadcrumb pinned to the top with a small 10px gap from hero edge */ .archive-hero__inner > .archive-breadcrumbs--on-dark { flex: 0 0 auto; margin: var(--space-2-5) 0 0 0; } /* Main content fills the remaining space and centers vertically. Reset the mobile/tablet margin-top — flex centering replaces it. */ .archive-hero__main { flex: 1 1 auto; justify-content: center; margin-top: 0; } } /* Compact variant — tool/single pages that don't need a full-height hero */ @media (min-width: 1024px) { .archive-hero--compact { height: auto; padding: var(--space-10) 0 var(--space-12); } .archive-hero--compact .archive-hero__inner { height: auto; display: block; } .archive-hero--compact .archive-hero__main { margin-top: var(--space-4); justify-content: flex-start; } } /* Trust badge — green dot + uppercase label. */ .archive-hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--cta-padding-x); margin: 0 0 var(--space-4); background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border); border-radius: var(--radius-full); color: var(--color-white); font-size: var(--font-size-2xs); /* 10px */ font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; } .archive-hero__badge-dot { width: var(--space-2); height: var(--space-2); background: var(--color-success); border-radius: var(--radius-full); box-shadow: 0 0 0 var(--space-0-75) var(--color-success-halo); } /* Title — large, mostly white. The optional inside gets the yellow-italic accent for the trust word ("Verified"). */ .archive-hero__title { margin: 0 0 var(--space-4); font-size: var(--font-size-4xl); /* 36px mobile */ font-weight: var(--font-weight-medium); line-height: var(--line-height-display); color: var(--color-white); letter-spacing: var(--letter-spacing-tight); } .archive-hero__title-em { font-style: italic; font-weight: inherit; color: var(--color-star); /* #F59E0B — golden yellow */ } @media (min-width: 1024px) { .archive-hero__title { font-size: var(--font-size-5xl); } /* 48px desktop */ } /* Subtitle — 16px on tablet/mobile, 18px on desktop (per spec) */ .archive-hero__subtitle { margin: 0 0 var(--space-8) 0; max-width: 70ch; font-size: var(--font-size-base); /* 16px — tablet/mobile */ font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-on-dark-text-strong); /* translucent white for visual hierarchy */ } @media (min-width: 1024px) { .archive-hero__subtitle { font-size: var(--font-size-lg); } /* 18px — desktop/laptop */ } /* Hero CTA button */ .archive-hero__cta { margin-top: var(--space-2); align-self: flex-start; } /* Quick-filter shortcut buttons — pill-style, semi-transparent, white text. Each is a real link that applies a filter; "#results" scrolls past the hero to the card grid below. Flex-wrap layout — buttons flow in a row on desktop and wrap naturally on smaller viewports. */ .archive-hero__quick-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); } .archive-hero__quick-btn { display: inline-flex; align-items: center; padding: var(--cta-padding-y) var(--cta-padding-x); /* matches .card-college__cta-link */ background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border-strong); border-radius: var(--radius-full); color: var(--color-white); font-size: var(--font-size-xs); /* 12px — matches college card CTA */ font-weight: var(--font-weight-regular); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .archive-hero__quick-btn:hover { background: var(--color-white); /* solid white fill */ color: var(--color-primary); /* navy text */ border-color: var(--color-white); transform: translateY(calc(-1 * var(--space-px))); } /* Mobile + tablet — bump to ~40px tall for thumb-friendly tap targets (Apple HIG / Material Design recommend 44+). Desktop keeps the smaller density since it's mouse-driven. */ @media (max-width: 1023px) { .archive-hero__quick-btn { min-height: var(--space-10); padding: var(--space-2) var(--space-4); } } /* Auto-scroll target — when the hero quick buttons append #results, the browser scrolls here. scroll-margin-top accounts for the sticky header so the grid isn't tucked underneath it. */ #results { scroll-margin-top: calc(var(--header-height-desktop) + var(--space-3)); } /* ===================================================================== HOMEPAGE HERO — extends .archive-hero. Differences from the archive variant: fills 100vh − header on every breakpoint (no breadcrumb to anchor the top), and centers its content block vertically. Contains a 3-field "finder" form + a row of stat pills. ===================================================================== */ /* Mobile (default): hero fills 100vh − mobile header. */ .archive-hero--home { height: calc(100vh - var(--header-height)); margin-top: 0; /* override base .archive-hero -24px (site-main padding-block is 0 on .page-home) */ margin-bottom: 0; /* next section sits flush; restore default when added */ padding: var(--space-6) var(--space-4-5); display: flex; align-items: stretch; } .archive-hero--home .archive-hero__inner { width: 100%; display: flex; flex-direction: column; } .archive-hero--home .archive-hero__main { flex: 1 1 auto; justify-content: center; /* vertical-center the badge→title→subtitle→form→pills stack */ align-items: center; /* horizontal-center every direct child */ text-align: center; /* center text inside title + subtitle */ margin-top: 0; } .archive-hero--home .archive-hero__subtitle { max-width: 75ch; /* longer path-description subtitle; capped so it doesn't outrun the H1 */ } /* Mobile H1 — the homepage H1 is 7 words including two italicized accents, which wraps to 3+ lines and orphans "Want" on its own line at the base 36px (--font-size-4xl). Drop to 30px (--font-size-3xl) on mobile so it wraps to two clean lines. Tablet stays at the base 36px; desktop stays at the inherited 48px (--font-size-5xl) from .archive-hero__title. */ .archive-hero--home .archive-hero__title { font-size: var(--font-size-3xl); line-height: var(--line-height-snug); /* 1.25 — airier than base 1.1, easier to read at the smaller mobile size */ } @media (min-width: 640px) { .archive-hero--home .archive-hero__title { font-size: var(--font-size-4xl); line-height: var(--line-height-display); /* back to base 1.1 once the H1 has more horizontal room */ } } @media (min-width: 640px) { .archive-hero--home { height: calc(100vh - var(--header-height-tablet)); } } @media (min-width: 1024px) { .archive-hero--home { height: calc(100vh - var(--header-height-desktop)); padding: 0; /* desktop alignment handled by __inner — matches .archive-hero */ } .archive-hero--home .archive-hero__inner { padding-inline: var(--container-padding-x); } } /* Finder form — white capsule sitting on the navy hero. 3 select fields separated by hairline dividers + a red Discover submit. Mobile-first: stacks vertically, expands to a single row at tablet+. */ .archive-hero__finder { display: flex; flex-direction: column; width: 100%; max-width: 720px; margin-top: var(--space-2); background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } @media (min-width: 640px) { .archive-hero__finder { flex-direction: row; align-items: stretch; } } .archive-hero__finder-field { display: flex; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); flex: 1 1 0; min-width: 0; /* allow selects to shrink inside flex */ } @media (min-width: 640px) { .archive-hero__finder-field { border-bottom: none; border-right: var(--border-width) solid var(--color-border); } } .archive-hero__finder-select { width: 100%; padding: 0; border: none; background: transparent; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text); cursor: pointer; line-height: var(--line-height-base); } .archive-hero__finder-select:focus { outline: none; } /* Submit — red filled by default, hover flips to off-white with navy text. The hover is a "soft" inversion (light fill + navy text) rather than swapping to another bold brand color, since the button sits inside a white container on a navy hero and needs to read clearly in both states. */ .archive-hero__finder-submit { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-6); background: var(--color-accent); color: var(--color-white); border: none; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); letter-spacing: var(--letter-spacing-wide); } .archive-hero__finder-submit:hover, .archive-hero__finder-submit:focus-visible { background: var(--color-offwhite); color: var(--color-primary); outline: none; } /* Stat pills — sit below the finder. Each is a rounded outlined chip on the dark hero; brightens the count. */ .archive-hero__pills { display: flex; flex-wrap: wrap; justify-content: center; /* center the pill row under the (centered) finder */ gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; list-style: none; } .archive-hero__pill { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-3); background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border-soft); border-radius: var(--radius-full); color: var(--color-on-dark-text-strong); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); font-variant-numeric: tabular-nums; } .archive-hero__pill strong { font-weight: var(--font-weight-regular); color: var(--color-white); } /* ===================================================================== HERO MARQUEE — full-bleed trust ticker that sits directly below the homepage hero. Two identical
    s in the track scroll right-to-left together; translating the track by -50% loops seamlessly because the second copy is identical to the first. ===================================================================== */ .hero-marquee { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: var(--space-2) 0; background: var(--color-cream); border-top: var(--border-width) solid var(--color-border); border-bottom: var(--border-width) solid var(--color-border); overflow: hidden; /* clip the track edges */ /* Fade-out mask — items appear to drift in/out at the edges instead of being abruptly clipped. Webkit prefix kept for Safari support. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .hero-marquee__track { display: flex; width: max-content; /* track grows to fit both lists side by side */ animation: hero-marquee-scroll 40s linear infinite; } .hero-marquee__list { display: flex; align-items: center; gap: var(--space-10); /* between items — bumped from space-6 for breathing room */ margin: 0; padding: 0 var(--space-5); /* gap continues across the join between the two lists */ list-style: none; } .hero-marquee__list li { display: inline-flex; align-items: center; gap: var(--space-2); /* dot → text */ font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-secondary); line-height: var(--line-height-button); text-transform: uppercase; letter-spacing: var(--letter-spacing-uppercase); white-space: nowrap; } /* Red dot separator before every item — because every item carries its own leading dot, the visual rhythm is uniform across the loop join. */ .hero-marquee__list li::before { content: ""; width: var(--space-3); /* scales with the 16px text */ height: var(--space-3); background: var(--color-accent); border-radius: var(--radius-full); flex-shrink: 0; } @keyframes hero-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } /* exactly one full copy width */ } /* Respect reduced-motion preference — show the items static instead of scrolling */ @media (prefers-reduced-motion: reduce) { .hero-marquee__track { animation: none; } } /* ===================================================================== HOMEPAGE LAYOUT — flat, self-contained sections. Scoped to .page-home so other pages keep their wrapper-based layout (single content stream + sidebar pattern). On the homepage we want every section to be its own band: full viewport-width background, own vertical padding, content aligned to container max-width via __inner. This means we have to neutralize the global wrappers .site-main (which adds 24/48px padding-block) and .container (which adds horizontal padding + max-width). After that, sections stack edge-to-edge with nothing eating into their padding from above or below. ===================================================================== */ .page-home .site-main { padding-block: 0; } .page-home .site-main > .container { max-width: none; padding-inline: 0; } /* Section — vertical band, full viewport width, own background. */ .home-section { padding-block: var(--space-10); background: var(--color-offwhite); } @media (min-width: 640px) { .home-section { padding-block: var(--space-12); } } @media (min-width: 1024px) { .home-section { padding-block: var(--space-16); } } /* Inner wrapper — re-applies the standard container alignment so section content lines up vertically across sections regardless of background. */ .home-section__inner { max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding-x); } /* Background variant — overrides the default offwhite to white. */ .home-section--white { background: var(--color-white); } /* Background variant — navy primary band. Text + button colors all shift to on-dark equivalents so contrast stays right. The .btn--primary CTA inside this section flips: white default (visible on navy) → red on hover, instead of the usual navy→red. */ .home-section--primary { background: var(--color-primary); } .home-section--primary .home-section__title { color: var(--color-white); } .home-section--primary .home-section__intro { color: var(--color-on-dark-text-strong); } .home-section--primary .btn--primary { background: var(--color-white); color: var(--color-primary); } .home-section--primary .btn--primary:hover, .home-section--primary .btn--primary:focus-visible { background: var(--color-accent); color: var(--color-white); } /* ===================================================================== HOW WE SCORE — 60/40 two-column block used inside .home-section--primary. Left (60%): title + intro + two body paragraphs. Right (40%): score-label reference card + CTA underneath. Below both columns: full-width white divider that closes the section. Mobile stacks to a single column. ===================================================================== */ .how-we-score { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .how-we-score { grid-template-columns: 3fr 2fr; /* 60 / 40 split */ gap: var(--space-10); align-items: start; } } /* Left column — title is left-aligned (in-flow with the body copy), not centered like the standard .home-section__head pattern. */ .how-we-score__title { margin: 0 0 var(--space-4); font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } @media (min-width: 1024px) { .how-we-score__title { font-size: var(--font-size-4xl); } } .how-we-score__intro { margin: 0 0 var(--space-6); font-size: var(--font-size-lg); font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-on-dark-text-strong); } .how-we-score__body { margin: 0 0 var(--space-4); font-size: var(--font-size-base); font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-on-dark-text-strong); } .how-we-score__body:last-child { margin-bottom: 0; } .how-we-score__body strong { color: var(--color-white); font-weight: var(--font-weight-medium); } /* Right column wrapper — stacks the score-label card on top of the CTA. */ .how-we-score__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); } .how-we-score__cta { /* Inherits the white→red flip via .home-section--primary .btn--primary scope */ align-self: flex-start; } /* Full-width white divider — closes the section beneath the two columns. */ .how-we-score__divider { margin: var(--space-10) 0 0; border: none; border-top: var(--border-width) solid var(--color-white); } /* ===================================================================== WHY US COLLEGE DATA — trust/value block below the how-we-score divider, still inside the same .home-section--primary navy section. Left 40%: navy pitch card with "Start Exploring" CTA. Right 60%: 3 white stat cards (Federal Data wide on top, Verified Colleges + Career Paths side-by-side below). Mobile: single column stack — pitch → wide card → 2 narrow cards. ===================================================================== */ .why-us { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-10); } @media (min-width: 768px) { .why-us { grid-template-columns: 2fr 3fr; /* 40 / 60 split */ gap: var(--space-8); align-items: start; } } /* LEFT — pitch card. Uses a slightly lighter navy surface so it reads as a distinct card on the section's primary background. */ .why-us__pitch { padding: var(--space-6); background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 1024px) { .why-us__pitch { padding: var(--space-8); } } .why-us__pitch-label { display: inline-block; margin-bottom: var(--space-4); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-on-dark-text-strong); text-transform: uppercase; letter-spacing: var(--letter-spacing-uppercase); } .why-us__pitch-title { margin: 0 0 var(--space-4); font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } @media (min-width: 1024px) { .why-us__pitch-title { font-size: var(--font-size-4xl); } } .why-us__pitch-title em { font-style: italic; font-weight: inherit; color: var(--color-star); /* matches hero title accent */ } .why-us__pitch-copy { margin: 0 0 var(--space-6); font-size: var(--font-size-base); font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-on-dark-text-strong); } .why-us__cta { /* Inherits white→red flip via .home-section--primary .btn--primary scope */ align-self: flex-start; } /* RIGHT — 3-card grid. Mobile single column, tablet+ has Federal Data full width on top and the other two side-by-side below. */ .why-us__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .why-us__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "wide wide" "left right"; gap: var(--space-5); } .why-us__card--wide { grid-area: wide; } } /* Stat card — white surface with subtle border, navy text. */ .why-us__card { padding: var(--space-5); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } @media (min-width: 1024px) { .why-us__card { padding: var(--space-6); } } .why-us__card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .why-us__card-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-size-lg); height: var(--icon-size-lg); color: var(--color-primary); flex-shrink: 0; } .why-us__card-icon svg { width: 100%; height: 100%; } .why-us__card-label { flex: 1 1 auto; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-uppercase); } .why-us__card-number { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); color: var(--color-primary); font-variant-numeric: tabular-nums; line-height: var(--line-height-none); letter-spacing: var(--letter-spacing-tight); } @media (min-width: 1024px) { .why-us__card-number { font-size: var(--font-size-4xl); } } .why-us__card-title { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-snug); } .why-us__card-desc { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); line-height: var(--line-height-prose); } /* Source pill tags — reuse the existing public-tag color tokens. */ .why-us__card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; } .why-us__tag { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: var(--color-tag-public-bg); color: var(--color-tag-public-text); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-normal); white-space: nowrap; } /* Score-label reference card — translucent white surface so it reads as a distinct panel on the navy background without competing with the copy. Width matches the aside column so the card spans the full 40% right column instead of hugging its content. */ .how-we-score__table { width: 100%; padding: var(--space-5); background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border); border-radius: var(--radius-lg); } @media (min-width: 1024px) { .how-we-score__table { padding: var(--space-6); } } .how-we-score__table-title { margin: 0 0 var(--space-4); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-white); text-transform: uppercase; letter-spacing: var(--letter-spacing-uppercase); } .how-we-score__table-list { margin: 0; padding: 0; list-style: none; } .how-we-score__table-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2-5) 0; border-bottom: var(--border-width) solid var(--color-on-dark-divider); } .how-we-score__table-list li:last-child { border-bottom: none; } /* Uniform badge width inside the table so the 5 score labels align as a clean column instead of hugging their content (which makes "GOOD" look narrow and "EXCELLENT" look wide). Scoped to this table only — other places that use .score-badge keep their content-width behavior. */ .how-we-score__table-list .score-badge { min-width: var(--space-20); justify-content: center; } .how-we-score__range { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); font-variant-numeric: tabular-nums; color: var(--color-on-dark-text-strong); } .home-section__head { text-align: center; margin: 0 auto var(--space-8); max-width: 70ch; } @media (min-width: 1024px) { .home-section__head { margin-bottom: var(--space-10); } } .home-section__title { margin: 0 0 var(--space-3); font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); color: var(--color-secondary); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); } @media (min-width: 1024px) { .home-section__title { font-size: var(--font-size-4xl); } } .home-section__intro { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-light); color: var(--color-text-secondary); line-height: var(--line-height-prose); } @media (min-width: 1024px) { .home-section__intro { font-size: var(--font-size-lg); } } /* Centered CTA below a section's main grid (e.g. "Browse all 3,839 colleges →") */ .home-section__cta { text-align: center; margin-top: var(--space-8); } @media (min-width: 1024px) { .home-section__cta { margin-top: var(--space-10); } } /* Secondary text link under a section's primary CTA (e.g. doorway into /rankings/ from the affordable / high-earning college bands). */ .home-section__cta-link { display: block; margin-top: var(--space-4); color: var(--color-primary); font-weight: var(--font-weight-medium); text-decoration: none; } .home-section__cta-link:hover { text-decoration: underline; } /* ===================================================================== EXPLORE CARD — vertical image-bg cards used in the homepage Explore section. Background image fills the card, a bottom-heavy dark gradient keeps the title + description legible, the whole card is the link. ===================================================================== */ /* Grid override — bumps the standard 1/2/3-col card-grid up to 4 cols on desktop so the 8 explore cards land in a clean 4 x 2 layout. Mobile (1) and tablet (2) inherit from .card-grid unchanged. */ @media (min-width: 1024px) { .explore-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .explore-card { position: relative; display: block; aspect-ratio: 4 / 5; /* vertical orientation */ border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-secondary); /* shows through if image fails to load */ background-size: cover; background-position: center; text-decoration: none; color: var(--color-white); transition: transform var(--transition-base), box-shadow var(--transition-base); } .explore-card:hover, .explore-card:focus-visible { transform: translateY(calc(-1 * var(--space-1))); box-shadow: var(--shadow-lg); outline: none; } /* Dark gradient overlay — reuses the state-card gradient tokens so the image-text contrast is consistent with the state vertical's cards. */ .explore-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-img-overlay-g100) 0%, var(--color-img-overlay-g70) 35%, var(--color-img-overlay-g35) 70%, var(--color-img-overlay-g0) 100%); transition: background var(--transition-base); } .explore-card:hover::before { background: linear-gradient(180deg, var(--color-img-overlay-gh100) 0%, var(--color-img-overlay-gh75) 35%, var(--color-img-overlay-gh40) 70%, var(--color-img-overlay-gh0) 100%); } /* Title + description anchored to the bottom, on top of the gradient */ .explore-card__content { position: absolute; inset: auto 0 0 0; padding: var(--space-4); z-index: 1; } @media (min-width: 1024px) { .explore-card__content { padding: var(--space-4-5); } } .explore-card__title { margin: 0 0 var(--space-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: var(--line-height-snug); text-shadow: var(--text-shadow-on-img); } @media (min-width: 1024px) { .explore-card__title { font-size: var(--font-size-2xl); } } .explore-card__desc { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-on-dark-text-bright); line-height: var(--line-height-base); text-shadow: var(--text-shadow-on-img); } /* ===================================================================== ARCHIVE SECTION — used by /majors/, /programs/, /careers/ to break a long flat list into category-grouped sections. Each section has a heading + intro paragraph, then a card grid. Hero quick-jump buttons anchor-link to these via #cat-{key}. ===================================================================== */ .archive-section { /* Account for sticky header so anchor jumps don't tuck the heading underneath the site-header bar. */ scroll-margin-top: calc(var(--header-height-desktop) + var(--space-3)); } /* Divider between consecutive sections — last section has no trailing line. Mobile/tablet: 32px breathing room each side; desktop bumps to 48px. */ .archive-section:not(:last-child) { margin-bottom: var(--space-8); /* 32px — mobile + tablet */ padding-bottom: var(--space-8); border-bottom: var(--border-width) solid var(--color-primary); /* navy blue brand line */ } @media (min-width: 1024px) { .archive-section:not(:last-child) { margin-bottom: var(--space-12); /* 48px — desktop */ padding-bottom: var(--space-12); } } .archive-section__header { margin-bottom: var(--space-6); } .archive-section__title { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-2); font-size: var(--font-size-2xl); /* 24px */ font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); } /* Small count badge next to the title (e.g. "STEM 7") */ .archive-section__count { font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .archive-section__intro { margin: 0; max-width: 100%; font-size: var(--font-size-base); font-weight: var(--font-weight-light); color: var(--color-text-muted); line-height: var(--line-height-prose); } /* --------------------------------------------------------------------- Breadcrumb — default (light bg pages) and --on-dark variant (hero) --------------------------------------------------------------------- */ .archive-breadcrumbs { margin-bottom: var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); } .archive-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); } .archive-breadcrumbs li { display: inline-flex; align-items: center; } .archive-breadcrumbs li + li::before { content: "›"; color: var(--color-text-muted); margin: 0 var(--space-1-5); } .archive-breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } .archive-breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; } .archive-breadcrumbs [aria-current="page"] { color: var(--color-secondary); } /* On-dark variant — used inside the hero banner */ .archive-breadcrumbs--on-dark { color: var(--color-on-dark-text-soft); margin-bottom: 0; } .archive-breadcrumbs--on-dark a { color: var(--color-on-dark-text-medium); } .archive-breadcrumbs--on-dark a:hover { color: var(--color-white); } .archive-breadcrumbs--on-dark [aria-current="page"] { color: var(--color-white); } .archive-breadcrumbs--on-dark li + li::before { color: var(--color-on-dark-text-faint); } .archive-layout { display: grid; grid-template-columns: 1fr; /* < 1280: stacked (sidebar above, cards full-width) */ gap: var(--space-6); } /* Sidebar layout kicks in at 1280+. 20%/80% split — sidebar scales with the viewport instead of being fixed-px. minmax(0, Nfr) prevents long content (e.g. a long state name) from blowing the column wider. */ @media (min-width: 1280px) { .archive-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); gap: var(--space-6); /* 24px between sidebar and main */ align-items: start; } } /* ---- Sidebar wrapper ---- < 1280px: sits at top of stack with an accordion toggle button ≥ 1280px: sticky on the left, no toggle (filters always visible) */ .archive-sidebar { /* default — applies to all sizes */ } @media (min-width: 1280px) { .archive-sidebar { position: sticky; top: calc(var(--header-height-desktop) + var(--space-4)); /* clear sticky header */ align-self: start; max-height: calc(100vh - var(--header-height-desktop) - var(--space-8)); overflow-y: auto; } } /* ---- Mobile/tablet filter accordion ---- Built on a native
    / pair, same as the inner filter sections. The summary is styled as the "Filters" toggle button. The browser handles open/close natively — no JS for the toggle. On desktop (≥1280px), the summary is hidden and JS forces
    open. */ .archive-sidebar__collapse { /* Reset native
    default styling */ margin: 0; padding: 0; } .archive-sidebar__toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2-5) var(--space-4); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); cursor: pointer; user-select: none; list-style: none; /* hide native disclosure triangle (Firefox) */ transition: border-color var(--transition-fast); } .archive-sidebar__toggle::-webkit-details-marker { display: none; /* hide native disclosure triangle (Chrome/Safari) */ } .archive-sidebar__toggle:hover { border-color: var(--color-text-muted); } .archive-sidebar__toggle-icon { width: 16px; height: 16px; color: var(--color-secondary); flex-shrink: 0; } .archive-sidebar__toggle-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--space-1-5); background: var(--color-cat-trades-bg); /* soft red — matches active-filter chips */ color: var(--color-cat-trades-text); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; } .archive-sidebar__toggle-chevron { width: 14px; height: 14px; color: var(--color-text-muted); margin-left: auto; /* push to right */ transition: transform var(--transition-fast); } /* Chevron flips when
    is open — uses the native [open] attribute, the same selector used by the inner filter sections. */ .archive-sidebar__collapse[open] > .archive-sidebar__toggle .archive-sidebar__toggle-chevron { transform: rotate(180deg); } /* When the sidebar is open, give the form a small gap from the toggle button. */ .archive-sidebar__collapse[open] > .archive-filters { margin-top: var(--space-3); } /* Desktop — hide the toggle button (JS forces
    open at this breakpoint so the form stays visible). */ @media (min-width: 1280px) { .archive-sidebar__toggle { display: none; } .archive-sidebar__collapse[open] > .archive-filters { margin-top: 0; } } /* ---- The filter form itself ---- */ .archive-filters { display: flex; flex-direction: column; gap: 0; /* sections control their own spacing via dividers */ padding: var(--space-4); /* tighter than before — narrower sidebar */ background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } /* "FILTERS" header (small uppercase, like the screenshot) */ .archive-filters__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-3); } .archive-filters__heading { margin: 0; font-size: var(--font-size-2xs); /* 10px — small uppercase header */ font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-uppercase-lg); } .archive-filters__reset { font-size: var(--font-size-2xs); color: var(--color-accent); text-decoration: none; font-weight: var(--font-weight-regular); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .archive-filters__reset:hover { text-decoration: underline; } /* Search bar — always visible, with magnifying-glass icon prefix. The wrapper is position:relative so the autocomplete dropdown can be absolutely positioned beneath it. */ .archive-filters__search { position: relative; margin-bottom: var(--space-2); } .archive-filters__search-icon { position: absolute; left: 10px; top: 14px; /* aligns with the input's vertical padding */ width: 14px; height: 14px; color: var(--color-text-muted); pointer-events: none; } .archive-filters__search .archive-filters__input { padding-left: 32px; /* room for icon */ } /* Live autocomplete dropdown — appears below the search input as the user types. Hidden by default; JS toggles [hidden]. */ .archive-filters__autocomplete { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: var(--z-dropdown); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); max-height: 320px; overflow-y: auto; } .archive-filters__autocomplete[hidden] { display: none; } .archive-filters__autocomplete-item { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); font-family: inherit; border: 0; border-bottom: var(--border-width) solid var(--color-border); background: var(--color-white); cursor: pointer; transition: background var(--transition-fast); } .archive-filters__autocomplete-item:last-child { border-bottom: 0; } .archive-filters__autocomplete-item:hover, .archive-filters__autocomplete-item.is-active { background: var(--color-offwhite); } .archive-filters__autocomplete-name { display: block; font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-regular); color: var(--color-secondary); line-height: var(--line-height-base); } .archive-filters__autocomplete-meta { display: block; font-size: var(--font-size-2xs); /* 10px */ color: var(--color-text-muted); margin-top: var(--space-0-5); } .archive-filters__autocomplete-empty { padding: var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; } /* Inputs + selects — shared base */ .archive-filters__input, .archive-filters__select { width: 100%; padding: var(--space-2) var(--space-2-5); font-size: var(--font-size-xs); /* 12px — filter content */ font-family: var(--font-family); font-weight: var(--font-weight-light); color: var(--color-text); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); outline: none; transition: border-color var(--transition-fast); } .archive-filters__input::placeholder { color: var(--color-text-muted); } .archive-filters__input:focus, .archive-filters__select:focus { border-color: var(--color-primary); } /* Collapsible filter section — uses native
    /. Each section is a horizontal divider above + clickable summary row + optional content area below (only visible when [open]). */ .archive-filters__section { border-top: var(--border-width) solid var(--color-border); padding: var(--space-3) 0 0; margin-top: var(--space-1); } .archive-filters__summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text); padding: var(--space-1) 0; list-style: none; /* hide default disclosure triangle (Firefox) */ user-select: none; } .archive-filters__summary::-webkit-details-marker { display: none; /* hide default disclosure triangle (Chrome/Safari) */ } /* Custom chevron — rotates when section is open */ .archive-filters__summary::after { content: ""; display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); transform: rotate(45deg); /* points down (closed) */ transition: transform var(--transition-fast); margin-right: 4px; margin-bottom: 3px; } .archive-filters__section[open] > .archive-filters__summary::after { transform: rotate(-135deg); /* points up (open) */ margin-bottom: 0; margin-top: 3px; } /* Static variant — used when there's only one filter, so no
    wrapper. The heading is a plain

    styled like the section summary, but without the chevron, hover color shift, or pointer cursor. */ .archive-filters__section--static > .archive-filters__summary { cursor: default; margin: 0; } .archive-filters__section--static > .archive-filters__summary::after { display: none; } .archive-filters__section--static > .archive-filters__summary:hover { color: inherit; } .archive-filters__summary:hover { color: var(--color-secondary); } .archive-filters__content { padding: var(--space-2) 0 var(--space-1); display: flex; flex-direction: column; gap: var(--space-1-5); } /* Checkbox row inside an expanded section */ .archive-filters__option { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-xs); /* 12px — filter content */ font-weight: var(--font-weight-light); color: var(--color-text); cursor: pointer; padding: var(--space-0-75) 0; line-height: var(--line-height-comfortable); } .archive-filters__option:hover { color: var(--color-secondary); } .archive-filters__option input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; accent-color: var(--color-primary); cursor: pointer; } .archive-filters__option-meta { color: var(--color-text-muted); font-size: var(--font-size-2xs); /* 10px — meta stays smaller than the option label */ margin-left: 4px; } /* Options with 0 count given the other applied filters — disabled visually */ .archive-filters__option--disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .archive-filters__submit { margin-top: var(--space-4); width: 100%; } /* ---- Toolbar (sidebar-less archives: search + category + sort in one row) ---- Used by /programs/. The form wraps when the viewport is too narrow: search takes the full row on mobile, the two selects wrap to a second row. */ .archive-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; margin-bottom: var(--space-4); padding: var(--space-3); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } .archive-toolbar__search { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 200px; } .archive-toolbar__search-icon { position: absolute; left: var(--space-3); width: var(--icon-size); height: var(--icon-size); color: var(--color-text-muted); pointer-events: none; } .archive-toolbar__input { width: 100%; padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + var(--icon-size) + var(--space-2)); font-size: var(--font-size-sm); font-family: inherit; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-text); line-height: var(--line-height-normal); } .archive-toolbar__input:focus { outline: none; border-color: var(--color-primary); } .archive-toolbar__select { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); font-family: inherit; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-text); cursor: pointer; flex-shrink: 0; min-width: 0; } .archive-toolbar__select:focus { outline: none; border-color: var(--color-primary); } @media (max-width: 640px) { .archive-toolbar__search { flex: 1 1 100%; } .archive-toolbar__select { flex: 1 1 calc(50% - var(--space-2)); } } /* When the archive runs without a sidebar, the results section takes the full container width — overrides any grid placement set by .archive-layout. */ .archive-results--no-sidebar { width: 100%; } /* ---- Results header (count + sort dropdown) ---- */ .archive-results__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-2) var(--space-4); /* 8px 16px — tight */ background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } .archive-results__count { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); } .archive-results__count strong { color: var(--color-secondary); font-weight: var(--font-weight-medium); } .archive-results__sort { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); } .archive-results__sort select { padding: var(--space-2) var(--space-3-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); font-family: var(--font-family); color: var(--color-secondary); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; outline: none; transition: border-color var(--transition-fast); } .archive-results__sort select:focus, .archive-results__sort select:hover { border-color: var(--color-primary); } /* ---- Results bar — chips on the LEFT, "showing X–Y" count on the RIGHT. Used by sidebar-less archives (e.g. /programs/). Wraps on mobile so chips take the first row and the count drops below. The bar owns the bottom margin to the card grid; the nested .archive-chips margin is reset. */ .archive-results__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); /* 24px breathing room before cards */ } .archive-results__bar .archive-chips { margin-bottom: 0; /* margin lives on the bar wrapper */ } .archive-results__bar .archive-results__count { margin-left: auto; /* pin count to the right edge */ } /* ---- Active filter chips (above the card grid) ---- Normal state: white bg, blue text, subtle border. The blue (#1E40AF) is the same one used for the Public ownership tag — keeps the chip-color language consistent across the site. Hover: light red bg + dark red text — signals "click to remove". Clear all: starts already in the red state (it's a destructive action on the entire filter set), darkens slightly on hover. */ .archive-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); } .archive-chip { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-3); font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-regular); color: var(--color-tag-public-text); /* #1E40AF — dark blue text */ background: var(--color-tag-public-bg); /* #DBEAFE — light blue bg, matches screenshot */ border: var(--border-width) solid var(--color-tag-public-bg); /* match bg so chip reads as one solid pill */ border-radius: var(--radius-full); text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); } .archive-chip:hover { color: var(--color-cat-trades-text); /* #991B1B — dark red */ background: var(--color-cat-trades-bg); /* #FEE2E2 — light red */ border-color: var(--color-cat-trades-bg); } /* The × icon inherits color from the chip (blue normal, red on hover) */ .archive-chip__close { display: inline-flex; align-items: center; justify-content: center; width: var(--space-4); height: var(--space-4); font-size: var(--font-size-sm); line-height: var(--line-height-none); color: inherit; } /* "Clear all" — already in the red state (destructive intent), darkens by one step on hover. */ .archive-chip--clear { color: var(--color-cat-trades-text); /* #991B1B */ background: var(--color-cat-trades-bg); /* #FEE2E2 */ border-color: var(--color-cat-trades-bg); } .archive-chip--clear:hover { color: var(--color-cat-trades-text); background: var(--color-cat-trades-bg-hover); /* one shade darker than --color-cat-trades-bg */ border-color: var(--color-cat-trades-bg-hover); text-decoration: none; } /* ---- Empty state ---- */ .archive-results__empty { text-align: center; padding: var(--space-12) var(--space-4); background: var(--color-offwhite); border-radius: var(--radius-lg); color: var(--color-text-muted); } .archive-results__empty p { margin: 0 0 var(--space-4) 0; font-size: var(--font-size-base); } /* ---- Pagination ---- */ /* Pagination — every element (Prev, page numbers, Next) is a 36px-tall white box with a thin border. Active page fills navy. All boxes share the same height + border-radius so the row reads as a uniform strip. */ .archive-pagination { display: flex; align-items: center; justify-content: center; /* centered group, not space-between */ gap: var(--space-2); /* 8px between every box */ margin-top: var(--space-6); /* slightly tighter spacing now that the divider's gone */ flex-wrap: wrap; } /* Prev / Next — boxed buttons matching the page-number boxes */ .archive-pagination__link { display: inline-flex; align-items: center; justify-content: center; height: var(--pagination-cell-size); padding: 0 var(--space-3-5); font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-regular); /* 400 */ color: var(--color-text); text-decoration: none; background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); transition: background var(--transition-fast), border-color var(--transition-fast); } .archive-pagination__link:hover { background: var(--color-offwhite); border-color: var(--color-text-muted); } .archive-pagination__link--disabled { color: var(--color-text-muted); pointer-events: none; background: var(--color-offwhite); opacity: 0.6; } /* Numbered pages list — centered group of boxes between Prev and Next */ .archive-pagination__pages { list-style: none; display: flex; gap: var(--space-2); /* 8px — same as outer gap */ margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; align-items: center; } /* Each numbered page — uniform 36px square (or slightly wider for 3-digit nums) */ .archive-pagination__page { display: inline-flex; align-items: center; justify-content: center; min-width: var(--pagination-cell-size); height: var(--pagination-cell-size); padding: 0 var(--space-2-5); font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-regular); /* 400 */ font-variant-numeric: tabular-nums; color: var(--color-text); text-decoration: none; background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); transition: background var(--transition-fast), border-color var(--transition-fast); } .archive-pagination__page:hover { background: var(--color-offwhite); border-color: var(--color-text-muted); } .archive-pagination__page--active { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); font-weight: var(--font-weight-regular); /* 400 — match the rest, no bold bump */ pointer-events: none; } /* Ellipsis — no box, just the dots between number ranges */ .archive-pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: var(--pagination-cell-size); color: var(--color-text-muted); } /* Mobile — shrink boxes + tighten gaps so the whole pagination strip ([Prev] [1] [2] [3] [4] [...] [last-1] [last] [Next]) fits in one line on a ~360px viewport. */ @media (max-width: 639px) { .archive-pagination { gap: var(--space-1); } .archive-pagination__pages { gap: var(--space-1); flex-wrap: nowrap; /* never wrap to a second line */ } /* Slightly larger tap targets on mobile (~36px) — within strict 44px guideline territory but balanced against fitting 9 cells in one line on a 360px viewport. */ .archive-pagination__page { min-width: var(--pagination-cell-min-mobile); height: var(--pagination-cell-size); padding: 0 var(--space-1-5); font-size: var(--font-size-tiny); } .archive-pagination__link { height: var(--pagination-cell-size); padding: 0 var(--space-2); font-size: var(--font-size-tiny); } .archive-pagination__ellipsis { min-width: 16px; height: var(--pagination-cell-size); } } /* ===================================================================== PROFILE PAGE — single college (/colleges/{state}/{unitid}) --------------------------------------------------------------------- Layout: full-width hero → sticky TOC → 2-column grid (main + sticky sidebar). Sections are styled as soft "cards" (off-white panels with thin borders) so each topic feels like a discrete block. Editorial intros and blue "callout" boxes lean conversational so the page reads like a guide, not a stat dashboard. All values reference tokens — no raw hex/pixel/line-height numbers. ===================================================================== */ /* ========== 1. HERO ========================================== Mirrors .archive-hero exactly so /colleges/, /majors/, /careers/ archives and the single-college profile share one hero pattern: full-width navy gradient + 40px blueprint grid, fixed 75vh slab on desktop with breadcrumb pinned top and the main content vertically centered, mobile/tablet stacks naturally. ============================================================ */ .profile-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: calc(-1 * var(--space-6)); margin-bottom: 0; background: linear-gradient(var(--color-on-dark-grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--color-on-dark-grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(180deg, var(--color-hero-grad-top) 0%, var(--color-hero-grad-mid) 60%, var(--color-hero-grad-bottom) 100%); color: var(--color-white); overflow: clip; padding: var(--space-2-5) var(--space-4-5) var(--space-12-5); /* mirror .archive-hero */ } .profile-hero__inner { max-width: var(--container-max-width); margin-inline: auto; } /* Desktop: 75vh − header → fixed slab. Inner becomes a vertical flex so the breadcrumb pins top and main content centers in the rest. */ @media (min-width: 1024px) { .profile-hero { height: calc(75vh - var(--header-height-desktop)); padding: 0; } .profile-hero__inner { height: 100%; display: flex; flex-direction: column; padding-inline: var(--container-padding-x); } .profile-hero__inner > .archive-breadcrumbs--on-dark { flex: 0 0 auto; margin: var(--space-2-5) 0 0 0; } .profile-hero__main { flex: 1 1 auto; justify-content: center; margin-top: 0; } } .profile-hero__main { display: flex; flex-direction: column; align-items: flex-start; /* left-aligned content group */ margin-top: var(--space-10); /* 40px gap from breadcrumb to badges */ max-width: 920px; /* component-specific cap, no token */ } .profile-hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .profile-hero__type-badge, .profile-hero__meta-badge, .profile-hero__score-pill { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; } .profile-hero__type-badge--public { background: var(--color-tag-public-bg); color: var(--color-tag-public-text); } .profile-hero__type-badge--nonprofit { background: var(--color-tag-nonprofit-bg); color: var(--color-tag-nonprofit-text); } .profile-hero__type-badge--forprofit { background: var(--color-tag-forprofit-bg); color: var(--color-tag-forprofit-text); } .profile-hero__meta-badge { background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border); color: var(--color-white); } .profile-hero__score-pill { gap: var(--space-2); background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border-strong); color: var(--color-white); } .profile-hero__score-pill-label { color: var(--color-star); } .profile-hero__score-pill-divider { opacity: 0.5; } .profile-hero__score-pill-value { font-variant-numeric: tabular-nums; } .profile-hero__title { margin: 0 0 var(--space-4); /* mirror .archive-hero__title */ font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-tight); color: var(--color-white); } @media (min-width: 1024px) { .profile-hero__title { font-size: var(--font-size-5xl); } } .profile-hero__subtitle { margin: 0 0 var(--space-8); /* mirror .archive-hero__subtitle */ max-width: 70ch; font-size: var(--font-size-base); font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-on-dark-text-strong); } @media (min-width: 1024px) { .profile-hero__subtitle { font-size: var(--font-size-lg); } } /* Brand byline + freshness line under the hero subtitle (findings + guides). */ .profile-hero__byline { margin: calc(-1 * var(--space-5)) 0 0; font-size: var(--font-size-sm); color: var(--color-on-dark-text-dim); } .profile-hero__byline a { color: var(--color-on-dark-text-medium); text-decoration: underline; text-underline-offset: 2px; } .profile-hero__byline a:hover { color: var(--color-on-dark-text-bright); } .profile-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); } /* Hero "Explore" button — white fill / navy text in default state, star-gold fill / white text on hover. Scoped so the global .btn--accent (used by the header Compare CTA, etc.) keeps its red→navy behavior. */ .profile-hero__cta { padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-button); background: var(--color-white); color: var(--color-primary); border-color: var(--color-white); } .profile-hero__cta:hover, .profile-hero__cta:focus-visible { background: var(--color-star); color: var(--color-white); border-color: var(--color-star); } .profile-hero__location { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-light); color: var(--color-on-dark-text-strong); } /* ========== 2. STICKY TABLE OF CONTENTS ====================== */ .has-open-menu .profile-toc { z-index: 0; } .profile-toc { position: sticky; top: var(--header-height); /* One tier below the header (--z-sticky 200) so the header's mega menu overlays this secondary sticky bar instead of being punched through by it. Still above page content, so it stays visible while scrolling. */ z-index: var(--z-dropdown); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: var(--space-8); background: var(--color-white); border-bottom: var(--border-width) solid var(--color-border); } @media (min-width: 1024px) { .profile-toc { top: var(--header-height-desktop); } } .profile-toc__inner { max-width: var(--container-max-width); margin-inline: auto; padding: var(--space-3) var(--container-padding-x); display: flex; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; } .profile-toc__inner::-webkit-scrollbar { display: none; } .profile-toc__link { flex: 0 0 auto; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-muted); text-decoration: none; padding: var(--space-1) 0; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .profile-toc__link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* Active state — set by scrollspy JS when the corresponding section is in the viewport's upper-trigger band. Same visual treatment as hover so the user gets familiar feedback. */ .profile-toc__link--active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* ========== 3. TWO-COLUMN GRID =============================== Desktop split is 75 / 25 with a 24px gutter between columns. The 3fr / 1fr ratio keeps the proportion stable across viewport sizes (vs. a fixed sidebar width which compresses the main column on smaller desktops). Below 1024px the grid collapses to a single column — sidebar stacks below main content. ============================================================ */ .profile-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); /* Tight bottom — the related-colleges divider below provides the visual section break, so we don't need a deep grid floor too. */ padding-bottom: var(--space-4); } @media (min-width: 1024px) { .profile-grid { grid-template-columns: 3fr 1fr; /* 75 / 25 */ gap: var(--space-6); /* 24px gutter */ } } /* Majors / Programs / Careers / States: on tablet & mobile, lift the "at a glance" stats sidebar above the article (it sits right after the pill TOC), so the page's key numbers are seen first instead of buried at the bottom. The sidebar is static below 1024px, so reorder is clean. Colleges is intentionally excluded. */ @media (max-width: 1023px) { :is(.page-profile--major, .page-profile--program, .page-profile--career, .page-profile--state, .page-profile--college) .profile-sidebar { order: -1; } } .profile-main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } @media (min-width: 1024px) { .profile-main { gap: var(--space-8); } } /* ========== 4. SECTION CARD WRAPPER ========================== Page bg = offwhite (#F7F7F7) so each white card surface has clear contrast. Padding + heading + intro sizes are deliberately one step smaller than archive pages — profile pages stack ~10 cards, so denser type keeps the page scrollable instead of cavernous. ============================================================ */ .page-profile { background: var(--color-offwhite); } .profile-section { scroll-margin-top: calc(var(--header-height-desktop) + 60px); } .profile-section--card { padding: var(--space-4); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } @media (min-width: 640px) { .profile-section--card { padding: var(--space-5); } } .profile-section__title { margin: 0 0 var(--space-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); color: var(--color-secondary); letter-spacing: var(--letter-spacing-tight); } @media (min-width: 1024px) { .profile-section__title { font-size: var(--font-size-2xl); } } .profile-section__intro { margin: 0 0 var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-text); } @media (min-width: 1024px) { .profile-section__intro { font-size: var(--font-size-base); } } .profile-section__subhead { margin: var(--space-6) 0 var(--space-4); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text); } .profile-section__cta-row { margin-top: var(--space-4); display: flex; justify-content: flex-start; } .profile-section__cta-row .btn { padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-button); } .profile-section__hint { margin: 0 0 var(--space-4); font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); } /* Subtle outbound link to an official source (e.g. the college's own website). Plain inline text — not a button, not a CTA — so it reads as a quiet citation rather than an action. */ .profile-section__source-link { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); } .profile-section__source-link a { color: inherit; text-decoration: underline; text-underline-offset: var(--space-0-5); } .profile-section__source-link a:hover { color: var(--color-primary); } /* Centered CTA button row at the foot of a profile section. Top spacing clears the content above it; the smaller button size is shared with the "Browse all" buttons on the major/career profiles (see above). */ .profile-section__ctas { margin-top: var(--space-5); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } /* These two CTAs hold a fixed hue so they stay visually distinct — blue for the majors button, red for the programs button — with no navy↔red swap on hover (overrides the default .btn--primary / .btn--accent hover). */ .profile-section__ctas .btn--primary:hover, .profile-section__ctas .btn--primary:focus-visible { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); } .profile-section__ctas .btn--accent:hover, .profile-section__ctas .btn--accent:focus-visible { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); } /* Reusable subsection divider — sits between H3 subsections inside a single section so visual grouping is clear without needing nested cards. Used across Cost, Earnings, Faculty, etc. */ .profile-subsection-divider { margin: var(--space-6) 0 var(--space-5); border: 0; border-top: var(--border-width) solid var(--color-border); } .profile-subsection__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-4); line-height: var(--line-height-tight); } /* ========== 5. STAT GRID (About section) ===================== Grid spacing scale used across all in-section grids: mobile 16px (--space-4) tablet 16px (--space-4) desktop 20px (--space-5) ============================================================ */ .profile-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: 0; } @media (min-width: 640px) { .profile-stat-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .profile-stat-grid { gap: var(--space-5); } } .profile-stat-grid__item { padding: var(--space-4) var(--space-5); background: var(--color-offwhite); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1); } .profile-stat-grid__item--wide { grid-column: span 2; } @media (min-width: 640px) { .profile-stat-grid__item--wide:nth-of-type(2n) { grid-column: span 2; } .profile-stat-grid__item--wide { grid-column: span 1; } /* When two wide items appear consecutively at the end on 3-col, span them across multiple cols */ .profile-stat-grid__item--wide:nth-last-child(-n+2):first-of-type ~ .profile-stat-grid__item--wide { } } .profile-stat-grid__item dt { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-stat-grid__item dd { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-regular); color: var(--color-text); line-height: var(--line-height-tight); } .profile-stat-grid__item--wide dd { font-size: var(--font-size-base); } /* Meta row — used at the bottom of About for Accreditor + Calendar. 2-column flex with icon + label/value pairs. Sits below a subsection divider so it visually separates "metadata" (org-level facts) from the headline stat grid above. */ .profile-meta-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 768px) { .profile-meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .profile-meta-row__item { display: flex; align-items: flex-start; gap: var(--space-3); } .profile-meta-row__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-size-lg); height: var(--icon-size-lg); color: var(--color-primary); flex: 0 0 var(--icon-size-lg); margin-top: 2px; /* small optical alignment, no token */ } .profile-meta-row__icon svg { width: 100%; height: 100%; } .profile-meta-row__body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; } .profile-meta-row__label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-meta-row__value { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); color: var(--color-text); } /* ========== 6. STAT CARDS (reusable) ========================= */ .profile-stat-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .profile-stat-cards--2 { grid-template-columns: repeat(2, 1fr); } .profile-stat-cards--3 { grid-template-columns: repeat(3, 1fr); } .profile-stat-cards--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .profile-stat-cards { gap: var(--space-5); } /* Keep 4-card grid as 2x2 on desktop too — narrow main column with sticky sidebar means 4-across cards become too cramped. */ } .profile-stat-cards--1 { grid-template-columns: 1fr; max-width: 320px; } .profile-stat-card { padding: var(--space-5); background: var(--color-offwhite); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); } .profile-stat-card--accent { background: var(--color-tag-public-bg); color: var(--color-tag-public-text); } .profile-stat-card--accent .profile-stat-card__label, .profile-stat-card--accent .profile-stat-card__caption { color: var(--color-tag-public-text); opacity: 0.8; } .profile-stat-card--accent .profile-stat-card__value { color: var(--color-tag-public-text); } .profile-stat-card--icon { flex-direction: row; align-items: center; gap: var(--space-3); } .profile-stat-card__icon { width: 32px; height: 32px; flex: 0 0 32px; padding: var(--space-1-5); border-radius: var(--radius-md); background: var(--color-tag-public-bg); color: var(--color-tag-public-text); } .profile-stat-card__label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-stat-card__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-display); color: var(--color-secondary); letter-spacing: var(--letter-spacing-subtle); font-variant-numeric: tabular-nums; } .profile-stat-card__value--lg { font-size: var(--font-size-3xl); } @media (min-width: 1024px) { .profile-stat-card__value--lg { font-size: var(--font-size-4xl); } } .profile-stat-card__value-sm { font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-text); } .profile-stat-card__caption { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-light); } .profile-stat-card__bar { height: var(--chart-bar-track-sm); background: var(--color-divider-soft); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-2); } .profile-stat-card__bar-fill { height: 100%; background: var(--color-score-fill); border-radius: var(--radius-full); transition: width var(--transition-slow); } /* ========== 7. UCD PILLARS (Measures Up) ===================== */ .profile-pillars { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: stretch; } @media (min-width: 768px) { .profile-pillars { grid-template-columns: 220px 1fr; gap: var(--space-8); } } .profile-pillars__overall { padding: var(--space-6); background: linear-gradient(135deg, var(--color-hero-grad-top) 0%, var(--color-primary) 60%, var(--color-hero-grad-bottom) 100%); color: var(--color-white); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-1); } .profile-pillars__overall-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-star); } .profile-pillars__overall-value { font-size: var(--font-size-mega); font-weight: var(--font-weight-medium); line-height: var(--line-height-none); letter-spacing: var(--letter-spacing-tight); } .profile-pillars__overall-value span { font-size: var(--font-size-lg); font-weight: var(--font-weight-light); color: var(--color-on-dark-text-soft); margin-left: var(--space-1); } .profile-pillars__overall-meta { font-size: var(--font-size-xs); color: var(--color-on-dark-text-medium); margin-top: var(--space-2); } .profile-pillars__bars { display: flex; flex-direction: column; gap: var(--space-5); align-self: center; width: 100%; } .profile-pillars__row { display: flex; flex-direction: column; gap: var(--space-1); } .profile-pillars__head { display: flex; justify-content: space-between; align-items: baseline; } .profile-pillars__name { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text); } .profile-pillars__value { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-primary); font-variant-numeric: tabular-nums; } .profile-pillars__track { height: var(--chart-bar-track-lg); background: var(--color-divider-soft); border-radius: var(--radius-full); overflow: hidden; } .profile-pillars__fill { height: 100%; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-cat-health) 100%); border-radius: var(--radius-full); transition: width var(--transition-slow); } /* Specialty Institution callout — amber notice below pillars */ .profile-callout--specialty { margin-top: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--color-tag-forprofit-bg); border-left: 3px solid var(--color-warning); border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--color-callout-amber-text); line-height: var(--line-height-relaxed); } .profile-callout--specialty strong { font-weight: var(--font-weight-medium); color: var(--color-tag-forprofit-text); } /* ========== 8. COST HEADLINE (blue card) ===================== */ .profile-cost__headline-card { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); background: var(--color-tag-public-bg); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1); } .profile-cost__headline-label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-tag-public-text); } .profile-cost__headline-value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-display); color: var(--color-tag-public-text); letter-spacing: var(--letter-spacing-tight); font-variant-numeric: tabular-nums; } .profile-cost__headline-value span { font-size: var(--font-size-base); font-weight: var(--font-weight-light); margin-left: var(--space-1); opacity: 0.7; } .profile-cost__headline-caption { font-size: var(--font-size-sm); color: var(--color-tag-public-text); opacity: 0.75; } /* ========== 8a. FULL COST BREAKDOWN (Cost section) =========== Line-item buildup of sticker cost: tuition + room/board + books + other expenses → published total. The total row gets a top border and bolder typography so it reads as the summed result. */ /* Top-border-only pattern avoids the double-divider where the row above the total has bottom-border AND the total row has top-border stacking as one thick line. */ .profile-cost-breakdown { margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; } .profile-cost-breakdown__row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) 0; border-top: var(--border-width) solid var(--color-border); } .profile-cost-breakdown__row:first-child { padding-top: 0; border-top: 0; } .profile-cost-breakdown__row dt { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text); } .profile-cost-breakdown__row dd { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-text); font-variant-numeric: tabular-nums; } .profile-cost-breakdown__row--total { padding-top: var(--space-4); border-top: 2px solid var(--color-border-strong); margin-top: var(--space-1); } .profile-cost-breakdown__row--total dt { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .profile-cost-breakdown__row--total dd { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-primary); } .profile-cost-breakdown__caption { margin: var(--space-2) 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); } .profile-cost-breakdown__caption strong { color: var(--color-text); font-weight: var(--font-weight-medium); } /* ========== 8b. INCOME-BAND BARS (Cost section) =============== Horizontal bar chart showing net price per family income bracket. Bar widths are proportional to the highest value, so visitors see the curve of how aid scales with income at a glance. */ .profile-income-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .profile-income-bars__row { display: grid; grid-template-columns: 140px 1fr 80px; gap: var(--space-3); align-items: center; } @media (max-width: 639px) { .profile-income-bars__row { grid-template-columns: 1fr 70px; grid-template-areas: "label value" "track track"; gap: var(--space-1) var(--space-3); } .profile-income-bars__label { grid-area: label; } .profile-income-bars__value { grid-area: value; } .profile-income-bars__track { grid-area: track; } } .profile-income-bars__label { font-size: var(--font-size-sm); color: var(--color-text); font-variant-numeric: tabular-nums; } .profile-income-bars__track { height: var(--chart-bar-track-lg); background: var(--color-divider-soft); border-radius: var(--radius-full); overflow: hidden; } .profile-income-bars__fill { height: 100%; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-cat-health) 100%); border-radius: var(--radius-full); transition: width var(--transition-slow); } .profile-income-bars__value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); text-align: right; font-variant-numeric: tabular-nums; } /* Accent row — used to highlight a "primary" point within an otherwise-uniform bar list (e.g. Median in the debt-distribution block). Bumps weight + color on label/value so it visually leads. */ .profile-income-bars__row--accent .profile-income-bars__label, .profile-income-bars__row--accent .profile-income-bars__value { font-weight: var(--font-weight-medium); color: var(--color-primary); } /* ========== 8c. DEBT AT GRADUATION (Cost section) ============ Two visualizations: 1. Debt-range track: a horizontal bar with markers at the 10th / 25th / median / 75th / 90th percentile so the spread is visible at a glance (median highlighted in navy). 2. Debt-by-demographic grid: small cells comparing Pell vs no-Pell, first-gen, dependent vs independent. Highlights inequality. */ .profile-debt-range { margin: var(--space-2) 0 var(--space-6); } .profile-debt-range__track { position: relative; height: 80px; margin: var(--space-8) 0 var(--space-3); background: linear-gradient(90deg, var(--color-tag-public-bg) 0%, var(--color-cat-health-bg) 50%, var(--color-tag-forprofit-bg) 100%); border-radius: var(--radius-full); } .profile-debt-range__marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-text-muted); transform: translateX(-50%); } .profile-debt-range__marker--median { width: 4px; background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-ring); border-radius: var(--radius-full); } .profile-debt-range__marker-value { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .profile-debt-range__marker--median .profile-debt-range__marker-value { font-size: var(--font-size-sm); color: var(--color-primary); } .profile-debt-range__marker-label { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: var(--font-size-2xs); font-weight: var(--font-weight-regular); color: var(--color-text-muted); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; white-space: nowrap; } .profile-debt-range__caption { margin: var(--space-3) 0 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-light); line-height: var(--line-height-base); color: var(--color-text-muted); } /* Smaller subhead used for sub-subsections within a section */ .profile-section__subhead-small { margin: var(--space-5) 0 var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-debt-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } @media (min-width: 640px) { .profile-debt-demo { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .profile-debt-demo__cell { padding: var(--space-3) var(--space-4); background: var(--color-offwhite); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1); } .profile-debt-demo__label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-debt-demo__value { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); font-variant-numeric: tabular-nums; } /* ========== 8c2. DEBT COLUMNS (vertical bar chart) =========== Vertical-orientation bar chart used for the Debt at Graduation distribution. 5 columns (10th / 25th / Median / 75th / 90th) with heights proportional to value. Different orientation from the horizontal bars used elsewhere in the same section, so the three "by X" subsections each get a structurally distinct chart type. */ .profile-debt-columns { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); height: var(--chart-debt-columns-height); /* Symmetric padding so the bottom labels have breathing room from the container's bottom edge (was padding-bottom: 0 — labels felt stuck to the chart frame). */ padding: var(--space-5) var(--space-4); background: var(--color-offwhite); border-radius: var(--radius-md); } .profile-debt-columns__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .profile-debt-columns__value { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-secondary); font-variant-numeric: tabular-nums; margin-bottom: var(--space-1); white-space: nowrap; } .profile-debt-columns__bar { width: 100%; max-width: var(--chart-debt-column-max-w); /* Solid color (no gradient) — relevant single color per role: navy = standard percentile · accent red = median highlight. */ background: var(--color-primary); border-radius: var(--radius-md) var(--radius-md) 0 0; transition: height var(--transition-slow); } .profile-debt-columns__col--accent .profile-debt-columns__bar { background: var(--color-accent); } .profile-debt-columns__col--accent .profile-debt-columns__value { color: var(--color-accent); font-weight: var(--font-weight-medium); } .profile-debt-columns__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text); margin-top: var(--space-2); letter-spacing: var(--letter-spacing-subtle); } .profile-debt-columns__col--accent .profile-debt-columns__label { color: var(--color-accent); } .profile-debt-columns__pct { font-size: var(--font-size-2xs); color: var(--color-text-muted); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; margin-top: 2px; } /* ========== 8d. CHIP STRIP (categorical comparison) ========== Small inline pill-cards used for categorical data without natural ordering (e.g. Median Debt by Student Type). Each chip shows a label + value + optional "vs median" delta with up/down arrow. Distinct from the horizontal-bars (sequential) and stat-cards (distribution summary) used elsewhere in the same section. */ .profile-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } @media (min-width: 640px) { .profile-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Stays at 3 columns on desktop too — 6 chips fit cleanly as 2 rows of 3 (multiple of 3 layout). 5-col stretched chips too narrow when the sidebar takes 25% of the page width. */ .profile-chip { padding: var(--space-3) var(--space-4); background: var(--color-offwhite); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1); border-top: 2px solid var(--color-text-muted); } .profile-chip--high { border-top-color: var(--color-cat-trades-text); } .profile-chip--low { border-top-color: var(--color-cat-business-text); } .profile-chip--neutral{ border-top-color: var(--color-text-muted); } .profile-chip__label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-chip__value { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); font-variant-numeric: tabular-nums; } .profile-chip__delta { font-size: var(--font-size-2xs); font-weight: var(--font-weight-light); color: var(--color-text-muted); } .profile-chip--high .profile-chip__delta { color: var(--color-cat-trades-text); } .profile-chip--low .profile-chip__delta { color: var(--color-cat-business-text); } /* ========== 9. CALLOUT (blue "What this means" / "Best for") ========== */ .profile-callout { margin-top: var(--space-4); padding: var(--space-4); background: var(--color-tag-public-bg); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-text); } .profile-callout strong { font-weight: var(--font-weight-medium); color: var(--color-primary); margin-right: var(--space-1); } .profile-callout--warning { background: var(--color-tag-forprofit-bg); color: var(--color-tag-forprofit-text); } .profile-callout--warning strong { color: var(--color-tag-forprofit-text); } /* ========== 10. EARNINGS LINE CHART (inline SVG) ============= */ .profile-chart { margin-top: var(--space-6); padding: var(--space-5); background: var(--color-offwhite); border-radius: var(--radius-md); } .profile-chart__head { margin-bottom: var(--space-3); } .profile-chart__head .profile-section__subhead { margin-top: 0; } .profile-chart__caption { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-light); } .profile-chart__svg { width: 100%; height: auto; display: block; } .profile-chart__gridline { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 3; } .profile-chart__line { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .profile-chart__area { fill: var(--color-tag-public-bg); opacity: 0.65; } .profile-chart__dot { fill: var(--color-primary); stroke: var(--color-white); stroke-width: 2; } .profile-chart__xlabel, .profile-chart__ylabel { font-family: var(--font-family); font-size: var(--font-size-tiny); font-weight: var(--font-weight-regular); fill: var(--color-text-muted); } /* ========== 11. DONUT (Race & Ethnicity) ===================== */ .profile-donut { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; } @media (min-width: 768px) { .profile-donut { grid-template-columns: 1fr 240px; gap: var(--space-8); } } .profile-donut__chart { display: flex; justify-content: center; } .profile-donut__svg { width: var(--chart-donut-size); height: var(--chart-donut-size); transform: rotate(0deg); /* paths are pre-positioned */ } /* Slice hover — slight thickening + cursor pointer signals interactivity. Native SVG shows the tooltip with percentage + student count. */ .profile-donut__slice { cursor: pointer; transition: stroke-width var(--transition-fast); } .profile-donut__slice:hover { stroke-width: 42; } .profile-donut__center-label { font-family: var(--font-family); font-size: 12px; fill: var(--color-text-muted); } .profile-donut__center-value { font-family: var(--font-family); font-size: 22px; font-weight: var(--font-weight-medium); fill: var(--color-secondary); } .profile-donut__legend { display: flex; flex-direction: column; gap: var(--space-2); } .profile-donut__legend-row { display: grid; grid-template-columns: 1.4fr 0.7fr 0.9fr; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-border); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; } /* Right-align 2nd + 3rd header cells so they match the right-aligned data values below them (otherwise the header label sits left of its column while the values sit right). */ .profile-donut__legend-row--head > span:nth-child(2), .profile-donut__legend-row--head > span:nth-child(3) { text-align: right; } .profile-donut__legend-row--head { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); } .profile-donut__legend-name { display: flex; align-items: center; gap: var(--space-2); } .profile-donut__swatch { width: 10px; height: 10px; border-radius: var(--radius-full); flex: 0 0 10px; } .profile-donut__legend-pct, .profile-donut__legend-count { text-align: right; color: var(--color-text); font-weight: var(--font-weight-regular); } /* ========== 10a. TEST POLICY CALLOUT (Admissions section) ==== Single-line policy notice between the SAT/ACT range cards and the 5-year trend. Tone-coded so "Test Optional" reads positive, "Required" / "Recommended" read cautionary, and "Not Considered" / "Considered" stay neutral. */ .profile-test-policy { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-offwhite); border-radius: var(--radius-md); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); } .profile-test-policy__label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-test-policy__value { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .profile-test-policy__caption { font-size: var(--font-size-sm); font-weight: var(--font-weight-light); line-height: var(--line-height-base); color: var(--color-text); flex-basis: 100%; } @media (min-width: 640px) { .profile-test-policy__caption { flex-basis: auto; } } .profile-test-policy--positive { background: var(--color-cat-business-bg); } .profile-test-policy--positive .profile-test-policy__value { color: var(--color-cat-business-text); } .profile-test-policy--caution { background: var(--color-cat-trades-bg); } .profile-test-policy--caution .profile-test-policy__value { color: var(--color-cat-trades-text); } /* ========== 10b. 5-YEAR ADMISSION TREND (Admissions section) = Compact sparkline + direction badge + 5-year-change indicator. Tells the "is this school getting harder/easier?" story without dominating the section. */ .profile-trend { margin: var(--space-2) 0 0; padding: var(--space-4) var(--space-5); background: var(--color-offwhite); border-radius: var(--radius-md); } .profile-trend__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); } .profile-trend__direction { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .profile-trend__direction--more_selective { color: var(--color-cat-trades-text); } .profile-trend__direction--less_selective { color: var(--color-cat-business-text); } .profile-trend__direction--stable { color: var(--color-text); } .profile-trend__change { font-size: var(--font-size-sm); color: var(--color-text-muted); display: inline-flex; align-items: baseline; gap: var(--space-1); font-variant-numeric: tabular-nums; } .profile-trend__arrow { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text); } .profile-trend__change-period { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); margin-left: var(--space-1); } .profile-trend__svg { width: 100%; height: auto; display: block; } .profile-trend__line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .profile-trend__area { fill: var(--color-tag-public-bg); opacity: 0.5; } .profile-trend__dot { fill: var(--color-primary); stroke: var(--color-white); stroke-width: 2; } .profile-trend__pct { font-family: var(--font-family); font-size: var(--font-size-tiny); font-weight: var(--font-weight-medium); fill: var(--color-secondary); } .profile-trend__year { font-family: var(--font-family); font-size: 10px; font-weight: var(--font-weight-regular); fill: var(--color-text-muted); } /* ========== 10c. DEMOGRAPHIC CARD (Earnings section) ========= Card pattern used for "By Gender" + "By Family Income" earnings blocks. Each card stacks: icon+title → big value → progress bar → 10-12 word caption. Replaces the simple horizontal-bar list so each cohort gets its own visual unit. */ .profile-demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } @media (min-width: 640px) { .profile-demo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .profile-demo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .profile-demo-grid { gap: var(--space-4); } } .profile-demo-card { padding: var(--space-4); background: var(--color-offwhite); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); } .profile-demo-card__head { display: flex; align-items: center; gap: var(--space-2); } .profile-demo-card__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-primary); flex: 0 0 var(--icon-size-md); } .profile-demo-card__icon svg { width: 100%; height: 100%; } .profile-demo-card__title { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-demo-card__value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-display); color: var(--color-secondary); letter-spacing: var(--letter-spacing-subtle); font-variant-numeric: tabular-nums; } .profile-demo-card__bar { height: var(--chart-bar-track); background: var(--color-divider-soft); border-radius: var(--radius-full); overflow: hidden; } .profile-demo-card__bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-cat-health) 100%); border-radius: var(--radius-full); transition: width var(--transition-slow); } .profile-demo-card__caption { margin: var(--space-1) 0 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-light); line-height: var(--line-height-base); color: var(--color-text-muted); } /* ========== 11b. STUDENT LIFE TILE GRID ===================== Compact tile layout for campus-context signals (setting, housing profile, adult-learner share, athletics, calendar, special designations). Each tile = one fact in label/value/caption form. Designation tiles get an accent border so HBCU / single-sex / religious affiliations visually stand apart from neutral facts. */ .profile-life-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 640px) { .profile-life-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .profile-life-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } } .profile-life-tile { padding: var(--space-4); background: var(--color-offwhite); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1); } .profile-life-tile__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } .profile-life-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-primary); flex: 0 0 var(--icon-size-md); } .profile-life-tile__icon svg { width: 100%; height: 100%; } .profile-life-tile--accent .profile-life-tile__icon { color: var(--color-primary); } .profile-life-tile--accent { background: var(--color-tag-public-bg); } .profile-life-tile__label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-life-tile--accent .profile-life-tile__label { color: var(--color-primary); } .profile-life-tile__value { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); color: var(--color-secondary); } .profile-life-tile__caption { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-text-muted); line-height: var(--line-height-base); } /* Plan-your-path tools cluster — 2-up grid of .tool-card. Lives at the foot of the major profile (and reusable on any future profile page). 1 col on mobile, 2 cols at the tablet breakpoint and up. */ .profile-tools-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); } @media (min-width: 640px) { .profile-tools-grid { grid-template-columns: repeat(2, 1fr); } } /* ========== 12. PROGRAMS — categories with embedded lists ==== */ .profile-categories-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .profile-categories-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .profile-categories-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } } .profile-cat-card { padding: var(--space-5); background: var(--color-offwhite); border-radius: var(--radius-md); border-top: 2px solid var(--color-primary); display: flex; flex-direction: column; gap: var(--space-2); } .profile-cat-card--stem { border-top-color: var(--color-cat-stem); } .profile-cat-card--health { border-top-color: var(--color-cat-health); } .profile-cat-card--business { border-top-color: var(--color-cat-business); } .profile-cat-card--humanities { border-top-color: var(--color-cat-humanities); } .profile-cat-card--social { border-top-color: var(--color-cat-social); } .profile-cat-card--trades { border-top-color: var(--color-cat-trades); } .profile-cat-card__count { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); } .profile-cat-card__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); } /* Major name links to /majors/{slug}. Inherits the heading colour so the card still reads as a clean title; primary on hover marks it crawlable. */ .profile-cat-card__name a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } .profile-cat-card__name a:hover { color: var(--color-primary); } .profile-cat-card__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .profile-cat-card__list li { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-base); padding-top: var(--space-2); border-top: var(--border-width) solid var(--color-border); } .profile-cat-card__list li:first-child { padding-top: 0; border-top: 0; } /* Inline national-median earnings shown next to each program. Tells visitors what graduates of THIS PROGRAM (anywhere in the US, four years after graduation) typically earn. Sized small so the program name remains primary. */ .profile-cat-card__earnings { display: block; margin-top: 2px; font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-cat-business-text); letter-spacing: var(--letter-spacing-subtle); font-variant-numeric: tabular-nums; } /* Program names inside category cards link to /programs/{slug}. Subtle styling — inherits text color, primary on hover with underline, so the cards still read as a clean list but every program is crawlable. */ .profile-cat-card__list a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } .profile-cat-card__list a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: var(--space-0-5); } /* Divider used between content blocks inside a section (e.g. between "Browse all majors" link and the Campus Life subhead below it). */ .profile-section__divider { margin: var(--space-6) 0 var(--space-4); border: 0; border-top: var(--border-width) solid var(--color-border); } .profile-section__subhead--first { margin-top: 0; } /* ========== 13. PROS / CONS ================================== */ .profile-pros-cons { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .profile-pros-cons { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .profile-pros-cons { gap: var(--space-5); } } .profile-pros-cons__col { padding: var(--space-5); background: var(--color-offwhite); border-radius: var(--radius-md); border-top: 3px solid; } .profile-pros-cons__col--pros { border-top-color: var(--color-success); } .profile-pros-cons__col--cons { border-top-color: var(--color-accent); } .profile-pros-cons__head { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); } .profile-pros-cons__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .profile-pros-cons__col li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3); align-items: start; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); color: var(--color-text); } .profile-pros-cons__col li svg { width: 16px; height: 16px; margin-top: 3px; } .profile-pros-cons__col--pros li svg { color: var(--color-success); } .profile-pros-cons__col--cons li svg { color: var(--color-accent); } .profile-pros-cons__empty { display: block !important; grid-template-columns: none !important; font-size: var(--font-size-sm) !important; color: var(--color-text-muted) !important; font-style: italic; } /* ========== 14. FAQ + sources ================================ */ .profile-faq { display: flex; flex-direction: column; gap: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); } .profile-faq__item { border-bottom: var(--border-width) solid var(--color-border); } .profile-faq__item:last-child { border-bottom: 0; } .profile-faq__q { cursor: pointer; list-style: none; padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-text); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .profile-faq__q::-webkit-details-marker { display: none; } .profile-faq__q::after { content: "+"; flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-3xl); /* 30px — icon dominates the circle */ font-weight: var(--font-weight-light); line-height: var(--line-height-none); color: var(--color-text-muted); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .profile-faq__item[open] .profile-faq__q::after { content: "−"; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); } .profile-faq__a { padding: 0 var(--space-4) var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-text); } /* Rich-content rules — only kick in when the answer contains HTML (the homepage FAQ uses <p>, <ul>/<ol>, <strong>, <a>; existing profile FAQs are plain text and pick up no visual change from these rules). */ .profile-faq__a p { margin: 0 0 var(--space-3); } .profile-faq__a p:last-child { margin-bottom: 0; } .profile-faq__a ul, .profile-faq__a ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); } .profile-faq__a li { margin: 0 0 var(--space-1); } .profile-faq__a li:last-child { margin-bottom: 0; } .profile-faq__a strong { color: var(--color-text); font-weight: var(--font-weight-medium); } .profile-faq__a a { color: var(--color-primary); text-decoration: underline; text-underline-offset: var(--space-0-75); } .profile-faq__a a:hover { color: var(--color-accent); } /* Homepage FAQ — caps width + centers when rendered inside .home-section__inner. Profile / tool pages don't have that wrapper so they stay full-width. */ .home-section__inner .profile-faq { max-width: var(--home-faq-max-w); margin-left: auto; margin-right: auto; } .profile-sources { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); font-size: var(--font-size-xs); color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-2); } .profile-sources__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .profile-sources__label { font-weight: var(--font-weight-medium); color: var(--color-text); } .profile-sources a { color: var(--color-primary); text-decoration: none; } .profile-sources a:hover { text-decoration: underline; } /* ========== 15. SIDEBAR — sticky lead form =================== */ .profile-sidebar { min-width: 0; } .profile-sidebar__inner { display: flex; flex-direction: column; gap: var(--space-4); } @media (min-width: 1024px) { .profile-sidebar__inner { position: sticky; top: calc(var(--header-height-desktop) + var(--space-5)); } .page-profile .profile-sidebar__inner { top: calc(var(--header-height-desktop) + var(--toc-height) + var(--space-5)); } } .profile-sidebar__ctas { display: flex; flex-direction: row; gap: var(--space-2); } /* Card-CTA sizing (6px/14px padding · 12px font · 400 weight), split 50/50 across the sidebar via flex:1. */ .profile-sidebar__cta.btn { flex: 1 1 0; min-width: 0; padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: var(--line-height-button); } /* ========== 16. RELATED COLLEGES ============================= Full-width section below the 2-column grid. Same-state peers ranked by UCD score. The divider extends across the container, not edge-to-edge, so it sits in line with the page rhythm. */ /* Section divider — used twice on the profile page: between the 2-column grid and Related Colleges, and between Related Colleges and Continue Exploring. */ .profile-related__divider { margin: var(--space-6) 0; border: 0; border-top: var(--border-width) solid var(--color-border); } @media (min-width: 1024px) { .profile-related__divider { margin: var(--space-8) 0; } } .profile-related { margin-bottom: var(--space-2); } .profile-related__head { margin-bottom: var(--space-6); } .profile-related__title { margin: 0 0 var(--space-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-secondary); } @media (min-width: 1024px) { .profile-related__title { font-size: var(--font-size-2xl); } } .profile-related__intro { margin: 0; /* No max-width cap — let the intro extend to fill the container so a 33-word paragraph reads in 2 lines on desktop instead of wrapping to 3 against a 70ch reading-column constraint. */ font-size: var(--font-size-sm); font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-text); } @media (min-width: 1024px) { .profile-related__intro { font-size: var(--font-size-base); } } /* minmax(0, 1fr) instead of plain 1fr — without the 0 floor, columns refuse to shrink below their intrinsic min-content width, which means long unbroken college names (e.g. "Massachusetts Institute of Technology") push the grid past its container. The 0 floor lets columns shrink and the card content wraps cleanly. */ .card-grid--related { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4-5); /* mobile: 18px */ } @media (min-width: 640px) { .card-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); /* tablet: 20px */ } } @media (min-width: 1024px) { .card-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); /* desktop: 24px */ } } /* 2-column max — stays at 2 cols on desktop (overrides the 3-col default) */ @media (min-width: 1024px) { .card-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========== 13b. FACULTY TABLE (Rank · Count · Share · Salary) Replaces two stacked horizontal-bar visualizations with a single tabular layout — denser, less visually repetitive, and reads as relational data (count and salary belong to the same rank). */ .profile-faculty-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .profile-faculty-table th, .profile-faculty-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: var(--border-width) solid var(--color-border); font-size: var(--font-size-sm); } .profile-faculty-table thead th { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-uppercase); text-transform: uppercase; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); } .profile-faculty-table tbody td:first-child { font-weight: var(--font-weight-medium); color: var(--color-secondary); } .profile-faculty-table__num { text-align: right !important; } .profile-faculty-table__muted { color: var(--color-text-muted) !important; font-weight: var(--font-weight-light); } .profile-faculty-table tbody tr:last-child td { border-bottom: 0; } /* ========== 17. CONTINUE EXPLORING — 4-card directory nav ==== Lives below the Related Colleges section. Links to the four archive entity pages so a profile-page visitor can keep browsing without dead-ending at the FAQ. */ .profile-explore { margin-bottom: var(--space-8); } .profile-explore__head { margin-bottom: var(--space-6); } .profile-explore__title { margin: 0 0 var(--space-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-secondary); } @media (min-width: 1024px) { .profile-explore__title { font-size: var(--font-size-2xl); } } .profile-explore__intro { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-light); line-height: var(--line-height-prose); color: var(--color-text); } @media (min-width: 1024px) { .profile-explore__intro { font-size: var(--font-size-base); } } .profile-explore__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } @media (min-width: 640px) { .profile-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .profile-explore__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } } /* Image-background cards. Each one is a full-bleed photo with a dark gradient overlay (solid at the bottom, fading to transparent at the top so the photo stays readable while the bottom-aligned text reads against a dark surface). The whole card is an <a>, so the entire surface is clickable. */ .profile-explore__card { position: relative; display: block; aspect-ratio: 4 / 5; /* portrait-ish — photo + text stacked */ min-height: 280px; border-radius: var(--radius-lg); background-color: var(--color-secondary); background-size: cover; background-position: center; text-decoration: none; color: var(--color-white); overflow: hidden; isolation: isolate; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } @media (min-width: 1024px) { .profile-explore__card { min-height: 320px; } } /* Dark gradient overlay — 100% at bottom → ~10% at top. ::before rather than a wrapper so it stays decorative + accessible. */ .profile-explore__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, var(--color-img-overlay-g0) 0%, var(--color-img-overlay-g35) 35%, var(--color-img-overlay-g70) 70%, var(--color-img-overlay-g100) 100% ); z-index: 1; border-radius: inherit; } .profile-explore__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .profile-explore__card:hover::before { background: linear-gradient( to top, var(--color-img-overlay-gh0) 0%, var(--color-img-overlay-gh40) 40%, var(--color-img-overlay-gh75) 75%, var(--color-img-overlay-gh100) 100% ); } .profile-explore__content { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 2; display: flex; flex-direction: column; gap: var(--space-2); } .profile-explore__label { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } .profile-explore__intro-text { font-size: var(--font-size-sm); font-weight: var(--font-weight-light); line-height: var(--line-height-base); color: var(--color-on-dark-text-bright); } /* ========== 18. 404 / not found ============================== */ .profile-college__missing { padding: var(--space-16) var(--space-4); text-align: center; } .profile-college__missing h1 { font-size: var(--font-size-3xl); margin-bottom: var(--space-4); color: var(--color-secondary); } .profile-college__missing a { color: var(--color-primary); text-decoration: underline; } /* ===================================================================== 19. MAJOR PROFILE — /majors/{slug} ===================================================================== */ /* ── Hero stat strip ─────────────────────────────────────────────── */ .major-profile__hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); } .major-profile__hero-stat { display: flex; flex-direction: column; gap: var(--space-1); } .major-profile__hero-stat-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: var(--line-height-tight); } .major-profile__hero-stat-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-on-dark-text-soft); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; } /* Category-tinted badge in hero */ .profile-hero__type-badge--major-cat { background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border); color: var(--color-on-dark-text-strong); } /* ── Sidebar card + stat blocks ──────────────────────────────────── */ .profile-sidebar__card { position: relative; background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); } .profile-sidebar__card-title { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); padding-right: var(--space-10); } .profile-sidebar__card--links .profile-sidebar__card-title { font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .profile-sidebar__stats { display: flex; flex-direction: column; gap: 0; } .profile-sidebar__stat { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-border); } .profile-sidebar__stat:last-child { border-bottom: 0; padding-bottom: 0; } .profile-sidebar__stat dt { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-text-muted); } .profile-sidebar__stat dd { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); margin: 0; text-align: right; } /* ── Sidebar card dark/navy variant — reusable modifier ─────────── */ .profile-sidebar__card--dark, .page-profile--major .profile-sidebar__card { background: var(--color-primary); border-color: var(--color-primary); } .profile-sidebar__card--dark .profile-sidebar__card-title, .page-profile--major .profile-sidebar__card-title { color: var(--color-white); } .profile-sidebar__card--dark .profile-sidebar__stat, .page-profile--major .profile-sidebar__stat { border-bottom-color: var(--color-on-dark-divider); } .major-profile__sidebar-divider { border: 0; border-top: var(--border-width) solid var(--color-on-dark-surface-dim); margin: 0; } .profile-sidebar__card--dark .profile-sidebar__stat dt, .page-profile--major .profile-sidebar__stat dt { color: var(--color-on-dark-text-dim); } .profile-sidebar__card--dark .profile-sidebar__stat dd, .page-profile--major .profile-sidebar__stat dd { color: var(--color-white); } .profile-sidebar__card--dark .cost-sidebar__note { color: var(--color-on-dark-text-soft); } .page-profile--major .major-profile__sidebar-cat, .page-profile--major .major-profile__sidebar-cat--stem, .page-profile--major .major-profile__sidebar-cat--health, .page-profile--major .major-profile__sidebar-cat--business, .page-profile--major .major-profile__sidebar-cat--humanities, .page-profile--major .major-profile__sidebar-cat--social, .page-profile--major .major-profile__sidebar-cat--trades { background: var(--color-on-dark-surface-dim); color: var(--color-white); } /* ── Program profile sidebar card — same navy dark variant as major ── */ .page-profile--program .profile-sidebar__card { background: var(--color-primary); border-color: var(--color-primary); } .page-profile--program .profile-sidebar__card-title { color: var(--color-white); } .page-profile--program .profile-sidebar__stat { border-bottom-color: var(--color-on-dark-divider); } .page-profile--program .profile-sidebar__stat dt { color: var(--color-on-dark-text-dim); } .page-profile--program .profile-sidebar__stat dd { color: var(--color-white); } .page-profile--program .major-profile__sidebar-divider { border-top-color: var(--color-on-dark-surface-dim); } .page-profile--program .major-profile__sidebar-cat, .page-profile--program .major-profile__sidebar-cat--stem, .page-profile--program .major-profile__sidebar-cat--health, .page-profile--program .major-profile__sidebar-cat--business, .page-profile--program .major-profile__sidebar-cat--humanities, .page-profile--program .major-profile__sidebar-cat--social, .page-profile--program .major-profile__sidebar-cat--trades { background: var(--color-on-dark-surface-dim); color: var(--color-white); } .page-profile--program .profile-sidebar__stat-val--positive { color: var(--color-stat-positive-on-dark); } .page-profile--program .profile-sidebar__stat-val--negative { color: var(--color-stat-negative-on-dark); } /* CTA button on dark sidebar */ .page-profile--program .program-profile__sidebar-major-cta { background: transparent; color: var(--color-white); border-color: var(--color-on-dark-border-muted); } .page-profile--program .program-profile__sidebar-major-cta:hover, .page-profile--program .program-profile__sidebar-major-cta:focus-visible { background: var(--color-white); border-color: var(--color-white); color: var(--color-score-fill); } .profile-sidebar__links { display: flex; flex-direction: column; gap: var(--space-1); } .profile-sidebar__links a { font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-primary); text-decoration: none; padding: var(--space-1) 0; border-bottom: var(--border-width) solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .profile-sidebar__links a:hover { color: var(--color-accent); border-color: var(--color-border); } .profile-sidebar__back-link { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text-muted); text-decoration: none; padding: var(--space-2) 0; transition: color var(--transition-fast); } .profile-sidebar__back-link:hover { color: var(--color-primary); } /* Category pill in sidebar — top-right of card, navy background */ .major-profile__sidebar-cat { position: absolute; top: var(--space-4); right: var(--space-4); display: inline-block; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); padding: var(--space-0-75) var(--space-3); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); white-space: nowrap; } .major-profile__sidebar-cat--stem, .major-profile__sidebar-cat--health, .major-profile__sidebar-cat--business, .major-profile__sidebar-cat--humanities, .major-profile__sidebar-cat--social, .major-profile__sidebar-cat--trades { background: var(--color-primary); color: var(--color-white); } /* ── Earnings grid + tiles ───────────────────────────────────────── */ .major-profile__earnings-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); } @media (min-width: 640px) { .major-profile__earnings-grid { grid-template-columns: 1fr 1fr; } } .major-profile__earnings-tile { background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .major-profile__earnings-tile--primary { background: var(--color-primary); border-color: var(--color-primary); } .major-profile__earnings-tile--primary .major-profile__earnings-tile-value { color: var(--color-white); } .major-profile__earnings-tile--primary .major-profile__earnings-tile-label { color: var(--color-on-dark-text-medium); } .major-profile__earnings-tile--primary .major-profile__earnings-tile-note { color: var(--color-on-dark-text-soft); } .major-profile__earnings-tile-value { font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } .major-profile__earnings-tile-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-muted); } .major-profile__earnings-tile-note { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-text-muted); line-height: var(--line-height-base); margin-top: var(--space-1); } /* Earnings range — 2-column layout */ .major-profile__earnings-range-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; } .major-profile__range-intro { margin-top: var(--space-3); margin-bottom: 0; } /* Range donut chart (right column) */ .major-profile__earnings-range-viz { display: flex; flex-direction: column; align-items: center; } .major-profile__range-donut { display: block; } .major-profile__range-donut-labels { display: flex; justify-content: space-between; gap: var(--space-2); width: 100%; max-width: 200px; margin-top: var(--space-3); } .major-profile__range-donut-lbl { display: flex; flex-direction: column; align-items: center; gap: var(--space-0-5); flex: 1; } .major-profile__range-donut-val { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); font-variant-numeric: tabular-nums; line-height: var(--line-height-none); } .major-profile__range-donut-name { font-size: var(--font-size-2xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .major-profile__range-donut-lbl--active .major-profile__range-donut-val { font-size: var(--font-size-sm); color: var(--color-primary); font-weight: var(--font-weight-medium); } .major-profile__range-donut-lbl--active .major-profile__range-donut-name { color: var(--color-primary); } /* Flanking labels match their arc colour so the chart and the legend visually connect. Median (the active label) keeps its larger size and stays navy — these two are intentionally smaller so the median remains the headline number. */ .major-profile__range-donut-lbl--lowest .major-profile__range-donut-val, .major-profile__range-donut-lbl--lowest .major-profile__range-donut-name { color: var(--color-cat-health); } .major-profile__range-donut-lbl--highest .major-profile__range-donut-val, .major-profile__range-donut-lbl--highest .major-profile__range-donut-name { color: var(--color-star); } @media (max-width: 639px) { .major-profile__earnings-range-inner { grid-template-columns: 1fr; gap: var(--space-4); } } /* ── Career paths list ───────────────────────────────────────────── */ .major-profile__careers-list { display: flex; flex-direction: column; gap: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .major-profile__career-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-white); transition: background var(--transition-fast); } .major-profile__career-row:last-child { border-bottom: 0; } .major-profile__career-row:hover { background: var(--color-offwhite); } .major-profile__career-row-name { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .major-profile__career-row-name a { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-secondary); text-decoration: none; line-height: var(--line-height-snug); } .major-profile__career-row-name a:hover { color: var(--color-primary); text-decoration: none; } .major-profile__career-row-ed { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); } .major-profile__career-row-stats { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex-shrink: 0; } .major-profile__career-row-wage { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .major-profile__career-row-growth { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); } .major-profile__career-row-growth--up { background: var(--color-pill-positive-bg); color: var(--color-pill-positive-text); } .major-profile__career-row-growth--down { background: var(--color-pill-negative-bg); color: var(--color-pill-negative-text); } /* ── Specializations table ───────────────────────────────────────── */ .major-profile__programs-table { display: flex; flex-direction: column; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .major-profile__programs-table-head { display: grid; grid-template-columns: 1fr 62px 70px 148px; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-offwhite); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .major-profile__programs-table-head span:last-child { text-align: left !important; } .major-profile__programs-table-row { display: grid; grid-template-columns: 1fr 62px 70px 148px; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); align-items: center; background: var(--color-white); cursor: default; transition: background var(--transition-fast); } .major-profile__programs-table-row[data-href] { cursor: pointer; } .major-profile__programs-table-row:last-child { border-bottom: 0; } .major-profile__programs-table-row:hover { background: var(--color-offwhite); } .major-profile__programs-table-name a { font-size: var(--font-size-sm); color: var(--color-primary); text-decoration: none; font-weight: var(--font-weight-light); line-height: var(--line-height-snug); } .major-profile__programs-table-name a:hover { color: var(--color-accent); } .major-profile__programs-table-col { font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text-muted); text-align: right; } .major-profile__programs-table-earn { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); text-align: right; } .major-profile__programs-table-earn--high { color: var(--color-cat-business-text); } .major-profile__programs-more { margin-top: var(--space-4); display: flex; justify-content: flex-start; } .major-profile__programs-more .btn, .profile-section__ctas .btn { padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-button); } /* ── ROI comparison bars ─────────────────────────────────────────── */ .major-profile__roi-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-light); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); margin-bottom: var(--space-5); } .major-profile__roi-badge strong { font-weight: var(--font-weight-medium); color: var(--color-star); } .major-profile__roi-badge-note { opacity: 0.7; font-size: var(--font-size-xs); } .major-profile__roi-bars { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); } .major-profile__roi-bar-row { display: grid; grid-template-columns: 130px 1fr 84px; align-items: center; gap: var(--space-3); } .major-profile__roi-bar-label { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); font-weight: var(--font-weight-medium); text-align: right; } .major-profile__roi-bar-track { height: var(--chart-bar-track-lg); background: var(--color-border-strong); border-radius: var(--radius-full); overflow: hidden; } .major-profile__roi-bar-fill { height: 100%; border-radius: var(--radius-full); width: var(--bar-w, 0%); animation: roi-bar-grow 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both; } .major-profile__roi-bar-fill--earn { background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-roi-earn) 100%); } .major-profile__roi-bar-fill--cost { background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-bar-fade) 100%); } .major-profile__roi-bar-val { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); font-variant-numeric: tabular-nums; text-align: right; } @keyframes roi-bar-grow { from { width: 0%; } to { width: var(--bar-w, 0%); } } @media (max-width: 639px) { .major-profile__roi-bar-row { grid-template-columns: 1fr 80px; } .major-profile__roi-bar-label { grid-column: 1 / -1; text-align: left; margin-bottom: calc(var(--space-1) * -1); } } /* ── Fit section: stat strip ─────────────────────────────────────── */ .major-profile__fit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); } .major-profile__fit-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-3); background: var(--color-offwhite); border-radius: var(--radius-md); border: var(--border-width) solid var(--color-border); text-align: center; } .major-profile__fit-stat-val { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-primary); line-height: var(--line-height-none); font-variant-numeric: tabular-nums; } .major-profile__fit-stat-val--up { color: var(--color-success); } .major-profile__fit-stat-val--down { color: var(--color-accent); } .major-profile__fit-stat-lbl { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); } @media (max-width: 639px) { .major-profile__fit-stats { grid-template-columns: 1fr 1fr; } .major-profile__fit-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* ── ROI verdict card ────────────────────────────────────────────── */ .major-profile__roi-card { display: grid; grid-template-columns: 190px 1fr; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-5) 0; } .major-profile__roi-card-left { background: var(--color-primary); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-0-5); } .major-profile__roi-verdict-label { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-on-dark-text-dim); margin-bottom: var(--space-1); } .major-profile__roi-verdict-num { font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); color: var(--color-star); line-height: var(--line-height-none); font-variant-numeric: tabular-nums; } .major-profile__roi-verdict-unit { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-white); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin-top: var(--space-1); } .major-profile__roi-verdict-note { font-size: var(--font-size-2xs); color: var(--color-on-dark-text-faint); margin-top: var(--space-2); } .major-profile__roi-card-right { padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); background: var(--color-card-program-grad); } /* callout icon */ .profile-callout__icon { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.8; } @media (max-width: 639px) { .major-profile__roi-card { grid-template-columns: 1fr; } .major-profile__roi-card-left { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: var(--space-4) var(--space-5); gap: var(--space-2); } .major-profile__roi-verdict-num { font-size: var(--font-size-3xl); } } /* Collapse table to 2 cols on small screens */ @media (max-width: 639px) { .major-profile__programs-table-head, .major-profile__programs-table-row { grid-template-columns: 1fr auto; } .major-profile__programs-table-head span:nth-child(2), .major-profile__programs-table-head span:nth-child(3), .major-profile__programs-table-row .major-profile__programs-table-col { display: none; } } /* ── Best colleges list ──────────────────────────────────────────── */ .major-profile__colleges-list { display: flex; flex-direction: column; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); } .major-profile__college-row { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-white); cursor: pointer; transition: background var(--transition-fast); align-items: start; } .major-profile__college-row:last-child { border-bottom: 0; } .major-profile__college-row:hover { background: var(--color-offwhite); } @media (min-width: 640px) { .major-profile__college-row { grid-template-columns: 28px 1fr auto; align-items: center; } } .major-profile__college-row-rank { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); line-height: var(--line-height-tight); padding-top: var(--space-0-5); text-align: center; } .major-profile__college-row-info { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; } .major-profile__college-row-name { font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-secondary); text-decoration: none; line-height: var(--line-height-snug); } .major-profile__college-row-name:hover { color: var(--color-primary); text-decoration: none; } .major-profile__college-row-location { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); } .major-profile__college-row-stats { display: grid; grid-template-columns: repeat(2, 80px); gap: var(--space-2) var(--space-4); margin-top: var(--space-2); grid-column: 1 / -1; } @media (min-width: 640px) { .major-profile__college-row-stats { grid-template-columns: repeat(4, 80px); margin-top: 0; grid-column: auto; } } .major-profile__college-stat { display: flex; flex-direction: column; gap: var(--space-0-5); } .major-profile__college-stat-label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-light); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); white-space: nowrap; } .major-profile__college-stat-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .profile-callout__label { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-primary); margin-bottom: var(--space-1); } .major-profile__browse-link { font-size: var(--font-size-sm); color: var(--color-primary); text-decoration: none; font-weight: var(--font-weight-regular); } .major-profile__browse-link:hover { color: var(--color-accent); } /* ── Majors salary dot plot ──────────────────────────────────────── */ .dot-plot { margin-top: var(--space-5); padding-right: 30px; } .dot-plot__axis-row { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); align-items: flex-end; padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-2); } .dot-plot__name-col-label { font-size: var(--font-size-sm); color: var(--color-primary); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-wide); } .dot-plot__axis { position: relative; height: 18px; } .dot-plot__tick { position: absolute; transform: translateX(-50%); font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-regular); white-space: nowrap; line-height: var(--line-height-none); letter-spacing: var(--letter-spacing-wide); } .dot-plot__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-2-5) 0; margin-bottom: var(--space-1); border-radius: var(--radius-md); transition: background var(--transition-fast); cursor: pointer; } .dot-plot__row--current { background: var(--color-primary-ghost); padding-left: var(--space-2-5); padding-right: var(--space-2-5); border-radius: var(--radius-md); } .dot-plot__name { font-size: var(--font-size-sm); color: var(--color-primary); font-weight: var(--font-weight-light); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-snug); transition: color var(--transition-fast); } .dot-plot__name:hover { color: var(--color-accent); } .dot-plot__row--current .dot-plot__name { font-weight: var(--font-weight-medium); } .dot-plot__track { position: relative; height: 24px; display: flex; align-items: center; } .dot-plot__track::before { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--color-primary-track); border-radius: var(--radius-sm); } .dot-plot__dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); opacity: 0.55; transform: translateX(-50%); z-index: 1; box-shadow: 0 1px 3px var(--color-primary-dot-shadow); } .dot-plot__row--current .dot-plot__dot { width: 14px; height: 14px; background: var(--color-accent); opacity: 1; box-shadow: var(--shadow-accent-halo); } .major-profile__colleges-source { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-light); line-height: var(--line-height-base); margin-top: var(--space-5); } /* ------ Pros & Cons item label/text (major profile uses shared .profile-pros-cons) ------ */ .profile-pros-cons__item-label { display: block; font-weight: var(--font-weight-medium); } .profile-pros-cons__item-text { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-text-muted); line-height: var(--line-height-normal); margin-top: var(--space-1); } /* ========================================================================== Program Profile — /programs/{slug} Extends the shared .profile-* and .major-profile__* patterns. Only new classes that don't already exist elsewhere are defined here. ========================================================================== */ /* Credential bar — full-width display version (vs compact card version) */ .program-profile__cred-bar-wrap { margin: var(--space-5) 0 var(--space-3); } .program-profile__cred-bar--full { height: 28px; border-radius: var(--radius-sm); gap: var(--space-0-5); } /* Override segment colors in the profile bar — same --card-cat as the compact card version but with a wider contrast range (15%→100% vs 20%→100%) so that light category colors (social yellow, business green) stay distinguishable */ .program-profile__cred-bar--full .card-program__credential-segment { display: flex; align-items: center; justify-content: center; overflow: hidden; } .program-profile__cred-bar--full .card-program__credential-segment--cert { background: color-mix(in srgb, var(--card-cat) 15%, var(--color-white)); } .program-profile__cred-bar--full .card-program__credential-segment--assoc { background: color-mix(in srgb, var(--card-cat) 35%, var(--color-white)); } .program-profile__cred-bar--full .card-program__credential-segment--ba { background: color-mix(in srgb, var(--card-cat) 58%, var(--color-white)); } .program-profile__cred-bar--full .card-program__credential-segment--postbac { background: color-mix(in srgb, var(--card-cat) 72%, var(--color-white)); } .program-profile__cred-bar--full .card-program__credential-segment--ma { background: color-mix(in srgb, var(--card-cat) 85%, var(--color-white)); } .program-profile__cred-bar--full .card-program__credential-segment--postma { background: color-mix(in srgb, var(--card-cat) 95%, var(--color-white)); } .program-profile__cred-bar--full .card-program__credential-segment--doc { background: var(--card-cat); } /* Inline percentage label — shown inside wide segments only. Uses --card-cat-text (the dark paired color) so it reads on any category. */ .program-profile__cred-bar-label { font-size: var(--font-size-tiny); font-weight: var(--font-weight-medium); color: var(--card-cat-text); white-space: nowrap; pointer-events: none; } /* Credential legend */ .program-profile__cred-legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); } .program-profile__cred-legend-item { display: flex; align-items: center; gap: var(--space-2); } .program-profile__cred-legend-swatch { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-sm); flex-shrink: 0; } .program-profile__cred-legend-swatch--cert { background: color-mix(in srgb, var(--card-cat) 15%, var(--color-white)); } .program-profile__cred-legend-swatch--assoc { background: color-mix(in srgb, var(--card-cat) 35%, var(--color-white)); } .program-profile__cred-legend-swatch--ba { background: color-mix(in srgb, var(--card-cat) 58%, var(--color-white)); } .program-profile__cred-legend-swatch--postbac { background: color-mix(in srgb, var(--card-cat) 72%, var(--color-white)); } .program-profile__cred-legend-swatch--ma { background: color-mix(in srgb, var(--card-cat) 85%, var(--color-white)); } .program-profile__cred-legend-swatch--postma { background: color-mix(in srgb, var(--card-cat) 95%, var(--color-white)); } .program-profile__cred-legend-swatch--doc { background: var(--card-cat); } .program-profile__cred-legend-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-text); } .program-profile__cred-legend-pct { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text); } /* Sidebar parent major CTA button */ .program-profile__sidebar-major-cta { display: block; width: 100%; margin-top: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-white); color: var(--color-score-fill); border: var(--border-width) solid var(--color-score-fill); border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-align: center; text-decoration: none; line-height: var(--line-height-button); transition: color var(--transition-fast), border-color var(--transition-fast); } .program-profile__sidebar-major-cta:hover, .program-profile__sidebar-major-cta:focus-visible { color: var(--color-accent); border-color: var(--color-accent); } /* Hero parent major badge — link style override */ .profile-hero__meta-badge--parent a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-on-dark-underline); text-underline-offset: var(--space-0-5); } .profile-hero__meta-badge--parent a:hover { text-decoration-color: currentColor; } /* Sidebar stat positive/negative growth indicator */ .profile-sidebar__stat-val--positive { color: var(--color-cat-stem); } .profile-sidebar__stat-val--negative { color: var(--color-error); } /* ── Program Profile: Salary Track Bar ──────────────────────────────────── */ .program-profile__salary-track { padding: var(--space-6) 0 var(--space-16); position: relative; } .program-profile__salary-rail { height: var(--space-1); background: var(--color-border); border-radius: var(--radius-sm); position: relative; margin: 0 var(--space-4); } .program-profile__salary-range-fill { position: absolute; inset: 0; background: linear-gradient( to right, color-mix(in srgb, var(--color-score-fill) 18%, transparent), color-mix(in srgb, var(--color-score-fill) 45%, transparent) ); border-radius: var(--radius-sm); } .program-profile__salary-stops { position: absolute; top: var(--space-6); left: var(--space-4); right: var(--space-4); height: 0; } .program-profile__salary-stop { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; } .program-profile__salary-stop-pin { width: var(--space-2); height: var(--space-2); background: var(--color-text-muted); border: var(--border-width-strong) solid var(--color-surface); border-radius: var(--radius-full); position: relative; top: calc(-1 * var(--space-0-75)); flex-shrink: 0; } .program-profile__salary-stop--median .program-profile__salary-stop-pin { width: var(--icon-size); height: var(--icon-size); background: var(--color-score-fill); border-color: var(--color-surface); top: calc(-1 * var(--space-1-5)); box-shadow: 0 0 0 var(--space-0-75) color-mix(in srgb, var(--color-score-fill) 18%, transparent); } .program-profile__salary-stop-info { text-align: center; margin-top: var(--space-2); line-height: var(--line-height-base); display: flex; flex-direction: column; align-items: center; gap: var(--space-0-5); } .program-profile__salary-stop--median .program-profile__salary-stop-info { margin-top: var(--space-3); } .program-profile__salary-stop-info strong { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); white-space: nowrap; } .program-profile__salary-stop--median .program-profile__salary-stop-info strong { font-size: var(--font-size-card-hero); color: var(--color-score-fill); } .program-profile__salary-stop-info span { display: block; font-size: var(--font-size-tiny); color: var(--color-text-secondary); white-space: nowrap; } /* ── Program Profile: Career Card Grid ──────────────────────────────────── */ .program-profile__careers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-4); } @media (max-width: 640px) { .program-profile__careers-grid { grid-template-columns: 1fr; } } .program-profile__career-card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-surface); } .program-profile__career-card-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--font-size-card-hero); } .program-profile__career-growth-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-tiny); font-weight: var(--font-weight-medium); } .program-profile__career-growth-pill--up { background: var(--color-pill-positive-bg); color: var(--color-pill-positive-text); } .program-profile__career-growth-pill--down { background: var(--color-pill-negative-bg); color: var(--color-pill-negative-text); } .program-profile__career-card-name { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); margin: 0; line-height: var(--line-height-comfortable); } .program-profile__career-card-name a { color: var(--color-text); text-decoration: none; } .program-profile__career-card-name a:hover { color: var(--color-link); } .program-profile__career-card-wage { font-size: var(--font-size-card-hero); font-weight: var(--font-weight-medium); color: var(--color-text); line-height: var(--line-height-none); margin-top: var(--space-1); } .program-profile__career-card-meta { display: flex; flex-direction: column; gap: var(--space-0-5); font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: auto; padding-top: var(--space-2); } .program-profile__career-zone { font-size: var(--font-size-2xs); color: var(--color-text-muted); padding: var(--space-px) var(--space-1); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); white-space: nowrap; } .program-profile__career-wage-range { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-top: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius-md); } .program-profile__career-wage-range-bar { flex: 1; height: var(--space-0-75); background: linear-gradient( to right, color-mix(in srgb, var(--color-score-fill) 25%, transparent), color-mix(in srgb, var(--color-score-fill) 60%, transparent) ); border-radius: var(--radius-sm); min-width: var(--space-5); } .program-profile__career-wage-range-label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-regular); color: var(--color-text-muted); white-space: nowrap; } .program-profile__career-wage-range--partial { flex-wrap: wrap; gap: var(--space-1) var(--space-2); } .program-profile__career-details { margin-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); } .program-profile__career-details summary { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-link); cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-1); user-select: none; } .program-profile__career-details summary::-webkit-details-marker { display: none; } .program-profile__career-details summary::before { content: '▶'; font-size: var(--font-size-2xs); transition: transform var(--transition-fast); flex-shrink: 0; } .program-profile__career-details[open] summary::before { transform: rotate(90deg); } .program-profile__career-desc { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: var(--line-height-prose); margin: var(--space-2) 0; } .program-profile__career-tasks { margin: var(--space-2) 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); } .program-profile__career-tasks li { font-size: var(--font-size-xs); color: var(--color-text); line-height: var(--line-height-button); } .program-profile__career-skills { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); } .program-profile__career-skill-tag { font-size: var(--font-size-2xs); padding: var(--space-0-5) var(--space-2); background: var(--color-tag-bg); color: var(--color-tag-text); border-radius: var(--radius-full); white-space: nowrap; } /* ── Data quality note ───────────────────────────────────────────────────── */ .program-profile__data-note { font-size: var(--font-size-tiny); color: var(--color-text-muted); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius-md); line-height: var(--line-height-normal); } /* ── Program Profile: Colleges Table ────────────────────────────────────── */ .program-profile__colleges-table-wrap { overflow-x: auto; margin-top: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); } .program-profile__colleges-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .program-profile__colleges-table thead th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--font-size-tiny); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-secondary); background: var(--color-surface-alt); border-bottom: var(--border-width) solid var(--color-border); white-space: nowrap; } .program-profile__colleges-table tbody tr { border-bottom: var(--border-width) solid var(--color-border); cursor: pointer; transition: background var(--transition-fast); } .program-profile__colleges-table tbody tr:last-child { border-bottom: none; } .program-profile__colleges-table tbody tr:hover { background: var(--color-surface-alt); } .program-profile__colleges-table td { padding: var(--space-3) var(--space-4); vertical-align: middle; color: var(--color-text); } .program-profile__ct-col--rank { width: 2rem; color: var(--color-text-muted) !important; font-variant-numeric: tabular-nums; } .program-profile__ct-col--name a { display: block; font-weight: var(--font-weight-medium); color: var(--color-text); text-decoration: none; } .program-profile__ct-col--name a:hover { color: var(--color-link); } .program-profile__ct-college-location { display: block; font-size: var(--font-size-tiny); color: var(--color-text-secondary); margin-top: var(--space-0-5); } .program-profile__ct-col--grads, .program-profile__ct-col--accept, .program-profile__ct-col--price, .program-profile__ct-col--earn { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .program-profile__colleges-table thead th.program-profile__ct-col--grads, .program-profile__colleges-table thead th.program-profile__ct-col--accept, .program-profile__colleges-table thead th.program-profile__ct-col--price, .program-profile__colleges-table thead th.program-profile__ct-col--earn { text-align: right; } @media (max-width: 640px) { .program-profile__ct-col--price, .program-profile__ct-col--earn { display: none; } } /* ── Program Profile: Related Programs Pills ─────────────────────────────── */ .program-profile__related-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .program-profile__related-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); text-decoration: none; color: var(--color-text); font-size: var(--font-size-sm); transition: border-color var(--transition-fast), background var(--transition-fast); } .program-profile__related-pill:hover { border-color: var(--color-link); background: var(--color-surface-alt); } .program-profile__related-pill--current { border-color: var(--color-score-fill); background: color-mix(in srgb, var(--color-score-fill) 7%, transparent); cursor: default; font-weight: var(--font-weight-medium); } .program-profile__related-pill-name { line-height: var(--line-height-comfortable); } .program-profile__related-pill-earn { font-size: var(--font-size-tiny); font-weight: var(--font-weight-medium); color: var(--color-score-fill); white-space: nowrap; padding: var(--space-px) var(--space-1); background: color-mix(in srgb, var(--color-score-fill) 10%, transparent); border-radius: var(--radius-full); } .program-profile__related-pill--current .program-profile__related-pill-earn { background: color-mix(in srgb, var(--color-score-fill) 15%, transparent); } /* ============================================================ CAREER PROFILE (/careers/{slug}/) ============================================================ */ /* Career hero + TOC are rendered outside .container (via heroContent slot), so they're natural block children of site-main with no horizontal padding. Replace the 100vw breakout with a plain 100% so mobile browsers don't produce any rounding deviation from the vw-based calc. */ .page-profile--career .profile-hero, .page-profile--career .profile-toc { width: 100%; margin-left: 0; margin-right: 0; } /* Dark sidebar — mirrors program profile */ .page-profile--career .profile-sidebar__card { background: var(--color-primary); border-color: var(--color-primary); } .page-profile--career .profile-sidebar__card-title { color: var(--color-white); } .page-profile--career .profile-sidebar__stat { border-bottom-color: var(--color-on-dark-divider); } .page-profile--career .profile-sidebar__stat dt { color: var(--color-on-dark-text-dim); } .page-profile--career .profile-sidebar__stat dd { color: var(--color-white); } .page-profile--career .major-profile__sidebar-divider { border-top-color: var(--color-on-dark-surface-dim); } .page-profile--career .profile-sidebar__stat-val--positive { color: var(--color-stat-positive-on-dark); } .page-profile--career .profile-sidebar__stat-val--negative { color: var(--color-stat-negative-on-dark); } .page-profile--career .program-profile__sidebar-major-cta { background: transparent; color: var(--color-white); border-color: var(--color-on-dark-border-muted); } .page-profile--career .program-profile__sidebar-major-cta:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-score-fill); } /* ── Tasks list ── */ .career-profile__tasks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .career-profile__tasks-list li { position: relative; padding-left: var(--space-5); font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-comfortable); } .career-profile__tasks-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: var(--space-1-5); height: var(--space-1-5); border-radius: 50%; background: var(--color-score-fill); } /* ── Skills chips ── */ .career-profile__skills-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .career-profile__skill-chip { display: inline-block; padding: var(--space-1) var(--space-3); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text); white-space: nowrap; } /* ── Outlook grid ── */ .career-profile__outlook-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-4); } @media (max-width: 640px) { .career-profile__outlook-grid { grid-template-columns: 1fr; } } @media (min-width: 641px) and (max-width: 1023px) { .career-profile__outlook-grid { grid-template-columns: repeat(2, 1fr); } } .career-profile__outlook-tile { padding: var(--space-5); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-1); } .career-profile__outlook-tile--growth-up { background: color-mix(in srgb, var(--color-success) 8%, transparent); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); } .career-profile__outlook-tile--growth-down { background: color-mix(in srgb, var(--color-error) 8%, transparent); border-color: color-mix(in srgb, var(--color-error) 25%, transparent); } .career-profile__outlook-tile-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-primary); line-height: 1.1; } .career-profile__outlook-tile--growth-up .career-profile__outlook-tile-value { color: var(--color-pill-positive-text); } .career-profile__outlook-tile--growth-down .career-profile__outlook-tile-value { color: var(--color-pill-negative-text); } .career-profile__outlook-tile-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } .career-profile__outlook-tile-note { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0; margin-top: var(--space-1); line-height: var(--line-height-comfortable); } /* ── Education entry block ── */ .career-profile__entry-block { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-5); } .career-profile__entry-item { display: flex; flex-direction: column; gap: var(--space-2); } .career-profile__entry-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } .career-profile__entry-value { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text); } /* ── Job Zone 5-step bar ── */ .career-profile__zone-wrap { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .career-profile__zone-bar { display: flex; gap: var(--space-1); } .career-profile__zone-step { width: 28px; height: 10px; border-radius: var(--radius-sm); background: var(--color-border); } .career-profile__zone-step--active { background: var(--color-score-fill); } .career-profile__zone-text { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .career-profile__zone-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-comfortable); margin: 0; margin-top: var(--space-1); } /* ── Education programs table ── */ .career-profile__programs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-4); } .career-profile__programs-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .career-profile__programs-table thead tr { background: var(--color-offwhite); } .career-profile__programs-table th { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); border-bottom: var(--border-width-strong) solid var(--color-border); white-space: nowrap; } .career-profile__programs-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); color: var(--color-text); vertical-align: middle; } .career-profile__programs-table tr:last-child td { border-bottom: none; } .career-profile__programs-table tr[data-href] { cursor: pointer; } .career-profile__programs-table tr[data-href]:hover td { background: var(--color-offwhite); } .career-profile__programs-table a { color: var(--color-score-fill); font-weight: var(--font-weight-medium); text-decoration: none; } .career-profile__programs-table a:hover { text-decoration: underline; } .career-profile__pt-col--rank { width: 2rem; text-align: center; color: var(--color-text-muted); } .career-profile__pt-col--grads, .career-profile__pt-col--earn, .career-profile__pt-col--cols { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Secondary line inside a name cell (e.g. a college's city + state under its name). */ .career-profile__pt-sub { display: block; margin-top: var(--space-0-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text-muted); } /* ── Related Careers: Data Rows ── */ .career-profile__related-rows { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .career-profile__related-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--color-border); cursor: pointer; transition: background var(--transition-fast); } .career-profile__related-row:last-child { border-bottom: none; } .career-profile__related-row:hover { background: var(--color-offwhite); } .career-profile__related-row-name { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; } .career-profile__related-row-name a { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .career-profile__related-row-name a:hover { color: var(--color-primary); text-decoration: none; } .career-profile__related-row-ed { font-size: var(--font-size-xs); color: var(--color-text-muted); } .career-profile__related-row-stats { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .career-profile__related-row-wage { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .career-profile__related-row-growth { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: var(--space-0-75) var(--space-2); border-radius: var(--radius-full); white-space: nowrap; } .career-profile__related-row-growth--up { color: var(--color-pill-positive-text); background: var(--color-pill-positive-bg); } .career-profile__related-row-growth--down { color: var(--color-pill-negative-text); background: var(--color-pill-negative-bg); } /* ── Alternate Titles pills ── */ .career-profile__alt-titles-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin: 0 0 var(--space-2); } .career-profile__alt-titles { display: flex; flex-wrap: wrap; gap: var(--space-2); } .career-profile__alt-title { display: inline-block; padding: var(--space-1) var(--space-3); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-xs); color: var(--color-text); white-space: nowrap; } /* ── Work Environment section ── */ .career-profile__env-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-4); } @media (max-width: 640px) { .career-profile__env-grid { grid-template-columns: 1fr; } } @media (min-width: 641px) and (max-width: 1023px) { .career-profile__env-grid { grid-template-columns: repeat(2, 1fr); } } .career-profile__env-tile { padding: var(--space-5); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-top: var(--space-0-75) solid var(--color-score-fill); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-1); } .career-profile__env-icon { width: var(--space-5); height: var(--space-5); margin-bottom: var(--space-2); color: var(--color-score-fill); flex-shrink: 0; } .career-profile__env-icon svg { width: 100%; height: 100%; display: block; } .career-profile__env-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } .career-profile__env-value { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-primary); line-height: 1.2; } .career-profile__env-note { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-comfortable); margin: var(--space-1) 0 0; } /* ── Geographic Demand table ── */ .career-profile__geo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-4); } .career-profile__geo-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .career-profile__geo-table thead tr { background: var(--color-offwhite); } .career-profile__geo-table th { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); border-bottom: var(--border-width-strong) solid var(--color-border); white-space: nowrap; } .career-profile__geo-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); color: var(--color-text); vertical-align: middle; } .career-profile__geo-table tbody tr:last-child td { border-bottom: none; } .career-profile__geo-col--rank { width: 2rem; text-align: center; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .career-profile__geo-col--state { font-weight: var(--font-weight-medium); } .career-profile__geo-col--emp, .career-profile__geo-col--wage, .career-profile__geo-col--vs { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .career-profile__geo-diff { display: inline-block; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .career-profile__geo-diff--up { color: var(--color-pill-positive-text); background: var(--color-pill-positive-bg); } .career-profile__geo-diff--down { color: var(--color-pill-negative-text); background: var(--color-pill-negative-bg); } /* ── RIASEC personality fit cards (main column) ── */ .career-profile__riasec-cards { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); } .career-profile__riasec-card { display: flex; align-items: flex-start; gap: var(--space-4); } .career-profile__riasec-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); flex-shrink: 0; color: var(--color-white); background: var(--color-score-fill); } .career-profile__riasec-avatar--r { background: var(--color-riasec-r); } .career-profile__riasec-avatar--i { background: var(--color-riasec-i); } .career-profile__riasec-avatar--a { background: var(--color-riasec-a); } .career-profile__riasec-avatar--s { background: var(--color-success); } .career-profile__riasec-avatar--e { background: var(--color-star); } .career-profile__riasec-avatar--c { background: var(--color-riasec-c); } .career-profile__riasec-card-body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; } .career-profile__riasec-card-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); } .career-profile__riasec-card-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-comfortable); margin: 0; } /* ── SOC code sidebar block ── */ .career-profile__soc-block { padding: var(--space-3) 0 var(--space-1); display: flex; flex-direction: column; gap: var(--space-1); } .career-profile__soc-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-on-dark-text-dim); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } .career-profile__soc-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-white); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; } /* ===================================================================== STATES VERTICAL /states/ — hub: grid of state destination cards /states/{slug}/ — profile: hero + top 3 + glance + college grid ===================================================================== */ /* ── Profile: editorial intro paragraph ─────────────────────────── */ .state-intro { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text); max-width: 72ch; padding: var(--space-10) 0 var(--space-2); } /* ── Hub: states grid ─────────────────────────────────────────────── */ .states-hub { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-10) 0 var(--space-16); } @media (min-width: 640px) { .states-hub { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .states-hub { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } } /* ── Related states grid (state-profile) — 3-up on desktop, 2-up tablet, 1-up mobile. 6 cards fit as a 3×2 grid at desktop. ───────────────── */ .state-related-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .state-related-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .state-related-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } } /* ── City-cards grid (colleges-near per-state "Other Nearby States") — 4-up on desktop, 2-up tablet, 1-up mobile. 4 cards fit in one row at desktop. ─────────────────────────────────────────────────────────── */ .city-cards-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .city-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .city-cards-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } } /* ── State card — data-driven (no image). Used by /states/ archive and /states/{slug}/ "States Near" section. Sibling .city-cards card on the colleges-near pages keeps the image-based design (see below). */ .state-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--color-text); transition: transform var(--transition-fast); } .state-card:hover { transform: translateY(calc(-1 * var(--space-0-5))); } /* Top row — avatar on the left, region pill on the right. Soft bottom divider mirrors the footer divider, framing the header zone. */ .state-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border-bottom: var(--border-width) solid var(--color-divider); padding-bottom: var(--space-4); } /* Primary-blue avatar tile with the state abbr in white — gives every card a single consistent identity mark, no per-state imagery required. */ .state-card__avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--space-10); height: var(--space-10); background: var(--color-primary); border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-white); letter-spacing: var(--letter-spacing-wide); } /* Region pill in the top-right (West / South / Midwest / Northeast) */ .state-card__region { display: inline-flex; align-items: center; padding: var(--space-0-75) var(--space-2); background: var(--color-tag-public-bg); color: var(--color-tag-public-text); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; } .state-card__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); margin: 0; } .state-card__tagline { font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text-muted); line-height: var(--line-height-prose); margin: 0; } /* Footer row — stats on the left, Explore text-link on the right. margin-top: auto pushes the row to the bottom of the card so the border-top divider aligns across all cards in a row regardless of tagline length. Soft divider colour (--color-divider) keeps the separation subtle, integrated rather than harsh. */ .state-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border-top: var(--border-width) solid var(--color-divider); padding-top: var(--space-4); margin-top: auto; } /* Explore CTA — solid pill matching the other archive cards (college / major / program / career). Primary navy with white text by default; parent card hover shifts to accent red. Arrow appended via ::after. */ .state-card__cta { display: inline-flex; align-items: center; padding: var(--cta-padding-y) var(--cta-padding-x); background: var(--color-primary); color: var(--color-text-on-primary); border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: var(--line-height-button); white-space: nowrap; text-decoration: none; transition: background var(--transition-fast); } .state-card__cta::after { content: " →"; display: inline-block; margin-left: var(--space-1); } .state-card:hover .state-card__cta { background: var(--color-accent); color: var(--color-text-on-accent); } .state-card__stats { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); } .state-card__stat strong { font-weight: var(--font-weight-medium); color: var(--color-text); } .state-card__stat-divider { color: var(--color-border); } /* ── City card — image-based, used on /colleges-near/ hub and per-state "Other Nearby States". Same visual as the original .state-card had before the redesign. */ .city-cards { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background-color: var(--color-secondary); overflow: hidden; isolation: isolate; text-decoration: none; color: var(--color-white); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .city-cards::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, var(--color-img-overlay-g0) 0%, var(--color-img-overlay-g35) 35%, var(--color-img-overlay-g70) 70%, var(--color-img-overlay-g100) 100% ); z-index: 1; border-radius: inherit; } .city-cards:hover { transform: translateY(calc(-1 * var(--space-0-75))); box-shadow: var(--shadow-lg); } .city-cards:hover::before { background: linear-gradient( to top, var(--color-img-overlay-gh0) 0%, var(--color-img-overlay-gh40) 40%, var(--color-img-overlay-gh75) 75%, var(--color-img-overlay-gh100) 100% ); } .city-cards__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .city-cards__img--fallback { position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-hero-grad-top) 0%, var(--color-hero-grad-bottom) 100%); display: flex; align-items: center; justify-content: center; } .city-cards__img--fallback span { color: var(--color-on-dark-text-faint); font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); } .city-cards__content { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 2; display: flex; flex-direction: column; gap: var(--space-2); } .city-cards__name { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); margin: 0; } .city-cards__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); } .city-cards__pill { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: var(--color-img-overlay-g35); border: var(--border-width) solid var(--color-on-dark-border-soft); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: var(--line-height-button); backdrop-filter: blur(var(--space-1)); } /* ── Profile hero — full-viewport landmark image ─────────────────── */ .state-hero { position: relative; /* Break out of the page container to go full-viewport-width */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: calc(-1 * var(--space-6)); /* eat site-main top padding */ margin-bottom: var(--space-10); min-height: var(--state-hero-min-height); background: linear-gradient(135deg, var(--color-hero-grad-top) 0%, var(--color-hero-grad-bottom) 100%); display: flex; align-items: flex-end; overflow: hidden; } @media (min-width: 1024px) { .state-hero { min-height: var(--state-hero-min-height-desktop); } } .state-hero__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .state-hero__overlay { position: absolute; inset: 0; background: var(--color-state-hero-overlay); } .state-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--container-max-width); margin: 0 auto; padding: var(--space-16) var(--container-padding-x) var(--space-12); } .state-hero__title { color: var(--color-text-on-primary); font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); margin-bottom: var(--space-2); } @media (min-width: 1024px) { .state-hero__title { font-size: var(--font-size-5xl); } } .state-hero__subtitle { color: var(--color-on-dark-text-soft); font-size: var(--font-size-base); margin-bottom: var(--space-8); } .state-hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-3); } .state-hero__stat { background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); min-width: 110px; } .state-hero__stat-value { color: var(--color-text-on-primary); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); } .state-hero__stat-label { color: var(--color-on-dark-text-soft); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); margin-top: var(--space-1); } /* ── Profile: shared section wrapper ─────────────────────────────── */ .state-section { padding: var(--space-12) 0; border-bottom: var(--border-width) solid var(--color-border); } .state-section--last { border-bottom: none; } .state-section__head { margin-bottom: var(--space-8); } .state-section__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-secondary); margin-bottom: var(--space-2); line-height: var(--line-height-tight); } @media (min-width: 1024px) { .state-section__title { font-size: var(--font-size-3xl); } } .state-section__count { font-size: var(--font-size-xl); font-weight: var(--font-weight-regular); color: var(--color-text-muted); margin-left: var(--space-2); } .state-section__subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; } /* ── How [State] Compares — 4-column stat comparison ────────────── */ .state-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 1024px) { .state-compare { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } } .state-compare__item { background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); } .state-compare__label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); } .state-compare__value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); } .state-compare__delta { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); } .state-compare__delta--up { color: var(--color-success); } .state-compare__delta--down { color: var(--color-error); } .state-compare__delta--neutral { color: var(--color-text-muted); } .state-compare__nat { font-size: var(--font-size-2xs); color: var(--color-text-muted); margin-top: var(--space-1); padding-top: var(--space-2); border-top: var(--border-width) solid var(--color-border); } .state-compare__divider { border: none; border-top: var(--border-width) solid var(--color-border); margin: var(--space-5) 0; } .state-compare__trend-block { background: var(--color-offwhite); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-top: var(--space-4); } .state-compare__trend-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .state-compare__trend-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .state-compare__spark-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .state-compare__trend-svg { display: block; width: 100%; height: auto; } /* ── Best by Goal ─────────────────────────────────────────────────── */ .goal-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .goal-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .goal-grid { grid-template-columns: repeat(3, 1fr); } } .goal-panel { background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .goal-panel__header { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-offwhite); } .goal-panel__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0; } .goal-panel__sub { font-size: var(--font-size-2xs); color: var(--color-text-muted); margin: var(--space-1) 0 0; } .goal-panel__list { list-style: none; margin: 0; padding: 0; } .goal-panel__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); } .goal-panel__item:last-child { border-bottom: none; } .goal-panel__rank { flex-shrink: 0; width: var(--space-6); height: var(--space-6); display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); line-height: 1; } .goal-panel__info { flex: 1; min-width: 0; } .goal-panel__name { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-tight); } .goal-panel__name:hover { color: var(--color-primary); } .goal-panel__city { display: block; font-size: var(--font-size-2xs); color: var(--color-text-muted); margin-top: var(--space-1); } .goal-panel__pill { flex-shrink: 0; font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); white-space: nowrap; } .goal-panel__pill--earnings { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); } .goal-panel__pill--price { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); } /* ── Career Outcomes ROI table ───────────────────────────────────── */ .roi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-4); } .roi-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .roi-table__th { text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border); white-space: nowrap; } .roi-table__th--rank { width: var(--space-8); text-align: center; } .roi-table__th--num { text-align: right; } .roi-table__th--badge { text-align: center; } .roi-table__row { border-bottom: var(--border-width) solid var(--color-border); } .roi-table__row:last-child { border-bottom: none; } .roi-table__row:hover { background: var(--color-offwhite); } .roi-table__td { padding: var(--space-3); vertical-align: middle; } .roi-table__td--rank { text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); } .roi-table__td--num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .roi-table__td--badge { text-align: center; } .roi-table__name { font-weight: var(--font-weight-medium); color: var(--color-text); text-decoration: none; display: block; } .roi-table__name:hover { color: var(--color-primary); } .roi-table__city { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .roi-badge { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); white-space: nowrap; } .roi-badge--excellent { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); } .roi-badge--strong { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); } .roi-badge--good { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); } .roi-badge--average { color: var(--color-text-muted); background: var(--color-offwhite); } .roi-table__note { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-3); } /* ── State profile: Popular Majors panels ────────────────────────── */ .state-major-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .state-major-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .state-major-grid { grid-template-columns: repeat(3, 1fr); } } .state-major-panel { --panel-cat-bg: var(--color-offwhite); --panel-cat-text: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); background: linear-gradient(180deg, var(--color-card-major-grad) 0%, var(--color-white) 80%); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } .state-major-panel--stem { --panel-cat-bg: var(--color-cat-stem-bg); --panel-cat-text: var(--color-cat-stem-text); } .state-major-panel--health { --panel-cat-bg: var(--color-cat-health-bg); --panel-cat-text: var(--color-cat-health-text); } .state-major-panel--business { --panel-cat-bg: var(--color-cat-business-bg); --panel-cat-text: var(--color-cat-business-text); } .state-major-panel--humanities { --panel-cat-bg: var(--color-cat-humanities-bg); --panel-cat-text: var(--color-cat-humanities-text); } .state-major-panel--social { --panel-cat-bg: var(--color-cat-social-bg); --panel-cat-text: var(--color-cat-social-text); } .state-major-panel--trades { --panel-cat-bg: var(--color-cat-trades-bg); --panel-cat-text: var(--color-cat-trades-text); } .state-major-panel__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .state-major-panel__cat { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--panel-cat-text); } .state-major-panel__growth { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-2xs); line-height: var(--line-height-normal); flex-shrink: 0; white-space: nowrap; } .state-major-panel__growth--up { background: var(--color-pill-positive-bg); color: var(--color-pill-positive-text); } .state-major-panel__growth--down { background: var(--color-pill-negative-bg); color: var(--color-pill-negative-text); } .state-major-panel__growth-arrow { font-weight: var(--font-weight-medium); } .state-major-panel__growth-value { font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; } .state-major-panel__growth-meta { color: var(--color-text-muted); font-weight: var(--font-weight-light); } .state-major-panel__name { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text); line-height: var(--line-height-tight); flex: 1; margin: 0; } .state-major-panel__name a { color: inherit; text-decoration: none; } .state-major-panel__name a:hover { color: var(--color-primary); } .state-major-panel__stats { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-1); } .state-major-panel__stat strong { font-weight: var(--font-weight-medium); color: var(--color-text); } .state-major-panel__stat-divider { color: var(--color-border); } .state-major-panel[data-href] { cursor: pointer; } /* ── Filter + sort bar ───────────────────────────────────────────── */ .state-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4); background: var(--color-surface-alt); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-6); } .state-filter-bar__filters { display: flex; flex-wrap: wrap; gap: var(--space-4); flex: 1; } .state-filter-bar__group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .state-filter-bar__group-label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); white-space: nowrap; } .state-chip { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); cursor: pointer; background: var(--color-white); color: var(--color-text); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); user-select: none; } .state-chip input[type="checkbox"] { display: none; } .state-chip:hover { border-color: var(--color-secondary); color: var(--color-secondary); } .state-chip--active { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-white); } .state-filter-bar__sort { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .state-filter-bar__sort-label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); white-space: nowrap; } .state-filter-bar__clear { font-size: var(--font-size-xs); color: var(--color-primary); text-decoration: underline; white-space: nowrap; flex-shrink: 0; } /* ── Top 3 colleges ──────────────────────────────────────────────── */ .state-top-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); padding-top: var(--space-6); } .state-top-card { position: relative; } .state-top-card__rank { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-4); z-index: 2; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); letter-spacing: var(--letter-spacing-wide); } /* ── Top Colleges two-column split ──────────────────────────────── */ .state-best-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-6); align-items: start; } @media (min-width: 640px) { .state-best-split { grid-template-columns: 1fr 1fr; } } .state-best-split__col { min-width: 0; } .state-best-split__col-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-3); } .best-list { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .best-list__item { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); } .best-list__item:last-child { border-bottom: none; } .best-list__row { display: flex; align-items: center; gap: var(--space-3); } .best-list__info { flex: 1; min-width: 0; } .best-list__name { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .best-list__name:hover { color: var(--color-primary); } .best-list__city { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-0-5); } .best-list__bar { height: var(--space-0-75); background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-3); } .best-list__bar-fill { height: 100%; width: var(--bar-w, 0%); background: var(--color-primary); border-radius: var(--radius-full); } .best-list__val { display: inline-block; margin-top: var(--space-2); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-0-5) var(--space-2); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ── Why Study ───────────────────────────────────────────────────── */ .why-study-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-5); } @media (min-width: 640px) { .why-study-split { grid-template-columns: 1fr 1fr; } } .why-study-split__col-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); margin: 0 0 var(--space-4); } .why-study-split__col-title--pro { color: var(--color-success); } .why-study-split__col-title--con { color: var(--color-error); } .why-study__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); } .why-study__item { display: flex; gap: var(--space-3); align-items: flex-start; } .why-study__icon { flex-shrink: 0; width: var(--space-4-5); height: var(--space-4-5); margin-top: var(--space-0-5); } .why-study__item--pro .why-study__icon { color: var(--color-success); } .why-study__item--con .why-study__icon { color: var(--color-error); } .why-study__icon svg { width: 100%; height: 100%; } .why-study__text { font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text); margin: 0; } /* ── At a Glance ─────────────────────────────────────────────────── */ .state-glance__breakdown { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 640px) { .state-glance__breakdown { grid-template-columns: 1fr 1fr; } } .state-glance__group-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); margin-bottom: var(--space-4); } .state-glance__bar-row { display: grid; grid-template-columns: 1fr 2fr var(--glance-count-col); align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .state-glance__bar-label { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-base); } .state-glance__bar-track { height: var(--chart-bar-track); background: var(--color-divider-soft); border-radius: var(--radius-full); overflow: hidden; } .state-glance__bar-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width var(--transition-slow); } .state-glance__bar-count { font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; } /* (filter bar styles moved to state-filter-bar block above) */ .state-empty { color: var(--color-text-muted); padding: var(--space-12) 0; text-align: center; font-size: var(--font-size-base); } /* ── Quick-jump section nav ──────────────────────────────────────── */ .state-jump-nav { display: flex; align-items: center; gap: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding: var(--space-4) 0; margin-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); } .state-jump-nav::-webkit-scrollbar { display: none; } .state-jump-nav__link { flex-shrink: 0; display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); text-decoration: none; white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .state-jump-nav__link:hover { background: var(--color-secondary); color: var(--color-text-on-primary); border-color: var(--color-secondary); } /* ── National context note below compare grid ────────────────────── */ .state-compare__context { margin-top: var(--space-5); font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-base); } .state-compare__context-link { color: var(--color-primary); text-decoration: none; margin-left: var(--space-2); font-weight: var(--font-weight-medium); } .state-compare__context-link:hover { text-decoration: underline; } /* ── Editorial intro paragraph ───────────────────────────────────── */ .state-intro { font-size: var(--font-size-base); line-height: var(--line-height-prose); color: var(--color-text); max-width: 65ch; margin: 0 0 var(--space-8); } /* ── Best by Goal — 6-panel grid ─────────────────────────────────── */ .state-goals { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .state-goals { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .state-goals { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } } .state-goal { background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .state-goal__head { border-bottom: var(--border-width) solid var(--color-border); padding-bottom: var(--space-4); } .state-goal__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); margin: 0 0 var(--space-1); line-height: var(--line-height-snug); } .state-goal__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0; line-height: var(--line-height-base); } .state-goal__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .state-goal__item { display: grid; grid-template-columns: var(--space-6) 1fr auto; align-items: center; gap: var(--space-3); } .state-goal__rank { width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); background: var(--color-surface-alt); border: var(--border-width) solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); flex-shrink: 0; } .state-goal__college { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; } .state-goal__college-name { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; line-height: var(--line-height-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .state-goal__college-name:hover { text-decoration: underline; } .state-goal__college-city { font-size: var(--font-size-2xs); color: var(--color-text-muted); } .state-goal__meta { flex-shrink: 0; } .state-goal__pill { display: inline-flex; align-items: center; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); white-space: nowrap; } .state-goal__pill--score { background: var(--color-cat-stem-bg); color: var(--color-cat-stem-text); } .state-goal__pill--price { background: var(--color-pill-positive-bg); color: var(--color-pill-positive-text); } .state-goal__pill--earn { background: var(--color-roi-strong-bg); color: var(--color-roi-strong-text); } /* ── Career Outcomes — ROI table ─────────────────────────────────── */ .state-roi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } .state-roi-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .state-roi-table thead { background: var(--color-surface-alt); } .state-roi-table th { padding: var(--space-3) var(--space-4); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); text-align: left; white-space: nowrap; border-bottom: var(--border-width) solid var(--color-border); } .state-roi-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); vertical-align: middle; color: var(--color-text); } .state-roi-table tbody tr:last-child td { border-bottom: none; } .state-roi-table tbody tr:hover { background: var(--color-surface-alt); } .state-roi-table__col--name { min-width: 200px; } .state-roi-table__col--num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-muted); } .state-roi-table__col--roi { text-align: center; white-space: nowrap; } .state-roi-table__link { color: var(--color-primary); text-decoration: none; font-weight: var(--font-weight-medium); } .state-roi-table__link:hover { text-decoration: underline; } .state-roi-badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); white-space: nowrap; } .roi--excellent { background: var(--color-roi-excellent-bg); color: var(--color-roi-excellent-text); } .roi--strong { background: var(--color-roi-strong-bg); color: var(--color-roi-strong-text); } .roi--good { background: var(--color-roi-good-bg); color: var(--color-roi-good-text); } .roi--average { background: var(--color-roi-average-bg); color: var(--color-roi-average-text); } /* ── Hidden Gems grid ────────────────────────────────────────────── */ .state-gems-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .state-gems-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .state-gems-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } } .state-gem-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .state-gem-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .state-gem-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .state-gem-card__badge { display: inline-flex; padding: var(--space-1) var(--space-2); background: var(--color-gem-badge-bg); color: var(--color-gem-badge-text); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); white-space: nowrap; } .state-gem-card__type { font-size: var(--font-size-2xs); color: var(--color-text-muted); text-align: right; } .state-gem-card__name { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-snug); } .state-gem-card__city { font-size: var(--font-size-xs); color: var(--color-text-muted); } .state-gem-card__stats { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); } .state-gem-card__stat { display: flex; flex-direction: column; gap: var(--space-0-5); } .state-gem-card__stat-val { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); font-variant-numeric: tabular-nums; } .state-gem-card__stat-lbl { font-size: var(--font-size-2xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } /* ── FAQ accordion (details/summary) ─────────────────────────────── */ .state-faq { display: flex; flex-direction: column; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .state-faq__item { border-bottom: var(--border-width) solid var(--color-border); } .state-faq__item:last-child { border-bottom: none; } .state-faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-secondary); cursor: pointer; list-style: none; background: var(--color-white); transition: background var(--transition-fast); line-height: var(--line-height-snug); } .state-faq__question::-webkit-details-marker { display: none; } .state-faq__question::marker { display: none; } .state-faq__question:hover { background: var(--color-surface-alt); } .state-faq__icon { flex-shrink: 0; width: var(--icon-size); height: var(--icon-size); border-right: var(--border-width-strong) solid currentColor; border-bottom: var(--border-width-strong) solid currentColor; transform: rotate(45deg); transition: transform var(--transition-fast); opacity: 0.4; margin-top: -4px; } details[open] .state-faq__icon { transform: rotate(-135deg); margin-top: 4px; } .state-faq__answer { padding: 0 var(--space-6) var(--space-5); background: var(--color-white); } .state-faq__answer p { font-size: var(--font-size-sm); line-height: var(--line-height-prose); color: var(--color-text-muted); margin: 0; } /* ── Why Study in [State] — bullet list ──────────────────────────── */ .state-why-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 640px) { .state-why-list { grid-template-columns: repeat(2, 1fr); } } .state-why-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-alt); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } .state-why-item__icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--color-primary); position: relative; margin-top: 2px; } .state-why-item__icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -60%) rotate(45deg); width: 5px; height: 9px; border-right: 2px solid var(--color-white); border-bottom: 2px solid var(--color-white); } .state-why-item__text { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-base); } /* ── Colleges by City grid ───────────────────────────────────────── */ .state-city-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } @media (min-width: 640px) { .state-city-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .state-city-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } } /* 3-column variant — used on the state profile's top-cities section. */ @media (min-width: 640px) { .state-city-grid--3col { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .state-city-grid--3col { grid-template-columns: repeat(3, 1fr); } } .state-city-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .state-city-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .state-city-card__name { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-snug); } .state-city-card__count { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* ── State profile — About section 2-column split ────────────────── */ .state-about-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-4); } @media (min-width: 640px) { .state-about-split { grid-template-columns: 1fr 1fr; align-items: start; } } .state-about-split__text { display: flex; flex-direction: column; } .state-about-split__text .profile-section__intro:last-child { margin-bottom: 0; } .state-about-split__image { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; } .state-about-split__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===================================================================== TOOLS HUB — /tools/ ===================================================================== */ .tools-hero { padding: var(--space-12) 0 var(--space-10); border-bottom: var(--border-width) solid var(--color-border); } .tools-hero__label { display: inline-block; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-accent); margin-bottom: var(--space-3); } .tools-hero__title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-4); line-height: var(--line-height-tight); } @media (min-width: 1024px) { .tools-hero__title { font-size: var(--font-size-4xl); } } .tools-hero__desc { font-size: var(--font-size-base); color: var(--color-text-muted); line-height: var(--line-height-prose); max-width: 560px; margin: 0; } .tools-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-10) 0 var(--space-16); } @media (min-width: 640px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } } .tool-card { display: flex; flex-direction: column; background: var(--color-card-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-6); text-decoration: none; color: inherit; transition: box-shadow var(--transition-base), border-color var(--transition-base); } .tool-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); } .tool-card--disabled { opacity: var(--color-on-dark-text-dim); cursor: default; pointer-events: none; } .tool-card__icon { display: flex; align-items: center; justify-content: center; width: var(--space-12); height: var(--space-12); background: var(--color-primary-ghost); border-radius: var(--radius-lg); color: var(--color-primary); margin-bottom: var(--space-5); } .tool-card__icon svg { width: var(--icon-size-xl); height: var(--icon-size-xl); } .tool-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-2); line-height: var(--line-height-tight); } .tool-card__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-normal); margin: 0; flex: 1; } .tool-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); } .tool-card__cta { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); } .tool-card__badge { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); padding: var(--space-0-75) var(--space-2); border-radius: var(--radius-full); background: var(--color-tag-bg); color: var(--color-text-muted); } .tool-card__badge--live { background: var(--color-roi-excellent-bg); color: var(--color-roi-excellent-text); } /* ===================================================================== COMPARE TOOL — /tools/compare/ ===================================================================== */ .compare-tool { padding-block: var(--space-4); scroll-margin-top: var(--space-20); } @media (min-width: 640px) { .compare-tool { padding-block: var(--space-5); } } .compare-tool--loading { opacity: var(--opacity-disabled); pointer-events: none; transition: opacity var(--transition-base); } /* ── Narrative summary section ─────────────────────────────────────────────── */ .compare-narrative { margin-top: var(--space-6); } @media (min-width: 1024px) { .compare-narrative { margin-top: var(--space-8); } } .compare-narrative__lead { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-relaxed); margin-bottom: var(--space-6); } .compare-narrative__group { margin-bottom: var(--space-2); } .compare-narrative__group-intro { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-relaxed); margin: var(--space-1) 0 var(--space-4); } .compare-narrative__group-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-4); } /* ── 2-column stat grid (costs section) ────────────────────────────────────── */ .compare-stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .compare-stat-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } } @media (min-width: 1024px) { .compare-stat-grid { gap: var(--space-6); } } .compare-stat-grid .compare-stat { padding: var(--space-4); background: var(--color-offwhite); border-radius: var(--radius-lg); border-bottom: 0; } .compare-stat-grid .compare-stat:last-child { padding-bottom: var(--space-4); } .compare-stat-grid .compare-stat__bars { padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); } /* ── Bar-chart stat block ───────────────────────────────────────────────────── */ .compare-stat { padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--color-border); } .compare-stat:last-child { border-bottom: 0; padding-bottom: 0; } .compare-stat__bars { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); } .compare-stat__row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: var(--space-1) var(--space-3); } @media (min-width: 1024px) { .compare-stat__row { grid-template-columns: minmax(calc(var(--space-24) + var(--space-12)), calc(var(--space-24) * 2 + var(--space-8))) 1fr calc(var(--space-20) + var(--space-2-5)); grid-template-rows: auto; } } .compare-stat__name { grid-column: 1 / -1; font-size: var(--font-size-sm); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 1024px) { .compare-stat__name { grid-column: auto; } } .compare-stat__track { height: var(--space-2); background: var(--color-primary-track); border-radius: var(--radius-full); overflow: hidden; } .compare-stat__bar { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); } .compare-stat__bar--col-1 { background: var(--color-primary); } .compare-stat__bar--col-2 { background: var(--color-accent); } .compare-stat__bar--col-3 { background: var(--color-success); } .compare-stat__bar--col-4 { background: var(--color-star); } .compare-stat__value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); text-align: right; white-space: nowrap; } .compare-stat__text { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-relaxed); margin: 0 0 var(--space-3); } /* Breadcrumb */ .compare-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); } .compare-breadcrumb a { color: var(--color-primary); text-decoration: none; } .compare-breadcrumb a:hover { text-decoration: underline; } /* Page header */ .compare-header { margin-bottom: var(--space-8); } .compare-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-2); line-height: var(--line-height-tight); } @media (min-width: 1024px) { .compare-title { font-size: var(--font-size-4xl); } } .compare-subtitle { font-size: var(--font-size-base); color: var(--color-text-muted); margin: 0; } /* Add-college search bar */ .compare-add { margin-bottom: var(--space-8); } .compare-search__label { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--space-3); } .compare-search__count { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-text-muted); background: var(--color-tag-bg); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); } .compare-search__field-wrap { position: relative; } .compare-search__input { width: 100%; padding: var(--space-3) var(--space-4); font-family: inherit; font-size: var(--font-size-base); color: var(--color-text); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); box-sizing: border-box; } .compare-search__input::placeholder { color: var(--color-text-muted); } .compare-search__input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 var(--border-width-strong) var(--color-primary-ring); } .compare-full-notice { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; text-align: center; padding: var(--space-1) 0; } /* Autocomplete dropdown */ .compare-autocomplete { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); z-index: var(--z-dropdown); list-style: none; margin: 0; padding: var(--space-1) 0; max-height: var(--compare-dropdown-max-h); overflow-y: auto; text-align: left; } .compare-autocomplete__item { display: block; padding: var(--space-2-5) var(--space-4); cursor: pointer; transition: background var(--transition-fast); } .compare-autocomplete__item:hover, .compare-autocomplete__item:focus { background: var(--color-surface-alt); outline: none; } .compare-autocomplete__item--added { opacity: 0.5; cursor: default; } .compare-autocomplete__name { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .compare-autocomplete__meta { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-0-5); } .compare-autocomplete__added { font-size: var(--font-size-xs); color: var(--color-text-muted); background: var(--color-tag-bg); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; } .compare-slot__plus { font-size: var(--font-size-2xl); font-weight: var(--font-weight-regular); color: var(--color-text-muted); line-height: var(--line-height-none); margin-bottom: var(--space-2); } .compare-slot__prompt { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-muted); margin: 0; } .compare-slots-hint { text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0 0 var(--space-8); } /* Inline search input inside a slot */ .compare-slot__input { width: 100%; padding: var(--space-2) var(--space-3); font-family: inherit; font-size: var(--font-size-sm); color: var(--color-text); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); outline: none; box-sizing: border-box; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .compare-slot__input:focus { border-color: var(--color-primary); background: var(--color-white); } .compare-slot__input::placeholder { color: var(--color-text-muted); } /* Empty column header inside the comparison table */ .compare-table__col-head--empty { vertical-align: middle; padding: 0; } .compare-col-empty { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); border: var(--border-width-strong) dashed var(--color-border); border-radius: var(--radius-card); cursor: pointer; transition: border-color var(--transition-base), background var(--transition-base); } .compare-col-empty:hover, .compare-col-empty:focus { border-color: var(--color-primary); background: var(--color-primary-ghost); outline: none; } .compare-col-empty .compare-slot__input { width: 100%; margin-bottom: var(--space-1); } /* Empty data cells in the comparison table */ .compare-table__cell--empty { background: var(--color-offwhite); border-left: var(--border-width) solid var(--color-border); } /* Comparison table wrapper */ .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); } .compare-table { width: 100%; min-width: var(--compare-table-min-w); border-collapse: collapse; table-layout: fixed; } /* Sticky first column (metric labels) */ .compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; z-index: 1; width: var(--compare-label-col-w); min-width: var(--compare-label-col-w); } /* Column header row */ .compare-table__label-head { background: var(--color-footer-bg); border-bottom: var(--border-width) solid var(--color-border); padding: var(--space-4); font-weight: var(--font-weight-regular); text-align: left; } .compare-table__col-head { position: relative; background: var(--color-footer-bg); border-bottom: var(--border-width) solid var(--color-border); border-left: var(--border-width) solid var(--color-border); padding: var(--space-5); vertical-align: top; text-align: left; font-weight: var(--font-weight-regular); } .compare-col-head { display: flex; flex-direction: column; gap: var(--space-2); } .compare-col-head__top { display: flex; align-items: flex-start; gap: var(--space-3); } .compare-col-head__info { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; } .compare-col-head__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; line-height: var(--line-height-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .compare-col-head__name:hover { color: var(--color-primary); } .compare-col-head__location { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-regular); margin: 0; } .compare-col-head__pin { width: var(--space-2-5); height: var(--space-2-5); flex-shrink: 0; color: var(--color-text-muted); } /* Remove button — × in the top-right corner of the column header */ .compare-remove-btn { position: absolute; top: var(--space-2); right: var(--space-1-5); font-size: var(--font-size-card-hero); line-height: var(--line-height-none); color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .compare-remove-btn:hover { color: var(--color-error); } /* Section divider rows */ .compare-table__section td { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); background: var(--color-surface-alt); border-top: var(--border-width) solid var(--color-border); border-bottom: var(--border-width) solid var(--color-border); } /* Metric label cells (left column) */ .compare-table__label { padding: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-secondary); text-align: left; font-weight: var(--font-weight-regular); border-bottom: var(--border-width) solid var(--color-border-strong); background: var(--color-white); } /* Data cells */ .compare-table__cell { padding: var(--space-3); border-left: var(--border-width) solid var(--color-border); border-bottom: var(--border-width) solid var(--color-border-strong); vertical-align: middle; background: var(--color-white); } .compare-table__cell--best { background: var(--color-roi-excellent-bg); } .compare-table__cell--worst { background: var(--color-pill-negative-bg); } /* Cell content pieces */ .compare-cell__value { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text); line-height: var(--line-height-tight); } .compare-cell__label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-0-5); } .compare-cell__na { font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: italic; } .compare-cell__badge { display: inline-block; margin-top: var(--space-1); font-size: var(--font-size-3xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); } .compare-cell__badge--best { background: var(--color-roi-excellent-text); color: var(--color-white); } .compare-cell__badge--worst { background: var(--color-pill-negative-text); color: var(--color-white); } /* UCD Score label pill — now uses the shared .score-badge classes (see the tier-badge block above). */ /* Action row at the bottom */ .compare-table__actions .compare-table__label { background: var(--color-white); border-bottom: none; } .compare-table__actions .compare-table__cell { padding: var(--space-5); border-bottom: none; background: var(--color-white); } .compare-actions { display: flex; flex-direction: column; gap: var(--space-2); } .compare-btn { display: block; padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-align: center; text-decoration: none; border-radius: var(--radius-md); border: var(--border-width) solid transparent; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .compare-btn--outline { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .compare-btn--outline:hover { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); } .compare-btn--primary { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); } .compare-btn--primary:hover { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); } /* ===================================================================== ROI TOOL — /colleges/compare-roi/ ===================================================================== */ .roi-tool { padding-block: 0; scroll-margin-top: var(--space-20); } .roi-tool.compare-tool--loading { opacity: var(--opacity-disabled); pointer-events: none; } /* ROI label pill — Excellent / Strong / Good / Fair / Poor */ .roi-label { display: inline-block; margin-top: var(--space-1); font-size: var(--font-size-3xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); } .roi-label--excellent { background: var(--color-roi-excellent-bg); color: var(--color-roi-excellent-text); } .roi-label--strong { background: var(--color-roi-strong-bg); color: var(--color-roi-strong-text); } .roi-label--good { background: var(--color-roi-good-bg); color: var(--color-roi-good-text); } .roi-label--fair { background: var(--color-roi-average-bg); color: var(--color-roi-average-text); } .roi-label--poor { background: var(--color-pill-negative-bg); color: var(--color-pill-negative-text); } /* Negative earnings premium value */ .compare-cell__value--negative { color: var(--color-accent); } /* Break-even bar chart */ .roi-breakdown { margin-top: var(--space-6); } .roi-bars { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-5); } .roi-bar-row__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .roi-bar-row__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .roi-bar-row__track { position: relative; display: flex; align-items: center; gap: var(--space-3); height: var(--space-6); background: var(--color-offwhite); border-radius: var(--radius-full); overflow: hidden; } .roi-bar-row__fill { height: 100%; border-radius: var(--radius-full); transition: width var(--transition-slow); } .roi-bar-row__fill--col-1 { background: var(--color-primary); } .roi-bar-row__fill--col-2 { background: var(--color-accent); } .roi-bar-row__fill--col-3 { background: var(--color-success); } .roi-bar-row__fill--col-4 { background: var(--color-star); } .roi-bar-row__value { position: absolute; right: var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text); } .roi-bar-row__na { font-size: var(--font-size-xs); color: var(--color-text-muted); padding-left: var(--space-3); } /* Methodology accordion */ .roi-methodology { background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); } .roi-methodology__trigger { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-4); } .roi-methodology__body { display: flex; flex-direction: column; gap: var(--space-3); } .roi-methodology__body p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin: 0; } .roi-methodology__note { font-size: var(--font-size-xs); color: var(--color-text-muted); border-left: var(--space-1) solid var(--color-border); padding-left: var(--space-3); } /* ===================================================================== ROI TOOL v2 — Picker · Verdict Cards · Timeline · Details ===================================================================== */ /* ─ Picker row ─────────────────────────────────────────────────────── */ .roi-picker { display: flex; flex-wrap: wrap; gap: var(--space-3); } .roi-slot { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--space-10); padding-inline: var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); position: relative; max-width: calc(var(--space-24) * 3 - var(--space-2)); } .roi-slot--filled { border: var(--border-width-strong) solid var(--color-border); background: var(--color-card-bg); } .roi-slot--filled.roi-slot--col-1 { border-color: var(--color-primary); } .roi-slot--filled.roi-slot--col-2 { border-color: var(--color-accent); } .roi-slot--filled.roi-slot--col-3 { border-color: var(--color-success); } .roi-slot--filled.roi-slot--col-4 { border-color: var(--color-star); } .roi-slot--empty { border: var(--border-width-strong) dashed var(--color-border); background: transparent; color: var(--color-text-muted); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); } .roi-slot--empty:hover { border-color: var(--color-primary); color: var(--color-primary); } .roi-slot--empty:focus-visible { outline: var(--border-width-strong) solid var(--color-primary); outline-offset: var(--space-0-5); } .roi-slot--active { border-style: solid; border-color: var(--color-primary); min-width: calc(var(--space-24) * 2 + var(--space-16) + var(--space-1)); overflow: visible; z-index: 10; } .roi-slot__avatar { width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--color-border); color: var(--color-white); font-size: var(--font-size-3xs); font-weight: var(--font-weight-semibold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0; } .roi-slot--col-1 .roi-slot__avatar { background: var(--color-primary); } .roi-slot--col-2 .roi-slot__avatar { background: var(--color-accent); } .roi-slot--col-3 .roi-slot__avatar { background: var(--color-success); } .roi-slot--col-4 .roi-slot__avatar { background: var(--color-star); } .roi-slot__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); } .roi-slot__remove { color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size-lg); line-height: var(--line-height-none); flex-shrink: 0; transition: color var(--transition-fast); } .roi-slot__remove:hover { color: var(--color-accent); } .roi-slot__plus { font-size: var(--font-size-lg); line-height: var(--line-height-none); font-weight: var(--font-weight-light); } .roi-slot__input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-size-sm); color: var(--color-text); min-width: calc(var(--space-20) * 2 + var(--space-5)); } /* Override compare-autocomplete right:0 so dropdown isn't clipped to slot width */ .roi-slot .compare-autocomplete { right: auto; min-width: calc(var(--space-24) * 3 + var(--space-3)); } /* ─ Empty state ──────────────────────────────────────────────────────── */ .roi-empty { padding: var(--space-20) var(--space-5); text-align: center; } .roi-empty__text { font-size: var(--font-size-base); color: var(--color-text-muted); } /* ─ Verdict cards ────────────────────────────────────────────────────── */ .roi-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-6); } @media (min-width: 640px) { .roi-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .roi-cards { margin-top: var(--space-8); } } .roi-card { background: var(--color-card-bg); border: var(--border-width) solid var(--color-border); border-top: var(--space-1) solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .roi-card--col-1 { border-top-color: var(--color-primary); } .roi-card--col-2 { border-top-color: var(--color-accent); } .roi-card--col-3 { border-top-color: var(--color-success); } .roi-card--col-4 { border-top-color: var(--color-star); } .roi-card__verdict { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; } .roi-card__years { font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-none); letter-spacing: var(--letter-spacing-tight); color: var(--color-text); } .roi-card__years--na { font-size: var(--font-size-2xl); color: var(--color-text-muted); } .roi-card__verdict-meta { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-1); } .roi-card__unit { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-tight); } .roi-card__name { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); text-decoration: none; line-height: var(--line-height-snug); } .roi-card__name:hover { color: var(--color-primary); text-decoration: underline; } .roi-card__location { margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); } .roi-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); } .roi-card__stat-value { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); line-height: var(--line-height-tight); } .roi-card__stat-label { display: block; margin-top: var(--space-0-5); font-size: var(--font-size-3xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } /* ─ Timeline section ─────────────────────────────────────────────────── */ .roi-timeline-section { padding: var(--space-6) var(--space-5); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); margin-top: var(--space-6); } @media (min-width: 1024px) { .roi-timeline-section { margin-top: var(--space-8); } } .roi-timeline-section__inner { max-width: 100%; } .roi-timeline-section__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--space-1); } .roi-timeline-section__sub { font-size: var(--font-size-base); color: var(--color-text-muted); margin-bottom: var(--space-5); } /* Zone band */ .roi-zones { display: flex; height: var(--space-10); border-radius: var(--radius-md); overflow: hidden; } .roi-zone { display: flex; flex-direction: column; justify-content: center; padding-left: var(--space-2); overflow: hidden; flex-shrink: 0; } .roi-zone--excellent { background: var(--color-roi-excellent-bg); } .roi-zone--strong { background: var(--color-roi-strong-bg); } .roi-zone--good { background: var(--color-roi-good-bg); } .roi-zone--fair { background: var(--color-roi-average-bg); } .roi-zone--poor { background: var(--color-pill-negative-bg); } .roi-zone__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); white-space: nowrap; line-height: 1; } .roi-zone--excellent .roi-zone__label { color: var(--color-roi-excellent-text); } .roi-zone--strong .roi-zone__label { color: var(--color-roi-strong-text); } .roi-zone--good .roi-zone__label { color: var(--color-roi-good-text); } .roi-zone--fair .roi-zone__label { color: var(--color-roi-average-text); } .roi-zone--poor .roi-zone__label { color: var(--color-pill-negative-text); } .roi-zone__bound { font-size: var(--font-size-2xs); white-space: nowrap; opacity: 0.7; line-height: 1; margin-top: var(--space-0-5); } .roi-zone--excellent .roi-zone__bound { color: var(--color-roi-excellent-text); } .roi-zone--strong .roi-zone__bound { color: var(--color-roi-strong-text); } .roi-zone--good .roi-zone__bound { color: var(--color-roi-good-text); } .roi-zone--fair .roi-zone__bound { color: var(--color-roi-average-text); } .roi-zone--poor .roi-zone__bound { color: var(--color-pill-negative-text); } /* Row-per-college chart — no overlap possible */ .roi-chart { display: grid; grid-template-columns: calc(var(--space-24) * 2 + var(--space-2)) 1fr; row-gap: var(--space-3); align-items: center; } .roi-chart__gutter { /* empty left cell keeps zone band + axis aligned with tracks */ } .roi-chart__zones-cell { /* zone band in track column only */ } .roi-chart__label { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-4); min-width: 0; } .roi-chart__dot { width: var(--icon-size-xl); height: var(--icon-size-xl); border-radius: 50%; background: var(--color-border); color: var(--color-white); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0; } .roi-chart__dot--col-1 { background: var(--color-primary); } .roi-chart__dot--col-2 { background: var(--color-accent); } .roi-chart__dot--col-3 { background: var(--color-success); } .roi-chart__dot--col-4 { background: var(--color-star); } .roi-chart__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .roi-chart__track { position: relative; height: calc(var(--space-8) + var(--space-1)); background: var(--color-offwhite); border-radius: var(--radius-full); overflow: visible; } .roi-chart__fill { position: absolute; left: 0; top: 50%; height: var(--space-2); transform: translateY(-50%); border-radius: var(--radius-full); min-width: var(--space-1); } .roi-chart__fill--col-1 { background: var(--color-primary); } .roi-chart__fill--col-2 { background: var(--color-accent); } .roi-chart__fill--col-3 { background: var(--color-success); } .roi-chart__fill--col-4 { background: var(--color-star); } .roi-chart__marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: var(--space-3-5); height: var(--space-3-5); border-radius: 50%; border: var(--border-width-strong) solid var(--color-card-bg); z-index: 1; } .roi-chart__marker--col-1 { background: var(--color-primary); } .roi-chart__marker--col-2 { background: var(--color-accent); } .roi-chart__marker--col-3 { background: var(--color-success); } .roi-chart__marker--col-4 { background: var(--color-star); } .roi-chart__value { position: absolute; top: 50%; transform: translateY(-50%); padding-left: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); } .roi-chart__value--col-1 { color: var(--color-primary); } .roi-chart__value--col-2 { color: var(--color-accent); } .roi-chart__value--col-3 { color: var(--color-success); } .roi-chart__value--col-4 { color: var(--color-star); } .roi-chart__axis { position: relative; height: var(--space-5); } /* Axis labels */ .roi-axis { position: relative; height: var(--space-5); margin-top: var(--space-1); } .roi-axis__tick { position: absolute; transform: translateX(-50%); font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; line-height: var(--line-height-none); } .roi-axis__tick:first-child { transform: none; } .roi-axis__tick--end { right: 0; left: auto; transform: none; } /* ─ Full breakdown ───────────────────────────────────────────────────── */ .roi-details-section { padding: var(--space-5); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); margin-top: var(--space-6); } @media (min-width: 1024px) { .roi-details-section { margin-top: var(--space-8); } } .roi-details-section__inner { max-width: 100%; } .roi-details-section__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--space-4); } /* ── Full Breakdown table ───────────────────────────────────────────── */ .roi-table { width: 100%; border-collapse: separate; border-spacing: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; } .roi-table th, .roi-table td { padding: var(--space-3) var(--space-3); text-align: left; font-size: var(--font-size-sm); border-bottom: var(--border-width) solid var(--color-border); border-right: var(--border-width) solid var(--color-border); } .roi-table thead th { font-weight: var(--font-weight-medium); border-bottom: var(--border-width-strong) solid var(--color-border-strong); } .roi-table tbody tr:last-child td { border-bottom: none; } .roi-table__group { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); padding-top: var(--space-5); border-bottom: var(--border-width) solid var(--color-border-strong); } /* Column tints — light wash of each college's brand color */ .roi-table .roi-table__col-1 { background: color-mix(in srgb, var(--color-primary) 5%, transparent); color: var(--color-primary); } .roi-table .roi-table__col-2 { background: color-mix(in srgb, var(--color-accent) 5%, transparent); color: var(--color-accent); } .roi-table .roi-table__col-3 { background: color-mix(in srgb, var(--color-success) 5%, transparent); color: var(--color-success); } .roi-table .roi-table__col-4 { background: color-mix(in srgb, var(--color-star) 5%, transparent); color: var(--color-star); } /* ─ Methodology wrapper ─────────────────────────────────────────────── */ .roi-meth-wrap { margin-top: var(--space-6); } @media (min-width: 1024px) { .roi-meth-wrap { margin-top: var(--space-8); } } .roi-meth-wrap__inner { max-width: calc(var(--space-24) * 10); } /* ─ Mobile ───────────────────────────────────────────────────────────── */ @media (max-width: 639px) { .roi-picker { gap: var(--space-2); } .roi-slot { height: calc(var(--space-8) + var(--space-1)); font-size: var(--font-size-xs); } .roi-cards { padding-block: var(--space-4); gap: var(--space-3); grid-template-columns: 1fr; } .roi-card__years { font-size: var(--font-size-2xl); } .roi-zone__label, .roi-zone__bound { display: none; } .roi-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .roi-table th, .roi-table td { font-size: var(--font-size-xs); padding: var(--space-2); min-width: calc(var(--space-24) + var(--space-1)); } .roi-timeline-section, .roi-details-section { padding: var(--space-4); } .roi-chart { grid-template-columns: calc(var(--space-24) + var(--space-6)) 1fr; } .roi-chart__name { font-size: var(--font-size-xs); } .roi-chart__dot { width: var(--icon-size-lg); height: var(--icon-size-lg); } } /* ─ Static intro ─────────────────────────────────────────────────────── */ .roi-intro { padding-block: var(--space-5); border-bottom: var(--border-width) solid var(--color-border); } .roi-intro__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin: 0 0 var(--space-3); } .roi-intro__text:last-child { margin-bottom: 0; } /* ─ Dynamic narrative ─────────────────────────────────────────────────── */ .roi-narrative { background: var(--color-surface-alt); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); margin-top: var(--space-6); } @media (min-width: 1024px) { .roi-narrative { margin-top: var(--space-8); } } .roi-narrative__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin: 0; } /* ─ FAQ ───────────────────────────────────────────────────────────────── */ .roi-faq-section { margin-top: 0; } /* ─ Empty state — real UI shell with dash placeholders ───────────────── */ .roi-skeleton { margin-top: var(--space-5); } /* Muted color for placeholder values (—, "Add a college above", etc.) */ .roi-skeleton__val { color: var(--color-text-muted); } /* "Add a college above to see the timeline" prompt */ .roi-skeleton__prompt { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-2); } /* ===================================================================== COLLEGE COST CALCULATOR — /tools/college-cost-calculator/ ===================================================================== */ /* ── Form section (inside profile-main) ──────────────────────────────── */ .cost-form { background: var(--color-white); border-radius: var(--radius-lg); border: var(--border-width) solid var(--color-border); padding: var(--space-6); scroll-margin-top: var(--space-20); } /* ── Main inputs row — mobile-first: stacked → row at 640px ─────────── */ .cost-form__row { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); } @media (min-width: 640px) { .cost-form__row { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end; } } .cost-form__field { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; } @media (min-width: 640px) { .cost-form__field { flex: 1 1 calc(var(--space-24) * 2 + var(--space-2)); width: auto; } } .cost-form__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } .cost-form__input-wrap { display: flex; align-items: stretch; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-white); overflow: hidden; transition: border-color var(--transition-fast); } .cost-form__input-wrap:focus-within { border-color: var(--color-primary); } .cost-form__prefix { display: flex; align-items: center; padding: 0 var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); background: var(--color-surface-alt); border-right: var(--border-width) solid var(--color-border-strong); flex-shrink: 0; } .cost-form__input { flex: 1; border: none; outline: none; background: transparent; padding: var(--space-3); font-family: inherit; font-size: var(--font-size-base); color: var(--color-text); min-width: 0; -moz-appearance: textfield; } .cost-form__input::-webkit-outer-spin-button, .cost-form__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cost-form__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0; line-height: var(--line-height-base); } /* Full-width field (state row) — stays full on desktop too */ .cost-form__field--full { width: 100%; flex: 1 1 100%; } .cost-form__select--full { width: 100%; } /* Required asterisk */ .cost-form__required { color: var(--color-error); margin-left: var(--space-0-5); } /* Full-width submit button */ .cost-form__submit--full { width: 100%; justify-content: center; margin-top: var(--space-2); } /* Divider between form and results */ .cost-form__divider { border: none; border-top: var(--border-width) solid var(--color-border); margin-top: var(--space-8); margin-bottom: var(--space-8); } /* ── Optional filters row ────────────────────────────────────────────── */ .cost-form__filters { display: flex; gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); flex-wrap: wrap; align-items: flex-end; } .cost-form__filter { display: flex; flex-direction: column; gap: var(--space-1); } .cost-form__filter-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .cost-form__select { width: 100%; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2-5) var(--space-3); font-family: inherit; font-size: var(--font-size-sm); color: var(--color-text); background: var(--color-white); cursor: pointer; } .cost-form__select:focus { outline: none; border-color: var(--color-primary); } /* ── Results section ─────────────────────────────────────────────────── */ .cost-results { scroll-margin-top: var(--space-20); margin-top: var(--space-8); } .cost-results__header { margin-bottom: var(--space-5); } .cost-results__count { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-1); } .cost-results__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; } .cost-results__meta-note { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-0-5); } .cost-results__section-label { margin-top: var(--space-10); margin-bottom: var(--space-5); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border); } .cost-results__section-label > span { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text); } .cost-results__section-note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; line-height: var(--line-height-base); } /* ── Per-card fit badge + wrapper ────────────────────────────────────── */ .cost-card-wrap { display: flex; flex-direction: column; } .cost-card-wrap .card-college { flex: 1; } .cost-fit { display: inline-flex; align-items: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); padding: var(--space-0-75) var(--space-2-5); border-radius: var(--radius-full); margin-bottom: var(--space-2); align-self: flex-start; white-space: nowrap; } .cost-fit--under { background: var(--color-roi-excellent-bg); color: var(--color-roi-excellent-text); } .cost-fit--over { background: var(--color-tag-forprofit-bg); color: var(--color-tag-forprofit-text); } /* ── Empty / no-results state ────────────────────────────────────────── */ .cost-empty { padding: var(--space-12) var(--space-4); text-align: center; scroll-margin-top: var(--space-20); } .cost-empty__text { font-size: var(--font-size-base); color: var(--color-text-muted); max-width: calc(var(--space-24) * 5); margin: 0 auto; line-height: var(--line-height-relaxed); } /* ── Filter tabs ─────────────────────────────────────────────────────── */ .cost-filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .cost-filter-tab { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-full); border: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .cost-filter-tab:hover { border-color: var(--color-primary); color: var(--color-primary); } .cost-filter-tab--active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); font-weight: var(--font-weight-medium); } .cost-filter-tab--active:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } .cost-filter-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-4-5); height: var(--space-4-5); padding-inline: var(--space-1); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-text) 8%, transparent); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-none); } .cost-filter-tab--active .cost-filter-tab__count { background: color-mix(in srgb, var(--color-white) 25%, transparent); } /* ── Results table ───────────────────────────────────────────────────── */ .cost-table-wrap { overflow-x: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); } .cost-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .cost-table thead th { padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-align: left; white-space: nowrap; border-bottom: var(--border-width) solid var(--color-border); } .cost-table thead th:not(.cost-table__col--school) { text-align: right; } .cost-table tbody tr { border-bottom: var(--border-width) solid var(--color-border); transition: background var(--transition-fast); } .cost-table tbody tr:last-child { border-bottom: none; } .cost-table tbody tr:hover { background: var(--color-surface-alt); } .cost-table td { padding: var(--space-3) var(--space-4); vertical-align: middle; color: var(--color-text); } .cost-table td:not(.cost-row__school) { text-align: right; white-space: nowrap; } /* Column widths */ .cost-table__col--school { width: 32%; min-width: calc(var(--space-20) * 2 + var(--space-5)); } .cost-table__col--price { width: 13%; } .cost-table__col--pocket { width: 13%; } .cost-table__col--loan { width: 12%; } .cost-table__col--emi { width: 14%; } .cost-table__col--tier { width: 11%; text-align: center !important; } /* School cell: name + location stacked */ .cost-row__school { text-align: left !important; } .cost-row__name { display: block; font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; line-height: var(--line-height-tight); } .cost-row__name:hover { text-decoration: underline; } .cost-row__loc { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-0-5); } .cost-row__price { font-weight: var(--font-weight-medium); } .cost-row__type { font-size: var(--font-size-xs); color: var(--color-text-secondary); } .cost-row__pocket { font-weight: var(--font-weight-medium); } .cost-row__loan, .cost-row__emi { color: var(--color-text-secondary); } .cost-row__none { color: var(--color-text-muted); } .cost-row__type-tag { display: block; font-size: var(--font-size-2xs); color: var(--color-text-muted); margin-top: var(--space-0-5); } /* Tier badges */ .cost-tier { display: inline-block; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); white-space: nowrap; } .cost-tier--comfortable { background: var(--color-roi-excellent-bg); color: var(--color-roi-excellent-text); } .cost-tier--manageable { background: var(--color-roi-good-bg); color: var(--color-roi-good-text); } .cost-tier--stretch { background: var(--color-tag-forprofit-bg); color: var(--color-tag-forprofit-text); } .cost-row__tier { text-align: center !important; } .cost-show-more { text-align: center; padding-top: var(--space-5); } .cost-show-more__btn { border: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding: var(--space-2-5) var(--space-6); border-radius: var(--radius-full); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .cost-show-more__btn:hover { border-color: var(--color-primary); background: var(--color-surface-alt); } .cost-results__no-match { padding: var(--space-8); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); } /* ── Sidebar-specific helpers ────────────────────────────────────────── */ .cost-sidebar__note { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0 0 var(--space-4); line-height: var(--line-height-relaxed); } .cost-sidebar__tips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .cost-sidebar__tips li { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-base); padding-left: var(--space-5); position: relative; } .cost-sidebar__tips li::before { content: '→'; position: absolute; left: 0; color: var(--color-primary); font-size: var(--font-size-xs); top: var(--border-width); } /* ── Mobile overrides (layout now mobile-first; only exceptions remain) ── */ @media (max-width: 639px) { .cost-form__filters { flex-direction: column; gap: var(--space-3); } .cost-form__filter { width: 100%; } } /* ===================================================================== CAREER PATH EXPLORER (/tools/career-path-explorer/) Block prefix: .cpe — career picker, programs panel, filters, results. ===================================================================== */ .cpe { display: flex; flex-direction: column; gap: var(--space-6); scroll-margin-top: var(--space-20); margin-top: var(--space-6); margin-bottom: var(--space-10); } @media (min-width: 1024px) { .cpe { gap: var(--space-8); } } /* ── Career picker ───────────────────────────────────────────────────── */ .cpe-picker { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); } .cpe-picker__label { display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--space-3); } .cpe-picker__search { position: relative; } .cpe-picker__search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: var(--icon-size); height: var(--icon-size); color: var(--color-text-muted); pointer-events: none; } .cpe-picker__input { width: 100%; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10); font-family: inherit; font-size: var(--font-size-base); color: var(--color-text); background: var(--color-white); } .cpe-picker__input:focus { outline: none; border-color: var(--color-primary); } .cpe-picker__results { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-dropdown); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); max-height: calc(var(--space-20) * 4); overflow-y: auto; } .cpe-picker__opt { display: flex; flex-direction: column; gap: var(--space-0-5); width: 100%; text-align: left; background: none; border: none; border-bottom: var(--border-width) solid var(--color-divider); padding: var(--space-2-5) var(--space-3); cursor: pointer; font-family: inherit; } .cpe-picker__opt:last-child { border-bottom: none; } .cpe-picker__opt:hover, .cpe-picker__opt.is-active { background: var(--color-surface-alt); } .cpe-picker__opt-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .cpe-picker__opt-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); } .cpe-picker__empty { padding: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); } .cpe-picker__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2); } /* ── Category chips ──────────────────────────────────────────────────── */ .cpe-cat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .cpe-cat-chip { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; border: var(--border-width) solid transparent; transition: filter var(--transition-fast); } .cpe-cat-chip:hover { filter: brightness(0.95); } .cpe-cat-chip.is-active { outline: var(--border-width-strong) solid var(--color-primary); outline-offset: var(--border-width); } .cpe-cat-chip__count { font-size: var(--font-size-2xs); opacity: 0.75; } .cpe-cat-chip--stem { background: var(--color-cat-stem-bg); color: var(--color-cat-stem-text); } .cpe-cat-chip--health { background: var(--color-cat-health-bg); color: var(--color-cat-health-text); } .cpe-cat-chip--business { background: var(--color-cat-business-bg); color: var(--color-cat-business-text); } .cpe-cat-chip--humanities { background: var(--color-cat-humanities-bg); color: var(--color-cat-humanities-text); } .cpe-cat-chip--social { background: var(--color-cat-social-bg); color: var(--color-cat-social-text); } .cpe-cat-chip--trades { background: var(--color-cat-trades-bg); color: var(--color-cat-trades-text); } /* ── Notice / empty messages ─────────────────────────────────────────── */ .cpe-notice { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-3) 0 0; } .cpe-notice--block { background: var(--color-surface-alt); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-5); text-align: center; margin: var(--space-6) 0 0; } .cpe-notice--block p { margin: 0; } .cpe-notice a { color: var(--color-primary); } /* ── Browse careers (empty state) ────────────────────────────────────── */ .cpe-browse { scroll-margin-top: var(--space-16); } .cpe-browse__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-4); } .cpe-career-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); } .cpe-career-link { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); } .cpe-career-link:hover { border-color: var(--color-primary); background: var(--color-surface-alt); } .cpe-career-link__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); } .cpe-career-link__wage { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; } /* ── Career overview: two-column (programs left · career box right) ──── */ .cpe-overview { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } /* ── Selected career head — mirrors the profile-page navy sidebar card ─ */ .cpe-career-head { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); background: var(--color-primary); border: var(--border-width) solid var(--color-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--color-white); } .cpe-career-head__main { width: 100%; } .cpe-career-head__eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-on-dark-text-dim); margin: 0 0 var(--space-1); } .cpe-career-head__name { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-white); margin: 0; line-height: var(--line-height-tight); } .cpe-career-head__meta { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-on-dark-text-soft); margin: var(--space-2) 0 0; } .cpe-career-head__stats { display: flex; flex-direction: column; gap: 0; } .cpe-career-head__stat { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-on-dark-divider); } .cpe-career-head__stat:last-child { border-bottom: 0; padding-bottom: 0; } .cpe-career-head__stat dt { font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-on-dark-text-dim); } .cpe-career-head__stat dd { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-white); margin: 0; text-align: right; } .cpe-career-head__profile { display: inline-block; align-self: flex-start; margin-top: var(--space-1); padding: var(--space-2) var(--space-4); background: var(--color-white); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .cpe-career-head__profile:hover, .cpe-career-head__profile:focus-visible { background: var(--color-accent); color: var(--color-white); } /* ── Programs panel ──────────────────────────────────────────────────── */ .cpe-programs { background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); } .cpe-programs__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--color-text); margin: 0 0 var(--space-2); } .cpe-programs__intro { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-normal); margin: 0 0 var(--space-4); } .cpe-program-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .cpe-program-chip { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); background: var(--color-offwhite); text-decoration: none; transition: border-color var(--transition-fast); } .cpe-program-chip:hover { border-color: var(--color-primary); } .cpe-program-chip__name { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-tag-text); } .cpe-program-chip__earn { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* ── Filter bar ──────────────────────────────────────────────────────── */ .cpe-filters { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); scroll-margin-top: var(--space-16); } .cpe-filters__field { display: flex; flex-direction: column; gap: var(--space-1); } .cpe-filters__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); } .cpe-filters__select { width: 100%; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2-5) var(--space-3); font-family: inherit; font-size: var(--font-size-sm); color: var(--color-text); background: var(--color-white); cursor: pointer; } .cpe-filters__select:focus { outline: none; border-color: var(--color-primary); } .cpe-filters__submit { margin-top: var(--space-2); } /* ── Results ─────────────────────────────────────────────────────────── */ /* .cpe-results spacing inherits from .cpe flex gap (styleguide: --space-6 / --space-8). */ .cpe-results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); } .cpe-results__count { font-size: var(--font-size-sm); color: var(--color-text); margin: 0; } .cpe-clear { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-cat-trades-bg); color: var(--color-cat-trades-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-decoration: none; transition: background var(--transition-fast); } .cpe-clear:hover, .cpe-clear:focus-visible { background: var(--color-cat-trades-bg-hover); } .cpe-table-wrap { overflow-x: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); } .cpe-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); min-width: calc(var(--space-20) * 8); } .cpe-table thead th { padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-align: left; white-space: nowrap; border-bottom: var(--border-width) solid var(--color-border); } .cpe-table tbody tr { background: var(--color-white); border-bottom: var(--border-width) solid var(--color-border); cursor: pointer; transition: background var(--transition-fast); } .cpe-table tbody tr:last-child { border-bottom: none; } .cpe-table tbody tr:hover { background: var(--color-surface-alt); } .cpe-table td { padding: var(--space-3) var(--space-4); vertical-align: middle; color: var(--color-text); } .cpe-table__col--school { width: 34%; min-width: calc(var(--space-24) * 2 + var(--space-2)); } .cpe-table__col--program { width: 28%; min-width: calc(var(--space-20) * 2); } .cpe-table__col--cred { width: 14%; } .cpe-table__col--price { width: 14%; } .cpe-table__col--state { width: 10%; } .cpe-row__name { display: block; font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; line-height: var(--line-height-tight); } .cpe-row__name:hover { text-decoration: underline; } .cpe-row__loc { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-0-5); } .cpe-row__more { display: inline-block; margin-left: var(--space-1); font-size: var(--font-size-2xs); color: var(--color-text-muted); white-space: nowrap; } .cpe-row__cred { color: var(--color-text-secondary); } .cpe-row__price { font-weight: var(--font-weight-medium); } .cpe-row__state { color: var(--color-text-secondary); } /* ── Load more — uses the site .btn.btn--primary style ───────────────── */ .cpe-loadmore { text-align: center; margin-top: var(--space-2); } .cpe-loadmore__btn:disabled { opacity: var(--opacity-disabled); cursor: default; } /* ── Tablet and up ───────────────────────────────────────────────────── */ @media (min-width: 640px) { .cpe-career-grid { grid-template-columns: repeat(2, 1fr); } .cpe-filters { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cpe-career-grid { grid-template-columns: repeat(3, 1fr); } .cpe-filters { grid-template-columns: repeat(4, 1fr); } /* Two-column career overview: programs left, navy card right. */ .cpe-overview { grid-template-columns: minmax(0, 1fr) calc(var(--space-20) * 4 + var(--space-5)); align-items: start; } .cpe-overview .cpe-programs { grid-column: 1; grid-row: 1; } .cpe-overview .cpe-career-head { grid-column: 2; grid-row: 1; } } /* ============================================================================= COLLEGE MATCH QUIZ — /tools/college-match-quiz/ ============================================================================= */ .cmq-form { scroll-margin-top: var(--space-20); } /* ── Question section — each question is its own card ────────────────── */ .cmq-q { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); margin: 0 0 var(--space-4) 0; padding: var(--space-6); scroll-margin-top: var(--space-20); transition: border-color var(--transition-fast); } .cmq-q:last-of-type { margin-bottom: var(--space-5); } /* Unanswered required question, flagged on submit */ .cmq-q--error { border-color: var(--color-error); } .cmq-q__legend { display: block; width: 100%; margin-bottom: var(--space-4); padding: 0; } .cmq-q__num { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-accent); margin-bottom: var(--space-1); } /* "Answered" tick — revealed by JS once the question is answered */ .cmq-q__tick { display: none; margin-left: var(--space-2); color: var(--color-success); } .cmq-q--answered .cmq-q__tick { display: inline; } /* Inline validation message for required questions */ .cmq-q__error { margin: var(--space-3) 0 0 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-error); } .cmq-q__title { display: block; font-size: var(--font-size-lg); color: var(--color-secondary); line-height: var(--line-height-snug); } .cmq-q__hint { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-base); margin-top: var(--space-1); } /* ── Option tiles ────────────────────────────────────────────────────── */ .cmq-options { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 640px) { .cmq-options--2 { grid-template-columns: repeat(2, 1fr); } .cmq-options--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cmq-options--3 { grid-template-columns: repeat(3, 1fr); } } .cmq-option { display: flex; align-items: flex-start; gap: var(--space-2-5); padding: var(--space-3-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-white); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .cmq-option:hover { border-color: var(--color-primary); } .cmq-option input { flex-shrink: 0; margin: var(--space-0-5) 0 0 0; accent-color: var(--color-primary); } .cmq-option__body { display: flex; flex-direction: column; gap: var(--space-0-5); } .cmq-option__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .cmq-option__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-base); } .cmq-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-ghost); } .cmq-option:has(input:checked) .cmq-option__label { color: var(--color-primary); } .cmq-option:has(input:focus-visible) { outline: var(--border-width-strong) solid var(--color-primary-ring); } /* ── State select ────────────────────────────────────────────────────── */ .cmq-select { width: 100%; padding: var(--space-3) var(--space-3-5); font-family: inherit; font-size: var(--font-size-base); color: var(--color-text); background: var(--color-white); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); } .cmq-select:focus { outline: none; border-color: var(--color-primary); } /* ── Submit ──────────────────────────────────────────────────────────── */ .cmq-submit { width: 100%; justify-content: center; margin-top: var(--space-2); scroll-margin-top: var(--space-20); } /* Scroll target for the post-submit jump to results. */ .cmq-results, .cmq-empty { scroll-margin-top: var(--space-20); } /* Section gap inherits from .profile-main (styleguide: --space-6 / --space-8). */ /* ── Empty state ─────────────────────────────────────────────────────── */ .cmq-empty { text-align: center; padding: var(--space-10) var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-lg); } .cmq-empty__text { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-normal); } /* ── Results ─────────────────────────────────────────────────────────── */ .cmq-results__header { margin-bottom: var(--space-5); } .cmq-results__title { font-size: var(--font-size-2xl); color: var(--color-secondary); margin: 0 0 var(--space-1) 0; } .cmq-results__count { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); } .cmq-result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .cmq-result { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } .cmq-result--top { border-top: var(--border-width-strong) solid var(--color-primary); } .cmq-result__rank { display: flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-surface-alt); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .cmq-result--top .cmq-result__rank { background: var(--color-primary); color: var(--color-text-on-primary); } .cmq-result__body { flex: 1; min-width: 0; } .cmq-result__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; line-height: var(--line-height-snug); } .cmq-result__name:hover { color: var(--color-secondary); } .cmq-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); } .cmq-result__loc { font-size: var(--font-size-xs); color: var(--color-text-muted); } .cmq-result__type { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-tag-text); background: var(--color-tag-bg); padding: var(--space-0-75) var(--space-2); border-radius: var(--radius-sm); } .cmq-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin: var(--space-3) 0 0 0; } @media (min-width: 640px) { .cmq-stats { grid-template-columns: repeat(4, 1fr); } } .cmq-stat { display: flex; flex-direction: column; margin: 0; padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); } .cmq-stat dt { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); line-height: var(--line-height-snug); } /* margin-top:auto pins every value to the bottom of its cell, so values stay aligned even when a label wraps to two lines. */ .cmq-stat dd { margin: 0; margin-top: auto; padding-top: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } /* ── Match score ─────────────────────────────────────────────────────── */ .cmq-result__score { flex-shrink: 0; padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); } .cmq-score__pct { font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); color: var(--color-primary); line-height: var(--line-height-none); } .cmq-score__pct-sign { font-size: var(--font-size-lg); font-weight: var(--font-weight-regular); } .cmq-score__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-top: var(--space-1); } .cmq-score__bar { height: var(--chart-bar-track); background: var(--color-divider-soft); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-2); } .cmq-score__fill { display: block; height: 100%; background: var(--color-score-fill); border-radius: var(--radius-full); } .cmq-subscores { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2-5); } .cmq-subscore { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text); } .cmq-subscore__k { color: var(--color-text-muted); font-weight: var(--font-weight-regular); } /* ── Show more ───────────────────────────────────────────────────────── */ .cmq-show-more { text-align: center; margin-top: var(--space-5); } .cmq-sidebar__note { font-size: var(--font-size-xs); color: var(--color-on-dark-text-soft); line-height: var(--line-height-normal); margin: 0 0 var(--space-4) 0; } /* ── Desktop: horizontal result row ──────────────────────────────────── */ @media (min-width: 640px) { .cmq-result { flex-direction: row; align-items: flex-start; } .cmq-result__score { width: var(--cmq-score-col-w); padding-top: 0; padding-left: var(--space-5); border-top: none; } } /* ============================================================================= TRUST PAGES — /methodology/ and /data-sources/ ============================================================================= */ .trust-page { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-8); } /* ── Tile grid (principles, sub-scores) ──────────────────────────────── */ .trust-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4-5); /* mobile: 18px */ margin-top: var(--space-5); } @media (min-width: 640px) { .trust-grid { gap: var(--space-5); } /* tablet: 20px */ } @media (min-width: 1024px) { .trust-grid { gap: var(--space-6); } /* desktop: 24px */ } /* Paragraph following a tile grid or sources grid — match the gap above the grid. */ .trust-grid + p, .trust-sources + p { margin-top: var(--space-5); } /* Two section cards side by side (stacks on mobile/tablet). */ .trust-row { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 1024px) { .trust-row { grid-template-columns: 1fr 1fr; } } @media (min-width: 640px) { .trust-grid--2, .trust-grid--3, .trust-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .trust-grid--3 { grid-template-columns: repeat(3, 1fr); } .trust-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* Color-rotation modifier — applies the 5-color palette used on the homepage tools-bento and about-page sources grid. Each tile picks up a soft tinted background via color-mix (35% tint / 65% white). Same first-and-last swap (light-green and pink at the ends) so the row endings don't read as visually similar greens. Works on any trust- grid variant (--2 / --3 / --4); extra rules just don't apply when the grid has fewer than 5 items. */ .trust-grid--colored .trust-tile:nth-child(1) { background: color-mix(in srgb, var(--color-cat-business-bg) 35%, var(--color-white)); } .trust-grid--colored .trust-tile:nth-child(2) { background: color-mix(in srgb, var(--color-cat-humanities-bg) 35%, var(--color-white)); } .trust-grid--colored .trust-tile:nth-child(3) { background: color-mix(in srgb, var(--color-cat-social-bg) 35%, var(--color-white)); } .trust-grid--colored .trust-tile:nth-child(4) { background: color-mix(in srgb, var(--color-cat-health-bg) 35%, var(--color-white)); } .trust-grid--colored .trust-tile:nth-child(5) { background: color-mix(in srgb, var(--color-cat-trades-bg) 35%, var(--color-white)); } /* Link-tile hover inside a colored grid — keep the tint, just shift the border instead of overriding the bg to white. */ .trust-grid--colored .trust-tile--link:hover, .trust-grid--colored .trust-tile--link:focus-visible { background: inherit; border-color: var(--color-primary); } .trust-tile { padding: var(--space-4); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); } .trust-tile__title { font-size: var(--font-size-lg); color: var(--color-secondary); margin: 0 0 var(--space-2) 0; } .trust-tile__text { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-normal); margin: 0; } /* ── Tables ──────────────────────────────────────────────────────────── */ .trust-table-wrap { margin-top: var(--space-4); overflow-x: auto; } .trust-table-wrap .trust-table { margin-top: 0; } .trust-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); font-size: var(--font-size-sm); } .trust-table th, .trust-table td { text-align: left; padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); line-height: var(--line-height-normal); } .trust-table thead th { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); background: var(--color-surface-alt); white-space: nowrap; } .trust-table tbody tr:last-child td { border-bottom: none; } .trust-table--center th:not(:first-child), .trust-table--center td:not(:first-child) { text-align: center; } /* ── Limitation list ─────────────────────────────────────────────────── */ .trust-list { margin: var(--space-4) 0 0 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2-5); } .trust-list li { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-normal); } /* ── Source blocks ───────────────────────────────────────────────────── */ .trust-sources { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); } /* Grid variant — 3-col responsive grid used on the About page. Each card gets a tinted background that mirrors the homepage tools-bento palette, with the first and last positions intentionally swapped (light-green and pink) so the row endings don't read as visually similar greens. */ .trust-sources--grid { display: grid; flex-direction: unset; grid-template-columns: 1fr; gap: var(--space-4-5); /* mobile: 18px */ } @media (min-width: 640px) { .trust-sources--grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); /* tablet: 20px */ } } @media (min-width: 1024px) { .trust-sources--grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); /* desktop: 24px */ } } .trust-sources--grid .trust-source:nth-child(1) { background: color-mix(in srgb, var(--color-cat-business-bg) 35%, var(--color-white)); } .trust-sources--grid .trust-source:nth-child(2) { background: color-mix(in srgb, var(--color-cat-humanities-bg) 35%, var(--color-white)); } .trust-sources--grid .trust-source:nth-child(3) { background: color-mix(in srgb, var(--color-cat-social-bg) 35%, var(--color-white)); } .trust-sources--grid .trust-source:nth-child(4) { background: color-mix(in srgb, var(--color-cat-health-bg) 35%, var(--color-white)); } .trust-sources--grid .trust-source:nth-child(5) { background: color-mix(in srgb, var(--color-cat-trades-bg) 35%, var(--color-white)); } .trust-source { padding: var(--space-5); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); } .trust-source__name { font-size: var(--font-size-xl); color: var(--color-secondary); margin: 0; } .trust-source__publisher { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: var(--space-1) 0 var(--space-4) 0; } .trust-source__detail { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); } .trust-source__detail dt { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); } .trust-source__detail dd { margin: 0 0 var(--space-3) 0; font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-normal); } .trust-source__detail dd:last-of-type { margin-bottom: 0; } .trust-source__link { display: inline-block; margin-top: var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); } .trust-source__link:hover { color: var(--color-accent); } /* ── AI transparency callout ─────────────────────────────────────────── */ .trust-callout { margin-top: var(--space-4); padding: var(--space-5); background: var(--color-primary-ghost); border-radius: var(--radius-md); border-top: var(--border-width-strong) solid var(--color-primary); } .trust-callout p { margin: 0 0 var(--space-3) 0; line-height: var(--line-height-normal); } .trust-callout p:last-child { margin-bottom: 0; } /* ── Cross-link card (navy CTA to the sibling trust page) ────────────── */ .trust-crosslink { display: block; padding: var(--space-6); background: var(--color-primary); border-radius: var(--radius-lg); text-decoration: none; transition: background var(--transition-fast); } .trust-crosslink:hover { background: var(--color-hero-grad-top); } .trust-crosslink__label { display: block; font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-on-dark-text-dim); } .trust-crosslink__title { display: block; margin-top: var(--space-1); font-size: var(--font-size-xl); color: var(--color-text-on-primary); line-height: var(--line-height-snug); } .trust-crosslink__text { display: block; margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-on-dark-text-strong); line-height: var(--line-height-normal); } .trust-crosslink__cta { display: inline-block; margin-top: var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-on-primary); } /* ── "Last updated" line + methodology contact line ─────────────────── */ .trust-updated { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); } .trust-contact { margin: var(--space-5) 0 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-normal); } .trust-contact a { color: var(--color-primary); } .trust-contact a:hover { color: var(--color-accent); } /* ============================================================================= SAT & ACT COLLEGE FINDER — /tools/sat-act-college-finder/ ============================================================================= */ .satf-form { background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); scroll-margin-top: var(--space-20); } .satf-form__lead { margin: 0 0 var(--space-5) 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-normal); } /* Mobile-first: fields stack, then sit in a row at 640px. */ .satf-form__row { display: flex; flex-direction: column; gap: var(--space-4); } @media (min-width: 640px) { .satf-form__row { flex-direction: row; flex-wrap: wrap; } } .satf-field { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; } @media (min-width: 640px) { .satf-field { flex: 1 1 calc(var(--space-20) * 2); width: auto; } } .satf-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } .satf-label__opt { font-weight: var(--font-weight-regular); color: var(--color-text-muted); } .satf-label__req { color: var(--color-error); margin-left: var(--space-0-5); } .satf-form__error { margin: var(--space-3) 0 0; } .satf-select { width: 100%; padding: var(--space-3) var(--space-8) var(--space-3) var(--space-3-5); font-family: inherit; font-size: var(--font-size-base); color: var(--color-text); background: var(--color-white); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); } .satf-select:focus { outline: none; border-color: var(--color-primary); } .satf-form__submit { width: 100%; justify-content: center; margin-top: var(--space-5); } /* ── Empty state ─────────────────────────────────────────────────────── */ .satf-empty { margin-top: var(--space-5); text-align: center; padding: var(--space-10) var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-lg); scroll-margin-top: var(--space-20); } .satf-empty__text { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-normal); } .satf-empty__text a { color: var(--color-primary); } /* ── Results ─────────────────────────────────────────────────────────── */ .satf-results { margin-top: var(--space-5); scroll-margin-top: var(--space-20); } /* Section gap inherits from .profile-main (styleguide: --space-6 / --space-8). */ .satf-results__header { margin-bottom: var(--space-5); } .satf-results__title { font-size: var(--font-size-2xl); color: var(--color-secondary); margin: 0 0 var(--space-1) 0; } .satf-results__count { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-normal); } .satf-results__note { margin: var(--space-1) 0 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); } .satf-results__no-match { margin-top: var(--space-5); font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: center; } /* ── Filter tabs ─────────────────────────────────────────────────────── */ .satf-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .satf-tab { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-3-5); font-family: inherit; font-size: var(--font-size-sm); color: var(--color-text-secondary); background: var(--color-white); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-full); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .satf-tab:hover { border-color: var(--color-primary); } .satf-tab--active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); } .satf-tab__count { font-size: var(--font-size-xs); color: var(--color-text-muted); } .satf-tab--active .satf-tab__count { color: var(--color-on-dark-text-strong); } /* ── Results table ───────────────────────────────────────────────────── */ .satf-table-wrap { overflow-x: auto; } .satf-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .satf-table thead th { text-align: left; padding: var(--space-3); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); background: var(--color-surface-alt); white-space: nowrap; } .satf-table thead th:not(.satf-table__col--school) { text-align: center; } .satf-table tbody tr { border-bottom: var(--border-width) solid var(--color-border); } .satf-table tbody tr:last-child { border-bottom: none; } .satf-table tbody tr:hover { background: var(--color-surface-alt); } .satf-table td { padding: var(--space-3); vertical-align: middle; } .satf-table td:not(.satf-row__school) { text-align: center; } .satf-table__col--school { width: 46%; min-width: calc(var(--space-24) * 2 + var(--space-2)); } .satf-table__col--range { width: 20%; } .satf-table__col--acc { width: 16%; } .satf-table__col--fit { width: 18%; } .satf-row__name { font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; } .satf-row__name:hover { color: var(--color-secondary); } .satf-row__loc { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-0-5); } .satf-row__type { display: inline-block; margin-top: var(--space-1); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-tag-text); background: var(--color-tag-bg); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-sm); } .satf-row__range { font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; } .satf-row__acc { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } /* ── Fit badge ───────────────────────────────────────────────────────── */ .satf-fit { display: inline-block; padding: var(--space-0-75) var(--space-2-5); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); border-radius: var(--radius-full); } .satf-fit--safety { background: var(--color-tier-1-bg); color: var(--color-tier-1-text); } .satf-fit--target { background: var(--color-tier-3-bg); color: var(--color-tier-3-text); } .satf-fit--reach { background: var(--color-tier-5-bg); color: var(--color-tier-5-text); } /* ── Show more ───────────────────────────────────────────────────────── */ .satf-show-more { text-align: center; margin-top: var(--space-5); } .satf-sidebar__note { font-size: var(--font-size-xs); color: var(--color-on-dark-text-soft); line-height: var(--line-height-normal); margin: 0 0 var(--space-4) 0; } /* ============================================================================= COLLEGES NEAR vertical — /colleges-near/ Own class namespace (cn-*), independent of the States vertical (state-*). Card styling is intentionally a copy of the state-card look so the two verticals can diverge later without affecting each other. ============================================================================= */ /* ── Hub grid (one card per state) ───────────────────────────────────── */ .cn-hub { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-10) 0 var(--space-16); } @media (min-width: 640px) { .cn-hub { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .cn-hub { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } } /* ── Per-state page — layout wrapper (sections themselves use the shared .profile-section--card styleguide rules) ──────────────────── */ .cn-state-page { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-10) 0 var(--space-16); } @media (min-width: 1024px) { .cn-state-page { gap: var(--space-8); } } /* ── "Where the colleges are" horizontal bar chart ───────────────────── */ .cn-chart { display: flex; flex-direction: column; gap: var(--space-2-5); } .cn-chart__row { display: flex; align-items: center; gap: var(--space-3); } .cn-chart__label { flex: 0 0 96px; font-size: var(--font-size-sm); color: var(--color-text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 640px) { .cn-chart__label { flex-basis: 130px; } } .cn-chart__track { flex: 1; height: var(--chart-bar-track-lg); background: var(--color-divider-soft); border-radius: var(--radius-full); overflow: hidden; } .cn-chart__bar { display: block; height: 100%; background: var(--color-score-fill); border-radius: var(--radius-full); } .cn-chart__value { flex: 0 0 auto; min-width: 2ch; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); font-variant-numeric: tabular-nums; } /* ── City cards (rich — name, blurb, CTA) ────────────────────────────── */ .cn-city-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .cn-city-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cn-city-grid { grid-template-columns: repeat(3, 1fr); } } .cn-city-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .cn-city-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .cn-city-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .cn-city-card__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-snug); } .cn-city-card__count { flex: 0 0 auto; font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; } .cn-city-card__blurb { margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-secondary); } .cn-city-card__blurb a { color: var(--color-primary); } .cn-city-card__blurb a:hover { color: var(--color-accent); } .cn-city-card__cta { margin-top: auto; padding-top: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; } .cn-city-card__cta:hover { color: var(--color-accent); } /* ── Compact "more cities" list ──────────────────────────────────────── */ .cn-citylist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } @media (min-width: 640px) { .cn-citylist { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .cn-citylist { grid-template-columns: repeat(4, 1fr); } } .cn-citylist a { display: block; text-decoration: none; } .cn-citylist__name { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-primary); line-height: var(--line-height-snug); } .cn-citylist a:hover .cn-citylist__name { color: var(--color-accent); } .cn-citylist__count { display: block; margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); } /* Accent rule between the city name and the count — 85% of the item width. */ .cn-citylist__count::before { content: ""; display: block; width: 85%; margin-bottom: var(--space-1); border-top: var(--border-width) solid var(--color-border); } .cn-empty { padding: var(--space-10) var(--space-4); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); } /* Data-driven lead paragraph — sits at the top of the first section card. */ /* Cross-link box → the deeper state guide. */ .cn-statelink { padding: var(--space-6); text-align: center; background: var(--color-primary); border: var(--border-width) solid var(--color-primary); border-radius: var(--radius-lg); } .cn-statelink__text { max-width: 60ch; margin: 0 auto var(--space-4) auto; font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-on-dark-text-bright); } /* CTA on the navy panel: white pill with primary-blue text. On hover the button fills with accent red + white text — pops against the navy panel and matches the site's primary→accent hover language. */ .cn-statelink__cta { display: inline-flex; align-items: center; justify-content: center; padding: var(--btn-padding-y) var(--space-5); font-family: inherit; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); text-transform: capitalize; border: var(--border-width-strong) solid var(--color-white); border-radius: var(--radius-md); text-align: center; text-decoration: none; cursor: pointer; background: var(--color-white); color: var(--color-primary); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .cn-statelink__cta:hover, .cn-statelink__cta:focus-visible { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); } /* ============================================================================= COLLEGE COST HUB — /college-cost/ ============================================================================= */ .cchub-page { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-8); margin-bottom: var(--space-10); } @media (min-width: 1024px) { .cchub-page { gap: var(--space-8); } } /* Two ranked-list cards side by side (stacks below desktop). */ .cchub-row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 1024px) { .cchub-row { grid-template-columns: 1fr 1fr; } } /* ── Calculator cards (2-up) ─────────────────────────────────────────── */ .cchub-tools { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); } @media (min-width: 640px) { .cchub-tools { grid-template-columns: repeat(2, 1fr); } } /* 4-up tools grid (used by Related Tools — sits outside a section card so the 4 tool-cards span the full content width on desktop). */ @media (min-width: 1024px) { .cchub-tools--four { grid-template-columns: repeat(4, 1fr); } } /* ── Ranked-list table ───────────────────────────────────────────────── */ .cchub-table-wrap { margin-top: var(--space-4); overflow-x: auto; } .cchub-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .cchub-table th, .cchub-table td { padding: var(--space-3); text-align: left; } .cchub-table thead th { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); background: var(--color-surface-alt); white-space: nowrap; } .cchub-table td { border-bottom: var(--border-width) solid var(--color-border); vertical-align: middle; } .cchub-table tbody tr:last-child td { border-bottom: none; } .cchub-table tbody tr:hover { background: var(--color-surface-alt); } .cchub-table .cchub-table__rank { width: var(--space-8); text-align: center; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .cchub-table .cchub-table__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .cchub-table td.cchub-table__num { font-weight: var(--font-weight-medium); color: var(--color-secondary); } .cchub-table__name { font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; } .cchub-table__name:hover { color: var(--color-secondary); } .cchub-table__loc { display: block; margin-top: var(--space-0-5); font-size: var(--font-size-xs); color: var(--color-text-muted); } .cchub-table__unit { font-size: var(--font-size-2xs); font-weight: var(--font-weight-regular); color: var(--color-text-muted); } /* ── "Browse all" link below each table ──────────────────────────────── */ .cchub-seeall { display: block; margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; } .cchub-seeall:hover { color: var(--color-accent); } /* ===================================================================== TOOLS SHOWCASE BENTO — homepage section after "How We Score". Five tool cards in a 2-row grid: - Row 1: Compare (wider, 4/6 = 67%) + Career (narrower, 2/6 = 33%) - Row 2: Cost / ROI / SAT-ACT in equal thirds. White card surface, subtle border, no shadow, no accent bar. Hover changes only the border color (no position shift, no shadow grow). ===================================================================== */ /* ---------- SECTION HEAD WIDTH OVERRIDE ---------- The default .home-section__head is capped at 70ch, which wraps the tools-section's long question ("What are you actually trying to figure out?") to two lines. Let the head go full-width here; keep the intro constrained for readability. */ [aria-labelledby="tools-heading"] .home-section__head { max-width: none; } [aria-labelledby="tools-heading"] .home-section__intro { max-width: 60ch; margin-inline: auto; } /* ---------- GRID ---------- */ .tools-bento { display: grid; grid-template-columns: 1fr; gap: var(--space-4-5); /* mobile: 18px */ } @media (min-width: 640px) { .tools-bento { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); /* tablet: 20px */ } } @media (min-width: 1024px) { .tools-bento { grid-template-columns: repeat(6, 1fr); grid-template-areas: "compare compare compare compare career career" "cost cost roi roi satact satact"; gap: var(--space-6); /* desktop: 24px */ } .tools-bento__card--compare { grid-area: compare; } .tools-bento__card--career { grid-area: career; } .tools-bento__card--cost { grid-area: cost; } .tools-bento__card--roi { grid-area: roi; } .tools-bento__card--satact { grid-area: satact; } } /* ---------- CARD SURFACE ---------- */ .tools-bento__card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); transition: border-color 180ms ease; } @media (min-width: 1024px) { .tools-bento__card { padding: var(--space-6); } } .tools-bento__card:hover { border-color: var(--color-border-strong); } /* ---------- CARD HEAD (icon + title block) ---------- */ .tools-bento__head { display: flex; gap: var(--space-4); align-items: flex-start; } .tools-bento__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; background: var(--color-cat-stem-bg); color: var(--color-cat-stem-text); border-radius: var(--radius-md); } .tools-bento__icon svg { width: 20px; height: 20px; } /* Per-card icon tints — give each card a recognizable colored chip. Uses the same category palette as major/career cards across the site. */ .tools-bento__card--compare .tools-bento__icon { background: var(--color-cat-business-bg); color: var(--color-cat-business-text); } .tools-bento__card--career .tools-bento__icon { background: var(--color-cat-humanities-bg); color: var(--color-cat-humanities-text); } .tools-bento__card--cost .tools-bento__icon { background: var(--color-cat-social-bg); color: var(--color-cat-social-text); } .tools-bento__card--roi .tools-bento__icon { background: var(--color-cat-health-bg); color: var(--color-cat-health-text); } .tools-bento__card--satact .tools-bento__icon { background: var(--color-cat-trades-bg); color: var(--color-cat-trades-text); } /* Per-card surface tints — same hue as the icon chip but blended with white via color-mix so it's a much softer wash (35% color / 65% white). The icon chip stays at full token saturation so it still reads above the card surface. */ .tools-bento__card--compare { background: color-mix(in srgb, var(--color-cat-business-bg) 35%, var(--color-white)); } .tools-bento__card--career { background: color-mix(in srgb, var(--color-cat-humanities-bg) 35%, var(--color-white)); } .tools-bento__card--cost { background: color-mix(in srgb, var(--color-cat-social-bg) 35%, var(--color-white)); } .tools-bento__card--roi { background: color-mix(in srgb, var(--color-cat-health-bg) 35%, var(--color-white)); } .tools-bento__card--satact { background: color-mix(in srgb, var(--color-cat-trades-bg) 35%, var(--color-white)); } .tools-bento__heading { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; } .tools-bento__eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-primary); } .tools-bento__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); } .tools-bento__lede { margin: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-text-muted); line-height: var(--line-height-prose); } /* ---------- CARD BODY (sample data) ---------- */ .tools-bento__body { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; } .tools-bento__context-label { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); } .tools-bento__fallback { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text); line-height: var(--line-height-prose); } /* Big-metric block — Career, Cost, ROI, SAT/ACT. */ .tools-bento__metric { display: flex; flex-direction: column; gap: var(--space-1); } .tools-bento__metric-context { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text); line-height: var(--line-height-tight); } .tools-bento__metric-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); font-variant-numeric: tabular-nums; } .tools-bento__metric-unit { font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text-muted); } /* ---------- COMPARE CARD — two-column sample ---------- */ .tools-bento__compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--space-4); } .tools-bento__compare-col { min-width: 0; } .tools-bento__compare-name { margin-bottom: var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); word-wrap: break-word; } .tools-bento__compare-stats { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .tools-bento__compare-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-sm); } .tools-bento__compare-stats dt { color: var(--color-text-muted); font-weight: var(--font-weight-light); } .tools-bento__compare-stats dd { margin: 0; color: var(--color-secondary); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; } .tools-bento__compare-vs { align-self: center; padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } /* ---------- CTAs (outline-primary, small profile size) ---------- */ .tools-bento__cta { margin-top: var(--space-3); align-self: flex-start; padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-button); } /* ===================================================================== BROWSE BY STATE — homepage pill grid. Outlined navy chips that fill navy on hover/focus. Centered flex-wrap. Desktop shows all 50+DC; mobile caps at 12 visible pills and relies on the "View all" CTA below to surface the rest via the /states/ hub. ===================================================================== */ .home-states__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .home-states__pill { display: inline-block; padding: var(--space-2) var(--space-4); background: var(--color-white); color: var(--color-primary); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); text-decoration: none; white-space: nowrap; transition: border-color 140ms ease; } .home-states__pill:hover, .home-states__pill:focus-visible { background: var(--color-white); color: var(--color-primary); border-color: var(--color-primary); } /* Mobile cap: hide every pill past #21 so the wrap stays tidy on small screens. The "View all" CTA below the grid is the escape hatch. */ @media (max-width: 639px) { .home-states__grid > li:nth-child(n+22) { display: none; } } /* ===================================================================== TRUST INLINE BLOCK — lives inside the "Browse by State" section, below its CTA. Horizontal stats with a tiny label on the left and methodology + data-sources links at the bottom. Two thin dividers bracket the stat row. Uses on-light tokens (this is on the white section bg, not navy). ===================================================================== */ /* Trust card: tan/khaki surface, 1000px max width, rounded. The section-level divider above (.home-states__divider) is what visually separates it from the CTA, so no top-edge decorator is needed here. */ .home-trust-inline { max-width: 1000px; margin: var(--space-8) auto 0; padding: var(--space-6); background: var(--color-trust-bg); border-radius: var(--radius-xl); } @media (min-width: 1024px) { .home-trust-inline { padding: var(--space-6) var(--space-8); } } /* Section-level divider between the "View all states" CTA and the trust card below it. Sits at full section width (1300px), unlike the trust card itself which is capped at 1000px. */ .home-states__divider { margin: var(--space-10) 0 0; border: 0; border-top: var(--border-width) solid var(--color-border-strong); } @media (min-width: 1024px) { .home-states__divider { margin-top: var(--space-12); } } /* Main row: label column + stat-grid column. Stacks on mobile. */ .home-trust-inline__row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6) 0; } @media (min-width: 1024px) { .home-trust-inline__row { grid-template-columns: 160px 1fr; gap: var(--space-8); padding: var(--space-8) 0; align-items: start; } } .home-trust-inline__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); line-height: var(--line-height-tight); } /* 3 stat columns inside the right side. 1 col mobile, 3 cols at desktop. */ .home-trust-inline__stats { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 640px) { .home-trust-inline__stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } } .home-trust-inline__stat { display: flex; flex-direction: column; gap: var(--space-2); } .home-trust-inline__value { margin: 0; font-size: var(--font-size-3xl); /* Big display numbers — the one place where 600 is allowed per project rule. */ font-weight: var(--font-weight-semibold); color: var(--color-primary); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .home-trust-inline__value { font-size: var(--font-size-4xl); } } .home-trust-inline__desc { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text); line-height: var(--line-height-prose); } /* Bottom row — links + small refresh stamp. */ .home-trust-inline__links { margin: 0; padding: var(--space-5) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); font-size: var(--font-size-sm); color: var(--color-text-muted); } .home-trust-inline__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-weight: var(--font-weight-medium); text-decoration: none; transition: color 120ms ease; } .home-trust-inline__link:hover, .home-trust-inline__link:focus-visible { color: var(--color-accent); } .home-trust-inline__link-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-full); transition: background 120ms ease; } .home-trust-inline__link:hover .home-trust-inline__link-icon, .home-trust-inline__link:focus-visible .home-trust-inline__link-icon { background: var(--color-accent); } .home-trust-inline__link-icon svg { width: 14px; height: 14px; } .home-trust-inline__link-sep { display: inline-block; width: var(--border-width); height: 16px; background: var(--color-border-strong); } .home-trust-inline__updated { margin-left: auto; font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-text-muted); } /* ===================================================================== PICK WHAT YOU WANT TO STUDY — two-row card grid below the states + trust card. Top row: 6 major-category cards. Bottom row: 6 top programs. Each card = tag pill + themed icon + name + brief descriptor + full-width CTA. Mirrors the reference design but uses the brand navy + category palette instead of green-on-green. ===================================================================== */ /* Each subsection (majors / programs / careers) gets a real H2 with its own intro paragraph. Centered to match the centered card content below. max-width caps the intro at a comfortable reading line length. */ .study-subsection__head { text-align: center; margin: 0 auto var(--space-6); max-width: 70ch; } @media (min-width: 1024px) { .study-subsection__head { margin-bottom: var(--space-8); } } .study-subsection__title { margin: 0 0 var(--space-3); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); } @media (min-width: 1024px) { .study-subsection__title { font-size: var(--font-size-3xl); } } .study-subsection__intro { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text-secondary); line-height: var(--line-height-prose); } @media (min-width: 1024px) { .study-subsection__intro { font-size: var(--font-size-base); } } /* Per-subsection CTA — small primary button (matches the .profile-section__cta-row size used inside major/college profile pages). Centered under each grid. */ .study-subsection__cta { margin-top: var(--space-6); text-align: center; } @media (min-width: 1024px) { .study-subsection__cta { margin-top: var(--space-8); } } .study-subsection__cta-btn { padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-button); } /* Divider between subsections (majors → programs → careers). */ .study__divider { margin: var(--space-10) 0 var(--space-10); border: 0; border-top: var(--border-width) solid var(--color-border-strong); } @media (min-width: 1024px) { .study__divider { margin: var(--space-12) 0; } } .study-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4-5); /* mobile: 18px */ } @media (min-width: 640px) { .study-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); /* tablet: 20px */ } } @media (min-width: 1024px) { .study-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-6); /* desktop: 24px */ } } /* Single card — IS an <a>. White surface, soft border, vertical stack. No internal CTA button — the whole card is the link target so the click area is generous and the visual stays clean. Hover stays color-neutral (no border or bg shift) so the row reads as one calm block; focus-visible falls back to the browser default outline so keyboard users still see where they are. Content is centered on every breakpoint; spacing is fully explicit (gap:0) so the icon→title gap below stays predictable. */ .study-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: var(--space-5) var(--space-4) var(--space-4); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); text-align: center; text-decoration: none; color: inherit; } /* Tag pill in the top-left — uses the category tinted bg/text tokens. */ .study-card__tag { position: absolute; top: var(--space-3); left: var(--space-3); padding: var(--space-0-5) var(--space-2); background: var(--color-offwhite); color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); border-radius: var(--radius-full); white-space: nowrap; } /* Icon — large, themed by category. The svg uses currentColor so the per-category color rules below drive the stroke color cleanly. */ .study-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-top: var(--space-5); margin-bottom: var(--space-5); color: var(--color-primary); } .study-card__icon svg { width: 32px; height: 32px; } .study-card__name { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-tight); } /* 1-line data explainer at the bottom of each card. Replaces the old button CTA — now that the whole card is a link, the data line both informs and reinforces the click. */ .study-card__line { margin: var(--space-1) 0 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-light); color: var(--color-text-muted); line-height: var(--line-height-tight); } /* TAG pill — color still varies per category (the only place category-color shows up after the per-row icon refactor below). */ .study-card--cat-stem .study-card__tag { background: var(--color-cat-stem-bg); color: var(--color-cat-stem-text); } .study-card--cat-health .study-card__tag { background: var(--color-cat-health-bg); color: var(--color-cat-health-text); } .study-card--cat-business .study-card__tag { background: var(--color-cat-business-bg); color: var(--color-cat-business-text); } .study-card--cat-humanities .study-card__tag { background: var(--color-cat-humanities-bg); color: var(--color-cat-humanities-text); } .study-card--cat-social .study-card__tag { background: var(--color-cat-social-bg); color: var(--color-cat-social-text); } .study-card--cat-trades .study-card__tag { background: var(--color-cat-trades-bg); color: var(--color-cat-trades-text); } /* ICON color — one color per row, NOT per category. Keeps the three subsections (majors / programs / careers) visually distinct from each other while every icon within a row stays consistent. */ .study-card--row-major .study-card__icon { color: var(--color-primary); } .study-card--row-program .study-card__icon { color: var(--color-cat-business-text); } .study-card--row-career .study-card__icon { color: var(--color-accent); } /* Career card titles can be much longer than majors/programs ("First-Line Supervisors of Office and Administrative Support Workers"), so shrink the font and clamp to 2 lines with ellipsis so the row stays visually even. */ .study-card--row-career .study-card__name { font-size: var(--font-size-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* ===================================================================== HOMEPAGE FINAL CTA — last subsection of Pick a Path. Lives on the white parent section but is itself a navy rounded card, so it reads as the closing band visually while staying inside the Pick a Path flow (no full-width background jump). The subtle dot-grid overlay uses the same --color-on-dark-grid token the hero uses for its line grid; the radial pattern keeps the card visually distinct from the hero so the two don't feel like the same surface twice. Text is on-dark; .btn--primary is overridden inside the card to white-default → red-hover (same treatment .home-section--primary applies). Pill links underneath cover the four main entry points for visitors who already know what they want. ===================================================================== */ .home-final-cta { background-color: var(--color-primary); background-image: radial-gradient(circle, var(--color-on-dark-grid) 1.5px, transparent 2px); background-size: 28px 28px; border-radius: var(--radius-lg); padding: var(--space-10) var(--space-6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); } @media (min-width: 1024px) { .home-final-cta { padding: var(--space-16) var(--space-8); } } .home-final-cta__heading { margin: 0; max-width: 720px; font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); color: var(--color-text-on-primary); line-height: var(--line-height-tight); } @media (min-width: 1024px) { .home-final-cta__heading { font-size: var(--font-size-4xl); } } .home-final-cta__subhead { margin: 0 0 var(--space-2); max-width: 540px; font-size: var(--font-size-base); font-weight: var(--font-weight-light); color: var(--color-on-dark-text-strong); line-height: var(--line-height-prose); } /* Button override — inside the navy card, swap the default navy-bg button for a white-bg one (matches the .home-section--primary treatment used on the How We Score band). */ .home-final-cta .btn--primary { background: var(--color-white); color: var(--color-primary); border-color: var(--color-white); } .home-final-cta .btn--primary:hover, .home-final-cta .btn--primary:focus-visible { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); } /* Pill row — sits under the primary CTA, catches visitors who already know which entity type they want to start from (colleges vs majors vs programs vs careers). Outline-style pills on the navy card so they defer visually to the white primary button above. */ .home-final-cta__pills { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-4); } .home-final-cta__pills-label { flex-basis: 100%; margin-bottom: var(--space-1); font-size: var(--font-size-sm); color: var(--color-on-dark-text-medium); } .home-final-cta__pill { padding: var(--cta-padding-y) var(--cta-padding-x); border: var(--border-width) solid var(--color-on-dark-border-soft); border-radius: var(--radius-full); color: var(--color-text-on-primary); font-size: var(--font-size-sm); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast); } .home-final-cta__pill:hover, .home-final-cta__pill:focus-visible { background: var(--color-on-dark-surface-hover); border-color: var(--color-on-dark-border-muted); color: var(--color-text-on-primary); outline: none; } /* ===================================================================== CONTACT PAGE — form styling --------------------------------------------------------------------- Scoped to .contact-form. Single-column stacked layout with label above input, full-width inputs, and a primary submit. Honeypot is visually hidden but stays in the DOM for bots to fill. Notice block sits above the form for both success and error states (uses the existing trust palette for the bg tints). ===================================================================== */ /* The link-tile variant of .trust-tile — used on /contact/'s deflection grid. Makes the whole tile clickable + adds a hover/focus affordance. Strips the default <a> styling so it visually matches the static .trust-tile. */ .trust-tile--link { display: block; color: inherit; text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); border: var(--border-width) solid var(--color-border); } .trust-tile--link:hover, .trust-tile--link:focus-visible { border-color: var(--color-primary); background: var(--color-white); outline: none; } .contact-form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); max-width: var(--home-faq-max-w); } .contact-form__row { display: flex; flex-direction: column; gap: var(--space-1-5); } .contact-form__row--submit { margin-top: var(--space-2); flex-direction: row; } .contact-form__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .contact-form__required { color: var(--color-accent); font-weight: var(--font-weight-regular); } .contact-form__input { width: 100%; padding: var(--space-3) var(--space-3-5); font-family: inherit; font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .contact-form__input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 var(--border-width-strong) var(--color-primary-ring); } .contact-form__textarea { resize: vertical; min-height: 140px; line-height: var(--line-height-normal); } .contact-form__select { appearance: auto; } .contact-form__hint { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); } /* Honeypot — visually hidden, still rendered for bots. */ .contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Notice block above the form (success after submit, error on validate). */ .contact-form__notice { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: var(--border-width) solid var(--color-border); font-size: var(--font-size-sm); line-height: var(--line-height-normal); } .contact-form__notice strong { display: block; margin-bottom: var(--space-1); } .contact-form__notice span { display: block; } .contact-form__notice ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); } .contact-form__notice li { margin-bottom: var(--space-1); } .contact-form__notice--success { background: var(--color-tag-nonprofit-bg); border-color: var(--color-tag-nonprofit-text); color: var(--color-tag-nonprofit-text); } .contact-form__notice--error { background: var(--color-tag-forprofit-bg); border-color: var(--color-tag-forprofit-text); color: var(--color-tag-forprofit-text); } /* ===================================================================== GUIDE PAGE (/guides/{slug}/) — long-form article inside a profile card --------------------------------------------------------------------- Reuses .profile-hero · .profile-grid · .profile-section--card · .profile-toc from the entity profile pages. Only new patterns added here: .guide-article — prose typography wrapper for parsed markdown .guide-meta — secondary caption inside sidebar cards .guide-entity-tag — tiny uppercase entity label after a link ===================================================================== */ .guide-article > * + * { margin-top: var(--space-4); } .guide-article h2 { /* Section divider above every H2 except the first one in the article. Subtle hairline + generous padding gives a clear "new section" signal without breaking the reading flow. */ margin-top: var(--space-10); padding-top: var(--space-8); margin-bottom: var(--space-3); border-top: var(--border-width) solid var(--color-divider-medium); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); /* 500 — H2 per project font-weight rule (only H1 uses 600) */ color: var(--color-secondary); line-height: var(--line-height-tight); scroll-margin-top: var(--space-20); /* clear sticky header on anchor jump */ } .guide-article h2:first-of-type { /* First H2 in the article gets no top divider — it would float above the opening paragraph and read as a section-break with no section. */ margin-top: var(--space-8); padding-top: 0; border-top: 0; } .guide-article h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); /* 400 */ color: var(--color-secondary); line-height: var(--line-height-snug); } /* ===================================================================== GUIDE-CARD-GRID — generic 2×2 or 1×3 card grid for guide sections. Used for "why / approach / data / result" style breakdowns and for peer-group summary cards. Reuses offwhite surface + border token. ===================================================================== */ .guide-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-5) 0; } @media (min-width: 640px) { .guide-card-grid { grid-template-columns: repeat(2, 1fr); } .guide-card-grid--3col { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .guide-card-grid { grid-template-columns: repeat(2, 1fr); } .guide-card-grid--3col { grid-template-columns: repeat(3, 1fr); } } .guide-card-grid__item { background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .guide-card-grid__label { margin: 0; font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .guide-card-grid__title { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .guide-card-grid__body { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text); line-height: var(--line-height-normal); } /* Peer group letter badge — large circle with A / B / C. Three color variants use existing brand + utility tokens. */ .guide-peer-badge { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); margin: 0; flex-shrink: 0; } /* .guide-article p rule has higher specificity — force white text */ .guide-article .guide-peer-badge { color: var(--color-white); } /* ===================================================================== GUIDE-SUBSCORE-HEADER — inline row pairing the sub-score name with its peer-group applicability pills. Flex on desktop, wraps on mobile so the pills stack below the name on narrow screens. ===================================================================== */ .guide-subscore-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); margin-bottom: var(--space-3); } .guide-subscore-name { font-size: var(--font-size-base); font-weight: var(--font-weight-regular); /* 400 — matches h3 rule */ color: var(--color-secondary); line-height: var(--line-height-snug); } @media (max-width: 639.98px) { .guide-subscore-header { flex-direction: column; align-items: flex-start; gap: var(--space-1); } } /* Peer-group applicability pill row — sits inline inside .guide-subscore-header */ .guide-subscore-meta { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--font-size-2xs); color: var(--color-text-muted); } .guide-subscore-group { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-2); height: var(--space-5); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-white); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); } .guide-subscore-group--muted { background: var(--color-border); color: var(--color-text-muted); } /* ===================================================================== GUIDE-SCORE-BAR — horizontal 5-segment visual scale for the 30–100 score range. Reuses the existing tier color tokens so the segments match the .score-badge colors on college profiles. ===================================================================== */ .guide-score-bar { display: flex; border-radius: var(--radius-md); overflow: hidden; margin: var(--space-5) 0; border: var(--border-width) solid var(--color-border); } .guide-score-bar__seg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-3) var(--space-2); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-align: center; line-height: var(--line-height-snug); gap: var(--space-1); } .guide-score-bar__seg small { font-size: var(--font-size-2xs); font-weight: var(--font-weight-light); opacity: 0.8; } .guide-score-bar__seg--average { background: var(--color-tier-6-bg); color: var(--color-tier-6-text); } .guide-score-bar__seg--fair { background: var(--color-tier-5-bg); color: var(--color-tier-5-text); } .guide-score-bar__seg--good { background: var(--color-tier-3-bg); color: var(--color-tier-3-text); } .guide-score-bar__seg--strong { background: var(--color-tier-2-bg); color: var(--color-tier-2-text); } .guide-score-bar__seg--excellent{ background: var(--color-tier-1-bg); color: var(--color-tier-1-text); } @media (max-width: 639.98px) { .guide-score-bar__seg { padding: var(--space-2) var(--space-1); } } .guide-article p, .guide-article li { font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text); } .guide-article ul, .guide-article ol { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .guide-article a { color: var(--color-primary); text-decoration: underline; text-underline-offset: var(--space-0-5); transition: color var(--transition-fast); } .guide-article a:hover { color: var(--color-accent); } .guide-article blockquote { margin: var(--space-5) 0; padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--color-border); background: var(--color-offwhite); font-style: italic; color: var(--color-text-secondary); } .guide-article code { font-family: var(--font-family-mono); font-size: var(--font-size-sm); background: var(--color-offwhite); padding: var(--space-px) var(--space-1); border-radius: var(--radius-sm); } .guide-article pre { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); background: var(--color-offwhite); border-radius: var(--radius-md); overflow-x: auto; } .guide-article pre code { background: transparent; padding: 0; } .guide-article table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--font-size-sm); } .guide-article th, .guide-article td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border); text-align: left; } .guide-article th { font-weight: var(--font-weight-medium); color: var(--color-secondary); background: var(--color-offwhite); } .guide-article hr { margin: var(--space-6) 0; border: 0; border-top: var(--border-width) solid var(--color-border); } /* Sidebar helpers — used only on guide pages. */ .guide-meta { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-base); } .guide-entity-tag { display: inline-block; margin-left: var(--space-1); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); } /* ===================================================================== GUIDES JOURNEY — "The College Decision System" roadmap (/guides/) --------------------------------------------------------------------- Numbered, spine-connected steps with question-led eyebrows, faint ghost numerals, and depth on the imagery. Image and content alternate sides each step; a center spine with node dots connects them on desktop. Stacks to image-over-content on mobile. ===================================================================== */ /* Guides archive section spacing — the section OWNS its vertical padding as the single source of truth: 48px top/bottom on mobile + tablet, 64px on desktop. Horizontal padding stays on .container (16 / 24 / 32px). The borrowed spacing from the hero (margin-bottom) and .site-main (padding-bottom) is zeroed here so nothing stacks on top. Scoped to the guides archive only — no other page is affected. */ .page-archive--guides .archive-hero { margin-bottom: 0; } .page-archive--guides .site-main { padding-bottom: 0; } .page-archive--guides .profile-section { padding-block: var(--space-12); /* 48px — mobile + tablet */ } @media (min-width: 1024px) { .page-archive--guides .profile-section { padding-block: var(--space-16); /* 64px — desktop */ } } /* FAQ block matches the homepage FAQ: capped at 800px and centered. The journey/timeline above it stays full container width (1300px). */ .page-archive--guides .profile-faq { max-width: var(--home-faq-max-w); margin-inline: auto; } .guides-journey-head { text-align: center; margin-bottom: var(--space-10); } .guides-journey-head__title { margin: 0 0 var(--space-2); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .guides-journey-head__sub { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-light); color: var(--color-text-muted); } .guides-journey { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: var(--space-12); } @media (min-width: 1024px) { .guides-journey { gap: var(--space-16); } /* Center spine connecting the steps. */ .guides-journey::before { content: ''; position: absolute; top: var(--space-8); bottom: var(--space-8); left: 50%; width: var(--border-width-strong); background: var(--color-border); transform: translateX(-50%); } } .guides-journey__step { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 1024px) { .guides-journey__step { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } /* Even steps flip the image to the right. */ .guides-journey__step:nth-child(even) .guides-journey__media { order: 2; } /* Node dot sitting on the spine at each step. */ .guides-journey__step::after { content: ''; position: absolute; left: 50%; top: 50%; width: var(--space-4); height: var(--space-4); background: var(--color-accent); border: var(--border-width-strong) solid var(--color-white); border-radius: var(--radius-full); transform: translate(-50%, -50%); box-shadow: var(--shadow-sm); } } /* Image with an offset accent block behind it for depth. */ .guides-journey__media { position: relative; margin: 0; } .guides-journey__media::before { content: ''; position: absolute; inset: 0; z-index: 0; transform: translate(var(--space-3), var(--space-3)); background: var(--color-lavender); border-radius: var(--radius-lg); } .guides-journey__media a { position: relative; z-index: 1; display: block; border-radius: var(--radius-lg); overflow: hidden; } .guides-journey__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base); } .guides-journey__media a:hover img { box-shadow: var(--shadow-md); } .guides-journey__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .guides-journey__eyebrow { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .guides-journey__step-label { font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-accent); } .guides-journey__title { margin: 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); /* H2 = 500 */ line-height: var(--line-height-snug); color: var(--color-secondary); } .guides-journey__intro { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-light); line-height: var(--line-height-normal); color: var(--color-text); } .guides-journey__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .guides-journey__pill { padding: var(--space-1) var(--space-3); background: var(--color-lavender); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-regular); color: var(--color-secondary); white-space: nowrap; } /* CTA uses the site .btn .btn--primary component. This modifier only adds the arrow gap and keeps the cluster name's natural casing (the base .btn capitalizes, which would turn "a College" into "A College"). */ .guides-journey__cta { gap: var(--space-2); margin-top: var(--space-1); text-transform: none; } /* ===================================================================== GUIDES ARCHIVE (/guides/) + CLUSTER ARCHIVE (/guides/{cluster}/) --------------------------------------------------------------------- .guides-clusters — wraps the 5 cluster cards on the main archive .guides-cluster — one cluster card; standalone variant on cluster pages .guides-cluster__head — title row with count badge .guides-cluster__list — list of guides inside a cluster ===================================================================== */ .guides-clusters { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 1024px) { .guides-clusters { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } } .guides-cluster { background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .guides-cluster--standalone { background: transparent; border: 0; padding: 0; } .guides-cluster__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .guides-cluster__title { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-regular); color: var(--color-secondary); line-height: var(--line-height-snug); } .guides-cluster__title a { color: inherit; text-decoration: none; border-bottom: var(--border-width) solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .guides-cluster__title a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); } .guides-cluster__count { flex-shrink: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .guides-cluster__tagline { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); } .guides-cluster__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } /* Cluster archive (/guides/{cluster}/) — guides shown as a clean, clickable card grid rather than a bare full-width list. One column on mobile, two from tablet up. */ .guides-cluster--standalone .guides-cluster__list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .guides-cluster--standalone .guides-cluster__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } } .guides-cluster--standalone .guides-cluster__item { background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .guides-cluster--standalone .guides-cluster__item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } /* Card title — prominent, navy, colour-shift on hover (no underline growth). */ .guides-cluster--standalone .guides-cluster__link { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); border-bottom: 0; } .guides-cluster--standalone .guides-cluster__link:hover { color: var(--color-accent); border-bottom-color: transparent; } .guides-cluster--standalone .guides-cluster__item-desc { margin: 0; color: var(--color-text); } /* ===================================================================== ERROR / 404 PAGE — centered message + quick links to the main sections. ===================================================================== */ /* Fill the viewport below the sticky header (header + block = 100vh) and use the hero's blueprint-grid blue background so the 404 isn't a plain white screen. Content centers; footer falls below the fold. */ .page-error .site-main { padding-block: 0; background: linear-gradient(var(--color-on-dark-grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--color-on-dark-grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(180deg, var(--color-hero-grad-top) 0%, var(--color-hero-grad-mid) 60%, var(--color-hero-grad-bottom) 100%); } .error-page { min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: var(--space-12); } .error-page__code { margin: 0; font-size: var(--font-size-5xl); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); } .error-page__title { margin: var(--space-4) 0 0; font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); color: var(--color-white); } .error-page__text { max-width: var(--home-faq-max-w); margin: var(--space-3) 0 0; color: var(--color-on-dark-text-strong); font-weight: var(--font-weight-light); line-height: var(--line-height-normal); } .error-page__actions { margin-top: var(--space-6); } /* CTA on the dark grid — white button, accent on hover (matches other on-dark CTAs site-wide). */ .error-page .btn--primary { background: var(--color-white); color: var(--color-primary); border-color: var(--color-white); } .error-page .btn--primary:hover, .error-page .btn--primary:focus-visible { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); } /* Quick links: 2 per row on mobile, 4 per row on desktop (so 8 links sit on two lines, not one). Centered grid; each label stays on a single line. */ .error-page__links { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; gap: var(--space-3); } @media (min-width: 640px) { .error-page__links { grid-template-columns: repeat(4, auto); } } .error-page__links a { padding: var(--space-2) var(--space-4); background: var(--color-on-dark-surface); border: var(--border-width) solid var(--color-on-dark-border-soft); border-radius: var(--radius-full); color: var(--color-on-dark-text-strong); text-decoration: none; font-size: var(--font-size-sm); white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .error-page__links a:hover { background: var(--color-on-dark-surface-hover); border-color: var(--color-on-dark-border-soft); color: var(--color-white); } /* ===================================================================== GUIDE-CARD — richer guide card (avatar + pills + CTA) for cluster pages. Monogram avatar above title; whole card is clickable via data-href. ===================================================================== */ .guides-card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .guides-card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } } /* Findings archive: 3-wide at desktop (3 x 18 = 54), and clear the hero band so the first row of cards isn't flush against it. Scoped so the Guides archive keeps its 2-wide layout. */ .page-archive--findings .guides-card-grid { margin-top: var(--space-10); } @media (min-width: 1024px) { .page-archive--findings .guides-card-grid { grid-template-columns: repeat(3, 1fr); } } /* Rankings archive keeps 2-up: the cards sit in the ~80% results column beside the sidebar, so wider cards read better and the stat chips never wrap. */ .page-archive--rankings .archive-results { margin: 0; } /* Homepage findings band: 3 flagship cards in one row at desktop, stacked below (avoids an uneven 2 + 1). Higher specificity wins over the base grid. */ .page-home .guides-card-grid { grid-template-columns: 1fr; } @media (min-width: 1024px) { .page-home .guides-card-grid { grid-template-columns: repeat(3, 1fr); } } /* Related Guides on a profile: 3 across in a single row at desktop. Stacks to one column below desktop so 3 cards never break into an uneven 2 + 1. */ .profile-related .guides-card-grid { grid-template-columns: 1fr; } @media (min-width: 1024px) { .profile-related .guides-card-grid { grid-template-columns: repeat(3, 1fr); } } .guide-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .guide-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } /* Featured (findings) cards: keep the gentle shadow lift on hover but do NOT turn the border blue. */ .guide-card--featured:hover { border-color: var(--color-border); } /* ── Topics (hub pages) ──────────────────────────────────────────────────── */ .topic-body { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-10) var(--space-8); } @media (min-width: 1024px) { .topic-body { grid-template-columns: 3fr 1fr; /* 75 / 25, matches .profile-grid */ gap: var(--space-6); } } .topic-main { display: flex; flex-direction: column; gap: var(--space-6); /* card rhythm, matches .profile-main */ min-width: 0; } @media (min-width: 1024px) { .topic-main { gap: var(--space-8); } /* The hub has no sticky TOC bar, so the generic .page-profile rule's --toc-height offset just leaves dead space above the sticky sidebar. Match the Guides single-profile sticky spacing instead. */ .page-profile--topic .profile-sidebar__inner { top: var(--space-20); } } /* Mobile + tablet: lift the at-a-glance card above the article (it has no sticky effect below 1024px), so the key numbers are seen first — matching Majors / Programs / Careers / States. */ @media (max-width: 1023px) { .page-profile--topic .profile-sidebar { order: -1; } } /* At-a-glance sidebar: source note + standing CTA on the navy card */ .topic-sidebar__source { margin: 0; font-size: var(--font-size-xs); color: var(--color-on-dark-text-soft); } .topic-sidebar__cta { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-1); padding: var(--cta-padding-y) var(--cta-padding-x); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .topic-sidebar__cta:hover { background: var(--color-accent); color: var(--color-white); } .topic-intro { max-width: 70ch; font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-text); } .topic-intro p { margin: 0 0 var(--space-4); } .topic-intro p:last-child { margin-bottom: 0; } .topic-section__title { margin: 0 0 var(--space-2); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); color: var(--color-secondary); } .topic-section__intro { margin: 0 0 var(--space-6); max-width: 70ch; color: var(--color-text-muted); } /* live ranking table */ .topic-ranking { margin-top: var(--space-6); overflow-x: auto; /* table scrolls on mobile */ } .topic-ranking__head { display: flex; flex-direction: column; margin-bottom: var(--space-3); } .topic-ranking__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-primary); } .topic-ranking__caption { font-size: var(--font-size-sm); color: var(--color-text-muted); } .topic-ranking__table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .topic-ranking__table th { text-align: left; padding: var(--space-3); border-bottom: var(--border-width-strong) solid var(--color-border); color: var(--color-text-muted); font-weight: var(--font-weight-medium); white-space: nowrap; } .topic-ranking__table td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); white-space: nowrap; } .topic-ranking__rank { color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .topic-ranking__name { color: var(--color-secondary); font-weight: var(--font-weight-medium); } .topic-ranking__name a { color: var(--color-primary); font-weight: var(--font-weight-medium); text-decoration: none; white-space: normal; } .topic-ranking__name a:hover { text-decoration: underline; } /* tools grid */ .topic-tools { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .topic-tools { grid-template-columns: repeat(2, 1fr); } } .topic-tool-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); text-decoration: none; transition: box-shadow var(--transition-fast); } .topic-tool-card:hover { box-shadow: var(--shadow-sm); } .topic-tool-card__name { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-primary); } .topic-tool-card__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); } /* findings grid: 2-up at desktop (2×3 for the six findings) */ @media (min-width: 1024px) { .topic-findings-grid { grid-template-columns: repeat(2, 1fr); } } /* topics archive grid */ .topics-grid { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 640px) { .topics-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .topics-grid { grid-template-columns: repeat(3, 1fr); } } /* Topic cards reuse the .guide-card / .guide-card--featured component (branded OG image + title + description + keyword pills), so they match the Findings archive exactly. Only the .topics-grid container is topic-specific. */ /* Related Topics renders in the page-level .profile-related outro (like Findings), so drop the archive grid's top margin there. */ .profile-related .topics-grid { margin-top: 0; } /* answer-first block (mint, like findings TL;DR) */ .page-profile--topic .guide-tldr { background: var(--color-cooltint); } /* Inside the white "By the Numbers" card the chart's own box is redundant — strip its border/background so it blends into the section card. */ .page-profile--topic .finding-chart { margin-block: var(--space-6); padding: 0; border: 0; border-radius: 0; background: transparent; } .topic-discussion.guide-article h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } /* "What this means" action close — padding matches the section cards */ .topic-cta { padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-warmtint); } @media (min-width: 640px) { .topic-cta { padding: var(--space-5); } } .topic-cta__text { margin: 0 0 var(--space-5); color: var(--color-text); line-height: var(--line-height-normal); } .topic-cta__btn { display: inline-flex; padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-sm); } /* ── Rankings (programmatic engine) — reuse .profile-section--card, .finding-stats, .topic-ranking, .profile-faq; only the single-column wrapper + related grid are new. */ .ranking-body { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-10) var(--space-8); } @media (min-width: 1024px) { .ranking-body { grid-template-columns: 3fr 1fr; gap: var(--space-6); } /* No sticky TOC bar on rankings, so use the Guides sticky offset (not the generic .page-profile one, which adds dead --toc-height space). */ .page-profile--ranking .profile-sidebar__inner { top: var(--space-20); } } .ranking-main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } @media (min-width: 1024px) { .ranking-main { gap: var(--space-8); } } /* Mobile + tablet: lift the at-a-glance card above the ranking, like the hubs. */ @media (max-width: 1023px) { .page-profile--ranking .profile-sidebar { order: -1; } } /* Archive: left filter sidebar + cards on the right, reusing the entity-archive .archive-layout / .archive-sidebar / .archive-filters classes. Cards filter client-side (all 132 are in the DOM); a hidden card drops out of the grid. */ .ranking-card[hidden] { display: none; } /* Hero: profile-hero ships margin-bottom:0; restore the archive-hero gap above the filter/cards band, and space the quick-filter pills below the subtitle. */ .page-archive--rankings .profile-hero { margin-bottom: var(--space-10); } .profile-hero .archive-hero__quick-filters { margin-top: var(--space-6); } button.archive-filters__reset { background: none; border: 0; font: inherit; cursor: pointer; } .ranking-no-results { margin: var(--space-8) 0; font-size: var(--font-size-base); color: var(--color-text-muted); } .ranking-no-results__clear { background: none; border: 0; padding: 0; font: inherit; color: var(--color-primary); text-decoration: underline; cursor: pointer; } /* "Show all" reveal — all cards stay in the DOM; this just paints the rest. */ .ranking-more { margin-top: var(--space-6); display: flex; justify-content: center; } .ranking-more__btn { padding: var(--cta-padding-y) var(--space-5); border: var(--border-width-strong) solid var(--color-primary); border-radius: var(--radius-md); background: none; color: var(--color-primary); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .ranking-more__btn:hover { background: var(--color-primary); color: var(--color-white); } /* Card stat list — replaces keyword pills on ranking cards. A vertical checklist echoing the OG card: a check icon, a highlighted number, then a muted caption, one stat per line. Rendered as crisp HTML. */ .ranking-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); list-style: none; margin: 0; padding: 0; } .ranking-card__stat { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); line-height: var(--line-height-snug); color: var(--color-text-muted); } .ranking-card__stat-icon { flex-shrink: 0; color: var(--color-primary); } .ranking-card__stat-num { font-weight: var(--font-weight-medium); color: var(--color-primary); } .ranking-frame { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-secondary); } .ranking-method { display: flex; flex-direction: column; gap: var(--space-4); } .ranking-method p { margin: 0; color: var(--color-text); line-height: var(--line-height-prose); } /* Key takeaways (mint highlight, computed per page) */ .ranking-takeaways { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); background: var(--color-cooltint); border-radius: var(--radius-lg); } .ranking-takeaways__label { margin: 0 0 var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); } .ranking-takeaways ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .ranking-takeaways li { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-normal); } /* What the data shows (computed observations) */ .ranking-insights { margin-top: var(--space-6); } .ranking-insights__title { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .ranking-insights ul { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .ranking-insights li { font-size: var(--font-size-base); color: var(--color-text); line-height: var(--line-height-normal); } /* Standout cards (3 metric leaders above the table) */ .ranking-standouts { margin-top: var(--space-6); display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .ranking-standouts { grid-template-columns: repeat(3, 1fr); } } .ranking-standout { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--color-offwhite); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } .ranking-standout__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-accent); } .ranking-standout__value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); color: var(--color-primary); font-variant-numeric: tabular-nums; } .ranking-standout__college { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); line-height: var(--line-height-snug); } .ranking-standout__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* How to use — CTAs */ .ranking-howto__ctas { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } .ranking-howto__cta { display: inline-flex; padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-sm); } .ranking-howto__link { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; } .ranking-howto__link:hover { text-decoration: underline; } /* Avatar slot */ .guide-card__avatar { flex-shrink: 0; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* A — monogram: navy circle, white initial */ .guide-card--monogram .guide-card__avatar { background: var(--color-primary); } .guide-card__monogram { color: var(--color-white); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: 1; } /* B — featured: full-bleed branded card image on top (findings). The image breaks out of the card padding by zeroing it here and re-padding the body. */ .guide-card--featured { padding: 0; gap: 0; overflow: hidden; } .guide-card__image { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: var(--border-width) solid var(--color-border); } .guide-card--featured .guide-card__body { width: 100%; padding: var(--space-5); gap: var(--space-3); } /* Body — grows to fill the card so the CTA can pin to the bottom and line up across cards of differing content height. */ .guide-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; min-width: 0; flex: 1 1 auto; } .guide-card__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); color: var(--color-secondary); } .guide-card__title .guides-cluster__pillar-tag { margin-left: var(--space-2); vertical-align: middle; } /* margin-top:auto pins the whole footer group (divider + pills + optional CTA) to the bottom of the body, so footers line up across cards of differing title / description / pill height in every guide-card grid. */ .guide-card__divider { width: 100%; margin: auto 0 0; border: 0; border-top: var(--border-width) solid var(--color-border); } .guide-card__desc { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-light); line-height: var(--line-height-normal); color: var(--color-text); } .guide-card__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .guide-card__pills li { padding: var(--space-1) var(--space-3); background: var(--color-lavender); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-2xs); color: var(--color-secondary); white-space: nowrap; } .guide-card__cta { padding: var(--cta-padding-y) var(--cta-padding-x); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-button); text-transform: none; } .guides-cluster__item { margin: 0; } .guides-cluster__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-base); color: var(--color-primary); text-decoration: none; border-bottom: var(--border-width) solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .guides-cluster__link:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); } .guides-cluster__pillar-tag { display: inline-block; font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); padding: var(--space-px) var(--space-2); border-radius: var(--radius-full); background: var(--color-cat-business-bg); color: var(--color-cat-business-text); } .guides-cluster__item-desc { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); } .guides-cluster__empty { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: italic; } /* ===================================================================== GUIDE TL;DR + "What you'll learn" callout (top of pillar guides) --------------------------------------------------------------------- Renders above .guide-article. Combines a 3-4 sentence summary paragraph with a varied-count bulleted list. Visually anchors the page; gives AI extractors a clean answer-passage + structured list. ===================================================================== */ /* Warm-tint panel holding the lead paragraph + key-takeaways bullets. Margin-bottom intentionally absent — .profile-main provides the flex `gap` between this block and .guide-article, matching the article→FAQ gap. */ .guide-tldr { background: var(--color-warmtint); border-left: 0; border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .guide-tldr__lead { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-secondary); line-height: var(--line-height-normal); } /* Soft hairline between the lead paragraph and the takeaways heading. Sibling selector ensures the divider only renders when both blocks are present — no stray line at the top if the lead is empty. */ .guide-tldr__lead + .guide-tldr__heading { padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); } .guide-tldr__heading { margin: 0; font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .guide-tldr__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .guide-tldr__list li { position: relative; padding-left: var(--space-4); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text); } .guide-tldr__list li::before { content: '▸'; position: absolute; left: 0; top: 0; color: var(--color-primary); font-size: var(--font-size-sm); line-height: 1.5; } /* ===================================================================== GUIDE-ARTICLE inline definition callout --------------------------------------------------------------------- For "What X actually is" passages near the top of a section. Sits inline inside .guide-article. Renders as a small label + body block that AI extractors can lift as a self-contained definition passage. ===================================================================== */ .guide-article .guide-definition { background: var(--color-offwhite); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-2); } .guide-article .guide-definition__label { margin: 0; font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .guide-article .guide-definition__term { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-secondary); } .guide-article .guide-definition__body { margin: 0; font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text); } .guide-article .guide-definition p { margin: 0; } /* ===================================================================== GUIDE TABLE-OF-CONTENTS SIDEBAR CARD (/guides/{slug}/) --------------------------------------------------------------------- Lives inside .profile-sidebar. Replaces the entity-profile sidebar cards (Try a tool · Related profiles · Last reviewed) with a single TOC + share-buttons card. Sticky inside the sidebar so it stays in view as the reader scrolls through the article. Anatomy: [header] title (left) + 4 share buttons (right) [divider — accent hairline] [list] square-bullet H2 anchor links [footer] "Last reviewed [Month Year]" ===================================================================== */ .guide-toc-sidebar { position: sticky; top: var(--space-20); /* clear sticky header */ background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); } .guide-toc-sidebar__header { padding-bottom: var(--space-3); border-bottom: var(--border-width-strong) solid var(--color-accent); } .guide-toc-sidebar__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); /* H3 in source, but visually-prominent label — 500 */ color: var(--color-secondary); line-height: var(--line-height-snug); white-space: nowrap; /* keep "Table of Contents" on a single line */ } /* Footer row: "Share This" label + 4 share icons. Sits below the TOC list and is divided from it by a soft hairline. */ .guide-toc-sidebar__share-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); } /* Share-only card (short article, no TOC): the share row is the whole card, so drop the divider/padding meant to separate it from a TOC above. */ .guide-toc-sidebar--no-toc .guide-toc-sidebar__share-row { border-top: 0; padding-top: 0; } .guide-toc-sidebar__share-label { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); } /* Share buttons (FB · IG · LinkedIn · X). */ .guide-toc-sidebar__share { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; } .guide-toc-sidebar__share-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--space-6); height: var(--space-6); padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); cursor: pointer; text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast); } .guide-toc-sidebar__share-btn:hover, .guide-toc-sidebar__share-btn:focus-visible { color: var(--color-accent); background: var(--color-offwhite); outline: none; } .guide-toc-sidebar__share-btn.is-copied { color: var(--color-success); background: var(--color-roi-excellent-bg); } .guide-toc-sidebar__share-btn svg { width: var(--icon-size); height: var(--icon-size); /* Each <symbol> in the sprite uses fill="currentColor", so icons take their color from the button's `color` rule above. */ } /* TOC anchor list with square accent bullets. */ .guide-toc-sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .guide-toc-sidebar__list li { position: relative; padding-left: var(--space-4); } .guide-toc-sidebar__list li::before { content: ''; position: absolute; left: 0; top: 0.45em; /* aligns with text baseline */ width: var(--space-2); height: var(--space-2); background: var(--color-accent); border-radius: var(--radius-full); } .guide-toc-sidebar__list a { font-size: var(--font-size-sm); font-weight: var(--font-weight-light); color: var(--color-text); text-decoration: none; line-height: var(--line-height-snug); transition: color var(--transition-fast); } .guide-toc-sidebar__list a:hover, .guide-toc-sidebar__list a:focus-visible { color: var(--color-accent); outline: none; } /* Mobile: drop the sticky behavior (sidebar stacks below main on mobile, sticky would be useless and could clip the content). */ @media (max-width: 1023.98px) { .guide-toc-sidebar { position: static; top: auto; } } /* ===================================================================== GUIDE-WALKTHROUGH — collapsible worked-example block --------------------------------------------------------------------- Sits inside .guide-article at the end of a procedural section. Default-collapsed so framework-readers can skip; expanded by readers who need a concrete walkthrough. Uses native <details>/<summary>, visually distinct from .profile-faq (which is a list of Q&As, not a single self-contained example). ===================================================================== */ .guide-article .guide-walkthrough { margin: var(--space-5) 0 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-offwhite); padding: 0; } .guide-article .guide-walkthrough > summary { cursor: pointer; list-style: none; padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .guide-article .guide-walkthrough > summary::-webkit-details-marker { display: none; } .guide-article .guide-walkthrough > summary::after { content: "+"; flex: 0 0 var(--space-6); width: var(--space-6); height: var(--space-6); display: inline-flex; align-items: center; justify-content: center; background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-text-muted); } .guide-article .guide-walkthrough[open] > summary { border-bottom: var(--border-width) solid var(--color-border); } .guide-article .guide-walkthrough[open] > summary::after { content: "−"; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); } .guide-article .guide-walkthrough > *:not(summary) { padding-inline: var(--space-4); } .guide-article .guide-walkthrough > *:not(summary):first-of-type { padding-top: var(--space-4); } .guide-article .guide-walkthrough > *:not(summary):last-child { padding-bottom: var(--space-4); } .guide-article .guide-walkthrough p { font-size: var(--font-size-sm); line-height: var(--line-height-prose); margin: 0 0 var(--space-3); } .guide-article .guide-walkthrough p:last-child { margin-bottom: 0; } .guide-article .guide-walkthrough em { font-style: normal; font-weight: var(--font-weight-medium); color: var(--color-secondary); } /* ===================================================================== GUIDE-PAGE LAYOUT TWEAKS --------------------------------------------------------------------- 1. Page background — entity profile pages use `--color-offwhite` for a subtle separation between hero/cards and the surrounding canvas. Guides read more like long-form prose; pure white feels lighter and keeps the warm-tint takeaway panel from competing with a gray field. 2. Hero→grid spacing — other entity profiles place the sticky horizontal `.profile-toc` bar between the hero and the grid; its margin-bottom provided the visual gap. Guides don't render that bar (TOC lives in the sidebar instead), so the grid would otherwise butt directly against the hero. Restore the breathing room with a top pad on the grid, scoped to guides only. ===================================================================== */ .page-profile--guide { background: var(--color-white); } /* Match the guides archive vertical rhythm (48 mobile/tablet → 64 desktop) on the outer gaps only — hero→content and content→footer. NOT on .profile-section, which would inflate the article + FAQ cards internally. */ .page-profile--guide .profile-grid { padding-top: var(--space-12); /* 48px */ } @media (min-width: 1024px) { .page-profile--guide .profile-grid { padding-top: var(--space-16); } /* 64px */ .page-profile--guide .site-main { padding-bottom: var(--space-16); } /* 64px (mobile/tablet keep 48 via global .site-main) */ } /* ============================================================ Finding chart — dependency-free horizontal bar chart for the /findings/ data visuals. Bar width comes from an inline --val (a percentage of the row max). Values are real, selectable text so the chart is accessible and the numbers stay copyable. ============================================================ */ .finding-chart { margin: var(--space-8) 0; padding: var(--space-5) var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); } .finding-chart__title { margin: 0 0 var(--space-1); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-primary); line-height: var(--line-height-base); } .finding-chart__caption { margin: 0 0 var(--space-5); font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-button); } .finding-chart__row { display: grid; grid-template-columns: 11rem 1fr; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .finding-chart__row:last-child { margin-bottom: 0; } .finding-chart__label { font-size: var(--font-size-sm); color: var(--color-text); text-align: right; line-height: var(--line-height-snug); } /* Grid (track | number) so the longest bar never collides with its value. */ .finding-chart__barwrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); min-width: 0; } .finding-chart__bar { height: var(--space-5); width: var(--val, 0%); min-width: var(--space-1); background: var(--color-primary); border-radius: var(--radius-md); } .finding-chart__bar--accent { background: var(--color-accent); } .finding-chart__bar--muted { background: var(--color-border); } .finding-chart__num { font-size: var(--font-size-sm); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 640px) { .finding-chart__row { grid-template-columns: 1fr; gap: var(--space-1); margin-bottom: var(--space-4); } .finding-chart__label { text-align: left; } } /* ── Finding stat row — 2-3 big numbers as a visual break ───────────── */ .finding-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-8) 0; } .finding-stats--2 { grid-template-columns: repeat(2, 1fr); } .finding-stat { padding: var(--space-5) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-alt); text-align: center; } .finding-stat__num { display: block; font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); /* 500 — only H1 uses 600 */ color: var(--color-primary); line-height: var(--line-height-display); font-variant-numeric: tabular-nums; } .finding-stat__num--accent { color: var(--color-accent); } .finding-stat__label { display: block; margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-base); } @media (max-width: 640px) { .finding-stats, .finding-stats--2 { grid-template-columns: 1fr; gap: var(--space-3); } } /* Donut visuals on findings reuse the college-profile .profile-donut component (rendered server-side by src/Viz.php), so there is no findings-only donut CSS. */ /* Findings use the cool (mint) TL;DR tint so they read visually distinct from the warm-tinted guides at a glance. */ .page-profile--finding .guide-tldr { background: var(--color-cooltint); } /* TOC toggle button — used by both the desktop sidebar header (static) and the mobile top accordion. Reuses the header's accent-underline look. */ .guide-toc-sidebar__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); background: none; border: 0; border-bottom: var(--border-width-strong) solid var(--color-accent); padding: 0 0 var(--space-3); cursor: pointer; font: inherit; color: inherit; text-align: left; } .guide-toc-sidebar__chevron { width: var(--space-4); height: var(--space-4); flex-shrink: 0; display: none; color: var(--color-text-muted); } /* Top accordion — a self-contained "On this page" card shown ONLY on tablet/ mobile, at the very top of the content. The desktop TOC stays in the sidebar; the rest of the sidebar is never moved. */ .profile-toc-top { margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); } @media (min-width: 1024px) { .profile-toc-top { display: none; } /* desktop uses the sidebar TOC */ .guide-toc-sidebar__toggle { cursor: default; } /* sidebar header is static on desktop */ } @media (max-width: 1023px) { /* The TOC lives in the top accordion now, so hide just the TOC inside the sidebar (its share row stays; no stray divider above it). Covers the Findings sidebar (a __toggle button) and the Guides sidebar (a __header). */ :is(.page-profile--finding, .page-profile--guide) .profile-sidebar :is(.guide-toc-sidebar__toggle, .guide-toc-sidebar__header, .guide-toc-sidebar__list) { display: none; } :is(.page-profile--finding, .page-profile--guide) .guide-toc-sidebar__share-row { border-top: 0; padding-top: 0; } /* Top accordion: chevron + collapse/expand behaviour. */ :is(.page-profile--finding, .page-profile--guide) .profile-toc-top .guide-toc-sidebar__chevron { display: block; transition: transform 0.2s ease; } :is(.page-profile--finding, .page-profile--guide) .profile-toc-top .guide-toc-sidebar__toggle[aria-expanded="true"] .guide-toc-sidebar__chevron { transform: rotate(180deg); } :is(.page-profile--finding, .page-profile--guide) .profile-toc-top .guide-toc-sidebar__list { display: none; } :is(.page-profile--finding, .page-profile--guide) .profile-toc-top .guide-toc-sidebar__toggle[aria-expanded="true"] ~ .guide-toc-sidebar__list { display: block; } } /* ===================================================================== SCOUT — public chat assistant (widget on every page) Markup: templates/components/chat-widget.php · JS: assets/js/scout.js ===================================================================== */ .scout { position: fixed; left: var(--space-5); bottom: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); /* On mobile the wrapper spans full width (so the panel can), but it must not intercept clicks on its empty area (e.g. the back-to-top button on the left). Re-enable pointer events only on the real interactive children. */ pointer-events: none; } .scout__launcher, .scout__panel, .scout__teaser { pointer-events: auto; } /* The panel/teaser/chip rows set display:flex|grid, which would override the plain [hidden] attribute (author beats UA at equal specificity). This keeps "hidden" actually hidden so the panel stays closed until opened, and the starter pills + follow-ups + teaser hide on cue. */ .scout__panel[hidden], .scout__teaser[hidden], .scout__suggest[hidden], .scout__followups[hidden] { display: none; } /* ── Launcher ────────────────────────────────────────────────────── */ .scout__launcher { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-on-primary); box-shadow: var(--shadow-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: background var(--transition-fast), transform var(--transition-fast); /* gentle periodic wobble to draw the eye: ~0.7s of motion, then ~4.3s still */ animation: scout-attn 5s ease-in-out infinite; } .scout__launcher:hover { background: var(--color-secondary); transform: translateY(-2px); animation: none; /* hold still on hover so the lift reads */ } @keyframes scout-attn { 0%, 86%, 100% { transform: translateY(0) rotate(0); } 89% { transform: translateY(-5px) rotate(-4deg); } 92% { transform: translateY(0) rotate(3deg); } 95% { transform: translateY(-3px) rotate(-2deg); } 98% { transform: translateY(0) rotate(0); } } .scout-face { display: block; } .scout__launcher-face { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); } .scout__launcher-face .scout-face { width: var(--space-6); height: var(--space-6); } .scout.is-open .scout__launcher { display: none; } /* ── Panel ───────────────────────────────────────────────────────── */ .scout__panel { display: flex; flex-direction: column; width: min(92vw, 380px); height: min(70vh, 560px); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .scout__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-primary); color: var(--color-text-on-primary); } .scout__head-id { display: flex; align-items: center; gap: var(--space-3); } .scout__avatar { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-text-on-accent); flex-shrink: 0; } .scout__avatar .scout-face { width: var(--space-6); height: var(--space-6); } .scout__head-text { display: flex; flex-direction: column; line-height: var(--line-height-tight); } .scout__name { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); } .scout__tagline { font-size: var(--font-size-xs); color: var(--color-on-dark-text-medium); } .scout__head-actions { display: flex; align-items: center; gap: var(--space-1); } .scout__headbtn { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-md); color: var(--color-text-on-primary); transition: background var(--transition-fast); } .scout__headbtn:hover { background: var(--color-on-dark-surface-hover); } .scout__headbtn svg { width: var(--space-5); height: var(--space-5); } /* ── Message log ─────────────────────────────────────────────────── */ .scout__log { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .scout__msg { max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--font-size-sm); line-height: var(--line-height-base); white-space: pre-wrap; word-wrap: break-word; } .scout__msg--bot { align-self: flex-start; background: var(--color-offwhite); color: var(--color-text); border-bottom-left-radius: var(--radius-sm); } .scout__msg--user { align-self: flex-end; background: var(--color-primary); color: var(--color-text-on-primary); border-bottom-right-radius: var(--radius-sm); } .scout__msg--bot a { color: var(--color-primary); font-weight: var(--font-weight-medium); text-decoration: underline; } .scout__msg--bot a:hover { color: var(--color-accent); } /* typing dots */ .scout__typing { display: inline-flex; gap: var(--space-1); } .scout__typing span { width: var(--space-1-5); height: var(--space-1-5); border-radius: var(--radius-full); background: var(--color-text-muted); animation: scout-blink 1.2s infinite ease-in-out both; } .scout__typing span:nth-child(2) { animation-delay: 0.2s; } .scout__typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes scout-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } } .scout__reset { align-self: center; margin-top: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--color-lavender); color: var(--color-primary); font-size: var(--font-size-sm); transition: background var(--transition-fast); } .scout__reset:hover { background: var(--color-lavender-deep); } /* ── Suggestions ─────────────────────────────────────────────────── */ .scout__suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); } .scout__chip { padding: var(--space-1-5) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); background: var(--color-white); color: var(--color-text-secondary); font-size: var(--font-size-xs); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .scout__chip:hover { background: var(--color-lavender); color: var(--color-primary); border-color: var(--color-lavender-deep); } /* ── Composer ────────────────────────────────────────────────────── */ .scout__form { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--color-border); } .scout__input { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); background: var(--color-white); font-size: var(--font-size-sm); } .scout__input:focus-visible { outline: var(--border-width-strong) solid var(--color-primary); outline-offset: 0; } .scout__input:disabled { background: var(--color-offwhite); color: var(--color-text-muted); } .scout__send { display: grid; place-items: center; flex-shrink: 0; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-text-on-accent); transition: background var(--transition-fast); } .scout__send:hover { background: var(--color-accent-hover); } .scout__send:disabled { background: var(--color-text-muted); cursor: default; } .scout__send svg { width: var(--space-4); height: var(--space-4); } .scout__disclaimer { margin: 0; padding: 0 var(--space-4) var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; } /* ── Follow-up chips (contextual, by the input) ──────────────────── */ .scout__followups { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-2); } .scout__followup { padding: var(--space-1-5) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); background: var(--color-white); color: var(--color-primary); font-size: var(--font-size-xs); text-align: left; transition: background var(--transition-fast), border-color var(--transition-fast); } .scout__followup::before { content: "↳ "; color: var(--color-text-muted); } .scout__followup:hover { background: var(--color-lavender); border-color: var(--color-lavender-deep); } /* ── Proactive teaser ────────────────────────────────────────────── */ .scout__teaser { position: relative; display: flex; width: min(80vw, 280px); background: var(--color-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: scout-rise var(--transition-base) ease-out; } @keyframes scout-rise { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } } .scout__teaser-body { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-align: left; } .scout__teaser-face { display: grid; place-items: center; flex-shrink: 0; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-text-on-accent); } .scout__teaser-face .scout-face { width: var(--space-6); height: var(--space-6); } .scout__teaser-text { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-snug); } .scout__teaser-close { position: absolute; top: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); background: var(--color-secondary); color: var(--color-text-on-primary); box-shadow: var(--shadow-lg); } .scout__teaser-close svg { width: var(--space-3-5); height: var(--space-3-5); } /* ── Mobile ──────────────────────────────────────────────────────── */ @media (max-width: 639.98px) { .scout { right: var(--space-3); bottom: var(--space-3); left: var(--space-3); align-items: flex-start; } .scout__panel { width: 100%; height: min(80vh, 600px); } .scout__launcher-label { display: none; } .scout__launcher { padding: var(--space-3); } } @media (prefers-reduced-motion: reduce) { .scout__launcher { animation: none; } .scout__launcher:hover { transform: none; } .scout__typing span { animation: none; } .scout__teaser { animation: none; } } /* ===================================================================== HOMEPAGE "EXPLORE" BAND — major / program / career, each rendered as a compact bordered table (blue header + name/stat rows). Equal columns; long names truncate to one line. Markup in public/index.php. ===================================================================== */ .explore-cols { display: grid; /* minmax(0, 1fr) (not bare 1fr) lets a track shrink below its content's min width, so a long unbreakable name truncates instead of widening the column past the container. */ grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; } @media (min-width: 1024px) { .explore-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } } .explore-col { display: flex; flex-direction: column; gap: var(--space-3); } /* The bordered "table": blue header (column title) sitting flush on top of the hairline-divided rows, all inside one rounded, bordered frame. */ .explore-table { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); } .explore-table__head { margin: 0; padding: var(--space-2-5) var(--space-3); background: var(--color-primary); color: var(--color-text-on-primary); text-align: center; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); } /* Column-header row: labels what the name + number columns mean (e.g. "Major" / "Median Earnings") so the figures aren't unexplained. */ .explore-table__cols { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-offwhite); border-bottom: var(--border-width) solid var(--color-divider-soft); } .explore-table__col-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-uppercase); color: var(--color-text-muted); } .explore-list { list-style: none; margin: 0; padding: 0; } .explore-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3); border-top: var(--border-width) solid var(--color-divider-soft); color: var(--color-text); text-decoration: none; } .explore-list li:first-child .explore-list__item { border-top: 0; } .explore-list__rank { flex-shrink: 0; width: var(--space-6); height: var(--space-6); display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .explore-list__name { flex: 1; min-width: 0; font-size: var(--font-size-sm); color: var(--color-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .explore-list__stat { flex-shrink: 0; font-size: var(--font-size-sm); color: var(--color-primary); font-weight: var(--font-weight-medium); } /* CTA sits inside the table frame as a centered "see all" footer row, separated from the data rows by a hairline. Reads as part of the table instead of a detached button. */ .explore-table__foot { display: block; padding: var(--space-3); border-top: var(--border-width) solid var(--color-divider-soft); text-align: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; text-transform: capitalize; /* match the site CTA convention: "Explore All Majors" */ transition: background var(--transition-fast), color var(--transition-fast); } .explore-table__foot:hover, .explore-table__foot:focus-visible { background: var(--color-offwhite); color: var(--color-accent); } /* ===================================================================== ABOUT "WHAT YOU'LL FIND HERE" — count grid linking to each archive. 10 stat cards (2 / 3 / 5 columns). Markup in public/about/index.php. ===================================================================== */ .find-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-2); } @media (min-width: 640px) { .find-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .find-grid { gap: var(--space-7); } } .find-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .find-card:hover, .find-card:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .find-card__head { display: flex; align-items: center; gap: var(--space-2-5); } .find-card__icon { display: inline-flex; flex-shrink: 0; color: var(--color-primary); } .find-card__icon svg { width: var(--space-6); height: var(--space-6); } .find-card__title { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); color: var(--color-secondary); } .find-card__blurb { margin: 0; flex: 1; font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-muted); } .find-card__divider { margin: 0; border: 0; border-top: var(--border-width) solid var(--color-border); } .find-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .find-card__pill { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-lavender); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } .find-card__cta { flex-shrink: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); white-space: nowrap; } .find-card:hover .find-card__cta, .find-card:focus-visible .find-card__cta { color: var(--color-accent); } /* ===================================================================== BACK TO TOP — long-page convenience, bottom-left (clear of Scout) Markup + behavior in templates/layout/page.php. ===================================================================== */ .back-to-top { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-fixed); display: grid; place-items: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-on-primary); box-shadow: var(--shadow-lg); /* hidden until scrolled; class-toggled (not the [hidden] attribute, which a display rule would override) so it can fade in/out */ opacity: 0; visibility: hidden; transform: translateY(var(--space-2)); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast), background var(--transition-fast); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background: var(--color-secondary); } .back-to-top svg { width: var(--space-5); height: var(--space-5); } @media (max-width: 639.98px) { .back-to-top { right: var(--space-3); bottom: var(--space-3); } } @media (prefers-reduced-motion: reduce) { .back-to-top { transform: none; transition: opacity var(--transition-fast), visibility var(--transition-fast); } }