/* ═══════════════════════════════════════════════════════════════════════ 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){ /* ── 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} .f-name96 {font-size:46px;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} .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. */ .jr-imgwrap i,.sec-philosophy i{display:none} /* 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. */ /* padding-top carries the overlap: her portrait sits 46% onto the band, so its top is (44vw band) − 0.46 × (51vw / 0.5626 portrait) = 2.3vw. Two classes deep because the @media(max-width:480px) block below resets the `padding` shorthand and would otherwise put it back to 48px. */ .stage .sec-journey{background:var(--white);position:relative !important;padding-top:2.3vw} .stage .sec-journey .jr-imgwrap{ position:absolute !important;left:0 !important;top:0 !important; width:100% !important;max-width:none !important;height:44vw !important; border-radius:0;z-index:0;overflow:hidden; background:var(--img-journey-bg) center/cover no-repeat; } .stage .sec-journey > *:not(.jr-imgwrap){position:relative;z-index:1} /* 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, and her mobile crop is 0.5626 */ aspect-ratio:550.4 / 978.4 !important;align-self:center;border-radius:0; } .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; } /* The texture keeps the SIZE the artboard renders it at — 1587 × 3288 (the 1848 × 4000 source under Figma's own slight stretch). Refitting it to the new box with `cover` would scale it to ~370 × 800 and the grain would come out about four times finer than FIDA drew it. Same grain, different window, which is what a narrower viewport means. */ .stage .sec-create .create-inner::after{ background-size:1587px 3288px !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% puts the cut about 44% down each photograph, which is where hers falls. */ .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 33%,var(--ink) 33% 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. */ .stage .sec .badge{ position:static !important;align-self:center;margin:6px 0; width:109px !important;height:108px !important;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;border-bottom-color:transparent; margin-bottom:-64px; /* the hero rises to meet it */ } /* 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. */ .m-logo{ position:absolute;left:50%;transform:translateX(-50%); 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} }