/* ============================================================ Sherwood Portfolio — shared partials Nav, mode toggle, footer. Each component is mode-aware via [data-mode] on . ============================================================ */ /* ---------- Nav ---------- */ .site-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); max-width: var(--layout-wide); margin: 0 auto; } .site-nav .brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-md); letter-spacing: -0.01em; } .site-nav .brand-mark { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-text); color: var(--color-bg); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 14px; } [data-mode="recruiter"] .site-nav .brand-mark { background: var(--card-tint-blush); color: var(--card-tint-blush-fg); } .site-nav .links { display: inline-flex; gap: var(--space-6); align-items: center; } .site-nav .links a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); } [data-mode="hiring-manager"] .site-nav .links a, [data-mode="designer"] .site-nav .links a { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; } .site-nav .links a:hover { color: var(--color-text); } .site-nav .links a[aria-current="page"] { color: var(--color-text); } /* ---------- Mode toggle (sliding pill) ---------- */ .mode-toggle { --mode-idx: 0; position: relative; display: inline-flex; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; } [data-mode="hiring-manager"] .mode-toggle, [data-mode="designer"] .mode-toggle { border-radius: 0; background: transparent; border-color: var(--color-border-strong); } .mode-toggle::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); background: var(--color-text); border-radius: var(--radius-full); transform: translateX(calc(var(--mode-idx) * 100%)); transition: transform var(--duration-default) var(--ease-spring); z-index: 0; } [data-mode="hiring-manager"] .mode-toggle::before, [data-mode="designer"] .mode-toggle::before { border-radius: 0; background: var(--color-text); top: 0; bottom: 0; left: 0; width: calc(100% / 3); transition: transform var(--duration-default) var(--ease-spring); } .mode-toggle button { position: relative; z-index: 1; background: transparent; border: 0; padding: 7px 14px; font: inherit; color: var(--color-text-secondary); cursor: pointer; border-radius: var(--radius-full); transition: color var(--duration-fast) var(--ease-out); white-space: nowrap; } [data-mode="hiring-manager"] .mode-toggle button, [data-mode="designer"] .mode-toggle button { border-radius: 0; padding: 8px 14px; } .mode-toggle button[aria-pressed="true"] { color: var(--color-bg); } .mode-toggle button:hover { color: var(--color-text); } .mode-toggle button[aria-pressed="true"]:hover { color: var(--color-bg); } /* ---------- Mobile nav ---------- */ @media (max-width: 720px) { .site-nav { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); } .site-nav .links { order: 3; flex-basis: 100%; justify-content: flex-start; gap: var(--space-4); } .mode-toggle { font-size: 10px; } .mode-toggle button { padding: 6px 10px; } } /* ---------- Site footer (shared) ---------- */ .site-footer { margin-top: var(--space-24); padding: var(--space-16) var(--space-6) var(--space-8); border-top: 1px solid var(--color-border); background: var(--color-bg); } .site-footer .inner { max-width: var(--layout-wide); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-12); align-items: start; } .site-footer h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: var(--tracking-tightest); line-height: 1; margin: 0 0 var(--space-4); } [data-mode="hiring-manager"] .site-footer h2 em, [data-mode="designer"] .site-footer h2 em { font-family: Georgia, serif; font-style: italic; font-weight: 500; } .site-footer p { color: var(--color-text-secondary); font-size: var(--text-md); max-width: 44ch; margin: 0; } .site-footer .col h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-tertiary); font-weight: var(--weight-regular); margin: 0 0 var(--space-3); } .site-footer .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .site-footer .col a { color: var(--color-text); text-decoration: none; font-size: var(--text-md); } .site-footer .col a:hover { color: var(--color-accent); } .site-footer .colophon { grid-column: 1 / -1; margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); } @media (max-width: 720px) { .site-footer .inner { grid-template-columns: 1fr; gap: var(--space-8); } } /* ---------- Buttons (shared) ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 18px; text-decoration: none; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid transparent; border-radius: var(--radius-pill); white-space: nowrap; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } [data-mode="hiring-manager"] .btn, [data-mode="designer"] .btn { border-radius: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-accent); color: var(--color-accent-fg); border-color: var(--color-accent); } .btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } .btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .btn-secondary:hover { border-color: var(--color-text); } .btn svg { transition: transform var(--duration-fast) var(--ease-out); } .btn:hover svg { transform: translateX(2px); } /* ---------- Page shell ---------- */ .page { max-width: var(--layout-wide); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); } @media (max-width: 720px) { .page { padding: var(--space-6) var(--space-4) var(--space-10); } } /* ---------- Section heads (booklet modes) ---------- */ .section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-strong); margin-bottom: var(--space-8); } .section-head h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); margin: 0; } .section-head .count { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-tertiary); }