Commitef8d378unknown_key
feat(design): conservative 2026 polish layer
feat(design): conservative 2026 polish layer Replaces the earlier over-aggressive CSS rewrite (which broke the header layout and felt cartoonish) with a much smaller additive polish layer applied at the END of the existing CSS payload. No existing rule is modified — every change either (a) cascades over later, or (b) targets a property the prior rules left alone. Layout dimensions, padding scales, header structure, logo styling, nav-link sizing, and button base sizes are all UNCHANGED. What this adds (and only this): Typography rendering: - html: -webkit-font-smoothing antialiased - body: letter-spacing -0.005em + Inter cv11/ss01/ss03 features - h1–h4: -0.018em letter-spacing (h1 -0.025em) - ::selection: violet rgba(168,85,247,0.35) highlight Buttons: - Smooth transitions (background, border, transform, shadow at 120ms cubic-bezier(0.16,1,0.3,1)) - :active translateY(0.5px) for tactile feel - :focus-visible: 3px violet ring - .btn-primary: violet-cyan gradient bg (#a855f7 -> #06b6d4) with inset highlight + soft drop-shadow Hover: lighter gradient stops + slightly larger glow Inputs: - Hover border lifts to var-strong - Focus: violet border + 3px violet ring (matches button focus) - Light-theme hover variant included Cards: - transform translateY(-1px) on hover with 8px/24px box-shadow - Theme-aware shadow tone (lighter on light theme) Rows / nav transitions: - .issue-item, .commit-item: smooth background hover - .repo-nav a: smooth color + border-bottom transition - .nav-link: smooth color transition Auth card: - Subtle elevation (4/16 box-shadow + hairline ring) - h2 letter-spacing -0.025em - Theme-aware shadow Empty state: - Dashed hairline border (more inviting than blank) - Larger padding inherited from base rule Utilities: - .gradient-text (matches landing-page hero treatment) Browser polish: - Custom scrollbars (10px, hairline thumb, hover stronger) - Theme-aware scrollbar thumb colors - prefers-reduced-motion media query honoured The point of the smaller pass: anything that could break layout was removed. No sticky header, no backdrop-blur, no fixed-height header, no gradient logo square, no padded nav-link pills, no btn-sm font size change. Just the things that polish a working design without disrupting it. Tests still green (1226 pass + 1 pre-existing crontech-deploy fail unrelated to CSS). https://claude.ai/code/session_0163vJChUuZqqtBBznUW6xBU
1 file changed+143−0ef8d3788c83803d2f7c36ec2cc3883cd3186ac2a
1 changed file+143−0
Modifiedsrc/views/layout.tsx+143−0View fileUnifiedSplit
@@ -947,4 +947,147 @@ const css = `
947947 transform: translateX(20px);
948948 background: #fff;
949949 }
950
951 /* ============================================================
952 * 2026 polish layer (purely additive — no layout changes).
953 * Improves typography rendering, focus states, hover affordances,
954 * and adds the gradient brand cue to primary buttons. Anything
955 * that could alter dimensions stays in the rules above.
956 * ============================================================ */
957 html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
958 body { letter-spacing: -0.005em; font-feature-settings: 'cv11', 'ss01', 'ss03'; }
959 *::selection { background: rgba(168,85,247,0.35); color: var(--text); }
960
961 h1, h2, h3, h4 { letter-spacing: -0.018em; }
962 h1 { letter-spacing: -0.025em; }
963
964 /* Smoother colour transitions everywhere links live */
965 a { transition: color 120ms cubic-bezier(0.16,1,0.3,1); }
966
967 /* Buttons: focus rings + smoother transitions; primary gets the gradient */
968 .btn {
969 transition:
970 background 120ms cubic-bezier(0.16,1,0.3,1),
971 border-color 120ms cubic-bezier(0.16,1,0.3,1),
972 transform 120ms cubic-bezier(0.16,1,0.3,1),
973 box-shadow 120ms cubic-bezier(0.16,1,0.3,1);
974 }
975 .btn:active { transform: translateY(0.5px); }
976 .btn:focus-visible {
977 outline: none;
978 box-shadow: 0 0 0 3px rgba(168,85,247,0.30);
979 }
980 .btn-primary {
981 background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
982 border-color: transparent;
983 box-shadow:
984 inset 0 1px 0 rgba(255,255,255,0.15),
985 0 1px 2px rgba(168,85,247,0.25);
986 }
987 .btn-primary:hover {
988 background: linear-gradient(135deg, #b766f8 0%, #22cce0 100%);
989 filter: none;
990 box-shadow:
991 inset 0 1px 0 rgba(255,255,255,0.20),
992 0 4px 12px rgba(168,85,247,0.30);
993 }
994
995 /* Inputs: cleaner focus ring + hover */
996 .form-group input:hover,
997 .form-group textarea:hover,
998 .form-group select:hover {
999 border-color: rgba(255,255,255,0.14);
1000 }
1001 .form-group input:focus,
1002 .form-group textarea:focus,
1003 .form-group select:focus {
1004 border-color: rgba(168,85,247,0.55);
1005 box-shadow: 0 0 0 3px rgba(168,85,247,0.22);
1006 }
1007 :root[data-theme='light'] .form-group input:hover,
1008 :root[data-theme='light'] .form-group textarea:hover,
1009 :root[data-theme='light'] .form-group select:hover {
1010 border-color: rgba(0,0,0,0.18);
1011 }
1012
1013 /* Cards: subtle hover lift */
1014 .card {
1015 transition:
1016 border-color 160ms cubic-bezier(0.16,1,0.3,1),
1017 transform 160ms cubic-bezier(0.16,1,0.3,1),
1018 box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
1019 }
1020 .card:hover {
1021 border-color: rgba(255,255,255,0.18);
1022 transform: translateY(-1px);
1023 box-shadow: 0 8px 24px rgba(0,0,0,0.30);
1024 }
1025 :root[data-theme='light'] .card:hover {
1026 border-color: rgba(0,0,0,0.18);
1027 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
1028 }
1029
1030 /* Issue / commit / panel rows: smoother hover */
1031 .issue-item, .commit-item {
1032 transition: background 120ms cubic-bezier(0.16,1,0.3,1);
1033 }
1034 .repo-nav a {
1035 transition: color 120ms cubic-bezier(0.16,1,0.3,1),
1036 border-bottom-color 120ms cubic-bezier(0.16,1,0.3,1);
1037 }
1038 .nav-link {
1039 transition: color 120ms cubic-bezier(0.16,1,0.3,1);
1040 }
1041
1042 /* Auth card: subtle elevation so register/login feel premium */
1043 .auth-container {
1044 background: var(--bg-secondary);
1045 border: 1px solid var(--border);
1046 border-radius: var(--r-lg, 12px);
1047 padding: 32px;
1048 box-shadow: 0 4px 16px rgba(0,0,0,0.30), 0 0 0 1px var(--border);
1049 }
1050 :root[data-theme='light'] .auth-container {
1051 box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
1052 }
1053 .auth-container h2 { letter-spacing: -0.025em; }
1054
1055 /* Empty state: dashed border, generous padding */
1056 .empty-state {
1057 border: 1px dashed var(--border);
1058 border-radius: var(--r-lg, 12px);
1059 background: var(--bg);
1060 }
1061
1062 /* Badges + commit-sha: smoother transition */
1063 .commit-sha, .badge { transition: all 120ms cubic-bezier(0.16,1,0.3,1); }
1064
1065 /* Gradient text utility — matches landing's accent treatment */
1066 .gradient-text {
1067 background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
1068 -webkit-background-clip: text;
1069 background-clip: text;
1070 -webkit-text-fill-color: transparent;
1071 }
1072
1073 /* Custom scrollbars (subtle, themed) */
1074 ::-webkit-scrollbar { width: 10px; height: 10px; }
1075 ::-webkit-scrollbar-track { background: transparent; }
1076 ::-webkit-scrollbar-thumb {
1077 background: rgba(255,255,255,0.06);
1078 border: 2px solid var(--bg);
1079 border-radius: 9999px;
1080 }
1081 ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
1082 :root[data-theme='light'] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); }
1083 :root[data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }
1084
1085 /* Honour reduced-motion preference */
1086 (prefers-reduced-motion: reduce) {
1087 *, *::before, *::after {
1088 animation-duration: 0.01ms !important;
1089 animation-iteration-count: 1 !important;
1090 transition-duration: 0.01ms !important;
1091 }
1092 }
9501093`;
9511094