/* ============================================================================ Leo Light Lighting — shared shell + design system Dials: VARIANCE 7 / MOTION 2 / DENSITY 3. Restrained luxury, image-forward. Governed by .claude/rules/design.md (our rules win over the taste-skill). ========================================================================== */ /* ---- Fonts (SELF-HOSTED STAND-INS — swap for the Brand Book fonts) -------- Bodoni Moda (didone display, fashion/jewelry register) + Manrope (grotesk body). Stand-ins pending the locked Brand Book. Variable woff2, latin. ----- */ @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/bodoni-moda.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/assets/fonts/manrope.woff2") format("woff2"); } /* Khmer (Milestone 2 / when a /km/ page ships): self-host Noto Sans Khmer or Kantumruy Pro and uncomment. Scope to :lang(km) / the /km/ . @font-face { font-family："Noto Sans Khmer"; src: url("/assets/fonts/noto-sans-khmer.woff2") format("woff2"); font-display: swap; } :lang(km) { font-family: "Noto Sans Khmer", var(--font-body); line-height: 1.9; } */ /* ---- Design tokens -------------------------------------------------------- The brand default is DARK & cinematic (crystal reads as light-from-darkness). Light mode is the deliberate alternate. Both stand-in, swappable. ---------- */ :root { /* Type (STAND-IN families) */ --font-display: "Bodoni Moda", "Times New Roman", Georgia, serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* Shape + motion */ --radius: 1px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 620ms; /* Rhythm */ --wrap: 1280px; --wrap-narrow: 720px; --gut: clamp(1.25rem, 4.5vw, 4rem); --section-y: clamp(5rem, 11vw, 10rem); --header-h: 78px; } /* Light alternate — crisp warm-white, cooler than beige, champagne accent */ :root, :root[data-theme="light"] { --ink: #17140f; --ink-soft: #4b453a; --paper: #f4f2ec; --paper-2: #eae6dc; --line: #d9d3c6; --g1: #eae6dc; --g2: #d9d3c6; --g3: #b3a992; --g4: #766c58; --g5: #47412f; --muted: #6c6353; --gold: #b1904f; /* muted antique champagne, not bright gold */ --gold-deep: #8f7238; color-scheme: light; } /* Dark (brand default) — deep warm espresso-black, luminous champagne */ :root[data-theme="dark"] { --ink: #f1ece0; --ink-soft: #c1b8a4; --paper: #0f0d09; /* deep warm black */ --paper-2: #171208; --line: #2b2418; --g1: #171208; --g2: #2b2418; --g3: #574c34; --g4: #8a7f66; --g5: #c1b8a4; --muted: #9d9380; --gold: #cdae74; /* warm champagne, glows on dark */ --gold-deep: #d8bd8a; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #f1ece0; --ink-soft: #c1b8a4; --paper: #0f0d09; --paper-2: #171208; --line: #2b2418; --g1: #171208; --g2: #2b2418; --g3: #574c34; --g4: #8a7f66; --g5: #c1b8a4; --muted: #9d9380; --gold: #cdae74; --gold-deep: #d8bd8a; color-scheme: dark; } } /* ---- Reset / base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; } h1 { font-size: clamp(2.9rem, 1.5rem + 6vw, 6.4rem); font-weight: 500; } h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem); } h3 { font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.9rem); font-weight: 500; } p { text-wrap: pretty; } ::selection { background: var(--gold); color: #17130d; } /* ---- Utilities ----------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .wrap--narrow { max-width: var(--wrap-narrow); } .section { padding-block: var(--section-y); } .eyebrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); display: inline-block; } .lede { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); line-height: 1.55; color: var(--ink-soft); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.95em 1.7em; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--paper); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn:hover { background: transparent; color: var(--ink); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } /* on-dark buttons always sit over a dark scrim/band, so they use fixed near-white/near-black, independent of the page theme. */ .btn--on-dark { border-color: #f6f2ea; background: #f6f2ea; color: #17130d; } .btn--on-dark:hover { background: transparent; color: #f6f2ea; } .btn--ghost.btn--on-dark { background: transparent; color: #f6f2ea; border-color: #f6f2ea; } .btn--ghost.btn--on-dark:hover { background: #f6f2ea; color: #17130d; } .btn svg { width: 1.05em; height: 1.05em; } .link-arrow { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .link-arrow:hover { border-color: var(--gold); color: var(--gold-deep); } .link-arrow svg { width: 0.9em; height: 0.9em; transition: transform var(--dur) var(--ease); } .link-arrow:hover svg { transform: translate(2px, -2px); } /* ---- Header -------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); border-bottom: 1px solid transparent; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: none; } .site-header__logo { display: inline-flex; align-items: center; } .site-header__logo img { height: 30px; width: auto; } /* Logo: theme-driven by default (dark logo on light UI, light logo on dark UI); the hero header overrides to the light logo over the dark scrim. */ .logo-dark { display: block; } .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: none; } :root[data-theme="dark"] .logo-light { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-dark { display: none; } :root:not([data-theme="light"]) .logo-light { display: block; } } .main-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.2rem); } .main-nav a { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-fg, var(--ink)); position: relative; padding-block: 0.4rem; white-space: nowrap; /* a nav label must never break across two lines */ transition: color var(--dur) var(--ease); } /* Tighten the nav before it can crowd the CTA (7 items at laptop widths). */ @media (max-width: 1200px) { .main-nav { gap: clamp(0.85rem, 1.5vw, 1.4rem); } .main-nav a { font-size: 0.74rem; letter-spacing: 0.06em; } } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--gold); transition: width var(--dur) var(--ease); } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } .main-nav a:hover { color: var(--nav-fg, var(--ink)); } .header-controls { display: flex; align-items: center; gap: 0.75rem; } .enquire-btn { border-color: var(--nav-fg, var(--ink)); color: var(--nav-fg, var(--ink)); background: transparent; padding: 0.7em 1.3em; } .enquire-btn:hover { background: var(--nav-fg, var(--ink)); color: var(--paper); } .site-header[data-over-hero="true"] .enquire-btn:hover { color: #17130d; } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--nav-fg, var(--ink)); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .icon-btn:hover { border-color: color-mix(in srgb, var(--nav-fg, var(--ink)) 30%, transparent); } .icon-btn svg { width: 20px; height: 20px; } /* Language switcher */ .lang-switch { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; } .lang-switch a { color: var(--nav-fg, var(--ink)); opacity: 0.55; transition: opacity var(--dur) var(--ease); } .lang-switch a[aria-current="true"] { opacity: 1; } .lang-switch a:hover { opacity: 1; } .lang-switch .sep { opacity: 0.35; } /* Header state: transparent over hero (light text) -> solid on scroll */ .site-header[data-over-hero="true"] { --nav-fg: #f6f2ea; } /* Guarantee nav contrast over any hero image, regardless of its bright areas */ .site-header[data-over-hero="true"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(15,12,7,0.55), rgba(15,12,7,0)); } .site-header[data-over-hero="true"] .logo-dark { display: none; } .site-header[data-over-hero="true"] .logo-light { display: block; } .site-header.is-scrolled { --nav-fg: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--line); } /* Mobile menu toggle hidden on desktop */ .nav-toggle { display: none; } /* ---- Mobile menu (JS-injected drawer) ------------------------------------ */ .mobile-menu { position: fixed; inset: 0; z-index: 120; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; padding: calc(var(--header-h) + 1rem) var(--gut) 2rem; transform: translateY(-100%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease); } .mobile-menu.is-open { transform: translateY(0); visibility: visible; } .mobile-menu__close { position: absolute; top: 17px; right: var(--gut); } .mobile-menu nav { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.5rem; } .mobile-menu nav a { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3rem); font-weight: 500; padding-block: 0.35rem; border-bottom: 1px solid var(--line); color: var(--ink); } .mobile-menu__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 2rem; gap: 1rem; flex-wrap: wrap; } body.no-scroll { overflow: hidden; } /* ---- Hero — cinematic "bring the room to light" ------------------------- Lit still is the base (LCP + no-JS + reduced-motion). The illumination video fades in and plays once on load (dim -> bloom), then holds lit. --- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #f6f2ea; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0c0905; } .hero__still, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__still { z-index: 1; } .hero__video { z-index: 2; opacity: 0; transition: opacity 1100ms var(--ease); } .js .hero__video.is-live { opacity: 1; } /* Legibility scrim — bottom + diagonal-left weighted so the headline stays >=AA over the bright window while the chandelier (upper-centre) stays lit */ .hero__media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to top, rgba(9,7,4,0.9) 0%, rgba(9,7,4,0.6) 34%, rgba(9,7,4,0.22) 58%, rgba(9,7,4,0) 80%), linear-gradient(105deg, rgba(9,7,4,0.72) 0%, rgba(9,7,4,0.32) 40%, rgba(9,7,4,0) 68%); } .hero .wrap { position: relative; padding-bottom: clamp(3rem, 8vh, 6rem); padding-top: calc(var(--header-h) + 2rem); } .hero .eyebrow { color: #e8dcc0; } .hero .eyebrow::before { background: var(--gold); } .hero h1 { color: #f8f4ec; max-width: none; margin-top: 1.1rem; font-size: clamp(2.2rem, 1rem + 4.6vw, 4.7rem); } .hero__sub { max-width: 46ch; margin-top: 1.5rem; font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); color: #e9e2d5; } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; } /* Reduced motion: no illumination playback; the lit still stays */ @media (prefers-reduced-motion: reduce) { .hero__video { display: none; } .hero__still, .hero__video { transition: none; } } /* ---- Editorial statement ------------------------------------------------- */ .statement p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 2.6vw, 3rem); line-height: 1.22; letter-spacing: -0.01em; max-width: 20ch; } .statement .meta { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem 3rem; } .statement .meta .meta-label { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .statement .meta p { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.55; max-width: 34ch; color: var(--ink-soft); } /* ---- Services (editorial list, not a card grid) -------------------------- */ .services { border-top: 1px solid var(--line); } .service-row { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: 1.5rem 2rem; padding-block: clamp(1.6rem, 3.5vw, 2.6rem); border-bottom: 1px solid var(--line); transition: padding-inline var(--dur) var(--ease); } .service-row__no { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold-deep); } .service-row__body h3 { margin-bottom: 0.5rem; } .service-row__body p { color: var(--muted); max-width: 52ch; } .service-row__go { color: var(--ink); opacity: 0.5; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .service-row:hover .service-row__go { opacity: 1; transform: translate(3px, -3px); } @media (hover: hover) { .service-row:hover { padding-inline: clamp(0.4rem, 1.5vw, 1.2rem); } } /* ---- Feature gallery (asymmetric) ---------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: end; } .gallery figure { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } @media (hover: hover) { .gallery figure:hover img { transform: scale(1.04); } } .gallery figcaption { margin-top: 0.9rem; font-size: 0.86rem; color: var(--muted); } .gallery figcaption strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink); letter-spacing: 0; } .g-tall { grid-column: span 5; aspect-ratio: 4 / 5; } .g-wide { grid-column: span 7; aspect-ratio: 3 / 2.4; } /* ---- Editorial rail label + immersive work mosaic (a-emotional / Bover) --- */ .rail-wrap { display: grid; grid-template-columns: minmax(0, auto) 1fr; gap: clamp(1.2rem, 3vw, 3.5rem); align-items: start; } .rail { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); color: var(--gold); letter-spacing: 0.01em; position: sticky; top: calc(var(--header-h) + 2.5rem); height: max-content; } .mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.5rem, 0.9vw, 0.9rem); } .mosaic figure { position: relative; overflow: hidden; margin: 0; background: var(--paper-2); border-radius: var(--radius); } .mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.5s var(--ease), filter var(--dur) var(--ease); } /* Hover "bloom": the fixture reads as switching on (a filter lift, never a glow shadow). */ @media (hover: hover) { .mosaic figure:hover img { transform: scale(1.045); filter: brightness(1.05) saturate(1.04); } } .mosaic figcaption { position: absolute; inset: auto 0 0 0; padding: 1.8rem 1.2rem 1rem; font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.03em; color: #f2ede1; background: linear-gradient(to top, rgba(9,7,4,0.74), rgba(9,7,4,0)); opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } @media (hover: hover) { .mosaic figure:hover figcaption { opacity: 1; transform: none; } } @media (hover: none) { .mosaic figcaption { opacity: 1; } } .m-quote { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.4rem, 2.5vw, 2.6rem); } .m-quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1rem + 1.3vw, 2.05rem); line-height: 1.2; letter-spacing: -0.01em; } .m-quote cite { margin-top: 1.3rem; font-family: var(--font-body); font-style: normal; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .m-wide { grid-column: span 12; aspect-ratio: 16 / 9; } .m-a { grid-column: span 5; aspect-ratio: 4 / 5; } .m-b { grid-column: span 7; aspect-ratio: 16 / 10; } .m-c { grid-column: span 4; aspect-ratio: 3 / 4; } .m-q { grid-column: span 4; } .m-d { grid-column: span 7; aspect-ratio: 16 / 9; } .m-e { grid-column: span 5; aspect-ratio: 4 / 5; } /* ---- Brands -------------------------------------------------------------- */ .brands { text-align: center; } .brands ul { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.4rem, 4vw, 3.5rem); } .brands li { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); font-weight: 500; color: var(--ink-soft); } /* Logo wall — official partner logos, monochromed for one calm treatment. Scoped as .brands .brand-wall so the grid beats the text-list `.brands ul` rule (0,1,1) that would otherwise collapse it to a single flex column. */ .brands .brand-wall { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2rem); align-items: center; justify-items: center; } @media (max-width: 560px) { .brand-wall { grid-template-columns: repeat(2, 1fr); } } .brand-wall li { display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(64px, 12vw, 104px); padding: 0.5rem clamp(0.5rem, 2vw, 1.5rem); } .brand-wall img { max-height: clamp(26px, 4.4vw, 40px); width: auto; max-width: 100%; object-fit: contain; /* Normalise mixed-colour partner logos to one ink; brightness(0) flattens any fill (incl. the near-white Preciosa wordmark) to solid, then opacity softens it for the calm luxury wall. */ filter: brightness(0); opacity: 0.55; transition: opacity var(--dur) var(--ease); } /* Stacked (mark-over-wordmark) lockups need more height to read at the same optical weight as the horizontal wordmarks. */ .brand-wall .bw-stack { max-height: clamp(48px, 8vw, 68px); } .brand-wall li:hover img { opacity: 0.9; } :root[data-theme="dark"] .brand-wall img { filter: brightness(0) invert(1); opacity: 0.7; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-wall img { filter: brightness(0) invert(1); opacity: 0.7; } } /* ---- Projects gallery (uniform square grid) ------------------------------ */ .pgallery { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(0.5rem, 1.4vw, 1rem); } .pgallery figure { position: relative; overflow: hidden; margin: 0; aspect-ratio: 1 / 1; background: var(--paper-2); } .pgallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur) var(--ease); } @media (hover: hover) { .pgallery figure:hover img { transform: scale(1.045); } } /* ---- Product spotlight: crystal-tip variants (two small packshots) -------- */ .starlight-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } .starlight-variants figure { margin: 0; } .starlight-variants img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); display: block; } .starlight-variants figcaption { margin-top: 0.7rem; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--muted); } .two-col figcaption { margin-top: 0.8rem; font-size: 0.8rem; color: var(--muted); } /* ---- Quote CTA band (a deliberate dark moment in BOTH themes) ------------- */ .cta-band { background: #17130d; color: #f6f2ea; text-align: center; } .cta-band h2 { color: #f8f4ec; max-width: 18ch; margin-inline: auto; } .cta-band p { color: rgba(246,242,234,0.78); max-width: 46ch; margin: 1.2rem auto 2.2rem; } /* ---- Footer -------------------------------------------------------------- */ .site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem 2rem; } .site-footer__brand img { height: 34px; width: auto; margin-bottom: 1.2rem; } .site-footer__brand p { color: var(--muted); max-width: 34ch; font-size: 0.95rem; } .footer-col h4 { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; } .footer-col a, .footer-col p { display: block; font-size: 0.95rem; color: var(--ink-soft); padding-block: 0.28rem; } .footer-col a { transition: color var(--dur) var(--ease); } .footer-col a:hover { color: var(--gold-deep); } .footer-social { display: flex; gap: 0.4rem; margin-top: 0.5rem; } .footer-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 999px; } .footer-social svg { width: 18px; height: 18px; } .site-footer__base { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); } /* ---- Reveal on scroll (JS-gated so no-JS users always see content) ------- */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto; } } /* ---- Staggered reveal: direct children cascade in one by one ------------- */ .js [data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: calc(var(--si, 0) * 75ms); } .js [data-stagger].is-in > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-stagger] > * { opacity: 1; transform: none; transition: none; } } /* ---- Illumination: portfolio imagery "warms up" as it enters ------------- Each figure starts a touch dim + cool, then settles to full warmth over ~1.2s as it scrolls into view, like a fixture coming on. JS adds .lumen (dim) then .is-lit (warm) per figure, so the effect staggers naturally down the grid. Applied to below-the-fold grids only, never the LCP hero/subhero images. Filter lives on the FIGURE so hover brightness on the IMG never collides. */ .js .mosaic figure.lumen, .js .gallery figure.lumen, .js .pgallery figure.lumen { filter: brightness(0.72) saturate(0.82) contrast(0.98); transition: filter 1200ms var(--ease); } .js .mosaic figure.lumen.is-lit, .js .gallery figure.lumen.is-lit, .js .pgallery figure.lumen.is-lit { filter: none; } @media (prefers-reduced-motion: reduce) { .js .mosaic figure.lumen, .js .gallery figure.lumen, .js .pgallery figure.lumen { filter: none; transition: none; } } /* ---- Cross-page fade (View Transitions API, progressive enhancement) ------ Same-origin navigations dissolve instead of hard-cutting, so moving through the site reads like a gallery walkthrough. Browsers without support just navigate normally. Disabled under reduced-motion. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 460ms; animation-timing-function: var(--ease); } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* ---- Simple content page (legal / narrow) -------------------------------- */ .page-head { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); } .page-head .eyebrow { margin-bottom: 1rem; } .prose > * + * { margin-top: 1.1rem; } .prose h2 { margin-top: 2.4rem; } .prose h3 { margin-top: 1.8rem; } .prose a { color: var(--gold-deep); border-bottom: 1px solid var(--line); } /* Inner-page hero (shorter) */ .subhero { position: relative; min-height: 62svh; display: flex; align-items: flex-end; color: #f6f2ea; } .subhero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .subhero__media img { width: 100%; height: 100%; object-fit: cover; } .subhero__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 25%, rgba(12,9,5,0) 0%, rgba(12,9,5,0.3) 55%, rgba(9,7,4,0.9) 100%), linear-gradient(to top, rgba(9,7,4,0.9), rgba(9,7,4,0.35) 60%, rgba(9,7,4,0.5)); } .subhero .wrap { padding-bottom: clamp(2.5rem, 6vh, 4rem); padding-top: calc(var(--header-h) + 2rem); } .subhero h1 { color: #f8f4ec; max-width: 18ch; margin-top: 0.8rem; } /* Process steps */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem 2.5rem; border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); } .step__no { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-deep); } .step h3 { font-size: 1.35rem; margin: 0.5rem 0; } .step p { color: var(--muted); font-size: 0.96rem; } .two-col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .two-col img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; } /* ---- "What we make" — editorial two-column list (not feature cards) ------- */ .make-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4rem); } @media (max-width: 640px) { .make-list { grid-template-columns: 1fr; } } .make-list li { padding: 1.5rem 0; border-top: 1px solid var(--line); } .make-list h3 { font-size: 1.3rem; } .make-list p { color: var(--muted); font-size: 0.96rem; margin-top: 0.5rem; max-width: 42ch; } /* ---- Proof strip (3 project images linking to /projects/) ----------------- */ .proof-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.5rem, 1.4vw, 1rem); } @media (max-width: 640px) { .proof-strip { grid-template-columns: 1fr 1fr; } } .proof-strip li { overflow: hidden; } .proof-strip img { aspect-ratio: 4 / 5; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur) var(--ease); } @media (hover: hover) { .proof-strip a:hover img { transform: scale(1.045); } } /* ---- FAQ (native details/summary, editorial dividers) -------------------- */ .faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.2rem 0; font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-body); font-weight: 400; font-size: 1.4rem; color: var(--gold); flex: none; transition: transform var(--dur) var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { color: var(--muted); padding: 0 0 1.4rem; max-width: 62ch; } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 900px) { /* Below this the 7-item nav would crowd the CTA, so it moves into the drawer. */ .main-nav, .header-controls .lang-switch, .enquire-btn { display: none; } .nav-toggle { display: inline-grid; } .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } .two-col { grid-template-columns: 1fr; } .two-col img { max-width: 460px; } .rail-wrap { grid-template-columns: 1fr; } .rail { writing-mode: horizontal-tb; transform: none; position: static; margin-bottom: 1.4rem; color: var(--gold); } } @media (max-width: 640px) { :root { --header-h: 62px; } .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { justify-content: center; } .service-row { grid-template-columns: 2.5rem 1fr; } .service-row__go { display: none; } .gallery { grid-template-columns: 1fr; } .g-tall, .g-wide { grid-column: 1 / -1; aspect-ratio: 4 / 3; } .mosaic { grid-template-columns: 1fr; } .m-a, .m-b, .m-c, .m-d, .m-e { grid-column: 1 / -1; aspect-ratio: 4 / 3; } .m-q { grid-column: 1 / -1; } .site-footer__grid { grid-template-columns: 1fr; } .statement p { max-width: none; } }