/* ==========================================================================
Videography Portfolio — Style Sheet
==========================================================================
Table of Contents:
1. Design Tokens
2. Reset / Base
(Further sections added in subsequent tasks)
========================================================================== */
/* ==========================================================================
GOOGLE FONTS — Load via tags in each HTML :
Using with preconnect ensures fastest font delivery and
font-display: swap (via &display=swap) prevents invisible text during load.
========================================================================== */
/* ==========================================================================
1. Design Tokens
========================================================================== */
:root {
/* Colors */
--color-bg-dark: #050505;
--color-bg-light: #F9F9F9;
--color-text-light: #FFFFFF;
--color-text-dark: #111111;
--color-watermark: #F0F0F0;
--color-border: #111111;
/* Fonts */
--font-display: 'Anton', sans-serif;
--font-ui: 'Inter', sans-serif;
}
/* ==========================================================================
2. Reset / Base
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-ui);
font-weight: 400;
line-height: 1.5;
color: var(--color-text-dark);
background-color: var(--color-bg-light);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
video,
iframe {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
button {
font: inherit;
cursor: pointer;
border: none;
background: none;
}
input,
textarea {
font: inherit;
}
/* ==========================================================================
3. Typography
========================================================================== */
/* Display Font — Anton
Used for headings, hero text, statements, and large-scale type.
Always uppercase with tight leading and slight negative tracking. */
.display-font,
h1,
h2,
h3 {
font-family: var(--font-display);
text-transform: uppercase;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 0.9;
}
/* Lighter weight variant for secondary headings */
.display-font--light {
font-weight: 800;
}
/* Responsive display sizes using clamp() */
.display-hero {
font-size: clamp(2.5rem, 8vw, 7rem);
}
.display-statement {
font-size: clamp(1.5rem, 4vw, 3.5rem);
}
.display-watermark {
font-size: clamp(15vw, 25vw, 35vw);
color: var(--color-watermark);
position: absolute;
z-index: 0;
pointer-events: none;
}
/* Portfolio media sits above watermark */
.portfolio-card__media {
position: relative;
z-index: 2;
width: 100%;
height: auto;
}
/* UI Font — Inter
Used for navigation, labels, body text, and utility elements. */
.ui-font {
font-family: var(--font-ui);
font-weight: 400;
letter-spacing: 0.05em;
}
/* Label variant: uppercase with wider tracking */
.ui-label {
font-family: var(--font-ui);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.1em;
}
/* Medium weight variant for nav and secondary UI */
.ui-font--medium {
font-weight: 500;
letter-spacing: 0.05em;
}
/* ==========================================================================
4. Layout
========================================================================== */
/* Flex utilities */
.flex {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Container widths */
.container {
width: 100%;
max-width: 1400px;
margin-inline: auto;
padding-inline: 4vw;
}
.container--narrow {
max-width: 900px;
margin-inline: auto;
padding-inline: 4vw;
}
.container--form {
max-width: 600px;
margin-inline: auto;
padding-inline: 4vw;
}
/* Section padding */
.section-padding {
padding-block: 15vh;
}
/* Full viewport height */
.full-vh {
min-height: 100vh;
}
/* Text alignment */
.text-center {
text-align: center;
}
/* Relative positioning for layered content (e.g., watermarks) */
.relative {
position: relative;
}
/* ==========================================================================
5. Navigation
========================================================================== */
/* --- Nav Bar --- */
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2.75rem 4vw;
z-index: 100;
font-family: var(--font-ui);
font-size: 1.125rem;
}
.nav__brand {
font-family: var(--font-ui);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-light);
z-index: 101;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.nav__brand-sub {
font-size: 0.55em;
font-weight: 500;
letter-spacing: 0.35em;
margin-top: 0.15em;
}
/* --- Center Nav Links --- */
.nav__links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav__link {
font-family: var(--font-ui);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-light);
opacity: 0.5;
transition: opacity 0.3s ease;
}
.nav__link--active {
opacity: 1;
}
.nav__link:hover,
.nav__link:focus-visible {
opacity: 1;
}
/* --- Clock --- */
.nav__clock {
font-family: var(--font-ui);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-light);
z-index: 101;
}
/* --- Hamburger Button --- */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: none;
cursor: pointer;
z-index: 101;
}
.hamburger__line {
display: block;
width: 24px;
height: 1px;
background-color: var(--color-text-light);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger__line + .hamburger__line {
margin-top: 7px;
}
/* --- Scrolled state: black background so white text stays readable --- */
.nav--scrolled {
background-color: var(--color-bg-dark);
padding-top: 2rem;
padding-bottom: 2rem;
}
.nav {
transition: background-color 0.3s ease, padding 0.3s ease;
}
/* Hamburger → X transform when menu is open */
.nav-open .hamburger__line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.nav-open .hamburger__line:nth-child(2) {
opacity: 0;
}
.nav-open .hamburger__line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* --- Mobile Overlay Menu --- */
.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-bg-dark);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-open .nav-overlay {
opacity: 1;
visibility: visible;
}
.nav-overlay__links {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
list-style: none;
}
.nav-overlay__link {
font-family: var(--font-display);
font-size: 2rem;
text-transform: uppercase;
color: var(--color-text-light);
opacity: 0.5;
transition: opacity 0.3s ease;
}
.nav-overlay__link--active {
opacity: 1;
}
.nav-overlay__link:hover,
.nav-overlay__link:focus-visible {
opacity: 1;
}
/* --- Mobile Breakpoint: show hamburger, hide center links & clock --- */
@media (max-width: 767px) {
.nav__links {
display: none;
}
.nav__clock {
display: none;
}
.hamburger {
display: flex;
}
}
/* ========== 6. Footer ========== */
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 4vw;
background-color: var(--color-bg-dark);
color: var(--color-text-light);
font-family: var(--font-ui);
font-weight: 400;
font-size: 0.875rem;
letter-spacing: 0.05em;
}
.footer__copy {
text-transform: none;
}
.footer__link {
color: var(--color-text-light);
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.05em;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.footer__link:hover,
.footer__link:focus-visible {
opacity: 1;
}
/* ========== 7. Viewfinder Brackets ========== */
/*
Camera-inspired corner bracket motif (⌜ ⌝ ⌞ ⌟).
Applied via the reusable .viewfinder-brackets class on section wrappers.
Uses ::before for top-left corner and ::after for bottom-right corner,
with box-shadow to mirror the opposite corners (top-right and bottom-left).
Requirements: 17.1, 17.2, 17.3
*/
.viewfinder-brackets {
position: relative;
overflow: hidden;
}
/* Top-left corner (⌜) — border-top + border-left
Positioned to frame around the nav brand text */
.viewfinder-brackets::before {
content: '';
position: absolute;
top: 2rem;
left: calc(4vw - 0.75rem);
width: 40px;
height: 40px;
border-top: 1px solid var(--color-text-light);
border-left: 1px solid var(--color-text-light);
pointer-events: none;
z-index: 10;
}
/* Bottom-right corner (⌟) — border-bottom + border-right */
.viewfinder-brackets::after {
content: '';
position: absolute;
bottom: 2rem;
right: 2rem;
width: 40px;
height: 40px;
border-bottom: 1px solid var(--color-text-light);
border-right: 1px solid var(--color-text-light);
pointer-events: none;
z-index: 10;
}
/* ========== 8. Loading Screen ========== */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--color-bg-dark);
z-index: 200;
display: flex;
opacity: 1;
transition: opacity 0.6s ease;
}
.loading-screen__text {
position: absolute;
bottom: 2rem;
left: 4vw;
}
.loading-screen__quote {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--color-text-light);
opacity: 0.3;
line-height: 1;
vertical-align: middle;
}
.loading-screen__flavor {
font-family: var(--font-ui);
font-size: 1rem;
color: var(--color-text-light);
font-weight: 400;
letter-spacing: 0.02em;
display: inline;
margin-inline: 0.25rem;
}
.loading-screen__counter {
position: absolute;
bottom: 2rem;
right: 4vw;
}
.loading-screen__percent {
font-family: var(--font-display);
font-size: clamp(4rem, 10vw, 8rem);
color: var(--color-text-light);
text-transform: uppercase;
line-height: 0.9;
}
/* ========== 9. Hero Section ========== */
.hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: var(--color-bg-dark);
}
.hero__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__content {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
color: var(--color-text-light);
}
.hero__scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-ui);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-text-light);
opacity: 0.7;
z-index: 5;
}
/* ========== 10. Statement Section ========== */
.statement {
background-color: var(--color-bg-light);
color: var(--color-text-dark);
padding-block: 15vh;
text-align: center;
}
/* ========== 11. Portfolio Section ========== */
.portfolio {
background-color: var(--color-bg-dark);
color: var(--color-text-light);
display: flex;
flex-direction: column;
align-items: center;
gap: 8rem;
}
.portfolio-card {
width: 70%;
position: relative;
}
.portfolio-card__index {
display: block;
margin-bottom: 0.5rem;
}
.portfolio-card__title {
margin-bottom: 1.5rem;
font-size: clamp(1.5rem, 3vw, 2.5rem);
}
.portfolio-card__media-wrapper {
position: relative;
}
.portfolio-card__watermark {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
user-select: none;
}
.portfolio-card__media {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.portfolio-card__client {
margin-top: 1rem;
font-size: 1.25rem;
}
/* ==========================================================================
12. About Page
========================================================================== */
/* --- Hero Banner --- */
.about-hero {
background-color: var(--color-bg-dark);
color: var(--color-text-light);
min-height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
/* --- Studio Story Section --- */
.about-story__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
max-width: 1400px;
margin-inline: auto;
padding-inline: 4vw;
}
.about-story__text {
font-family: var(--font-ui);
font-size: 1rem;
line-height: 1.7;
}
.about-story__text p + p {
margin-top: 1.5rem;
}
.about-story__image {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
/* --- Mission Section --- */
.about-mission__content {
max-width: 1400px;
margin-inline: auto;
padding-inline: 4vw;
}
.about-mission__pillars {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
}
/* ==========================================================================
13. Contact Page
========================================================================== */
/* --- Hero Banner --- */
.contact-hero {
background-color: var(--color-bg-dark);
color: var(--color-text-light);
min-height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
/* --- Contact Info Section --- */
.contact-info {
background-color: var(--color-bg-light);
color: var(--color-text-dark);
text-align: center;
}
.contact-info__details {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 2.5rem;
}
.contact-info__link {
font-size: 0.875rem;
transition: opacity 0.3s ease;
}
.contact-info__link:hover,
.contact-info__link:focus-visible {
opacity: 0.6;
}
.contact-info__social {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.contact-info__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
transition: opacity 0.3s ease;
}
.contact-info__social-link:hover,
.contact-info__social-link:focus-visible {
opacity: 0.6;
}
/* --- Contact Form --- */
.contact-form__group {
margin-bottom: 2rem;
}
.contact-form__group label {
display: block;
margin-bottom: 0.5rem;
}
.contact-form__group input,
.contact-form__group textarea {
width: 100%;
border: none;
border-bottom: 1px solid var(--color-border);
background: none;
padding: 0.75rem 0;
font-family: var(--font-ui);
font-size: 1rem;
color: var(--color-text-dark);
outline: none;
}
.contact-form__group textarea {
resize: vertical;
}
.contact-form__submit {
display: block;
width: 100%;
padding: 1rem;
background-color: var(--color-bg-dark);
color: var(--color-text-light);
text-transform: uppercase;
border: none;
cursor: pointer;
font-size: 1rem;
letter-spacing: 0.05em;
transition: opacity 0.3s ease;
}
/* --- Contact Form (parent) --- */
.contact-form-section {
background-color: var(--color-bg-light);
color: var(--color-text-dark);
}
/* ==========================================================================
13b. Gallery Page
========================================================================== */
.gallery-hero {
background-color: var(--color-bg-dark);
color: var(--color-text-light);
min-height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.gallery-access {
background-color: var(--color-bg-light);
color: var(--color-text-dark);
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
}
.gallery-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
width: 100%;
}
.gallery-form__group {
width: 100%;
}
.gallery-form__input {
width: 100%;
border: none;
border-bottom: 2px solid var(--color-border);
background: none;
padding: 1rem 0;
font-family: var(--font-ui);
font-size: 1.25rem;
text-align: center;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-dark);
outline: none;
transition: border-color 0.3s ease;
}
.gallery-form__input::placeholder {
color: var(--color-text-dark);
opacity: 0.3;
}
.gallery-form__input:focus {
border-color: var(--color-text-dark);
}
.gallery-form__submit {
display: block;
width: 100%;
padding: 1rem;
background-color: var(--color-bg-dark);
color: var(--color-text-light);
text-transform: uppercase;
border: none;
cursor: pointer;
font-size: 1rem;
letter-spacing: 0.05em;
transition: opacity 0.3s ease;
}
.gallery-form__submit:hover,
.gallery-form__submit:focus-visible {
opacity: 0.8;
}
.gallery-form__message {
font-family: var(--font-ui);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
min-height: 1.5rem;
color: #c0392b;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 0;
}
.contact-form__submit:hover,
.contact-form__submit:focus-visible {
opacity: 0.8;
}
/* ========== 14. Responsive ========== */
/* --- Tablet: 768px – 1199px --- */
@media (max-width: 1199px) {
.section-padding {
padding-block: 10vh;
}
.portfolio-card {
width: 90%;
}
.about-story__grid {
gap: 2rem;
}
}
/* --- Mobile: < 768px --- */
@media (max-width: 767px) {
.section-padding {
padding-block: 6vh;
}
.portfolio-card {
width: 100%;
padding-inline: 1rem;
}
.viewfinder-brackets::before,
.viewfinder-brackets::after {
width: 24px;
height: 24px;
}
.about-story__grid {
grid-template-columns: 1fr;
}
.about-mission__pillars {
flex-direction: column;
align-items: center;
}
.footer {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
/* --- Touch devices: ensure 44px minimum targets --- */
@media (hover: none) {
a,
button,
input,
textarea,
select,
[role="button"] {
min-height: 44px;
min-width: 44px;
}
}
/* ========== 15. Accessibility ========== */
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.loading-screen {
transition: none;
}
.hero__video {
display: none;
}
}
/* --- Focus-visible: keyboard navigation --- */
*:focus-visible {
outline: 2px solid var(--color-text-light);
outline-offset: 2px;
}
/* On light backgrounds, use dark outline */
.statement *:focus-visible,
.about-story *:focus-visible,
.about-mission *:focus-visible,
.contact-info *:focus-visible,
.contact-form-section *:focus-visible,
.gallery-access *:focus-visible,
.footer *:focus-visible {
outline-color: var(--color-text-dark);
}