feat: portfolio-led redesign with Shootings umbrella, original logo and motion layer
This commit is contained in:
desfoto automation
@@ -89,9 +89,8 @@ hr{border:0;border-top:1px solid var(--line);margin:0}
|
||||
}
|
||||
.masthead__inner{display:flex;align-items:center;gap:1rem;min-height:4.4rem;padding-block:.7rem}
|
||||
.brand{display:inline-flex;align-items:center;gap:.62rem;font-family:var(--font-display);font-size:1.42rem;font-weight:600;letter-spacing:-.015em}
|
||||
.brand__mark{width:1.72rem;height:1.72rem;flex:none}
|
||||
.brand__mark .ring{stroke:var(--ink);fill:none;stroke-width:2.4}
|
||||
.brand__mark .blade{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
|
||||
.brand__mark{width:2.05rem;height:2.05rem;flex:none;display:block;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:var(--paper)}
|
||||
.brand__mark img{width:100%;height:100%;object-fit:cover;display:block}
|
||||
.brand small{display:block;font-family:var(--font-sans);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);line-height:1}
|
||||
.brand__text{display:flex;flex-direction:column;gap:.22rem}
|
||||
|
||||
@@ -294,7 +293,7 @@ img.frame{width:100%;height:auto;object-fit:cover;transition:transform .8s var(-
|
||||
.footer a:hover{color:#fff}
|
||||
.footer__grid{display:grid;gap:2rem;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(9rem,1fr))}
|
||||
.footer__brand .brand{color:var(--paper)}
|
||||
.footer__brand .brand__mark .ring{stroke:var(--paper)}
|
||||
.footer__brand .brand__mark{box-shadow:0 0 0 1px rgba(246,242,234,.34)}
|
||||
.footer__claim{margin-top:1rem;max-width:34ch;color:rgba(246,242,234,.66);font-size:.9rem}
|
||||
.footer h2{font-family:var(--font-sans);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,242,234,.5);margin-bottom:.9rem}
|
||||
.footer__links{display:grid;gap:.5rem}
|
||||
@@ -307,7 +306,7 @@ img.frame{width:100%;height:auto;object-fit:cover;transition:transform .8s var(-
|
||||
/* ---------- page hero (sub pages) ---------- */
|
||||
.page-head{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--paper)}
|
||||
.page-head__bg{position:absolute;inset:0;z-index:-2}
|
||||
.page-head__bg img{width:100%;height:100%;object-fit:cover}
|
||||
.page-head__bg img{width:100%;height:100%;object-fit:cover;animation:hero-zoom 44s var(--ease) both}
|
||||
.page-head::before{
|
||||
content:"";position:absolute;inset:0;z-index:-1;
|
||||
background:linear-gradient(115deg,rgba(12,11,9,.9) 0%,rgba(12,11,9,.65) 55%,rgba(12,11,9,.38) 100%);
|
||||
@@ -343,21 +342,154 @@ img.frame{width:100%;height:auto;object-fit:cover;transition:transform .8s var(-
|
||||
/* ---------- motion ---------- */
|
||||
.reveal{opacity:0;transform:translateY(1.4rem);transition:opacity .8s var(--ease),transform .8s var(--ease)}
|
||||
.reveal.is-in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
.reveal{opacity:1;transform:none;transition:none}
|
||||
html:focus-within{scroll-behavior:auto}
|
||||
.btn:hover{transform:none}
|
||||
.nav__link::after{transition:none}
|
||||
|
||||
/* ---------- motion: entrance, reveal, parallax ---------- */
|
||||
@keyframes hero-zoom{from{transform:scale(1.05)}to{transform:scale(1.18)}}
|
||||
@keyframes rise{from{opacity:0;transform:translateY(1.15em)}to{opacity:1;transform:none}}
|
||||
@keyframes cue{0%{transform:scaleY(.12);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.12);transform-origin:bottom}}
|
||||
@keyframes marquee{to{transform:translateX(-50%)}}
|
||||
@keyframes fade-in{from{opacity:0}to{opacity:1}}
|
||||
|
||||
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
|
||||
.progress__bar{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#E6A184,var(--teal));transform:scaleX(var(--scroll,0));transform-origin:left;transition:transform .12s linear}
|
||||
|
||||
.hero__media::after{
|
||||
content:"";position:absolute;inset:0;pointer-events:none;
|
||||
background:radial-gradient(105% 80% at 82% 8%,rgba(192,67,28,.32),transparent 56%);
|
||||
}
|
||||
.hero__media img{animation:hero-zoom 36s var(--ease) both}
|
||||
.hero__title .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
|
||||
.hero__title .w>span{display:inline-block;animation:rise 1.05s var(--ease) both;animation-delay:calc(var(--i,0) * .07s + .16s)}
|
||||
.hero__sub,.hero__actions,.hero__facts{animation:fade-in 1.2s var(--ease) both;animation-delay:.62s}
|
||||
.hero__actions{animation-delay:.74s}
|
||||
.hero__facts{animation-delay:.9s}
|
||||
.scroll-cue{
|
||||
position:absolute;right:max(4vw,1rem);bottom:2.4rem;z-index:1;
|
||||
display:grid;justify-items:center;gap:.6rem;
|
||||
font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(246,242,234,.62);
|
||||
}
|
||||
.scroll-cue i{display:block;width:1px;height:3.2rem;background:linear-gradient(180deg,rgba(246,242,234,.85),transparent);animation:cue 2.6s var(--ease) infinite}
|
||||
|
||||
.reveal{opacity:0;transform:translate3d(0,1.7rem,0);transition:opacity .95s var(--ease),transform .95s var(--ease),clip-path 1.1s var(--ease);transition-delay:var(--d,0s)}
|
||||
.reveal--scale{transform:scale(.962)}
|
||||
.reveal--left{transform:translate3d(-2.4rem,0,0)}
|
||||
.reveal--right{transform:translate3d(2.4rem,0,0)}
|
||||
/* The mask lives on the children: Chromium folds an element's own clip-path into
|
||||
the IntersectionObserver geometry, so a clipped target never reports as visible. */
|
||||
.reveal--mask{opacity:1;transition:transform 1.15s var(--ease);transition-delay:var(--d,0s)}
|
||||
.reveal--mask>*{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease);transition-delay:var(--d,0s)}
|
||||
.reveal--mask.is-in>*{clip-path:inset(0 0 0 0)}
|
||||
.reveal.is-in{opacity:1;transform:none}
|
||||
.parallax{transform:translate3d(0,var(--py,0),0);will-change:transform}
|
||||
|
||||
/* ---------- pillars: the two halves of the work ---------- */
|
||||
.pillars{display:grid;gap:clamp(1.1rem,2.2vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
|
||||
.pillar{
|
||||
position:relative;isolation:isolate;display:flex;flex-direction:column;
|
||||
min-height:clamp(25rem,54vh,33rem);border-radius:var(--radius-lg);overflow:hidden;
|
||||
color:var(--paper);background:#14110D;cursor:pointer;
|
||||
transition:transform .6s var(--ease),box-shadow .6s var(--ease);
|
||||
}
|
||||
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
|
||||
.pillar__media{position:absolute;inset:0;z-index:-2}
|
||||
.pillar__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
|
||||
.pillar:hover .pillar__media img{transform:scale(1.055)}
|
||||
.pillar::before{
|
||||
content:"";position:absolute;inset:0;z-index:-1;
|
||||
background:linear-gradient(180deg,rgba(12,11,9,.1) 12%,rgba(12,11,9,.62) 55%,rgba(12,11,9,.94) 100%);
|
||||
}
|
||||
.pillar__body{margin-top:auto;padding:clamp(1.3rem,2.4vw,2.1rem);display:grid;gap:.85rem}
|
||||
.pillar__label{
|
||||
justify-self:start;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
|
||||
color:#F0B79B;border:1px solid rgba(246,242,234,.34);border-radius:var(--radius-pill);padding:.3rem .8rem;
|
||||
}
|
||||
.pillar__title{font-size:clamp(1.7rem,2.6vw,2.3rem)}
|
||||
.pillar__text{color:rgba(246,242,234,.84);font-size:.95rem;max-width:46ch}
|
||||
.pillar__points{display:flex;flex-wrap:wrap;gap:.45rem .95rem;font-size:.82rem;color:rgba(246,242,234,.72)}
|
||||
.pillar__points a{position:relative;z-index:2;border-bottom:1px solid rgba(246,242,234,.3);padding-bottom:.1rem}
|
||||
.pillar__points a:hover{color:#fff;border-color:#fff}
|
||||
.pillar__go{margin-top:.35rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:inherit}
|
||||
/* Stretched link: the whole card is clickable without nesting anchors. */
|
||||
.pillar__go::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
|
||||
.pillar__go svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s var(--ease)}
|
||||
.pillar:hover .pillar__go svg{transform:translateX(.3rem)}
|
||||
|
||||
.spot::after{
|
||||
content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);z-index:1;
|
||||
background:radial-gradient(22rem 22rem at var(--mx,50%) var(--my,50%),rgba(246,242,234,.16),transparent 62%);
|
||||
}
|
||||
.spot:hover::after{opacity:1}
|
||||
|
||||
/* ---------- media cards ---------- */
|
||||
.scard{
|
||||
position:relative;display:flex;flex-direction:column;overflow:hidden;
|
||||
border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(255,255,255,.42);
|
||||
transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
|
||||
}
|
||||
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-soft)}
|
||||
.scard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
|
||||
.scard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
|
||||
.scard:hover .scard__media img{transform:scale(1.06)}
|
||||
.scard__body{padding:1.1rem 1.2rem 1.35rem;display:grid;gap:.45rem;align-content:start}
|
||||
.scard__body h3{font-size:1.14rem}
|
||||
.scard__body p{font-size:.92rem;color:var(--ink-70)}
|
||||
.scard__body .link-arrow{margin-top:.35rem}
|
||||
|
||||
/* ---------- split + statement upgrades ---------- */
|
||||
.split{display:grid;gap:clamp(1.4rem,3vw,3.2rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
|
||||
.split--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
|
||||
.split--reverse .split__media{order:2}
|
||||
.words{font-family:var(--font-display);font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.14;letter-spacing:-.02em;font-weight:400;text-wrap:pretty}
|
||||
.words em{font-style:italic;color:var(--accent)}
|
||||
.words strong{font-weight:600}
|
||||
|
||||
/* ---------- marquee ---------- */
|
||||
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.1rem;background:var(--paper-2)}
|
||||
.marquee__track{display:flex;align-items:center;gap:clamp(1.6rem,3vw,3.2rem);width:max-content;animation:marquee 42s linear infinite}
|
||||
.marquee__track span{
|
||||
display:inline-flex;align-items:center;gap:clamp(1.6rem,3vw,3.2rem);
|
||||
font-family:var(--font-display);font-size:clamp(1.05rem,1.9vw,1.6rem);color:var(--ink-70);white-space:nowrap;
|
||||
}
|
||||
.marquee__track span::after{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--accent);flex:none}
|
||||
.marquee:hover .marquee__track{animation-play-state:paused}
|
||||
|
||||
/* ---------- mobile studio ---------- */
|
||||
.studio{display:grid;gap:clamp(1.5rem,3vw,3.2rem);grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center}
|
||||
.studio__media{position:relative}
|
||||
.studio__media img{border-radius:var(--radius-lg)}
|
||||
.studio__badge{
|
||||
position:absolute;left:-.6rem;bottom:1.4rem;background:var(--paper);border:1px solid var(--line);
|
||||
border-radius:var(--radius);padding:.7rem 1rem;box-shadow:var(--shadow);
|
||||
}
|
||||
.studio__badge strong{display:block;font-family:var(--font-display);font-size:1.05rem}
|
||||
.studio__badge span{font-size:.78rem;color:var(--ink-50)}
|
||||
.studio__features{display:grid;gap:1.1rem 1.4rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));margin-top:1.6rem}
|
||||
.studio__features h3{font-size:1rem;margin-bottom:.3rem}
|
||||
.studio__features p{font-size:.88rem;color:var(--ink-70)}
|
||||
.section--ink .studio__features p{color:rgba(246,242,234,.72)}
|
||||
|
||||
/* ---------- band / project strip ---------- */
|
||||
.band-strip{display:grid;gap:clamp(.8rem,1.5vw,1.2rem);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
|
||||
.band-strip figure{margin:0}
|
||||
.band-strip figcaption{margin-top:.55rem;font-size:.8rem;color:var(--ink-50)}
|
||||
|
||||
/* ---------- footer network ---------- */
|
||||
.footer__links small{display:block;color:rgba(246,242,234,.52);font-size:.78rem;line-height:1.5;max-width:30ch;margin-top:.1rem}
|
||||
.footer__ext{display:inline-flex;align-items:center;gap:.4rem}
|
||||
.footer__ext svg{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:2}
|
||||
|
||||
/* ---------- responsive ---------- */
|
||||
@media (max-width:62rem){
|
||||
.statement{grid-template-columns:1fr}
|
||||
.contact-grid{grid-template-columns:1fr}
|
||||
.split,.split--wide{grid-template-columns:1fr}
|
||||
.split--reverse .split__media{order:0}
|
||||
.studio{grid-template-columns:1fr}
|
||||
.gallery{grid-template-columns:repeat(4,1fr)}
|
||||
.gallery .g-w3{grid-column:span 2}
|
||||
.gallery .g-w4{grid-column:span 4}
|
||||
.gallery .g-w2{grid-column:span 2}
|
||||
.scroll-cue{display:none}
|
||||
}
|
||||
@media (max-width:52rem){
|
||||
.nav{
|
||||
@@ -384,3 +516,17 @@ img.frame{width:100%;height:auto;object-fit:cover;transition:transform .8s var(-
|
||||
.hero__facts{grid-template-columns:1fr 1fr}
|
||||
.page-head__inner{max-width:none}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
.reveal,.reveal--mask{opacity:1;transform:none;clip-path:none;transition:none}
|
||||
.reveal--mask>*{clip-path:none;transition:none}
|
||||
html:focus-within{scroll-behavior:auto}
|
||||
.btn:hover,.pillar:hover,.scard:hover{transform:none}
|
||||
.nav__link::after{transition:none}
|
||||
.hero__media img,.page-head__bg img{animation:none}
|
||||
.hero__title .w>span,.hero__sub,.hero__actions,.hero__facts{animation:none;opacity:1;transform:none}
|
||||
.marquee__track{animation:none;flex-wrap:wrap;width:auto}
|
||||
.scroll-cue{display:none}
|
||||
.parallax{transform:none}
|
||||
.pillar:hover .pillar__media img,.scard:hover .scard__media img{transform:none}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user