https://councilbrandon.com Council Brandon Mon, 20 Jul 2020 19:43:27 +0000 https://councilbrandon.com en https://councilbrandon.com/home-1 Mon, 20 Jul 2020 19:43:27 +0000 Council Brandon https://councilbrandon.com/home-1 body { margin: 0; background-color: #000; font-family: 'Alte Haas Grotesk', sans-serif; } /* --- Desktop / Default --- */ .site-header { display: grid; grid-template-columns: 1fr 1fr; /* left = name, right = links */ padding: 25px 60px; align-items: center; /* vertical centering for grid */ color: #fff; } .header-left { display: flex; flex-direction: column; justify-content: center; /* vertical centering */ align-items: center; /* center everything horizontally inside column */ justify-self: start; /* keep column left-aligned in grid */ } .header-left a, .header-left .header-title { color: #fff !important; font-weight: bold; font-size: 1.5rem; line-height: 1.2; text-decoration: none; white-space: nowrap; } .header-right { display: flex; justify-content: flex-end; /* right-aligned */ align-items: center; /* vertical centering */ gap: 80px; /* spacing between WORK and ABOUT */ } .header-right a { color: #fff !important; font-weight: bold; font-size: 1.5rem; text-decoration: none; white-space: nowrap; } /* --- Tablet --- */ @media (max-width: 1024px) { .site-header { padding: 20px 40px; } .header-left a, .header-left .header-title, .header-right a { font-size: 1.4rem; } .header-right { gap: 50px; } } /* --- Mobile --- */ @media (max-width: 768px) { .site-header { display: flex; flex-direction: row; /* name left, links right */ justify-content: space-between; /* push links to right */ align-items: flex-start; /* top-align everything */ padding: 15px 20px; } .header-left { flex-direction: column; align-items: flex-start; /* left-align name + DIRECTOR */ } .header-left a, .header-left .header-title { font-size: 1.6rem; color: #fff !important; /* force white */ } .header-right { display: flex; flex-direction: column; /* stack links vertically */ width: 100%; /* full width */ align-items: flex-end; /* right-align stacked links */ gap: 10px; margin: 0; /* remove extra spacing */ } .header-right a { font-size: 1.6rem; color: #fff !important; /* force white */ } } @media (max-width: 480px) { .site-header { padding: 10px 15px; } .header-left a, .header-left .header-title, .header-right a { font-size: 1.7rem; } } COUNCIL REDPATH BRANDON DIRECTOR WORK ABOUT