anthonysnead.github.io/outreach.css at main · anthonysnead/anthonysnead.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* Global type */
* {
  font-family: "Times New Roman", Times, serif !important;
}

html {
  scroll-padding-top: 90px;
}

/* IMPORTANT:
   Remove the old spacer. This was creating the white gap.
   (You had body::before height: 60px AND body padding-top.)
*/
body::before {
  content: none !important;
  display: none !important;
}

/* Single, clean solution for fixed-top navbar overlap */
body {
  padding-top: 74px; /* adjust to 70-80 if your navbar height differs */
}


/* Header (Research-style) */
.outreach-header {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.header-line {
  height: 2px;
  background-color: #1f1f1f;
}

.header-title {
  letter-spacing: 1px;
}

.header-subtitle {
  font-size: 1.05rem;
}

/* Logo grid */
.logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centers final row */
  gap: 18px;
}

.logo-tile {
  width: 190px;  /* bigger so logos are readable */
  height: 110px; /* bigger tile */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.logo-tile img {
  max-width: 100%;
  max-height: 78px; /* larger image */
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.92;
  transition: filter 120ms ease, opacity 120ms ease;
}

.logo-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
}

.logo-tile:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Cards */
.outreach-card {
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

/* subtle accent bar so it’s not bland */
.outreach-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: rgba(0, 0, 0, 0.12);
}

.outreach-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Icon pill */
.outreach-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}

.outreach-icon i {
  font-size: 1.25rem;
}

/* Year badge styling (a little nicer than default) */
.outreach-year {
  background: #212529;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.2px;
}