/* ═══════════════════════════════════════════════════════════════════════ FIDA — phone & tablet ─────────────────────────────────────────────────────────────────────── The Figma has no mobile frames — only the 1440 desktop artboards — so there is nothing to reproduce exactly here. FIDA asked for violet-graphica.com as the reference; these are its measured values: 375 viewport · 0 horizontal overflow · 20–30px side padding content 315–335 wide · body 14–16px · headings 24–32px 80px header with a burger · full-height hero · full-bleed section backgrounds with padded inner content · images at content width, object-fit cover Above the breakpoint nothing changes: the desktop build stays the exact 1440 artboard. Below it the artboard is dismantled into normal flow. Reading order is recovered at runtime by mobile.js, which sorts every element by its Figma top/left coordinate and writes a flex `order`. The desktop DOM is in Figma z-order (footer first, navbar last), so without that the page would come out backwards. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 1023.98px){ /* ── ONE ARTBOARD UNIT ──────────────────────────────────────────────── Her phone screens are a 1080-wide artboard, so every size in them is a fixed fraction of the width — which is how the desktop already works, being a 1440 artboard under a single scale. The phone layer was not doing that. Most sizes were fixed px, and a fixed px is a DIFFERENT fraction on every handset, so the same block came out at 1.69x her size at 320 and 1.26x at 430; MY PHILOSOPHY even crossed over, 1.04x at 320 and 0.77x at 430. Nothing could settle, because there was no scale — only eight independent numbers. --u is one unit of her artboard. A size written calc(28 * var(--u)) is her 28, at any width, on any phone. Capped at 0.4px, which is the unit at ~430: past a large phone the type stops growing rather than following a tablet's width up to 1023. */ html{--u:min(calc(100vw / 1080), 0.4px)} /* ── dismantle the artboard ─────────────────────────────────────────── */ /* 20px matches the reference exactly: at 393 its header and hero both sit on a 20px gutter, giving a 353px content column. */ html{--pad:20px} body{overflow-x:hidden} .stage-wrap{height:auto !important;overflow:visible !important} .stage{ position:static !important;width:100% !important;height:auto !important; transform:none !important;overflow:visible !important; display:flex;flex-direction:column; } /* every section becomes a full-bleed band in normal flow */ .sec{ position:static !important;left:auto !important;top:auto !important; width:100% !important;height:auto !important;overflow:visible !important; display:flex;flex-direction:column;align-items:stretch; padding:56px var(--pad);gap:22px; } /* and every child of a section becomes a stacked block */ .sec > *, .sec > * > *:not(.in):not(i){ position:static !important;left:auto !important;top:auto !important; width:100% !important;max-width:100%; } .sec > *{height:auto !important} /* text boxes at any depth — some are , which the rule above skips when nested (the two group headings on CONTACT, for one) */ .sec .txt{ position:static !important;left:auto !important;top:auto !important; width:100% !important;height:auto !important; } /* ── text ───────────────────────────────────────────────────────────── */ .txt{display:block !important;height:auto !important} .in{white-space:normal !important;width:100% !important} /* Figma sets these blocks JUSTIFIED and FIDA wants that kept on the phone — text flush on both edges. At a 316px measure justification opens rivers unless the browser may hyphenate and rebalance, so both are enabled rather than the alignment being abandoned. */ .ta-j{ text-align:justify; hyphens:auto;-webkit-hyphens:auto; text-wrap:pretty; word-spacing:-.01em; } .ta-j .in{hyphens:auto;-webkit-hyphens:auto} /* WHAT I CREATE's two service paragraphs: her mobile screens set them CENTRED, ragged both sides, on the section's axis — not justified. They were briefly added to .ta-j above; that moved them further from her design, so they are centred here and the hyphenation is dropped with it. */ .sec-create .f-i15m, .sec-create .f-i15m .in{ text-align:center !important;hyphens:none;-webkit-hyphens:none; } /* Type scale, set to the reference's measured mobile values at 393px: display 54.4/58, body 16/31 (a 1.94 leading — noticeably airier than a desktop stack), eyebrow labels 14/600. FIDA's own faces and colours are unchanged; only the sizes move. */ .f-nav {font-size:16px;line-height:1.5} /* PORTFOLIO's hero word is set in CAPS on her screen. Figma stores the characters as "Portfolio" with textCase:UPPER, which the export drops — and the desktop's own 491px box only fits the uppercase setting (uppercase measures 491.1, title case 361.3), so the artboard agrees. */ .sec-hero .f-h96{text-transform:uppercase} .f-h96 {font-size:46px;line-height:1.08} .f-h64 {font-size:38px;line-height:1.1} .f-h50 {font-size:32px;line-height:1.16} .f-h48 {font-size:31px;line-height:1.18} .f-h48c {font-size:31px;line-height:1.18} .f-mb60 {font-size:38px;line-height:1.1} .f-h32 {font-size:25px;line-height:1.25} .f-script80 {font-size:52px;line-height:1.06} .f-script69 {font-size:44px;line-height:1.1} .f-script40 {font-size:31px;line-height:1.2} /* "My Journey" is a fixed FRACTION of her artboard, not a fixed size: 138.52 of 1080 = 12.83%, so her ink is 63.7% of the width at any screen. A flat 46px held that at 360 (12.78%) and lost it as the screen grew — 11.08% at 415, 9.89% at 465, where the heading reads half the width she drew. vw, because a font-size percentage resolves against the parent's font-size, not the width. */ .f-name96 {font-size:12.83vw;line-height:1.08} .f-num,.f-num180,.f-num150{font-size:62px;line-height:1} .f-name24 {font-size:21px;line-height:1.3} .f-p32,.f-p25{font-size:16px;line-height:1.85} .f-p24m,.f-p24c,.f-p24j,.f-p22i,.f-p24i{font-size:16px;line-height:1.9} /* ── weights read off her PDF's own run widths ──────────────────────── The embedded font NAMES are no use for this — the file reports "Inter-Regular" even for the bold span in the philosophy paragraph. The recorded run widths are exact, so each line was set in the site's real webfonts at her size and compared: "Before starting my own studio, I worked as a graphic designer in" 32px Pujarelah, hers 913.6 — w400 897.9 (-1.7%) w500 913.6 (0.00%) "If you're building a brand with purpose, I'd love to hear your" 32px Pujarelah, hers 862 — w400 832.4 (-3.4%) w600 864.0 (+0.24%) Both were rendering at 400. Checked at the same time and already right, so left alone: the philosophy paragraph at 300 (hers 694.4, w300 gives 694.6, +0.02%), the principles at 500 (910.4 against 910.6), and "Start a Project" at 600 (219.1 against 219.1). .f-p25 is the CTA paragraph and appears on every page; her HOME screen records the identical run at the identical width, so one weight is right for all of them. */ .f-p24j{font-weight:500} .f-p25 {font-weight:600} .f-p16m,.f-p16m2,.f-p18l,.f-p16{font-size:16px;line-height:1.8} .f-i18sb{font-size:14px;line-height:1;font-weight:600} .f-i18l,.f-i18m,.f-i18l2,.f-i18m2{font-size:15px;line-height:1.8} .f-i20l,.f-i20m{font-size:16px;line-height:1.85} .f-i15l,.f-i15m,.f-i15m2,.f-i16i{font-size:15px;line-height:1.7} .f-i14l,.f-i12,.f-i12l,.f-i12xl,.f-p14{font-size:14px;line-height:1.75} .f-i13sb{font-size:14px;line-height:1;font-weight:600} /* ── the hero headline ──────────────────────────────────────────────── Sized by measurement against the real column, not by eye. The column is 316px after the rail; "For Visionary Brands" runs 339px at 40px so it wrapped to a third line, and 306px at 36px so it fits. The script keeps the Figma's 100:75 ratio against it → 48px. Leading is set ONCE on the block and inherited. Previously each span carried its own line-height (57.24px against 43.2px), which is what made the gap between the two lines uneven. 64px chosen by measuring the ink, not the boxes: at 58px the script's descenders overlapped the line below by 4px; 62px had them just touching; 64px leaves ~2px of air. Worth re-measuring once the licensed Edwardian Script ITC replaces the stand-in — it is less swashy, so it will have more clearance at the same value. */ /* ── the headline · as big as THREE lines allow ─────────────────────── FIDA asked for it bigger, across three lines: "Timeless Aesthetics" / "For Visionary" / "Brands" That moves the binding line from "For Visionary Brands" to "Timeless Aesthetics", which is shorter — so the type can grow a lot. Measured ceiling at 393px is 56px script; 54.7 is used, leaving ~14px of margin so the licensed Romelu Vomelu can differ from the stand-in without a fourth line appearing. One fluid root drives both faces, sized so the binding line still fits on a 320px phone: 320px → ~43.6px script 393px → ~54.7px 430px+ → 58px cap script = 1em and serif = 0.75em is exactly the Figma's 100:75 ratio. LEADING — 1.0, on FIDA's note to tighten it. Two independent sources agree on that value: the Figma's own desktop hero sets a 100px script on a 99.5px pitch (ratio ~1.0), and the reference FIDA pointed at runs 54.4px on 58px with its ink boxes overlapping 12px. Here 1.0 gives ink gaps of −14 and −2 — a tight display set where ascenders and descenders interleave, which is the look, not a collision. */ /* HER SCREEN IS TWO LINES. HOME2-1 measured: two ink bands only, at a pitch of 121 artboard units = 11.2% of the viewport, "Timeless Aesthetics" over "For Visionary Brands". The build was running three because the type was oversized — "For Visionary Brands" measures 647.4px at 75px in the real Romelu Vomelu, so against the 304px column left by the rail the serif has to stay under 35.2px for it to hold one line. 11.6vw gives 43.5px script / 32.6px serif at 375 (pitch 43.5 against her 42), and still fits at 320: 37.1 / 27.8, line 240px into a 249px column. */ .f-hero-title .in{ font-size:clamp(36px, 11.6vw, 52px); line-height:1; } .ht-script{font-size:1em;line-height:inherit} .ht-name {font-size:.75em;line-height:inherit} /* The word space between "Timeless" and "Aesthetics". It must carry a real font-size: `width:.32em` resolves against the element's OWN size, so pairing it with font-size:0 made the space exactly 0px and welded the two words together. */ .ht-gap{ display:inline-block;font-size:1em;line-height:inherit; width:.3em;overflow:hidden; } /* On her mobile screens the project NAME sits on its own line above the service list — the build ran them together as one paragraph, so captions wrapped mid-phrase ("Social / Media", "& / Packaging"). display:block puts the name on its own line, and the size step back to roughly her 1.25 (home) / 1.5 (portfolio) so the name reads as a name and not as bolded prose. */ .pj-sb24,.pj-sb20{display:block;margin-bottom:1px} .pj-sb24 {font-size:21px} .pj-sb20 {font-size:19px} .in-sb24,.pj-m24{font-size:17px} .ed-40,.ed-64,.ed-69{font-size:30px} /* ── pictures ─────────────────────────────────────────────────────── mobile.js gives each one an aspect-ratio taken from its Figma box, so proportions stay the designer's while the width becomes the column. */ .shot,.work,.svc-img,.jr-portrait,.jr-imgwrap,.logo-footer,.about-photo, .sec-about .img,.img-proc1,.img-proc2,.img-proc3,.img-proc4{ height:auto !important;background-size:cover !important; background-position:center !important;border-radius:6px; } .logo-footer{border-radius:0;background-size:contain !important;max-width:280px;margin:0 auto} /* Rotated backdrops don't survive reflow. .sec-hero i is NOT one of them — services.css and portfolio.css give it inset:0 + rotate(180deg), which reflows fine, and hiding it left those two heroes as flat black slabs where FIDA's mobile screens show a photographic banner. */ .sec-philosophy i used to be hidden here too. It is not a stray backdrop — it IS the photograph, and hiding it left MY PHILOSOPHY a flat black slab. It is rebuilt as a flow layer further down. */ .jr-imgwrap i{display:none} /* ── the hero backdrop must not be STRETCHED ────────────────────────── services.css and portfolio.css size this layer with percentages taken from the Figma — 100.028% x 215.815% — and those are only true for the DESKTOP box. On the 1425 x 440 artboard they draw the picture at aspect 1.5010, matching its own 1.4998. Once the hero reflows to 375 x 214 the same percentages draw it at 0.814: squashed to 0.54 of its proper shape. CONTACT was worse, 0.47. cover instead, so the picture keeps its shape, and the position set from where HER frame sits on it. Her placement is x-257..1258.7, y-208..802.5 of a 1515.7 x 1010.5 picture, so the artboard sees 71.25% of its width from 16.96% and 79.42% of its height from 20.58% — a visible centre of 52.58% / 60.29%. The layer carries rotate(180deg), which mirrors the background's own axes, so the position is written as its complement: 100 - 52.58 and 100 - 60.29. Services and PORTFOLIO share this placement exactly. CONTACT has its own and is set in contact.css. */ .stage .sec-hero i{ background-size:cover !important; background-position:47.42% 39.71% !important; } /* Process card 04 and Cookrunchy shot 7 are drawn rotated 90° on desktop. A rotated box has no usable flow size, so on mobile they render upright with a cover crop — the photo is the same, the framing is not. */ .img-proc4,.cookrunchy-7{ transform:none !important;overflow:visible !important; background-size:cover !important;background-position:center !important; } /* proc-4 is a rotated inside a wrapper, so it has no inline box to take a ratio from — the wrapper carries the picture instead. The picture MUST be scoped to card 04. `.proc-img` is on all four wrappers, and `background` is a SHORTHAND that resets background-image — so a bare `.proc-img{background:var(--img-proc4)…}` here, at the same (0,1,0) specificity as main.css's .img-proc1/2/3 but in a later stylesheet, painted Refinement's photo on all four cards. Discovery, Strategy and Design were all showing card 04's image below 1024px. */ .proc-img{aspect-ratio:305 / 353;height:auto !important;border-radius:6px} .proc-img:not(.img-proc1):not(.img-proc2):not(.img-proc3){ background:var(--img-proc4) center/cover no-repeat; } .proc-img > .img-proc4{display:none} .cookrunchy-7{background-image:var(--img-cookrunchy-7)} .cookrunchy-7 i{display:none} /* ── WHAT I CREATE ──────────────────────────────────────────────────── The section's backdrop is a separate empty div: 1441 × 679 of black with the Figma texture painted over it by an ::after at 17%. Being empty, it collapsed to 335 × 0 under the generic reset — so the section fell back to .sec-create's white, and every line in it is .lilac or .white. The two service paragraphs were literally white on white. Same treatment as .hero-photo: the band becomes a full-bleed layer behind the content. position:relative needs !important here for the same reason the hero does — `.sec{position:static !important}` would otherwise win and the layer would resolve against the document. */ /* Same trap as .sec-create: `.sec{position:static !important}` left .sec-cta::before resolving against the initial containing block, so the CTA texture was painted as a full-viewport slab at the TOP of the document — and on SERVICES it landed over the hero. 13 pages. */ .sec-cta{position:relative !important} .sec-cta > *{position:relative;z-index:1} /* ── ABOUT · MY JOURNEY ─────────────────────────────────────────────── Her screen: a full-bleed photographic band across the top, the portrait centred at 51% of the viewport overlapping it, then the heading, the paragraph and a small centred Let's Talk. Measured off her PDF, not eyeballed — the band's dark-to-white break sits at artboard y591 of 1080, so the band is ~44% of the viewport width; the portrait's own image box is 550.4 x 978.4 at x263.3, i.e. 51% wide, aspect 0.5626, with 46% of its height on the band. The build had a rounded 335 x 104 black chip inset in the gutter, and the portrait full-column-width below it — no overlap at all. */ /* The band was 44vw and the portrait 2.3vw down. Both came from one slip: the break really is at artboard y591, but 591 of 1080 is 54.72%, not 44%. The portrait's offset was then derived FROM that wrong band — 44 − 0.46 × 90.6 = 2.3vw — so it sat at artboard y26 and ran up through the header, straight over the logo at y48..133. FIDA's screenshot. Straight off her file instead of derived: band 0..591 = 54.72vw portrait y144.3, 550.4 x 978.4, x263.3 13.36vw down, 51.0% wide, aspect 0.5626 Her logo ends at y106 and the portrait starts at 144, so they clear by 38 units; her band runs to 591, so the portrait sits (591−144.3)/978.4 = 45.7% onto it, which is the 46% the old comment had right. Both are written against the section's own width, not in vw: `vw` resolves against the initial containing block, which includes the scrollbar, so 54.72vw measured 615 units instead of 591 wherever a scrollbar is present. Percentage padding already resolves against the containing block's INLINE size, and the band takes an aspect-ratio, so each is now tied to the width FIDA's fractions were taken from. Two classes deep because the @media(max-width:480px) block below resets the `padding` shorthand and would otherwise put it back to 48px. */ /* FIDA asked for the portrait a little lower. 13.36% is her own figure — the photograph's top at artboard y144.3 — so this is a deliberate step away from the PDF, on her instruction: +80 units in two steps of 40, 20.76%, which puts the top at y224 and is 28px at a 375 screen. It carries the heading, the paragraph and the button down with it, since they follow in flow; the band is absolute and stays at 0..591. The one figure it changes is how much of the portrait sits ON the band — (591-224)/979 = 37.5%, where her screen has 45.7%. */ .stage .sec-journey{background:var(--white);position:relative !important;padding-top:20.76%} .stage .sec-journey .jr-imgwrap{ position:absolute !important;left:0 !important;top:0 !important; width:100% !important;max-width:none !important; /* !important, or mobile.js's applyRatios wins — it writes the DESKTOP box ratio inline, and inline beats a plain stylesheet declaration */ height:auto !important;aspect-ratio:1080 / 591 !important; border-radius:0;z-index:0;overflow:hidden; /* BLACK, with the photograph veiled over it — not the photograph at full strength, which is what this used to be. The desktop builds it exactly this way: .jr-imgwrap is background:var(--ink) and the picture inside is an at opacity .17. Her screen agrees: the band's gutters, clear of the portrait, mean 54.4 with a maximum of 77, where the bare photograph is far brighter than that. */ background:var(--ink); } /* Turned a quarter to the RIGHT, as FIDA asked. A background image cannot be rotated, so the layer carries the picture and is rotated itself — and to still fill the band after turning, its two axes are swapped: width 54.72% of the band's WIDTH = the band's height height 182.75% of the band's HEIGHT = the band's width (the band is 1080 x 591, and 591/1080 = 54.72%, 1080/591 = 182.75%). Rotated 90deg it occupies width x height reversed, which is the band exactly. rotate(90deg) is clockwise in CSS — to the right. The desktop turns this same picture the other way, -90deg, straight out of the Figma imageTransform. This is her instruction, not that. */ .stage .sec-journey .jr-imgwrap::after{ content:'';position:absolute;left:50%;top:50%; width:54.72%;height:182.75%; transform:translate(-50%,-50%) rotate(90deg); /* a small zoom in. `cover` is the floor here — the picture is narrower than the turned layer, so cover already scales it to the layer's width and anything smaller would leave the band uncovered. 115% of the layer's width is cover plus 15%. */ background:var(--img-journey-bg) center top/107% auto no-repeat; /* .313. The darkness is held at the value measured off her screen through every one of these changes; 107% frames a slightly brighter part than cover does, so the veil comes down to match. */ opacity:.313; } .stage .sec-journey > *:not(.jr-imgwrap){position:relative;z-index:1} /* ── "My Journey" is drawn ON the portrait ──────────────────────────── Her heading straddles the photo's bottom edge — the tops of the letters on the picture, the bottoms on white. Magnified 3x off her render: photo bottom y1057 (right edge x816) "My Journey" ink y960..1124, 691 wide = 64.0%, centre 522 so the heading sits 97 units, 59% of its own ink height, over the photo. The build stacked it below in flow, 109 units clear. The negative margin goes on the HEADING, not on the .on-band that wraps it: that band is opaque white, and pulling the band up would paint the white over the bottom of the photograph — the opposite of hers. The band has padding-top, so the child's negative margin cannot collapse into it; the band's own top stays put below the photo while the heading rises out of it. Paint order is DOM order here — `.sec > *{position:static !important}` beats the z-index above — and the band follows the portrait, so the heading lands on top of the photo without any z-index. */ .stage .sec-journey .on-band > .f-name96{margin-top:calc(-4.5125% - 46px)} /* 51% of the VIEWPORT, not of the 335px content box — a plain 51% resolved against the padded column and came out 45.6% of the screen */ .stage .sec-journey .jr-portrait{ width:calc(0.51 * (100% + 2 * var(--pad))) !important; max-width:none !important;height:auto !important; /* !important, or mobile.js's applyRatios wins — it writes the DESKTOP box ratio (318/500 = 0.636) inline. 550.4 x 978.4, straight out of the PDF's operator list: the placement matrix puts it at y144.3..1122.7, there is no clip on it, and no fill is painted over it anywhere in the hero. It IS drawn three times at the same spot, but all three are unclipped and identical. This briefly read 550.4 x 913, from scanning the rasterised page for where the lilac stopped. That edge at y1057 is the photograph's own white cardigan going neutral, not the bottom of the image. Scanning a raster guesses; the operator list does not. */ aspect-ratio:550.4 / 978.4 !important;align-self:center;border-radius:0; } /* ── HOME · THE MIND BEHAND THE WORK ───────────────────────────────── Measured off her own render, -HOME2-2.pdf, artboard 0..1717. Everything that is not lilac is ink or photograph, so each row was scanned for the extent of not-lilac and the rows grouped into objects: heading + najma y 82..135 x 70..1015 87.5% wide, centre 543 PORTRAIT y 217..1202 x 243..807 52.2% wide, centre 525 "Hi, I'm Fida." y1246..1303 x 401..674 25.3% wide, centre 538 paragraph y1368..1513 x 101..990 82.3% wide, centre 546 Let's Talk y1580..1668 x 401..678 25.6% wide, centre 540 Three things were wrong. The heading came SECOND. The artboard puts the photo at left:184 and the heading at left:624 with tops of 49.08 and 49 — the same row, to the sorter — so it ordered them left to right and the photograph won. Hers leads with the heading. The portrait ran the full column at 85.3%. Hers is 52.2%, and 52.2% of the VIEWPORT, not of the padded column, which is why it is written against (100% + 2 x pad) the way .jr-portrait is. The greeting and the paragraph were left-aligned. Hers are centred, as is every other object in the block — the five centres above land on 543, 525, 538, 546, 540 against an axis of 540. Her portrait centre of 525 is 15 units left of the axis, against ±6 for everything else. That is 1.4% of the viewport, 5px at 375, and the screen reads as centred; it is centred here rather than reproducing what looks like hand-placement. Aspect is left to the inline Figma box (316/554 = 0.5704); her render measures 564/985 = 0.5726, a 0.4% difference that is inside the render's own precision. */ .stage .sec-about .hd-row {order:0 !important} .stage .sec-about .about-photo {order:1 !important} .stage .sec-about .f-hi {order:2 !important} .stage .sec-about .f-p24m {order:3 !important} .stage .sec-about .btn {order:4 !important} .stage .sec-about .about-photo{ width:calc(0.522 * (100% + 2 * var(--pad))) !important; max-width:none !important;align-self:center;border-radius:0; } .stage .sec-about .f-hi, .stage .sec-about .f-hi .in, .stage .sec-about .f-p24m, .stage .sec-about .f-p24m .in{ text-align:center !important;hyphens:none;-webkit-hyphens:none; } /* ── HOME · SELECTED WORK ──────────────────────────────────────────── Her cards are inset further than the page's own gutter. Measured on -HOME2-1.pdf: card image y2200..3069 x119..973 854 wide = 79.1%, centre 546 "Mozitti" y3115..3156 x121..284 LEFT subtitle y3185..3226 x121..627 LEFT next image y3455..3598 x117..969 852 wide = 78.9%, centre 543 The build ran them at 89.3% on the global --pad. 10.5% a side puts the column at 79%. The type is already left-aligned, which is hers. Scoped to .sec-work, and that is index only — PORTFOLIO's section is .sec-workS, and her design there is genuinely different: 83.3% and 83.8% wide with the title and subtitle CENTRED on 542 and 543, not left. Two screens, two treatments; this rule must not reach the second. */ .stage .sec-work{padding-left:10.5% !important;padding-right:10.5% !important} /* ── HOME · no white strip under the last process row ──────────────── The section is white and the process rows paint their own black band, so the section's 48px padding-bottom showed as a white gap between the last card row and the lilac marquee below it. The last .pc-row ended exactly 138 artboard units — 48px — above the section edge. Her page has no gap there. Background runs down her gutter: 4941 .. 5444 black process row 2 5447 .. 5548 lilac the marquee, 101 tall 5551 .. 6517 black Three units between the black and the lilac, which is anti-aliasing. The white BETWEEN her two card rows is real and stays — 4496..4940, 443 units of it, carrying the 03/04 numerals. Only the trailing strip goes. */ .stage .sec-vision{padding-bottom:0 !important} /* ── CTA · the seal sits BESIDE the button, not above it ───────────── Her CTA's bottom row, measured on -HOME2-3.pdf: button x391..726 335 wide (31.0%) y1560..1650 centre 559 seal x830..971 141 wide (13.1%) y1528..1674 centre 901 One row. The seal is centred on the button's line — 1601 against 1605 — and inset 10.1% from the right edge. The desktop artboard insets it 9.4% (left:1196 + 109 wide in 1440), so this is the same placement at both sizes, which is why it is not scoped to one page. The build stacked it: a 314-wide badge centred on its own row above the button. That row and its two gaps are most of why the section measured 1701 units against her 866. bottom:48px is the section's own padding-bottom, which is where the button's bottom edge already sits; the seal is a pixel taller than the button, so sharing that edge centres the two on the same line. */ `.sec.sec-cta` rather than `.sec-cta`: the generic badge rule further down is `.stage .sec .badge`, the same specificity as this, and it comes later — so it won on order and nothing moved. The doubled class takes this out of that race instead of relying on where it sits in the file. */ .stage .sec-cta{position:relative !important} .stage .sec.sec-cta .badge{ position:absolute !important; right:10.1% !important;left:auto !important;top:auto !important;bottom:48px !important; width:13.1% !important;max-width:none !important;height:auto !important; aspect-ratio:141 / 146 !important;margin:0 !important;align-self:auto !important; } /* ── ABOUT · MY PHILOSOPHY had lost its photograph ─────────────────── The rule above used to hide `.sec-philosophy i`, and that IS the picture — about.html records the fill as [ SOLID #000000 , IMAGE @16% rotated +90deg ]. Hidden, the section was a flat black slab. Her screen has the desk photograph behind it: band artboard 1660..2214, gutter mean 45.8, where the build measured 0. Orientation was settled by 2-D correlation against her band on a 72 x 36 grid with her two type blocks masked out. One-dimensional row and column means could not separate the eight candidates — all within RMS 8.0..8.4 — but the correlation does: 270deg r 0.396 upright, mirrored r 0.337 180deg r 0.294 upright, plain r -0.338 A quarter turn scores best, and cannot be written here: a rotated layer needs its two axes swapped, which means knowing the band's pixel height, and that height is content-driven. Mirrored upright is 0.059 behind, is a plain scaleX(-1) that leaves `cover` working normally, and is nowhere near the plain orientation the fit actively rejects. Opacity is hers. Her band means 46.7 against 145.9 for the photo at full strength, so 32%. The artboard's 16% would land at 23. */ /* FIDA asked for the paragraph smaller and the band shorter — the heading left alone. Scoped to this section so .f-i18l keeps its 15px everywhere else, and the vertical padding cut from the section's 56px. Her own band is 554 artboard units tall against the 828 this was. */ /* overflow needs !important. The reset above carries `.sec{overflow:visible !important}`, so a plain `overflow:hidden` here lost to it and computed to visible — and the backdrop layer, 525px tall inside a 222px section, was spilling 151px past the bottom onto WORKING PRINCIPLES and the same past the top onto MY JOURNEY. That is the photograph FIDA could see below the band. */ .stage .sec-philosophy{ position:relative !important;overflow:hidden !important; padding-top:36px;padding-bottom:36px; } /* 12px, but never wider than the column. The binding line is not the first but the SECOND — "should communicate purpose, create trust, and leave" — because it carries the bold span: she records it at 721.7 against 694.4 for the first. At 320 the column is 280, so the type has to come to about 10.9px for that line to hold. min() keeps 12px from ~353 up and eases below. */ .stage .sec-philosophy .f-i18l, .stage .sec-philosophy .f-i18l .in{font-size:min(12px, 3.4vw)} /* her own line breaks, off on the desktop artboard, on here */ .pb{display:inline} /* She hyphenates one word across her lines — "transparent com-" / "munication". The hyphen is GENERATED rather than written into the copy: as a character it would sit in textContent even while hidden, so the desktop's word would read "com-munication" to copy-paste, to search and to a screen reader while looking correct on screen. */ .pbh::after{content:'-'} /* ── ABOUT · type on her own numbers ────────────────────────────────── Every one of these is the size the PDF records, in artboard units, so the page holds her proportions at every width instead of drifting. Scoped by SECTION, not by class, because her design gives one class two sizes: .f-h48 is MY PHILOSOPHY at 100.93 and the CTA heading at 59.82. That collision is why single fixed values kept contradicting each other. Left alone, and noted rather than guessed: WORKING PRINCIPLES' heading and the "Let's Talk" button are ARTWORK in her file, not text runs (940 x 125.6 and 327 x 124.9), so there is no size of hers to use. */ .stage .sec-journey .f-name96, .stage .sec-journey .f-name96 .in{font-size:calc(138.52 * var(--u))} .stage .sec-journey .f-p24j, .stage .sec-journey .f-p24j .in{font-size:calc(32 * var(--u))} .stage .sec-philosophy .f-h48, .stage .sec-philosophy .f-h48 .in{font-size:calc(100.93 * var(--u))} .stage .sec-philosophy .f-i18l, .stage .sec-philosophy .f-i18l .in{font-size:calc(28 * var(--u))} .stage .sec-principles .wp-item, .stage .sec-principles .wp-item .in{font-size:calc(30 * var(--u))} .stage .sec-cta .f-h48, .stage .sec-cta .f-h48 .in{font-size:calc(59.82 * var(--u))} .stage .sec-cta .f-p25, .stage .sec-cta .f-p25 .in{font-size:calc(32 * var(--u))} .stage .sec-cta .f-i18sb, .stage .sec-cta .f-i18sb .in{font-size:calc(32 * var(--u))} /* ── CLIENT WORDS · sizes recovered from her ARTWORK ────────────────── This section is the reason its type looked unlike the rest: her PDF has NO live text in it at all. The heading with its chip, and the whole testimonial, are two flattened images — 1193.3 x 267.5 and 1244.2 x 706.7 — so there was no recorded size to put it on when the page moved to her unit, and it stayed on the old fixed scale. The sizes are recovered from the pictures instead. The body is JUSTIFIED, so a full line is stretched and useless for fitting; its last line is ragged and is not. Each string was measured in the site's own webfont and the size solved for her ink width: "and thoughtful brand designer." 423.5u -> 30.8u (build had 44) "Lamiae Amthqal" 224.5u -> 33.5u (build had 58) "VALENA LIVING" 162u -> 21.6u (build had 42) "Client Words" 622.4u -> 150.5u (build had 144) Her body line pitch measures 48u, so the leading is 48/30.8 = 1.56. */ .stage .sec-words .f-script80, .stage .sec-words .f-script80 .in{font-size:calc(150.5 * var(--u))} .stage .sec-words .f-p22i, .stage .sec-words .f-p22i .in, .stage .sec-words .f-p24i, .stage .sec-words .f-p24i .in{ font-size:calc(30.8 * var(--u));line-height:1.56; } .stage .sec-words .f-name24, .stage .sec-words .f-name24 .in{font-size:calc(33.5 * var(--u))} .stage .sec-words .f-i16i, .stage .sec-words .f-i16i .in{font-size:calc(21.6 * var(--u))} /* Orientation from the Figma file, not from correlating against her raster. Node 49:458 "MY PHILOSOPHY" carries imageTransform [[0,-0.5108,0.6263],[0.9597,0,0.0130]] whose linear part has determinant +0.49 — a rotation, no reflection — and is proportional to [[0,-1],[1,0]], i.e. +90deg. This used to be scaleX(-1), which I had picked by 2-D correlation against the rasterised PDF; the file says a quarter turn, so it is a quarter turn. Same construction as the journey banner: black, with the picture rotated over it. The layer is a SQUARE the width of the band — a square is its own shape under a quarter turn, so it still covers whatever height the band happens to be, and this band's height is content-driven rather than fixed like the journey one's. */ .stage .sec-philosophy i{ display:block !important; position:absolute !important; /* inset FIRST: it is a shorthand for all four, so putting it after left/top silently wiped them and the layer fell back to its static position at the section's padding corner, 20,48 — a quarter of the band ended up uncovered. */ inset:auto !important; left:50% !important;top:50% !important; /* 115% wide, and padding-bottom resolves against the band's WIDTH, so the box is 1.15w x w. Turned a quarter it becomes w x 1.15w — full band width, and 15% of headroom on the height. A plain square only just covered: at 325 the band is 315 tall against a 325 square, so a narrower phone would have shown black along the bottom. */ /* 140%, not 115%. After the turn this is the layer's HEIGHT on screen, and 115% was not enough on a very narrow phone: at a 290 layout the copy wraps to a 378-tall band against a 333-tall layer, so 45px of it fell outside the layer altogether and went black. 140% gives 406 there. */ width:140% !important;max-width:none !important; height:0 !important;padding-bottom:100% !important; /* and the origin must be the centre; a rule further up sets 0 0 for the rotated backdrops, which would swing this square out of the band */ transform-origin:50% 50% !important; /* two quarter-turns LEFT from the Figma's +90, as FIDA asked: 90 - 180 = -90. The bounding box is unchanged — a 1.15w x w box turns to w x 1.15w either way — so the band stays covered. */ transform:translate(-50%,-50%) rotate(-90deg) !important; /* CENTRED, as FIDA settled on — neither edge. Briefly anchored to the band's right, which in this turned layer is written `bottom`, since -90deg maps local down to screen right; that framed a darker end of the picture and the band fell to 41.5 against her 45.8. */ /* 91% — and this is the floor, not a preference. The quarter turn maps the layer's WIDTH onto the screen's height, so the picture's drawn width has to be at least the band's HEIGHT. The worst case is the narrowest phone, where the copy wraps to more lines: at a 305 layout the band is 305 wide and 315 TALL, so the picture must be larger than the band is wide, not smaller. Measured there, over a magenta ground so no gap could hide: 84% drawn 295 6.35% of the band uncovered 86% drawn 302 4.34% 88% drawn 309 1.90% 90% drawn 316 0.00% <- exactly covering 92% drawn 323 0.00% 33%: the whole photograph, as small as it goes while still all there. FIDA does not want it to cover — that constraint was mine, and it was what stopped this at 90%. Without it the limit is simply the picture itself: turned a quarter, its 739 x 1600 reads 1600 x 739 on screen, so fitting it inside a 375 x 288 band means 375 x 173 and the band shows through above and below. The size is a percentage of the LAYER, which is 140% of the band, so 33% of 525 = 173 — the picture's pre-turn width, which the turn maps onto the screen's height. Written as separate properties on purpose. This was a `background:` shorthand with a second comma-separated layer, which the browser rejected outright: the computed size came back 100% 100% from about.css's desktop rule and none of this applied. */ background-image:var(--img-philosophy-bg) !important; background-size:48% auto !important; background-position:center !important; background-repeat:no-repeat !important; background-color:transparent !important; /* The Figma paints this fill at .16; her phone screen renders the band at a gutter mean of 45.8, which .16 cannot reach — the same doubling every other band on this page has needed. .28 puts the centred crop there. */ opacity:.28 !important;z-index:0; } .stage .sec-philosophy > *:not(i){position:relative;z-index:1} .sec-create{position:relative !important;background:var(--ink)} .stage .sec-create .create-inner{ position:absolute !important;inset:0 !important; left:0 !important;top:0 !important; width:100% !important;height:100% !important;z-index:0; } /* This was painted at the artboard's own 1587 × 3288 to keep the grain the size FIDA drew it. That reasoning treats the fill as a TEXTURE. It is a photograph — a desk, a lamp, a monitor — and her phone screen shows the whole scene, so keeping the Figma paint size was wrong twice over. At 1587 × 3288 inside a 360 × 779 box the window is 23% of the picture's width, and `background-position:49.96% 55.6%` lands that window on the monitor, which is nearly black. Measured against her own render (-HOME2-2.pdf), gutter luminance by twentieths of the band: band hers shipped top 0-4 28-41 31-33 middle 5-14 29-39 2.0 <- the whole Brand Identity block bottom 15-21 29-37 25-32 Two point zero. The middle 45% of the section — heading, both services, both buttons — sat on pure black. That is the missing background image. So: cover, centred, which is the rule her own band follows (fill the width, crop the height, centre it). Her band is a wider box than the phone's, being her type sizes rather than readable ones, so the crops cannot be identical; the RULE is. Opacity is hers, not the artboard's. Desktop Figma paints this at 17%; her phone screen measures a mean of 34.3 where 17% gives 22.4. Her PDF is colour-exact — lilac reads rgb(221,210,240) against a --lilac of rgb(221,210,240), white is exact, and black stays 0 — so the difference is her decision, not the rasteriser. 26% reproduces her mean at 34.1. RMS against her band: 23.1 shipped, 5.8 here. */ .stage .sec-create .create-inner::after{ background-size:cover !important; background-position:center !important; opacity:.26 !important; } .sec-create > *:not(.create-inner){position:relative;z-index:1} /* ── PROJECT PAGES · the title block ───────────────────────────────── Her screen (EXAMPLE - WORK.pdf, Lalla Tea) runs: Lalla Tea ← centred Logo design, illustrations & packaging year : 2024 ────────── ← short, centred body copy, CENTRED On the artboard these are TWO COLUMNS with a VERTICAL divider between them: .rule-w is 175.5px tall at top:196, and the body sits beside the title, so their Figma tops interleave. Sorting by coordinate therefore produced rule → body → title → subtitle on all seven pages — the block inside out. Forced with `order`, which needs !important because applyOrder writes its own inline. Body copy is centred, not justified: her short lines sit on the axis ("roccan tea." at x461.6 w155.8 centres on 539.5 of 1080). Two of the seven carry .ta-j from the artboard; the phone overrides it. */ .stage .sec-title .f-mb60 {order:0 !important} .stage .sec-title .f-i12xl{order:1 !important} .stage .sec-title .rule-w {order:2 !important;width:60% !important;align-self:center;margin:10px 0} .stage .sec-title .f-i12l {order:3 !important} .stage .sec-title .f-i12l, .stage .sec-title .f-i12l .in{text-align:center !important;hyphens:none;-webkit-hyphens:none} /* ── SERVICES packages ──────────────────────────────────────────────── The numeral hangs to the LEFT of the heading and spans its tagline, as she draws it — the build had it alone on a centred full-width row. */ .stage .sec .pk-head{ display:grid;grid-template-columns:auto 1fr;align-items:start; column-gap:10px;width:100% !important;height:auto !important; } .stage .sec .pk-head > *{ position:static !important;left:auto !important;top:auto !important; width:auto !important;height:auto !important;margin:0; } .stage .sec .pk-head > .f-num180, .stage .sec .pk-head > .f-num150, .stage .sec .pk-head > .f-num{ font-size:64px;line-height:.82;text-align:left !important; } .stage .sec .pk-head > .f-num180 .in, .stage .sec .pk-head > .f-num150 .in, .stage .sec .pk-head > .f-num .in{text-align:left !important;width:auto !important} .stage .sec .pk-head h2, .stage .sec .pk-head > .txt:last-child{align-self:center;text-align:left !important} .stage .sec .pk-head > .txt:last-child .in{text-align:left !important} /* one item per line, set from the asterisks by mobile.js */ .stage .sec .pk-list, .stage .sec .pk-list .in{ text-align:left !important;font-size:13px;line-height:1.75; hyphens:none;-webkit-hyphens:none; } /* ── WORKING PRINCIPLES · najma between the statements ──────────────── mobile.js splits the single text node on its blank lines and deals the five ornaments out between the six pieces. The gap is two line-pitches, which is her cadence. */ .stage .sec .wp-list{ display:flex;flex-direction:column;align-items:center; width:100% !important;height:auto !important;gap:0; } .stage .sec .wp-item{ position:static !important;left:auto !important;top:auto !important; width:100% !important;height:auto !important;text-align:center !important; } .stage .sec .wp-item .in{text-align:center !important} .stage .sec .wp-list > .spark{margin:11px 0} /* ── FROM VISION TO IDENTITY · her 2 × 2 grid ───────────────────────── Two cards per row, one full-bleed black band per row crossing the photographs part-way down, exactly as her mobile screen draws it. The band is the ROW's own background; mobile.js marks the section's backdrop div used so bands() leaves it alone. The gradient is the band edge: transparent above the crossing point, solid --ink below it. 33% was a guess. Measured off her own render, the black starts 210 artboard units below the numeral's ink top on BOTH rows — 3749 -> 3959 and 4731 -> 4941 — which is 28.2% and 29.4% of the row. 29% it is. */ .stage .sec .pc-row{ display:grid;grid-template-columns:1fr 1fr;gap:0 18px; width:calc(100% + 2 * var(--pad)) !important;max-width:none !important; height:auto !important; margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad)); padding:0 var(--pad) 22px;box-sizing:border-box; background:linear-gradient(to bottom,transparent 0 29%,var(--ink) 29% 100%); } .stage .sec .pc{ display:flex;flex-direction:column;gap:6px;min-width:0; width:auto !important;height:auto !important; } .stage .sec .pc > *{ position:static !important;left:auto !important;top:auto !important; width:100% !important;height:auto !important;max-width:none !important; } /* the number sits above its picture, the caption pair below it on the band */ .stage .sec .pc > .f-num{text-align:center} .stage .sec .pc > .f-p24c, .stage .sec .pc > .f-i12{text-align:center !important} /* ── a partial band with no grid · the ABOUT journey case ───────────── mobile.js groups the elements the artboard sits ON .vision-band into .on-band panels — one per process card. The band itself is a 1440-wide full-bleed rectangle in Figma, so the panels bleed past the section gutter to both screen edges. The band div has done its job and goes. */ .stage .sec .band-used{display:none !important} /* background comes from the band element itself, set inline by mobile.js — black for HOME's .vision-band, white for ABOUT's .jr-white */ .stage .sec .on-band{ /* an explicit calc rather than relying on flex stretch to resolve width:auto against the negative margins — it resolved to the plain content width and the panel bled left but not right */ width:calc(100% + 2 * var(--pad)) !important;height:auto !important; /* `.sec > *` also sets max-width:100%, which clamped the panel straight back to the gutter width — even an explicit 375px could not escape it */ max-width:none !important; margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad)); padding:18px var(--pad) 22px;box-sizing:border-box; display:flex;flex-direction:column;gap:8px; } .stage .sec .on-band > *{ position:static !important;left:auto !important;top:auto !important; width:100% !important;height:auto !important; } /* the logo rows stay clipped, and their track keeps the absolute positioning its translate animation depends on */ .sec-logos{overflow:hidden !important} /* Every logo inside a row is absolutely positioned, so the row has no intrinsic height — the generic height:auto reset collapsed it to 0 and `overflow:hidden` then clipped the whole row away. The tallest mark is 95px sitting at an 11px offset, so 106px contains the row exactly. */ .mq{ position:relative !important;width:100% !important; height:106px !important;overflow:hidden !important; } /* `left` is deliberately NOT set here — each row's Figma start offset is inline in the HTML (11px scrolling left, -1482px scrolling right) and mobile.js re-asserts it. Forcing left:0 here ran row 2 off into blank space for three quarters of every cycle. */ .sec .mq .mq-track{ position:absolute !important;top:0 !important; width:auto !important;height:106px !important; } /* ── buttons ────────────────────────────────────────────────────────── The reference sets its hero pair at 50px tall, ~150px wide, 14px/600 centred — a proper thumb target. Matched here, left-aligned like the rest of the mobile hero. */ .btn,.btn-sm,.lets-talk,.submit,.pill-outline,.explore{ position:relative !important;left:auto !important;top:auto !important; width:auto !important;max-width:100%;height:auto !important;min-height:50px; display:inline-flex !important;align-items:center;justify-content:center; gap:8px;padding:0 28px;align-self:flex-start; } .btn .txt,.btn-sm .txt,.lets-talk .txt,.explore .txt{ position:static !important;width:auto !important;height:auto !important; display:inline-block !important;white-space:nowrap; } /* Her buttons are CENTRED everywhere except HOME's hero pill, which is left-aligned against the rail like the headline above it. The build had align-self:flex-start on all of them, so every pill sat in the gutter. */ .stage .sec .btn, .stage .sec .btn-sm, .stage .sec .lets-talk, .stage .sec .submit, .stage .sec .explore, .stage .sec .pill-outline{align-self:center} .stage .sec-hero.has-rail .btn{align-self:flex-start} /* .on-band forces width:100% on its children at (0,4,0) — that turned ABOUT's Let's Talk into a 335px outlined bar reading as a form field */ .stage .sec .on-band > .lets-talk, .stage .sec .on-band > .btn, .stage .sec .on-band > .btn-sm, .stage .sec .on-band > .pill-outline{width:auto !important;align-self:center} .lt-pill{display:none} /* gap:3px is Figma's own — its text box ends at 426 and the arrow starts at 429. The shared button rule's 8px would open it to 14px here. */ .explore{padding:0;min-height:0;align-self:flex-start;gap:3px} /* Figma "Arrow 1" paints 14.5 × 7.364 (absoluteRenderBounds — the 14 × 0 absoluteBoundingBox is the bare geometry line and leaves out the head). The reset was stretching it to 51px; these restore the real box. */ .stage .sec .arrow{ position:static !important;display:inline-block; width:14.5px !important;height:7.364px !important;flex:0 0 14.5px;margin-left:0; } .btn-sm{min-height:46px;padding:0 24px} .submit{min-height:50px;padding:0 34px;font-size:16px} /* ── HERO · the reference's signature move ──────────────────────────── Its hero is a full-viewport-height band with the photograph as the background and everything left-aligned over it, rather than the photo sitting as a separate block. FIDA's hero holds the same ingredients — photo, ornament, display title, paragraph, button — so it gets the same treatment: the photo becomes the section's background, scrimmed so the lilac type keeps its contrast. */ /* position:relative needs !important — the generic `.sec{position:static !important}` reset above would otherwise win, and the rail's absolutely positioned line and star would resolve against the document instead of the hero (landing exactly one header-height too high). */ /* Only HOME's hero is the full-viewport one. SERVICES, PORTFOLIO, CONTACT, TERMS, PRIVACY and the seven project pages all have a .sec-hero too, and FIDA's mobile screens give them a SHORT photographic banner — the build was making every one of them a 812px black slab. .has-rail is added by mobile.js only to a hero that really carries the line-and-star. */ .sec-hero{ justify-content:center;align-items:flex-start; text-align:left;padding:96px var(--pad) 64px;gap:26px; position:relative !important; } .sec-hero.has-rail{min-height:100svh} /* Her inner-page banner runs to artboard y591 of 1080 measured off both ABOUT and PORTFOLIO — 54.7% of the viewport width, 205px at 375. The bar sits ON it (.on-photo pulls it up by its own 64px), so the floor is on the hero itself. PORTFOLIO was coming out 173px; SERVICES and CONTACT already exceed it on content and are unaffected. */ .sec-hero:not(.has-rail){min-height:54.7vw;padding:88px var(--pad) 40px} /* The banner photograph, back on. `.sec > *` still reaches it — the is a direct child of the section, and the `:not(i)` guard is only on the grandchild half of that reset — so it was being forced static/auto and came out 335 × 0. Its own absolute full-bleed box, restored. */ .sec-hero:not(.has-rail) i{ position:absolute !important;inset:0 !important; width:auto !important;height:auto !important; opacity:.34;z-index:0; } .sec-hero:not(.has-rail) > *:not(i){position:relative;z-index:1} /* Left-alignment belongs to HOME's hero ONLY — it is what the line-and-star rail is for. Every other .sec-hero (SERVICES, PORTFOLIO, CONTACT, TERMS, PRIVACY and the seven project pages) is CENTRED on her mobile screens, and these rules were flattening all of them to the left gutter. Never override a block Figma marks JUSTIFIED. */ .sec-hero.has-rail > *:not(.ta-j){text-align:left} .sec-hero.has-rail .txt:not(.ta-j), .sec-hero.has-rail .txt:not(.ta-j) .in{text-align:left !important} .sec-hero:not(.has-rail) .txt:not(.ta-j), .sec-hero:not(.has-rail) .txt:not(.ta-j) .in{text-align:center !important} .sec-hero:not(.has-rail){align-items:center;text-align:center} .hero-photo{ position:absolute !important;inset:0 !important;width:100% !important; height:100% !important;border-radius:0;z-index:0;opacity:.42; } .sec-hero > *:not(.hero-photo){position:relative;z-index:1} /* ── the rail: line + star, left of the headline ────────────────────── FIDA asked for "lkhet et najma f LEFT SIDE" — the line and the star, kept on the phone. Measured off the desktop hero and held to the same relationships: the star sits ON the line, 32.4% of the way down it; the line runs 78.4% of the headline's height; the headline clears it by 27.6px (scaled to 20px here, against the 34px phone star). mobile.js sets the vertical extents from the reflowed headline. */ /* Scoped to .has-rail, which mobile.js adds only to a hero that actually contains the line — SERVICES, PORTFOLIO, CONTACT, TERMS and PRIVACY all have a .sec-hero too and must not inherit the 37px rail column. */ .sec-hero.has-rail{padding-left:calc(var(--pad) + 31px) !important} /* left/height carry !important because the generic `.sec > *` reset forces left:auto and height:auto on every direct child of a section */ .sec-hero .rule-v{ display:block !important;position:absolute !important; left:calc(var(--pad) + 15px) !important;width:1px !important; background:var(--lilac);z-index:2; } /* 30px star, so its centre lands on the line at --pad + 15 */ .sec-hero .hero-star{ position:absolute !important;left:var(--pad) !important; width:30px !important;height:29px !important;z-index:2;margin:0; } .sec-hero .hero-star img{width:100%;height:auto;display:block} .sec-hero .btn{align-self:flex-start;margin-top:6px} /* ── rules & ornaments ──────────────────────────────────────────────── */ /* height too, or `.sec > *{height:auto !important}` collapses it to 0 and the rule simply is not drawn — the footer divider was missing on all 14 pages */ .hairline{position:static !important;width:100% !important;height:.5px !important;margin:8px 0} .rule,.rule-w{position:static !important;width:100% !important;height:1px !important;margin:4px 0} .rule-v{display:none} /* The ornaments are empty spans sized purely in CSS, so the generic `.sec > *` reset (width:100%, height:auto) flattened every one of them to 353×0 — invisible site-wide. Their own box has to be restored explicitly. */ /* three classes deep so it outranks `.sec > * > *:not(.in):not(i)` at (0,2,1) — inside a button the reset was stretching these to 73px */ .stage .sec .spark{ position:static !important;flex:0 0 15px;align-self:center;margin:2px 0; width:15px !important;height:15px !important; } /* ── heading ornaments · ornament · heading · ornament, ONE line ────── The Figma flanks every heading with the najma on the heading's own centre line, 10px clear of the text box on each side. mobile.js wraps that group into .hd-row; this is the row. Everything is three-plus classes deep so it outranks the `.sec > * > *:not(.in):not(i)` and `.sec .txt` resets, which would otherwise force each part to 100% width and stack them again. */ .stage .sec .hd-row{ display:flex !important;align-items:center;flex-wrap:nowrap; gap:10px;width:100% !important;height:auto !important; } /* Both kinds are centred on her mobile screens. The one-sided rows — "Brand Identity", "Illustration", the two on SERVICES — carry a single najma on the left, and I had read that as "left-aligned column heading". Her screens centre the pair as a unit; only the ornament count differs. */ .stage .sec .hd-row{justify-content:center;text-align:center} .stage .sec .hd-row > .txt{ width:auto !important;max-width:100%;height:auto !important; flex:0 1 auto;min-width:0; } .stage .sec .hd-row > .spark{margin:0;align-self:center} /* The rotating seal is an empty div sized only by its inline Figma box, so the generic reset flattened it to 335 × 0 — it was invisible on all 13 pages that carry one, both instances. Its own box, restored. */ /* The seal kept its DESKTOP pixel size, 109 x 108. On a 1440 artboard that is 7.6% of the width; at 375 it becomes 29.1%, nearly four times the presence FIDA gives it. Both her screens size it the same way and small: ABOUT, after Working Principles x489..634 145 wide = 13.4% HOME, in the CTA x830..971 141 wide = 13.1% So it is a proportion, not a pixel size. 13.4% here; the CTA rule above sets its own 13.1% and its own position. 13.4% of the VIEWPORT, not of the padded column — a plain 13.4% resolved against the content box and came out at 12.0% of the screen. The CTA one needs no such calc: it is absolutely positioned, so its percentage already resolves against the section's full width. */ .stage .sec .badge{ position:static !important;align-self:center;margin:6px 0; width:calc(0.134 * (100% + 2 * var(--pad))) !important; max-width:none !important;height:auto !important; aspect-ratio:145 / 149;flex:0 0 auto; } .big-star{position:static !important;align-self:center;max-width:180px;height:160px !important} .hero-star{position:static !important;align-self:center} /* ── marquees ───────────────────────────────────────────────────────── Both tracks are absolutely positioned inside a clipped view and animate their transform — that is how they are built, so the reset must not turn them static or force them to 100% width. The manifesto becomes a compact full-bleed divider strip, the same role the reference gives its own 75px band between sections. */ .sec-mani,.z-mani1,.z-mani2{ padding:0 !important;gap:0 !important;justify-content:center; overflow:hidden !important; } .mani-view{ position:relative !important;width:100% !important; height:62px !important;padding:0 !important;overflow:hidden !important; } /* three classes deep so this outranks `.sec > * > *:not(.in):not(i)`, which is (0,2,1) and would otherwise force static/100% back on */ .sec .mani-view .mani-track{ position:absolute !important;left:0 !important;top:11px !important; width:auto !important;height:40px !important; } .mani-copy{font-size:16px;height:40px} /* ── testimonials · the same carousel as the desktop ──────────────── FIDA wants the phone to behave like the Figma: one quote at a time, the two arrows, first to last and stop. The desktop track slides by fixed Figma pixel offsets, which cannot survive reflow — so main.js groups the twelve flat children into four .cw-slide pages and steps by 100% here instead of by pixels. Everything else (the clamp, the lit/dim arrows, the disabled ends) is the same code path. */ /* The view stays OPEN — the two arrows are inside it, after the track, and clipping here cut them off completely. Only the track is clipped. */ .cw-view{ position:static !important;width:100% !important;height:auto !important; overflow:visible !important; } /* main.js wraps the track in this and collapses it to the height of the review being shown. Armed only after the opening height is committed, so the window does not animate up from nothing on load. */ .cw-clip{width:100%;overflow:hidden} .cw-clip.cw-anim{transition:height .35s ease} .cw-track{ position:static !important;width:100% !important;height:auto !important; display:flex;flex-direction:row; /* flex-start, not stretch: every slide keeping the tallest one's height is exactly what left 310px of dead space under the short reviews */ align-items:flex-start; /* the gutter that keeps the next review's italic ink off the clip edge — main.js steps by (100% + this) */ gap:24px; transition:transform .35s ease; } .cw-slide{ flex:0 0 100%;min-width:0; display:flex;flex-direction:column;gap:6px; } .cw-slide > *{ position:static !important;left:auto !important;top:auto !important; width:100% !important;height:auto !important; } .cw-slide > .f-name24{margin-top:14px} .cw-slide > .f-i16i{margin-bottom:6px} .cw-slide > .f-name24,.cw-slide > .f-i16i{text-align:left !important} /* the arrows come back, in flow under the quote rather than on the desktop's absolute coordinates */ .cw-dots{ position:static !important;display:flex;gap:26px;justify-content:center; width:100% !important;height:auto !important; margin-top:18px;pointer-events:auto; } .cw-dot{ position:static !important;left:auto !important;top:auto !important; width:52px !important;height:24px !important;flex:0 0 52px; padding:0;background:none;border:0; } .stage .sec .cw-dot .bar{ position:static !important;width:52px !important;height:18px !important; } /* ── the "Testimonials" sticker ────────────────────────────────────── Keep the design. Figma's chip is 97.105 × 18.582, radius 3, tilted -10.0636°, with its label tilted -9.4795° ON it — 10px of padding either side of a 77px label, and the label's 21px box deliberately overhangs the 18.6px chip top and bottom. mobile.js moves the label inside the chip, so the tilt is applied once to the pair and the label only needs Figma's HALF-DEGREE difference back: -9.4795 - (-10.0636) = +0.5841. The sticker sits on the lower half of the script heading, as it does on the artboard — chip centre 162.6 against a heading box of 76…198, i.e. 71% down it. The negative margin reproduces that against the reflowed row instead of hard-coding a pixel offset that only holds at one width. */ .chip{ position:static !important;align-self:center; width:auto !important;min-width:0; /* Figma's chip is SHORTER than its label box — 18.582 against 21 — so the type overhangs it top and bottom. Scaled: 0.885 x the 12px line box. Padding-driven height would have wrapped the chip around the text and lost that. */ height:11px !important; display:inline-flex;align-items:center;justify-content:center; /* The sticker scales WITH the heading, or the design changes. On the artboard it is 30% of the script's ink width; left at its desktop size against a heading that drops 80px → 52px it becomes 46% — a much heavier, clumsier badge than FIDA drew. 52/80 = 0.65, so the 14px label and its 10px padding scale by that: 9.1px and 6.5px. 10px is used for the label rather than 9.1 — a floor for legibility that costs 3 points of width ratio and keeps it inside a rounding of the design. */ padding:0 7px;border-radius:3px; /* main.css pivots from 0 0, which is what the desktop's absolute coordinates are derived against. In flow the sticker must pivot about its own centre, or the rotation drags it off the column's axis. */ transform-origin:50% 50%;transform:rotate(-10.0636deg); margin-top:calc(-1 * (var(--chip-lift, 36px))); z-index:2;position:relative !important; } .stage .sec .chip .chip-t{ position:static !important;width:auto !important;height:auto !important; text-align:center;transform-origin:50% 50%;transform:rotate(0.5841deg); } .stage .sec .chip .chip-t, .stage .sec .chip .chip-t .in{ font-size:10px;line-height:1.2;white-space:nowrap !important;width:auto !important; } /* ── the contact form ───────────────────────────────────────────────── */ .field{position:static !important;width:100% !important;height:44px !important; font-size:16px;margin-bottom:4px} /* 16px stops iOS zooming on focus */ /* Her CONTACT sets the two choice fields as FILLED grey boxes like the rest of the form, with their value centred — the build left them transparent, so they read as bare text rather than as fields. */ .opt{ position:static !important;width:100% !important;height:44px !important; margin-bottom:8px;background:#d9d9d9;display:flex;align-items:center; justify-content:center; } .opt .bar{ position:static !important;width:auto !important;height:auto !important; font-size:13px;font-weight:600;color:var(--ink);text-align:center; } /* SUBMIT is a hugging centred pill on her screen, not a full-width bar. `.sec > * > *` forces width:100% on it because it sits inside the form. */ .stage .sec form .submit{width:auto !important;align-self:center;padding:0 42px} .chevron{display:none} form{display:flex;flex-direction:column;width:100%} label.txt{margin-bottom:2px} /* ── footer ─────────────────────────────────────────────────────────── */ .sec-footer{padding:44px var(--pad) 36px;gap:14px;text-align:center} .sec-footer .txt{text-align:center} .built-by{position:static !important;width:100% !important;margin-top:10px;opacity:.5} /* The three groups mobile.js builds. Everything is three classes deep so it outranks `.sec > * > *:not(.in):not(i)` at (0,2,1) and `.sec .txt` at (0,2,0), both of which force each child back to 100% width — which is what turned the footer into eleven separate full-width rows. */ /* FIDA's mobile footer: TWO columns of three, left-aligned, with the two social marks in the middle between them, sitting level with the third row. mobile.js builds .f-col / .f-social / .f-col inside .f-links. */ .stage .sec .f-links{ display:grid;grid-template-columns:auto auto auto; justify-content:space-between;align-items:end; gap:0 8px;width:100% !important;margin:6px 0 14px; } .stage .sec .f-col{ display:flex;flex-direction:column;gap:14px; width:auto !important;height:auto !important; } .stage .sec .f-links a{ position:static !important;left:auto !important;top:auto !important; width:auto !important;height:auto !important;text-align:left; } /* the marks sit in the middle cell, bottom-aligned onto the third row */ .stage .sec .f-social{ display:flex;align-items:center;gap:18px; width:auto !important;height:auto !important;margin:0 0 2px; } .stage .sec .f-social > .soc{ position:static !important;left:auto !important;top:auto !important; width:22px !important;height:22px !important;flex:0 0 22px; } /* Her order is Privacy LEFT, Terms RIGHT, spread to the outer edges. The markup has Terms first (the desktop artboard puts it at left:127 and Privacy at 1221), so the row is reversed rather than the HTML reordered — the desktop must keep its own arrangement. */ .stage .sec .f-legal{ display:flex;flex-direction:row-reverse;justify-content:space-between; flex-wrap:wrap;gap:8px 24px; width:100% !important;height:auto !important; } .stage .sec .f-legal > a{ position:static !important;left:auto !important;top:auto !important; width:auto !important;height:auto !important; } /* ── the mobile header, built by mobile.js ──────────────────────────── */ .navwrap{display:none !important} .sec-nav{display:none !important} /* FIDA, 2026-08-15: "f mobile menu f page lawla colored black; and then others pages used the images like bg images" — the bar is solid black on the FIRST page, and on every other page it sits over that page's own hero photograph instead of carrying a fill of its own. Her screens show exactly that: HOME2-1 has a black bar, ABOUT-ME has the blurred backdrop showing through behind the lockup. */ /* FIDA, 2026-08-15: the menu is NOT fixed on the phone — it scrolls away with the page. It stays fixed on the web, where .navwrap is position:fixed to match the artboard's own isFixed=true on NAVEBAR. position:relative rather than static so it keeps its stacking context: the .on-photo variant pulls the hero up under it with a negative bottom margin, and the bar has to paint over it. */ .m-head{ position:relative;z-index:200;display:flex;align-items:center; justify-content:flex-end;height:64px;padding:0 var(--pad); background:var(--ink);border-bottom:.5px solid var(--lilac); } .m-head.on-lilac{background:var(--lilac);border-bottom-color:var(--ink)} /* .on-photo is added by mobile.js to every page except HOME, and must come AFTER .on-lilac — CONTACT carries both, and her screen shows the bar sitting on that page's light hero photograph, not on a lilac fill. */ .m-head.on-photo{ background:transparent; margin-bottom:-64px; /* the hero rises to meet it */ } /* The hairline stays. It was being switched off with the background, but her screens keep it: -ABOUT ME has it at artboard y167 reading rgb(179,171,196) — lilac over the dark banner — and -PORTFOLIO shows the same rule under its header. The desktop has it too, as an explicit at the foot of .sec-nav. */ /* FIDA's mobile header carries the WIDE lockup — "Fida" + najma + the two-line tagline — centred on the bar. The build had the short nav mark (fida-logo-nav.svg, 151x53, no tagline) pushed against the left gutter by justify-content:space-between, which with two children can never centre the first. The footer lockup is the right artwork: 1898 x 385, 86% alpha, so it masks and recolours like the short one did. Absolutely centred rather than flexed, so the burger cannot pull it off the bar's axis. */ /* The bar centres its children, which put the lockup at artboard y48..133. Hers sits higher — y19..106 on -HOME2-1, -ABOUT ME and -PORTFOLIO alike, the same 423 x 87 placement on all three — above the bar's centre, with the hairline at ~164 below it. On ABOUT that mattered: the portrait starts at y144, so a logo ending at 133 cleared it by 11 units and by only 7 at 360px. Hers clears by 38. margin-top rather than top: percentage margins resolve against the containing block's INLINE size, so 1.76% is 1.76% of the viewport WIDTH — 19 of 1080 — which is the fraction her placement is expressed in. A percentage `top` would resolve against the bar's HEIGHT instead. */ .m-logo{ position:absolute;left:50%;transform:translateX(-50%); top:0;margin-top:1.76%; display:block;width:39%;max-width:172px;aspect-ratio:1898 / 385;height:auto; background-color:var(--lilac-logo); -webkit-mask:var(--img-logo-footer) center/contain no-repeat; mask:var(--img-logo-footer) center/contain no-repeat; } .m-head.on-lilac .m-logo{background-color:var(--ink)} .m-burger{width:40px;height:40px;display:flex;flex-direction:column; justify-content:center;gap:5px;padding:0 8px;background:none;border:0;cursor:pointer} .m-burger span{display:block;height:1.5px;background:var(--lilac);transition:transform .25s,opacity .25s} .m-head.on-lilac .m-burger span{background:var(--ink)} .m-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .m-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .m-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .m-panel{ position:fixed;inset:64px 0 0;z-index:199;background:var(--ink); display:flex;flex-direction:column;padding:28px var(--pad);gap:4px; transform:translateX(100%);transition:transform .3s ease;overflow-y:auto; } .m-panel.open{transform:translateX(0)} .m-panel a{ font:400 20px/1 var(--ff-sans);color:var(--lilac); padding:17px 0;border-bottom:.5px solid rgba(221,210,240,.18); } .m-panel a[aria-current="page"]{color:var(--white)} body.m-locked{overflow:hidden} } /* Phones proper. The gutter stays at 20px — that is the reference's own value at 393 and it is what puts the content column at 353. Only the vertical rhythm tightens. */ @media (max-width: 480px){ .sec{padding:48px var(--pad);gap:20px} /* padding-left is NOT reset here — the hero rail needs its 37px column */ .sec-hero{padding-top:96px;padding-right:var(--pad);padding-bottom:64px} }