Add project previews and race replay
This commit is contained in:
+167
-76
@@ -489,17 +489,6 @@ button {
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
.studio-product-logo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #0004;
|
||||
}
|
||||
.studio-product-logo img {
|
||||
width: 43%;
|
||||
height: auto;
|
||||
}
|
||||
.studio-project-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1002,33 +991,119 @@ button {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
padding: 4.5%;
|
||||
background: radial-gradient(circle at 85% 10%, #313d65 0, #1d2339 42%, #151923 100%);
|
||||
}
|
||||
.manyangles-preview > img {
|
||||
object-fit: cover;
|
||||
object-position: 50% 40%;
|
||||
}
|
||||
.manyangles-lockup {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
.manyangles-demo {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
padding: 6%;
|
||||
color: white;
|
||||
background: linear-gradient(transparent 45%, #101e33b3);
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ffffff22;
|
||||
border-radius: 10px;
|
||||
background: #1b1e2a;
|
||||
box-shadow: 0 14px 35px #05091460;
|
||||
color: #f5f5f7;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.manyangles-lockup svg {
|
||||
width: 9%;
|
||||
max-width: 42px;
|
||||
flex-shrink: 0;
|
||||
.manyangles-demo-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 13%;
|
||||
padding: 0 4%;
|
||||
border-bottom: 1px solid #ffffff1a;
|
||||
font-size: clamp(8px, .9vw, 12px);
|
||||
}
|
||||
.manyangles-lockup span {
|
||||
.manyangles-demo-bar-title,
|
||||
.manyangles-demo-share,
|
||||
.manyangles-demo-bottom > span:first-child {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
.manyangles-demo-bar-title { font-weight: 700; }
|
||||
.manyangles-demo-share { color: #b8c6ff; }
|
||||
.manyangles-demo-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 5% 6% 4%;
|
||||
}
|
||||
.manyangles-demo-intro > span {
|
||||
display: block;
|
||||
margin-bottom: 2.5%;
|
||||
color: #a7b7f3;
|
||||
font-size: clamp(7px, .7vw, 10px);
|
||||
font-weight: 700;
|
||||
font-variation-settings: "SHRP" 70;
|
||||
font-size: clamp(24px, 3vw, 36px);
|
||||
letter-spacing: -0.04em;
|
||||
letter-spacing: .18em;
|
||||
}
|
||||
.manyangles-demo-intro strong {
|
||||
display: block;
|
||||
font-size: clamp(17px, 2.1vw, 31px);
|
||||
letter-spacing: -.035em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.manyangles-demo-intro p {
|
||||
margin: 2.2% 0 0;
|
||||
color: #b9bdca;
|
||||
font-size: clamp(8px, .9vw, 12px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.manyangles-demo-photos {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 2%;
|
||||
min-height: 0;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.manyangles-demo-photo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(165deg, var(--tile-sky), var(--tile-horizon));
|
||||
}
|
||||
.manyangles-demo-photo::before,
|
||||
.manyangles-demo-photo::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
inset: auto -20% -12%;
|
||||
height: 65%;
|
||||
border-radius: 48% 52% 0 0;
|
||||
background: var(--tile-hill);
|
||||
transform: rotate(-11deg);
|
||||
}
|
||||
.manyangles-demo-photo::after {
|
||||
inset: auto -25% -35%;
|
||||
height: 70%;
|
||||
background: var(--tile-foreground);
|
||||
transform: rotate(14deg);
|
||||
}
|
||||
.manyangles-demo-photo span {
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
right: 19%;
|
||||
width: 17%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: var(--tile-sun);
|
||||
box-shadow: 0 0 20px 5px var(--tile-sun);
|
||||
}
|
||||
.manyangles-demo-photo--one { --tile-sky: #f0baa3; --tile-horizon: #e5d8c6; --tile-hill: #769b99; --tile-foreground: #3d646f; --tile-sun: #fff0b8; }
|
||||
.manyangles-demo-photo--two { --tile-sky: #a7bbd9; --tile-horizon: #d8d2bb; --tile-hill: #81948c; --tile-foreground: #576d6d; --tile-sun: #f8e0ae; }
|
||||
.manyangles-demo-photo--three { --tile-sky: #d9b5be; --tile-horizon: #e8cdb6; --tile-hill: #9f998c; --tile-foreground: #6b797a; --tile-sun: #fff2ce; }
|
||||
.manyangles-demo-photo--four { --tile-sky: #9eb6cf; --tile-horizon: #cddbd5; --tile-hill: #6c958c; --tile-foreground: #3f6c70; --tile-sun: #f6e9bf; }
|
||||
.manyangles-demo-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-top: 4%;
|
||||
color: #b9bdca;
|
||||
font-size: clamp(7px, .75vw, 10px);
|
||||
}
|
||||
|
||||
.type-study-controls {
|
||||
padding: 22px 0;
|
||||
@@ -2745,17 +2820,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Shared product branding over the existing product imagery. */
|
||||
.studio-product-logo {
|
||||
background: radial-gradient(ellipse at center, #071c2660, #071c261c 75%);
|
||||
}
|
||||
.studio-product-logo img {
|
||||
filter: drop-shadow(0 2px 3px #0009) drop-shadow(0 8px 18px #0008);
|
||||
}
|
||||
.beenvoice-logo img {
|
||||
width: 55%;
|
||||
filter: brightness(0) invert(1) drop-shadow(0 2px 3px #0009) drop-shadow(0 8px 18px #0008);
|
||||
}
|
||||
.mobile-menu-label,
|
||||
.primary-links .header-dropdown .mobile-menu-link {
|
||||
display: none;
|
||||
@@ -2794,18 +2858,6 @@ body {
|
||||
.nav-inner, .primary-links { gap: 8px; }
|
||||
}
|
||||
|
||||
/* Brand marks share a centered, shadowed treatment. */
|
||||
.manyangles-lockup {
|
||||
inset: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
background: radial-gradient(ellipse at center, #071c2660, #071c261c 75%);
|
||||
}
|
||||
.manyangles-lockup svg,
|
||||
.manyangles-lockup span {
|
||||
filter: drop-shadow(0 2px 3px #0009) drop-shadow(0 8px 18px #0008);
|
||||
}
|
||||
.hadlock-brand img { width: min(100%, 340px); height: auto; }
|
||||
|
||||
/* Personal postcards: photographs, editorial captions, a playful calendar. */
|
||||
@@ -2942,28 +2994,17 @@ body {
|
||||
--accent-foreground: 199 47% 20%;
|
||||
}
|
||||
|
||||
/* One proportional logo height, independent of each wordmark's width. */
|
||||
.studio-project-image {
|
||||
container-type: inline-size;
|
||||
--project-logo-height: 8cqw;
|
||||
}
|
||||
.studio-product-logo img,
|
||||
.beenvoice-logo img {
|
||||
width: auto;
|
||||
height: var(--project-logo-height);
|
||||
max-width: 84%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.manyangles-lockup { gap: 2cqw; }
|
||||
.manyangles-lockup svg {
|
||||
width: var(--project-logo-height);
|
||||
height: var(--project-logo-height);
|
||||
max-width: none;
|
||||
}
|
||||
.manyangles-lockup span {
|
||||
/* Match visible capital height to the SVG wordmarks. */
|
||||
font-size: 10.5cqw;
|
||||
line-height: 1;
|
||||
/* Brand identity sits in the caption below each unobstructed project image. */
|
||||
.project-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; max-width: 100%; line-height: 1; }
|
||||
.project-brand > img { display: block; flex: none; width: auto; height: 27px; max-width: min(45vw, 190px); object-fit: contain; }
|
||||
.project-brand--racetix > img { filter: brightness(0); }
|
||||
.project-brand--beenvoice > img { height: 25px; filter: brightness(0); }
|
||||
.project-brand--puter > img { width: 30px; height: 30px; border-radius: 7px; }
|
||||
.project-brand--manyangles { font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
|
||||
.project-brand--manyangles svg { flex: none; width: 29px; height: 29px; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.project-brand--racetix > img,
|
||||
.project-brand--beenvoice > img { filter: brightness(0) invert(1); }
|
||||
}
|
||||
|
||||
/* Contact and footer use a single shared backdrop. */
|
||||
@@ -2977,6 +3018,56 @@ body {
|
||||
.archive-image > img { object-fit: contain; object-position: center; }
|
||||
.archive-image--photo > img { object-fit: cover; }
|
||||
|
||||
/* Puter's real macOS captures, paired with its compiled app icon. */
|
||||
.puter .studio-project-image { background: #d7e8df; }
|
||||
.puter-preview {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at 80% 5%, #eff9f1, #c6dfd0 85%);
|
||||
}
|
||||
.puter-preview--dark { background: radial-gradient(circle at 80% 5%, #31574a, #11332a 85%); }
|
||||
.puter-preview .puter-preview-screen,
|
||||
.archive-image .puter-preview .puter-preview-screen {
|
||||
position: absolute !important;
|
||||
inset: 7% 5% auto !important;
|
||||
width: 90% !important;
|
||||
height: 86% !important;
|
||||
margin: 0 !important;
|
||||
border: 1px solid #28564222;
|
||||
border-radius: 9px;
|
||||
object-fit: cover !important;
|
||||
object-position: top center;
|
||||
box-shadow: 0 15px 28px #15352830;
|
||||
}
|
||||
.puter-preview--interactive .puter-preview-screen,
|
||||
.archive-image .puter-preview--interactive .puter-preview-screen { height: 76% !important; }
|
||||
.puter-preview-controls {
|
||||
position: absolute;
|
||||
right: 4%;
|
||||
bottom: 4%;
|
||||
left: 4%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.puter-preview-controls button {
|
||||
flex: none;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #52756755;
|
||||
border-radius: 999px;
|
||||
background: #ffffffb8;
|
||||
color: #174634;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.puter-preview-controls button[aria-pressed="true"] { background: #0c5d40; border-color: #0c5d40; color: #fff; }
|
||||
.puter-preview--dark .puter-preview-controls button { background: #173a2f; color: #effcf3; }
|
||||
.puter-preview--dark .puter-preview-controls button[aria-pressed="true"] { background: #c0efd3; color: #0a3021; }
|
||||
|
||||
/* September 10's full-width mobile header panel. */
|
||||
.restored-header-menu {
|
||||
width: 100vw;
|
||||
|
||||
Reference in New Issue
Block a user