/* * Local style overrides, injected into ahead of the bundle's own CSS * and scripts. The vendor bundle is never edited. */ /* --- Trim the page to: hero -> bio -> INTERESTS -> CONNECT -------------- * Source structure: * hero * chapter-1 > sect-1-wrap (intro) * > sect-2 > bio-sect, brands-sect, based-sect * chapter-2 > sect-1-wrap (intro), sect-2 > photos, quote * chapter-3 * chapter-4 * chapter-5 > sect-1..4 (CONNECT + footer) * * chapter-1 and chapter-2 stay in the flow because bio and the quote live * inside them; the rest of both chapters is hidden piece by piece. Note the * wrappers, not the
elements, carry the scroll height — hiding * `.sect-1` alone would leave `.sect-1-wrap` holding 2700px of empty scroll. * * Chapters 3-4 have copy of their own now (see src/content.js), but both are * built around photographs — five stacked "desire" frames, four inset shots, * a seven-image strip — and all of those belonged to the previous owner and * were deleted. Shown as they stand they would be walls of blank frames, so * they stay hidden until there is imagery of the actual products to put in * them. Deleting this one rule turns both back on. */ .chapter-3, .chapter-4 { display: none !important; } /* --- Chapter 2, cut down to its quote ----------------------------------- * The quote is the one block anywhere in chapters 2-4 that is made of type * alone: two small lines on the left, one 6rem uppercase statement on the * right, no photograph but its own. It now carries the interests block (the * copy is in src/content.js), which is why this chapter is in the flow at all. * * Everything else in it goes, for the reason chapters 3-4 do: `.sect-1-wrap` * is a full-screen title card over photo3.webp, `.photos` is the nine-image * gallery, and `.quote-photo` is image1.webp beside the quote itself — all * deleted with the previous owner's imagery. `.photos` is matched inside * `.chapter-2` rather than on its own: `.sect-3-photos` elsewhere on the page * is a different class, but a bare `.photos` is too broad to leave unscoped. * * The quote's own layout survives the loss of its photograph at both widths * and needs nothing further: `.left` is a flex column on desktop and a * `40% 60%` grid below 1024px, and either way it simply loses its second * child. The lead-in lines beside it are broken with
, so the narrower * track the grid leaves them sets the same three lines it always did. */ .chapter-2 > .sect-1-wrap, .chapter-2 .photos, .chapter-2 .quote-photo { display: none !important; } /* The hidden Chapter II intro used to occupy a full viewport, so the bundled section pulls its content upward by 100vh. On mobile that puts the Interests statement directly over the preceding bio copy. Reduce the overlap to leave a responsive 20vh gap. The bundle also keeps the entire section transparent until its top reaches the top of the viewport; disable that obsolete outer fade on mobile so the quote's own character reveal is visible from around the middle of the screen. */ @media (max-width: 1023px) { .chapter-2 > .sect-2 { margin-top: -50vh !important; opacity: 1 !important; } } /* `.brands-sect` is a strip of fourteen client logos (brand-1..14.svg, all deleted) with nothing to put in their place. `.based-sect` is back: it is the one block in this chapter made of type alone, and it now carries PRODUCT / TECHNOLOGY / BUSINESS instead of three office cities. */ .chapter-1 > .sect-1-wrap, .brands-sect { display: none !important; } /* --- The chapter numbering ---------------------------------------------- * The bundle numbers its sections "chapter I" to "chapter V" in three places: * the fixed progress rail down the side, a `.chapter-count` label on each * chapter's title card, and a prefix on every entry in the burger menu. It is * a device from a portfolio told as a five-part story, and it survives here as * a count of sections that no longer exist — "chapter V" sitting over the * CONNECT title with no I to IV in front of it says nothing at all. * * So the numbering goes entirely, and the sections keep their own titles. * `.chapter-count` is the label on the title cards; only chapter 5's is on * screen today, but the rule covers all five so that turning a chapter back * on does not bring its number with it. */ .chapter-nav, .chapter-count { display: none !important; } /* The final "T" in CONNECT is a separate element inside the section image. Mobile already raises it above that image; mirror the stacking fix on desktop so the image cannot paint over the letter. */ @media (min-width: 1024px) { .chapter-5 .sect-4-letter { z-index: 10; } .chapter-5 .sect-4-letter::after { display: none !important; } } /* In the menu the number is a `` in the first track of a `12.6875rem auto` grid, with the name in the second. Removing it from the grid drops the name into that first track and squeezes 3.25rem type into 203px, so the track goes with it and the names sit at the left edge. Below 1024px `.item` is already flex, and needs nothing. */ .menu .nav .item-chapter { display: none !important; } @media (min-width: 1024px) { .menu .nav .item { grid-template-columns: auto !important; } } /* --- Hero headline width ------------------------------------------------ * The hero title column is `flex: 0 0 21.75rem` (348px) in the bundle, which * was tuned to the original headline: "DESIGN" measures 340px at this size and * only just fits. Any longer word breaks mid-word ("TECHN / OLOGY"). * Widened to 34rem (544px), which is what "PRODUCTS" needs — the widest word * in the headline, and wider than its letter count suggests because five of * its eight glyphs are round. That still ends ~150px clear of the role list, * so the three columns keep their spacing. Not widened further: the design's * signature is a stack of short words, and a very wide column flattens it. * Desktop only — below 1024px the title is `flex: 1 1 auto` and already fluid. */ @media (min-width: 1024px) { .hero .title { flex: 0 0 34rem !important; margin-right: 8rem !important; } /* Same story in the bio: the heading sits in a 23.9375rem (383px) grid track, which fitted "LIGHT &" (335px) exactly, and the heading is right-aligned in it. Widening the element alone would only make it overflow its track to the right, past the portrait; the track itself has to grow. The grid is pinned by its right edge, so a wider first track extends leftward over the portrait and leaves the body copy beside it exactly where it was. At 34rem, which held "PRODUCTS," on one line, "TECHNOLOGY" broke as "TECHNOLO / GY". 46rem (736px) is what the heading's longest line, "TECHNOLOGY &", needs: the text measures 711px, but the title animation splits it into per-word inline-blocks before it wraps, and those do not collapse the space between them — so the line needs about a space more room than the type alone asks for. */ .bio .sect-2-texts { grid-template-columns: 46rem 12.625rem !important; } } /* Below 1024px both headlines are fluid and set at 4rem, which fits about * six characters across a 390px screen — enough for the bundle's own copy * ("DESIGN", "MIAMI") but not for "PRODUCTS", which broke as "PRODU / CTS". * Dropped to 3.5rem, tracking scaled by the same ratio to keep the -0.08em * the design is set in. The three-column statement is horizontal at this * width and set larger still, so "TECHNOLOGY" needs the same treatment; * 3.2rem puts all ten of its characters on one line there. */ @media (max-width: 1023px) { .hero .title { font-size: 3.5rem !important; letter-spacing: -0.28rem !important; /* The bundle keeps a 6.25rem gutter to the right of the mobile headline, which leaves only ~253px of text width — six characters. Narrowed to 2.5rem so eight fit; the headline still stops short of the edge. */ padding-right: 2.5rem !important; } .based .title1, .based .title2, .based .title3 { font-size: 3.2rem !important; letter-spacing: -0.229rem !important; } /* The third word is pulled up 1.75rem into the second, a slight tightening at 7rem type. Scaled with the type, or it swallows half the line. */ .based .title3 { margin-top: -0.8rem !important; } /* The bio heading has no room to grow here — its column is 357px of a 390px screen — so it is the type that gives instead. At 4rem "TECHNOLOGY" measures 419px and broke as "TECHNOLO / GY"; 2.9rem puts "TECHNOLOGY &" whole on one line, which keeps the heading to the three lines the design sets it in. The gold word goes with it: the two are one heading and the bundle sets them at the same size. Tracking scaled by the same ratio, holding the -0.08em and -0.1em they are drawn in. */ .bio .sect-2-titles h2 { font-size: 2.9rem !important; letter-spacing: -0.232rem !important; } .bio .sect-2-titles .text-shine { font-size: 2.9rem !important; letter-spacing: -0.29rem !important; } /* Chapter V's statement, "A LIFE BUILT ON LEARNING, BUILDING & MEANINGFUL EXPERIENCES", overflowed the screen here. Its last row is a flex pair — the small "&" beside the second gold word — which leaves the gold 305px of the 357px column, and a flex item will not shrink below its longest word. At 4rem "EXPERIENCES" is 410px, so it hung ~110px off the right edge and was cut in half. 2.8rem brings it to 287px, inside the slot with room to spare, and keeps the "&" on the row where the design puts it. Both classes move together, as they do in the bio: the bundle draws the thin and the gold at one size. */ .chapter-5 .sect-2-title h2 { font-size: 2.8rem !important; letter-spacing: -0.224rem !important; } .chapter-5 .sect-2-title .text-shine { font-size: 2.8rem !important; letter-spacing: -0.28rem !important; } /* The interests statement is the bundle's `.bd-thin` — 3.125rem here, and the only place that class is used. At that size the widest word it has to set, "BODYBUILDING,", measures 361px against a 357px column and breaks mid-word, leaving an orphaned "G," on a line of its own. 2.9rem brings it to ~335px with room to spare, and is close enough to the original that nothing else about the block changes; tracking is scaled by the same ratio to hold the design's -0.08em. Desktop is unaffected — there the column is 984px and the longest line is well inside it. */ .chapter-2 .quote-text { font-size: 2.9rem !important; letter-spacing: -0.232rem !important; } /* Chapter V's counters are set in 15rem type, which fitted the bundle's two- and three-digit numbers. "400K+" is five characters and runs 54px off the right edge of a 390px screen, losing the "+". The row is centred on a fixed point, so the figure has to shrink from both sides: 9.5rem puts it back inside, and is still five times the size of any other type on the screen. Tracking is scaled to hold the same -0.047em. Desktop is unaffected — there the same figure ends 5px inside the viewport, and the whole page scales with the viewport width, so that margin holds at every desktop size. */ .chapter-5 .sect-3 .item-title { font-size: 9.5rem !important; letter-spacing: -0.443rem !important; } } /* --- The three-column statement ----------------------------------------- * `.based` sets its three words in 14.375rem type turned on its side * (writing-mode: vertical-lr), absolutely positioned, so a word's length is * its height. That was tuned to MIAMI / MILAN / DUBAI — five letters each, * about 1030px tall, which is what the section's 45rem top padding and 70vh * bottom padding were built around. * * PRODUCT / TECHNOLOGY / BUSINESS run seven to ten letters. At the bundle's * size TECHNOLOGY alone stands over 2000px tall and spills out of the section * into the chapter below it. The type is scaled to 10rem, with the negative * tracking scaled by the same ratio, which brings the longest of the three to * ~1440px — inside the section, and still the largest thing on the page. * Mobile is untouched: there the three are ordinary horizontal headings. */ @media (min-width: 1024px) { .based .title1, .based .title2, .based .title3 { font-size: 10rem !important; letter-spacing: -1rem !important; } /* The paragraph is centred, which puts it exactly behind the middle column — tolerable when that column was five letters and had scrolled past by then, but TECHNOLOGY is still crossing it, and letter strokes run through every line. Moved into the right margin, under "I'M BASED IN / TEHRAN", which leaves the left two thirds as pure typography and the text unobstructed. */ .based .descr { margin-left: auto !important; margin-right: 10rem !important; } } /* --- Content not yet supplied ------------------------------------------- * Each block below is hidden only because there is no replacement for it yet, * not because it was unwanted. Delete the rule once the content exists. */ /* The contact block is in the bundle three times, once per surface, each with * its own class prefix. All three are reachable, so every rule below has to * name all three or the block is only patched where it happens to be looked at: * * .contact .item.* burger menu * .form-contact .form-contact-* "get in touch" panel * .sect-4-info .sect-4-* page footer <- the one always on screen */ /* Phone is now real (see src/content.js); the "(whatsapp)" qualifier is hidden since that has not been confirmed. */ .contact .item.phone .whatsapp, .form-contact .form-contact-item.phone .whatsapp, .sect-4-info .sect-4-item.phone .whatsapp { display: none !important; } /* Social profiles: Instagram, Telegram (via the repurposed Facebook slot) and LinkedIn are real (see src/content.js). Youtube and Pinterest have no account behind them, so those two slots stay hidden - the anchors are direct children of the socials block in a fixed order: Instagram, Facebook (-> Telegram), Youtube, Linkedin, Pinterest. The block's title is a

, so nth-of-type counts the anchors alone. */ .contact .item.socials a:nth-of-type(3), .contact .item.socials a:nth-of-type(5), .form-contact .form-contact-socials a:nth-of-type(3), .form-contact .form-contact-socials a:nth-of-type(5), .sect-4-info .sect-4-socials a:nth-of-type(3), .sect-4-info .sect-4-socials a:nth-of-type(5) { display: none !important; } /* Handwritten signature — the bundled one is the previous owner's. * `visibility`, not `display`: the signature is a large element (ni.svg is * 1400x1484) and removing it from the flow shortens the bio by ~2270px, which * desynchronises the portrait's scroll parallax from the heading and text — * the portrait ends up scrolling past before the copy arrives. Keeping the * layout box preserves the composition. */ .bio .ni-svg, .bio .ni-svg-mob { visibility: hidden !important; } /* The signature next to the bio copy is a separate inline , not the * ni.svg image above — both have to go. */ .bio .sect-2-signature { visibility: hidden !important; } /* Footer links to a presentation PDF and a privacy policy; neither document exists for this site. The originals were deleted and the hrefs defused in src/content.js. The burger menu carries its own copy of the same two links in .contact .foot. */ .sect-4-privacy, .contact .foot a { display: none !important; } /* The form's consent line reads "...I have read and agree to the ." Hiding just the link leaves the sentence dangling on a bare full stop, so the whole line goes until there is a policy to link to. */ .form-policy { display: none !important; } /* The cookie banner announces "we use cookies for analytics". This build ships no analytics and sets no cookies - the only thing it writes is the consent flag the banner itself puts in localStorage. Nothing to consent to, so the notice is removed rather than left making a claim that is not true. */ .cookie { display: none !important; } /* "Made by" agency credit for the original build. */ .sect-4-made { display: none !important; } /* --- Chapter V's card --------------------------------------------------- * The one block on the page that is a paragraph rather than a headline, and * the bundle sets it in the same 0.75rem label type it uses for "chapter V" * and "scroll to explore" - three words at a glance, not eighteen lines of * prose. Uppercase, on 110% leading, at 12px, it is the hardest thing here to * actually read. 0.95rem on 145% leading, tracking scaled to hold the -0.01em * it is drawn in. * * The block grows with the type or the longest line starts wrapping against * the breaks written into it. That is free: .chapter-title is absolutely * positioned inside a full-viewport section, so its width costs no layout * anywhere - it extends into empty space beside the decor rule. */ .chapter-5 .chapter-title { width: 16rem !important; } .chapter-5 .chapter-title .title-text { font-size: 0.95rem !important; letter-spacing: -0.0095rem !important; line-height: 145% !important; } /* --- Navigation that outlives its sections ------------------------------ * The burger menu lists ABOUT / VENTURES / CONTACT, and VENTURES expands into * products, expertise and systems - chapters 2, 3 and 4. Three and four are * hidden above, and two is trimmed to its quote, so of those four targets one * lands on the interests block and the other three resolve to the same scroll * position it does: navigation that behaves as a dead end. Same reason * .chapter-nav goes. Both come back with the chapters. */ .menu .nav .item-wrap { display: none !important; } /* --- Gold, where the bundle was brown ----------------------------------- * `.text-shine` is every piece of gold type on the page: "clarity" in the bio, * "SCALE" and "MATTER" over the portrait, "PRODUCT" in the three-column * statement, the 15+/2/400K+/15+ figures, "CONVERSATION" in the CONNECT * heading, "Ideas" in the contact form. The bundle draws it in #946854 * with a #eec0ad highlight sweeping across - a brown with a pale tan shine, * left over from the original brand. * * ---- why a single gold does not read as gold ---- * The first pass at this replaced the brown with one flat colour, #eab738, the * hue sampled off the mark. It came out yellow. Hue was never the problem: * #eab738 is 43deg, and so is the ramp below. What reads as metal is the * *value range* across a glyph - a lit edge, a body colour, a specular flash, * a shadow - because that is what a curved reflective surface does to light. * One flat colour has no range, so it reads as paint, and a bright saturated * yellow paint at that. * * ---- the ramp ---- * Seven stops, lit from above, in the tones of gold leaf. The body sits at * #bf953f, appreciably darker and more orange than the yellow it replaces - * gold is a dark metal, and it is the highlights that make it look bright, not * the base. Two details do most of the work: * * - the flash at 47% is a narrow, near-white cream, not a lighter yellow. A * specular highlight takes the colour of the light source, not the metal. * - the last stop turns back *up*, to #d8b25f. That is bounce light on the * bottom edge, and it is the single cue that separates metal from a plain * dark-to-light gradient. Without it the ramp reads as a shaded surface; * with it, as a reflective one. * * Stops are percentages, so one ramp serves both the 11px button label and the * 440px figures. The darkest stop is #8c6519, which still holds 3.8:1 on * #0b0b0b, and it only ever covers a thin band of a glyph. */ :root { --gold-top: #f9edc4; /* lit top edge */ --gold-light: #dcb75e; /* fall-off under it */ --gold: #bf953f; /* body - the local colour */ --gold-flash: #fcf6ba; /* specular table */ --gold-deep: #b38728; /* the drop straight after the flash */ --gold-shadow: #8c6519; /* deepest shadow */ --gold-bounce: #d8b25f; /* reflected light, bottom edge */ --gold-ramp: linear-gradient( 180deg, var(--gold-top) 0%, var(--gold-light) 14%, var(--gold) 34%, var(--gold-flash) 47%, var(--gold-deep) 55%, var(--gold-shadow) 78%, var(--gold-bounce) 100% ); /* The travelling glint, kept transparent everywhere but its core so it can ride over the ramp as a second layer. The stops are the geometry the bundle draws with `--shine-size: 30%` - a 30% band with a 10% core - written out rather than referenced: a var() inside a custom property is substituted where the property is *declared*, and --shine-size does not exist on :root, which would leave this one invalid for every user of it. */ --gold-glint: linear-gradient( 90deg, transparent 0, transparent 35%, rgba(255, 241, 194, 0.5) 45%, rgba(255, 253, 242, 0.95) 50%, rgba(255, 241, 194, 0.5) 55%, transparent 65%, transparent 100% ); } /* * Two layers under one `background-clip: text`. The bundle animates * `background-position` from -30% to 130% (@keyframes shine, declared inline * in the bundle's ) on hover and again on scroll-in, and a single * position applies to every layer - which is exactly why the ramp is vertical. * A 180deg gradient is uniform along x, and at `background-size: 100% 100%` it * tiles seamlessly, so the sweep slides the glint across the glyphs while the * ramp underneath does not move at all. * * The glow is in `em`, so it tracks the type across the 46px-to-440px range * these headings span: a couple of pixels of warmth around "TRUST", a soft * ambient spill around the figures. It is what carries the shine in the long * stretches when the glint is not travelling. */ .text-shine { background-image: var(--gold-glint), var(--gold-ramp) !important; background-size: 200% 100%, 100% 100% !important; filter: drop-shadow(0 0 0.05em rgba(224, 170, 62, 0.25)); } /* * The one place gold type lands on a light ground: "Ideas", in the heading of * the contact panel, over `.form-box` at #f1f1f1. (The other light-backed * `.text-shine` is "Leading / Voices" in chapter-4, which is hidden.) * * The ramp above cannot be reused there. Its lit stops are cream by design - * #fcf6ba against #f1f1f1 is 1.05:1, so the top of every glyph and the flash * across its middle would simply be absent, and the word would read as broken * rather than as metal. The travelling glint goes for the same reason: a * near-white sweep over near-white paper is nothing at all. * * So the ramp is re-ranged rather than re-lit. Gold on a bright ground is read * by its shadow side, so the whole thing drops about two stops: the body to * #a8761d, the shadow to #6f4a0c at 7:1, and the flash to a mid-gold lift * instead of a cream one. It stays the same material and the same lighting - * top lit, shadow low, bounce on the bottom edge - and it is legible where the * flat gold this replaces sat at 1.6:1 across the whole word. */ .form-box .text-shine { background-image: linear-gradient( 180deg, #c9942b 0%, #a8761d 30%, #dfb352 47%, #97671a 58%, #6f4a0c 82%, #b8862a 100% ) !important; background-size: 100% 100% !important; /* An amber glow reads as warmth on black and as grime on white. */ filter: none; } /* --- The "Get in Touch" button, in gold --------------------------------- * The button is a transparent pill: `.btn-decor` carries a 6%-white ring over * a 1%-white fill, and the label sits on top in #f1f1f1. Against #0b0b0b that * reads as a black button with a white outline. Repainted in the mark's gold. * * The ring is taken well up from 6% - at that alpha a gold ring is * indistinguishable from the white one it replaces - and the fill given a * wash warm enough to separate the pill from the page without lighting it up. * Both are taken from the ramp above, so the pill belongs to the same metal as * the label inside it. * * On hover the bundle collapses `.btn-decor` into a 2.75rem circle and scales * `:after` up inside it, so that pseudo-element is the only solid fill the * button ever has: it becomes a struck gold disc, lit from the same corner as * everything else, and the arrow keeps the #0B0B0B it carries as a markup * attribute. The label slides out from behind the circle onto the page * background, which is why it stays gold rather than going dark on a gold fill * - there is no gold underneath it once the pill has collapsed. * * Both surfaces of the same button: the fixed header and the CONNECT section. * The contact form's submit control is deliberately left alone - it is the * `.black` variant sitting on the white form panel, where gold has neither the * contrast nor the meaning it has here. */ .header-btn .btn-decor, .sect-4-btn .btn-decor { background: linear-gradient( 180deg, rgba(249, 237, 196, 0.13), rgba(140, 101, 25, 0.1) ) !important; border-color: rgba(220, 183, 94, 0.6) !important; } .header-btn .btn-decor:after, .sect-4-btn .btn-decor:after { background: linear-gradient( 145deg, var(--gold-top) 0%, var(--gold-light) 35%, var(--gold) 62%, var(--gold-shadow) 100% ) !important; } /* * The label gets the same metal as the display type, on a ramp shortened to * four stops. At 11px the full seven would land under a pixel and a half each, * and the flash and the shadow would average back out into the flat yellow * this is meant to get away from; stopping at --gold-deep also keeps the * darkest band at 6:1 on the page, which small bold type needs and the 440px * figures do not. * * `--speed` is declared here because the bundle only sets it on `.text-shine`; * with it in scope the shared @keyframes drives the same glint across the * label as the button opens. */ .header-btn .btn-text, .sect-4-btn .btn-text { --speed: 1.1s; /* Only reached if -webkit-text-fill-color is not understood; the clipped gradient covers every browser that is. */ color: var(--gold) !important; background-image: var(--gold-glint), linear-gradient( 180deg, var(--gold-top) 0%, var(--gold-light) 38%, var(--gold-deep) 72%, var(--gold-bounce) 100% ) !important; background-size: 200% 100%, 100% 100% !important; background-position: -30% 0 !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 0.06em rgba(224, 170, 62, 0.4)); } .header-btn .btn:hover .btn-text, .sect-4-btn .btn:hover .btn-text { animation: shine var(--speed) var(--default-ease) 1; } /* --- The language switch -------------------------------------------------- * A plain link to the other locale (added by fixes.js's initLangSwitch, * outside Vue's own tree), styled as a small gold badge in the same metal * as the "Get in Touch" button, and faded by the same `toolbar-hidden` class * fixes.js already toggles on the header - see the fade rule under * "Toolbar fades out where the white shadow does" below. * * Sits on its own row under the header rather than beside its button: the * header itself pins to `top:0` once the intro finishes (`padding:1rem 1rem * 0` on a ~2.75rem-tall button, ~3.75rem of content total), and anything * placed inside that band at a matching height reads as part of the same * control - two rounded pills touching, or worse, one overlapping the * other's text. Clearing it by a full rem below settles that. * * `inset-inline-end` rather than `right`: on the Persian page the header's * own content mirrors under `dir="rtl"`, and the logical property keeps this * badge on the same side as "Get in Touch" without a second, RTL-only rule. */ #lang-switch { /* Hidden for now at the owner's request, while the Persian edition is * still being checked over. The element itself, fixes.js's initLangSwitch * and everything below are untouched - change this one declaration back * to `flex` to bring it back. * * (Was briefly a *second*, separate `display: none` declared above this * one - which a later declaration of the same property in the same rule * always wins over, `flex` included, so it never actually hid anything. * One declaration, changed in place, cannot have that problem.) */ display: none; position: fixed; top: 5rem; inset-inline-end: 1.25rem; z-index: var(--z-header); align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(220, 183, 94, 0.6); background: linear-gradient( 180deg, rgba(249, 237, 196, 0.13), rgba(140, 101, 25, 0.1) ); color: var(--gold-light); font-family: var(--font-gotham-medium); font-size: 0.75rem; letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; transition: filter 0.6s var(--default-ease, ease), visibility 0s, border-color 0.3s, transform 0.3s; } #lang-switch:hover { border-color: var(--gold); transform: scale(1.08); } #lang-switch.toolbar-hidden { filter: opacity(0); visibility: hidden; transition: filter 0.6s var(--default-ease, ease), visibility 0s 0.6s; } @media (max-width: 1023px) { #lang-switch { top: 4.25rem; inset-inline-end: 1rem; width: 2.25rem; height: 2.25rem; font-size: 0.6875rem; } } /* --- Dead scroll below the mobile footer -------------------------------- * `.bio .gradient` is the fade that lands the portrait column on the page * background. Its own rule anchors it to `bottom: 0`; below 1024px the bundle * re-anchors it to `top: 431rem` instead - 6896px measured from `.bio`, which * was where the bottom of that column fell in the original mobile layout. * * With chapters 2-4 and the intro gone, `.bio` is 1379px tall, so the element * is left hanging 5500px past the end of its own section and ~1576px past the * end of the document. It draws nothing there (a transparent-to-#0b0b0b fade * over #0b0b0b), but `position: absolute` still counts toward the scrollable * area: the page scrolls a further screen and a half of black after the footer * before it stops. * * Putting it back on `bottom` restores both the fade and the desktop * behaviour, and the document ends where the footer does. */ @media (max-width: 1023px) { .bio .gradient { top: auto !important; bottom: 0 !important; } } /* --- Reading the mark against the page ---------------------------------- * The monogram is drawn as dark faceted metal with gold edges, built to sit on * black - which is exactly the problem at 44px in the header: its body is the * same value as the #0b0b0b behind it, so the mark loses its silhouette and * only the gold bevels survive. * * Two stacked drop-shadows at zero offset. `drop-shadow` follows the PNG's * alpha rather than its box, so this hugs the monogram's actual outline * instead of haloing a square: a tight rim to give the edge something to sit * against, and a wide, fainter one for the falloff. Both are kept low enough * that the effect is a separation, not a glow. * * `.logo-white` only. The header swaps to `.logo-black` over light surfaces - * the open menu, the contact panel - by fading this image to zero, which takes * the shadow with it. A white rim is the one thing that must not follow the * mark onto a white background. */ .logo .logo-white { filter: drop-shadow(0 0 0.375rem rgba(255, 255, 255, 0.3)) drop-shadow(0 0 1.25rem rgba(255, 255, 255, 0.13)) !important; } /* --- Toolbar fades out where the white shadow does ---------------------- * The white rim above lives on `.logo-white`, which the bundle fades to zero * the instant the bio section's top reaches the viewport top - a ScrollTrigger * over `.chapter-1 .bio-sect`, started at `top top`. `fixes.js` watches for * that same crossing and toggles `.toolbar-hidden`, so the whole toolbar - * logo, burger, Get in Touch - fades out at that exact scroll point and back * in on the way up. * * The fade is `filter: opacity()`, not `opacity`, because GSAP already owns * `opacity` on this element and its children: the intro reveal is * `.from("header.header", {yPercent: 25, opacity: 0})` below 1024px and * `.from("header.header .logo", {opacity: 0, ...})` above it. A CSS * transition on a property GSAP tweens breaks it outright - `.from()` reads * the current computed value as its end state, mid-transition reads 0, and * the toolbar never reappears. `filter` is a property the bundle only ever * touches on the preloader and the hero text, so this stays out of its way. * * `visibility` is switched at the end of the fade rather than * `pointer-events`: the menu timelines write `pointer-events` straight onto * `.burger-wrap` as an inline style, which would leave an invisible burger * clickable. */ header.header { filter: opacity(1); visibility: visible; transition: filter 0.6s var(--default-ease, ease), visibility 0s; } header.header.toolbar-hidden { filter: opacity(0); visibility: hidden; transition: filter 0.6s var(--default-ease, ease), visibility 0s 0.6s; }