mirror of
https://git.coop/cotech/website.git
synced 2025-10-06 14:34:35 +00:00
f2fea22233
Before this commit the logos were a fairly garish mixture of different colours, and many of the logos didn't work very well on a white background. In keeping with the new brand guidelines we've applied a greyscale filter to the logos, and Natasha has created some variants of the existing logos that work better on a black background. I've decided to keep all the original logos and their variants in case we want to switch again later, and chosen which one to used based on my taste. This seems to improve things and we can ask co-ops to provide us with higher res logos that work on black backgrounds later if we want to improve things further. Co-authored-by: Natasha Natarajan <natasha@outlandish.com>
444 lines
7.6 KiB
CSS
444 lines
7.6 KiB
CSS
@font-face {
|
|
font-family: 'open_sansregular';
|
|
src: url("/assets/fonts/OpenSans-Regular-webfont.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'open_sansbold';
|
|
src: url("/assets/fonts/OpenSans-Bold-webfont.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'source_serif_regular';
|
|
src: url("/assets/fonts/SourceSerif4-Regular.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'source_serif_bold';
|
|
src: url("/assets/fonts/SourceSerif4-Bold.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
--space-unit: 1em;
|
|
--space-xxs: calc(0.25 * var(--space-unit));
|
|
--space-xs: calc(0.5 * var(--space-unit));
|
|
--space-sm: calc(0.75 * var(--space-unit));
|
|
--space-md: calc(1.25 * var(--space-unit));
|
|
--space-lg: calc(2 * var(--space-unit));
|
|
--space-xl: calc(3.25 * var(--space-unit));
|
|
--space-xxl: calc(5.25 * var(--space-unit));
|
|
|
|
--cotech-white: white;
|
|
--cotech-black: #000000;
|
|
--cotech-light-grey: #646464;
|
|
--cotech-grey: #7b8290;
|
|
--cotech-dark-grey: #1e2637;
|
|
--cotech-light-blue: #7b8290;
|
|
--cotech-blue: #2da9d7;
|
|
--cotech-blue-10-percent-tint: #42b2db;
|
|
--cotech-dark-blue: #212a3d;
|
|
--cotech-darker-blue: #1e2637;
|
|
}
|
|
|
|
p, li, a {
|
|
font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: "source_serif_regular", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--cotech-black);
|
|
}
|
|
|
|
.default-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.page-heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
padding: var(--space-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.page-heading h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.page-heading p {
|
|
max-width: 60ch;
|
|
}
|
|
|
|
section.content {
|
|
padding: var(--space-sm);
|
|
max-width: 900px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (width >= 480px) {
|
|
section.content {
|
|
padding: var(--space-md);
|
|
}
|
|
}
|
|
|
|
section.content p {
|
|
font-size: 1rem;
|
|
line-height: 1.6rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
section.content ul {
|
|
font-size: 1rem;
|
|
line-height: 1.6rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
section.content h2 {
|
|
font-size: 1.5rem;
|
|
line-height: 1.6rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
padding: var(--space-lg) var(--space-md);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.header a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.header_logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.header_menu-list {
|
|
font-family: 'open_sansbold';
|
|
list-style-type: none;
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
font-size: 1rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.header_menu-list a {
|
|
font-family: 'open_sansbold';
|
|
}
|
|
|
|
.header_burger-btn {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: var(--space-xs);
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
.header_close-icon {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (width < 480px) {
|
|
.header {
|
|
position: relative;
|
|
}
|
|
|
|
.header_burger-btn {
|
|
display: block;
|
|
}
|
|
|
|
.header_menu-list {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--cotech-black);
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--space-lg);
|
|
font-size: 1.5rem;
|
|
z-index: 1000;
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.header_menu-list.active {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.header_burger-btn.active .header_burger-icon {
|
|
display: none;
|
|
}
|
|
|
|
.header_burger-btn.active .header_close-icon {
|
|
display: block;
|
|
}
|
|
|
|
.header_burger-btn {
|
|
position: relative;
|
|
z-index: 1001;
|
|
}
|
|
}
|
|
|
|
.hero {
|
|
width: 100%;
|
|
background-image: url(/assets/img/pixel-background.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.hero_container {
|
|
padding: var(--space-lg) var(--space-sm);
|
|
background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (width >= 480px) {
|
|
.hero_container {
|
|
padding: var(--space-xxl);
|
|
}
|
|
}
|
|
|
|
.hero_body {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
line-height: 1.6;
|
|
color: var(--cotech-white);
|
|
max-width: 50ch;
|
|
}
|
|
|
|
.hero_title {
|
|
display: none;
|
|
}
|
|
|
|
.hero_button {
|
|
cursor: pointer;
|
|
padding: var(--space-sm);
|
|
border-radius: 4px;
|
|
background-color: var(--cotech-blue);
|
|
}
|
|
|
|
.hero_button:hover {
|
|
background-color: var(--cotech-blue-10-percent-tint);
|
|
}
|
|
|
|
.hero_button a {
|
|
color: var(--cotech-white);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.slice {
|
|
width: 100%;
|
|
padding: var(--space-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (width >= 480px) {
|
|
.slice {
|
|
padding: var(--space-lg);
|
|
}
|
|
}
|
|
|
|
.slice--light-grey {
|
|
background-color: var(--cotech-light-grey);
|
|
}
|
|
|
|
.slice--dark {
|
|
background-color: var(--cotech-black);
|
|
}
|
|
|
|
.slice--darker {
|
|
background-color: var(--cotech-black);
|
|
}
|
|
|
|
.slice--blue {
|
|
background-color: var(--cotech-black);
|
|
}
|
|
|
|
.slice_title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.slice--blue .slice_title {
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
.slice p {
|
|
max-width: 70ch;
|
|
}
|
|
|
|
.slice--blue p {
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
.slice--dark p {
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
.slice--dark a {
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
.slice--darker p {
|
|
color: var(--cotech-light-grey);
|
|
}
|
|
|
|
.slice--darker a {
|
|
color: var(--cotech-light-grey);
|
|
}
|
|
|
|
.slice_logo {
|
|
width: 200px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.metadata {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (width >= 480px) {
|
|
.metadata {
|
|
display: flex;
|
|
gap: var(--space-xl);
|
|
}
|
|
}
|
|
|
|
.metadata_item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.metadata_heading {
|
|
text-transform: uppercase;
|
|
color: var(--cotech-white);
|
|
font-size: 0.95rem;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.metadata_value {
|
|
font-size: 2.2rem;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.logo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
|
|
@media screen and (width >= 480px) {
|
|
.logo-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media screen and (width >= 720px) {
|
|
.logo-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media screen and (width >= 960px) {
|
|
.logo-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
.logo-grid_item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 240px;
|
|
height: 120px;
|
|
border: 1px solid var(--cotech-light-grey);
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.logo-grid_link {
|
|
width: 100%;
|
|
}
|
|
|
|
.logo-grid_img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
filter: grayscale(100);
|
|
}
|
|
|
|
.logo-grid_img:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.footer-links {
|
|
list-style-type: none;
|
|
display: flex;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.two-column {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: var(--space-xl);
|
|
padding: var(--space-lg)
|
|
}
|
|
|
|
@media screen and (width >= 480px) {
|
|
.two-column {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.two-column p {
|
|
max-width: 70ch;
|
|
}
|
|
|
|
.two-column_left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.two-column_right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
}
|