/* neal.css — distilled neal.fun house stylesheet. Every value extracted verbatim from the live site (see references/design-system.md). Registers: default = game/toy (gray page, white cards). Add .neal-page--essay (cream) or .neal-page--museum (parchment) to . */ @font-face { font-family: Roboto; src: url("fonts/roboto-medium.woff2") format("woff2"); font-display: swap; } @font-face { font-family: Roboto; font-weight: 700; src: url("fonts/roboto-bold.woff2") format("woff2"); font-display: swap; } @font-face { font-family: RobotoLight; src: url("fonts/roboto-light.woff2") format("woff2"); font-display: swap; } :root { /* neutrals (the skeleton) */ --page: rgb(241, 242, 246); /* .simple-page gray */ --card: rgb(255, 255, 255); --ink: rgb(0, 0, 0); --ink-soft: rgb(51, 51, 51); --hairline: rgb(181, 181, 181); --placeholder: rgb(231, 231, 231); --cream: rgb(255, 245, 217); /* the house CTA fill */ /* house accents — pick ONE per app and use it for the meaningful element only */ --accent: rgb(46, 204, 113); /* money/progress green */ --accent-grad: linear-gradient(rgb(46, 204, 113), rgb(26, 188, 156)); --coral: rgb(255, 121, 121); --coral-pink: rgb(255, 107, 129); --sell-grad: linear-gradient(rgb(245, 59, 130), rgb(245, 59, 87)); /* radii */ --r-btn: 5px; /* buttons, inputs, chips — the default */ --r-card: 10px; /* content cards */ --r-poster: 15px; /* project/related cards (aspect 285/107) */ --r-pill: 12px; /* pills + modals */ /* THE hover physics */ --hover-shadow: rgba(0, 0, 0, 0.11) 3px 6px 6px 0px; --active-shadow: rgba(0, 0, 0, 0.15) 3px 6px 6px 0px; --hover-scale: 1.023; --press-scale: 1.011; --t-hover: 0.07s linear; /* micro-interactions: fast + tiny */ --t-content: 0.3s ease-in-out; /* content changes: slow + gentle */ --t-melt: 0.7s ease-in-out; /* good↔bad state recolors */ --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* reward moments ONLY */ --ease-out-quint: cubic-bezier(0.25, 1, 0.5, 1); --sans: Roboto, sans-serif, system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, "Noto Sans"; --sans-light: RobotoLight, sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans"; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--page); color: var(--ink-soft); font-family: var(--sans); font-size: 16px; -webkit-font-smoothing: antialiased; min-height: 100vh; } /* ── registers ─────────────────────────────────────────────── */ .neal-page--essay { background: rgb(255, 250, 233); color: rgb(0, 0, 0); } .neal-page--museum { background: rgb(234, 227, 208); color: rgb(68, 19, 4); } .neal-page--museum .neal-card { box-shadow: rgba(79, 34, 34, 0.25) 3px 3px 5px 3px; } /* ── wordmark: top-left, image or bold text, micro-bounce hover ── */ .site-logo { color: var(--ink); display: inline-block; font-family: var(--sans); font-size: 21px; font-weight: 700; left: 16px; letter-spacing: 0.5px; position: absolute; text-decoration: none; top: 16px; transition: transform var(--t-hover); z-index: 10; } .site-logo img { width: 132px; } @media (hover: hover) { .site-logo:hover { transform: scale(1.033); } } .site-logo:active { transform: scale(1); } /* ── title card: white 32px/700 card near the top ── */ .title-card { background: var(--card); border-radius: var(--r-card); color: var(--ink); font-size: 32px; font-weight: 700; margin: 72px auto 8px; max-width: max-content; padding: 14px 26px; text-align: center; } .title-tagline { color: var(--ink-soft); font-family: var(--sans-light); font-size: 17px; margin: 0 auto 40px; text-align: center; } /* essay/museum titles go serif instead */ .neal-page--essay .title-card, .neal-page--museum .title-card { background: none; font-family: Georgia, "PT Serif", "Times New Roman", serif; font-size: 42px; } /* ── content column ── */ .neal-main { margin: 0 auto; max-width: 1000px; padding: 0 25px 60px; } /* ── the canonical cream button ── */ .neal-btn { background: var(--cream); border: 1px solid rgb(0, 0, 0); border-radius: var(--r-btn); color: var(--ink); cursor: pointer; font-family: var(--sans-light); font-size: 17px; padding: 7px 12px; transition: transform var(--t-hover), box-shadow var(--t-hover); } @media (hover: hover) { .neal-btn:hover { box-shadow: var(--hover-shadow); transform: scale(1.03); } } .neal-btn:active { box-shadow: var(--active-shadow); transform: scale(var(--press-scale)); } /* accent variant — the ONE saturated element */ .neal-btn--accent { background: var(--accent-grad); border: none; color: #fff; font-weight: 700; } .neal-btn:disabled { background: var(--page); border-color: var(--hairline); color: var(--hairline); cursor: default; } /* ── white content card ── */ .neal-card { background: var(--card); border-radius: var(--r-card); padding: 20px 24px; } /* ── item chip (small resting-state pill) ── */ .neal-chip { background: var(--card); border: 1px solid #c8c8c8; border-radius: var(--r-btn); cursor: pointer; display: inline-block; font-size: 15.4px; line-height: 1em; padding: 8px 8px 7px; transition: background 0.15s linear; white-space: nowrap; } @media (hover: hover) { .neal-chip:hover { background: linear-gradient(0deg, rgb(214, 252, 255) 50%, rgb(255, 255, 255) 90%); } } /* ── quiet hairline pill (social buttons) ── */ .neal-pill { align-items: center; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-pill); color: var(--ink); display: inline-flex; font-family: var(--sans-light); font-size: 20px; gap: 8px; padding: 10px 18px 8px 12px; text-decoration: none; transition: transform 75ms ease-in-out; } @media (hover: hover) { .neal-pill:hover { box-shadow: rgba(0, 0, 0, 0.05) 3px 3px 5px 0px; transform: scale(1.03); } } /* ── two-tone status card (pass/fail, password-game pattern) ── */ .status-card { animation: nealFadeIn 0.5s ease-in-out forwards; background: rgb(227, 255, 227); border: 1px solid rgb(38, 123, 48); border-radius: var(--r-card); box-shadow: rgba(60, 155, 71, 0.2) 3px 3px 5px 2px; font-size: 18px; line-height: 1.53em; margin: 22px auto; opacity: 0; overflow: hidden; transition: background-color var(--t-melt); } .status-card-top { background: rgb(174, 243, 174); display: block; padding: 8px 16px 5px; transition: background-color var(--t-melt); } .status-card-body { padding: 11px 17px 15px; } .status-card--error { background: rgb(255, 236, 236); border-color: red; box-shadow: rgba(255, 0, 0, 0.12) 2px 2px 5px 2px; } .status-card--error .status-card-top { background: rgb(255, 199, 199); } /* ── big input (password-game pattern) ── */ .neal-input { background: var(--card); border: 1px solid rgb(157, 157, 157); border-radius: var(--r-card); font-family: monospace; font-size: 28px; min-height: 64px; padding: 15px; width: 100%; transition: border-color 0.15s ease-in-out; } .neal-input:focus { border-color: rgb(0, 0, 0); outline: none; } /* ── sticky live-number bar (speed/spend pattern) ── */ .sticky-counter { background: var(--accent-grad); color: #fff; font-size: 28px; font-weight: 700; padding: 12px 0; position: sticky; text-align: center; top: 0; z-index: 5; } /* ── modal system ── */ .neal-modal-backdrop { align-items: center; background: rgba(0, 0, 0, 0.5); display: flex; inset: 0; justify-content: center; position: fixed; z-index: 100; } .neal-modal { background: var(--card); border-radius: var(--r-pill); box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px 0px; font-family: var(--sans-light); font-size: 21px; max-width: 360px; padding: 27px 30px 28px; transition: transform 0.35s var(--ease-out-quint); } /* ── footer: related grid + newsletter + logo ── */ .related-posts { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); margin: 60px auto 0; max-width: 640px; padding: 0 25px; } .page-link { aspect-ratio: 285 / 107; background: var(--placeholder); border-radius: var(--r-poster); display: block; overflow: hidden; position: relative; transition: transform var(--t-hover), box-shadow var(--t-hover); will-change: transform; } .page-link img { border-radius: var(--r-poster); height: 100%; object-fit: cover; width: 100%; } @media (hover: hover) { .page-link:hover { box-shadow: var(--hover-shadow); transform: scale(var(--hover-scale)); } } .page-link:active { box-shadow: var(--active-shadow); transform: scale(var(--press-scale)); } .newsletter { align-items: center; display: flex; gap: 10px; justify-content: center; margin: 36px auto 48px; } .newsletter-label { font-family: var(--sans-light); font-size: 17px; } .newsletter input { border: 1px solid var(--hairline); border-radius: var(--r-btn); font-family: var(--sans-light); font-size: 16px; padding: 8px 10px; } .footer-logo { display: block; font-weight: 700; margin: 0 auto 40px; text-align: center; } /* ── keyframes (the house motion vocabulary) ── */ @keyframes nealFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes nealPulse { from { opacity: 0.2; } to { opacity: 0.7; } } /* waiting-on-compute: 0.8s alternate infinite */ @keyframes nealHeartbeat{ 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } } /* reward: once, with var(--spring) */ @keyframes nealShake { from { transform: translate(-1px, 1px) rotate(-0.5deg); } to { transform: translate(1px, -1px) rotate(0.5deg); } } /* chaos: 0.08s alternate infinite */ @keyframes nealBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } } /* idle CTA invite: 2s+ infinite */ @keyframes nealFlipIn { from { transform: rotateX(90deg); } to { transform: rotateX(0); } } /* placard entrance */ @keyframes nealSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* FLIP list re-sort (Vue TransitionGroup equivalent) */ .list-move { transition: transform 0.5s ease-in-out; } /* ── responsive: grids collapse 3→2→1, nothing hidden ── */ @media only screen and (max-width: 1130px) { .posts-grid { gap: 15px 18px; grid-template-columns: 1fr 1fr; } } @media only screen and (max-width: 700px) { .neal-main { padding: 0 15px 40px; } .title-card { font-size: 26px; margin-top: 64px; } } @media only screen and (max-width: 600px) { .posts-grid, .related-posts { gap: 11px; grid-template-columns: 1fr; padding: 0 8px; } .newsletter { flex-wrap: wrap; } }