/* ========================================================================== PHONE DESIGN — home page, PORTRAIT. index-phone.html only, 2026-09-19. A separate design, not the desktop squeezed: BUILD-BRIEF and Greg, 2026-08-21. Built section by section on a copy of index.php so the old phone layout stays live beside it. Landscape is a later pass and gets its own query. ========================================================================== */ /* The phone's copy of the hero line lives inside the photograph and is off everywhere except the portrait phone. */ .brand-lines--shot { display: none; } .band-fg { display: none; } @media (max-width: 768px) and (orientation: portrait) { /* --- 1. HERO: THE LINE OVER THE PHOTOGRAPH ----------------------------- Greg, 2026-09-19: the name stays in the bar, and the traced line runs on the photograph instead -- the same drawing and the same cycle as the desktop square. 3% OFF THE LEFT EDGE, AND NEVER CLOSER. Greg, 2026-09-19, replacing the second-of-six column. The drawing is squeezed in the markup (see the comment there) and the viewBox is the drawing's WHOLE horizontal extent, ghost and stroke included -- measured with getBBox at 272.7-514.6, plus 2 units of stroke each side. So the box's left edge is the leftmost point the line ever reaches, anywhere in the drawing, and pinning that edge at 3% is the guarantee. Width follows from the height at the drawing's own ratio, about 19% of the picture. TEAL AND SAFFRON, the lockup's two colours, as on the desktop. Thinner than the desktop line because the layout is smaller: about 1px and 0.8px. Inside .shot-clip so the frame clips it; beside the img, not in it, so the breathing does not scale the line. */ .brand-lines--shot { display: block; z-index: 1; overflow: hidden; left: 3%; right: auto; top: 0; height: 100%; width: auto; aspect-ratio: 246.3 / 800; } .brand-lines--shot path { stroke: var(--teal); stroke-width: 4; } .brand-lines--shot .is-ghost path { stroke: var(--saffron); stroke-width: 3; } .brand-lines--shot .is-ghost { opacity: 0.85; } /* --- 2. THE DOTS MOVE ------------------------------------------------- #what-this-is carries Greg's texture on ::after. The phone gives it a second copy on ::before, mirrored and fainter, and js/phone.js slides the two against each other with scroll speed and away from a finger -- the FX sheet's effect 02. Both copies run 8% wider than the section so a sideways push never shows an edge -- and the section clips SIDEWAYS ONLY, because the texture hangs 55vh down into About and must not be cut there. Without the clip the page measured 448px wide on a 390 phone. */ #what-this-is { overflow-x: clip; } #what-this-is::after, #what-this-is::before { left: -8%; right: -8%; will-change: transform; } #what-this-is::after { transform: translate3d(var(--dx-a, 0px), var(--dy-a, 0px), 0) scale(var(--ds-a, 1)); } #what-this-is::before { content: ''; position: absolute; top: 0; height: calc(100% + 55vh); background: url(../images/texture.png) center top / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); pointer-events: none; z-index: -1; opacity: 0.7; transform: scaleX(-1) translate3d(var(--dx-b, 0px), var(--dy-b, 0px), 0) scale(var(--ds-b, 1)); } /* --- 3. SERVICES STACK ------------------------------------------------ The FX sheet's effect 07 on the real cards. Everything about the cards stays -- grey until touched, the accent rule, number, price, arrow. Only the arrangement changes: each card sticks in the middle of the screen and the next slides up over it; the one underneath sinks back and dims as it is covered (--stack, 0..1, written by js/phone.js). Sticky inside the grid, so the whole pile leaves together once the last card has landed. --tch is the card height the site's own rules read, so the image keeps covering the taller card. */ .cards-tall { --tch: min(72svh, 560px); grid-auto-rows: auto; gap: 1.5rem; } .cards-tall .tcard { position: sticky; top: calc((100svh - var(--tch)) / 2); height: var(--tch); transform-origin: 50% 0; transform: scale(calc(1 - var(--stack, 0) * 0.06)); filter: brightness(calc(1 - var(--stack, 0) * 0.45)); box-shadow: 0 -18px 40px -24px rgba(20, 16, 11, 0.55); } /* COLOUR ON ARRIVAL, NOT ON TOUCH. Greg, 2026-09-19: a tap on a card opens the service, so tap-for-colour meant never seeing the colour. A card turns to colour when it is 96% of the way to its resting place and keeps it while the next one covers it; scrolling back up, it goes grey at the same mark and the one underneath shows in colour. .is-lit comes from js/phone.js. */ .cards-tall .tcard.is-lit .tcard-img { filter: grayscale(0) brightness(1.22) contrast(0.94); } /* --- ABOUT: TWO PORTRAITS, TWO ARRIVALS -------------------------------- Greg, 2026-09-19: the pair came in as one block. On the phone the block itself stays put and each frame arrives on its own -- the larger one first, from the right and a little low; the smaller one 0.45s later, from the left and lower still. Different start, different moment, so the pair lands asymmetric rather than as a slab. Still driven by main.js's one observer: it puts .is-in on .duo-media and the frames key off that. `translate`, not `transform`, because main.js writes the frames' transform for the desktop parallax. */ .duo-media.reveal { opacity: 1; transform: none; } .duo-media .duo-frame { opacity: 0; transition: opacity 0.9s var(--ease-soft), translate 1.2s var(--ease-out); } .duo-media .duo-frame--back { translate: 44px 22px; } .duo-media .duo-frame--front { translate: -36px 56px; transition-delay: 0.45s; } .duo-media.is-in .duo-frame { opacity: 1; translate: 0 0; } } /* --- STUDIO: ALWAYS IN COLOUR ON A TOUCH SCREEN --------------------------- Greg, 2026-09-19. On the desktop the three shapes are grey until the pointer is on them. A touch screen has no pointer, and a tap opens the gallery, so the colour was never seen. Any touch screen, either orientation. */ @media (hover: none) { #studio .shape-media img { filter: none; } } /* --- 4. THE BAND: THE MAN OFF THE ROOM ------------------------------------ The FX sheet's effect 04 on the testimonial band. The room and the man are two layers of one photograph; tilt moves him with the phone and the room against it, and without a gyroscope the scroll does it. Both run 7% oversize so neither edge ever shows. PORTRAIT AND LANDSCAPE PHONES, Greg, 2026-09-19 -- it stood still when he turned the phone. A landscape phone is caught by its height, not its width: many are wider than 900, where the desktop band takes over. `translate`, NOT `transform`, is what js/phone.js writes. main.js owns the band image's transform -- it writes its parallax above 900 and clears it below -- and the two were overwriting each other every frame. `translate` is a separate property and composes with it. The `!important` below then stands main.js's parallax down here: an inline style loses to an important stylesheet rule, and the desktop parallax on a 114% image would expose the edge. */ @media (max-width: 768px) and (orientation: portrait), (pointer: coarse) and (orientation: landscape) and (max-height: 540px) { .band--tall .band-media img { position: absolute; top: -7%; left: -7%; width: 114%; height: 114%; /* the site's img reset caps every image at 100%, which left a grey strip down the band's right edge -- 7% of overscan with nothing to fill it */ max-width: none; transform: none !important; will-change: translate; } .band-fg { display: block; -webkit-mask-image: radial-gradient(ellipse 46% 52% at 50% 66%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 46% 52% at 50% 66%, #000 62%, transparent 100%); } .band-media.is-real .band-fg { -webkit-mask-image: none; mask-image: none; } }