feat(ui): chrome title card and night-plate chapter panels
This commit is contained in:
@@ -417,3 +417,126 @@
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Round 4: Cinema. The title is a title card, the reading panels become
|
||||||
|
sharp night plates instead of rounded glass, and the hero arrives with the
|
||||||
|
opening crane shot. Clip-path reveals only: no opacity, so contrast checks
|
||||||
|
see the final colours from the first frame.
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* ---------- Title card ---------- */
|
||||||
|
@media screen {
|
||||||
|
.hero-journey .hero-name {
|
||||||
|
font-size: clamp(72px, 9.6vw, 164px);
|
||||||
|
font-weight: 720;
|
||||||
|
line-height: 0.86;
|
||||||
|
letter-spacing: -0.07em;
|
||||||
|
background: none;
|
||||||
|
padding-block-end: 0.06em;
|
||||||
|
}
|
||||||
|
/* Outrun chrome, one band per line: a bright sky over a dark horizon cut
|
||||||
|
and a hot reflection below it. */
|
||||||
|
.hero-journey .hero-name__text {
|
||||||
|
color: #ffc2dc;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
#fffaf2 8%,
|
||||||
|
#ffe2ef 34%,
|
||||||
|
#ff9fcd 48.5%,
|
||||||
|
#5b2591 49.5%,
|
||||||
|
#9b3fb8 54%,
|
||||||
|
#ff63ab 72%,
|
||||||
|
#ffb46e 96%
|
||||||
|
);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
-webkit-box-decoration-break: clone;
|
||||||
|
box-decoration-break: clone;
|
||||||
|
filter: drop-shadow(0 0.025em 0 rgb(24 6 44)) drop-shadow(0 0 0.32em rgb(255 70 160 / 32%));
|
||||||
|
}
|
||||||
|
.hero-journey__role {
|
||||||
|
font-size: clamp(20px, 1.7vw, 28px);
|
||||||
|
font-weight: 560;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
}
|
||||||
|
.hero-journey__content {
|
||||||
|
inline-size: min(38rem, 44vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Night plates ---------- */
|
||||||
|
.reading-stage .chapter-body {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, color-mix(in srgb, var(--chapter-accent, var(--accent)) 9%, transparent), transparent 140px),
|
||||||
|
linear-gradient(104deg, rgb(7 3 18 / 96%), rgb(11 5 27 / 94%) 62%, rgb(14 7 32 / 93%));
|
||||||
|
box-shadow:
|
||||||
|
inset 3px 0 0 var(--chapter-accent, var(--accent)),
|
||||||
|
inset 0 1px 0 color-mix(in srgb, var(--chapter-accent, var(--accent)) 38%, transparent),
|
||||||
|
0 50px 90px -40px rgb(0 0 0 / 80%);
|
||||||
|
}
|
||||||
|
/* Crop marks: the plate is framed like a film slate, not a card. */
|
||||||
|
.reading-stage .chapter-body::after {
|
||||||
|
content: '' / '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -7px;
|
||||||
|
pointer-events: none;
|
||||||
|
--mark: color-mix(in srgb, var(--chapter-accent, var(--accent)) 80%, white);
|
||||||
|
background:
|
||||||
|
linear-gradient(var(--mark), var(--mark)) top right / 18px 1px,
|
||||||
|
linear-gradient(var(--mark), var(--mark)) top right / 1px 18px,
|
||||||
|
linear-gradient(var(--mark), var(--mark)) bottom right / 18px 1px,
|
||||||
|
linear-gradient(var(--mark), var(--mark)) bottom right / 1px 18px,
|
||||||
|
linear-gradient(var(--mark), var(--mark)) bottom left / 18px 1px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
.reading-stage .portfolio-section .section-eyebrow {
|
||||||
|
letter-spacing: 0.22em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1100px) {
|
||||||
|
/* The phone strip beside the evidence: three readable columns, not slivers. */
|
||||||
|
.reading-stage .project-case-study[data-media-layout='portrait-strip'] > .project-media-gallery {
|
||||||
|
gap: 18px;
|
||||||
|
padding: 28px 22px;
|
||||||
|
}
|
||||||
|
.reading-stage .project-case-study[data-media-layout='portrait-strip'] > .project-media-gallery figcaption {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- The hero arrives with the crane shot ---------- */
|
||||||
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
.hero-journey .hero-name {
|
||||||
|
animation: title-card-rise 1.5s cubic-bezier(0.16, 0.84, 0.24, 1) 0.9s both;
|
||||||
|
}
|
||||||
|
.hero-journey__content > :not(.hero-name) {
|
||||||
|
animation: title-card-wipe 1.1s cubic-bezier(0.6, 0, 0.2, 1) both;
|
||||||
|
}
|
||||||
|
.hero-journey__content > :nth-child(2) { animation-delay: 1.7s; }
|
||||||
|
.hero-journey__content > :nth-child(3) { animation-delay: 1.85s; }
|
||||||
|
.hero-journey__content > :nth-child(4) { animation-delay: 2s; }
|
||||||
|
.hero-journey__content > :nth-child(n + 5) { animation-delay: 2.15s; }
|
||||||
|
}
|
||||||
|
@keyframes title-card-rise {
|
||||||
|
from { clip-path: inset(0 -10% 100% -10%); translate: 0 0.3em; }
|
||||||
|
to { clip-path: inset(-20% -10% -20% -10%); translate: 0 0; }
|
||||||
|
}
|
||||||
|
@keyframes title-card-wipe {
|
||||||
|
from { clip-path: inset(-10% 100% -10% 0); }
|
||||||
|
to { clip-path: inset(-10% -4% -10% 0); }
|
||||||
|
}
|
||||||
|
@media (forced-colors: active) {
|
||||||
|
.hero-journey .hero-name__text {
|
||||||
|
background: none;
|
||||||
|
filter: none;
|
||||||
|
-webkit-text-fill-color: CanvasText;
|
||||||
|
color: CanvasText;
|
||||||
|
}
|
||||||
|
.reading-stage .chapter-body::after { display: none; }
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user