/* ========================================================================== Roejin — the front face. One viewport, no scroll. Panels carry everything else. ========================================================================== */ :root { /* Palette — shared with the rest of the consortium. */ --ink: #08080a; --ink-raised: #0e0e11; --ink-card: #141418; --ink-inset: #1b1b20; /* Sampled from the lockup: the mark is champagne bronze, not the yellower gold the divisions use. --gold-deep is held light enough to clear 4.5:1 on --ink, because it carries the small-caps eyebrows. */ --gold: #bfa06e; --gold-deep: #9c7c4e; --gold-light: #e2c795; --gold-glow: rgba(191, 160, 110, 0.16); --text: #e9e9ee; --text-dim: #a4a4af; --text-faint: #71717c; --line: rgba(191, 160, 110, 0.20); --line-soft: rgba(255, 255, 255, 0.07); --line-hard: rgba(255, 255, 255, 0.14); --ok: #6bbf7b; --danger: #d9705f; --font-display: 'Cormorant Garamond', Didot, 'Bodoni MT', Georgia, 'Times New Roman', serif; --font-sans: 'Jost', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --radius: 2px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --gutter: clamp(20px, 5vw, 64px); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } /* Only the front face is locked. The class sits on rather than so the lock is unambiguous — a body-only rule still lets the root scroll. Content pages omit it and scroll normally. */ html.front, html.front body { overflow: hidden; } html.front body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; } body { background: var(--ink); color: var(--text); font-family: var(--font-sans); font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; } ::selection { background: rgba(191, 160, 110, 0.32); color: var(--gold-light); } :focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; } .skip { position: fixed; top: -100px; left: var(--gutter); z-index: 100; padding: 10px 18px; background: var(--ink-card); border: 1px solid var(--line); color: var(--gold-light); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } .skip:focus { top: 16px; } /* -------------------------------------------------------------------------- Ground -------------------------------------------------------------------------- */ .ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* No texture, no noise. A clean graduated field, a single soft bloom behind the mark, and a restrained vignette to hold the edges. */ .ground { background: linear-gradient(180deg, #0c0c10 0%, #08080a 52%, #050507 100%); } .ground__bloom { position: absolute; inset: -18% -10% auto; height: 86%; background: radial-gradient( 52% 58% at 50% 32%, rgba(191, 160, 110, 0.13) 0%, rgba(191, 160, 110, 0.05) 42%, transparent 72% ); animation: bloom 22s var(--ease) infinite alternate; } @keyframes bloom { from { opacity: 0.85; } to { opacity: 1; } } .ground__vignette { position: absolute; inset: 0; background: radial-gradient(82% 82% at 50% 46%, transparent 48%, rgba(0, 0, 0, 0.5) 100%); } /* -------------------------------------------------------------------------- Rails -------------------------------------------------------------------------- */ .rail { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(14px, 2.2vh, 24px) var(--gutter); font-size: clamp(0.62rem, 1.1vw, 0.72rem); letter-spacing: 0.22em; text-transform: uppercase; } .rail--top { border-bottom: 1px solid var(--line-soft); } .rail--bottom { border-top: 1px solid var(--line-soft); color: var(--text-faint); } .seal { display: inline-flex; align-items: center; gap: 12px; color: var(--gold-light); letter-spacing: 0.34em; text-decoration: none; } /* The monogram is taller than it is wide, so it is sized by height and left to find its own width. */ .seal img { width: auto; height: clamp(22px, 3.4vh, 28px); filter: drop-shadow(0 0 10px var(--gold-glow)); } .rail__acts { display: flex; gap: clamp(14px, 2.4vw, 34px); } .ghost { padding: 4px 0; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--text-dim); font: inherit; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .ghost:hover, .ghost:focus-visible { color: var(--gold-light); border-bottom-color: var(--gold); } .rail__seat { color: var(--text-faint); } .rail__status { display: inline-flex; align-items: center; gap: 10px; } .rail__status i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04); } .rail__status[data-open-state="open"] i { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); animation: pulse 3.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } } .rail__status em { font-style: normal; color: rgba(113, 113, 124, 0.66); letter-spacing: 0.16em; } /* -------------------------------------------------------------------------- Core -------------------------------------------------------------------------- */ .core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 1.6vh, 20px); padding: clamp(12px, 3vh, 40px) var(--gutter); min-height: 0; /* lets the row shrink instead of forcing a scrollbar */ text-align: center; } .core__lockup { width: auto; height: clamp(150px, 34vh, 300px); object-fit: contain; filter: drop-shadow(0 14px 46px rgba(191, 160, 110, 0.16)); animation: rise 1.5s var(--ease) both; } .core__tagline { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 2.6vw, 1.7rem); font-weight: 400; font-variant: small-caps; letter-spacing: 0.28em; color: var(--gold-light); animation: rise 1.5s 0.12s var(--ease) both; } .core__rule { width: clamp(120px, 22vw, 260px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-deep) 22%, var(--gold) 50%, var(--gold-deep) 78%, transparent); animation: widen 1.7s 0.3s var(--ease) both; } /* One line, always. The size is tied to the viewport rather than capped by a measure, so the sentence never wraps — see SITE_LINE in config.php, which is written short enough to survive this. */ .core__line { max-width: 100%; margin: 0; font-size: clamp(0.72rem, 1.32vw, 0.95rem); line-height: 1.75; letter-spacing: 0.04em; white-space: nowrap; color: var(--text-dim); animation: rise 1.5s 0.22s var(--ease) both; } .core__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.6vw, 18px); margin-top: clamp(6px, 1.4vh, 16px); animation: rise 1.5s 0.34s var(--ease) both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes widen { from { opacity: 0; transform: scaleX(0.3); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px clamp(20px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--text); font-family: var(--font-sans); font-size: clamp(0.66rem, 1.1vw, 0.74rem); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease); } .btn--gold { border-color: var(--gold-deep); background: linear-gradient(135deg, var(--gold-deep), var(--gold) 52%, var(--gold-deep)); color: #14100a; font-weight: 500; } .btn--gold:hover:not(:disabled), .btn--gold:focus-visible { background: linear-gradient(135deg, var(--gold), var(--gold-light) 52%, var(--gold)); transform: translateY(-1px); } .btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--gold); color: var(--gold-light); transform: translateY(-1px); } .btn:disabled { opacity: 0.55; cursor: progress; transform: none; } /* -------------------------------------------------------------------------- Panels -------------------------------------------------------------------------- */ .panel { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 4vh, 48px) var(--gutter); } .panel[hidden] { display: none; } .panel__scrim { position: absolute; inset: 0; background: rgba(3, 3, 4, 0.82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: fade 0.4s var(--ease) both; } .panel__body { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(88dvh, 780px); background: linear-gradient(180deg, var(--ink-card), var(--ink-raised)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 40px 110px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(0, 0, 0, 0.5); animation: lift 0.46s var(--ease) both; } .panel__body--wide { width: min(760px, 100%); } /* The gold hairline across the top of every panel. */ .panel__body::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes lift { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } } .panel__head { flex: none; padding: clamp(22px, 3.4vh, 32px) clamp(24px, 4vw, 40px) clamp(16px, 2.2vh, 22px); border-bottom: 1px solid var(--line-soft); } .panel__eyebrow { margin: 0 0 6px; font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-deep); } .panel__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 400; letter-spacing: 0.06em; color: var(--gold-light); } .panel__x { position: absolute; top: clamp(14px, 2vh, 20px); right: clamp(16px, 2.4vw, 22px); width: 34px; height: 34px; background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--text-faint); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .panel__x:hover, .panel__x:focus-visible { color: var(--gold-light); border-color: var(--line); } .panel__inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3vh, 28px) clamp(24px, 4vw, 40px) clamp(24px, 3.4vh, 34px); scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; } .panel__inner::-webkit-scrollbar { width: 6px; } .panel__inner::-webkit-scrollbar-thumb { background: var(--gold-deep); } /* -------------------------------------------------------------------------- Directory -------------------------------------------------------------------------- */ .dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 34px); } .dir__label { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); } .dir__list { margin: 0; padding: 0; list-style: none; } .dir__entry { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 11px 10px 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.035); color: var(--text); text-decoration: none; transition: padding-left 0.35s var(--ease), color 0.3s var(--ease); } .dir__entry:hover, .dir__entry:focus-visible { padding-left: 10px; color: var(--gold-light); } .dir__name { font-family: var(--font-display); font-size: 1.18rem; letter-spacing: 0.03em; } .dir__note { grid-column: 1 / -1; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .dir__arrow { color: var(--gold-deep); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .dir__entry:hover .dir__arrow, .dir__entry:focus-visible .dir__arrow { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Desk console -------------------------------------------------------------------------- */ .desk__intro { margin: 0 0 22px; font-size: 0.86rem; line-height: 1.7; color: var(--text-dim); } .note { margin: 0 0 20px; padding: 14px 16px; border-left: 2px solid var(--gold); background: rgba(191, 160, 110, 0.06); font-size: 0.84rem; line-height: 1.6; } .note strong { display: block; margin-top: 6px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.7rem; color: var(--gold-light); } .note--ok { border-left-color: var(--ok); background: rgba(107, 191, 123, 0.07); } .note--fault { border-left-color: var(--danger); background: rgba(217, 112, 95, 0.07); } /* Honeypot. Off-screen rather than display:none — bots skip hidden fields. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .field { margin-bottom: 16px; } .field label { display: block; margin-bottom: 7px; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); } .field .req { color: var(--gold-deep); } .field input, .field select, .field textarea { width: 100%; padding: 11px 13px; background: var(--ink-inset); border: 1px solid var(--line-soft); border-radius: var(--radius); color: var(--text); font-family: var(--font-sans); font-size: 0.9rem; font-weight: 300; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .field textarea { resize: vertical; min-height: 108px; line-height: 1.6; } .field select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%), linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%); background-position: calc(100% - 17px) center, calc(100% - 12px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } .field select option { background: var(--ink-card); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-glow); } .field input::placeholder, .field textarea::placeholder { color: rgba(113, 113, 124, 0.7); } .field__hint { margin: 6px 0 0; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--text-faint); text-align: right; } .field__fault { margin: 6px 0 0; font-size: 0.74rem; color: var(--danger); } .field--fault input, .field--fault textarea, .field--fault select { border-color: var(--danger); } .desk__captcha { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; } .desk__captcha img { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-inset); } .desk__reissue { padding: 0; background: none; border: 0; color: var(--gold-deep); font: inherit; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; cursor: pointer; } .desk__reissue:hover, .desk__reissue:focus-visible { color: var(--gold-light); } .desk__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; } .desk__fine { margin: 0; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--text-faint); } /* -------------------------------------------------------------------------- Narrow and short viewports -------------------------------------------------------------------------- */ @media (max-width: 620px) { .row { grid-template-columns: 1fr; } .rail--bottom { justify-content: center; } .rail__seat { display: none; } .rail__status em { display: none; } /* Holding the line to one line costs type size on a phone. Letterspacing goes first, then the size tracks the viewport so it still fits at 320px. */ .core__line { font-size: min(0.6875rem, 2.75vw); letter-spacing: 0; } .core__acts { width: 100%; flex-direction: column; } .core__acts .btn { width: 100%; } .desk__foot { flex-direction: column-reverse; align-items: stretch; text-align: center; } } /* Laptops in landscape, and anything else with little vertical room. */ @media (max-height: 620px) { .core__lockup { height: clamp(110px, 26vh, 190px); } .core__line { display: none; } .rail__status em { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* -------------------------------------------------------------------------- Content pages These scroll, unlike the front face. They reuse its palette, type and rails so a visitor has gone one level in rather than somewhere else entirely. -------------------------------------------------------------------------- */ /* The front face pins its ground to the viewport; on a scrolling page that would slide away, so it is fixed and the vignette dropped. */ .ground--page .ground__bloom { animation: none; opacity: 0.85; } .page { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; padding: clamp(40px, 8vh, 90px) var(--gutter) clamp(60px, 10vh, 120px); } .page__eyebrow { margin: 0 0 10px; font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-deep); } .page__title { margin: 0 0 18px; font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 400; letter-spacing: 0.03em; line-height: 1.1; color: var(--gold-light); } .page__hero .core__rule { margin: 0 0 20px; animation: none; } .page__lede { max-width: 62ch; margin: 0; font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.8; color: var(--text-dim); } /* The number is the point of the page, so it is given room. */ .page__price { margin: clamp(34px, 6vh, 56px) 0; padding: clamp(22px, 3vw, 32px); background: linear-gradient(180deg, var(--ink-card), var(--ink-raised)); border: 1px solid var(--line); border-radius: var(--radius); } .page__price-figure { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 400; letter-spacing: 0.06em; color: var(--text-dim); } .page__price-figure strong { font-weight: 500; color: var(--gold-light); } .page__price-note { max-width: 60ch; margin: 0; font-size: 0.92rem; line-height: 1.75; color: var(--text-dim); } .page__block { margin: clamp(34px, 6vh, 56px) 0; } .page__block-title { margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); } .points { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px, 3vw, 30px); margin: 0; padding: 0; list-style: none; } .points__item { min-width: 0; } .points__name { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 1.16rem; font-weight: 500; letter-spacing: 0.02em; color: var(--gold-light); } .points__note { display: block; font-size: 0.9rem; line-height: 1.7; color: var(--text-dim); } .points__link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-light); text-decoration: none; transition: gap 0.3s var(--ease); } .points__link:hover, .points__link:focus-visible { gap: 16px; } .page__cta { margin-top: clamp(48px, 9vh, 90px); padding-top: clamp(34px, 6vh, 56px); border-top: 1px solid var(--line-soft); } .page__cta-title { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 400; color: var(--gold-light); } .page__cta .btn { margin-top: 24px; } /* The rails are flex on the front face and need no change, but on a scrolling page the top one should stay in view. */ .rail--top { position: sticky; top: 0; z-index: 10; background: rgba(8, 8, 10, 0.88); backdrop-filter: blur(8px); } html.front .rail--top { position: relative; background: none; backdrop-filter: none; }