/* ========================================================================== CEO LOUNGE — design system Dark, brass-gold, editorial. Shared across every page in this project. ========================================================================== */ :root { --ink: #0b0907; --ink-2: #16120d; --ink-3: #201a13; --gold: #c9973f; --gold-soft: rgba(201, 151, 63, 0.35); --paper: #f3efe6; --paper-dim: rgba(243, 239, 230, 0.72); --paper-faint: rgba(243, 239, 230, 0.45); --gray: #9d998f; --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Wide, to match the mockups, which run content to roughly 4.6% margins. Paragraphs are held to a readable measure individually (max-width in ch) rather than by squeezing the whole column. */ --container: 1400px; /* Usable viewport width, which the artwork is sized from. `scrollbar-gutter: stable` on above makes this consistent between pages that scroll and pages that don't — without it the landing measured ~15px wider than XLounge/XSearch and rendered the artwork ~3% larger. */ --vw: 100vw; } * , *::before, *::after { box-sizing: border-box; } /* Reserve the scrollbar gutter on every page, including the ones that don't scroll. Otherwise a non-scrolling page (the landing) has ~15px more usable width than a scrolling one (XLounge/XSearch), and the artwork — which is sized from that width — renders ~3% larger there. `overflow: hidden` still makes an element a scroll container, so the gutter is reserved there too. */ html { scroll-behavior: smooth; scrollbar-gutter: stable; } body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; display: block; } h1, h2, h3, h4 { margin: 0; font-weight: 400; } p { margin: 0; } button { font-family: inherit; } .container { width: 100%; /* without this, auto margins shrink-wrap it inside flex parents */ max-width: var(--container); margin: 0 auto; padding: 0 32px; } /* ---------- shared background — the door artwork ---------- These pages use the UNBRANDED artwork and render the CEO LOUNGE mark as a real element in the header (see .site-brand), which is what lets it be a link home. It also frees the layout: while the mark was baked into the image, the artwork box had to be fitted whole and every column pinned to it, which left ~118px of dead bar down each side, a 243px gap above the headline and an off-centre content column. The artwork can now simply cover the first screen, and content uses the ordinary centred container. */ /* On a phone, 100vh measures the screen as if the browser's address bar were already scrolled away, so a 100vh hero is taller than what you can actually see and its foot starts life hidden. svh is that same screen with the bar still showing — the honest number on first paint. The plain vh line stays ahead of it for browsers that don't know the unit. */ .site-bg { position: relative; min-height: 100vh; min-height: 100svh; background: #030202; overflow: hidden; /* Typographic unit, previously 1% of the artwork width. Now viewport-based and clamped, so hero type still scales but no longer depends on the artwork's fitted size. */ --u: clamp(11px, 1.05vw, 17px); /* Header's own height: its top padding plus the brand mark. The hero subtracts this so it fills the first screen exactly. */ --header-h: calc(34px + clamp(26px, 2.1vw, 34px)); /* Rendered width of the artwork. The background is `contain` inside a 100vw x 100vh box, so this is its fitted width — used to keep the enter screen's panels clear of the lit doorway. */ --art-w: min(100vw, calc(100vh * 1.499)); } .site-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; z-index: 0; background-image: url('../assets/images/door.jpg'); /* `contain` inside this 100vw x 100vh box reproduces the landing page's fit exactly — the landing sizes its artwork to min(vw, vh * 1.499) too — so the door renders at the same scale on every page. `cover` was scaling it up to fill the width, which read as zoomed in against home. */ background-size: contain; background-position: center; background-repeat: no-repeat; pointer-events: none; } /* Fades the foot of the artwork into the page black so the covered band does not end on a hard edge, and lifts contrast a little under the copy column. */ .site-bg::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; z-index: 0; pointer-events: none; /* Lighter than before: now the artwork is fitted rather than blown up, it reads closer to the landing page, which carries no scrim at all. Enough is kept to hold contrast under the live copy. */ background: linear-gradient(180deg, rgba(3,2,2,0) 66%, rgba(3,2,2,0.8) 93%, #030202 100%), linear-gradient(90deg, rgba(3,2,2,0.5) 0%, rgba(3,2,2,0.28) 45%, rgba(3,2,2,0.12) 72%, rgba(3,2,2,0) 100%); } /* Both hero lockups use .brand-lockup so X Lounge and X Search render at the same size; their source files carry near-identical proportions (the mark is 78.0% and 77.7% of each file's height), so one height suits both. */ /* ========================================================================== LANDING — full-bleed composed artwork. All headline copy lives inside the image; only the Enter and Contact links are real DOM. The stage below reproduces `object-fit: cover` geometry as a real box, so overlay links stay locked to the artwork at every viewport size instead of drifting as the image crops. ========================================================================== */ :root { --art-ar: 1.499; } /* 1535 / 1024 */ .landing-body { background: #030202; } /* One full screen of artwork, with the contact section scrolling in beneath. It used to be position:absolute with the page locked against scrolling; now it holds its own height so content can follow it. */ .stage { position: relative; width: 100%; height: 100vh; height: 100svh; /* Matches the artwork's own perimeter, which is pure black (measured max luminance 1-13 on all four edges), so the fit is seamless. */ background: #000; overflow: hidden; } .stage-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Fit the whole artwork: never crop, because every word of copy is baked into the image. A `cover` fill would slice the logo and the feature row off on a 16:9 display. */ width: min(var(--vw), calc(100vh * var(--art-ar))); height: min(100vh, calc(var(--vw) / var(--art-ar))); /* 1% of artwork width — overlay links size in em so they scale with the art. Floored at 9px so Enter/Contact stay legible when the artwork is small. */ font-size: max(9px, calc(min(var(--vw), 100vh * var(--art-ar)) / 100)); } .stage-art { width: 100%; height: 100%; display: block; object-fit: fill; /* box ratio equals the image ratio, so no distortion */ } /* --- overlay links, positioned in % of the artwork --- */ .art-topbar { position: absolute; top: 4.4%; left: 4%; right: 4%; height: 5.8%; display: flex; align-items: center; justify-content: flex-end; } /* The top-right link treatment is defined once, under "top-right nav link" below, and shared by .art-contact (stage pages) and .top-link (content pages) so Back reads identically everywhere. */ .art-enter { position: absolute; left: 6.8%; top: 70%; font-family: var(--font-sans); font-weight: 500; font-size: max(13px, 1.12em); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 1.2em; padding-bottom: 0.65em; border-bottom: 1px solid var(--gold-soft); transition: gap 0.2s ease, border-color 0.2s ease; } .art-enter svg { width: 1.25em; height: 1.25em; } .art-enter:hover { gap: 1.7em; border-color: var(--gold); } /* ---------- Enter: glow and glitter ---------- `isolation: isolate` gives the link its own stacking context, so the z-index:-1 layers below sit behind its text without dropping behind the artwork itself. Without it they would paint under the photograph. */ .art-enter { isolation: isolate; text-shadow: 0 0 14px rgba(201,151,63,0.35); transition: gap 0.2s ease, border-color 0.2s ease, text-shadow 0.3s ease; } .art-enter:hover { text-shadow: 0 0 18px rgba(224,181,106,0.6); } /* soft halo, breathing slowly */ .art-enter::before { content: ''; position: absolute; left: -1.7em; right: -1.7em; top: -1.15em; bottom: -0.7em; z-index: -1; border-radius: 999px; background: radial-gradient(ellipse at center, rgba(201,151,63,0.26) 0%, rgba(201,151,63,0.10) 45%, transparent 72%); filter: blur(5px); pointer-events: none; animation: enterHalo 4.6s ease-in-out infinite; } @keyframes enterHalo { 0%, 100% { opacity: 0.55; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.04); } } /* Canvas host for the specks (js/sparkle.js). Fixed background positions could only twinkle the same dots in place; each speck is now born, glows and dies somewhere new. */ .art-enter .spark { position: absolute; inset: -0.7em -1.05em; /* kept close to the link rather than spread wide */ z-index: -1; pointer-events: none; } .art-enter .spark canvas { width: 100%; height: 100%; display: block; } @media (prefers-reduced-motion: reduce) { .art-enter::before { animation: none; } } .art-topbar a:focus-visible, .art-enter:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; } /* ---------- header / logo lockup ---------- */ /* The CEO LOUNGE mark is baked into the background artwork, so the header carries only its right-hand links. The baked mark's vertical centre sits at 7.6% of the artwork's height — and the artwork scales with the viewport — so the header is padded off that same measure, keeping the links on the logo's optical line at every aspect ratio. */ /* The mark is a real element now, so the header no longer has to be pushed down to meet a logo painted into the background. Ordinary spacing, brand left and Back right, both inside the same centred container as the content below — so everything lines up on one column. */ .site-header { position: relative; z-index: 3; padding: 34px 0 0; font-size: var(--u); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 28px; } .site-brand { display: inline-block; } .site-brand img { height: clamp(26px, 2.1vw, 34px); width: auto; transition: opacity 0.2s ease; } .site-brand:hover img { opacity: 0.82; } .brand-ceo { display: inline-flex; align-items: baseline; gap: 12px; } .brand-ceo .mark { font-family: var(--font-sans); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.01em; color: var(--gray); } .brand-ceo .word { font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.3em; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 4px; } /* ---------- top-right nav link ---------- One treatment for every page: the label followed by a short rule, as in the brand mockups. Both the stage pages (.art-contact) and the content pages (.top-link) use it, and both size off the same artwork-derived unit, so Back sits at the same size and position throughout. */ .top-link, .art-contact { font-family: var(--font-sans); font-size: max(11px, 0.8em); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-dim); display: inline-flex; align-items: center; gap: 0.85em; transition: color 0.2s ease; /* The label itself is only ~18px tall — fine for a cursor, under half a fingertip. The padding buys a 44px touch target without moving the text: it is taken back out with an equal negative margin. */ padding: 13px 0; margin: -13px 0; } .top-link::after, .art-contact::after { content: ''; width: 2.1em; height: 1px; background: var(--paper-faint); transition: background 0.2s ease; } .top-link:hover, .art-contact:hover { color: var(--gold); } .top-link:hover::after, .art-contact:hover::after { background: var(--gold); } /* ---------- brand mark: bracket-X, tinted per sub-brand ---------- */ .brand-mark { display: inline-flex; align-items: center; gap: 12px; } .brand-mark .mark-glyph { width: 32px; height: 32px; flex-shrink: 0; } .brand-mark .mark-glyph svg { width: 100%; height: 100%; } .brand-mark .mark-word { font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.28em; text-transform: uppercase; } .brand-mark--gold { color: var(--gold); } .brand-mark--white { color: var(--paper); } /* ---------- hero ---------- Hero type is sized in `em` off --u (1% of the artwork width), the same unit the landing's baked headline was set at, so the headline matches across pages instead of running ~50% larger from its old 5vw rule. The max() floors keep everything readable once the artwork gets small. */ /* Fills the first screen exactly, so the following section starts at the fold rather than creeping up into it. Content is centred in that space, which also opens up the gap beneath the hero's call to action. */ /* --u is derived from the viewport's width alone, which is fine until a window is wide but short: the hero then asks for more height than there is and the copy runs past the fold. --hs takes the smaller of the two readings, so on a short window the whole hero scales down together and keeps its proportions, while on a normally-tall one it is exactly --u and nothing changes. The px floor stops it shrinking past readable. */ .hero { position: relative; --hs: max(11px, min(var(--u), 1.9vh)); display: flex; flex-direction: column; font-size: var(--hs); } /* The first screen belongs to the copy. Anything after it in the hero — the pillar row on X Search — follows below the fold rather than being squeezed into the same screen alongside it. */ .hero > .container:not(.pillar-row) { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; } /* Spacing scales with --hs too, or the gaps would stay put while the type around them shrank. The multipliers reproduce the original px values at full size. */ .hero .container { position: relative; z-index: 1; padding: calc(var(--hs) * 1.47) 32px calc(var(--hs) * 1.6); } .hero-eyebrow { font-family: var(--font-sans); font-size: max(0.7rem, 0.75em); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: calc(var(--hs) * 1.34); display: block; } /* max-width was 15ch — narrower than the headline sentences themselves, which run to 25 characters, so each one broke over two lines. Wide enough now for a sentence to sit on a single line; the .accent span below is display:block, so the second sentence still starts its own line. */ /* Each headline sentence must sit on a single line. The longest is 25 characters, and Playfair averages ~0.437em per character here (measured), so the second term is the largest size at which 25 characters still fit the content column — it only takes over once the column gets too narrow for the 3.8em display size. The .accent span is display:block, so the second sentence still starts its own line. */ .hero h1 { font-family: var(--font-serif); font-size: min(3.8em, calc((min(1400px, 100vw) - 68px) / 11.5)); line-height: 1.16; max-width: 30ch; color: var(--paper); margin-bottom: calc(var(--hs) * 1.74); } .hero h1 .accent { color: var(--gold); display: block; } .hero-rule { width: 46px; height: 1px; background: rgba(243,239,230,0.3); margin-bottom: 24px; } .hero .lede { max-width: 48ch; color: var(--paper-dim); font-size: max(1rem, 1.15em); margin-bottom: calc(var(--hs) * 2.67); } /* Where the hero copy runs to more than one paragraph, only the last keeps the full gap down to the buttons; the rest sit at reading distance from each other. */ .hero .lede:not(:last-of-type) { margin-bottom: calc(var(--hs) * 1.2); } .enter-link { font-family: var(--font-sans); font-weight: 500; font-size: max(0.75rem, 0.8em); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--gold-soft); transition: gap 0.2s ease, border-color 0.2s ease; } .enter-link:hover { gap: 22px; border-color: var(--gold); } .enter-link svg { width: 16px; height: 16px; } /* ========================================================================== LANDING, PHONE Every word on the landing artwork is baked into the picture, and the picture may not be cropped, so on a 375px screen it fits to a 375x250 band with the feature captions at around four pixels tall. Below the breakpoint the artwork gives way to the same copy set as text, over the door photograph the sub-brand pages already use, so the three pages read as one site. ========================================================================== */ .stage-copy { display: none; } @media (max-width: 760px) { /* Height comes from the copy now; the screen is only a floor. */ .stage { height: auto; min-height: 100vh; min-height: 100svh; display: flex; } .stage-inner { display: none; } .stage::before, .stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .stage::before { background: url('../assets/images/door.jpg') center / cover no-repeat; opacity: 0.5; } /* The doorway sits right of centre in the photograph, so the copy column needs its own ground to stay legible across it. */ .stage::after { background: linear-gradient(180deg, rgba(3,2,2,0.62) 0%, rgba(3,2,2,0.55) 40%, rgba(3,2,2,0.9) 82%, #030202 100%); } .stage-copy { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; padding: 26px 24px 44px; } .stage-copy-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; } .stage-copy-brand { height: 26px; width: auto; display: block; } .stage-copy h1 { font-family: var(--font-serif); font-size: clamp(31px, 8.7vw, 40px); line-height: 1.16; color: var(--paper); margin-bottom: 22px; } .stage-copy h1 .accent { color: var(--gold); display: block; } .stage-copy .hero-rule { margin-bottom: 20px; } .stage-copy-lede { max-width: 52ch; color: var(--paper-dim); font-size: 1rem; line-height: 1.6; margin-bottom: 12px; } .stage-copy-services { color: var(--paper-faint); font-size: 0.92rem; line-height: 1.6; margin-bottom: 34px; } .stage-copy .enter-link { align-self: flex-start; } .stage-feats { list-style: none; margin: 44px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(243,239,230,0.1); display: grid; gap: 24px; } .stage-feats li { display: flex; gap: 14px; align-items: flex-start; } .stage-feats .p-icon { color: var(--gold); flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; } .stage-feats h4 { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .stage-feats p { font-size: 0.85rem; line-height: 1.55; color: var(--paper-faint); } } /* A large phone held sideways, or a small tablet, has room for the features two abreast rather than a single tall column. */ @media (min-width: 560px) and (max-width: 760px) { .stage-copy { padding: 32px 32px 56px; } .stage-copy h1 { max-width: 22ch; } .stage-feats { grid-template-columns: 1fr 1fr; gap: 28px 32px; } } /* The underlined text links stand about 27px tall, which a cursor hits easily and a fingertip does not. On touch widths the space is added above the label only and taken back out again with a negative margin, so the rule drawn under the words stays exactly where it was. */ @media (max-width: 760px) { .enter-link, .link-arrow { padding-top: 15px; margin-top: -15px; } } /* ---------- four-up feature row (home) ---------- */ .feature-row { position: relative; z-index: 1; border-top: 1px solid rgba(243,239,230,0.1); padding: 34px 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; } .feature-row.container { padding-left: 32px; padding-right: 32px; } .feature { display: flex; gap: 14px; align-items: flex-start; } .feature .f-icon { color: var(--gold); flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; } .feature h4 { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .feature p { font-size: 0.85rem; color: var(--paper-faint); } @media (max-width: 900px) { .feature-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .feature-row { grid-template-columns: 1fr; } } /* ---------- XLounge: initiative logo row ---------- */ .initiative-row { position: relative; z-index: 1; border-top: 1px solid rgba(243,239,230,0.1); background: rgba(6,5,4,0.58); } .initiative-row .container { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 32px; } .initiative-item { display: flex; align-items: center; gap: 14px; padding: 30px 22px; border-left: 1px solid rgba(243,239,230,0.1); transition: background 0.15s ease; } .initiative-item:first-child { border-left: none; padding-left: 0; } .initiative-item:hover { background: rgba(201,151,63,0.06); } .initiative-item .init-icon { color: var(--gold); flex-shrink: 0; width: 26px; height: 26px; } .initiative-item .init-text h4 { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); margin-bottom: 4px; } .initiative-item .init-text span { display: block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-faint); } @media (max-width: 900px) { .initiative-row .container { grid-template-columns: repeat(2, 1fr); padding: 0 32px; } .initiative-item:nth-child(3) { border-left: none; } } @media (max-width: 560px) { .initiative-row .container { grid-template-columns: 1fr; } .initiative-item { border-left: none !important; border-top: 1px solid rgba(243,239,230,0.1); padding-left: 0; } .initiative-item:first-child { border-top: none; } } /* ---------- sections below the fold ---------- */ section.block { padding: 96px 0; position: relative; z-index: 1; } /* The pillar row already ends the hero with its own padding and a rule, so a full 96px on top of that opened an oversized gap before the next heading. */ .hero:has(.pillar-row) + .block { padding-top: 44px; } /* A hero with no pillar row ends on its call to action, and the hero already fills the screen, so a full 96px on top of that left an oversized gap before the next heading. Specificity keeps the :has rule above winning on X Search. */ .hero + .block { padding-top: 26px; } .block-head { max-width: 60ch; margin-bottom: 48px; } .eyebrow { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gold); } .block-head h2 { font-family: var(--font-serif); font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: var(--paper); margin-bottom: 16px; } .block-head p { color: var(--paper-dim); font-size: 1.02rem; max-width: 62ch; } .grid { display: grid; gap: 26px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: rgba(6,5,4,0.62); border: 1px solid rgba(243,239,230,0.1); border-radius: 2px; padding: 30px; } .card h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; color: var(--paper); margin-bottom: 12px; } .card p { color: var(--paper-dim); font-size: 0.92rem; } /* ---------- pillar row (XSearch approach) ---------- */ /* Selector carries .container as well because .pillar-row sits on a container element, and `.hero .container` (0,2,0) would otherwise win and impose the hero's own padding here instead of this row's. */ .hero .container.pillar-row { position: relative; z-index: 1; border-top: 1px solid rgba(243,239,230,0.1); background: rgba(6,5,4,0.52); padding: 32px 32px 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; /* The copy above now ends exactly at the fold, so this row opens the next screen; its own border and darker ground do the separating. */ margin-top: 0; } .pillar { display: flex; gap: 14px; align-items: flex-start; } .pillar .p-icon { color: var(--gold); flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; } .pillar h4 { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .pillar p { font-size: 0.85rem; color: var(--paper-faint); } /* Must match the base selector's specificity or the 4-column rule wins. */ @media (max-width: 900px) { .hero .container.pillar-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .hero .container.pillar-row { grid-template-columns: 1fr; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid transparent; border-radius: 2px; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-primary { background: var(--gold); color: var(--ink); } .btn-primary:hover { background: #d9a94f; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--paper); border-color: rgba(243,239,230,0.35); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); } .actions { display: flex; gap: 16px; flex-wrap: wrap; } /* ---------- footer ---------- */ .site-footer { position: relative; z-index: 1; padding: 32px 0; border-top: 1px solid rgba(243,239,230,0.08); background: rgba(6,5,4,0.62); } .site-footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 0.8rem; color: var(--paper-faint); } .site-footer a { color: var(--gold); } /* ========================================================================== CHOOSE SCREEN (enter.html) Built on the landing page's stage, so the artwork sits at exactly the same size and position on both — same fit, same centring, so the baked logo lands in the same place. The choices are laid straight onto the artwork's black left field with NO panel fill behind them: any translucent backing tints the photograph and discolours it. ========================================================================== */ /* The enter screen is one screen: the wrapper becomes a flex column so the main region takes exactly the height the header leaves, rather than guessing at it and leaving slack at the foot. */ .site-bg--enter { display: flex; flex-direction: column; } .enter-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 3vh; font-size: var(--u); } /* The doorway's light begins around 73% across the artwork, so the panels are confined to the dark field to its left rather than spanning the page. The artwork is centred, hence the leading offset. */ .site-bg--enter .enter-main > .container { max-width: none; padding: 0; width: calc(var(--art-w) * 0.645); margin-left: calc((100% - var(--art-w)) / 2 + var(--art-w) * 0.04); margin-right: 0; } .split { display: grid; grid-template-columns: 1fr 1fr; } /* Too narrow for two panels abreast — stack them, but stay inside the artwork's dark left field so they still clear the doorway. Selectors are prefixed to outrank the .split-choice rules defined further down. */ @media (max-width: 700px) { .site-bg--enter .enter-main > .container { width: calc(var(--art-w) * 0.66); } .split { grid-template-columns: 1fr; row-gap: 3em; } .site-bg--enter .split-choice + .split-choice { border-left: none; } .site-bg--enter .split-choice { padding: 0; } } /* Small screens: the artwork is a short band and the copy falls below it on plain black, so the doorway is no longer behind the panels — give them the full width back rather than squeezing into a narrow column. */ @media (max-width: 520px) { .site-bg--enter .enter-main > .container { width: auto; margin-left: 0; padding: 0 28px; } } .split-choice { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 5%; } .split-choice + .split-choice { border-left: 1px solid rgba(243,239,230,0.16); } /* The mark and the wordmark are separate images so each can be animated on its own. Both keep the source file's full width, so they stay in register when stacked without any horizontal nudging. */ .split-logo { display: block; width: 11.2em; transition: transform 0.25s ease; } .split-logo img { display: block; width: 100%; height: auto; } .split-choice:hover .split-logo { transform: translateY(-3px); } /* Two movements in one timeline per element, so there is no seam between them. First the mark settles down from oversized while the wordmark opens out from the centre; then, after a brief hold, the lockup rebalances — the mark eases down and the wordmark grows into it. Both elements finish together, so the rebalance reads as a single gesture. Origins are set so the pair keeps its spacing through the second movement: the mark scales about its foot and the wordmark about its head, leaving the gap between them untouched. Timing is per keyframe, hence `linear` at element level. transform-only, so it all stays on the compositor. */ .split-mark { transform-origin: 50% 100%; animation: markSettle 1.35s linear both; } .split-word { transform-origin: 50% 0%; /* The blank rows between mark and wordmark were dropped when the source was split, so the original spacing is restored here. Percentage margins resolve against the container's width, matching how the gap scaled in the artwork: 182/1600 and 164/1450, i.e. ~11.3% either way. */ margin-top: 11.35%; animation: wordOpen 1.35s linear both; } /* the second panel follows a beat later */ .split-choice--second .split-mark, .split-choice--second .split-word { animation-delay: 0.08s; } /* Both halves move from the first frame — the wordmark used to sit out the opening beat, which is what made the reveal feel like it started late. The pause between the two movements is kept short, just long enough to read as two gestures rather than one. */ @keyframes markSettle { 0% { transform: scale(1.28); opacity: 0; animation-timing-function: cubic-bezier(0.16, 0.84, 0.32, 1); } 33% { transform: scale(1); opacity: 1; animation-timing-function: linear; } 45% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 100% { transform: scale(0.78); opacity: 1; } } @keyframes wordOpen { 0% { transform: scale(0.42, 1); opacity: 0; animation-timing-function: cubic-bezier(0.16, 0.84, 0.32, 1); } 33% { transform: scale(1, 1); opacity: 1; animation-timing-function: linear; } 45% { transform: scale(1, 1); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 100% { transform: scale(1.26, 1.26); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .split-mark, .split-word { animation: none; } } .split-rule { display: block; width: 7em; height: 1px; background: var(--gold); margin: 1.9em 0 1.7em; opacity: 0.85; } .split-desc { display: block; font-size: max(13px, 1.3em); line-height: 1.5; color: var(--paper); max-width: 17em; } /* margin-top:auto pins both links to the bottom of the (equal-height) grid rows, so they stay on one line even when the two descriptions wrap to different line counts. */ .split-cta { display: inline-flex; align-items: center; gap: 1.1em; margin-top: auto; padding-top: 2.4em; padding-bottom: 0.7em; border-bottom: 1px solid rgba(201,151,63,0.55); font-size: max(11px, 0.88em); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); transition: gap 0.2s ease, border-color 0.2s ease; } .split-cta svg { width: 1.4em; height: 1.4em; } .split-choice:hover .split-cta { gap: 1.7em; border-color: var(--gold); } .split-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; } .split-tagline { margin-top: 4.5em; text-align: center; font-size: max(10px, 0.92em); font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); } @media (max-width: 620px) { .split-logo { width: 8.5em; } .split-rule { margin: 1.2em 0 1.1em; } .split-cta { padding-top: 1.5em; } } /* ========================================================================== X LOUNGE PAGE ========================================================================== */ /* Small brand lockup above the hero headline */ .brand-lockup { display: inline-block; margin-bottom: 1.2em; } .brand-lockup img { height: max(40px, 3.4em); width: auto; } .rule-gold { display: block; width: 46px; height: 1px; background: var(--gold); margin-bottom: 22px; } .section-head h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.6vw, 2.15rem); color: var(--paper); margin-bottom: 20px; font-weight: 400; } .section-head p { color: var(--paper-dim); max-width: 46ch; margin-bottom: 1em; } .section-head p:last-child { margin-bottom: 0; } /* ---------- objective: copy beside the radar mark ---------- */ .objective { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .radar { display: flex; justify-content: center; } .radar svg { width: min(300px, 100%); height: auto; color: var(--gold); } /* Animated sweep (js/radar.js). Square by definition — the script sets the pixel height to match the CSS width. */ .radar-canvas { width: min(300px, 100%); aspect-ratio: 1; display: block; } @media (max-width: 820px) { .objective { grid-template-columns: 1fr; gap: 36px; } .radar { order: -1; } } /* ---------- Inside X Lounge: four experience cards ---------- */ .exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 980px) { .exp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .exp-grid { grid-template-columns: 1fr; } } .exp-card { display: flex; flex-direction: column; background: rgba(6,5,4,0.62); border: 1px solid rgba(243,239,230,0.1); border-radius: 2px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .exp-card:hover { border-color: rgba(201,151,63,0.5); transform: translateY(-2px); } .exp-card .shot { aspect-ratio: 16 / 11; overflow: hidden; } .exp-card .shot img { width: 100%; height: 100%; object-fit: cover; } .exp-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .exp-card h3 { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .exp-card p { color: var(--paper-dim); font-size: 0.88rem; line-height: 1.55; margin-bottom: 20px; } .exp-card .watch { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(201,151,63,0.45); padding-bottom: 6px; align-self: flex-start; transition: gap 0.2s ease, border-color 0.2s ease; } .exp-card .watch svg { width: 14px; height: 14px; } .exp-card:hover .watch { gap: 16px; border-color: var(--gold); } /* ---------- format: image beside copy ---------- */ /* The image column stretches to the height of the copy beside it so their top and bottom edges line up; centring instead left it 79px short, inset ~39px at each end. The picture fills that box with `cover`. */ .format-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; } .format-split .shot { border: 1px solid rgba(243,239,230,0.1); overflow: hidden; min-height: 100%; } .format-split .shot img { width: 100%; height: 100%; /* `contain` rather than `cover`: the frame still takes its height from the copy beside it, but the whole picture stays visible instead of being cropped to fill. */ object-fit: contain; object-position: center; display: block; } @media (max-width: 820px) { .format-split { grid-template-columns: 1fr; gap: 32px; } /* stacked: no column to match, so let the picture keep its own proportions rather than forcing a ratio that would letterbox it */ .format-split .shot { min-height: 0; } .format-split .shot img { height: auto; } } /* ---------- contact panel ---------- */ .contact-panel { border: 1px solid rgba(201,151,63,0.35); border-radius: 2px; background: rgba(6,5,4,0.55); padding: 40px 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .contact-panel h2 { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--paper); margin-bottom: 10px; font-weight: 400; } .contact-panel .sub { color: var(--paper-dim); font-size: 0.92rem; margin-bottom: 22px; } .contact-list { display: flex; flex-direction: column; gap: 16px; } .contact-list li { display: flex; align-items: center; gap: 14px; color: var(--paper-dim); font-size: 0.92rem; } .contact-list svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; } .contact-list a { color: var(--paper-dim); } .contact-list a:hover { color: var(--gold); } @media (max-width: 820px) { .contact-panel { grid-template-columns: 1fr; padding: 32px 28px; } } .link-arrow { display: inline-flex; align-items: center; gap: 12px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(201,151,63,0.5); padding-bottom: 7px; transition: gap 0.2s ease, border-color 0.2s ease; } .link-arrow svg { width: 16px; height: 16px; } .link-arrow:hover { gap: 18px; border-color: var(--gold); } /* .page-footer removed — every page now uses .site-footer, so the footers read identically across the site. */ /* ========================================================================== HOME CONTACT — the two brands side by side, each with its own lead ========================================================================== */ .contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } @media (max-width: 760px) { .contact-split { grid-template-columns: 1fr; } } /* Mark with its tagline beneath it on the left, contact details alongside on the right. Grid placement rather than a wrapper element, so the markup stays flat. */ .contact-col { border: 1px solid rgba(201,151,63,0.28); border-radius: 2px; background: rgba(6,5,4,0.55); padding: 34px 36px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 18px; align-items: start; transition: border-color 0.2s ease; } .contact-col:hover { border-color: rgba(201,151,63,0.5); } /* The mark links to its brand page, and its hit area is stretched over the whole card — so the logo and the surrounding empty space both navigate. A wrapping anchor was not an option: the card already contains LinkedIn, email and phone links, and anchors cannot nest. */ .contact-col { position: relative; cursor: pointer; } .contact-col .brand-link { grid-column: 1; grid-row: 1; justify-self: start; display: inline-block; } .contact-col .brand-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .contact-col .brand-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; } /* Only the real links ride above the overlay, so the rest of the details column still navigates to the brand page. */ .contact-col .contact-list a { position: relative; z-index: 2; } .contact-col .brand { height: 84px; width: auto; /* fixed height + stretch would distort the mark */ display: block; transition: opacity 0.2s ease; } .contact-col:hover .brand { opacity: 0.88; } .contact-col .tag { grid-column: 1; grid-row: 2; color: var(--paper); font-size: 1rem; line-height: 1.5; max-width: 24ch; } /* spans both rows so it sits centred against the mark and its tagline */ .contact-col .contact-list { grid-column: 2; grid-row: 1 / span 2; align-self: center; } /* Below this the two columns squeeze the tagline into a hyphenated sliver and the details column can no longer hold an email address, so stack it. */ @media (max-width: 620px) { .contact-col { grid-template-columns: 1fr; row-gap: 20px; } /* the anchor is the grid item, not the image */ .contact-col .brand-link { grid-column: 1; grid-row: 1; } .contact-col .brand { height: 70px; } .contact-col .tag { grid-column: 1; grid-row: 2; } .contact-col .contact-list { grid-column: 1; grid-row: 3; align-self: start; } } /* ========================================================================== SCROLL CUE A faint arrow pinned to the viewport, so it holds its place as the page moves under it. Fades out once the foot of the page is reached, and never appears at all on a page short enough not to scroll (js/main.js). ========================================================================== */ .scroll-cue { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 5; pointer-events: none; color: var(--gold); opacity: 0.3; transition: opacity 0.5s ease; } .scroll-cue svg { display: block; width: 26px; height: 26px; filter: drop-shadow(0 0 7px rgba(201,151,63,0.5)); animation: scrollCue 2.6s ease-in-out infinite; } .scroll-cue.is-hidden { opacity: 0; } @keyframes scrollCue { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } } .text-center { text-align: center; }