Redesign portfolio as a personal studio with product spotlights
This commit is contained in:
+906
-28
@@ -3,44 +3,76 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@keyframes accordion-down {
|
||||
from { height: 0; }
|
||||
to { height: var(--radix-accordion-content-height); }
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
}
|
||||
@keyframes accordion-up {
|
||||
from { height: var(--radix-accordion-content-height); }
|
||||
to { height: 0; }
|
||||
from {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
@keyframes collapsible-down {
|
||||
from { height: 0; }
|
||||
to { height: var(--radix-collapsible-content-height); }
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-collapsible-content-height);
|
||||
}
|
||||
}
|
||||
@keyframes collapsible-up {
|
||||
from { height: var(--radix-collapsible-content-height); }
|
||||
to { height: 0; }
|
||||
from {
|
||||
height: var(--radix-collapsible-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slide-in-from-left {
|
||||
from { transform: translateX(-100%); }
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-in-from-right {
|
||||
from { transform: translateX(100%); }
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-in-from-top {
|
||||
from { transform: translateY(-100%); }
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-in-from-bottom {
|
||||
from { transform: translateY(100%); }
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-out-to-left {
|
||||
to { transform: translateX(-100%); }
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-out-to-right {
|
||||
to { transform: translateX(100%); }
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-out-to-top {
|
||||
to { transform: translateY(-100%); }
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-out-to-bottom {
|
||||
to { transform: translateY(100%); }
|
||||
to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -135,21 +167,867 @@
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up { animation: fade-in-up 0.5s ease-out both; }
|
||||
.animate-fade-in-up-delay-1 { animation: fade-in-up 0.5s ease-out 0.1s both; }
|
||||
.animate-fade-in-up-delay-2 { animation: fade-in-up 0.5s ease-out 0.2s both; }
|
||||
.animate-fade-in-up-delay-3 { animation: fade-in-up 0.5s ease-out 0.3s both; }
|
||||
.animate-fade-in-up-delay-4 { animation: fade-in-up 0.5s ease-out 0.4s both; }
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.5s ease-out both;
|
||||
}
|
||||
.animate-fade-in-up-delay-1 {
|
||||
animation: fade-in-up 0.5s ease-out 0.1s both;
|
||||
}
|
||||
.animate-fade-in-up-delay-2 {
|
||||
animation: fade-in-up 0.5s ease-out 0.2s both;
|
||||
}
|
||||
.animate-fade-in-up-delay-3 {
|
||||
animation: fade-in-up 0.5s ease-out 0.3s both;
|
||||
}
|
||||
.animate-fade-in-up-delay-4 {
|
||||
animation: fade-in-up 0.5s ease-out 0.4s both;
|
||||
}
|
||||
|
||||
@keyframes blob {
|
||||
0%, 100% { transform: scale(1) translate(0px, 0px); }
|
||||
25% { transform: scale(1.08) translate(40px, -30px); }
|
||||
50% { transform: scale(0.94) translate(-25px, 50px); }
|
||||
75% { transform: scale(1.04) translate(35px, 30px); }
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1) translate(0px, 0px);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.08) translate(40px, -30px);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.94) translate(-25px, 50px);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.04) translate(35px, 30px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-blob { animation: blob 9s ease-in-out infinite; }
|
||||
.animate-blob {
|
||||
animation: blob 9s ease-in-out infinite;
|
||||
}
|
||||
/* Personal studio */
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--background: 40 20% 98%;
|
||||
--foreground: 225 15% 15%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 225 15% 15%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 225 15% 15%;
|
||||
--primary: 229 76% 48%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 220 13% 94%;
|
||||
--secondary-foreground: 225 15% 15%;
|
||||
--muted: 220 13% 94%;
|
||||
--muted-foreground: 220 7% 42%;
|
||||
--accent: 225 35% 94%;
|
||||
--accent-foreground: 225 15% 15%;
|
||||
--border: 220 10% 86%;
|
||||
--input: 220 10% 86%;
|
||||
--ring: 229 76% 48%;
|
||||
--studio-blue: #2849d4;
|
||||
--studio-muted: #62666e;
|
||||
--studio-rule: #dedfe2;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 110px;
|
||||
}
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
::selection {
|
||||
background: #dce3ff;
|
||||
color: #142675;
|
||||
}
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--studio-blue);
|
||||
outline-offset: 5px;
|
||||
}
|
||||
a,
|
||||
button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
transform: translateY(-160%);
|
||||
background: white;
|
||||
color: var(--studio-blue);
|
||||
padding: 12px 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
.skip-link:focus {
|
||||
transform: none;
|
||||
}
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 60;
|
||||
background: #faf9f7ed;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.nav-inner {
|
||||
max-width: 1160px;
|
||||
padding: 0 40px;
|
||||
margin: auto;
|
||||
height: 90px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--studio-rule);
|
||||
}
|
||||
.wordmark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
font-size: 17px;
|
||||
font-weight: 550;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.monogram {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.accent-text {
|
||||
color: var(--studio-blue);
|
||||
}
|
||||
.wordmark-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
.desktop-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 27px;
|
||||
font-size: 13px;
|
||||
color: var(--studio-muted);
|
||||
}
|
||||
.desktop-nav a:hover,
|
||||
.desktop-nav a[aria-current] {
|
||||
color: var(--studio-blue);
|
||||
}
|
||||
.nav-contact {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
color: var(--studio-blue);
|
||||
}
|
||||
.mobile-toggle {
|
||||
display: none;
|
||||
padding: 12px;
|
||||
}
|
||||
.mobile-menu {
|
||||
padding: 10px 24px 24px;
|
||||
border-bottom: 1px solid var(--studio-rule);
|
||||
}
|
||||
.mobile-menu a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 13px 0;
|
||||
}
|
||||
.site-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.studio-home {
|
||||
max-width: 1160px;
|
||||
margin: auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.studio-intro {
|
||||
padding: 68px 0 77px;
|
||||
}
|
||||
.intro-topline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: var(--studio-muted);
|
||||
}
|
||||
.intro-main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 180px;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.intro-main h1 {
|
||||
font-size: clamp(48px, 6.4vw, 79px);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.075em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
.intro-main h1 span {
|
||||
color: var(--studio-blue);
|
||||
}
|
||||
.intro-statement {
|
||||
font-size: clamp(21px, 2.4vw, 28px);
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.04em;
|
||||
max-width: 650px;
|
||||
}
|
||||
.intro-statement a {
|
||||
color: var(--studio-blue);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #bcc7f2;
|
||||
text-underline-offset: 5px;
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
.intro-detail {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: var(--studio-muted);
|
||||
max-width: 550px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.intro-portrait {
|
||||
width: 180px;
|
||||
height: 215px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 8px;
|
||||
transform: rotate(3deg);
|
||||
box-shadow:
|
||||
0 0 0 7px white,
|
||||
0 8px 30px #20284010;
|
||||
}
|
||||
.intro-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 25px;
|
||||
margin-top: 27px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.intro-links a,
|
||||
.studio-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
.intro-links a:hover,
|
||||
.studio-link:hover {
|
||||
color: var(--studio-blue);
|
||||
}
|
||||
.studio-section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid var(--studio-rule);
|
||||
padding: 25px 0 30px;
|
||||
gap: 20px;
|
||||
}
|
||||
.studio-section-heading h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.studio-section-heading h2 span {
|
||||
font-size: 11px;
|
||||
color: var(--studio-muted);
|
||||
vertical-align: super;
|
||||
margin-left: 5px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.studio-section-heading > a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--studio-muted);
|
||||
}
|
||||
.studio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 48px 30px;
|
||||
}
|
||||
.studio-project {
|
||||
min-width: 0;
|
||||
scroll-margin-top: 115px;
|
||||
}
|
||||
.studio-project-image {
|
||||
position: relative;
|
||||
display: block;
|
||||
aspect-ratio: 1.48;
|
||||
overflow: hidden;
|
||||
border-radius: 7px;
|
||||
background: #e8ecf5;
|
||||
}
|
||||
.studio-project-image > img {
|
||||
object-fit: contain;
|
||||
width: 88% !important;
|
||||
height: 86% !important;
|
||||
margin: auto;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
.studio-project-image:hover > img {
|
||||
transform: scale(1.035);
|
||||
}
|
||||
.puter .studio-project-image {
|
||||
background: #e1e7f2;
|
||||
}
|
||||
.beenvoice .studio-project-image {
|
||||
background: #e8eddf;
|
||||
}
|
||||
.hristudio .studio-project-image {
|
||||
background: #e3edea;
|
||||
}
|
||||
.racetix .studio-project-image > img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
.studio-racetix-logo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #0004;
|
||||
}
|
||||
.studio-racetix-logo img {
|
||||
width: 43%;
|
||||
height: auto;
|
||||
}
|
||||
.studio-project-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 15px;
|
||||
margin: 20px 0 11px;
|
||||
}
|
||||
.studio-project-title h3 {
|
||||
font-size: 23px;
|
||||
font-weight: 550;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
.studio-project-title h3 a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.studio-project-title h3 svg {
|
||||
color: var(--studio-muted);
|
||||
}
|
||||
.studio-project-title > span {
|
||||
font-size: 11px;
|
||||
color: var(--studio-muted);
|
||||
}
|
||||
.studio-project > p {
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: var(--studio-muted);
|
||||
max-width: 480px;
|
||||
}
|
||||
.studio-stack {
|
||||
font-size: 11px;
|
||||
color: #737780;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.studio-hadlock {
|
||||
display: grid;
|
||||
grid-template-columns: 1.25fr 1fr;
|
||||
gap: 55px;
|
||||
align-items: center;
|
||||
background: #edf0f7;
|
||||
padding: 38px;
|
||||
border-radius: 8px;
|
||||
margin: 76px 0;
|
||||
}
|
||||
.studio-label {
|
||||
font-size: 11px;
|
||||
color: var(--studio-muted);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.studio-hadlock h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.05em;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.studio-hadlock p:not(.studio-label) {
|
||||
color: var(--studio-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
.studio-hadlock > img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1.35;
|
||||
object-fit: cover;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.studio-link {
|
||||
font-size: 13px;
|
||||
color: var(--studio-blue);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.studio-about {
|
||||
display: grid;
|
||||
grid-template-columns: 0.85fr 1.35fr;
|
||||
gap: 75px;
|
||||
padding: 0 0 65px;
|
||||
}
|
||||
.studio-about h2 {
|
||||
font-size: 32px;
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.3;
|
||||
margin-top: 18px;
|
||||
font-weight: 450;
|
||||
}
|
||||
.studio-about > div > p:not(.studio-label) {
|
||||
color: var(--studio-muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.studio-contact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
border-top: 1px solid var(--studio-rule);
|
||||
padding: 40px 0 60px;
|
||||
}
|
||||
.studio-contact h2 {
|
||||
font-size: 29px;
|
||||
letter-spacing: -0.05em;
|
||||
margin-top: 13px;
|
||||
}
|
||||
.studio-contact > a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--studio-blue);
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.site-footer {
|
||||
width: 100%;
|
||||
max-width: 1160px;
|
||||
margin: auto;
|
||||
padding: 0 40px 25px;
|
||||
}
|
||||
.footer-top {
|
||||
border-top: 1px solid var(--studio-rule);
|
||||
padding: 25px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 25px;
|
||||
}
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 17px;
|
||||
font-size: 11px;
|
||||
color: var(--studio-muted);
|
||||
}
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
font-size: 10px;
|
||||
color: var(--studio-muted);
|
||||
}
|
||||
.interior-page {
|
||||
max-width: 1160px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
padding: 40px 40px 80px;
|
||||
}
|
||||
.archive-header {
|
||||
padding: 25px 0 40px;
|
||||
}
|
||||
.eyebrow {
|
||||
color: var(--studio-muted);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.archive-header h1 {
|
||||
font-size: clamp(40px, 5vw, 64px);
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.06em;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.archive-header > p:last-child {
|
||||
color: var(--studio-muted);
|
||||
max-width: 620px;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.archive-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 25px;
|
||||
}
|
||||
.archive-card {
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.archive-image {
|
||||
aspect-ratio: 1.7;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e8ecf1;
|
||||
}
|
||||
.archive-image img {
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
}
|
||||
.archive-body {
|
||||
padding: 26px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.archive-body h2 {
|
||||
font-size: 23px;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.archive-body p {
|
||||
color: var(--studio-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.85;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.project-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.project-tags span {
|
||||
font-size: 11px;
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.archive-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
margin-top: auto;
|
||||
padding-top: 23px;
|
||||
}
|
||||
.text-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 13px;
|
||||
color: var(--studio-blue);
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.intro-main {
|
||||
grid-template-columns: 1fr 140px;
|
||||
gap: 30px;
|
||||
}
|
||||
.intro-portrait {
|
||||
width: 140px;
|
||||
height: 180px;
|
||||
}
|
||||
.desktop-nav {
|
||||
gap: 18px;
|
||||
}
|
||||
.studio-hadlock {
|
||||
gap: 30px;
|
||||
padding: 28px;
|
||||
}
|
||||
.studio-about {
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.studio-home,
|
||||
.site-footer {
|
||||
padding-left: 23px;
|
||||
padding-right: 23px;
|
||||
}
|
||||
.nav-inner {
|
||||
height: 75px;
|
||||
padding: 0 23px;
|
||||
}
|
||||
.desktop-nav {
|
||||
display: none;
|
||||
}
|
||||
.mobile-toggle {
|
||||
display: block;
|
||||
}
|
||||
.studio-intro {
|
||||
padding: 37px 0 44px;
|
||||
}
|
||||
.intro-topline {
|
||||
font-size: 10px;
|
||||
}
|
||||
.intro-main {
|
||||
display: block;
|
||||
margin-top: 28px;
|
||||
position: relative;
|
||||
}
|
||||
.intro-main h1 {
|
||||
font-size: clamp(43px, 10vw, 65px);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.intro-statement {
|
||||
font-size: 24px;
|
||||
max-width: 450px;
|
||||
}
|
||||
.intro-detail {
|
||||
font-size: 15px;
|
||||
}
|
||||
.intro-portrait {
|
||||
width: 72px;
|
||||
height: 84px;
|
||||
margin-top: 29px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.intro-links {
|
||||
gap: 22px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.studio-grid,
|
||||
.archive-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 36px;
|
||||
}
|
||||
.studio-project > p {
|
||||
font-size: 15px;
|
||||
}
|
||||
.studio-project-title > span {
|
||||
font-size: 10px;
|
||||
}
|
||||
.studio-hadlock {
|
||||
grid-template-columns: 1fr;
|
||||
margin: 48px 0;
|
||||
padding: 26px;
|
||||
gap: 28px;
|
||||
}
|
||||
.studio-hadlock > img {
|
||||
aspect-ratio: 1.7;
|
||||
}
|
||||
.studio-about {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 25px;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
.studio-about h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.studio-contact {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 32px 0 40px;
|
||||
gap: 22px;
|
||||
}
|
||||
.studio-contact > a {
|
||||
font-size: 19px;
|
||||
}
|
||||
.footer-top {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.footer-links {
|
||||
gap: 14px;
|
||||
}
|
||||
.footer-bottom {
|
||||
flex-wrap: wrap;
|
||||
font-size: 9px;
|
||||
gap: 9px;
|
||||
}
|
||||
.interior-page {
|
||||
padding: 30px 23px 60px;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Product spotlights and personal experiments */
|
||||
.beenvoice .studio-project-image {
|
||||
background: #dce5df;
|
||||
}
|
||||
.manyangles .studio-project-image > img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
.studio-cms {
|
||||
border-top: 1px solid #cdd3e0;
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.studio-cms h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.studio-cms .studio-link {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.archive-card[id] {
|
||||
scroll-margin-top: 115px;
|
||||
}
|
||||
|
||||
/* Studio identity: expressive display type, quiet working typography. */
|
||||
.wordmark-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
.intro-main h1,
|
||||
.archive-header h1,
|
||||
.studio-about h2,
|
||||
.studio-contact h2 {
|
||||
font-family: var(--font-heading), Georgia, serif;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.intro-main h1 {
|
||||
font-size: clamp(62px, 7.4vw, 96px);
|
||||
line-height: 1.02;
|
||||
}
|
||||
.intro-statement {
|
||||
font-size: clamp(20px, 2.1vw, 25px);
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.studio-about h2 {
|
||||
font-size: 43px;
|
||||
line-height: 1.12;
|
||||
}
|
||||
.studio-contact h2 {
|
||||
font-size: 42px;
|
||||
}
|
||||
.studio-project-title h3,
|
||||
.studio-hadlock h2 {
|
||||
letter-spacing: -0.045em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.coffee-link {
|
||||
color: var(--studio-blue);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #bcc7f2;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
.coffee-link:hover {
|
||||
text-decoration-color: currentColor;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.intro-main h1 {
|
||||
font-size: clamp(47px, 12vw, 76px);
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.studio-about h2,
|
||||
.studio-contact h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
.monogram {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apple product bezels: screenshots sit beneath the transparent screen apertures. */
|
||||
.beenvoice-devices {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
background: #dce5df;
|
||||
}
|
||||
.product-device {
|
||||
position: absolute;
|
||||
filter: drop-shadow(0 10px 12px #182b2526);
|
||||
}
|
||||
.product-ipad {
|
||||
width: 63%;
|
||||
aspect-ratio: 2300 / 3000;
|
||||
top: 9%;
|
||||
left: 9%;
|
||||
transform: rotate(-6deg);
|
||||
}
|
||||
.product-iphone {
|
||||
width: 28%;
|
||||
aspect-ratio: 1350 / 2760;
|
||||
top: 22%;
|
||||
right: 8%;
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
.product-device .device-screen {
|
||||
object-fit: fill;
|
||||
margin: 0;
|
||||
}
|
||||
.product-ipad .device-screen {
|
||||
left: 5.13% !important;
|
||||
top: 4.13% !important;
|
||||
width: 89.74% !important;
|
||||
height: 91.74% !important;
|
||||
border-radius: 4% / 3%;
|
||||
}
|
||||
.product-iphone .device-screen {
|
||||
left: 5.33% !important;
|
||||
top: 2.5% !important;
|
||||
width: 89.34% !important;
|
||||
height: 95% !important;
|
||||
border-radius: 13% / 6%;
|
||||
}
|
||||
.product-device .device-bezel {
|
||||
z-index: 1;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.manyangles-preview {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.manyangles-preview > img {
|
||||
object-fit: cover;
|
||||
object-position: 50% 40%;
|
||||
}
|
||||
.manyangles-lockup {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
padding: 6%;
|
||||
color: white;
|
||||
background: linear-gradient(transparent 45%, #101e33b3);
|
||||
}
|
||||
.manyangles-lockup svg {
|
||||
width: 9%;
|
||||
max-width: 42px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.manyangles-lockup span {
|
||||
font-weight: 700;
|
||||
font-variation-settings: "SHRP" 70;
|
||||
font-size: clamp(24px, 3vw, 36px);
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user