/* Noor Studio Agency — Base Resets & Global Styles */
/* Fonts load via + in index.html — */
/* NOT via @import here, which is render-blocking and was also missing Instrument Serif. */
/* ── EDITORIAL DISPLAY FONT (fullscreen nav) ──────────────────────────
Canela (Colophon Foundry) and PP Editorial New (Pangram Pangram) are
both commercial, paid fonts — not on Google Fonts or any free CDN,
and this project has no licensed files for either. This block is
ready: drop the licensed .woff2 files into assets/fonts/, uncomment,
and the fullscreen nav (which already references this exact font
stack) picks them up immediately with no other changes needed. Until
then, the stack's final fallback — Cormorant Garamond, loaded from
Google Fonts in the — is what actually renders, which is
exactly the approved final fallback.
@font-face{
font-family:'Canela';
src:url('/assets/fonts/Canela-Light.woff2') format('woff2');
font-weight:300; font-display:swap;
}
@font-face{
font-family:'PP Editorial New';
src:url('/assets/fonts/PPEditorialNew-Regular.woff2') format('woff2');
font-weight:400; font-display:swap;
}
*/
*{margin:0;padding:0;box-sizing:border-box;}
*{position:relative;z-index:1;}
html,body{background:var(--bg);color:var(--ink);font-family:'Inter Tight','Inter Tight Fallback',sans-serif;-webkit-font-smoothing:antialiased;}
html,body{width:100%;max-width:100%;overflow-x:hidden;}
html{background:var(--bg);scroll-behavior:auto;}
body{overflow-x:hidden;cursor:var(--cursor-mode,auto);font-weight:400;line-height:1.5;}
.pc-body{padding:1.5rem;display:flex;flex-direction:column;gap:.8rem;flex:1;}
.cs-body{padding:2rem 2.2rem;}
/* height is animated by GSAP alone (js/animations.js, initFAQ). A CSS
transition here fought the tween frame for frame: GSAP writes an
inline height every frame and the transition tried to ease toward
each of those writes in turn. */
.faq-body{height:0;overflow:hidden;}
html.menu-lock,html.menu-lock body{overflow:hidden!important;height:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gold);color:#000;}
::-webkit-scrollbar{display:none;}
/* top is a fixed length, not -100%. A percentage here resolves against
the body's height, so the link — invisible, off-screen, doing nothing
— moved every time the page grew as images arrived, and the browser
counted each move as layout shift. It was the last 0.025 of CLS on
the homepage. 5rem clears its own height at any font size. */
.skip-link{position:absolute;top:-5rem;left:1rem;z-index:9999;padding:.6rem 1.2rem;background:var(--gold);color:#000;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;border-radius:0 0 8px 8px;transition:top .3s;text-decoration:none;font-weight:600;}
.skip-link:focus{top:0;}
/* Images never overflow their column, and never keep the height their
attributes declare once their width has been constrained.
height:auto is not optional next to max-width:100%: with width and
height attributes on the element and only max-width constrained, the
browser shrinks the width and holds the declared height, so the image
is squashed until some later rule corrects it. On the article pages
that correction arrived with the rest of the stylesheet, and measured
as a 0.078 layout shift. With height:auto the browser scales from the
attributes' own ratio on the first frame, and there is nothing left to
correct. This lives here, in the file both bundles share, because the
generated pages do not load components.css where the old rule sat. */
img{display:block;max-width:100%;height:auto;}
/* ═══════════════════════════════════════════════════════════════
FOOTER NAVIGATION
═══════════════════════════════════════════════════════════════
Defined once, here, because globals.css is the only source file in
both bundles — the homepage's site.min.css and the content pages'
pages.min.css. It used to be written twice, in components.css and
pages.css, which is how the two footers drifted apart.
The layout is a deliberate four-column grid rather than an
auto-fitting one. Auto-fit sounds accommodating and behaves badly:
with five columns to place it fitted four and orphaned the fifth on
its own row, leaving a quarter of the footer empty. The fifth column
is contact details, not sitemap links, so it now spans the full width
as a rail beneath the navigation — which balances the composition and
says something true about the content.
Everything is left-aligned. Centred navigation columns were the
single strongest "template" tell in the old footer: with ragged
column heights and no shared edge, the grid read as accidental. */
.pg-foot-cols{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(2.25rem,3.4vw,3rem) clamp(1.5rem,2.6vw,2.5rem);
width:100%;
max-width:1120px;
margin:0 auto clamp(1.5rem,2.5vw,2rem);
padding:clamp(2.75rem,4.5vw,3.75rem) max(5vw,1.5rem) 0;
text-align:left;
}
/* Grid children default to min-width:auto, which lets a long link push
a column wider than its track and unbalance the row. */
.pg-foot-cols > *{min-width:0;}
/* A hairline that fades at both ends, rather than a rule running wall
to wall. It separates the call to action above from the navigation
below without drawing a hard line across the page. */
.pg-foot-cols::before{
content:'';position:absolute;top:0;left:max(5vw,1.5rem);right:max(5vw,1.5rem);
height:1px;
background:linear-gradient(90deg,transparent,rgba(212,175,55,.26) 14%,rgba(212,175,55,.26) 86%,transparent);
}
/* ── Column headings ─────────────────────────────────────────────
Small, gold and quiet: the brief is that these are section labels,
not headlines. The rule beneath each one gives every column the same
shared edge, which is what makes four columns of different lengths
read as one grid. */
.pg-foot h2,
.pg-foot-cols h2{
font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
font-size:10px;
letter-spacing:.24em;
text-transform:uppercase;
color:var(--gold3);
font-weight:500;
margin:0 0 1.15rem;
padding-bottom:.85rem;
border-bottom:1px solid rgba(240,237,228,.09);
}
/* ── Links ───────────────────────────────────────────────────────
Larger and brighter than before. The old footer set them at .9rem,
weight 300, at 68% opacity — three separate reductions stacked on top
of each other, which is how a footer ends up looking cheap. */
.pg-foot ul,
.pg-foot-cols ul{list-style:none;display:grid;gap:.85rem;}
.pg-foot a,
.pg-foot-cols a{
display:inline-block;
font-size:.9375rem;
font-weight:400;
line-height:1.4;
color:rgba(240,237,228,.74);
/* transform and color only — both composited, neither reflows */
transition:color .38s cubic-bezier(.2,.8,.2,1),
transform .38s cubic-bezier(.2,.8,.2,1);
}
.pg-foot a:hover,
.pg-foot a:focus-visible,
.pg-foot-cols a:hover,
.pg-foot-cols a:focus-visible{
color:var(--gold3);
transform:translateX(4px);
}
/* ── Contact rail ────────────────────────────────────────────────
The fifth block. Full width, laid out horizontally, separated by its
own hairline: contact details are a different kind of thing from a
sitemap, and giving them their own band removes the orphaned column
that unbalanced the old grid. */
.pg-foot-contact{
grid-column:1 / -1;
padding-top:clamp(1.75rem,3vw,2.25rem);
border-top:1px solid rgba(240,237,228,.07);
}
.pg-foot-contact h2{
border-bottom:0;
padding-bottom:0;
margin-bottom:1.1rem;
}
.pg-foot-contact ul{
display:flex;
flex-wrap:wrap;
gap:.9rem clamp(1.5rem,3vw,2.75rem);
}
/* ── Responsive ──────────────────────────────────────────────────
Two columns before one. Dropping straight from four to one wastes a
phone's width and turns the footer into a very long list; two keeps
the pairs scannable down to the narrowest common handset. */
@media(max-width:1023.98px){
.pg-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:539.98px){
.pg-foot-cols{
grid-template-columns:1fr;
/* Each column carries a heading and its rule, so stacked they need
more air between them than they do side by side, or the rules
start to look like a striped list. */
gap:2.5rem;
}
/* Stacked, not wrapped. Five contact links of very different widths
wrap into a ragged two-and-a-bit lines on a narrow handset, which
looks like an accident rather than a row. */
.pg-foot-contact ul{
display:grid;
gap:.85rem;
}
}
/* A visitor who has asked for less motion still gets the colour
change; only the slide goes. */
@media(prefers-reduced-motion:reduce){
.pg-foot a,.pg-foot-cols a{transition:color .38s;}
.pg-foot a:hover,.pg-foot a:focus-visible,
.pg-foot-cols a:hover,.pg-foot-cols a:focus-visible{transform:none;}
}