Commit0e24bf6unknown_key
Merge pull request #36 from ccantynz-alt/claude/design-2026
Merge pull request #36 from ccantynz-alt/claude/design-2026 feat(design): conservative 2026 polish layer
1 file changed+111−2100e24bf69120534ba5875620b2084bba88df468b8
1 changed file+111−210
Modifiedsrc/views/layout.tsx+111−210View fileUnifiedSplit
@@ -1922,219 +1922,141 @@ const css = `
19221922 background: #fff;
19231923 }
19241924
1925 /* ============================================================ */
1926 /* Utilities — gradient text, surfaces, dot-grid, skeleton */
1927 /* ============================================================ */
1928 .gradient-text {
1929 background: var(--accent-gradient);
1930 -webkit-background-clip: text;
1931 background-clip: text;
1932 -webkit-text-fill-color: transparent;
1933 color: transparent;
1925 /* ============================================================
1926 * 2026 polish layer (purely additive — no layout changes).
1927 * Improves typography rendering, focus states, hover affordances,
1928 * and adds the gradient brand cue to primary buttons. Anything
1929 * that could alter dimensions stays in the rules above.
1930 * ============================================================ */
1931 html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
1932 body { letter-spacing: -0.005em; font-feature-settings: 'cv11', 'ss01', 'ss03'; }
1933 *::selection { background: rgba(168,85,247,0.35); color: var(--text); }
1934
1935 h1, h2, h3, h4 { letter-spacing: -0.018em; }
1936 h1 { letter-spacing: -0.025em; }
1937
1938 /* Smoother colour transitions everywhere links live */
1939 a { transition: color 120ms cubic-bezier(0.16,1,0.3,1); }
1940
1941 /* Buttons: focus rings + smoother transitions; primary gets the gradient */
1942 .btn {
1943 transition:
1944 background 120ms cubic-bezier(0.16,1,0.3,1),
1945 border-color 120ms cubic-bezier(0.16,1,0.3,1),
1946 transform 120ms cubic-bezier(0.16,1,0.3,1),
1947 box-shadow 120ms cubic-bezier(0.16,1,0.3,1);
19341948 }
1935 .surface { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); }
1936 .surface-elevated { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--elev-1); }
1937 .surface-glow {
1938 background: var(--bg-elevated);
1939 border: 1px solid var(--border-strong);
1940 border-radius: var(--r-lg);
1941 box-shadow: var(--elev-2), var(--accent-glow);
1949 .btn:active { transform: translateY(0.5px); }
1950 .btn:focus-visible {
1951 outline: none;
1952 box-shadow: 0 0 0 3px rgba(168,85,247,0.30);
19421953 }
1943
1944 /* Dot-grid background utility — for hero surfaces, empty states, terminal blocks */
1945 .dot-grid {
1946 background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
1947 background-size: 22px 22px;
1954 .btn-primary {
1955 background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
1956 border-color: transparent;
1957 box-shadow:
1958 inset 0 1px 0 rgba(255,255,255,0.15),
1959 0 1px 2px rgba(168,85,247,0.25);
19481960 }
1949 :root[data-theme='light'] .dot-grid {
1950 background-image: radial-gradient(rgba(15,16,28,0.06) 1px, transparent 1px);
1961 .btn-primary:hover {
1962 background: linear-gradient(135deg, #b766f8 0%, #22cce0 100%);
1963 filter: none;
1964 box-shadow:
1965 inset 0 1px 0 rgba(255,255,255,0.20),
1966 0 4px 12px rgba(168,85,247,0.30);
19511967 }
19521968
1953 /* Hairline-grid background utility */
1954 .grid-lines {
1955 background-image:
1956 linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
1957 linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
1958 background-size: 56px 56px;
1969 /* Inputs: cleaner focus ring + hover */
1970 .form-group input:hover,
1971 .form-group textarea:hover,
1972 .form-group select:hover {
1973 border-color: rgba(255,255,255,0.14);
19591974 }
1960
1961 /* Skeleton loader */
1962 .skeleton {
1963 background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-surface) 50%, var(--bg-tertiary) 100%);
1964 background-size: 200% 100%;
1965 animation: skel 1.4s ease-in-out infinite;
1966 border-radius: var(--r-sm);
1975 .form-group input:focus,
1976 .form-group textarea:focus,
1977 .form-group select:focus {
1978 border-color: rgba(168,85,247,0.55);
1979 box-shadow: 0 0 0 3px rgba(168,85,247,0.22);
1980 }
1981 :root[data-theme='light'] .form-group input:hover,
1982 :root[data-theme='light'] .form-group textarea:hover,
1983 :root[data-theme='light'] .form-group select:hover {
1984 border-color: rgba(0,0,0,0.18);
19671985 }
1968 skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
19691986
1970 /* Inline divider */
1971 .divider {
1972 border: 0;
1973 border-top: 1px solid var(--border);
1974 margin: var(--s-6) 0;
1987 /* Cards: subtle hover lift */
1988 .card {
1989 transition:
1990 border-color 160ms cubic-bezier(0.16,1,0.3,1),
1991 transform 160ms cubic-bezier(0.16,1,0.3,1),
1992 box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
19751993 }
1976 .divider-vert {
1977 width: 1px;
1978 align-self: stretch;
1979 background: var(--border);
1980 margin: 0 var(--s-3);
1994 .card:hover {
1995 border-color: rgba(255,255,255,0.18);
1996 transform: translateY(-1px);
1997 box-shadow: 0 8px 24px rgba(0,0,0,0.30);
1998 }
1999 :root[data-theme='light'] .card:hover {
2000 border-color: rgba(0,0,0,0.18);
2001 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
19812002 }
19822003
1983 /* Stagger fade-in helper — apply to a parent, animate children */
1984 .stagger > * {
1985 opacity: 0;
1986 transform: translateY(10px);
1987 animation: stagger-in 600ms var(--ease-out-expo) forwards;
1988 }
1989 .stagger > *:nth-child(1) { animation-delay: 0ms; }
1990 .stagger > *:nth-child(2) { animation-delay: 60ms; }
1991 .stagger > *:nth-child(3) { animation-delay: 120ms; }
1992 .stagger > *:nth-child(4) { animation-delay: 180ms; }
1993 .stagger > *:nth-child(5) { animation-delay: 240ms; }
1994 .stagger > *:nth-child(6) { animation-delay: 300ms; }
1995 .stagger > *:nth-child(7) { animation-delay: 360ms; }
1996 .stagger > *:nth-child(8) { animation-delay: 420ms; }
1997 stagger-in {
1998 to { opacity: 1; transform: translateY(0); }
1999 }
2000
2001 /* Tag pill — used for labels, topics */
2002 .tag {
2003 display: inline-flex;
2004 align-items: center;
2005 gap: 5px;
2006 padding: 2px 9px;
2007 border-radius: var(--r-full);
2008 font-size: 11px;
2009 font-weight: 500;
2010 background: var(--bg-tertiary);
2011 border: 1px solid var(--border);
2012 color: var(--text-muted);
2013 line-height: 1.5;
2014 font-family: var(--font-mono);
2015 letter-spacing: 0.01em;
2004 /* Issue / commit / panel rows: smoother hover */
2005 .issue-item, .commit-item {
2006 transition: background 120ms cubic-bezier(0.16,1,0.3,1);
20162007 }
2017 .tag-accent {
2018 background: var(--accent-gradient-faint);
2019 border-color: rgba(140,109,255,0.30);
2020 color: var(--accent);
2008 .repo-nav a {
2009 transition: color 120ms cubic-bezier(0.16,1,0.3,1),
2010 border-bottom-color 120ms cubic-bezier(0.16,1,0.3,1);
2011 }
2012 .nav-link {
2013 transition: color 120ms cubic-bezier(0.16,1,0.3,1);
20212014 }
20222015
2023 /* Command palette polish */
2024 .cmdk-item { transition: background var(--t-fast) var(--ease); }
2025 .cmdk-item:hover { background: var(--bg-hover) !important; }
2026 .cmdk-active { background: var(--accent-gradient-faint) !important; border-left: 2px solid var(--accent) !important; }
2027
2028 /* ============================================================ */
2029 /* Error pages (404 / 500) */
2030 /* ============================================================ */
2031 .error-page {
2032 text-align: center;
2033 padding: 96px 24px 80px;
2034 max-width: 720px;
2035 margin: 0 auto;
2036 position: relative;
2016 /* Auth card: subtle elevation so register/login feel premium */
2017 .auth-container {
2018 background: var(--bg-secondary);
2019 border: 1px solid var(--border);
2020 border-radius: var(--r-lg, 12px);
2021 padding: 32px;
2022 box-shadow: 0 4px 16px rgba(0,0,0,0.30), 0 0 0 1px var(--border);
20372023 }
2038 .error-page::before {
2039 content: '';
2040 position: absolute;
2041 top: 0; left: 50%;
2042 transform: translateX(-50%);
2043 width: 80%; height: 60%;
2044 background: radial-gradient(ellipse at center, rgba(140,109,255,0.10), transparent 65%);
2045 z-index: -1;
2046 pointer-events: none;
2024 :root[data-theme='light'] .auth-container {
2025 box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
20472026 }
2048 .error-page-code {
2049 font-family: var(--font-display);
2050 font-size: clamp(80px, 14vw, 160px);
2051 font-weight: 700;
2052 line-height: 0.95;
2053 letter-spacing: -0.05em;
2054 background: linear-gradient(180deg, var(--text) 0%, var(--text-faint) 100%);
2055 -webkit-background-clip: text;
2056 background-clip: text;
2057 -webkit-text-fill-color: transparent;
2058 margin-bottom: var(--s-4);
2059 opacity: 0.85;
2027 .auth-container h2 { letter-spacing: -0.025em; }
2028
2029 /* Empty state: dashed border, generous padding */
2030 .empty-state {
2031 border: 1px dashed var(--border);
2032 border-radius: var(--r-lg, 12px);
2033 background: var(--bg);
20602034 }
2061 .error-page-code-err {
2062 background: linear-gradient(180deg, var(--red) 0%, rgba(248,113,113,0.4) 100%);
2035
2036 /* Badges + commit-sha: smoother transition */
2037 .commit-sha, .badge { transition: all 120ms cubic-bezier(0.16,1,0.3,1); }
2038
2039 /* Gradient text utility — matches landing's accent treatment */
2040 .gradient-text {
2041 background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
20632042 -webkit-background-clip: text;
20642043 background-clip: text;
20652044 -webkit-text-fill-color: transparent;
20662045 }
2067 .error-page .eyebrow { justify-content: center; margin: 0 auto var(--s-3); }
2068 .error-page-title {
2069 font-size: clamp(28px, 4.5vw, 48px);
2070 line-height: 1.05;
2071 letter-spacing: -0.03em;
2072 margin-bottom: var(--s-4);
2073 }
2074 .error-page-sub {
2075 color: var(--text-muted);
2076 font-size: var(--t-md);
2077 line-height: 1.55;
2078 max-width: 480px;
2079 margin: 0 auto var(--s-8);
2080 }
2081 .error-page-actions {
2082 display: flex;
2083 gap: 12px;
2084 justify-content: center;
2085 flex-wrap: wrap;
2086 margin-bottom: var(--s-7);
2087 }
2088 .error-page-meta {
2089 color: var(--text-faint);
2090 font-size: 11px;
2091 }
2092 .error-page-trace {
2093 margin-top: var(--s-5);
2094 padding: 16px 20px;
2095 background: var(--bg-secondary);
2096 border: 1px solid rgba(248,113,113,0.30);
2097 border-radius: var(--r-md);
2098 font-family: var(--font-mono);
2099 font-size: 12px;
2100 color: var(--red);
2101 text-align: left;
2102 overflow-x: auto;
2103 white-space: pre-wrap;
2104 word-break: break-all;
2105 }
21062046
2107 /* Animated underline on inline content links inside markdown / prose */
2108 .prose a, .markdown-body a {
2109 position: relative;
2110 transition: color var(--t-fast) var(--ease);
2111 }
2112 .prose a::after, .markdown-body a::after {
2113 content: '';
2114 position: absolute;
2115 left: 0; right: 0; bottom: -1px;
2116 height: 1px;
2117 background: currentColor;
2118 opacity: 0.35;
2119 transform-origin: left;
2120 transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
2121 }
2122 .prose a:hover::after, .markdown-body a:hover::after {
2123 opacity: 1;
2124 transform: scaleX(1.02);
2125 }
2126
2127 /* Print: keep it readable */
2128 print {
2129 body::before, body::after { display: none; }
2130 header, footer, .prelaunch-banner, .repo-nav, .repo-header-actions,
2131 .nav-search, .nav-right, .btn { display: none !important; }
2132 body { background: #fff; color: #000; }
2133 a { color: #000; text-decoration: underline; }
2134 main { max-width: 100%; padding: 0; }
2047 /* Custom scrollbars (subtle, themed) */
2048 ::-webkit-scrollbar { width: 10px; height: 10px; }
2049 ::-webkit-scrollbar-track { background: transparent; }
2050 ::-webkit-scrollbar-thumb {
2051 background: rgba(255,255,255,0.06);
2052 border: 2px solid var(--bg);
2053 border-radius: 9999px;
21352054 }
2055 ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
2056 :root[data-theme='light'] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); }
2057 :root[data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }
21362058
2137 /* Reduced motion preference */
2059 /* Honour reduced-motion preference */
21382060 (prefers-reduced-motion: reduce) {
21392061 *, *::before, *::after {
21402062 animation-duration: 0.01ms !important;
@@ -2142,25 +2064,4 @@ const css = `
21422064 transition-duration: 0.01ms !important;
21432065 }
21442066 }
2145
2146 /* Tablet + below */
2147 (max-width: 768px) {
2148 main { padding: 20px 16px 40px; }
2149 header { padding: 0 16px; }
2150 .nav-search { display: none; }
2151 .repo-header { font-size: var(--t-md); }
2152 .card-grid { grid-template-columns: 1fr; }
2153 .auth-container { margin: 32px 16px; padding: 24px; }
2154 .visibility-options { flex-direction: column; }
2155 }
2156
2157 /* Scrollbar styling — subtle, themed */
2158 ::-webkit-scrollbar { width: 10px; height: 10px; }
2159 ::-webkit-scrollbar-track { background: transparent; }
2160 ::-webkit-scrollbar-thumb {
2161 background: var(--bg-surface);
2162 border: 2px solid var(--bg);
2163 border-radius: var(--r-full);
2164 }
2165 ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
21662067`;
21672068