/* ===========================================================================
The Clay Studio — mobile & tablet layer
---------------------------------------------------------------------------
EVERY rule in this file lives inside a media query that caps the viewport at
1024px (tablet landscape and below). Nothing here can reach a desktop or
laptop window, so the wide layout stays exactly as it shipped.
Loaded LAST on every page, so it wins ties against base/home/pages/radar.css.
WHY IT LIVES IN public/ INSTEAD OF src/styles/
Vite bundles the stylesheets it processes into per-chunk files and decides
their order itself: a shared by all six pages is hoisted into a chunk
that the built HTML loads *before* each page's own chunk, and stylesheets in
the same chunk are not guaranteed to keep their order either. Either
way this layer ends up ahead of home/pages/radar.css and silently loses every
tie — in the production build only, so the dev server looks fine. Files in
public/ are copied verbatim and their stays exactly where it is
written, which is the one thing this layer needs. Bump the ?v= query in the
six HTML files when you change it.
Tiers used throughout:
<= 1024px tablets (landscape + portrait)
<= 920px burger nav territory
<= 880px single-column territory (matches the existing breakpoints)
<= 700px large phones / small tablets
<= 560px phones
<= 380px small phones
short + landscape phone held sideways
One exception to the media-query rule: section 0 below (safe-area insets).
It is deliberately unconditional, and it is still desktop-safe — read why
there before adding anything else outside a media query.
=========================================================================== */
/* ==========================================================================
0. Safe-area insets — the only unconditional section in this file
--------------------------------------------------------------------------
The pages ship `viewport-fit=cover`, so the layout viewport extends under
the notch / sensor housing / home indicator and the browser reports how much
room those take with env(safe-area-inset-*).
Why this section is NOT inside a media query:
* env(safe-area-inset-*) is 0px on every device that has no cutouts, so
each rule below computes to exactly the value it is overriding on a
desktop or laptop. Nothing changes there — verified element-by-element.
* capping it at 1024px would miss the devices that need it most. An iPad
Pro in landscape is 1366px wide and still has a home indicator.
Everything is funnelled through the four --sai-* variables rather than bare
env() calls, so the whole system can be exercised by overriding them.
========================================================================== */
:root {
--sai-top: env(safe-area-inset-top, 0px);
--sai-right: env(safe-area-inset-right, 0px);
--sai-bottom: env(safe-area-inset-bottom, 0px);
--sai-left: env(safe-area-inset-left, 0px);
/* Both tokens below restate their tokens.css value and add the inset — keep
the literals in sync with src/styles/tokens.css.
Widening the gutter (rather than padding ) is what keeps the
full-bleed bands — hero marquee, radar band, footer — bleeding all the way
to the glass while their contents stay clear of the cutouts. */
--gutter: max(clamp(1.25rem, 4vw, 3rem), var(--sai-left), var(--sai-right));
/* folding the top inset into --nav-h means every hero that offsets itself by
the nav height follows along automatically */
--nav-h: calc(76px + var(--sai-top));
}
/* the bar grows by the inset; the padding keeps its contents centred in the
66/76px that remain below the status bar */
.site-nav {
padding-top: var(--sai-top);
}
.skip-link:focus {
top: calc(1rem + var(--sai-top));
left: calc(1rem + var(--sai-left));
}
.site-footer {
padding-bottom: calc(2rem + var(--sai-bottom));
}
/* fixed furniture that lives against an edge */
.back-top {
right: calc(1.4rem + var(--sai-right));
bottom: calc(1.4rem + var(--sai-bottom));
}
.clay-toast {
bottom: calc(1.6rem + var(--sai-bottom));
}
/* ==========================================================================
1. Chrome: nav, burger, mobile menu
========================================================================== */
@media (max-width: 920px) {
:root {
--nav-h: calc(66px + var(--sai-top));
}
.brand {
font-size: 1.15rem;
gap: 0.55rem;
}
.brand img {
width: 38px;
height: 38px;
}
.nav-burger {
width: 44px;
height: 44px;
}
.nav-burger span {
left: 13px;
right: 13px;
}
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 26px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; }
/* The burger lives inside .site-nav (z-index 900) which creates its own
stacking context, so its z-index:1001 could never lift it above the open
menu (z-index 1000) — the ✕ was unreachable and the only way out of the
menu was to navigate. Raise the whole bar instead while the menu is open. */
.site-nav.is-menu-open {
z-index: 1100;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: none;
}
.site-nav.is-menu-open .brand {
color: var(--chip-text);
}
/* on the dark menu the solid dark burger disappeared — give it a light shell */
.nav-burger[aria-expanded="true"] {
background: rgba(245, 241, 234, 0.16);
}
/* the reveal circle must stay centred on the (now smaller) burger, which the
safe-area insets have moved down and in */
.mobile-menu {
--burger-x: calc(100% - 42px - var(--sai-right));
--burger-y: calc(33px + var(--sai-top));
clip-path: circle(0% at var(--burger-x) var(--burger-y));
justify-content: flex-start;
padding: calc(var(--nav-h) + 1.4rem) var(--gutter) calc(2rem + var(--sai-bottom));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open {
clip-path: circle(150% at var(--burger-x) var(--burger-y));
}
.mobile-menu a {
font-size: clamp(1.9rem, 8.4vw, 2.9rem);
padding-block: 0.1rem;
}
.mobile-menu .menu-cta {
margin-top: 1.5rem;
padding: 0.95rem 1.6rem;
}
.mobile-menu .menu-meta {
margin-top: auto;
padding-top: 2rem;
}
}
/* phone held sideways: six 3rem links do not fit — shrink and let it scroll */
@media (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) {
.mobile-menu {
padding-block: calc(var(--nav-h) + 0.6rem) 1.2rem;
}
.mobile-menu a {
font-size: 1.55rem;
line-height: 1.35;
}
.mobile-menu .menu-cta {
margin-top: 1rem;
font-size: 0.95rem;
padding: 0.7rem 1.2rem;
}
.mobile-menu .menu-meta {
margin-top: 1.1rem;
padding-top: 0;
font-size: 0.8rem;
}
/* the sticky notes hang outside the container by design; sideways, that puts
them under the sensor housing, so tuck them back in */
.hero-note,
.page-hero-figure .note {
right: 0;
}
}
/* ==========================================================================
2. Touch ergonomics — comfortable targets, no phantom hover states
========================================================================== */
@media (max-width: 1024px) and (pointer: coarse) {
a,
button,
summary,
[role="button"],
input,
select {
-webkit-tap-highlight-color: transparent;
}
/* hover styling never un-sticks on touch: mirror it onto :active instead */
.btn:hover,
.icon-btn:hover,
.topic-chip:hover,
.pill:hover,
.filter-pill:hover,
.legend-pill:hover,
.toggle-btn:hover,
.link-icon:hover,
button.tag:hover {
transition-duration: 0.12s;
}
.link-icon:hover {
transform: none;
}
.btn {
padding: 1rem 1.5rem;
}
.tag,
button.tag {
min-height: 34px;
}
.topic-chip {
min-height: 46px;
}
.footer-nav a,
.footer-bottom a {
min-height: 40px;
display: inline-flex;
align-items: center;
}
.nav-links a {
padding-block: 0.7rem;
}
/* radar controls */
.pill {
min-height: 42px;
}
.legend-pill {
min-height: 40px;
}
.filter-pill {
min-height: 38px;
}
.toggle-btn {
width: 44px;
height: 44px;
}
.sort-select {
min-height: 44px;
}
.link-icon {
width: 40px;
height: 40px;
}
.row-item {
min-height: 60px;
}
.kit-pop-close,
.cert-close {
width: 42px;
height: 42px;
}
}
/* ==========================================================================
3. Type scale & rhythm on small screens
========================================================================== */
@media (max-width: 700px) {
.section {
padding-block: clamp(3.2rem, 9vw, 5.5rem);
}
.section-head {
margin-bottom: clamp(1.8rem, 6vw, 2.6rem);
}
}
@media (max-width: 560px) {
h1 {
font-size: clamp(2.4rem, 11.5vw, 3.4rem);
}
h2 {
font-size: clamp(1.8rem, 8vw, 2.5rem);
}
h3 {
font-size: 1.15rem;
}
.lede {
font-size: 1.06rem;
line-height: 1.6;
}
.hand {
font-size: 1.3rem;
}
.chip {
padding: 0.5rem 0.85rem 0.55rem;
}
.chip-title {
font-size: 0.9rem;
}
.chip-context {
font-size: 0.64rem;
letter-spacing: 0.1em;
}
}
@media (max-width: 380px) {
h1 {
font-size: 2.15rem;
}
h2 {
font-size: 1.65rem;
}
.btn {
font-size: 0.95rem;
padding-inline: 1.25rem;
}
}
/* ==========================================================================
4. Footer
========================================================================== */
@media (max-width: 700px) {
.site-footer {
padding-bottom: 1.6rem;
}
.footer-grid {
gap: 2.2rem;
margin-bottom: 2.4rem;
}
.footer-links {
gap: 0.55rem;
}
.icon-btn {
padding: 0.8rem 1.15rem;
font-size: 0.9rem;
}
.footer-marquee-track {
font-size: clamp(2.4rem, 13vw, 3.6rem);
gap: 2rem;
}
.footer-bottom {
font-size: 0.8rem;
gap: 0.5rem;
}
}
/* ==========================================================================
5. Home — hero
========================================================================== */
@media (max-width: 880px) {
.hero-inner {
padding-block: 2rem 1rem;
gap: 1.4rem;
}
.avatar-toy img {
height: min(34vh, 300px);
}
/* the props are decoration and the column is narrow — let them sit back a
little so the headline always wins (home-three.ts drops the ones that
would land on the copy entirely) */
#hero-canvas {
opacity: 0.78;
}
}
@media (max-width: 700px) {
.hero-note {
right: 0;
top: -0.8rem;
max-width: 140px;
font-size: 1.05rem;
}
}
@media (max-width: 560px) {
.hero-inner {
padding-block: 1.4rem 0.5rem;
}
.avatar-toy img {
height: min(30vh, 252px);
}
/* stop the sticky note from landing on the clay figure's head: on a phone it
simply sits under him, still rotated and still flickable */
.hero-note {
position: static;
max-width: 210px;
margin-top: 1.1rem;
font-size: 1.15rem;
transform: rotate(-1.8deg);
}
.hero-actions {
gap: 0.7rem;
}
.hero-actions .btn {
flex: 1 1 auto;
justify-content: center;
}
.hero-marquee {
padding-block: 0.7rem;
}
.news-item {
padding-inline: 1.1rem;
}
.news-ico {
width: 26px;
height: 26px;
border-radius: 8px;
}
.news-ico svg {
width: 15px;
height: 15px;
}
.news-title {
font-size: 0.9rem;
}
}
/* ==========================================================================
6. Home — facets, radar band, scenes
========================================================================== */
@media (max-width: 560px) {
.facet-card {
padding: 1.2rem 1.2rem 1.4rem;
}
.facet-figure {
height: 220px;
}
.facet-figure img {
height: 214px;
}
.radar-stats {
gap: 0.7rem;
}
.stat-card {
padding: 1.1rem 1rem 1rem;
border-radius: var(--r-md);
}
.stat-num {
font-size: 2.1rem;
}
.stat-label {
font-size: 0.82rem;
}
}
@media (max-width: 880px) {
/* native swipe strip (the pinned scrub is already off for coarse pointers) */
.scenes-track {
gap: 1rem;
scroll-padding-inline: var(--gutter);
}
/* without a trailing spacer the last card loses its right-hand gutter */
.scenes-track::after {
content: "";
flex: 0 0 calc(var(--gutter) - 1rem);
}
.scene-card figcaption {
left: 0.8rem;
right: 0.8rem;
bottom: 0.8rem;
}
.scene-card--cta {
width: min(70vw, 360px);
}
}
/* ==========================================================================
7. Content pages — hero, grids, timeline, kit
========================================================================== */
@media (max-width: 700px) {
.page-hero {
padding-top: calc(var(--nav-h) + 1.4rem);
}
.page-hero-figure img {
height: min(32vh, 280px);
}
.page-hero-figure .note {
max-width: 138px;
font-size: 1.02rem;
}
}
@media (max-width: 560px) {
.page-hero-figure img {
height: min(29vh, 250px);
}
.repo-grid,
.shownote-grid {
grid-template-columns: 1fr;
}
.repo-card {
padding: 1.25rem 1.25rem 1.1rem;
}
.shownote-card .cover {
height: 180px;
}
.about-card {
padding: 1.4rem;
}
.about-figure img {
max-width: 220px;
}
.pull-quote {
font-size: 1.45rem;
padding-left: 0.9rem;
}
/* timeline: reclaim the 2.4rem rail on a 360px screen */
.timeline {
padding-left: 1.9rem;
gap: 1.1rem;
}
.timeline-item {
padding: 1.2rem 1.15rem;
}
.timeline-item::before {
left: calc(-1.9rem + 1px);
top: 1.5rem;
width: 15px;
height: 15px;
border-width: 3px;
}
.timeline-role {
font-size: 1.12rem;
}
.skill-group {
padding: 1.15rem 1.15rem 1.25rem;
}
.value-card {
padding: 1.3rem;
}
.row-item {
padding: 1rem 1.1rem;
gap: 0.85rem;
}
.row-badge {
width: 40px;
height: 40px;
border-radius: 12px;
font-size: 1.15rem;
}
}
/* the certificate has to fit a short screen, not run off it */
@media (max-width: 700px) {
.cert-overlay {
padding: calc(1rem + var(--sai-top)) calc(1rem + var(--sai-right))
calc(1rem + var(--sai-bottom)) calc(1rem + var(--sai-left));
}
.cert-paper {
max-height: calc(100svh - 2rem - var(--sai-top) - var(--sai-bottom));
overflow-y: auto;
overscroll-behavior: contain;
}
.cert-name {
font-size: 1.7rem;
}
.cert-seal {
right: 0.9rem;
bottom: 2.4rem;
width: 58px;
height: 58px;
}
}
@media (max-width: 700px) {
.kit-pop {
width: min(320px, calc(100vw - 24px));
}
}
/* ==========================================================================
8. Radar page
========================================================================== */
@media (max-width: 880px) {
/* Put the instrument itself right under the headline instead of behind a
full screen of copy. `display: contents` promotes the chip / h1 / lede /
hint to siblings of the canvas so they can be ordered freely. */
.radar-hero-inner {
display: flex;
flex-direction: column;
/* the grid rule's `align-items: center` would centre everything horizontally
once this becomes a column flex box */
align-items: flex-start;
gap: 1.1rem;
}
.radar-hero-copy {
display: contents;
}
.radar-hero-copy > .chip { order: 1; }
.radar-hero-copy > h1 { order: 2; }
.radar-viz-wrap { order: 3; }
.radar-hero-copy > .lede { order: 4; }
.radar-hero-copy > .radar-hint { order: 5; }
.radar-viz-wrap {
align-self: center;
max-width: min(94vw, 470px);
margin-block: 0.4rem;
}
/* the blue sticky note sat on top of the blips once the ring got small */
.radar-note {
display: none;
}
.radar-legend {
padding-block: 0.6rem 0.2rem;
}
.radar-tip {
max-width: min(240px, 74vw);
}
.radar-toolbar {
padding-block: 0.55rem;
}
/* fade the right edge so the pill strip reads as scrollable */
.cat-pills {
-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
padding-right: 1.5rem;
}
.radar-section {
scroll-margin-top: 108px;
}
/* Sections start collapsed below 768px. The narrow bar wraps, so the
`visibility: hidden` controls still reserved a whole empty row under every
closed heading — take them out of the flow instead. */
.section-toggle[aria-expanded="false"] ~ .section-controls {
display: none;
}
}
@media (max-width: 560px) {
.radar-section {
padding-block: 1.7rem 0.4rem;
}
.section-controls {
gap: 0.35rem;
}
}
@media (max-width: 560px) {
.radar-hero {
padding-top: calc(var(--nav-h) + 1.4rem);
}
.section-bar {
gap: 0.6rem;
row-gap: 0.5rem;
}
.section-toggle h2 {
font-size: 1.55rem;
}
.section-intro {
font-size: 0.93rem;
}
.card-grid {
gap: 0.9rem;
}
.card-top {
height: 150px;
}
.card-body {
padding: 1rem 1rem 0.9rem;
}
.back-top {
right: calc(1rem + var(--sai-right));
bottom: calc(1rem + var(--sai-bottom));
width: 48px;
height: 48px;
}
}
/* ==========================================================================
9. Speaking — the floating photo wall
========================================================================== */
/* "compact wall": a phone in either orientation. The JS scatter uses the same
test (the *shorter* side of the viewport under ~700px). */
@media (max-width: 700px), (max-width: 1024px) and (max-height: 620px) {
.life-photo {
width: clamp(78px, min(25vw, 30vh), 116px);
padding: 5px 5px 18px;
border-radius: 3px;
}
.life-cap {
font-size: 0.72rem;
padding: 0.32rem 0.6rem;
max-width: 78vw;
}
.life-title h2 {
font-size: clamp(1.75rem, min(9.5vw, 11vh), 2.8rem);
}
.life-title .hand {
font-size: 1.1rem;
}
/* photos crowd the middle on a small screen — float the title on its own halo
so it stays readable no matter what lands behind it */
.life-title::before {
content: "";
position: absolute;
left: -12%;
right: -12%;
top: 50%;
height: min(46vw, 42vh);
transform: translateY(-50%);
border-radius: 50%;
background: radial-gradient(
ellipse at center,
rgba(243, 238, 230, 0.97) 0%,
rgba(243, 238, 230, 0.9) 52%,
rgba(243, 238, 230, 0) 76%
);
z-index: -1;
}
.life-hint {
font-size: 0.82rem;
margin-top: 0.4rem;
}
}
/* ==========================================================================
10. Tablet-specific spacing (portrait tablets have room — just breathe less)
========================================================================== */
@media (min-width: 881px) and (max-width: 1024px) {
.hero-inner {
gap: 2rem;
}
/* a 768px-tall hero puts the props much closer to the headline than a
desktop one does — let them sit back a touch */
#hero-canvas {
opacity: 0.8;
}
.avatar-toy img {
height: min(52vh, 440px);
}
.hero-note {
right: max(-1rem, -3vw);
max-width: 165px;
font-size: 1.15rem;
}
}