/* ==================================================================== * Built on tokens.css, which is Porsche's own design system read out of their stylesheets. Two findings from actually DRIVING their page, not screenshotting it, and both are architectural: 1. NOTHING ON THEIR PAGE IS STICKY OR FIXED. Checked at five scroll positions: zero fixed or sticky elements. The header is absolute, scrolls away, and never comes back. No bar chases you down the page. A lot of the calm is simply that. 2. EVERY BLOCK CARRIES A COLOUR SCHEME. Their DOM is full of section.scheme-dark, div.scheme-light, p-link-tile.scheme-dark, and the components inside read their colours FROM the scheme instead of choosing a side themselves. I had been hardcoding light or dark per section, which is why inverting one meant restating every colour in it. Here a scheme sets a local token set and every child follows - so fontToDark is ONE class swap and the entire section crosses over together, ground, headings, secondary text, rules, frosted fills, on their 1.2s. Motion is only ever their four durations on their three curves: .25s colour and small state .4s transform and opacity .6s the tile that expands 1.2s the scheme crossover * ==================================================================== */ /* THE SAFE-AREA INSETS, behind variables on purpose. With viewport-fit=cover the page extends under the iOS status bar and the home indicator, which is the only way to stop that strip being painted by the browser instead of by us. Everything that touches a screen edge then has to add its inset back, or the wordmark sits under the clock. These are behind --sat/--sab rather than inlined env() so the wiring can be PROVED on a machine with no notch: set --sat to 50px and every edge should move. env() cannot be overridden; a variable can. */ :root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)} *{box-sizing:border-box;margin:0;padding:0} body{ /* NOT the page ground - see the note further down. body's background is the colour iOS Safari tints the status-bar strip with, so it is the dark canvas;
carries the white page ground. Two body backgrounds disagreeing by cascade order is how this gets broken again. */ background:var(--p-canvas-dark); color:var(--p-primary); font-family:var(--sans); font-size:var(--ts-sm); line-height:1.5; font-stretch:93%; -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--p-focus);outline-offset:3px} /* ========================= the scheme system ======================== */ .scheme-light{ --canvas:var(--p-canvas); --ink:var(--p-primary); --c-higher:var(--p-contrast-higher); --c-high:var(--p-contrast-high); --c-medium:var(--p-contrast-medium); --c-low:var(--p-contrast-low); --c-lower:var(--p-contrast-lower); --frost:var(--p-frosted); --frost-strong:var(--p-frosted-strong); --on-frost:var(--p-primary); } .scheme-dark{ --canvas:var(--p-canvas-dark); --ink:var(--p-primary-dark); --c-higher:var(--pd-contrast-higher); --c-high:var(--pd-contrast-high); --c-medium:var(--pd-contrast-medium); --c-low:var(--pd-contrast-low); --c-lower:var(--pd-frosted-strong); --frost:var(--pd-frosted); --frost-strong:var(--pd-frosted-strong); --on-frost:var(--p-primary-dark); } .scheme-light,.scheme-dark{ background:var(--canvas); color:var(--ink); transition:background-color var(--d-xl) var(--e-base), color var(--d-xl) var(--e-base); } /* a scheme over a photograph must not paint its own ground */ .scheme-dark.over-media{background:transparent} /* ============================= controls ============================= */ .btn{ display:inline-block;border:0;border-radius:var(--r-xl); padding:var(--sp-md) calc(var(--sp-md) * 1.7); font:var(--fw-normal) var(--ts-sm)/1.5 var(--sans); text-align:center;cursor:pointer; transition:background-color var(--d-sm) var(--e-base), color var(--d-sm) var(--e-base), filter var(--d-sm) var(--e-base); } .btn-solid{background:var(--ink);color:var(--canvas)} .btn-solid:hover{filter:brightness(1.1)} .round{width:calc(var(--sp-md) * 2.1);aspect-ratio:1;border-radius:var(--r-full); background:var(--frost-strong);color:var(--on-frost); display:grid;place-items:center;font-size:var(--ts-sm); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:background-color var(--d-sm) var(--e-base)} /* =============================== the bar ============================ */ /* absolute, exactly as theirs is. It scrolls away and does not return. */ .bar{position:absolute;inset:0 0 auto 0;z-index:5; display:grid;grid-template-columns:2.75rem 1fr 2.75rem;align-items:center; padding:calc(var(--sp-sm) + var(--sat)) var(--gutter) var(--sp-sm); color:var(--ink)} /* The hero picture breathes, so what sits behind this bar changes over the cycle. At the far end of heroBreathe a bright region arrives under the wordmark and 12px type measured 2.53:1 there - a failure invisible in any single frame. Solved for the worst frame: white needs the ground at or below 0.183 relative luminance, the picture reaches 0.876 there, so the scrim has to carry 0.80 at the top. */ /* The bar is the ONLY type still over the picture, and the picture is now bright, so this scrim has to do real work. Solved against the new take. */ .bar::before{content:"";position:absolute;inset:0 0 -2.4rem 0;z-index:-1; background:linear-gradient(180deg,rgba(5,6,8,.86) 0%,rgba(5,6,8,.54) 52%,rgba(5,6,8,0) 100%); pointer-events:none} /* ---- THE HEADER, built on the client's own mark ---- Kamel: "the top of the screen can look better. It's very basic and small." It was a 12px typed wordmark between a text glyph and the word "Call". Porsche's is their crest at ~48px between two thin line icons. The client HAS a crest - the circular skyline-and-plane emblem on their live site - so the header now carries it, cut from their own Logo.png and recoloured white. Nothing redrawn, nothing invented. Line icons replace the text glyph and the word: 1.4px strokes, the weight Porsche's header icons are drawn at. Every control is at least 44px. */ .bar{min-height:calc(4.25rem + var(--sat))} .bar::before{bottom:-3.2rem} .ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round;display:block} .bar .burger,.bar .tel{min-width:44px;min-height:44px;display:flex; align-items:center;gap:.45rem;border:0;color:inherit} .bar .burger{justify-content:flex-start} .bar .tel{justify-content:flex-end;font:var(--fw-normal) var(--ts-xs)/1 var(--sans); letter-spacing:.02em} .bar .tel .tl{display:none} .brand{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.35rem;color:inherit;border:0;text-decoration:none;min-height:44px} .brand .crest{display:block;height:3rem;width:auto} .brand .name{display:none;font:var(--fw-bold) var(--ts-2xs)/1.15 var(--sans); font-stretch:75%;letter-spacing:.22em;text-transform:uppercase;text-align:center} .brand .name b{font-weight:var(--fw-bold)} .brand .name i{font-style:normal;font-weight:var(--fw-normal);letter-spacing:.3em; opacity:.86} /* A - THE CREST. Porsche's arrangement exactly: mark centred, icons either side, no words at all. The strongest silhouette, the least to read. */ .bar.hdr-a .brand .crest{height:3.1rem} /* B - CREST AND NAME. The same centred crest, smaller, with the name set beneath it in two weights - for the visitor who has never heard of them. */ .bar.hdr-b .brand .crest{height:2.35rem} .bar.hdr-b .brand .name{display:block} .bar.hdr-b .brand .name b,.bar.hdr-b .brand .name i{display:block} /* C - LOCKUP LEFT. The conventional premium header: crest and name side by side on the left, call and menu as frosted round buttons on the right. */ .bar.hdr-c{grid-template-columns:1fr auto auto;column-gap:.6rem} .bar.hdr-c .brand{order:1;flex-direction:row;justify-content:flex-start;gap:.7rem} .bar.hdr-c .brand .crest{height:2.6rem} .bar.hdr-c .brand .name{display:block;text-align:left} .bar.hdr-c .brand .name b,.bar.hdr-c .brand .name i{display:block} .bar.hdr-c .tel{order:2} .bar.hdr-c .burger{order:3} .bar.hdr-c .tel,.bar.hdr-c .burger{justify-content:center;width:44px;height:44px; border-radius:var(--r-full);background:var(--frost-strong); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .bar.hdr-c .ico{width:21px;height:21px} /* ================================ hero ============================== */ /* superseded by the two-row hero below */ .hero picture img{object-position:50% 46%} .loops .hero picture img{animation:drift 40s var(--e-base) infinite alternate} @keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.1) translate3d(-1.4%,-1%,0)}} /* the plate falls to near-black on its own - measured 10/255 in its lower third - so it takes barely any scrim */ /* Deepened once the hero became VIDEO. A still has one brightness; a clip has a different one every frame, and two samples of the loop found the ground under the sub at 0.139 and then 0.198 relative luminance - so the honest worst case is brighter than any single sample. Solved for the ground instead of chasing frames: white type needs it at or below 0.183, the clip reaches about 0.245 unscrimmed, so the gradient carries 0.48 where the sub sits. The top 40% is left clear, which is where the picture is doing its work. */ /* Rebuilt AGAIN for the interior clip, and the numbers moved the other way: the cabin is darker at the top than the exterior shot was (bar wordmark 19.54:1 with no help at all) but BRIGHTER at the bottom, because the dolly brings the console and the seat backs into the lower frame. Measured across 50 frames of the 20s loop, the headline came in at 2.46:1 against the 3:1 it needs and the sub at 3.96:1 against 4.5. Solved from the measured ground rather than by eye: under the headline the clip reaches 0.586 unscrimmed and needs to sit at or below 0.30, so 0.60 there; under the sub it reaches 0.396 and needs 0.183, so 0.74. The top 34% is left completely clear, which is where the windscreen and the city are. */ /* Eased back for the parked-cabin clip. The previous numbers were solved for the DRIVING clip, which was bright at the bottom; this one is dark there, so the same gradient was burying leather that did not need burying - the headline measured 8.43:1 against a 3:1 requirement, which is headroom being spent on nothing. Lightened, then re-measured across 50 frames of the loop. A scrim is a budget: spend only what the measurement demands. */ /* ---- THE SCRIM IS GONE, AND SO IS THE PROBLEM IT KEPT CAUSING ---------- Kamel asked for the hero to be lighter, and the new take is: a bright, airy evening under a lit canopy with cream leather inside. White type cannot be made legible on that. Every previous version of this hero was fixed by deepening a gradient - five times - and each deepening darkened the picture. On a bright cream interior that road ends in mud. So the words come OFF the photograph onto a solid panel beneath it. The picture keeps all of its brightness, the type sits on a known colour, and the contrast is a FIXED number - headline 20.1:1, sub 13.2:1 - instead of something to re-measure every time the footage changes. Which is what the house rule said all along: never set type on a photograph. TWO ROWS, not percentages. The first attempt gave the media height:66% while the parallax rule was also setting top/bottom:-90px; they fought and the picture collapsed to a strip on desktop. A flex column has no such argument at any width. */ /* dvh, NOT svh. Kamel opened /v3/ on his iPhone and saw white above and below the hero. `svh` is the SMALL viewport - the height when the browser's toolbars are EXPANDED - so a 100svh hero is deliberately shorter than what is actually on screen once Safari collapses its bar, and the white ground of .peek shows under the plate. Measured: the element at the viewport bottom on his screen was DIV.peek. This is invisible to every tool here - headless Chrome has no dynamic toolbar, so it reports svh == lvh == dvh == vh == 844 and the hero fits exactly. A class of bug my instruments cannot reproduce. `dvh` tracks the live viewport, so the hero always fills it and nothing is ever clipped. `lvh` would have been the wrong answer the other way: taller than the visible area on load, pushing the Reserve button under the fold. */ .hero{display:flex;flex-direction:column;min-height:100vh;overflow:hidden} .hero{min-height:100dvh} .stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden} .stage > picture,.stage .film{position:absolute;inset:-90px 0;width:100%;height:auto; min-height:calc(100% + 180px)} .stage picture img,.stage .film{object-fit:cover} /* The photograph FILLS the stage, like the film over it. It used to take its height from its own shape, so on a tall iPhone it ended ~695px down and the grey stage showed beneath it until the clip faded in (Kamel's screenshot after a refresh, 2 Oct). Filled and cropped the same way as the film, the still and the clip's first frame now line up, so the handover does not shift the picture either. */ .stage > picture{display:block} .stage > picture img{display:block;width:100%;height:100%} /* desktop: the film is width-fitted from its top edge, so its first frame's top is what shows; the desktop still IS that top (img/d-pov-wide.jpg, cut from frame 0 of hero-oner.mp4) and is pinned to the top too */ @media (min-width:901px){.hero:not(.hero-page) .stage > picture img{object-position:50% 46%}} /* ONE FULL SCREEN, TYPE ON THE PICTURE. Kamel, with their hero beside ours: "it's kind of like cut off and you know, just goes from the video to black… it's almost like it's a fuller screen and it's kind of more integrated." He is right, and theirs is exactly that. Mine was a solid panel because white on cream leather failed contrast five rounds running, and every fix deepened a scrim across the WHOLE picture - which darkened the thing he had asked to brighten. The house rule "never set type on a photograph" was the right retreat then and is the wrong answer to this, because the thing that makes it work is the one I had not tried: anchor the veil to the BOTTOM and size it from measurement. SIZED FROM THE FOOTAGE, not by eye. 90 frames sampled across the take, over the visible centre crop, taking the 90th-percentile luminance in each band - the worst case for white type, not the average: headline band (60-76% height) worst L 0.501 bare 1.90:1, needs 3.0 sub band (76-85% height) worst L 0.440 bare 2.14:1, needs 4.5 Solving the sRGB composite for those exact pixels: black at alpha 0.21 clears the headline and 0.33 clears the sub. The stops below carry 0.30 and 0.52, well past both, and the top 42% is left COMPLETELY clear - which is why this does not make the hero dark the way the old scrims did. */ .hero .veil{position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg, rgba(1,2,5,0) 38%, rgba(1,2,5,.50) 60%, rgba(1,2,5,.60) 80%, rgba(1,2,5,.72) 100%)} /* deepened 25 Sep: the new h1 label sits at ~64% and read 3.6:1 over the seat */ .hero .plate{position:absolute;left:0;right:0;bottom:0;z-index:3; padding:var(--sp-lg) var(--gutter) calc(var(--sp-xl) + var(--sp-lg) + var(--sab))} /* the scroll cue theirs carries, centred at the foot of the screen */ .scrolldown{position:absolute;left:50%;bottom:calc(var(--sp-md) + var(--sab)); transform:translateX(-50%);z-index:3;color:var(--ink); font-size:var(--ts-md);line-height:1;border:0; transition:transform var(--d-md) var(--e-base)} .loops .scrolldown{animation:nudge 2s var(--e-base) infinite} @keyframes nudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}} .hero .in{position:relative;z-index:2;padding:0} .hero h1{font:var(--fw-normal) var(--ts-4xl)/1.02 var(--sans);font-stretch:93%; letter-spacing:-.025em;color:var(--ink);max-width:13ch} /* Full ink, not --c-higher. Measured across all 18 frames of the playing hero video, the brightest ground under this line is 0.1390 relative luminance and the .78-alpha version came in at exactly 4.50:1 - on the threshold, which is not a pass. At full strength it is 5.56:1. The video is the ground now, so the contrast has to be measured against the whole loop, not the poster. */ /* Back to the scheme's secondary now that it sits on a known panel colour: rgba(246,246,248,.67) on rgb(1,2,5) is a fixed 12.2:1, so the hierarchy returns and there is nothing left to re-measure per frame. */ /* FULL WHITE, not --c-high. The solver above assumed white text; --c-high is rgba(246,246,248,.67), which on the veiled ground would land under 4.5:1. Hierarchy comes from size here, as it does on theirs. */ .hero .sub{margin-top:var(--sp-sm);font:var(--fw-normal) var(--ts-md)/1.4 var(--sans); color:var(--ink);max-width:26ch} .hero .btn{margin-top:var(--sp-md)} /* homeStageHeadlineAnimation, 1.2s */ .anim .hero h1,.anim .hero .sub,.anim .hero .btn{opacity:0; transform:translate3d(0,var(--sp-sm),0)} .anim .hero.lit h1,.anim .hero.lit .sub,.anim .hero.lit .btn{ opacity:1;transform:none; transition:opacity var(--d-xl) var(--e-in),transform var(--d-xl) var(--e-in)} .anim .hero.lit .sub{transition-delay:.1s} .anim .hero.lit .btn{transition-delay:.2s} @media (prefers-reduced-motion:reduce){ /* under reduce the headline still fades in, it just does not travel */ .anim .hero h1,.anim .hero .sub,.anim .hero .btn{transform:none!important} } /* It pauses the picture, so it lives on the picture - it used to sit at the bottom of the hero, which is now the solid panel, where a frosted circle on near-black is both invisible and meaningless. */ .motionbtn{position:absolute;right:var(--gutter);bottom:calc(var(--sp-md) + var(--sab));z-index:3; width:2.6rem;height:2.6rem;border:0;border-radius:var(--r-full); background:var(--frost-strong);color:var(--on-frost); font-size:var(--ts-2xs);cursor:pointer; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:background-color var(--d-sm) var(--e-base)} /* The scroll indicator is gone too. It was a bare 1px hairline with a moving tick, sitting at z-index 3 while the peeking tile sits at 4 - so it ran behind the card and showed as a 20px fragment poking out of the dark. It read as debris, which is exactly what Kamel called it. Theirs is an arrow icon; the tile already peeking above the fold is the better cue here, so this is one fewer thing on the screen rather than one more. */ /* ================ the first card, BELOW the hero ==================== */ /* It used to pull up over the hero's dark plate on a negative margin - which is where the name .peek came from - and Kamel caught that theirs does not do that: "the first card crosses the black. Shouldn't it be under it per the Porsche site". Photographed their own page to check, with the consent killer so the frames were usable: their hero ends on a hard edge, then WHITE SPACE, then the first card starts fully below it. Measured gap about 52px at 390 wide, which is --sp-xl (3vw + 38 = 49.7px there). The overlap was mine, not theirs. The z-index went with it: its only stated job was winning the stack against the hero, and there is nothing to overlap now. */ .peek{position:relative;padding:0 var(--gutter); margin-top:var(--sp-xl)} .tile{position:relative;display:block;border-radius:var(--r-2xl);overflow:hidden; aspect-ratio:16/7;background:#14161B} .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 34%;transition:transform var(--d-lg) var(--e-base)} .tile:hover img{transform:scale(1.03)} .tile .lab{position:absolute;inset:auto 0 0 0;display:flex;align-items:center; justify-content:space-between;gap:var(--sp-sm);padding:var(--sp-sm) var(--sp-md); background:linear-gradient(180deg,rgba(4,5,7,0) 0%,rgba(4,5,7,.6) 66%)} .tile .lab b{font:var(--fw-normal) var(--ts-lg)/1.2 var(--sans);font-stretch:93%; color:#fff} /* ========================= centred statement ======================== */ .stmt{padding:var(--sp-2xl) var(--gutter) var(--sp-sm);text-align:center} .stmt h2{font:var(--fw-normal) var(--ts-3xl)/1.1 var(--sans);font-stretch:93%; letter-spacing:-.022em;max-width:20ch;margin:0 auto} .stmt p{margin:var(--sp-md) auto 0;font:var(--fw-normal) var(--ts-md)/1.5 var(--sans); color:var(--c-high);max-width:36ch} /* ===================== the range, fontToDark ======================== */ /* One class swap: scheme-dark becomes scheme-light. Every child reads --ink, --c-high, --c-lower and --frost-strong from the scheme, so ground, wordmark, names, descriptions, pagination and fine print all cross over together on their 1.2s. The markup's resting state is scheme-light, so with no script it is simply a paper section. */ #range{padding-bottom:var(--sp-sm)} .sig{text-align:center;padding:var(--sp-lg) var(--gutter) var(--sp-md)} .sig span{display:inline-block;font:var(--fw-bold) var(--ts-2xl)/1 var(--sans); font-stretch:75%;letter-spacing:-.015em;text-transform:uppercase;color:var(--ink)} /* ============================= pagination =========================== */ /* The .rail / .card block that used to live here is gone. It styled the thumbnail rail from an earlier version of this section, replaced by the full-screen slides; an audit of which selectors still match anything on the page turned up eleven dead rules and Kamel spotted the leftovers before I did. Dead CSS is not harmless - it is what let .menu{display:flex} win a specificity fight against [hidden]. */ .pag{display:flex;justify-content:center;margin-top:var(--sp-md)} .pag .track{display:flex;gap:var(--sp-xs);background:var(--frost-strong); border-radius:var(--r-full);padding:var(--sp-xs) calc(var(--sp-xs) * 2)} .pag i{width:7px;height:7px;border-radius:var(--r-full);background:var(--c-lower); transition:width var(--d-sm) var(--e-base),background-color var(--d-sm) var(--e-base)} .pag i.on{background:var(--ink);width:22px} .fine{margin:var(--sp-md) auto 0;padding:0 var(--gutter);max-width:calc(56ch + 2 * var(--gutter)); /* the 56ch is for the words; it used to include the gutters, leaving a one-word column on desktop */ text-align:center;font:var(--fw-normal) var(--ts-2xs)/1.55 var(--sans); color:var(--c-high)} /* ============================== booking ============================= */ .book{margin-top:var(--sp-2xl);padding:var(--sp-xl) 0;text-align:center} .book .k{font:var(--fw-normal) var(--ts-2xs)/1 var(--sans);letter-spacing:.2em; text-transform:uppercase;color:var(--c-medium)} .book h2{margin:var(--sp-sm) auto 0;font:var(--fw-normal) var(--ts-2xl)/1.12 var(--sans); font-stretch:93%;letter-spacing:-.02em;max-width:20ch} .book p{margin:var(--sp-sm) auto 0;font:var(--fw-normal) var(--ts-sm)/1.5 var(--sans); color:var(--c-high);max-width:34ch} /* The booking section's ask (Kamel picked B, 2 Oct): one large Reserve that opens LimoAnywhere's booking page, and the phone underneath for anyone who would rather call. Nothing loads here any more, so nothing jumps. */ .bkp{margin:var(--sp-lg) auto 0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-md);padding:0 var(--gutter)} .bkp-go{min-width:min(100%,18rem);justify-content:center;border-radius:var(--r-full)} .bkp-tel{font:var(--fw-normal) var(--ts-sm)/1.4 var(--sans);color:var(--c-high);text-decoration:none; border-bottom:1px solid rgba(250,251,255,.3);padding-bottom:.15rem;white-space:nowrap} .bkp-tel:hover{color:var(--ink);border-bottom-color:currentColor} .rs-solo .bkp{margin:2rem 0 0;align-items:flex-start;padding:0} .rs-solo .bkp-tel{display:none} /* the notes above already say "Rather call?" with the number */ @media (min-width:900px){.rsA.rs-solo .in{grid-template-columns:minmax(0,40rem)}} /* =============================== footer ============================= */ /* THEIR FOOTER IS DARK, AND MINE WAS WHITE. Measured the ground off their own frames at y6500 and y7200 rather than trusting my eye: rgb(1,2,6) at every sample, which is --p-canvas-dark (#010205) to within one unit of blue. That is ~1,100px of the bottom half sitting at the opposite value, which is exactly the half Kamel keeps saying does not look like theirs. One class swap on