/* ============================================================ Mobile (max-width: 760px) — chrome + states A/B/E. States C and D (and the narrow-desktop case) live in their own media query below. ─────────── MOBILE TYPOGRAPHY / CHROME KNOBS ────────────── The :root block here overrides token defaults from base.css. Everything below is structural — to retune phone presentation, edit this block, not the structural rules below. Keep the breakpoint in sync with MOBILE_QUERY in scripts/hero-scroll.js. ============================================================ */ @media (max-width: 760px) { :root { /* State A: a small phone barely fills the 32vw / 32svh clamp, so the assembled logo can disappear into the middle of the screen. Push it up to ~60% of the smaller viewport side. */ --logo-w: clamp(180px, min(60vw, 50svh), 440px); /* Side text typography (state B) — flat sizes so lines don't start looking like a vertical stack on narrow columns. Bumped up a step to balance the larger state-A/B halves. */ --story-fs-h2: 18px; --story-fs-p: 13px; /* Smaller step than desktop: the phone column is ~32ch, so the full step wraps the paragraph down into the scroll hint. */ --story-fs-p-lg: calc(var(--story-fs-p) * 1.3); /* State-B diagonal: how far each half travels from the logo centre. The side text anchors read the same token, so each block's midline lands on its half's midline no matter how many lines the copy wraps to — the same midline-anchoring hero.css uses on desktop. */ --b-split: 26svh; /* Note: --below-h3-fs is overridden in the narrow @media below (it applies to phones too, and the later rule wins). */ } .nav { padding: 20px 24px; } .row { grid-template-columns: 40px 1fr 24px; gap: 16px; padding: 24px 0; } .row .desc { grid-column: 2 / 3; } .services { padding: 60px 24px 100px; } .services-head { grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; } footer { grid-template-columns: 1fr; text-align: center; padding: 32px 24px; } footer .right { text-align: center; } .contact { padding: 80px 24px; } /* State B mobile rework: diagonal split (clock up-left, smiley down-right) with text in the opposite quadrants. Halves also shrink to 0.80 across the split — matches the desktop rule in hero.css so the bigger state-A logo doesn't leave state-B feeling cramped on phones either. */ .part-left { transform: translate(calc(var(--p2) * -14vw), calc(var(--p1) * -1 * var(--b-split))) scale(calc(1 - var(--p1) * 0.20)); } .part-right { transform: translate(calc(var(--p2) * 18vw), calc(var(--p1) * var(--b-split))) scale(calc(1 - var(--p1) * 0.20)); } /* Column insets are measured against the HALF each block sits beside, not against the centre line — a `50% + 3vw` inset reserves a third of the viewport that no ink ever reaches, and squeezes the paragraph below its own 32ch measure. At state B the clock is scaled to 0.8 and pulled up-left, so its right ink ends near 32%. The smiley's SVG box is wider, but its paths only start 44.1% across it (getBBox on .part-right), so the bottom block clears the visible arc at 38% even though the element boxes overlap. */ .story { max-width: none; width: auto; } .story-top { top: calc(50% - var(--b-split)); left: 36%; right: 5vw; text-align: left; transform: translate(calc( (1 - var(--p2)) * -16px + max(0, var(--pBC) - var(--pDE) * 2) * -90vw ), -50%); } .story-bottom { top: calc(50% + var(--b-split)); bottom: auto; right: 38%; left: 5vw; text-align: right; transform: translate(calc( (1 - var(--p2)) * 16px + max(0, var(--pBC) - var(--pDE) * 2) * -90vw ), -50%); } /* Plain left/right alignment for the paragraph blocks. The previous text-align: justify made the lines look ragged on narrow columns — words got pushed into a wide-spaced vertical stack. */ .story-top h2 { width: auto; max-width: 100%; text-align: left; } .story-top p { width: auto; max-width: 32ch; text-align: left; } .story-bottom p { width: auto; max-width: 32ch; margin-left: auto; text-align: right; } /* Font sizes come from --story-fs-h2 / --story-fs-p (overridden in the :root block above). Only mobile-specific layout tweaks here. */ .story h2 { line-height: 1.2; margin-bottom: 8px; } .story p { letter-spacing: 0.3px; line-height: 1.55; } .hint.hint-up { padding-top: clamp(56px, 9svh, 90px); } .hint { padding-bottom: clamp(28px, 5svh, 60px); } } /* ============================================================ Narrow viewport (phones + narrow desktop windows + short landscape). Triggered by a portrait-ish aspect ratio, a small width, or a short landscape viewport (landscape phones: 852×393 etc.), so an 830-wide laptop window gets the same simplified C/D layout as a 380-wide phone, and a landscape phone doesn't fall through to the desktop layout it can't fit. The short-landscape case is then re-tuned by the dedicated block at the end of this file. States C and D here drop the side-by-side layout entirely: the big half fills the viewport as a 10%-opacity backdrop, and the paragraph stack is centred on top. D→E still scales/lifts/shifts the halves to their state-E pose — the opacity ramps from 0.1 to 1.0 so the final small logo reads as a regular foreground mark. ──────────── NARROW LAYOUT / HALF-GEOMETRY KNOBS ─────────── The :root block here overrides base.css token defaults. To retune the narrow-mode big-half presentation (sizes, overlap, final scale), edit this block — the structural rules below read from these tokens. ============================================================ */ @media (max-aspect-ratio: 4/3), (max-width: 760px), (orientation: landscape) and (max-height: 480px) { :root { /* Halves grow to fill more vertical space in this mode. The derived pull / shrink-dx values track --big-half-h so the offsets re-derive automatically. */ --big-half-h: 88svh; /* No edge anchor in this mode, so no rest-inset to apply. */ --big-half-inset: 0vw; /* Pull contribution is zeroed: the halves already overlap at viewport centre via the centered anchor below. */ --big-pull-r: 0vw; --big-pull-l: 0vw; /* Shrink-dx is also zeroed: the halves are already on top of each other, no inter-half gap to close as they scale. */ --big-shrink-dx-r: 0vw; --big-shrink-dx-l: 0vw; /* Middle mast also centred — drop its assembled-position offset in this mode so it scales/lifts/shifts from dead centre. */ --big-middle-dx: 0vw; --big-middle-dy: 0vw; --big-shrink-dx-mid: 0vw; --big-shrink-dy-mid: 0vw; /* Final scale a touch smaller — looks better in portrait. */ --big-final-scale: 0.28; /* "Spojme se" headline scales with viewport in this layout. */ --below-h3-fs: clamp(22px, 4.6vw, 32px); /* ---- state-E stacked column (logo → wordmark → Kontakt) ---- One chain: raise --e-lift and the whole stack rises with it; widen --e-wordmark-w and the Kontakt block slides down to clear it. */ --e-wordmark-w: clamp(130px, 38vw, 260px); --e-wordmark-h: calc(var(--e-wordmark-w) * 0.7653); /* 375/490 viewBox */ --e-stack-gap: clamp(18px, 3.5svh, 36px); /* The lift is derived, not dialled in: raising the logo by half of everything that hangs below it centres the whole column on the viewport at any height. A fixed fraction can't — the value that balances a 764px iPhone leaves a 557px SE with its email 7px off the bottom edge. 68px is the Kontakt heading + email block. */ --e-lift: calc( (var(--e-stack-gap) * 2 + var(--e-wordmark-h) + 68px) / 2 ); --e-wordmark-top: calc( 50svh - var(--e-lift) + var(--logo-w) / 2 + var(--e-stack-gap) ); } /* Re-anchor both halves to viewport centre. side now controls slide-off from the relevant edge as a translateX in vw, not as a percentage of the element's own width. Height cap shared by BOTH halves: big-right's wider aspect would bleed past 78vw if it stayed at the full --big-half-h on slim viewports, but big-left's narrower aspect wouldn't — so capping only big-right left it shrinking in state C while big-left stayed tall in state D. Sharing the cap makes both halves track the same height and feel symmetric across states. */ .big-half { top: 50%; left: 50%; right: auto; --r-rendered-h: min(var(--big-half-h), calc(78vw / 0.848)); height: var(--r-rendered-h); } /* Halves slide in/out from the relevant edge, stay at 0.1 opacity while at rest in C/D, then FADE OUT entirely across D→E. The small assembled logo (.logo-wrap below) crossfades in to take over at state E — no big-halves shrinking on narrow viewports. big-right's natural width (height × 0.848) easily exceeds the viewport on portrait windows and bleeds past the right rim. Cap its height by a vw-derived ceiling so its widest extent stays around 78vw — same in-viewport horizontal extent as big-left's narrower clock arc, so the two states feel symmetric. Also compensate the right-biased SVG content: part-right's visible paths span roughly viewBox x=290..1165 (the inner smile curve doesn't reach the SVG's left edge), so its visual centre sits ~11% of the rendered height to the right of the SVG's geometric centre. We shift the element left by that amount so the smiley reads as centred — without this fix it looks markedly more right-biased than the clock half does. */ .big-half-right { /* height + --r-rendered-h inherited from .big-half above */ transform: translate( calc( -50% + var(--bigR-side) * 110vw - var(--r-rendered-h) * 0.11 ), -50% ); opacity: calc( var(--bg-half-opacity) * max(0, 1 - max(0, var(--pDE) - 0.25) * 2.5) ); } /* part-left's content fills its viewBox edge-to-edge, so its SVG geometric centre is also its visual centre — no compensation needed. */ .big-half-left { transform: translate( calc(-50% - var(--bigL-side) * 110vw), -50% ); opacity: calc( var(--bg-half-opacity) * max(0, 1 - max(0, var(--pDE) - 0.25) * 2.5) ); } /* Middle never appears in narrow mode — the small .logo-wrap fades in for state E and already includes the mast. */ .big-half-middle { display: none; } /* Arrows out of the centre lane. Every narrow layout stacks its mark and its text on the centre line, which is where the hero grid's place-items:center parks both hints — the up arrow lands on the clock's rim, the down arrow on the smiley's. The outer corners are the only column nothing else claims. */ .hint.hint-up { justify-self: start; padding-left: 6vw; padding-right: 0; } #scrollDown { justify-self: end; padding-right: 6vw; padding-left: 0; } /* .logo-wrap takes over at state E in narrow mode. It still fades out across the first half of B→C (same as desktop), but it fades back IN as the big halves dissolve during D→E, and it carries the lift up to the final state-E anchor. No horizontal shift here — the wordmark stacks below the logo instead of sitting to its right. */ .logo-wrap { transform: translate( calc(max(0, var(--pBC) - var(--pDE) * 2) * -80vw), calc(var(--pLift) * -1 * var(--e-lift)) ); opacity: calc( max(0, 1 - var(--pBC) * 2) + min(1, max(0, (var(--pDE) - 0.30) * 2.5)) ); } /* Text blocks float ON TOP of the backdrop half, centred both axes. Block + paragraphs are both centred so the column reads as a balanced block over the faded logo backdrop — left-align in this layout pushed the visible mass off-centre on portrait viewports. */ .story-c, .story-d { top: 50%; left: 50%; right: auto; bottom: auto; width: min(84vw, 540px); max-width: none; transform: translate(-50%, -50%); text-align: center; z-index: 3; } .story-c { width: min(84vw, 110svh, 640px); } .story-d p { font-size: clamp(14px, 2svh, 20px); line-height: 1.6; margin-bottom: 1em; letter-spacing: 0.2px; } .story-d p.story-d-lead { font-size: clamp(16px, 2.4svh, 24px); line-height: 1.45; margin-bottom: 1.15em; } .story-d { text-align: center; } /* Stacked layout for state E: logo → wordmark → Kontakt + email. Each element is anchored by its TOP at the previous element's bottom plus one gap, so the column reads as one measured stack and its total height is bounded by the pieces themselves. Nothing here is anchored to a fixed fraction of the viewport: a floor like `top: 92svh` puts the email off the bottom of every phone shorter than ~800px. --logo-w is the same token .logo-wrap is sized by, and the wordmark's height is its width times its SVG's 375/490 viewBox ratio, so both stay correct when either is retuned. */ .contact-reveal { top: var(--e-wordmark-top); left: 50%; width: var(--e-wordmark-w); transform: translate(-50%, calc((1 - var(--p3)) * 16px)); } .below-logo { top: calc(var(--e-wordmark-top) + var(--e-wordmark-h) + var(--e-stack-gap)); left: 50%; transform: translate(-50%, calc((1 - var(--p3)) * 12px)); } /* Size comes from --below-h3-fs (overridden in :root above). */ .below-logo h3 { margin-bottom: 14px; } } /* ============================================================ Short portrait phones (iPhone SE at 375×557 once Safari's bars are counted, and any phone whose browser also keeps a tab bar). The two rules above that assume a ~800px-tall phone both reach into the scroll arrows' corners here: the manifesto wants ~390px, which is the entire band left between the nav and the arrows, and the state-B diagonal drops the smiley's lower arc onto the down arrow. Tighten the leading rather than the type size — the size floors are what keep the block readable at all — and pull the split in. ============================================================ */ @media (max-width: 760px) and (max-height: 620px) { :root { /* Halves and side text move together — see --b-split above. */ --b-split: 21svh; } .story-d p { line-height: 1.45; margin-bottom: 0.7em; } .story-d p.story-d-lead { line-height: 1.3; margin-bottom: 0.8em; } } /* ============================================================ Narrow desktop only (portrait-ish window, but wider than the 760px mobile breakpoint). State B keeps the desktop side-text layout from hero.css, but the base --story-fs-* tokens lean on vw and collapse to the clamp floor on these windows (e.g. ~925w gives 0.95vw ≈ 9px → 11px floor), leaving paragraphs visibly small next to the half-circle icons. Raise the floor + cap. ============================================================ */ @media (max-aspect-ratio: 4/3) and (min-width: 761px) { :root { /* Bumped to balance the bigger state-B halves — the previous floors collapsed to small sizes on portrait-ish laptop windows and read as undersized next to the half-circles. */ --story-fs-h2: clamp(26px, min(3.6vw, 4.8svh), 38px); --story-fs-p: clamp(15px, min(1.85vw, 2.4svh), 20px); /* Back to a multiple of the body size: the base scale leans on vw, which collapses to its floor on a portrait-ish window. */ --story-fs-p-lg: calc(var(--story-fs-p) * 1.35); } } /* ============================================================ Short landscape (phones held sideways; any landscape window ≤ 480px tall). The narrow-mode rules above run first — this block re-tunes the states that assume PORTRAIT proportions: B: the phone diagonal split needs vertical room → revert to the desktop side-by-side split from hero.css (verbatim duplicates of those transforms/anchors; CSS has no mixins and the cascade needs them re-declared here to win). C: the 16:9 showreel is capped by viewport height. D: manifesto type shrinks to vh-driven sizes so the lead plus three body paragraphs fit ~360px of height. E: the stacked logo→wordmark→Kontakt column needs ~480px → rebuilt side-by-side: logo slides LEFT, wordmark + Kontakt sit to its right, like desktop E but using the narrow-mode mechanics (small .logo-wrap carries the logo). ───────────── SHORT-LANDSCAPE KNOBS ───────────── NOTE: these live inside a @media block, so the contact-sheet knob panel does NOT cover them (an injected inline :root value would leak into every viewport). Edit here directly. ============================================================ */ @media (orientation: landscape) and (max-height: 480px) { :root { /* State-E side-by-side geometry. */ --sl-e-lift: 4svh; /* how far the E cluster sits above centre */ --sl-e-logo-x: -16vw; /* logo shift left of centre */ --sl-e-text-x: 15vw; /* wordmark + Kontakt shift right of centre */ --e-lift: var(--sl-e-lift); /* "Kontakt" headline a step down from the portrait size. */ --below-h3-fs: clamp(18px, 6svh, 26px); /* Slightly smaller mark than the phone-portrait bump — at 360px of height the 50svh logo leaves no air around the B split. */ --logo-w: clamp(140px, 46svh, 320px); /* Type floors, not vh-derived sizes. A landscape phone is ~340px tall, so every vh-driven clamp below collapses onto its floor — which is where the reader actually lives in this orientation. The floors are what must be legible; the vh term only matters on the taller short-landscape windows. */ --story-fs-p: clamp(13px, 3.8svh, 16px); /* Smaller step than portrait: a sideways phone has ~390px of height and the bottom paragraph is the tallest block on screen. */ --story-fs-p-lg: calc(var(--story-fs-p) * 1.3); } /* ---- state B: desktop-style split, opened up for short heights ---- Same shape as hero.css but with a wider vertical split (±20svh vs ±18svh) and text anchors pushed further off-centre (12vw vs 3vw): at ~740px wide the halves' arcs reach ~±9vw from centre and their lower ticks dip into the text band, so both axes need extra air. */ .part-left { transform: translate(calc(var(--p2) * -1 * min(4vw, 7svh)), calc(var(--p1) * -20svh)) scale(calc(1 - var(--p1) * 0.20)); } .part-right { transform: translate(calc(var(--p2) * min(4vw, 7svh)), calc(var(--p1) * 20svh)) scale(calc(1 - var(--p1) * 0.20)); } .story-top { top: 30svh; /* = 50svh − 20svh: centred on the lifted half */ bottom: auto; left: calc(50% + 12vw); right: 3vw; text-align: left; transform: translate( calc((1 - var(--p2)) * -60px + max(0, var(--pBC) - var(--pDE) * 2) * -80vw), -50% ); } .story-top h2, .story-top p { text-align: left; } .story-bottom { bottom: 30svh; top: auto; right: calc(50% + 12vw); left: 3vw; text-align: right; transform: translate( calc((1 - var(--p2)) * 60px + max(0, var(--pBC) - var(--pDE) * 2) * -80vw), 50% ); } .story-bottom p { margin-left: auto; text-align: right; } /* ---- state C: keep the 16:9 player clear of the short edges ---- */ .story-c { width: min(86vw, 110svh, 660px); } /* ---- state D: fit lead + three paragraphs in ~340px of height ---- The floors carry this block, not the svh terms: on a landscape phone every svh-driven size here lands under its floor, so the floor is what ships. 13px is the bottom of what a phone held sideways at arm's length still reads. */ .story-d { width: min(86vw, 660px); } .story-d p { font-size: clamp(13px, 3.8svh, 16px); line-height: 1.5; margin-bottom: 0.8em; } .story-d p.story-d-lead { font-size: clamp(15px, 4.4svh, 19px); line-height: 1.4; margin-bottom: 0.9em; } /* ---- scroll hints ---- The narrow block above already moved them into the outer corners; here they only need less vertical padding. The hero grid's outer rows are ~90px tall at this height, so the 80px top padding from hero.css would push the up arrow down into the logo's row. */ .hint.hint-up { padding-top: 14px; } .hint { padding-bottom: 14px; } /* ---- state E: side-by-side (logo left, wordmark + Kontakt right) ---- */ /* Same slide-out + fade mechanics as the narrow block above, plus a leftward shift keyed on pLift so the logo settles into the left lane while it rises. */ .logo-wrap { transform: translate( calc( max(0, var(--pBC) - var(--pDE) * 2) * -80vw + var(--pLift) * var(--sl-e-logo-x) ), calc(var(--pLift) * -1 * var(--e-lift)) ); } .contact-reveal { top: calc(50% - var(--e-lift)); left: 50%; width: clamp(120px, 24vw, 220px); transform: translate( calc(-50% + var(--sl-e-text-x) + (1 - var(--p3)) * 20px), -50% ); } .below-logo { top: 78svh; left: 50%; transform: translate( calc(-50% + var(--sl-e-text-x)), calc(-50% + (1 - var(--p3)) * 12px) ); } .below-logo h3 { margin-bottom: 8px; } }