/* PaisaFeet — design system. VC structural rigor, sultry palette. Radius is always 0. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=JetBrains+Mono:wght@300;400&family=Manrope:wght@200;300;500;700&display=swap'); /* ───────────────────────────────────────────────────────────── DAY / NIGHT — inverted on purpose (MkrLab house rule): day (06:00–18:00) → OBSIDIAN (dark) ← default night → PAPER (light) Manual flip persists in localStorage and always wins. Dark = [data-jv-theme="obsidian"] on ; bare :root = Paper. Variable names are semantic, not literal: --pf-obsidian = GROUND --pf-paper = INK ───────────────────────────────────────────────────────────── */ :root{ /* PAPER (light) — night */ --pf-obsidian:#FAF8F3; --pf-smoke:#F2EFE8; --pf-ash:#E7E3D9; --pf-paper:#12100F; --pf-mute:#5E574F; --pf-faint:#8B837A; --pf-crimson:#B8122E; --pf-gold:#8A6717; --pf-yellow:#FCD116; --pf-blue:#003893; --pf-scrim:250,248,243; --pf-glow-y:.14; --pf-glow-r:.12; --pf-glow-b:.10; --pf-serif:'Cormorant Garamond',Didot,Georgia,serif; --pf-mono:'JetBrains Mono',Menlo,Consolas,monospace; --pf-sans:Manrope,system-ui,-apple-system,sans-serif; --pf-fs-micro:10px; --pf-fs-body:15px; --pf-fs-lead:22px; --pf-track-micro:.2em; --pf-track-eyebrow:.34em; --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:44px;--s8:64px;--s9:96px; --pf-edge:18,16,15; --pf-hair:inset 0 0 0 1px rgba(var(--pf-edge),.18); --pf-hair-strong:inset 0 0 0 1px rgba(var(--pf-edge),.42); --pf-hair-crimson:inset 0 0 0 1px var(--pf-crimson); --pf-hair-gold:inset 0 0 0 1px var(--pf-gold); --t-fast:140ms;--t-base:240ms;--t-slow:480ms; --ease:cubic-bezier(.22,1,.36,1); } /* OBSIDIAN (dark) — daytime, the default */ [data-jv-theme="obsidian"]{ --pf-obsidian:#0A0A0A; --pf-smoke:#131110; --pf-ash:#1E1B19; --pf-paper:#F4F1EA; --pf-mute:#9A938A; --pf-faint:#6B655E; --pf-crimson:#D81E3F; --pf-gold:#C9A24A; --pf-blue:#1B4FA8; --pf-scrim:10,10,10; --pf-edge:244,241,234; --pf-glow-y:.10; --pf-glow-r:.16; --pf-glow-b:.14; } html{color-scheme:light} [data-jv-theme="obsidian"]{color-scheme:dark} body,.pf-head,.pf-card,.pf-btn,.panel,.kpi{transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease)} *{box-sizing:border-box;border-radius:0;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--pf-obsidian); color:var(--pf-paper); font-family:var(--pf-sans); font-weight:300; font-size:var(--pf-fs-body); line-height:1.6; text-wrap:pretty; -webkit-font-smoothing:antialiased; min-height:100vh; } img{max-width:100%;display:block} a{color:var(--pf-gold);text-decoration:none;transition:color var(--t-fast) var(--ease)} a:hover{color:var(--pf-crimson)} /* ---------- microtype ---------- */ .pf-eyebrow{ font-family:var(--pf-mono);font-size:var(--pf-fs-micro);font-weight:400; letter-spacing:var(--pf-track-eyebrow);text-transform:uppercase;color:var(--pf-crimson); } .pf-eyebrow--gold{color:var(--pf-gold)} .pf-mono{font-family:var(--pf-mono);font-size:11px;letter-spacing:var(--pf-track-micro);text-transform:uppercase;color:var(--pf-mute)} .pf-serif{font-family:var(--pf-serif);font-weight:300;letter-spacing:.01em;line-height:1.05} .pf-serif-it{font-family:var(--pf-serif);font-style:italic;font-weight:300;color:var(--pf-gold)} /* ---------- rules ---------- */ .pf-rule{height:1px;background:linear-gradient(90deg,var(--pf-crimson),var(--pf-gold) 55%,transparent);border:0;margin:var(--s5) 0} .pf-rule--thin{background:rgba(var(--pf-edge),.16);margin:var(--s4) 0} /* ---------- layout ---------- */ .pf-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--s4)} .pf-band{padding:var(--s7) 0} .pf-band--tight{padding:var(--s6) 0} @media(min-width:760px){ .pf-wrap{padding:0 var(--s5)} .pf-band{padding:var(--s9) 0} .pf-band--tight{padding:var(--s7) 0} } .pf-band--smoke{background:var(--pf-smoke)} /* ---------- header ---------- */ .pf-head{ position:sticky;top:0;z-index:40; background:rgba(var(--pf-scrim),.90);backdrop-filter:blur(12px); box-shadow:inset 0 -1px 0 rgba(var(--pf-edge),.16); padding-top:env(safe-area-inset-top); } /* mobile first: brand + controls on row 1, nav wraps beneath */ .pf-head-in{ display:grid;grid-template-columns:1fr auto;align-items:center; gap:var(--s2) var(--s3);padding:var(--s3) 0; } .pf-brand{display:flex;align-items:center;gap:var(--s3);min-width:0} .pf-brand svg{width:40px;height:auto;display:block;box-shadow:var(--pf-hair);flex:0 0 auto} .pf-brand-txt{display:flex;flex-direction:column;line-height:1;min-width:0} .pf-brand-txt b{font-family:var(--pf-sans);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--pf-paper)} .pf-brand-txt span{font-family:var(--pf-mono);font-size:8px;letter-spacing:.38em;color:var(--pf-mute);margin-top:3px} .pf-nav{display:flex;align-items:center;gap:var(--s4);grid-column:1/-1;flex-wrap:wrap} .pf-nav a{ font-family:var(--pf-mono);font-size:var(--pf-fs-micro);letter-spacing:.18em; text-transform:uppercase;color:var(--pf-mute);padding:6px 0; } .pf-nav a:hover,.pf-nav a[aria-current]{color:var(--pf-paper)} /* ---------- theme pill + language ---------- */ /* sits beside the brand on row 1; nav wraps to row 2 (it comes later in the DOM) */ .pf-ctl{display:flex;align-items:center;gap:var(--s2);justify-self:end;grid-row:1;grid-column:2} .pf-theme{ display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:8px 11px; background:transparent;border:0;box-shadow:var(--pf-hair);cursor:pointer; font-family:var(--pf-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase; color:var(--pf-mute);transition:box-shadow var(--t-fast) var(--ease),color var(--t-fast) var(--ease); } .pf-theme:hover{color:var(--pf-paper);box-shadow:var(--pf-hair-strong)} .pf-theme .pip{width:9px;height:9px;display:block;background:var(--pf-crimson);flex:0 0 auto} [data-jv-theme="obsidian"] .pf-theme .pip{box-shadow:0 0 9px var(--pf-crimson)} .pf-lang{display:flex;box-shadow:var(--pf-hair)} .pf-lang button{ min-width:38px;min-height:38px;padding:8px 9px;background:transparent;border:0;cursor:pointer; font-family:var(--pf-mono);font-size:9px;letter-spacing:.14em;color:var(--pf-faint); transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .pf-lang button:hover{color:var(--pf-paper)} .pf-lang button[data-on]{background:var(--pf-crimson);color:#fff} @media(min-width:760px){ .pf-head-in{grid-template-columns:auto 1fr auto;gap:var(--s5)} .pf-brand svg{width:46px} .pf-brand-txt b{font-size:15px} .pf-nav{grid-row:1;grid-column:2;justify-content:flex-end;gap:var(--s5)} .pf-ctl{grid-column:3} } /* ---------- buttons ---------- */ .pf-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:46px; font-family:var(--pf-mono);font-size:var(--pf-fs-micro);font-weight:400; letter-spacing:.16em;text-transform:uppercase; padding:14px 20px;background:transparent;color:var(--pf-paper); box-shadow:var(--pf-hair-strong);cursor:pointer; transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .pf-btn:hover{box-shadow:var(--pf-hair-crimson);transform:translateY(-1px);color:var(--pf-paper)} .pf-btn:active{transform:translateY(1px)} .pf-btn:disabled{opacity:.45;cursor:default;transform:none} .pf-btn--solid{background:var(--pf-crimson);color:#fff;box-shadow:none;font-weight:400} .pf-btn--solid:hover{background:#ee2549;box-shadow:var(--pf-hair-gold)} .pf-btn--ghost{box-shadow:var(--pf-hair);color:var(--pf-mute)} .pf-btn--ghost:hover{color:var(--pf-paper);box-shadow:var(--pf-hair-strong)} .pf-btn--sm{padding:9px 13px;font-size:9px} /* ---------- fields ---------- */ .pf-field{display:flex;flex-direction:column;gap:6px} .pf-field label{font-family:var(--pf-mono);font-size:var(--pf-fs-micro);letter-spacing:var(--pf-track-micro);text-transform:uppercase;color:var(--pf-mute)} .pf-field input,.pf-field textarea,.pf-field select{ font-family:var(--pf-sans);font-size:var(--pf-fs-body);font-weight:300; padding:13px 14px;background:var(--pf-ash);color:var(--pf-paper); border:0;box-shadow:var(--pf-hair);width:100%; transition:box-shadow var(--t-fast) var(--ease); } .pf-field textarea{min-height:78px;resize:vertical;line-height:1.5} .pf-field input:focus,.pf-field textarea:focus,.pf-field select:focus{outline:0;box-shadow:var(--pf-hair-gold)} .pf-field input::placeholder,.pf-field textarea::placeholder{color:var(--pf-faint)} /* ---------- tags ---------- */ .pf-tag{ display:inline-flex;align-items:center;gap:6px; font-family:var(--pf-mono);font-size:9px;letter-spacing:var(--pf-track-micro);text-transform:uppercase; padding:5px 9px;box-shadow:var(--pf-hair);color:var(--pf-mute);width:max-content; } .pf-tag--live{box-shadow:var(--pf-hair-gold);color:var(--pf-gold)} .pf-tag--draft{box-shadow:var(--pf-hair-crimson);color:var(--pf-crimson)} /* ---------- gallery grid ---------- */ .pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));gap:var(--s3)} @media(min-width:560px){.pf-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s5)}} .pf-card{ position:relative;display:block;background:var(--pf-smoke); box-shadow:var(--pf-hair);overflow:hidden; transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease); } .pf-card:hover{box-shadow:var(--pf-hair-crimson);transform:translateY(-2px)} .pf-card-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--pf-ash)} .pf-card-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease),filter var(--t-slow) var(--ease)} .pf-card:hover .pf-card-img img{transform:scale(1.045)} .pf-card-body{padding:var(--s4);display:flex;flex-direction:column;gap:6px} .pf-card-body h3{font-family:var(--pf-serif);font-weight:300;font-size:26px;line-height:1.1;color:var(--pf-paper)} .pf-card-body p{font-size:13px;color:var(--pf-mute);line-height:1.5} .pf-card-empty{ display:flex;align-items:center;justify-content:center; aspect-ratio:4/5;background:var(--pf-ash);color:var(--pf-faint); font-family:var(--pf-mono);font-size:var(--pf-fs-micro);letter-spacing:var(--pf-track-micro);text-transform:uppercase; } .pf-count{ position:absolute;right:var(--s3);top:var(--s3); font-family:var(--pf-mono);font-size:9px;letter-spacing:.16em; padding:5px 8px;background:rgba(var(--pf-scrim),.82);color:var(--pf-paper); box-shadow:var(--pf-hair); } /* ---------- photo masonry ---------- */ /* mobile first: 1 column, widening up */ .pf-photos{columns:1;column-gap:var(--s3)} .pf-photos figure{break-inside:avoid;margin-bottom:var(--s3);position:relative;box-shadow:var(--pf-hair);background:var(--pf-ash);cursor:zoom-in;transition:box-shadow var(--t-base) var(--ease)} .pf-photos figure:hover{box-shadow:var(--pf-hair-crimson)} .pf-photos figcaption{ font-family:var(--pf-mono);font-size:9px;letter-spacing:var(--pf-track-micro);text-transform:uppercase; color:var(--pf-mute);padding:var(--s2) var(--s3); } @media(min-width:560px){.pf-photos{columns:2;column-gap:var(--s4)}.pf-photos figure{margin-bottom:var(--s4)}} @media(min-width:960px){.pf-photos{columns:3}} /* ---------- lightbox ---------- */ .pf-lb{ position:fixed;inset:0;z-index:90;display:none; background:rgba(6,6,6,.96);backdrop-filter:blur(6px); align-items:center;justify-content:center;padding:var(--s5); } .pf-lb[data-open="1"]{display:flex} .pf-lb img{max-width:92vw;max-height:86vh;object-fit:contain;box-shadow:0 20px 70px rgba(0,0,0,.7)} .pf-lb-close,.pf-lb-prev,.pf-lb-next{ position:absolute;background:rgba(10,10,10,.72);color:#F4F1EA; box-shadow:inset 0 0 0 1px rgba(244,241,234,.34);cursor:pointer; font-family:var(--pf-mono);font-size:18px;line-height:1; width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:0; transition:box-shadow var(--t-fast) var(--ease); } .pf-lb-close:hover,.pf-lb-prev:hover,.pf-lb-next:hover{box-shadow:inset 0 0 0 1px #D81E3F} .pf-lb-close{top:calc(var(--s4) + env(safe-area-inset-top));right:var(--s4)} .pf-lb-prev{left:var(--s3);top:50%;transform:translateY(-50%)} .pf-lb-next{right:var(--s3);top:50%;transform:translateY(-50%)} /* ---------- footer ---------- */ .pf-foot{padding:var(--s8) 0 var(--s7);box-shadow:inset 0 1px 0 rgba(var(--pf-edge),.16);margin-top:var(--s9)} .pf-foot-in{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:space-between} .pf-flagdots{display:inline-flex;gap:5px;align-items:center} .pf-flagdots i{width:7px;height:7px;display:block} /* ---------- utility ---------- */ .pf-msg{font-size:14px;min-height:20px;font-family:var(--pf-sans)} .pf-msg.ok{color:var(--pf-gold)} .pf-msg.err{color:var(--pf-crimson)} .pf-center{text-align:center} .pf-stack{display:flex;flex-direction:column} .pf-hide{display:none !important} .pf-spin{display:inline-block;width:13px;height:13px;box-shadow:inset 0 0 0 2px rgba(var(--pf-edge),.28);border-top:2px solid var(--pf-crimson);border-radius:50% !important;animation:pfspin .7s linear infinite} @keyframes pfspin{to{transform:rotate(360deg)}}