@font-face { font-family: 'GT Cinetype'; src: url('fonts/GT-Cinetype-Regular.woff2') format('woff2'), url('fonts/GT-Cinetype-Regular.woff') format('woff'), url('fonts/GT-Cinetype-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'GT Cinetype'; src: url('fonts/GT-Cinetype-Bold.woff2') format('woff2'), url('fonts/GT-Cinetype-Bold.woff') format('woff'), url('fonts/GT-Cinetype-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Colour */ --black: #1a1a1a; --white: #ffffff; --gray-400: #737373; --gray-600: #666666; --gray-800: #333333; --wave-stroke: 200; /* Type scale — major third (1.25) */ --text-xs: 0.64rem; /* ~10px */ --text-sm: 0.8rem; /* ~13px */ --text-base: 1rem; /* 16px */ --text-md: 1.25rem; /* 20px */ --text-lg: 1.563rem; /* 25px */ --text-xl: 1.953rem; /* 31px */ --text-2xl: 2.441rem; /* 39px */ --text-3xl: 3.5rem; /* 56px */ /* Spacing */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px; /* Layout */ --content-width: 600px; --page-margin: var(--sp-6); } /* Dark mode — add class="dark" to to toggle */ :root.dark { --black: #e5e5e5; --white: #0a0a0a; --gray-400: #8a8a8a; --gray-600: #999999; --gray-800: #cccccc; --wave-stroke: 40; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 4rem; } body { font-family: 'GT Cinetype', monospace, sans-serif; background: var(--white); color: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: pretty; } ::selection { background: var(--black); color: var(--white); } a { color: inherit; text-decoration: none; } /* — Waves background — */ canvas { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; } canvas[aria-hidden] { speak: never; } @media (prefers-reduced-motion: reduce) { canvas { display: none; } } /* — Layout — */ main { max-width: var(--content-width); margin: 0 auto; } /* — Shared — */ .label { font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; } /* — Nav — */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--white); } .nav-inner { max-width: var(--content-width); margin: 0 auto; padding: var(--sp-2) 0; display: flex; justify-content: space-between; align-items: center; } .nav-mark { font-weight: 700; } .nav-links { display: flex; gap: var(--sp-4); list-style: none; } .nav-links a { position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--black); transition: width 0.3s ease; } .nav-links a:hover::after, .nav-links a:focus-visible::after { width: 100%; } /* — Hero — */ .hero { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; margin-top: var(--sp-6); max-width: 540px; } .hero-title { font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; margin-bottom: var(--sp-4); } .hero-desc { font-size: var(--text-md); color: var(--gray-800); margin-bottom: var(--sp-8); } .contact-links { display: flex; gap: var(--sp-4); list-style: none; margin-top: var(--sp-2); } .contact-links a:hover, .contact-links a:focus-visible { color: var(--gray-800); } /* — Section headers — */ .section-title { font-weight: 700; margin-bottom: var(--sp-2); margin-top: var(--sp-8); } /* — Work — */ .case-study { margin-bottom: var(--sp-6); } .cs-title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: var(--sp-2); } .cs-desc { font-size: var(--text-md); line-height: 1.6; color: var(--gray-800); margin-bottom: var(--sp-2); } .cs-desc:last-child { margin-bottom: 0; } /* — About — */ .about-content { margin-bottom: var(--sp-6); } .about-text { font-size: var(--text-md); line-height: 1.55; color: var(--gray-800); margin-bottom: var(--sp-3); } .about-text:last-child { margin-bottom: 0; } /* — Testimonials — */ .testimonial { margin-bottom: var(--sp-4); } .testimonial-quote { font-size: var(--text-md); font-weight: 400; line-height: 1.5; font-style: italic; } .testimonial-cite { display: block; margin-top: var(--sp-2); font-style: normal; color: var(--gray-400); } .testimonials { margin-bottom: var(--sp-8); } /* — Footer — */ footer { max-width: var(--content-width); margin: 0 auto var(--sp-4); font-size: var(--text-xs); color: var(--gray-400); letter-spacing: 0.04em; text-transform: uppercase; } /* — Mobile — */ @media (max-width: 640px) { :root { --page-margin: var(--sp-4); --text-3xl: clamp(2rem, 8vw, 3rem); } nav { padding: 0 var(--page-margin); } main { padding: 0 var(--page-margin); } footer { padding: 0 var(--page-margin); } .nav-links { gap: var(--sp-2); } .contact-links { flex-wrap: wrap; } }