so focus actually lands in the content; suppress the focus ring on the programmatic target itself (the visible focus is the viewport jump), while keeping it for genuinely interactive elements. */ main[tabindex]:focus { outline: none; } .wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } section[id] { scroll-margin-top: clamp(76px, 9vw, 104px); } /* ───────────────────────────── DARK BAND — hero/CTA opt in; tokens flip locally so shared components adapt. ───────────────────────────── */ .band-dark { --bg: var(--band-bg); --bg-2: var(--band-bg-2); --ink: var(--band-ink); --ink-body: var(--band-ink-body); /* --ink-mute/--ink-dim were previously left unmapped here, so muted text (e.g. contact form labels) fell back to the light-surface values (#675E4B/#998E71) — ~3:1 on --band-bg, below WCAG AA. Remap to band-specific tones tuned for contrast instead. */ --ink-mute: var(--band-ink-mute); --ink-dim: var(--band-ink-dim); --line: var(--band-line); --gold-ink: var(--gold); background: var(--band-bg); color: var(--band-ink); } /* ───────────────────────────── MOTION UTILITIES ───────────────────────────── */ /* Entrance is an animation (not a transition) so it never fights an element's own hover transition. `backwards` holds the hidden state during the stagger delay; because we do NOT use `forwards`, the final transform reverts to none, so hover lifts on cards still work. */ [data-reveal] { opacity: 0; } [data-reveal].is-in { opacity: 1; animation: reveal-in var(--dur-slow) var(--ease-out) backwards; } @keyframes reveal-in { from { opacity: 0; transform: translateY(var(--reveal-rise)) scale(0.985); } to { opacity: 1; transform: none; } } .lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* ───────────────────────────── ANIMATED LOGO Nav/footer marks use a single fill path (hover: scale + gold sheen). The hero mark adds a stroke path (draw-on) + a clipped sheen sweep + idle float + pointer tilt. ───────────────────────────── */ .logo-mark { display: block; } .nav-mark .logo-mark, .footer-mark .logo-mark { transition: filter var(--dur-base) var(--ease-out); } .nav-mark:hover .logo-mark, .nav-mark:focus-visible .logo-mark { filter: drop-shadow(0 0 10px rgba(200,169,110,0.7)); } /* Right-side dock slot — the hero mark flies here on scroll (mirrors the static left mark). Once docked its outline fills with page-scroll progress and it leans slightly with scroll velocity (site.js). Invisible placeholder until the flight arrives; hidden under RM/no-JS. */ .nav-dock { display: block; width: 44px; height: 44px; flex-shrink: 0; opacity: 0; } .nav-dock .logo-mark { width: 100%; height: 100%; } /* liquid-gold fill: the group (liquid + lighter surface line) is clipped to the mark and slides up from below; site.js lerps it toward the scroll progress so the liquid visibly glides and settles after you stop scrolling — motion that catches the eye */ .nav-dock .dock-fill { transform: translateY(158px); will-change: transform; } /* Draw-on: the outline draws first, then the fill flows in only after the outline is mostly complete (so the "self-drawing" motion actually reads). */ .logo-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } /* outline draws, fill flows in, then the outline FADES OUT — leaving a flat gold mark with no bright rim (that rim was the lingering "shine"). */ .logo-mark.draw .logo-stroke { opacity: 1; animation: logo-draw 950ms var(--ease-out) forwards, logo-stroke-fade 450ms var(--ease-out) 1250ms forwards; } .logo-mark.draw .logo-fill { opacity: 0; animation: logo-fill 520ms var(--ease-out) 760ms forwards; } @keyframes logo-draw { to { stroke-dashoffset: 0; } } @keyframes logo-fill { to { opacity: 1; } } @keyframes logo-stroke-fade { to { opacity: 0; } } /* ───────────────────────────── NAV ───────────────────────────── */ nav.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: clamp(14px, 2vw, 20px) var(--pad-x); background: rgba(16, 13, 9, 0.55); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: padding var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } nav.site-nav.scrolled { padding-top: clamp(9px, 1.4vw, 13px); padding-bottom: clamp(9px, 1.4vw, 13px); background: rgba(14, 11, 7, 0.86); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25); } .nav-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .nav-mark svg { display: block; width: 30px; height: 30px; } .nav-mark .name { font-family: var(--brand); font-weight: 600; font-size: clamp(12px, 1.5vw, 14px); letter-spacing: 0.14em; color: var(--band-ink); } .nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .nav-link { position: relative; text-decoration: none; color: rgba(242, 236, 224, 0.72); padding: 4px 0; transition: color var(--dur-fast); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--gold); transition: width var(--dur-base) var(--ease-out); } .nav-link:hover, .nav-link:focus-visible { color: var(--gold); outline: none; } .nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.active::after { width: 100%; } .nav-link.active { color: var(--gold); } .nav-actions { display: flex; align-items: center; gap: 16px; } .lang { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 100px; overflow: hidden; background: rgba(255, 255, 255, 0.06); } .lang button { background: transparent; border: none; color: rgba(242, 236, 224, 0.6); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; min-height: 44px; transition: color var(--dur-fast), background var(--dur-fast); } .lang button.active { color: #14110c; background: var(--gold); } .lang button:not(.active):hover { color: var(--band-ink); } .lang button:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 2px; } .nav-burger { display: none; background: transparent; border: 0; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 0; } .nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--band-ink); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .mobile-nav { position: fixed; inset: 0; top: 64px; background: rgba(232, 220, 190, 0.98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 99; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } .mobile-nav.is-open { display: flex; } .mobile-nav a { font-family: var(--display); font-size: clamp(22px, 6vw, 30px); font-weight: 500; color: var(--ink); text-decoration: none; min-height: 44px; display: flex; align-items: center; transition: color var(--dur-fast); } .mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--gold-ink); } .mobile-lang { display: flex; gap: 12px; margin-top: 8px; } .mobile-lang button { background: transparent; border: 1px solid var(--line); color: var(--ink-mute); font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 18px; min-height: 44px; border-radius: 8px; transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); } .mobile-lang button.active { color: #14110c; background: var(--gold); border-color: var(--gold); } @media (max-width: 860px) { .nav-links { display: none; } .nav-burger { display: flex; } } /* very narrow phones: tighten the nav row so logo + lang + dock + burger always fit */ @media (max-width: 600px) { .nav-inner { gap: 10px; } .nav-actions { gap: 10px; } .lang button { padding: 6px 9px; } .nav-dock { width: 34px; height: 34px; } } @media (max-width: 380px) { .nav-mark .name { font-size: 11px; letter-spacing: 0.08em; } .lang button { padding: 6px 7px; } } /* ───────────────────────────── BUTTONS ───────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; /* action buttons are rectangular — pills are reserved for toggles/chips (lang switch, contact chips), so a filled CTA can never read as a "selected" state */ border-radius: var(--radius-sm); border: 1px solid transparent; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-fast); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--gold); color: #171208; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--gold-soft); box-shadow: var(--shadow-gold); transform: translateY(-2px); } .btn-primary:active { transform: scale(0.97); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); } .btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--gold); color: var(--gold-ink); } .btn:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 2px; } /* Hero CTAs reinstated (2026-07-21 launch-readiness pass) — the earlier "no hero CTA, navigation happens via nav links" decision left the hero with no action for the visitor and a dead .hero-cta i18n key pair; see .hero-cta below. */ /* ───────────────────────────── HERO — full-bleed dark band, two columns (copy + animated logo). ───────────────────────────── */ .hero { position: relative; padding: clamp(128px, 17vw, 190px) var(--pad-x) clamp(64px, 9vw, 104px); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: -30% -12% auto auto; width: 78%; height: 130%; background: radial-gradient(46% 46% at 62% 38%, rgba(200,169,110,0.34), transparent 70%); filter: blur(52px); z-index: 0; pointer-events: none; animation: aurora 13s var(--ease-in-out) infinite alternate; } @keyframes aurora { from { transform: translate(-8%, -4%) scale(1); } to { transform: translate(9%, 7%) scale(1.22); } } /* Ambient layer: a soft gold glow-orb that drifts slowly on its own across the hero (NOT cursor-following — that read as a cheap gimmick). A smooth blurred glow, in the same visual language as the aurora and the social-page orbs (the old version was a dotted spotlight that moved too fast and clashed with the site's smooth glows). Sits above the aurora glow (z-index 0) and below the content (.hero-inner, z-index 2). Transform-only, no repaint. */ .hero-field { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .hero-spot { position: absolute; left: 0; top: 0; width: 480px; height: 480px; margin: -240px 0 0 -240px; transform: translate3d(var(--x, 55vw), var(--y, 40vh), 0); will-change: transform; border-radius: 50%; background: radial-gradient(circle, rgba(200,169,110,0.16), rgba(200,169,110,0.05) 45%, transparent 72%); filter: blur(16px); } .hero-inner { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(32px, 6vw, 72px); } .hero-copy { min-width: 0; } .hero-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: clamp(18px, 2.4vw, 24px); } .hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 5.2vw, 58px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); max-width: 620px; margin-bottom: clamp(20px, 3vw, 28px); } .hero h1 em { font-style: normal; color: var(--gold); } .hero-sub { font-family: var(--body); font-weight: 400; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.68; color: var(--ink-body); max-width: 540px; margin-bottom: clamp(30px, 4vw, 42px); white-space: pre-line; /* preserves the \n\n paragraph break in hero.sub */ } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; } /* hero logo centerpiece — a slow 3D turn + gentle float, no shine. Nested elements so the pointer-tilt and the idle 3D turn each own their own transform and never fight. */ .hero-logo { perspective: 1100px; display: flex; align-items: center; justify-content: center; } /* travel wrapper — site.js flies it (translate+scale from the hero into the nav slot) as you scroll; origin top-left keeps the FLIP math simple */ .hero-logo .logo-fly { width: min(340px, 78%); transform-origin: 0 0; will-change: transform, opacity; transform-style: preserve-3d; } .hero-logo .logo-tilt { /* tilt + a physical lean toward the pointer — the lean is what makes the "following" unmistakable; rotation alone flattens to near-invisible on a flat mark */ transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; } .hero-logo .logo-spin { animation: logo-idle 6.5s var(--ease-in-out) infinite; transform-style: preserve-3d; filter: drop-shadow(0 22px 42px rgba(0,0,0,0.42)); } .hero-logo .logo-mark { width: 100%; height: auto; } /* Organic drift: floats up/down while gently swaying (rotateZ) and breathing (scale) — like a charm on a string. No spin, no shine. Pointer-tilt (on .logo-tilt) composes on top. */ @keyframes logo-idle { 0% { transform: translateY(0) rotate(-2deg) scale(1); } 25% { transform: translateY(-10px) rotate(1.5deg) scale(1.015); } 50% { transform: translateY(-16px) rotate(2.4deg) scale(1.03); } 75% { transform: translateY(-8px) rotate(-1deg) scale(1.015); } 100% { transform: translateY(0) rotate(-2deg) scale(1); } } /* first-paint stagger of the hero copy (driven by [data-loading] on ) */ .hero-eyebrow, .hero h1, .hero-sub, .hero-cta { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } body[data-loading] .hero-eyebrow, body[data-loading] .hero h1, body[data-loading] .hero-sub, body[data-loading] .hero-cta { opacity: 0; transform: translateY(16px); } .hero h1 { transition-delay: 90ms; } .hero-sub { transition-delay: 170ms; } .hero-cta { transition-delay: 230ms; } @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; text-align: center; gap: clamp(28px, 6vw, 44px); } .hero-copy { order: 2; } .hero-logo { order: 1; } .hero h1, .hero-sub { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } .hero-logo .logo-fly { width: min(200px, 52vw); } } /* ───────────────────────────── SECTIONS (general) ───────────────────────────── */ section { position: relative; z-index: 1; padding-top: var(--pad-y-sec); padding-bottom: var(--pad-y-sec); } /* ───────────────────────────── BRAND AURA — the quiet cream stretch between the dramatic hero and the content was reading as flat/empty. An oversized ghost of the D-mark, bled off the page edge, fills it with brand presence without shouting: outline-led (echoing the stroke-icon language, §8) over a soft gold bloom, tilted off-grid, drifting almost imperceptibly on its own — never a solid silhouette (that reads cheap). Lives only inside light sections (never a .band-dark). aria-hidden decoration; each host section is a z-index:1 stacking context, so aura z-index:-1 sits above the page washes/grain but BEHIND the cards (which keep opaque --bg-2 fills). No pointer events, no layout cost. Motion is on the inner