/* ========================================================================== GROW Together MA — Shared Stylesheet Combines the styles used across all four pages (Home, Apprentices, Employers, About) into one file. Some rules are only used on specific pages, but keeping them together here keeps the project simple (one stylesheet to maintain instead of four near-duplicates). ========================================================================== */ :root{ --pine:#1F3D2E; --moss:#3F7355; --moss-dark:#2E5A41; --sage:#E6F1EF; --paper:#F6FAF9; --gold:#2E4B6B; --gold-dark:#22374F; --ink:#1B211D; --ink-soft:#4B564E; --line:#D6E4E0; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Public Sans',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.55; } h1,h2,h3,h4{font-family:'Spectral',Georgia,serif;font-weight:500;color:var(--pine);margin:0;line-height:1.15;letter-spacing:-0.01em} p{margin:0} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} img{max-width:100%} .container{max-width:1180px;margin:0 auto;padding:0 32px} .eyebrow{font-size:14px;font-weight:600;color:var(--moss-dark)} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:16px;border:1px solid transparent;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease} .btn-primary{background:var(--moss);color:#fff} .btn-primary:hover{background:var(--moss-dark)} .btn-gold{background:var(--gold);color:#fff} .btn-gold:hover{background:var(--gold-dark);color:#fff} .btn-outline{background:transparent;color:var(--pine);border:1px solid var(--pine)} .btn-outline:hover{background:var(--pine);color:#fff} .btn-outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)} .btn-outline-light:hover{background:#fff;color:var(--pine)} /* Nav links */ .navlink{font-size:15px;font-weight:500;color:var(--ink-soft);padding-bottom:4px;border-bottom:2px solid transparent} .navlink:hover{color:var(--pine)} .navlink.active{color:var(--pine);border-bottom-color:var(--gold)} .navlink-light{font-size:15px;font-weight:500;color:#CFE0D3;padding-bottom:4px;border-bottom:2px solid transparent} .navlink-light:hover{color:#fff} /* Nav dropdown ("Apply now") */ .nav-item{position:relative} .nav-dropdown{position:absolute;top:100%;left:0;margin-top:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.16);padding:14px 8px 8px 8px;min-width:190px;display:none;flex-direction:column;gap:2px;z-index:60} .nav-item:hover .nav-dropdown{display:flex} .nav-item.open .nav-dropdown{display:flex} /* touch/click fallback, see nav.js */ .nav-drop-link{padding:9px 12px;font-size:13.5px;font-weight:500;color:var(--ink-soft);border-radius:7px;white-space:nowrap} .nav-drop-link:hover{background:var(--sage);color:var(--pine)} /* Skip-to quick links row */ .skip-link{text-decoration:none} .skip-link:hover{text-decoration:underline} /* Cards */ .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px} .card-clickable{transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease} .card-clickable:hover{border-color:var(--moss);box-shadow:0 10px 24px rgba(31,61,46,.10);transform:translateY(-3px)} .tag{display:inline-block;font-size:13px;font-weight:600;color:var(--moss-dark);background:var(--sage);padding:4px 12px;border-radius:999px;width:fit-content} /* Footer links */ .foot-link{display:block;font-size:15px;color:#CFE0D3} .foot-link:hover{color:#fff} /* Checklist rows (✓ item) */ .check-row{display:flex;gap:12px;align-items:flex-start} /* FAQ accordion button */ .faq-btn{width:100%;text-align:left;background:none;border:none;padding:22px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Spectral',serif;font-size:18px;color:var(--pine)} /* Generic accordion/toggle button (curriculum, courses, required docs) */ .accordion-btn{width:100%;text-align:left;background:#fff;border:none;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Spectral',serif;font-size:20px;color:var(--pine)} .accordion-btn .icon{font-size:22px;color:var(--moss);min-width:20px;text-align:center} .accordion-panel{display:none} .accordion-panel.open{display:block} .course-btn{width:100%;text-align:left;background:none;border:none;padding:16px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer} .course-btn .icon{font-size:18px;color:var(--moss);min-width:18px;text-align:center} .course-body{display:none;padding:0 0 16px 0;color:var(--ink-soft);font-size:14px;line-height:1.6;max-width:640px} .course-body.open{display:block} /* Expand/collapse with fade (pathway cards, employer partners list) */ .expand-wrap{overflow:hidden;transition:max-height .35s ease} .expand-fade{position:absolute;bottom:0;left:0;right:0;pointer-events:none} /* Data tables (About page) */ .data-table{width:100%;border-collapse:collapse;font-size:13.5px} .data-table th{text-align:left;background:var(--pine);color:#fff;padding:11px 14px;font-weight:600;font-size:12.5px} .data-table td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-soft)} .data-table tr:nth-child(even) td{background:var(--sage)} .data-table td:first-child{color:var(--pine);font-weight:600} /* ========================================================================== Mobile navigation (hamburger menu) Not present in the original Claude-prototype design — added here because a hover-only dropdown and a wide inline nav don't work well with touch / narrow viewports. See js/nav.js for the toggle behavior. ========================================================================== */ .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; width:36px; height:36px; flex-direction:column; justify-content:center; align-items:center; gap:5px; } .nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease, opacity .2s ease} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Base nav layout (desktop default). Kept here rather than as an inline style on the