/* ═══════════════════════════════════════════════════════════ THE CATTERY oxblood · gold leaf · candlelight · absinthe ═══════════════════════════════════════════════════════════ */ :root{ --void: #0A0806; --soot: #100C09; --umber: #1B140E; --oxblood: #2E0F16; --oxblood-hi:#4A1520; --gold: #C8A24A; --gold-hi: #EFDDA6; --gold-lo: #7C5F22; --gold-line: rgba(200,162,74,.30); /* text — deliberately brighter than a "moody" palette would suggest. On near-black, anything under ~0.75 alpha starts costing legibility. */ --ivory: #F3EDE2; --parchment: rgba(243,237,226,.82); --faint: rgba(243,237,226,.60); --ghost: rgba(243,237,226,.38); --absinthe: #A9D04A; --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --f-body: 'Inter', system-ui, -apple-system, sans-serif; --wrap: 1180px; --ease: cubic-bezier(.22,1,.36,1); --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='%23C8A24A' stroke='%230A0806' stroke-width='1'%3E%3Cellipse cx='15' cy='20' rx='6.6' ry='5.3'/%3E%3Cellipse cx='7.8' cy='12.2' rx='2.7' ry='3.5'/%3E%3Cellipse cx='12.7' cy='8.6' rx='2.7' ry='3.7'/%3E%3Cellipse cx='18' cy='8.8' rx='2.7' ry='3.7'/%3E%3Cellipse cx='22.6' cy='12.6' rx='2.6' ry='3.3'/%3E%3C/g%3E%3C/svg%3E"); --paw-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 30 30'%3E%3Cg fill='%23EFDDA6' stroke='%230A0806' stroke-width='1'%3E%3Cellipse cx='15' cy='20' rx='6.6' ry='5.3'/%3E%3Cellipse cx='7.8' cy='12.2' rx='2.7' ry='3.5'/%3E%3Cellipse cx='12.7' cy='8.6' rx='2.7' ry='3.7'/%3E%3Cellipse cx='18' cy='8.8' rx='2.7' ry='3.7'/%3E%3Cellipse cx='22.6' cy='12.6' rx='2.6' ry='3.3'/%3E%3C/g%3E%3C/svg%3E"); } *,*::before,*::after{ box-sizing:border-box; } [hidden]{ display:none !important; } /* ─────── launch phase ─────── Set on by app.js. Before launch nothing is buyable, so the pump.fun calls to action are replaced rather than left as dead ends. Default to the pre state so the honest copy shows even if the script has not run yet. */ .phase-live{ display:none !important; } [data-phase="live"] .phase-live{ display:revert !important; } [data-phase="live"] .btn.phase-live{ display:inline-flex !important; } [data-phase="live"] .phase-pre{ display:none !important; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--void); color:var(--ivory); font-family:var(--f-body); font-size:17px; font-weight:400; line-height:1.72; letter-spacing:.001em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.is-locked{ overflow:hidden; } /* the paw */ body,button,a,summary{ cursor:var(--paw) 8 8, auto; } a:hover,button:hover,.frame:hover,[data-copy]:hover{ cursor:var(--paw-hi) 9 9, pointer; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; } code{ font-family:var(--f-body); } ::selection{ background:var(--gold); color:var(--void); } :focus-visible{ outline:1px solid var(--gold-hi); outline-offset:4px; } /* ─────── primitives ─────── */ .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; position:relative; } .wrap--tight{ max-width:820px; } .eyebrow{ font-size:11.5px; font-weight:500; text-transform:uppercase; letter-spacing:.26em; color:var(--gold); margin:0; } .rule{ display:flex; align-items:center; justify-content:center; gap:12px; margin:26px 0; } .rule i{ display:block; height:1px; width:min(300px,44vw); background:linear-gradient(90deg,transparent,var(--gold-line) 22%,var(--gold) 50%,var(--gold-line) 78%,transparent); transform:scaleX(0); transform-origin:center; transition:transform 1.2s var(--ease); } .rule.is-in i, .reveal.is-in .rule i, .is-in > .rule i{ transform:scaleX(1); } .rule--sm i{ width:min(150px,30vw); } .rule::before,.rule::after{ content:""; width:4px; height:4px; transform:rotate(45deg); background:var(--gold); opacity:.8; } .h2{ font-family:var(--f-display); font-weight:500; font-size:clamp(34px,5.4vw,58px); line-height:1.08; letter-spacing:-.005em; margin:0; } .h2 em{ font-style:italic; } .head{ margin-bottom:62px; } .head--center{ text-align:center; } .head--center .rule{ justify-content:center; } .head__num{ display:block; font-family:var(--f-display); font-style:italic; font-size:16px; color:var(--gold); letter-spacing:.16em; margin-bottom:16px; } .head__lead{ max-width:600px; margin:6px auto 0; color:var(--parchment); font-size:17px; } .head:not(.head--center) .head__lead{ margin-left:0; } .head:not(.head--center) .rule{ justify-content:flex-start; } .section{ position:relative; padding:104px 0; } @media(min-width:768px){ .section{ padding:150px 0; } } /* ─────── buttons ─────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:11px; padding:15px 30px; font-family:var(--f-body); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; border:1px solid var(--gold-line); background:transparent; color:var(--ivory); transition:background .45s var(--ease), border-color .45s, color .45s, transform .45s var(--ease); white-space:nowrap; } .btn--gold{ border-color:var(--gold); color:var(--gold-hi); background:linear-gradient(180deg, rgba(200,162,74,.14), rgba(200,162,74,.05)); } .btn--gold:hover{ background:var(--gold); color:var(--void); border-color:var(--gold-hi); } .btn--outline:hover{ border-color:var(--gold); color:var(--gold-hi); } .btn--quiet{ border-color:transparent; color:var(--faint); padding-left:18px; padding-right:18px; } .btn--quiet:hover{ color:var(--gold-hi); border-color:var(--gold-line); } /* Visible but inert until there is a mint to send anyone to. Script also removes the href, so this is presentation only. */ .btn.is-locked{ opacity:.38; filter:saturate(.55); pointer-events:none; box-shadow:none; } .btn--sm{ padding:10px 18px; font-size:11.5px; } .btn--lg{ padding:18px 38px; font-size:13px; } .btn--plate{ padding:20px 46px; font-size:13.5px; letter-spacing:.2em; } .btn__coin{ width:22px; height:22px; } /* ═══════════ THE DOOR ═══════════ */ .door{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:var(--void); overflow:hidden; } .door.is-open{ pointer-events:none; } /* the two panels already cover the viewport, so once they start travelling the root must stop painting or it hides the gallery behind a black sheet until it is removed */ .door.is-open{ background:transparent; } .door.is-gone{ display:none; } .door__panel{ position:absolute; top:0; bottom:0; width:50.5%; background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 40%, rgba(0,0,0,.5)), radial-gradient(120% 90% at 50% 40%, var(--oxblood-hi), var(--oxblood) 46%, #16070B 100%); transition:transform 1.6s cubic-bezier(.7,0,.2,1); will-change:transform; } .door__panel::after{ content:""; position:absolute; inset:0; opacity:.5; background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 2px, transparent 2px 9px); } .door__panel--l{ left:0; border-right:1px solid rgba(200,162,74,.28); } .door__panel--r{ right:0; border-left:1px solid rgba(200,162,74,.28); } .door.is-open .door__panel--l{ transform:translateX(-101%); } .door.is-open .door__panel--r{ transform:translateX(101%); } .door__center{ position:relative; z-index:2; text-align:center; padding:0 24px; transition:opacity .7s ease, transform .9s var(--ease); } .door.is-open .door__center{ opacity:0; transform:scale(.94); } .door__crest{ display:block; margin:0 auto 26px; width:clamp(112px,18vmin,156px); height:clamp(112px,18vmin,156px); object-fit:contain; animation:candleFlicker 6s ease-in-out infinite; } .door__eyebrow{ margin:0 0 10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.34em; color:var(--gold); } .door__name{ margin:0; font-family:var(--f-display); font-weight:500; font-size:clamp(32px,6.4vw,60px); letter-spacing:.13em; color:var(--ivory); } .door__note{ margin:0; color:var(--faint); font-size:13.5px; letter-spacing:.06em; animation:breathe 2.6s ease-in-out infinite; } .door__skip{ position:absolute; right:22px; bottom:20px; z-index:3; font-size:10.5px; text-transform:uppercase; letter-spacing:.22em; color:var(--ghost); transition:color .4s; } .door__skip:hover{ color:var(--gold); } /* ═══════════ APP ═══════════ */ /* The gallery is fully painted behind the doors from the start, so parting them reveals the room itself rather than fading one in. It also means the site still shows if the door script never runs. */ .app{ opacity:1; } .candle{ position:fixed; top:-320px; left:50%; transform:translateX(-50%); width:min(100vw,1100px); height:700px; background:radial-gradient(50% 50% at 50% 50%, rgba(200,162,74,.14) 0%, rgba(120,60,30,.05) 45%, transparent 72%); pointer-events:none; z-index:0; animation:candleFlicker 7s ease-in-out infinite; } /* ─────── nav ─────── */ .nav{ position:fixed; top:0; left:0; right:0; z-index:60; transition:background .6s, backdrop-filter .6s, border-color .6s; border-bottom:1px solid transparent; } .nav.is-stuck{ background:rgba(10,8,6,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--gold-line); } .nav__inner{ max-width:var(--wrap); margin:0 auto; padding:0 24px; height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand{ display:flex; align-items:center; gap:12px; } .brand__crest{ width:32px; height:32px; object-fit:contain; } .brand__name{ font-family:var(--f-display); font-weight:500; font-size:16px; letter-spacing:.18em; color:var(--ivory); white-space:nowrap; } /* at phone widths the crest + wordmark + sound + button + burger do not fit; the hero already carries a large Acquire button */ @media(max-width:640px){ .nav__right .btn{ display:none; } .brand__name{ font-size:14px; letter-spacing:.14em; } .brand__crest{ width:28px; height:28px; } .nav__inner{ height:64px; gap:12px; } } .nav__links{ display:none; gap:32px; } @media(min-width:1040px){ .nav__links{ display:flex; } } .nav__links a{ position:relative; font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); transition:color .45s; } .nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); } .nav__links a:hover{ color:var(--ivory); } .nav__links a:hover::after{ transform:scaleX(1); } .nav__right{ display:flex; align-items:center; gap:14px; } .sound{ display:flex; align-items:center; gap:9px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.18em; color:var(--faint); transition:color .4s; } .sound:hover{ color:var(--gold-hi); } .sound__label{ display:none; } @media(min-width:640px){ .sound__label{ display:inline; } } .sound__bars{ display:flex; align-items:flex-end; gap:2.5px; height:13px; } .sound__bars i{ width:1.5px; background:currentColor; transition:height .3s; } .sound__bars i:nth-child(1){ height:5px; } .sound__bars i:nth-child(2){ height:11px; } .sound__bars i:nth-child(3){ height:7px; } .sound[aria-pressed="true"]{ color:var(--gold); } .sound[aria-pressed="true"] .sound__bars i{ animation:eq 1.1s ease-in-out infinite; } .sound[aria-pressed="true"] .sound__bars i:nth-child(2){ animation-delay:.18s; } .sound[aria-pressed="true"] .sound__bars i:nth-child(3){ animation-delay:.36s; } .nav__burger{ display:grid; gap:5px; padding:8px; } @media(min-width:1040px){ .nav__burger{ display:none; } } .nav__burger i{ display:block; width:20px; height:1px; background:var(--ivory); } .nav__drawer{ display:flex; flex-direction:column; gap:2px; padding:10px 24px 24px; background:rgba(10,8,6,.97); border-top:1px solid var(--gold-line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .nav__drawer a{ padding:14px 0; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--parchment); border-bottom:1px solid rgba(200,162,74,.12); } /* ─────── hero / the portrait ─────── */ .hero{ position:relative; z-index:1; padding:150px 0 90px; text-align:center; } @media(min-width:768px){ .hero{ padding:148px 0 120px; } } .hero__title{ margin:26px 0 0; font-family:var(--f-display); font-weight:500; font-size:clamp(38px,8.4vw,104px); line-height:1; letter-spacing:.045em; color:var(--ivory); } .hero__tagline{ margin:20px 0 0; font-family:var(--f-display); font-size:clamp(18px,2.4vw,28px); color:var(--parchment); } .hero__tagline em{ font-style:italic; color:var(--gold-hi); } /* ─────── countdown ─────── Set as an engraved auction plate, not a crypto timer: hairline gold rules, Playfair numerals, no glow and no ticking animation. */ .countdown{ margin:32px auto 0; max-width:600px; padding:20px 20px 17px; border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); } .countdown__label{ margin:0 0 14px; font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.32em; color:var(--gold); } /* the post-launch state, swapped in automatically by the clock */ .countdown__open{ margin:0; } .countdown__openLine{ margin:0; font-family:var(--f-display); font-style:italic; font-weight:500; font-size:clamp(26px,4.2vw,40px); line-height:1.15; letter-spacing:.01em; color:var(--gold-hi); } .countdown__openSub{ margin:14px 0 0; display:flex; align-items:center; justify-content:center; gap:10px; font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:.24em; color:var(--parchment); } .live{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--gold); box-shadow:0 0 0 0 rgba(200,162,74,.55); animation:livePulse 2.4s ease-out infinite; } @keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(200,162,74,.5); } 70%{ box-shadow:0 0 0 11px rgba(200,162,74,0); } 100%{ box-shadow:0 0 0 0 rgba(200,162,74,0); } } .countdown__row{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(10px,3.4vw,30px); } .cd{ display:flex; flex-direction:column; align-items:center; gap:7px; min-width:52px; } .cd b{ font-family:var(--f-display); font-weight:500; font-size:clamp(30px,6vw,50px); line-height:1; color:var(--ivory); font-variant-numeric:tabular-nums; /* the seconds column changes every tick — fixing the advance stops the whole row shuffling sideways as digits change width */ font-feature-settings:'tnum' 1; } .cd span{ font-size:9.5px; font-weight:500; text-transform:uppercase; letter-spacing:.2em; color:var(--faint); } .cd__sep{ width:1px; height:clamp(30px,6vw,50px); background:linear-gradient(to bottom, transparent, var(--gold-line) 30%, var(--gold-line) 70%, transparent); } @media(max-width:420px){ .cd{ min-width:44px; } .cd span{ font-size:8.5px; letter-spacing:.14em; } } .countdown__date{ margin:12px 0 0; font-size:12.5px; color:var(--faint); } .portrait{ margin:40px auto 0; max-width:430px; } .portrait__frame{ position:relative; padding:13px; background: linear-gradient(150deg, rgba(200,162,74,.32), rgba(124,95,34,.10) 42%, rgba(200,162,74,.24)); box-shadow: 0 0 0 1px rgba(200,162,74,.44), 0 40px 100px -30px rgba(0,0,0,.95), 0 0 130px -40px rgba(200,162,74,.42); } .portrait__frame::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(200,162,74,.36); pointer-events:none; z-index:3; } .portrait__media,.portrait__still{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--umber); } .portrait__media{ position:absolute; inset:13px; width:calc(100% - 26px); height:calc(100% - 26px); opacity:0; transition:opacity 1.2s ease; z-index:2; } .portrait__media.is-live{ opacity:1; } .portrait__glass{ position:absolute; inset:13px; z-index:4; pointer-events:none; background:linear-gradient(128deg, rgba(255,255,255,.07) 0%, transparent 34%, transparent 66%, rgba(255,255,255,.035) 100%); } .plaque{ margin:30px auto 0; max-width:410px; padding-top:22px; border-top:1px solid var(--gold-line); display:grid; gap:6px; } .plaque__lot{ font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.3em; color:var(--gold); } .plaque__title{ font-family:var(--f-display); font-weight:500; font-size:20px; color:var(--ivory); } .plaque__meta{ font-size:13px; color:var(--faint); } .plaque__note{ margin-top:5px; font-family:var(--f-display); font-style:italic; font-size:15px; color:var(--gold-hi); } .hero__cert{ margin:56px auto 0; max-width:520px; } .cert__label{ display:block; margin-bottom:11px; font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.28em; color:var(--gold); } .cert__row{ display:flex; align-items:stretch; gap:10px; } .cert__code{ flex:1; min-width:0; padding:13px 18px; border:1px solid var(--gold-line); background:rgba(200,162,74,.05); font-size:13.5px; color:var(--parchment); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; } .cert__code.is-tba{ font-family:var(--f-display); font-style:italic; color:var(--faint); } .hero__actions{ margin:34px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; } .hero__locknote{ margin:16px 0 0; font-size:12.5px; color:var(--faint); } .plate__alt{ display:block; margin:18px auto 0; } .hero__scroll{ margin-top:70px; display:flex; flex-direction:column; align-items:center; gap:12px; opacity:.55; } .hero__scroll i{ width:1px; height:52px; background:linear-gradient(to bottom,var(--gold),transparent); } .hero__scroll span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.28em; color:var(--faint); } /* ─────── the corridor (price-reactive hanging) ─────── */ .corridor{ position:relative; z-index:1; padding:70px 0; border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); background:radial-gradient(60% 100% at 50% 50%, rgba(46,15,22,.28), transparent 70%); } .corridor__inner{ display:grid; gap:34px; align-items:center; } @media(min-width:760px){ .corridor__inner{ grid-template-columns:250px 1fr; gap:48px; } } .corridor__art{ margin:0; display:grid; place-items:center; } .corridor__art img{ width:100%; max-width:250px; height:auto; object-fit:contain; filter:drop-shadow(0 22px 26px rgba(0,0,0,.9)); opacity:0; transition:opacity .9s var(--ease); } .corridor__art img.is-in{ opacity:1; } .corridor__title{ margin:14px 0 0; font-family:var(--f-display); font-style:italic; font-weight:500; font-size:clamp(24px,3.4vw,36px); line-height:1.14; color:var(--ivory); } .corridor__meta{ margin:12px 0 0; font-size:13.5px; color:var(--faint); } .corridor__note{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--gold-line); font-family:var(--f-display); font-size:18px; color:var(--gold-hi); } .corridor__foot{ margin:20px 0 0; font-size:12px; color:var(--ghost); } /* direct child only — the percentage span nested inside must stay inline, or "Hung on a / -58.0% / day." breaks across three lines */ .corridor__foot > span{ display:block; margin-top:4px; } .chg{ display:inline; font-weight:600; letter-spacing:.02em; } .chg--up{ color:#8FD46A; } .chg--down{ color:#E0685F; } /* ─────── provenance ─────── */ .section--provenance::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 50% at 20% 0%, rgba(74,21,32,.34) 0%, transparent 62%); pointer-events:none; } .prov{ display:grid; gap:52px; } @media(min-width:900px){ .prov{ grid-template-columns:1.35fr .85fr; gap:70px; align-items:start; } } .prov__body p{ margin:0 0 22px; color:var(--parchment); font-size:17px; } .prov__body em{ font-family:var(--f-display); font-style:italic; color:var(--ivory); } .prov__lead{ font-size:18px !important; } .dropcap{ float:left; font-family:var(--f-display); font-weight:500; font-size:72px; line-height:.8; color:var(--gold); margin:8px 14px 0 0; } .prov__close{ padding-top:22px; border-top:1px solid var(--gold-line); font-family:var(--f-display); font-style:italic; font-size:20px !important; color:var(--ivory) !important; } .prov__aside{ display:grid; gap:34px; } .audio{ padding:30px; border:1px solid var(--gold-line); background:linear-gradient(170deg, rgba(200,162,74,.06), rgba(46,15,22,.22)); } .audio__kicker{ margin:0 0 8px; font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.26em; color:var(--gold); } .audio__title{ margin:0 0 22px; font-family:var(--f-display); font-weight:500; font-size:24px; line-height:1.2; } .audio__play{ display:flex; align-items:center; gap:15px; width:100%; padding:0; transition:opacity .3s; } .audio__play:hover{ opacity:.82; } .audio__icon{ position:relative; flex:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--gold); display:grid; place-items:center; transition:background .45s; } .audio__icon::before{ content:""; display:block; width:0; height:0; margin-left:3px; border-left:11px solid var(--gold-hi); border-top:7px solid transparent; border-bottom:7px solid transparent; transition:.3s; } .audio.is-playing .audio__icon::before{ width:11px; height:13px; margin-left:0; border:0; background:linear-gradient(90deg,var(--gold-hi) 0 4px, transparent 4px 7px, var(--gold-hi) 7px 11px); } .audio__play:hover .audio__icon{ background:rgba(200,162,74,.14); } .audio__time{ font-family:var(--f-display); font-size:16px; letter-spacing:.1em; color:var(--parchment); } .audio__bar{ margin-top:20px; height:1px; background:rgba(200,162,74,.22); overflow:hidden; } .audio__bar i{ display:block; height:100%; width:0%; background:var(--gold); transition:width .2s linear; } .audio__note{ margin:16px 0 0; font-size:13px; color:var(--faint); } .pull{ margin:0; padding-left:26px; border-left:1px solid var(--gold-line); } .pull p{ margin:0; font-family:var(--f-display); font-style:italic; font-size:20px; line-height:1.5; color:var(--ivory); } .pull cite{ display:block; margin-top:14px; font-family:var(--f-body); font-style:normal; font-size:11.5px; font-weight:500; text-transform:uppercase; letter-spacing:.18em; color:var(--gold); } /* ─────── the nine lives (salon hang) ─────── */ .salon{ display:grid; gap:20px; grid-template-columns:repeat(2,1fr); } @media(min-width:700px){ .salon{ grid-template-columns:repeat(3,1fr); gap:28px; } } @media(min-width:1000px){ .salon{ gap:40px; } } .frame{ position:relative; display:block; transition:transform .8s var(--ease); } .frame:hover{ transform:translateY(-7px); } /* every painting is a cutout, so it genuinely hangs on the wall */ .frame__art{ position:relative; aspect-ratio:3/4; display:grid; place-items:center; } .frame__art img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 26px 30px rgba(0,0,0,.9)) drop-shadow(0 4px 8px rgba(0,0,0,.6)); transition:filter .8s var(--ease); } .frame:hover .frame__art img{ filter:drop-shadow(0 34px 40px rgba(0,0,0,.95)) drop-shadow(0 0 34px rgba(200,162,74,.22)); } .frame__numeral{ position:absolute; font-family:var(--f-display); font-style:italic; font-size:clamp(24px,3.6vw,40px); color:rgba(200,162,74,.34); transition:color .7s; pointer-events:none; } .frame--empty:hover .frame__numeral{ color:rgba(239,221,166,.78); } .frame--current .frame__art::after{ content:""; position:absolute; inset:16% 14%; background:radial-gradient(60% 55% at 50% 55%, rgba(200,162,74,.24), transparent 72%); animation:candleFlicker 5s ease-in-out infinite; pointer-events:none; } .frame--current .frame__numeral{ color:rgba(239,221,166,.82); } .frame__glass{ position:absolute; inset:14%; pointer-events:none; background:linear-gradient(122deg, rgba(255,255,255,.05) 0%, transparent 40%, transparent 72%, rgba(255,255,255,.025) 100%); } .frame__plate{ margin-top:15px; text-align:center; } .frame__roman{ display:block; font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.26em; color:var(--gold); } .frame__name{ display:block; margin-top:5px; font-family:var(--f-display); font-weight:500; font-size:17px; color:var(--ivory); } .frame__state{ display:block; margin-top:3px; font-size:12.5px; color:var(--faint); } .frame__desc{ display:block; margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--faint); max-height:0; opacity:0; overflow:hidden; transition:max-height .7s var(--ease), opacity .5s; } .frame:hover .frame__desc{ max-height:130px; opacity:1; } .salon__foot{ margin:52px 0 0; text-align:center; font-size:11.5px; text-transform:uppercase; letter-spacing:.2em; color:var(--ghost); } @media(hover:none){ .salon__foot{ display:none; } .frame__desc{ max-height:130px; opacity:1; } } /* ─────── the sealed ninth life ─────── */ .sealed{ max-width:660px; margin:52px auto 0; padding:32px 30px; border:1px solid var(--gold-line); background:linear-gradient(170deg, rgba(200,162,74,.05), rgba(46,15,22,.18)); text-align:center; } .sealed__lead{ margin:14px 0 0; font-family:var(--f-display); font-style:italic; font-size:20px; line-height:1.4; color:var(--ivory); } .sealed__hash{ display:block; margin:22px auto 0; padding:14px 16px; max-width:100%; overflow-wrap:anywhere; border:1px solid var(--gold-line); background:rgba(10,8,6,.6); font-size:12px; line-height:1.7; letter-spacing:.04em; color:var(--gold-hi); } .sealed__note{ margin:18px auto 0; max-width:520px; font-size:12.5px; line-height:1.75; color:var(--faint); } /* ─────── the ledger ─────── */ .section--ledger::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 46% at 80% 100%, rgba(74,21,32,.3) 0%, transparent 60%); pointer-events:none; } .ledger{ border-top:1px solid var(--gold-line); } .ledger__row{ display:flex; align-items:baseline; gap:14px; padding:17px 2px; border-bottom:1px solid rgba(200,162,74,.14); transition:background .5s; } .ledger__row:hover{ background:rgba(200,162,74,.04); } .ledger__row span{ font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); white-space:nowrap; } .ledger__row i{ flex:1; height:1px; background:repeating-linear-gradient(90deg, rgba(200,162,74,.34) 0 1px, transparent 1px 5px); transform:translateY(-3px); } .ledger__row b{ font-family:var(--f-display); font-weight:500; font-size:19px; color:var(--ivory); white-space:nowrap; } .ledger__proof{ flex:none; margin-left:16px; min-width:62px; text-align:right; font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); transition:color .3s; } a.ledger__proof:hover{ color:var(--gold-hi); text-decoration:underline; text-underline-offset:4px; } .ledger__proof.is-pending{ color:var(--ghost); letter-spacing:.1em; text-transform:none; font-style:italic; } @media(max-width:560px){ .ledger__proof{ min-width:0; margin-left:12px; font-size:9.5px; } } .ledger__foot{ margin:22px 0 0; font-size:13px; line-height:1.65; color:var(--faint); } .cert__warn{ margin:14px 0 0; font-size:12.5px; line-height:1.6; color:var(--faint); } .cert__warn b{ color:var(--gold-hi); font-weight:500; } .certificate{ margin-top:52px; padding:34px; border:1px solid var(--gold-line); background:linear-gradient(170deg, rgba(200,162,74,.05), transparent); text-align:center; } .certificate .cert__label{ text-align:center; } .certificate__note{ margin:20px auto 0; max-width:460px; font-size:13.5px; color:var(--faint); } /* ─────── acquisition ─────── */ .steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--gold-line); } .steps li{ display:flex; gap:26px; padding:30px 2px; border-bottom:1px solid rgba(200,162,74,.14); } .steps__n{ flex:none; width:42px; font-family:var(--f-display); font-style:italic; font-size:21px; color:var(--gold); letter-spacing:.04em; } .steps h3{ margin:0 0 8px; font-family:var(--f-display); font-weight:500; font-size:22px; color:var(--ivory); } .steps p{ margin:0; color:var(--parchment); font-size:16px; } .plate{ margin-top:64px; padding:52px 28px; border:1px solid var(--gold-line); background: radial-gradient(80% 100% at 50% 0%, rgba(200,162,74,.10), transparent 62%), linear-gradient(180deg, rgba(46,15,22,.3), transparent); text-align:center; } .plate__coin{ width:78px; height:78px; margin:0 auto 22px; animation:candleFlicker 6s ease-in-out infinite; } .plate__lot{ margin:0 0 26px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.32em; color:var(--gold); } .plate__note{ margin:24px auto 0; max-width:420px; font-size:13.5px; color:var(--faint); } /* ─────── the salon index ─────── */ .index{ border-top:1px solid var(--gold-line); } .index__row{ display:flex; align-items:baseline; gap:20px; padding:22px 2px; border-bottom:1px solid rgba(200,162,74,.14); transition:padding-left .6s var(--ease), background .5s; } .index__row:hover{ padding-left:14px; background:rgba(200,162,74,.04); } .index__name{ flex:none; width:130px; font-family:var(--f-display); font-weight:500; font-size:20px; color:var(--ivory); transition:color .45s; } .index__row:hover .index__name{ color:var(--gold-hi); } .index__desc{ flex:1; font-size:15px; color:var(--faint); } .index__go{ flex:none; font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); opacity:0; transform:translateX(-6px); transition:opacity .45s, transform .45s var(--ease); } .index__row:hover .index__go{ opacity:1; transform:none; } @media(max-width:640px){ .index__row{ flex-wrap:wrap; gap:6px; } .index__name{ width:100%; } .index__go{ display:none; } } /* ─────── enquiries ─────── */ .faq{ border-top:1px solid var(--gold-line); } .faq__item{ border-bottom:1px solid rgba(200,162,74,.14); } .faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 2px; text-align:left; font-family:var(--f-display); font-weight:500; font-size:21px; color:var(--ivory); transition:color .4s; } .faq__q:hover{ color:var(--gold-hi); } .faq__sign{ flex:none; position:relative; width:14px; height:14px; } .faq__sign::before,.faq__sign::after{ content:""; position:absolute; left:0; top:6.5px; width:14px; height:1px; background:var(--gold); transition:transform .5s var(--ease); } .faq__sign::after{ transform:rotate(90deg); } .faq__item.is-open .faq__sign::after{ transform:rotate(0deg); } .faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); } .faq__item.is-open .faq__a{ grid-template-rows:1fr; } .faq__a > div{ overflow:hidden; } .faq__a p{ margin:0; padding:0 0 28px; max-width:640px; color:var(--parchment); font-size:16.5px; } /* ─────── colophon ─────── */ .colophon{ position:relative; padding:96px 0 46px; border-top:1px solid var(--gold-line); text-align:center; background:radial-gradient(70% 100% at 50% 100%, rgba(46,15,22,.42), transparent 62%); } .colophon__crest{ width:66px; height:66px; margin:0 auto 26px; opacity:.9; } .colophon__line{ margin:0; font-family:var(--f-display); font-weight:500; font-size:clamp(26px,4.4vw,44px); line-height:1.2; color:var(--ivory); } .colophon__line em{ font-style:italic; color:var(--gold-hi); } .colophon__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:34px; } .colophon__legal{ margin:64px auto 0; max-width:540px; font-size:12.5px; line-height:1.8; color:var(--ghost); } .colophon__mark{ margin:22px 0 0; font-size:10.5px; text-transform:uppercase; letter-spacing:.28em; color:var(--ghost); } /* ─────── toast + paws ─────── */ .toast{ position:fixed; left:50%; bottom:34px; z-index:120; transform:translate(-50%,20px); padding:14px 26px; border:1px solid var(--gold); background:rgba(10,8,6,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--gold-hi); opacity:0; pointer-events:none; transition:opacity .5s, transform .6s var(--ease); } .toast.is-on{ opacity:1; transform:translate(-50%,0); } .paws{ position:fixed; inset:0; pointer-events:none; z-index:1; } .paws i{ position:absolute; width:22px; height:22px; background:var(--paw) center/contain no-repeat; opacity:0; animation:pawFade 2.4s ease-out forwards; } /* ─────── reveal ─────── */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); } .reveal.is-in{ opacity:1; transform:none; } .salon .frame{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); } .salon.is-in .frame{ opacity:1; transform:none; } .salon.is-in .frame:nth-child(2){ transition-delay:.08s; } .salon.is-in .frame:nth-child(3){ transition-delay:.16s; } .salon.is-in .frame:nth-child(4){ transition-delay:.24s; } .salon.is-in .frame:nth-child(5){ transition-delay:.32s; } .salon.is-in .frame:nth-child(6){ transition-delay:.40s; } .salon.is-in .frame:nth-child(7){ transition-delay:.48s; } .salon.is-in .frame:nth-child(8){ transition-delay:.56s; } .salon.is-in .frame:nth-child(9){ transition-delay:.64s; } /* ─────── keyframes ─────── */ @keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @keyframes breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } } @keyframes eq{ 0%,100%{ height:3px; } 50%{ height:11px; } } @keyframes pawFade{ 0%{ opacity:0; transform:scale(.7) rotate(var(--r,0deg)); } 18%{ opacity:.34; transform:scale(1) rotate(var(--r,0deg)); } 100%{ opacity:0; transform:scale(1) rotate(var(--r,0deg)); } } @keyframes candleFlicker{ 0%,100%{ opacity:1; } 8%{ opacity:.9; } 15%{ opacity:1; } 42%{ opacity:.86; } 47%{ opacity:1; } 70%{ opacity:.93; } 76%{ opacity:1; } } /* ─────── reduced motion ─────── */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } html{ scroll-behavior:auto; } .reveal, .salon .frame{ opacity:1; transform:none; } .rule i{ transform:scaleX(1); } .paws{ display:none; } }