/* components.css (SCOPED) Applies ONLY when is present. This prevents leaking styles into your Next.js frontend. */ :where(body[data-sahara]) { margin: 0; font-family: var(--font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif); background: var(--neutral-silver, #f5f7fa); color: var(--neutral-black, #1d1d1d); } /* safer baseline inside Sahara scope only */ :where(body[data-sahara]) *, :where(body[data-sahara]) *::before, :where(body[data-sahara]) *::after { box-sizing: border-box; } :where(body[data-sahara]) img, :where(body[data-sahara]) svg, :where(body[data-sahara]) video, :where(body[data-sahara]) canvas { max-width: 100%; height: auto; } /* layout */ :where(body[data-sahara]) .container { width: min(1120px, 92vw); margin: 0 auto; } :where(body[data-sahara]) .section { padding: 72px 0; } :where(body[data-sahara]) .surface { background: var(--neutral-white, #ffffff); } /* text */ :where(body[data-sahara]) .muted { color: var(--neutral-grey, #717171); } :where(body[data-sahara]) .kicker { color: var(--primary, #4caf4f); font-weight: 700; } /* cards */ :where(body[data-sahara]) .card{ background:var(--neutral-white); border:1px solid rgba(171,190,209,.35); border-radius:var(--radius-md); box-shadow:var(--shadow-2); /* pop animation */ transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; will-change: transform; } :where(body[data-sahara]) .card:hover{ transform: translateY(-8px) scale(1.03); box-shadow: 0 16px 40px rgba(0,0,0,.10); border-color: rgba(171,190,209,.65); } @media (prefers-reduced-motion: reduce){ .card, .card:hover{ transition:none; transform:none; } } :where(body[data-sahara]) .card-pad { padding: 22px; } /* links */ :where(body[data-sahara]) .link { color: var(--primary, #4caf4f); font-weight: 600; } :where(body[data-sahara]) .link:hover { color: var(--primary-2, #43a046); } /* buttons */ :where(body[data-sahara]) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius-sm, 12px); border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: 150ms ease; } :where(body[data-sahara]) .btn-primary { background: var(--primary, #4caf4f); color: var(--neutral-white, #ffffff); } :where(body[data-sahara]) .btn-primary:hover { background: var(--primary-2, #43a046); } :where(body[data-sahara]) .btn-primary:active { background: var(--primary-3, #388e3b); } :where(body[data-sahara]) .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(76, 175, 79, 0.22); } :where(body[data-sahara]) .btn-primary:disabled { background: var(--neutral-greyblue, #abbed1); cursor: not-allowed; } :where(body[data-sahara]) .btn-secondary { background: transparent; color: var(--primary, #4caf4f); border-color: rgba(76, 175, 79, 0.45); } :where(body[data-sahara]) .btn-secondary:hover { background: var(--primary-t5, rgba(76, 175, 79, 0.05)); border-color: var(--primary, #4caf4f); } :where(body[data-sahara]) .btn-tertiary { background: transparent; color: var(--primary, #4caf4f); padding: 10px 12px; } :where(body[data-sahara]) .btn-tertiary:hover { background: var(--primary-t5, rgba(76, 175, 79, 0.05)); } /* Work media layout */ #work .richtext{ margin-top: 16px; } /* Images: clean tiles */ #work .richtext img{ width: 100%; height: auto; border-radius: 18px; box-shadow: 0 12px 28px rgba(0,0,0,.08); } /* Make embedded videos behave nicely */ #work .richtext iframe{ width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 18px; box-shadow: 0 12px 28px rgba(0,0,0,.08); }