Skip to content

Commit 2039877

Browse files
pusewiczpusewicz
committed
Add team page CSS
1 parent 5002caa commit 2039877

1 file changed

Lines changed: 235 additions & 0 deletions

File tree

‎assets/css/redesign.css‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1841,3 +1841,238 @@ ul {
18411841
}
18421842

18431843
}
1844+
1845+
/* ------------------------------------------------------------
1846+
Team — Page Header
1847+
------------------------------------------------------------ */
1848+
.team-header {
1849+
background: var(--color-bg-warm);
1850+
border-bottom: 1px solid var(--color-border);
1851+
padding: 80px var(--container-padding) 64px;
1852+
}
1853+
1854+
.team-header__inner {
1855+
max-width: var(--container-max-width);
1856+
margin: 0 auto;
1857+
display: flex;
1858+
align-items: flex-end;
1859+
justify-content: space-between;
1860+
gap: 40px;
1861+
}
1862+
1863+
.team-header__heading {
1864+
font-family: var(--font-heading);
1865+
font-size: 56px;
1866+
font-weight: 700;
1867+
letter-spacing: -0.03em;
1868+
line-height: 1.07;
1869+
color: var(--color-black);
1870+
margin-bottom: 20px;
1871+
}
1872+
1873+
.team-header__description {
1874+
font-size: 17px;
1875+
line-height: 1.65;
1876+
color: var(--color-muted);
1877+
max-width: 520px;
1878+
}
1879+
1880+
.team-header__link {
1881+
font-size: 14px;
1882+
font-weight: 500;
1883+
color: var(--color-red);
1884+
flex-shrink: 0;
1885+
padding-bottom: 4px;
1886+
transition: opacity 0.15s ease;
1887+
}
1888+
1889+
.team-header__link:hover {
1890+
opacity: 0.75;
1891+
}
1892+
1893+
/* ------------------------------------------------------------
1894+
Team — Shared Section Pattern
1895+
------------------------------------------------------------ */
1896+
.team-section__inner {
1897+
max-width: var(--container-max-width);
1898+
margin: 0 auto;
1899+
}
1900+
1901+
.team-section__heading {
1902+
display: flex;
1903+
align-items: center;
1904+
gap: 12px;
1905+
padding-bottom: 24px;
1906+
margin-bottom: 48px;
1907+
border-bottom: 1px solid var(--color-border);
1908+
}
1909+
1910+
.team-section__bar {
1911+
display: block;
1912+
width: 20px;
1913+
height: 2px;
1914+
background: var(--color-red);
1915+
flex-shrink: 0;
1916+
}
1917+
1918+
.team-section__title {
1919+
font-family: var(--font-heading);
1920+
font-size: 22px;
1921+
font-weight: 700;
1922+
letter-spacing: -0.01em;
1923+
color: var(--color-black);
1924+
line-height: 28px;
1925+
}
1926+
1927+
/* ------------------------------------------------------------
1928+
Team — Organization Members
1929+
------------------------------------------------------------ */
1930+
.team-members {
1931+
padding: 80px var(--container-padding) 0;
1932+
}
1933+
1934+
.team-members__grid {
1935+
display: flex;
1936+
flex-wrap: wrap;
1937+
gap: 1px;
1938+
background: var(--color-border);
1939+
margin-bottom: 80px;
1940+
}
1941+
1942+
.team-member {
1943+
display: flex;
1944+
flex-direction: column;
1945+
align-items: center;
1946+
width: 256px;
1947+
padding: 32px 24px;
1948+
gap: 12px;
1949+
background: var(--color-white);
1950+
flex-shrink: 0;
1951+
transition: background 0.15s ease;
1952+
}
1953+
1954+
.team-member:hover {
1955+
background: var(--color-bg-warm);
1956+
}
1957+
1958+
.team-member__avatar {
1959+
width: 72px;
1960+
height: 72px;
1961+
border-radius: 50%;
1962+
overflow: hidden;
1963+
flex-shrink: 0;
1964+
}
1965+
1966+
.team-member__avatar img {
1967+
width: 72px;
1968+
height: 72px;
1969+
display: block;
1970+
}
1971+
1972+
.team-member__info {
1973+
display: flex;
1974+
flex-direction: column;
1975+
align-items: center;
1976+
gap: 4px;
1977+
}
1978+
1979+
.team-member__name {
1980+
font-family: var(--font-heading);
1981+
font-size: 15px;
1982+
font-weight: 600;
1983+
letter-spacing: -0.01em;
1984+
color: var(--color-black);
1985+
text-align: center;
1986+
line-height: 18px;
1987+
}
1988+
1989+
.team-member__handle {
1990+
font-size: 13px;
1991+
color: var(--color-red);
1992+
line-height: 16px;
1993+
}
1994+
1995+
/* ------------------------------------------------------------
1996+
Team — Developers
1997+
------------------------------------------------------------ */
1998+
.team-developers {
1999+
padding: 0 var(--container-padding) 80px;
2000+
}
2001+
2002+
.team-developers__subtitle {
2003+
font-size: 13px;
2004+
color: var(--color-muted);
2005+
margin-left: 4px;
2006+
line-height: 16px;
2007+
}
2008+
2009+
.team-developers__names {
2010+
display: flex;
2011+
flex-wrap: wrap;
2012+
gap: 8px;
2013+
align-items: baseline;
2014+
}
2015+
2016+
.team-developers__name {
2017+
font-size: 14px;
2018+
color: #3a3530;
2019+
line-height: 32px;
2020+
}
2021+
2022+
.team-developers__dot {
2023+
font-size: 14px;
2024+
color: var(--color-border);
2025+
line-height: 32px;
2026+
}
2027+
2028+
.team-developers__more {
2029+
font-size: 14px;
2030+
font-weight: 500;
2031+
color: var(--color-red);
2032+
transition: opacity 0.15s ease;
2033+
}
2034+
2035+
.team-developers__more:hover {
2036+
opacity: 0.75;
2037+
}
2038+
2039+
/* ------------------------------------------------------------
2040+
Team — Responsive ≤1024px
2041+
------------------------------------------------------------ */
2042+
@media (max-width: 1024px) {
2043+
.team-header__inner {
2044+
flex-direction: column;
2045+
align-items: flex-start;
2046+
gap: 24px;
2047+
}
2048+
2049+
.team-header__heading {
2050+
font-size: 40px;
2051+
}
2052+
2053+
.team-member {
2054+
width: calc(25% - 1px);
2055+
}
2056+
}
2057+
2058+
/* ------------------------------------------------------------
2059+
Team — Responsive ≤768px
2060+
------------------------------------------------------------ */
2061+
@media (max-width: 768px) {
2062+
.team-header__heading {
2063+
font-size: 32px;
2064+
}
2065+
2066+
.team-member {
2067+
width: calc(50% - 1px);
2068+
}
2069+
}
2070+
2071+
/* ------------------------------------------------------------
2072+
Team — Responsive ≤480px
2073+
------------------------------------------------------------ */
2074+
@media (max-width: 480px) {
2075+
.team-member {
2076+
width: 100%;
2077+
}
2078+
}

0 commit comments

Comments
 (0)