/* ========================================================================== ALOFTAURA · the home page's overlay. index.html is the production React build, shipped as exported. This sheet is loaded AFTER the bundle's own stylesheet and does three things to it: 1 · sets the whole page in Intrepid, uppercase — the house voice 2 · styles the SEE ADDITIONAL INFORMATION link that spa.js plants 3 · styles the language picker that src/i18n.js mounts beside AAC SIGNIN WHY !important HERE. Normally it is a smell. Here the thing being overridden is a minified Tailwind bundle regenerated by a tool we do not run: its utilities are single-class selectors of equal specificity to anything we could write, and their order in the file is not ours to control. An override layer over a third-party build is exactly the case the keyword exists for. It is confined to font-family, letter-spacing and text-transform — nothing here touches layout, colour or spacing, so the page is the page. ========================================================================== */ @font-face { font-family: "Intrepid"; src: url("../fonts/intrepid.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } /* The aurora blobs are absolutely positioned past the right edge on purpose, and their fixed parent already clips them — but the bundle leaves at overflow-x: visible, so on a 390px phone the document still reports ~50px of horizontal scroll in the languages whose longer words push a section wider (ta, ml, fil). `clip`, not `hidden`: it stops the scroll without making the root a scroll container, which is what the interior pages already do in site.css. */ html { overflow-x: clip; } :root { --aa-brand: "Intrepid", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif; --aa-gold: #d9b45a; --aa-gold-lt: #f4e3a1; --aa-cream: #f5f3ee; --aa-ease: cubic-bezier(.22, 1, .36, 1); } /* --- 1 · one voice -------------------------------------------------------- The bundle's two families (Cormorant Garamond for .font-display, Jost for body) are replaced wholesale. Their @import has been removed from the bundle stylesheet as well, so the page now makes no font request off this domain. */ html body, html body *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(g) { font-family: var(--aa-brand) !important; } /* Uppercase everything the page renders as text. Inputs are exempt: re-casing what someone is typing changes their own words back at them. */ html body, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body p, html body a, html body span, html body li, html body button, html body blockquote, html body cite, html body strong, html body em, html body small, html body div { text-transform: uppercase; } html body input, html body textarea, html body select, html body input::placeholder, html body textarea::placeholder { text-transform: none; } /* Uppercase Intrepid needs air. Headings get a little, body copy a little more — set on the two families the bundle used, so the tracking lands on the same elements the original design intended it for. */ html body { letter-spacing: .06em; } html body .font-display, html body h1, html body h2, html body h3 { letter-spacing: .035em; line-height: 1.16; } html body p, html body li { letter-spacing: .075em; } /* The house's line. One breath, not two — it scales with the viewport rather than wrapping, and only breaks below 560px where holding one line would make it unreadable. */ html body blockquote, html body .font-display.italic, html body [class*="italic"].font-display { font-style: normal !important; } @media (min-width: 561px) { html body blockquote { white-space: nowrap; } } /* --- 2 · SEE ADDITIONAL INFORMATION --------------------------------------- Built from scratch rather than out of the bundle's Tailwind atoms: those class names are generated and change on every export, so a link assembled from them would silently lose its styling the next time the site was built. Everything below is scoped to .aa-more and cannot affect the app. */ .aa-more { display: inline-flex; align-items: center; gap: .8em; margin-top: 2rem; padding: 14px 28px; font-family: var(--aa-brand) !important; font-size: 10.5px; letter-spacing: .18em !important; text-transform: uppercase; text-decoration: none; color: var(--aa-cream); border: 1px solid rgba(245, 243, 238, .18); background: transparent; transition: border-color .35s var(--aa-ease), color .35s var(--aa-ease), background-color .35s var(--aa-ease); } .aa-more:hover, .aa-more:focus-visible { border-color: var(--aa-gold); color: var(--aa-gold-lt); background: rgba(217, 180, 90, .08); } .aa-more:focus-visible { outline: 2px solid var(--aa-gold); outline-offset: 3px; } .aa-more__arrow { transition: transform .35s var(--aa-ease); } .aa-more:hover .aa-more__arrow { transform: translateX(3px); } /* --- 3 · the language picker ---------------------------------------------- src/i18n.js injects its own stylesheet at runtime, so its rules land after this file and win at equal specificity. Every selector here is one step more specific — `.aa-lang .i18n-btn` beats `.i18n-btn` — so the button can be made to match AAC SIGNIN exactly: same height, same border, same tracking, same gold on hover. */ /* The wrapper that keeps the sign-in button and the language picker together against the header's justify-between row. */ .aa-right { display: inline-flex; align-items: center; gap: 10px; } .aa-lang { display: inline-flex; align-items: center; } .aa-lang .i18n-wrap { display: inline-flex; } /* ONE BOX, TWICE. Both controls were bordered in the same gold at the same weight, but their heights came from different sources — the picker from its own vertical padding, AAC SIGNIN from the export's `py-2` on a slightly larger type size — so they landed 32px against 33.6px. A 1.6px mismatch is too small to look intentional and too large to look accidental; side by side it just reads as a misaligned pair. Both are now given the height outright and centre their own contents, so the type inside can differ (a three-letter code wants tighter tracking than a button) without the outlines diverging. */ .aa-right > .aa-lang .i18n-btn, .aa-right > a[href^="/aac"] { height: 34px; padding-block: 0 !important; padding-inline: 16px !important; display: inline-flex; align-items: center; line-height: 1; } .aa-lang .i18n-btn { /* Matched to AAC SIGNIN beside it: same gold hairline border, same gold text, same height and tracking. The two read as one pair of controls. */ padding: 0 16px; border-radius: 0; border: 1px solid rgba(217, 180, 90, .4); background: transparent; color: var(--aa-gold-lt); font-family: var(--aa-brand) !important; font-size: 10px; line-height: 1.2; letter-spacing: .18em !important; text-transform: uppercase; transition: border-color .35s var(--aa-ease), color .35s var(--aa-ease), background-color .35s var(--aa-ease); } .aa-lang .i18n-btn:hover { border-color: var(--aa-gold); color: #fff6d6; background: rgba(217, 180, 90, .08); } /* Only the code. The globe and the caret are chrome the header does not have anywhere else — the button is three letters, like every other word in the row. i18n.js builds them as its first and last children. */ .aa-lang .i18n-btn .i18n-globe, .aa-lang .i18n-btn > span:last-child:not(.i18n-code) { display: none; } .aa-lang .i18n-btn .i18n-code { font-weight: 400; letter-spacing: .18em; } /* The panel is portalled onto , so it is reached from there. */ body .i18n-panel { border-radius: 0; border-color: rgba(245, 243, 238, .13); background: rgba(12, 12, 16, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--aa-cream); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); } body .i18n-search { border-radius: 0; border-color: rgba(245, 243, 238, .13); background: rgba(255, 255, 255, .04); color: var(--aa-cream); text-transform: none; letter-spacing: .04em; } body .i18n-search:focus { border-color: var(--aa-gold); } body .i18n-group-h { color: rgba(245, 243, 238, .38); letter-spacing: .18em; } body .i18n-opt { border-radius: 0; } body .i18n-opt:hover { background: rgba(245, 243, 238, .07); } body .i18n-opt.active { box-shadow: inset 0 0 0 1px var(--aa-gold); } body .i18n-code3 { border-radius: 0; color: var(--aa-gold); background: rgba(217, 180, 90, .12); font-weight: 400; letter-spacing: .08em; } body .i18n-opt.active .i18n-code3 { color: #08080b; background: var(--aa-gold); } /* A language's own name is never uppercased — Devanagari and Arabic have no case, and forcing it on the Latin ones would make the list unreadable. */ body .i18n-native, body .i18n-en { text-transform: none !important; letter-spacing: .02em; } body .i18n-native { font-weight: 400; } body .i18n-en { color: rgba(245, 243, 238, .38); } /* --- Non-Latin scripts ---------------------------------------------------- Intrepid is Latin-only and the wide tracking is a Latin device: on Devanagari it visually splits conjuncts, on Arabic it destroys the joins, and uppercase means nothing in either. src/i18n.js sets on every change, so both stand down and a face with the right glyphs takes over. */ html:not([lang="en"]) body, html:not([lang="en"]) body *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(g) { font-family: "Noto Sans", "Nirmala UI", "Kohinoor Devanagari", system-ui, sans-serif !important; text-transform: none !important; letter-spacing: .02em !important; } html:not([lang="en"]) body blockquote { white-space: normal; } /* …with one exception. "Fashion · Lifestyle · Jewellery" is the house signature, not copy: it sits under the mark as part of the lockup, stays in English in all 46 languages (the key is deliberately absent from every catalog, and the node carries data-no-i18n), and so it keeps the Latin face and the Latin tracking that the block above stands down. */ html body .aa-signature, html:not([lang="en"]) body .aa-signature { font-family: var(--aa-brand) !important; text-transform: uppercase !important; letter-spacing: .34em !important; } @media (prefers-reduced-motion: reduce) { .aa-more, .aa-more__arrow, .aa-lang .i18n-btn { transition: none; } } /* ========================================================================== 4 · MOTION The export already paints three blurred colour fields behind the hero — cyan, luxury pink and gold — but they sit perfectly still, so the ground reads as a flat picture of an aurora rather than an aurora. Each is given its own drift on its own clock; the durations are deliberately unrelated (29 · 37 · 43 s) so the three never return to the same arrangement and the background never visibly loops. Targeted by the layout classes that identify each circle rather than by the colour utility, because the colour class is what a redesign would change first. Nothing here moves an element from where the design put it: every transform is a drift around its own position. ========================================================================== */ @keyframes aa-drift-a { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(9%, 7%, 0) scale(1.2); } } @keyframes aa-drift-b { from { transform: translate3d(5%, 3%, 0) scale(1.12); } to { transform: translate3d(-8%, -5%, 0) scale(.94); } } /* This one is centred with -translate-x-1/2, so its own centring has to be carried through the keyframes or it jumps half its width on the first frame. */ @keyframes aa-drift-c { from { transform: translateX(-50%) translate3d(0, 5%, 0) scale(.96); } to { transform: translateX(-50%) translate3d(-6%, -4%, 0) scale(1.18); } } html body div.rounded-full[class*="blur-"] { will-change: transform; } html body div.rounded-full[class*="-left-40"] { animation: aa-drift-a 29s ease-in-out infinite alternate; } html body div.rounded-full[class*="-right-40"] { animation: aa-drift-b 37s ease-in-out infinite alternate; } html body div.rounded-full[class*="left-1/2"] { animation: aa-drift-c 43s ease-in-out infinite alternate; } /* --- The photography ------------------------------------------------------ A very slow ambient drift, and a lift on hover. Both are contained: the crops are overflow-hidden, so the image moves inside its frame and the layout never shifts by a pixel. */ html body figure, html body .overflow-hidden { overflow: hidden; } html body img:not([class*="h-4"]):not([class*="w-4"]):not([class*="h-5"]):not([class*="w-5"]) { transition: transform 1.6s var(--aa-ease), filter 1.2s var(--aa-ease); will-change: transform; } html body .group:hover img, html body .overflow-hidden:hover > img, html body figure:hover img { transform: scale(1.05); filter: saturate(1.06) brightness(1.03); } /* A cyan → pink wash that breathes over each crop, so the photographs sit in the same light as the hero instead of looking pasted onto it. */ @keyframes aa-wash { from { opacity: .35; } to { opacity: .9; } } html body .overflow-hidden.relative::after, html body figure.relative::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(125deg, rgba(103, 232, 249, .10), transparent 46%, rgba(244, 114, 182, .11)); animation: aa-wash 24s ease-in-out infinite alternate; } /* The gold hairlines and rules the design already uses, given the same travelling highlight the rest of the house has. */ @keyframes aa-shine { from { background-position: -160% 0; } to { background-position: 260% 0; } } html body [class*="bg-gradient-to-r"][class*="d9b45a"], html body hr { background-size: 240% 100% !important; animation: aa-shine 7s linear infinite; } @media (prefers-reduced-motion: reduce) { html body div.rounded-full[class*="blur-"], html body .overflow-hidden.relative::after, html body figure.relative::after, html body [class*="bg-gradient-to-r"][class*="d9b45a"], html body hr { animation: none; } html body img { transition: none; } } /* --- The house's line, on one line ---------------------------------------- The export sets it as an

, so it is tagged by spa.js (CSS cannot match text) and sized from the viewport rather than wrapped: at 1440px it sets around 34px and keeps shrinking on narrower screens. `nowrap` is lifted below 560px, where holding one line would make it unreadable. / html body h2.aa-oneline { font-size: clamp(13px, 2.5vw, 40px) !important; line-height: 1.35; letter-spacing: .05em; max-width: none; } @media (min-width: 561px) { html body h2.aa-oneline { white-space: nowrap; } } @media (max-width: 560px) { html body h2.aa-oneline { white-space: normal; font-size: clamp(16px, 5.2vw, 26px) !important; } } / --- The footer signature ------------------------------------------------- The horizontal lockup replaces the export's square-mark-plus-word. The two originals are hidden rather than removed: React still owns those nodes, and hiding is the change it is least likely to undo. / html body .aa-ftr-group > img:not(.aa-ftr-mark), html body .aa-ftr-group > span { display: none !important; } html body .aa-ftr-mark { display: block; width: 168px; height: auto; opacity: .85; transition: opacity .35s var(--aa-ease); } html body .aa-ftr-group:hover .aa-ftr-mark { opacity: 1; } @media (max-width: 640px) { html body .aa-ftr-mark { width: 136px; } } / --- Every brand mark is WHITE, everywhere -------------------------------- The export ships a black logo and paints it white with Tailwind's `invert`. Our assets are already white, so that utility turns them BLACK. Fixing the hero alone was not enough: the bundle renders imgmark-640 from THREE separate components, and spa.js only tags the hero one. The other two — the pre-loader mark that paints before anything else on a cold load, and the sign-in mark — kept `invert` and so kept coming up black. That is the black logo you see on the first page: it is the FIRST thing painted. So this matches on the asset itself rather than on a class, which is what makes it hold for a mark rendered by a component we do not control and did not know about. No `!important`: at (0,1,3) it already outranks the `.invert` utility at (0,1,0), and the hero's own rule below — same specificity, later in the file — still wins for its drop-shadow. / html body img[src="/brand/imgmark"], html body img[src="/brand/wordmark"] { filter: none; } / --- The hero mark -------------------------------------------------------- ALOFTAURA.IMG.png, re-cut white. It breathes: a slow scale and a warming halo, so the first thing on the page is alive without ever moving from where the design put it. / @keyframes aa-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 24px rgba(255, 246, 214, .12)); } 50% { transform: scale(1.028); filter: drop-shadow(0 0 46px rgba(255, 246, 214, .3)); } } html body img.aa-hero-mark { / Larger: the mark is the first and only thing above the fold, so it carries the whole hero. Roughly doubled, still capped so it never crowds the tagline beneath it on a short laptop screen. / width: clamp(150px, 19vw, 280px); height: auto; / WHITE, ALWAYS. The export shipped a black logo and painted it white with Tailwind's `invert`; our asset is already white, so that invert turns it BLACK. It was invisible only because the keyframes below also write `filter`, and an animation's value replaces the element's — so the mark was black for exactly as long as it took the first frame to paint, and stayed black for good for anyone browsing with reduced motion, where the animation never runs. Declaring the base filter here beats the utility class outright and leaves nothing depending on an animation to look right. / filter: drop-shadow(0 0 24px rgba(255, 246, 214, .12)); animation: aa-breathe 9s ease-in-out infinite; } / FASHION · LIFESTYLE · JEWELLERY — the line under the mark. Matched up in size and given more air between the letters, so it reads as a caption to the lockup rather than as small print. Found by its tracking utility, which is the export's own name for this treatment. / html body section:first-of-type p[class="tracking-luxe"] { font-size: clamp(11px, 1.15vw, 17px) !important; letter-spacing: .42em !important; color: rgba(245, 243, 238, .9); } /* --- The quote, raised ---------------------------------------------------- Asymmetric padding rather than a transform: the line sits above the optical centre of the runway image — where a caption reads as a statement rather than a label floating in the middle of a photograph — and the block still centres honestly at any height. / html body h2.aa-oneline { margin-bottom: clamp(28px, 6vh, 72px); } @media (prefers-reduced-motion: reduce) { html body img.aa-hero-mark { animation: none; } } / The header wordmark, given its true proportions. `h-4` with a square source produced a 16x16 speck; the horizontal lockup gets an explicit width so the aspect ratio cannot collapse again if the image is slow to arrive. / html body img.aa-hdr-word { height: 15px; width: auto; min-width: 108px; opacity: .9; filter: none !important; } / ========================================================================== THE FOOTER CONTACT FORM Two fields and a button. Same hairline-and-gold vocabulary as the rest of the house, and the same Intrepid uppercase — except the two inputs, where re-casing what someone is typing would change their own words back at them. ========================================================================== / .aa-contact { display: grid; gap: 12px; width: min(340px, 100%); } .aa-contacttitle { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: #d9b45a; margin: 0 0 2px; } .aa-contactfield { display: grid; gap: 6px; } .aa-contactfield > span { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 243, 238, .38); } .aa-contact input[type="email"], .aa-contact textarea { width: 100%; padding: 11px 13px; border: 1px solid rgba(245, 243, 238, .16); border-radius: 0; background: rgba(255, 255, 255, .03); color: #f5f3ee; font-family: inherit; font-size: 13px; letter-spacing: .02em; text-transform: none; transition: border-color .3s cubic-bezier(.22,1,.36,1), background-color .3s cubic-bezier(.22,1,.36,1); } .aa-contact input[type="email"]::placeholder, .aa-contact textarea::placeholder { color: rgba(245, 243, 238, .28); text-transform: none; } .aa-contact input[type="email"]:focus, .aa-contact textarea:focus { outline: none; border-color: #d9b45a; background: rgba(255, 255, 255, .05); } .aa-contact textarea { resize: vertical; min-height: 76px; line-height: 1.7; } .aa-contactsend { justify-self: start; padding: 12px 26px; border: 1px solid rgba(217, 180, 90, .4); background: transparent; color: #f4e3a1; font-family: inherit; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, color .3s, background-color .3s, opacity .3s; } .aa-contactsend:hover:not(:disabled) { border-color: #d9b45a; background: rgba(217, 180, 90, .09); color: #fff6d6; } .aa-contactsend:disabled { opacity: .5; cursor: not-allowed; } .aa-contactmsg { margin: 0; font-size: 10.5px; letter-spacing: .08em; line-height: 1.7; min-height: 1.2em; color: rgba(245,243,238,.55); } .aa-contactmsg.is-ok { color: #9fdcbc; } .aa-contactmsg.is-bad { color: #ffb99e; } / The honeypot. Removed from sight, from the tab order and from the accessibility tree — a person cannot reach it by any route, so anything in it was typed by a script. Never `display:none`: some bots skip those. / .aa-contacthp { / The classic honeypot trick is left:-9999px — but that is 10,000px of real scrollable area, and the moment the document flips to RTL (Arabic, Farsi, Hebrew, Kashmiri, Sindhi, Urdu) the browser counts it and the whole page scrolls sideways. The standard visually-hidden clip does the same job in one pixel. Deliberately NOT display:none: some bots skip those. / position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } / --- Gold frames on the photography --------------------------------------- An inset hairline inside each division crop, the same device the interior pages use. Scoped to the two image wrappers by their min-h- class so it never lands on the full-bleed runway band, where a frame would read as a border on the page rather than on a picture. / html body div.relative.overflow-hidden[class="min-h-"]::before { content: ""; position: absolute; inset: 16px; z-index: 2; pointer-events: none; border: 1px solid rgba(217, 180, 90, .3); transition: inset .8s var(--aa-ease), border-color .8s var(--aa-ease); } html body div.relative.overflow-hidden[class="min-h-"]:hover::before { inset: 22px; border-color: rgba(244, 227, 161, .55); } @media (max-width: 760px) { html body div.relative.overflow-hidden[class="min-h-"]::before { inset: 10px; } } /* --- The contact band ----------------------------------------------------- A full-width row above the footer line. Horizontal on a desktop: the two fields and the button sit on one line so the form reads as a single gesture rather than a stack of chores. It folds to one column below 820px, where three columns would make each of them unusable. / .aa-contact-band { width: 100%; padding: 0 0 clamp(26px, 4vh, 44px); margin-bottom: clamp(22px, 3vh, 36px); border-bottom: 1px solid rgba(245, 243, 238, .07); display: flex; justify-content: center; } / --- Contact form: horizontal --------------------------------------------- Overrides the stacked default. `align-items: end` lines the button up with the bottom of the fields rather than their labels, which is what makes a three-column form read as one row instead of three. / .aa-contact { width: 100%; max-width: 860px; grid-template-columns: minmax(190px, 1fr) minmax(240px, 1.7fr) auto; align-items: end; gap: 14px; } .aa-contacttitle { grid-column: 1 / -1; text-align: center; } .aa-contactmsg { grid-column: 1 / -1; text-align: center; } .aa-contact textarea { min-height: 0; height: 42px; resize: none; padding-top: 12px; transition: height .35s cubic-bezier(.22,1,.36,1), border-color .3s, background-color .3s; } / It grows only once someone is actually writing in it. / .aa-contact textarea:focus, .aa-contact textarea:not(:placeholder-shown) { height: 96px; resize: vertical; } .aa-contactsend { align-self: end; height: 42px; padding-block: 0; } @media (max-width: 820px) { .aa-contact { grid-template-columns: 1fr; align-items: stretch; } .aa-contacttitle, .aa-contactmsg { text-align: left; } .aa-contact textarea { height: 84px; resize: vertical; } .aa-contactsend { justify-self: start; } } / --- The stat pairs ------------------------------------------------------- "100% / Trend Setting" and "Seed / to stitch" (and their jewellery counterparts) sat a single 2rem gap apart, which read as one four-word phrase rather than two separate facts. Widened so each pair stands on its own, and the label given a little air under its figure for the same reason. Matched on the export's own class string for this row. / html body div[class="gap-8"][class="text-white/50"] { gap: clamp(34px, 5vw, 84px) !important; } html body div[class="gap-8"][class="text-white/50"] > div > span:last-child { display: block; margin-top: 6px; } @media (max-width: 520px) { html body div[class="gap-8"][class="text-white/50"] { gap: 30px !important; } } / --- The division slideshows ---------------------------------------------- Every frame is stacked in the same box and only opacity moves, so the browser can keep the whole cross-fade on the compositor — no layout, no paint, no jank on a phone. The first frame is the image the page shipped with, so with scripting off nothing changes. / .aa-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); will-change: opacity; } .aa-slide.is-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .aa-slide { transition: none; } } / --- Header: a little more ground ------------------------------------------ The export's header is transparent until it sticks, so over a pale frame of the slideshow the nav can wash out. A low-opacity veil with a blur sits under it at all times — enough to hold the type, not enough to read as a bar. / html body > div > header, html body header.fixed { background: rgba(8, 8, 11, .42) !important; backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); } / FASHION · LIFESTYLE · JEWELLERY, centred under the mark. / html body section:first-of-type p[class="tracking-luxe"] { text-align: center; width: 100%; margin-inline: auto; } /* --- The hero line, smaller ------------------------------------------------ The mark grew, so the sentence under it no longer has to carry the hero on its own. Brought down and given a tighter measure so it reads as a caption to the lockup rather than competing with it. / html body section:first-of-type p[class="max-w-lg"], html body section:first-of-type p[class="italic"] { font-size: clamp(11px, .82vw + 8px, 15px) !important; line-height: 1.85 !important; letter-spacing: .1em; max-width: 46ch !important; margin-left: auto; margin-right: auto; text-align: center; } / --- Header: the wordmark alone ------------------------------------------- The export sets a square mark AND a wordmark side by side. One lockup reads better at header size — and at 36px the square mark was the larger of the two, which put the emphasis on the symbol rather than the name. The mark is hidden rather than removed: React owns that node. / html body header a[href="/"] img:not(.aa-hdr-word), html body header a[href="#top"] img:not(.aa-hdr-word) { display: none !important; } html body img.aa-hdr-word { height: 19px; min-width: 132px; } / --- The photography: upright, and the whole figure -------------------------- `object-fit: cover` on a 4:3 box crops a standing model at the knees and the crown — the two places it is most obvious. The panels are given an upright ratio and the image is CONTAINED, so a full-length figure is shown whole rather than filled to the box. `object-position: top` keeps the head in frame on the narrow screens where the box is still shorter than the photo. / html body div.relative.overflow-hidden[class="min-h-"] { aspect-ratio: 3 / 4; min-height: 0 !important; background: #0b0b0f; /* A grid item stretches to the row's height by default. With an aspect-ratio on it, that height then DICTATES the width — so on a viewport just wide enough to keep two columns but narrow enough to make the prose column tall, the panel grew past its track and pushed the page into horizontal scroll (781px tall × 4/5 = 625px wide in a 450px column). Anchoring the item to the top of the row makes the width the input and the height the result, which is the way round the ratio is meant to work. / align-self: start; width: 100%; max-width: 100%; } html body div.relative.overflow-hidden[class="min-h-"] img, html body div.relative.overflow-hidden[class="min-h-"] .aa-slide { object-fit: contain; object-position: center; } @media (max-width: 900px) { html body div.relative.overflow-hidden[class="min-h-"] { aspect-ratio: 4 / 5; } } /* --------------------------------------------------------------------------- The nav, centred on the screen. The export lays the header out as mark / nav / actions in one justify-between row, so the nav sits at the midpoint of the leftover space — which is not the midpoint of the screen, because the actions side (ENG + AAC SIGNIN) is wider than the wordmark. Anchoring the nav to the header instead — fixed and inset-x-0, so full-bleed — puts it on the viewport's true centre, and matches what site.css now does on the interior pages. The row keeps space-between, so with the nav out of flow the mark stays hard left and the actions hard right, exactly where they were. ------------------------------------------------------------------------- / html body header > div > nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; } / --- The division label --------------------------------------------------- The export's three-link nav is retired: THE HOUSE no longer exists as a page, and asking a visitor to choose between the other two before they have seen either is the opposite of how this page reads — it is one continuous scroll. In its place the header simply names where you are. Nothing over the hero; APPARELS once the apparel division is on screen; JEWELLERY once the jewellery operations are. It occupies the same centred slot, so the header's geometry is unchanged and the mark and actions do not move when the word appears. ------------------------------------------------------------------------- / html body header nav[data-aa-oldnav] { display: none !important; } html body .aa-secnav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; display: flex; align-items: center; / Out of the way entirely when empty, so it can never eat a click meant for the header behind it. / opacity: 0; pointer-events: none; transition: opacity .5s var(--aa-ease); } html body .aa-secnav.is-on { opacity: 1; pointer-events: auto; } html body .aa-secnavlink { font-family: var(--aa-brand); font-size: 12px; letter-spacing: .35em; text-transform: uppercase; color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .35s var(--aa-ease); } html body .aa-secnavlink:hover { color: #f4e3a1; } / Devanagari and Arabic get the same stand-down as everything else. / html:not([lang="en"]) body .aa-secnavlink { letter-spacing: .06em !important; text-transform: none !important; } @media (prefers-reduced-motion: reduce) { html body .aa-secnav { transition: none; } } / ========================================================================== MOBILE — the same three moves as site.css, for the React surface. ========================================================================== / @media (max-width: 760px) { / The export hides the wordmark below its `sm` breakpoint, which left the phone header as ENG and AAC SIGNIN floating over empty space with nothing naming the site. The nav is already gone at this width, so it fits. / html body img.aa-hdr-word { display: block !important; height: 17px; min-width: 0; width: clamp(104px, 30vw, 132px); } html body header > div { gap: 10px; } / A floor under the smallest type. / html body .aa-contacttitle { font-size: 11px; letter-spacing: .24em; } html body .aa-contactfield > span { font-size: 11px; letter-spacing: .16em; } html body .aa-more { font-size: 11px; } } @media (pointer: coarse) { / 44px of finger under the 34px outlines — see the note in site.css. / html body .aa-right > .aa-lang .i18n-btn, html body .aa-right > a[href^="/aac"] { position: relative; } html body .aa-right > .aa-lang .i18n-btn::after, html body .aa-right > a[href^="/aac"]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } html body .aa-contact input[type="email"], html body .aa-contact textarea, html body .aa-contactsend { min-height: 46px; } html body .aa-contact textarea { min-height: 92px; } html body .aa-more { min-height: 44px; display: inline-flex; align-items: center; } } @media (pointer: coarse) { html body header a[href="#top"], html body header a[href="/"], html body footer a[href^="/aac"] { position: relative; } html body header a[href="#top"]::after, html body header a[href="/"]::after, html body footer a[href^="/aac"]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } } / ========================================================================== THE OTHER 45 LANGUAGES Two things only English got away with, found by rendering all 46 across every page at desktop and phone widths: 1 · German compounds. "Wertschöpfungskette" does not break, so the hero H2 burst its box on a 390px screen. Every language other than English is allowed to hyphenate and, failing that, to break inside a word — better a hyphen than a headline hanging off the screen. 2 · The aurora. Its blurred fields are absolutely positioned well outside the layout on purpose; in most languages the page is tall enough that they land over content, but Tamil's line height pushed the bottom field past the right edge and put the phone into horizontal scroll. The fixed container that holds them now clips, which costs the effect nothing — the fields are already larger than the screen. ========================================================================== */ html:not([lang="en"]) body :is(h1, h2, h3, h4, p, li, blockquote) { overflow-wrap: break-word; hyphens: auto; } html body div.pointer-events-none.fixed { overflow: clip; }