/* ================================================================== RUREAL — Design Tokens Black, white, one quiet accent. Editorial. Oversized. Unapologetic. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;800;900&family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* -------- COLOR — neutrals -------- */ --ink: #0A0A0A; /* primary dark surface + body type on light */ --graphite: #1F1F1F; --smoke: #3A3A3A; --ash: #8A8A8A; --bone: #D9D5CD; --paper: #E8E3DA; /* primary light surface — warm bone, UY-style */ --paper-pure: #FFFFFF; /* used sparingly */ /* -------- COLOR — accents (use sparingly, never together) -------- */ --accent-red: #E5392B; /* the one accent. <5% of any layout. */ --moss: #45503D; /* seasonal — quiet */ --sand: #C8B89A; /* seasonal — quiet */ --mint: #DCE4DC; /* Entire Studios cool sage — alt page background */ /* -------- SEMANTIC -------- */ --fg-1: var(--ink); --fg-2: var(--smoke); --fg-3: var(--ash); --fg-on-dark: var(--paper); --bg-1: var(--paper); --bg-2: var(--paper-pure); --bg-dark: var(--ink); --border-1: var(--ink); --border-on-dark: var(--paper); --live: var(--accent-red); /* -------- TYPE — families -------- */ --font-display: 'Archivo Black', 'Archivo', 'Inter Tight', sans-serif; --font-ui: 'Archivo', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* -------- TYPE — scale -------- */ --t-hero: clamp(72px, 14vw, 240px); /* @kind font */ --t-display: clamp(56px, 9vw, 144px); /* @kind font */ --t-h1: clamp(40px, 6vw, 88px); /* @kind font */ --t-h2: clamp(28px, 4vw, 56px); /* @kind font */ --t-h3: clamp(20px, 2.4vw, 32px); /* @kind font */ --t-body-l: 18px; --t-body: 15px; --t-small: 13px; --t-label: 11px; /* always uppercase + tracked */ --t-meta: 11px; /* mono */ /* -------- TYPE — feel -------- */ --tracking-display: 0.14em; /* @kind font */ --tracking-h: 0.06em; /* @kind font */ --tracking-body: 0; /* @kind font */ --tracking-label: 0.18em; /* @kind font */ --leading-display: 1.0; /* @kind font */ --leading-h: 1.02; /* @kind font */ --leading-body: 1.5; /* @kind font */ /* -------- SPACING — 4px base -------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* -------- LAYOUT -------- */ --page-margin: clamp(24px, 6vw, 96px); /* @kind spacing */ --gutter: clamp(16px, 3vw, 48px); /* @kind spacing */ --col-max: 1680px; /* @kind spacing */ /* -------- RADII — almost always 0 -------- */ --r-0: 0; /* @kind radius */ --r-dot: 999px; /* @kind radius */ /* -------- BORDERS -------- */ --hairline: 1px solid var(--ink); /* @kind other */ --hairline-on-dark: 1px solid var(--paper); /* @kind other */ /* -------- MOTION -------- */ --ease: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --d-hover: 240ms; /* @kind other */ --d-content: 600ms; /* @kind other */ --d-page: 800ms; /* @kind other */ --d-press: 90ms; /* @kind other */ /* -------- SHADOWS — basically none -------- */ --shadow-text-on-image: 0 1px 24px rgba(0, 0, 0, 0.25); } /* ================================================================== BASE / SEMANTIC ELEMENTS ========================================================================= */ html, body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .t-hero, .t-display, .t-h1, .t-h2, .t-h3 { font-family: var(--font-display); font-weight: 300; margin: 0; } .t-hero { font-size: var(--t-hero); letter-spacing: var(--tracking-display); line-height: var(--leading-display); } .t-display { font-size: var(--t-display); letter-spacing: var(--tracking-display); line-height: var(--leading-display); } .t-h1 { font-size: var(--t-h1); letter-spacing: var(--tracking-h); line-height: var(--leading-h); } .t-h2 { font-size: var(--t-h2); letter-spacing: var(--tracking-h); line-height: var(--leading-h); } .t-h3 { font-size: var(--t-h3); letter-spacing: var(--tracking-h); line-height: var(--leading-h); } .t-body-l { font-size: var(--t-body-l); line-height: 1.45; } .t-body { font-size: var(--t-body); line-height: var(--leading-body); } .t-small { font-size: var(--t-small); line-height: 1.4; } .t-label { font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: 500; } .t-meta { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0; } /* ================================================================== PRIMITIVES ========================================================================= */ .btn { font-family: var(--font-ui); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--tracking-label); padding: var(--s-4) var(--s-6); border: var(--hairline); background: transparent; color: var(--fg-1); border-radius: 0; cursor: pointer; transition: background var(--d-hover) var(--ease), color var(--d-hover) var(--ease), opacity var(--d-press) linear; } .btn:hover { background: var(--ink); color: var(--paper); } .btn:active { opacity: 0.7; } .btn--filled { background: var(--ink); color: var(--paper); } .btn--filled:hover { background: var(--graphite); } .btn--ghost { border-color: transparent; } .btn--ghost:hover { background: transparent; color: var(--smoke); } .badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: 5px 10px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--tracking-label); border: var(--hairline); background: transparent; } .badge--live::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-dot); background: var(--accent-red); box-shadow: 0 0 0 0 rgba(229, 57, 43, 0.6); animation: pulse 1600ms var(--ease) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 43, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(229, 57, 43, 0); } } .input { font-family: var(--font-ui); font-size: var(--t-body); padding: var(--s-3) 0; background: transparent; border: 0; border-bottom: var(--hairline); border-radius: 0; color: var(--fg-1); width: 100%; outline: none; transition: border-color var(--d-hover) var(--ease); } .input::placeholder { color: var(--ash); } .input:focus { border-bottom-color: var(--ink); } a.link { color: inherit; text-decoration: none; position: relative; transition: opacity var(--d-hover) var(--ease); } a.link:hover { opacity: 0.55; } .divider { height: 1px; background: var(--ink); border: 0; margin: 0; } /* ================================================================== IMAGE PROTECTION GRADIENT — the only allowed gradient ========================================================================= */ .img-protect::after { content: ''; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(to top, rgba(10, 10, 10, 0.55), transparent); pointer-events: none; } /* ================================================================== RUREAL Studio — app.css Shell · cursor · ticker · nav · login · onboarding · gallery · account Tokens come from colors_and_type.css ========================================================================= */ :root { --font-he: 'Heebo', 'Archivo', sans-serif; --nav-h: 76px; --tick-h: 34px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--font-he); overflow-x: hidden; } button { font-family: inherit; } ::selection { background: var(--ink); color: var(--paper); } /* hide native cursor only on fine pointers */ @media (pointer: fine) { .rr-cursor-on, .rr-cursor-on * { cursor: none !important; } } /* ================================================================== ELEVATION LAYERS — grain · corner brackets · step heads · index marks ========================================================================= */ .rr-grain { position: fixed; inset: 0; z-index: 65; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 120px 120px; } /* L-shaped corner ticks (offset just outside the panel) */ .framed { position: relative; } .rr-corner { position: absolute; width: 16px; height: 16px; z-index: 2; pointer-events: none; } .rr-corner.tl { top: -7px; left: -7px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); } .rr-corner.tr { top: -7px; right: -7px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); } .rr-corner.bl { bottom: -7px; left: -7px; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); } .rr-corner.br { bottom: -7px; right: -7px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); } /* numbered step header */ .rr-step-head { display: flex; align-items: baseline; gap: 16px; direction: rtl; margin: 0 0 22px; } .rr-step-idx { font-family: var(--font-display); font-size: clamp(34px, 4vw, 56px); line-height: 0.8; letter-spacing: -0.03em; color: var(--ink); } .rr-step-meta { display: flex; flex-direction: column; gap: 2px; } .rr-step-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-red); } .rr-step-title { font-family: var(--font-he); font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.01em; } .rr-step-line { flex: 1; height: 1px; background: var(--bone); align-self: center; } /* oversized faint section index */ .rr-ghost-idx { position: absolute; font-family: var(--font-display); color: var(--ink); opacity: 0.04; letter-spacing: -0.04em; pointer-events: none; user-select: none; line-height: 0.8; } /* Hebrew blocks */ .rtl { direction: rtl; text-align: right; } /* English display headline */ .t-en { font-family: var(--font-display); letter-spacing: -0.03em; line-height: 0.92; margin: 0; } .he-display { font-family: var(--font-he); font-weight: 900; letter-spacing: -0.01em; } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); } .muted { color: var(--ash); } .accent { color: var(--accent-red); } /* ================================================================== CUSTOM CURSOR — minimal ring, blend difference so it reads on any bg ========================================================================= */ .rr-cur { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; will-change: transform; } .rr-cur-dot { position: absolute; width: 6px; height: 6px; border-radius: 999px; background: var(--paper); transform: translate(-50%, -50%); } .rr-cur-ring { position: absolute; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--paper); transform: translate(-50%, -50%); transition: width .24s var(--ease), height .24s var(--ease), opacity .24s var(--ease); } .rr-cur.is-hot .rr-cur-ring { width: 56px; height: 56px; } .rr-cur.is-down .rr-cur-ring { width: 24px; height: 24px; } /* ================================================================== TICKER + NAV ========================================================================= */ .rr-ticker { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--tick-h); background: var(--ink); color: var(--paper); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--ink); } .rr-ticker-track { display: flex; white-space: nowrap; will-change: transform; animation: rr-march 38s linear infinite; } .rr-ticker:hover .rr-ticker-track { animation-play-state: paused; } .rr-ticker-item { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding: 0 0; opacity: 0.92; } @keyframes rr-march { from { transform: translateX(0); } to { transform: translateX(-50%); } } .rr-nav { position: fixed; top: var(--tick-h); left: 0; right: 0; z-index: 80; height: var(--nav-h); display: flex; align-items: center; padding: 0 clamp(20px, 5vw, 64px); background: rgba(232,227,218,0.72); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); border-bottom: 1px solid var(--ink); } .rr-wm { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.04em; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0; } .rr-wm sup { font-size: 9px; vertical-align: super; letter-spacing: 0; margin-inline-start: 2px; } /* brand column: wordmark + the hanging profile signature */ .rr-nav-brandcol { position: relative; display: flex; flex-direction: column; align-items: flex-start; } .rr-nav-me { position: absolute; top: calc(100% + 1px); left: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; padding: 6px 12px 7px 10px; transform: rotate(-1.5deg); transform-origin: top left; transition: transform var(--d-hover) var(--ease), background var(--d-hover) var(--ease); } .rr-nav-me:hover { transform: rotate(0deg) translateY(1px); } .rr-nav-me.is-active { background: var(--accent-red); } .rr-nav-me-ava { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 9px; letter-spacing: 0; } .rr-nav-me-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; } .rr-nav-me-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-red); animation: rr-pulse 1.8s var(--ease) infinite; } .rr-nav-me.is-active .rr-nav-me-dot { background: var(--paper); } .rr-nav-mid { display: flex; gap: clamp(14px, 2vw, 34px); margin-inline-start: clamp(28px, 6vw, 80px); } .rr-nav-link { background: none; border: 0; cursor: pointer; padding: 6px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); transition: color var(--d-hover) var(--ease); position: relative; } .rr-nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ink); transition: right var(--d-hover) var(--ease); } .rr-nav-link:hover { color: var(--ink); } .rr-nav-link:hover::after { right: 0; } .rr-nav-link.is-active { color: var(--ink); } .rr-nav-link.is-active::after { right: 0; } .rr-nav-right { margin-inline-start: auto; display: flex; align-items: center; gap: 22px; } /* floating credits chip in nav */ .rr-credits-chip { display: flex; align-items: center; gap: 10px; cursor: pointer; border: 1px solid var(--ink); padding: 7px 14px; background: transparent; transition: background var(--d-hover) var(--ease), color var(--d-hover) var(--ease); } .rr-credits-chip:hover { background: var(--ink); color: var(--paper); } .rr-credits-chip .num { font-family: var(--font-display); font-size: 15px; letter-spacing: -0.02em; } .rr-credits-chip .lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } .rr-credits-chip.is-low { border-color: var(--accent-red); color: var(--accent-red); } .rr-credits-chip .num.bump { animation: rr-bump .6s var(--ease); } @keyframes rr-bump { 0%{transform:translateY(0)} 30%{transform:translateY(-4px);opacity:.4} 100%{transform:translateY(0)} } .rr-logout { background: none; border: 0; cursor: pointer; padding: 6px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); transition: opacity var(--d-hover) var(--ease); } .rr-logout:hover { opacity: 0.55; } /* ================================================================== PAGE SHELL + transitions ========================================================================= */ .rr-app { min-height: 100vh; padding-top: calc(var(--nav-h) + var(--tick-h)); } .rr-page { padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 64px) 160px; max-width: 1680px; margin: 0 auto; } .rr-route-enter { animation: rr-fadeup var(--d-page) var(--ease-out) both; } @keyframes rr-fadeup { from { transform: translateY(10px); } to { transform: none; } } /* reveal-on-scroll — base is always visible; only translate animates */ .reveal { transform: translateY(16px); transition: transform .8s var(--ease-out); } .reveal.in { transform: none; } /* page hero block */ .rr-hero { margin-bottom: clamp(40px, 6vw, 80px); } .rr-hero .eyebrow { display: block; margin-bottom: 18px; } .rr-hero h1 { font-size: clamp(56px, 11vw, 150px); } .rr-hero .sub { max-width: 460px; margin-top: 22px; color: var(--smoke); font-size: 16px; line-height: 1.55; } /* curtain wipe used on login -> app */ .rr-curtain { position: fixed; inset: 0; z-index: 9000; background: var(--ink); transform: translateY(0); pointer-events: none; } .rr-curtain.up { animation: rr-curtain-up 1s var(--ease) both; } @keyframes rr-curtain-up { to { transform: translateY(-101%); } } /* ================================================================== PRIMITIVES ========================================================================= */ .btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 15px 26px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background var(--d-hover) var(--ease), color var(--d-hover) var(--ease), opacity var(--d-press) linear; } .btn:hover { background: var(--ink); color: var(--paper); } .btn:active { opacity: .7; } .btn--fill { background: var(--ink); color: var(--paper); } .btn--fill:hover { background: var(--graphite); } .btn--lg { padding: 20px 34px; font-size: 12px; } .btn--block { width: 100%; justify-content: center; } .btn[disabled] { opacity: .4; pointer-events: none; } .chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 15px; border: 1px solid var(--bone); background: transparent; color: var(--smoke); cursor: pointer; transition: all var(--d-hover) var(--ease); white-space: nowrap; } .chip:hover { border-color: var(--ink); color: var(--ink); } .chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .seg { display: inline-flex; border: 1px solid var(--ink); } .seg-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 20px; background: transparent; border: 0; color: var(--smoke); cursor: pointer; transition: all var(--d-hover) var(--ease); border-inline-end: 1px solid var(--ink); } .seg-btn:last-child { border-inline-end: 0; } .seg-btn.is-active { background: var(--ink); color: var(--paper); } .field-line { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 12px 2px; font-family: var(--font-he); font-size: 16px; color: var(--ink); outline: none; transition: border-color var(--d-hover) var(--ease); } .field-line::placeholder { color: var(--ash); } .field-line:focus { border-bottom-width: 2px; } .divider { height: 1px; background: var(--ink); border: 0; margin: 0; } .hair { border-bottom: 1px solid var(--bone); } /* ================================================================== LOGIN — the cinematic entrance ========================================================================= */ .rr-login { position: fixed; inset: 0; z-index: 200; background: var(--ink); color: var(--paper); overflow: hidden; display: flex; flex-direction: column; } .rr-login .rr-ticker { color: var(--paper); border-color: var(--smoke); } .rr-login-figs { position: absolute; inset: 0; pointer-events: none; } .rr-login-fig { position: absolute; bottom: -3%; will-change: transform; filter: grayscale(1) contrast(1.05) brightness(1.35); animation: rr-fig-rise 1.4s var(--ease-out) both; } .rr-login-fig img { display: block; height: 86vh; width: auto; object-fit: contain; } @keyframes rr-fig-rise { from { transform: translateY(40px); } to { transform: none; } } .rr-login-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: radial-gradient(var(--paper) 0.5px, transparent 0.6px); background-size: 3px 3px; } .rr-login-core { position: relative; z-index: 3; margin: auto; text-align: center; padding: 0 24px; width: min(640px, 92vw); } .rr-login-wm { font-family: var(--font-display); letter-spacing: -0.05em; line-height: 0.86; font-size: clamp(72px, 18vw, 240px); margin: 0; } .rr-login-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bone); margin: 18px 0 4px; } .rr-login-he { font-family: var(--font-he); font-weight: 500; font-size: 15px; color: var(--ash); direction: rtl; } .rr-login-form { margin-top: 54px; display: flex; flex-direction: column; gap: 18px; align-items: center; } .rr-login-input { width: 100%; max-width: 420px; background: transparent; border: 0; border-bottom: 1px solid var(--smoke); color: var(--paper); text-align: center; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; padding: 14px 0; outline: none; transition: border-color var(--d-hover) var(--ease); } .rr-login-input::placeholder { color: var(--smoke); letter-spacing: 0.16em; text-transform: uppercase; } .rr-login-input:focus { border-color: var(--paper); } .rr-login-btn { border: 1px solid var(--paper); background: transparent; color: var(--paper); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding: 16px 40px; cursor: pointer; display: inline-flex; gap: 12px; align-items: center; transition: background var(--d-hover) var(--ease), color var(--d-hover) var(--ease); } .rr-login-btn:hover { background: var(--paper); color: var(--ink); } .rr-login-foot { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 3; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--smoke); } /* ================================================================== LOGIN — KINETIC casting-call entrance ========================================================================= */ .rr-login--kinetic { --tilt: 0deg; } /* giant scrolling background type */ .rr-kt-type { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 1vh; pointer-events: none; overflow: hidden; will-change: transform; } .rr-kt-line { white-space: nowrap; font-family: var(--font-display); font-size: 15vh; line-height: 1; letter-spacing: -0.03em; color: var(--paper); opacity: 0.05; } .rr-kt-line--a { animation: rr-kt-scroll-l 32s linear infinite; } .rr-kt-line--b { animation: rr-kt-scroll-r 26s linear infinite; } @keyframes rr-kt-scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes rr-kt-scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* marching runway */ .rr-runway { position: absolute; left: 0; right: 0; bottom: -2%; z-index: 2; overflow: hidden; pointer-events: none; } .rr-runway--back { height: 64vh; opacity: 0.42; filter: grayscale(1) brightness(1.25) blur(1px); } .rr-runway--front { height: 82vh; opacity: 0.9; filter: grayscale(1) contrast(1.05) brightness(1.18); } .rr-runway-track { display: flex; align-items: flex-end; height: 100%; gap: 4vw; width: max-content; animation: rr-walk 46s linear infinite; } .rr-runway-track--fast { animation-duration: 30s; gap: 3vw; } .rr-runway:hover .rr-runway-track { animation-play-state: paused; } @keyframes rr-walk { from { transform: translateX(0); } to { transform: translateX(-50%); } } .rr-walker { height: 100%; display: flex; align-items: flex-end; flex: 0 0 auto; animation: rr-bob 2.6s var(--ease) infinite; } .rr-walker:nth-child(even) { animation-delay: -1.3s; } .rr-walker img { height: 100%; width: auto; display: block; } .rr-walker--front { animation-duration: 2.1s; } @keyframes rr-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.2%); } } /* cursor spotlight */ .rr-login-spot { position: absolute; inset: 0; z-index: 3; pointer-events: none; } /* core sits above */ .rr-login--kinetic .rr-login-core { z-index: 5; transform: rotate(0deg); } .rr-kt-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bone); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; } .rr-live-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-red); box-shadow: 0 0 0 0 rgba(229,57,43,.6); animation: rr-pulse 1.5s var(--ease) infinite; } .rr-kt-wm { position: relative; } .rr-kt-wm::after { content: ''; position: absolute; left: 50%; bottom: 8%; width: 0; height: 6px; background: var(--accent-red); transform: translateX(-50%); animation: rr-kt-underline 1.1s var(--ease-out) .6s forwards; } @keyframes rr-kt-underline { to { width: 42%; } } /* auth tabs */ .rr-auth-tabs { position: relative; display: inline-flex; margin: 40px auto 0; border: 1px solid var(--smoke); } .rr-auth-tab { position: relative; z-index: 2; background: none; border: 0; cursor: pointer; padding: 13px 40px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); transition: color var(--d-hover) var(--ease); } .rr-auth-tab.is-active { color: var(--ink); } .rr-auth-ink { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; background: var(--paper); z-index: 1; transition: transform var(--d-content) var(--ease); } .rr-kt-field { max-width: 380px; } .rr-kt-btn { margin-top: 4px; } .rr-auth-alt { margin-top: 6px; font-family: var(--font-he); direction: rtl; font-size: 13px; color: var(--ash); } .rr-auth-alt button { background: none; border: 0; color: var(--paper); cursor: pointer; font-family: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 0; } .rr-auth-alt button:hover { color: var(--accent-red); } @media (max-width: 700px) { .rr-kt-line { font-size: 11vh; } .rr-runway--back { display: none; } .rr-auth-tab { padding: 12px 30px; } } @media (prefers-reduced-motion: reduce) { .rr-kt-line--a, .rr-kt-line--b, .rr-runway-track, .rr-walker { animation: none; } } /* ================================================================== ONBOARDING overlay ========================================================================= */ .rr-onb { position: fixed; inset: 0; z-index: 210; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; padding: clamp(28px,5vw,64px); } .rr-onb-top { display: flex; justify-content: space-between; align-items: center; } .rr-onb-skip { background: none; border: 0; color: var(--ash); cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .rr-onb-skip:hover { color: var(--paper); } .rr-onb-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 1100px; margin: 0 auto; width: 100%; } .rr-onb-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.3em; color: var(--ash); } .rr-onb-h { font-family: var(--font-display); font-size: clamp(48px, 9vw, 128px); letter-spacing: -0.03em; line-height: 0.92; margin: 18px 0; } .rr-onb-he { direction: rtl; font-family: var(--font-he); font-weight: 500; font-size: clamp(18px,2.4vw,26px); color: var(--bone); max-width: 560px; line-height: 1.5; } .rr-onb-foot { display: flex; align-items: center; gap: 24px; } .rr-onb-dots { display: flex; gap: 10px; } .rr-onb-dot { width: 28px; height: 3px; background: var(--smoke); } .rr-onb-dot.is-active { background: var(--paper); } /* ================================================================== LOGOUT confirm overlay (branded, replacing browser dialog) ========================================================================= */ .rr-modal-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(10,10,10,0.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; } .rr-modal { background: var(--paper); border: 1px solid var(--ink); width: min(520px, 92vw); padding: clamp(32px,4vw,56px); text-align: center; animation: rr-pop .4s var(--ease-out) both; } @keyframes rr-pop { from { transform: translateY(10px); } to { transform: none; } } .rr-modal h3 { font-family: var(--font-display); font-size: clamp(34px,5vw,56px); letter-spacing: -0.03em; margin: 0 0 12px; } .rr-modal p { direction: rtl; color: var(--smoke); margin: 0 0 32px; font-size: 15px; } .rr-modal-btns { display: flex; gap: 14px; justify-content: center; } /* ================================================================== GALLERY ========================================================================= */ .rr-gal-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 34px; } .rr-gal-search { flex: 1; min-width: 240px; } .rr-gal-collections { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; } .rr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 28px); } .rr-card { position: relative; cursor: pointer; } .rr-card-frame { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--bone); } .rr-card-frame.plate-paper { background: var(--paper-pure); } .rr-card-frame.plate-mint { background: var(--mint); } .rr-card-frame.plate-sand { background: var(--sand); } .rr-card-frame.plate-graphite { background: var(--graphite); } .rr-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform var(--d-content) var(--ease); } .rr-card:hover .rr-card-img { transform: scale(1.03); } .rr-card-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; opacity: 0; transition: opacity var(--d-hover) var(--ease); } .rr-card:hover .rr-card-top { opacity: 1; } .rr-icon-btn { width: 34px; height: 34px; border-radius: 999px; background: var(--paper); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--ink); transition: background var(--d-hover) var(--ease), color var(--d-hover) var(--ease); } .rr-icon-btn:hover { background: var(--ink); color: var(--paper); } .rr-card-badge { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 4px 8px; opacity: 0; transition: opacity var(--d-hover) var(--ease); } .rr-card:hover .rr-card-badge { opacity: 1; } .rr-card-cap { direction: rtl; font-size: 12px; color: var(--smoke); margin-top: 10px; line-height: 1.4; } .rr-card.sel .rr-card-frame { outline: 2px solid var(--ink); outline-offset: 3px; } /* lightbox */ .rr-lightbox { position: fixed; inset: 0; z-index: 320; background: rgba(10,10,10,0.92); display: flex; align-items: center; justify-content: center; padding: 40px; } .rr-lightbox-img { max-height: 84vh; max-width: 70vw; object-fit: contain; background: var(--paper); } .rr-lightbox-meta { position: absolute; bottom: 88px; left: 0; right: 0; text-align: center; color: var(--paper); pointer-events: none; } .rr-lightbox-close { position: absolute; top: 28px; right: 32px; } /* card dropdown menu */ .rr-menu { position: absolute; top: 50px; left: 10px; z-index: 12; background: var(--paper); border: 1px solid var(--ink); min-width: 160px; animation: rr-pop .24s var(--ease-out) both; } .rr-menu button { display: block; width: 100%; text-align: right; direction: rtl; background: none; border: 0; cursor: pointer; padding: 12px 16px; font-family: var(--font-he); font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--bone); transition: background var(--d-hover) var(--ease); } .rr-menu button:last-child { border-bottom: 0; } .rr-menu button:hover { background: var(--bone); } .rr-menu button.danger { color: var(--accent-red); } /* ================================================================== CREDITS ========================================================================= */ .rr-credits-banner { border: 1px solid var(--ink); background: var(--bone); padding: 28px 32px; direction: rtl; margin-bottom: 48px; font-size: 15px; color: var(--ink); } .rr-pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .rr-pkg { border: 1px solid var(--ink); padding: 36px 28px 30px; position: relative; text-align: center; transition: transform var(--d-content) var(--ease), background var(--d-content) var(--ease), color var(--d-content) var(--ease); } .rr-pkg:hover { transform: translateY(-6px); } .rr-pkg.best { background: var(--ink); color: var(--paper); } .rr-pkg-flag { position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%); background: var(--accent-red); color: var(--paper); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 12px; } .rr-pkg-name { direction: rtl; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); } .rr-pkg.best .rr-pkg-name { color: var(--bone); } .rr-pkg-num { font-family: var(--font-display); font-size: clamp(48px,5vw,72px); letter-spacing: -0.03em; margin: 14px 0 2px; } .rr-pkg-credits { direction: rtl; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); } .rr-pkg-price { font-family: var(--font-display); font-size: 22px; margin: 22px 0 24px; } .rr-pkg .btn { width: 100%; justify-content: center; margin-bottom: 10px; } .rr-pkg.best .btn { border-color: var(--paper); color: var(--paper); } .rr-pkg.best .btn--fill { background: var(--paper); color: var(--ink); } /* ================================================================== PROFILE / ADMIN shared bits — big stat numbers ========================================================================= */ .rr-statrow { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,72px); } .rr-stat { text-align: center; } .rr-stat-n { font-family: var(--font-display); font-size: clamp(40px,5vw,72px); letter-spacing: -0.03em; line-height: 1; } .rr-stat-l { direction: rtl; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); margin-top: 12px; } .rr-profile-card { border: 1px solid var(--ink); padding: clamp(28px,4vw,48px); display: flex; align-items: center; gap: 28px; justify-content: flex-end; direction: rtl; } .rr-avatar { width: 86px; height: 86px; border-radius: 999px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 26px; } .rr-profile-name { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.02em; } .rr-profile-meta { font-size: 13px; color: var(--smoke); margin-top: 4px; } .rr-rolebadge { display: inline-block; margin-top: 10px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; } /* admin spend panel */ .rr-spend { background: var(--ink); color: var(--paper); padding: clamp(32px,4vw,56px); direction: rtl; text-align: right; } .rr-spend-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); } .rr-spend-n { font-family: var(--font-display); font-size: clamp(56px,8vw,120px); letter-spacing: -0.03em; line-height: 1; margin: 8px 0; } .rr-spend-sub { font-size: 13px; color: var(--bone); } .rr-spend-bar { height: 4px; background: var(--smoke); margin-top: 22px; } .rr-spend-bar span { display: block; height: 100%; background: var(--accent-red); } .rr-spend-left { margin-top: 12px; font-family: var(--font-he); font-size: 13px; color: var(--bone); direction: rtl; } .rr-spend-left b { font-family: var(--font-mono); } .rr-spend-left.is-low { color: var(--accent-red); } .rr-admin-block { border: 1px solid var(--ink); padding: clamp(24px,3vw,40px); direction: rtl; } .rr-admin-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .rr-admin-h h3 { font-family: var(--font-he); font-weight: 800; font-size: 22px; margin: 0; } .rr-admin-num-badge { width: 36px; height: 36px; border-radius: 999px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; } .rr-admin-desc { color: var(--smoke); font-size: 13px; margin-bottom: 24px; } .rr-add-row { display: flex; gap: 12px; align-items: stretch; margin-bottom: 24px; } .rr-add-row .field-line { border: 1px solid var(--ink); padding: 12px 16px; } .rr-add-row .field-line.qty { max-width: 120px; text-align: center; } .rr-user-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--bone); } .rr-user-row:last-child { border-bottom: 0; } .rr-user-email { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; direction: ltr; } .rr-user-bal { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-top: 4px; } .rr-user-acts { display: flex; gap: 8px; } .rr-pill { border-radius: 999px; padding: 8px 16px; border: 1px solid var(--bone); background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; transition: all var(--d-hover) var(--ease); } .rr-pill:hover { border-color: var(--ink); } .rr-pill.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* usage chart */ .rr-chart { display: flex; align-items: flex-end; gap: 10px; height: 240px; border-bottom: 1px solid var(--ink); padding-top: 20px; } .rr-bar { flex: 1; background: var(--ink); transition: height .8s var(--ease-out); position: relative; min-height: 2px; } .rr-bar span { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; } /* ================================================================== FOOTER (oversized wordmark) ========================================================================= */ .rr-foot { border-top: 1px solid var(--ink); margin-top: 120px; padding: clamp(40px,6vw,90px) clamp(20px,5vw,64px) 50px; } .rr-foot-wm { font-family: var(--font-display); font-size: clamp(64px,18vw,260px); letter-spacing: -0.05em; line-height: 0.82; } .rr-foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); } /* ================================================================== RESPONSIVE ========================================================================= */ @media (max-width: 960px) { .rr-grid { grid-template-columns: repeat(2, 1fr); } .rr-pkg-grid { grid-template-columns: repeat(2, 1fr); } .rr-nav-mid { display: none; } } @media (max-width: 600px) { .rr-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .rr-pkg-grid { grid-template-columns: 1fr; } .rr-statrow { gap: 28px; justify-content: center; } .rr-profile-card { flex-direction: column-reverse; text-align: center; } } /* ================================================================== RUREAL Studio — pages.css Editorial elevation for Archive · Credits · Profile ========================================================================= */ /* ---------- shared: hero meters ---------- */ .rr-page-meters { display: flex; gap: clamp(22px, 3vw, 44px); margin-top: 26px; direction: rtl; flex-wrap: wrap; } .rr-meter-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); display: flex; flex-direction: column; gap: 6px; } .rr-meter-l b { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.02em; color: var(--ink); line-height: 1; } /* ================================================================== ARCHIVE — THE VAULT (dark light-table) ========================================================================= */ .rr-vault { background: var(--ink); color: var(--paper); min-height: calc(100vh - var(--nav-h) - var(--tick-h)); padding: clamp(24px,3.4vw,48px) clamp(16px,3.5vw,48px) clamp(60px,8vh,110px); } .rr-vault-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; direction: rtl; margin-bottom: clamp(20px,3vh,34px); } .rr-vault-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ash); } .rr-vault-title h1 { font-family: var(--font-display); font-size: clamp(48px,8vw,110px); letter-spacing: -0.04em; line-height: 0.9; margin: 10px 0 0; } .rr-vault-meters { display: flex; gap: clamp(18px,2.6vw,38px); } .rr-vault-meters span { display: flex; flex-direction: column; gap: 5px; } .rr-vault-meters b { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px,2.8vw,38px); letter-spacing: -0.02em; line-height: 1; } .rr-vault-meters i { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ash); } .rr-vault-meters .red b { color: var(--accent-red); } /* control strip */ .rr-vault-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; direction: rtl; border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--graphite); padding: 12px 0; margin-bottom: clamp(22px,3vh,36px); } .rr-vault-tabs, .rr-vault-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rr-vault-sep { width: 1px; height: 22px; background: var(--graphite); margin: 0 6px; } .rr-vault-tab { font-family: var(--font-he); font-weight: 600; font-size: 13px; padding: 8px 14px; border: 1px solid transparent; background: transparent; color: var(--bone); cursor: pointer; transition: all var(--d-hover) var(--ease); } .rr-vault-tab i { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--ash); margin-inline-start: 4px; } .rr-vault-tab:hover { border-color: var(--smoke); } .rr-vault-tab.is-on { background: var(--paper); color: var(--ink); } .rr-vault-tab.is-on i { color: var(--smoke); } .rr-vault-tab.dashed { border: 1px dashed var(--graphite); color: var(--ash); } .rr-vault-search { background: transparent; border: 0; border-bottom: 1px solid var(--graphite); color: var(--paper); font-family: var(--font-he); font-size: 14px; padding: 8px 2px; width: clamp(120px, 18vw, 220px); outline: none; direction: rtl; } .rr-vault-search::placeholder { color: var(--ash); } .rr-vault-search:focus { border-color: var(--paper); } .rr-vault-dl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; padding: 9px 16px; border: 1px solid var(--graphite); background: transparent; color: var(--ash); cursor: pointer; transition: all var(--d-hover) var(--ease); } .rr-vault-dl.armed { border-color: var(--accent-red); color: var(--paper); background: var(--accent-red); } .rr-vault-dl[disabled] { cursor: default; } /* the contact sheet — uniform frames on hairline grid */ .rr-sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--graphite); border: 1px solid var(--graphite); direction: rtl; } /* בלי content-visibility — הוא גרם לקפיצות בגלילה; העימוד שומר על עמוד קל */ .rr-cell { background: var(--ink); } /* כפתור "עוד יצירות" — טעינת ההמשכים בגלריה */ .rr-gal-more { display: block; margin: 20px auto 0; } /* התראת "יש יצירות חדשות" בגלריית עובדת — במקום רענון שקוטע צפייה */ .rr-gal-fresh { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 60; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 10px 16px; cursor: pointer; transform: translateY(0); transition: transform .3s var(--ease-out); } .rr-gal-fresh:hover { transform: translateY(-2px); } .rr-cell-frame { position: relative; overflow: hidden; aspect-ratio: 4/5; cursor: pointer; } .rr-cell-frame.plate-paper { background: var(--paper-pure); } .rr-cell-frame.plate-mint { background: var(--mint); } .rr-cell-frame.plate-sand { background: var(--sand); } .rr-cell-frame.plate-graphite { background: var(--graphite); } .rr-cell-idx { position: absolute; top: 8px; inset-inline-end: 12px; z-index: 2; font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.03em; color: var(--ink); opacity: 0.14; pointer-events: none; } .rr-cell-frame.plate-graphite .rr-cell-idx { color: var(--paper); } .rr-cell-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .rr-cell-frame:hover .rr-cell-img { transform: scale(1.04); } /* always-visible pick circle — top inline-start, mirroring the frame number */ .rr-cell-pick { position: absolute; top: 10px; inset-inline-start: 12px; z-index: 5; width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--ink); background: rgba(232,227,218,0.72); color: var(--paper); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; padding: 0; transition: all var(--d-hover) var(--ease); } .rr-cell-frame.plate-graphite .rr-cell-pick { border-color: var(--paper); background: rgba(10,10,10,0.4); } .rr-cell-pick:hover { transform: scale(1.12); } .rr-cell-pick.on { background: var(--accent-red); border-color: var(--accent-red); } .rr-slide-cast { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 3; background: var(--accent-red); color: var(--paper); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; padding: 4px 8px; transform: rotate(-3deg); } .rr-slide-motion { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10px; padding: 4px 8px; } /* veil slides up on hover with meta + caption + actions */ .rr-cell-veil { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--ink); color: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; transform: translateY(101%); transition: transform .3s var(--ease); } .rr-cell-frame:hover .rr-cell-veil { transform: none; } .rr-cell-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ash); } .rr-cell-cap { direction: rtl; font-family: var(--font-he); font-size: 12px; line-height: 1.4; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-cell-acts { display: flex; gap: 6px; margin-top: 4px; } .rr-cell-act { border: 1px solid var(--graphite); background: transparent; color: var(--paper); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: all var(--d-hover) var(--ease); } .rr-cell-act:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .rr-cell.sel .rr-cell-frame { outline: 2px solid var(--accent-red); outline-offset: -2px; } .rr-cell .rr-menu { z-index: 6; } .rr-vault-empty { text-align: center; padding: clamp(60px,12vh,140px) 20px; direction: rtl; } .rr-vault-empty-mark { font-family: var(--font-display); font-size: clamp(56px,10vw,150px); letter-spacing: -0.05em; line-height: 0.85; color: var(--graphite); } .rr-vault-empty p { color: var(--ash); margin-top: 18px; font-size: 15px; } @media (max-width: 960px) { .rr-sheet { grid-template-columns: repeat(2, 1fr); } } /* ================================================================== CREDITS — access passes ========================================================================= */ .rr-pass-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); direction: rtl; } .rr-pass { position: relative; border: 1px solid var(--ink); background: var(--paper); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 2px; transition: transform var(--d-content) var(--ease), box-shadow var(--d-content) var(--ease); } .rr-pass:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -26px rgba(10,10,10,0.55); } .rr-pass.best { background: var(--ink); color: var(--paper); } .rr-pass-flag { position: absolute; top: -1px; inset-inline-start: 16px; background: var(--accent-red); color: var(--paper); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 12px; } .rr-pass-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .rr-pass-name { font-family: var(--font-he); font-weight: 800; font-size: 17px; } .rr-pass-idx { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ash); } .rr-pass-num { font-family: var(--font-display); font-size: clamp(52px, 5.4vw, 84px); letter-spacing: -0.03em; line-height: 0.9; } .rr-pass-unit { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); margin-top: 8px; } .rr-pass.best .rr-pass-unit { color: var(--bone); } .rr-pass-perf { height: 0; border-top: 1px dashed var(--ash); margin: 16px -20px 14px; position: relative; } .rr-pass-perf::before, .rr-pass-perf::after { content: ''; position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--ink); } .rr-pass-perf::before { right: -8px; border-left-color: transparent; } .rr-pass-perf::after { left: -8px; border-right-color: transparent; } .rr-pass.best .rr-pass-perf::before, .rr-pass.best .rr-pass-perf::after { background: var(--paper); } .rr-pass-price { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; margin-bottom: 14px; } .rr-pass-acts { display: flex; flex-direction: column; gap: 8px; } .rr-pass.best .btn { border-color: var(--paper); color: var(--paper); } .rr-pass.best .btn--fill { background: var(--paper); color: var(--ink); } .rr-pass-code { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; color: var(--ash); direction: ltr; } .rr-pass-barcode { flex: 1; height: 16px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 7px); opacity: 0.7; } @media (max-width: 960px) { .rr-pass-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rr-pass-grid { grid-template-columns: 1fr; } } /* ================================================================== PROFILE — THE DOSSIER (dark member file) ========================================================================= */ .rr-dossier { background: var(--ink); color: var(--paper); min-height: calc(100vh - var(--nav-h) - var(--tick-h)); padding: clamp(24px,3.4vw,48px) clamp(16px,3.5vw,48px) clamp(60px,8vh,110px); } .rr-dossier-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; direction: rtl; margin-bottom: clamp(24px,3.6vh,40px); } .rr-dossier-head h1 { font-family: var(--font-display); font-size: clamp(48px,8vw,110px); letter-spacing: -0.04em; line-height: 0.9; margin: 10px 0 0; } .rr-dossier-stamp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--ash); border: 1px solid var(--graphite); padding: 10px 16px; transform: rotate(2deg); } /* editorial member header */ .rr-me-head { display: grid; grid-template-columns: 1fr minmax(300px, 400px); gap: clamp(28px,4vw,64px); align-items: center; direction: rtl; margin-bottom: clamp(30px,5vh,54px); } .rr-me-intro { direction: ltr; text-align: left; } .rr-me-name { font-family: var(--font-display); font-size: clamp(64px,11vw,160px); letter-spacing: -0.045em; line-height: 0.88; margin: 14px 0 18px; } .rr-me-name .accent { color: var(--accent-red); } .rr-me-line { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); } .rr-me-line b { font-weight: 400; } .rr-idcard.tilt { transform: rotate(-2deg); transition: transform .4s var(--ease); } .rr-idcard.tilt:hover { transform: rotate(0deg); } /* stats ledger — one flowing line, no boxes */ .rr-me-ledger { display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(14px,2vw,30px); direction: rtl; border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--graphite); padding: clamp(22px,3.4vh,38px) 0; } .rr-me-stat { display: flex; align-items: baseline; gap: 12px; } .rr-me-stat .n { font-family: var(--font-display); font-size: clamp(38px,4.6vw,72px); letter-spacing: -0.03em; line-height: 1; } .rr-me-stat .n.accent { color: var(--accent-red); } .rr-me-stat .l { font-family: var(--font-he); font-size: 13px; color: var(--ash); } .rr-me-sep { font-family: var(--font-display); font-size: clamp(22px,2.6vw,40px); color: var(--graphite); } @media (max-width: 900px) { .rr-me-head { grid-template-columns: 1fr; } .rr-idcard.tilt { transform: none; } } .rr-dossier-grid { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(20px,3vw,44px); align-items: stretch; direction: rtl; } /* paper card on dark */ .rr-idcard.paper { background: var(--paper); color: var(--ink); } .rr-idcard.paper::after { color: var(--ink); opacity: 0.06; } .rr-idcard.paper .rr-idcard-top { color: var(--smoke); } .rr-idcard.paper .rr-idcard-chip { border-color: var(--smoke); background: linear-gradient(135deg, var(--bone), var(--paper)); } .rr-idcard.paper .rr-idcard-mail { color: var(--smoke); } .rr-idcard.paper .rr-idcard-meta { color: var(--smoke); } .rr-idcard.paper .rr-idcard-barcode { background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 4px, var(--ink) 4px 6px, transparent 6px 8px); } .rr-dossier-tiles { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--graphite); } .rr-dossier-tile { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(18px,2.4vw,30px); border-inline-end: 1px solid var(--graphite); border-bottom: 1px solid var(--graphite); text-align: center; } .rr-dossier-tile:nth-child(3n) { border-inline-end: 0; } .rr-dossier-tile:nth-child(n+4) { border-bottom: 0; } .rr-dossier-tile .n { font-family: var(--font-display); font-size: clamp(34px,3.6vw,56px); letter-spacing: -0.03em; line-height: 1; } .rr-dossier-tile .n.accent { color: var(--accent-red); } .rr-dossier-tile .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); } .rr-dossier-striphead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; direction: rtl; margin: clamp(34px,5vh,56px) 0 18px; } .rr-dossier-striphead h2 { font-family: var(--font-he); font-weight: 800; font-size: 22px; margin: 0; } .rr-dossier-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px,1.2vw,18px); direction: rtl; } .rr-dossier-cell { position: relative; aspect-ratio: 3/4; overflow: hidden; cursor: pointer; } .rr-dossier-cell.plate-paper { background: var(--paper-pure); } .rr-dossier-cell.plate-mint { background: var(--mint); } .rr-dossier-cell.plate-sand { background: var(--sand); } .rr-dossier-cell.plate-graphite { background: var(--graphite); } .rr-dossier-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .rr-dossier-cell:hover img { transform: scale(1.05); } .rr-dossier-cell span { position: absolute; bottom: 6px; inset-inline-start: 8px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; color: var(--ink); background: var(--paper); padding: 2px 6px; } @media (max-width: 900px) { .rr-dossier-grid { grid-template-columns: 1fr; } .rr-dossier-strip { grid-template-columns: repeat(3, 1fr); } } /* ================================================================== PROFILE — member ID card + status tiles (light, legacy shell for idcard base) ========================================================================= */ .rr-prof-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .rr-id-row { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(20px, 3vw, 44px); align-items: stretch; direction: rtl; } .rr-idcard { background: var(--ink); color: var(--paper); padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; direction: ltr; position: relative; overflow: hidden; } .rr-idcard::after { content: 'R'; position: absolute; bottom: -14%; right: -4%; font-family: var(--font-display); font-size: 240px; line-height: 0.8; color: var(--paper); opacity: 0.05; pointer-events: none; } .rr-idcard-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; color: var(--ash); } .rr-idcard-chip { width: 30px; height: 22px; border: 1px solid var(--smoke); background: linear-gradient(135deg, var(--graphite), var(--ink)); } .rr-idcard-mono { font-family: var(--font-display); font-size: clamp(64px, 7vw, 104px); letter-spacing: -0.04em; line-height: 0.9; margin: 26px 0 18px; } .rr-idcard-name { font-family: var(--font-he); font-weight: 700; font-size: 20px; direction: rtl; text-align: left; } .rr-idcard-mail { font-family: var(--font-mono); font-size: 12px; color: var(--bone); margin-top: 4px; } .rr-idcard-meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ash); margin-top: 22px; } .rr-idcard-meta .red { color: var(--accent-red); } .rr-idcard-barcode { height: 26px; margin-top: 14px; background: repeating-linear-gradient(90deg, var(--paper) 0 1px, transparent 1px 4px, var(--paper) 4px 6px, transparent 6px 8px); opacity: 0.65; } .rr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); } .rr-tile { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(18px, 2.4vw, 30px); border-inline-end: 1px solid var(--bone); border-bottom: 1px solid var(--bone); text-align: center; } .rr-tile:nth-child(3n) { border-inline-end: 0; } .rr-tile:nth-child(n+4) { border-bottom: 0; } .rr-tile-n { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 56px); letter-spacing: -0.03em; line-height: 1; } .rr-tile-n.accent { color: var(--accent-red); } .rr-tile-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); } @media (max-width: 900px) { .rr-id-row { grid-template-columns: 1fr; } } /* ================================================================== ADMIN — control room ========================================================================= */ .rr-console { background: var(--ink); color: var(--paper); padding: clamp(20px, 2.6vw, 36px); direction: rtl; } .rr-console-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--graphite); margin-bottom: 24px; } .rr-console-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--accent-red); } .rr-console-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ash); margin-inline-end: auto; } .rr-console-seg { border-color: var(--smoke); } .rr-console-seg .seg-btn { border-color: var(--smoke); color: var(--ash); } .rr-console-seg .seg-btn.is-active { background: var(--paper); color: var(--ink); } .rr-console-grid { display: grid; grid-template-columns: minmax(240px, 1fr) auto minmax(280px, 1.2fr); gap: clamp(24px, 3vw, 48px); align-items: end; } .rr-console-spend .rr-spend-n { font-size: clamp(48px, 6vw, 96px); } .rr-console-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 20px 34px; } .rr-console-stat { display: flex; flex-direction: column; gap: 6px; text-align: center; } .rr-console-stat-n { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.02em; line-height: 1; } .rr-console-stat-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); } .rr-chart--dark { height: 170px; border-bottom-color: var(--smoke); } .rr-chart--dark .rr-bar { background: var(--paper); } .rr-chart--dark .rr-bar span { color: var(--bone); } .rr-chart-labels { display: flex; margin-top: 8px; } .rr-chart-labels span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ash); } @media (max-width: 1000px) { .rr-console-grid { grid-template-columns: 1fr; align-items: start; } } .rr-ledger { border: 1px solid var(--ink); padding: clamp(22px, 3vw, 38px); direction: rtl; margin-top: 40px; } .rr-ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; } .rr-ledger-head h3 { font-family: var(--font-he); font-weight: 800; font-size: 22px; margin: 0; } .rr-ledger-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); } .rr-ledger-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--bone); } .rr-ledger-row:last-child { border-bottom: 0; } .rr-ledger-idx { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ash); } .rr-ledger-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--bone); flex: 0 0 auto; } .rr-ledger-dot.on { background: var(--accent-red); box-shadow: 0 0 0 0 rgba(229,57,43,.6); animation: rr-pulse 1.5s var(--ease) infinite; } .rr-ledger-id { flex: 1; min-width: 0; } /* ================================================================== MODELS — CASTING (create once, reuse everywhere) + roster ========================================================================= */ .rr-casting { max-width: 1680px; margin: 0 auto; padding: clamp(40px,7vw,96px) clamp(20px,5vw,64px) 160px; } .rr-cast-hero { margin-bottom: clamp(30px,4vw,54px); } .rr-cast-hero h1 { font-family: var(--font-display); font-size: clamp(56px,10vw,140px); letter-spacing: -0.04em; line-height: 0.9; margin: 14px 0 18px; } .rr-cast-hero h1 .accent { color: var(--accent-red); } .rr-cast-hero p { direction: rtl; max-width: 460px; color: var(--smoke); font-size: 16px; line-height: 1.55; margin: 0; } /* casting sheet */ .rr-cast-sheet { position: relative; border: 1px solid var(--ink); background: var(--paper); } .rr-cast-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; } .rr-cast-sheet-body { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: clamp(26px,4vw,64px); padding: clamp(24px,3.4vw,48px); } /* polaroid ref slots */ .rr-cast-hint { color: var(--ash); font-size: 13px; line-height: 1.5; margin: 8px 0 18px; } .rr-cast-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .rr-cast-slot { position: relative; aspect-ratio: 3/4; border: 1px dashed var(--ash); background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ash); overflow: hidden; transition: all var(--d-hover) var(--ease); padding: 0; } .rr-cast-slot:hover { border-color: var(--ink); color: var(--ink); } .rr-cast-slot.filled { border-style: solid; border-color: var(--ink); } .rr-cast-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } .rr-cast-slot-plus { font-size: 22px; font-weight: 300; } .rr-cast-slot-lab { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; } .rr-cast-slot-x { position: absolute; top: 6px; inset-inline-start: 6px; width: 22px; height: 22px; border-radius: 999px; background: var(--paper); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--ink); z-index: 2; } .rr-cast-slot-n { position: absolute; bottom: 0; left: 0; right: 0; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-align: center; padding: 4px 0; } .rr-cast-refcount { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ash); margin-top: 10px; } /* fields */ .rr-cast-fields { display: flex; flex-direction: column; } .rr-cast-name { font-size: 24px; font-weight: 700; } .rr-cast-save { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 30px; } /* saved toast strip */ .rr-cast-saved { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--ink); background: var(--bone); font-family: var(--font-he); font-weight: 700; font-size: 13px; animation: rr-pop .3s var(--ease-out) both; } /* roster */ .rr-cast-roster { margin-top: clamp(48px,7vh,90px); } .rr-cast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,28px); direction: rtl; } .rr-cast-card { border: 1px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; } .rr-cast-card-head { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--bone); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ash); } .rr-cast-card-menu { background: none; border: 0; cursor: pointer; font-size: 15px; color: var(--ink); padding: 0 4px; } .rr-cast-card-figs { display: grid; grid-template-columns: 2fr 1fr; gap: 1px; background: var(--bone); border: 0; padding: 0; cursor: pointer; } .rr-cast-card-fig { position: relative; overflow: hidden; background: var(--paper-pure); aspect-ratio: 3/4; display: block; } .rr-cast-card-fig.main { grid-row: span 3; aspect-ratio: auto; } .rr-cast-card-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; transition: transform .5s var(--ease); } .rr-cast-card-figs:hover img { transform: scale(1.03); } .rr-cast-card-base { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px; direction: rtl; } .rr-cast-card-name { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.02em; } .rr-cast-card-desc { font-size: 12px; color: var(--smoke); margin-top: 4px; line-height: 1.4; } .rr-cast-card-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ash); margin-top: 8px; } .rr-cast-card-go { border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-he); font-weight: 700; font-size: 13px; padding: 10px 16px; cursor: pointer; white-space: nowrap; transition: all var(--d-hover) var(--ease); } .rr-cast-card-go:hover { background: var(--ink); color: var(--paper); } @media (max-width: 1100px) { .rr-cast-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .rr-cast-sheet-body { grid-template-columns: 1fr; } } @media (max-width: 640px) { .rr-cast-grid { grid-template-columns: 1fr; } .rr-cast-slots { grid-template-columns: repeat(2, 1fr); } } /* ================================================================== MODELS — two paths + FACE LAB (synthetic casting) ========================================================================= */ .rr-cast-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); margin-bottom: clamp(20px,3vh,34px); } .rr-cast-path { position: relative; background: transparent; border: 0; cursor: pointer; text-align: right; padding: clamp(18px,2.6vw,30px); display: flex; flex-direction: column; gap: 6px; transition: background var(--d-hover) var(--ease), color var(--d-hover) var(--ease); } .rr-cast-path + .rr-cast-path { border-inline-start: 1px solid var(--ink); } .rr-cast-path.is-on { background: var(--ink); color: var(--paper); } .rr-cast-path-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ash); } .rr-cast-path-name { font-family: var(--font-he); font-weight: 800; font-size: clamp(17px,1.8vw,22px); } .rr-cast-path-desc { font-family: var(--font-he); font-size: 12px; color: var(--ash); line-height: 1.45; } .rr-cast-path.is-on .rr-cast-path-desc { color: var(--bone); } /* the lab — dark, cinematic */ .rr-lab { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); } .rr-lab-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--graphite); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--bone); } .rr-lab-head-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-red); animation: rr-pulse 1.8s var(--ease) infinite; } .rr-lab-body { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; } .rr-lab-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); } /* sources column */ .rr-lab-srcs { padding: clamp(22px,3vw,40px); border-inline-end: 1px solid var(--graphite); } .rr-lab-hint { color: var(--ash); font-size: 13px; line-height: 1.55; margin: 10px 0 20px; } .rr-lab-srcgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .rr-lab-src { position: relative; aspect-ratio: 3/4; border: 1px dashed var(--smoke); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--smoke); overflow: hidden; padding: 0; transition: all var(--d-hover) var(--ease); } .rr-lab-src:hover { border-color: var(--paper); color: var(--paper); } .rr-lab-src.filled { border-style: solid; border-color: var(--paper); } .rr-lab-src img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1) brightness(1.15); } .rr-lab-src-plus { font-size: 24px; font-weight: 300; } .rr-lab-src-x { position: absolute; top: 6px; inset-inline-start: 6px; width: 22px; height: 22px; border-radius: 999px; background: var(--ink); border: 1px solid var(--paper); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 10px; z-index: 2; } .rr-lab-src-n { position: absolute; bottom: 0; left: 0; right: 0; background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-align: center; padding: 4px 0; } .rr-lab-mix { width: 100%; margin-top: 20px; border: 1px solid var(--paper); background: var(--paper); color: var(--ink); font-family: var(--font-he); font-weight: 800; font-size: 16px; padding: 16px; cursor: pointer; transition: all var(--d-hover) var(--ease); } .rr-lab-mix:hover { background: var(--accent-red); border-color: var(--accent-red); color: var(--paper); } .rr-lab-mix:disabled { opacity: 0.35; pointer-events: none; } .rr-lab-note { font-family: var(--font-he); font-size: 12px; color: var(--ash); margin-top: 10px; text-align: center; } /* synthesis stage */ .rr-lab-stage { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .rr-lab-idle { text-align: center; padding: 40px; } .rr-lab-idle-mark { font-family: var(--font-display); font-size: clamp(40px,5vw,72px); letter-spacing: -0.03em; line-height: 0.95; color: var(--graphite); -webkit-text-stroke: 1px var(--smoke); } .rr-lab-idle p { color: var(--ash); font-size: 14px; margin-top: 18px; max-width: 320px; } .rr-lab-mixing { position: relative; text-align: center; width: 100%; height: 100%; min-height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .rr-lab-r { font-family: var(--font-display); font-size: clamp(160px,22vw,300px); line-height: 1; background: linear-gradient(to top, var(--accent-red) calc(var(--p) * 100%), var(--graphite) calc(var(--p) * 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; } .rr-lab-scan { position: absolute; left: 0; right: 0; height: 26%; top: -26%; background: linear-gradient(to bottom, transparent, rgba(229,57,43,0.16), transparent); animation: rr-scan 1.6s var(--ease) infinite; } .rr-lab-mixmeta { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; margin-top: 8px; } .rr-lab-mixstage { font-family: var(--font-he); font-size: 13px; color: var(--ash); margin-top: 6px; } /* result */ .rr-lab-done { display: flex; align-items: center; gap: clamp(24px,3vw,48px); padding: clamp(24px,3vw,44px); flex-wrap: wrap; justify-content: center; } .rr-lab-result { position: relative; width: min(300px, 60vw); } .rr-lab-result img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 0; } /* לפני/אחרי בריטושי הריאליזם (SKIN/HAIR): שכבת "לפני" נחתכת לפי קו שגוררים */ .rr-lab-cmp-before { position: absolute; inset: 0; pointer-events: none; } .rr-lab-cmp-before img { width: 100%; height: 100%; } .rr-lab-cmp-tag { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; background: var(--ink); color: var(--paper); border: 1px solid var(--smoke); padding: 3px 8px; } .rr-lab-cmp-tag.is-after { left: auto; right: 10px; } .rr-lab-cmp-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--paper); pointer-events: none; } .rr-lab-cmp-line::after { content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--paper); color: var(--ink); font-size: 9px; letter-spacing: 0.05em; padding: 4px 6px; white-space: nowrap; } .rr-lab-cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; touch-action: none; } .rr-lab-dl { position: absolute; bottom: 10px; right: 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; background: var(--ink); color: var(--paper); border: 1px solid var(--smoke); padding: 4px 9px; text-decoration: none; } .rr-lab-dl:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .rr-lab-adopt { display: flex; flex-direction: column; gap: 14px; min-width: 240px; } .rr-lab-name { background: transparent; border: 0; border-bottom: 1px solid var(--smoke); color: var(--paper); font-family: var(--font-he); font-size: 22px; font-weight: 700; padding: 10px 2px; outline: none; direction: rtl; } .rr-lab-name::placeholder { color: var(--smoke); font-weight: 400; } .rr-lab-name:focus { border-color: var(--paper); } .rr-lab-adopt-btn { border: 1px solid var(--paper); background: var(--paper); color: var(--ink); font-family: var(--font-he); font-weight: 800; font-size: 15px; padding: 14px; cursor: pointer; transition: all var(--d-hover) var(--ease); } .rr-lab-adopt-btn:hover { background: var(--accent-red); border-color: var(--accent-red); color: var(--paper); } .rr-lab-adopt-btn:disabled { opacity: 0.35; pointer-events: none; } .rr-lab + .rr-cast-saved { border-top: 0; } @media (max-width: 900px) { .rr-lab-body { grid-template-columns: 1fr; } .rr-lab-srcs { border-inline-end: 0; border-bottom: 1px solid var(--graphite); } } /* arch frame hover shows card-top actions */ .rr-arch-frame:hover .rr-card-top { opacity: 1; } /* ================================================================== GALLERY — scalable albums: dropdown panel + open-album band + share ========================================================================= */ .rr-alb-panel { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40; width: 300px; background: var(--ink); border: 1px solid var(--smoke); animation: rr-pop .24s var(--ease-out) both; } .rr-alb-search { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--graphite); padding: 12px 16px; font-family: var(--font-he); font-size: 13px; color: var(--paper); outline: none; direction: rtl; } .rr-alb-search::placeholder { color: var(--ash); } .rr-alb-list { max-height: 280px; overflow-y: auto; } .rr-alb-none { padding: 18px 16px; color: var(--ash); font-size: 13px; } .rr-alb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--graphite); cursor: pointer; padding: 12px 16px; color: var(--bone); text-align: right; transition: background var(--d-hover) var(--ease); } .rr-alb-row:hover { background: var(--graphite); } .rr-alb-row.is-on { background: var(--paper); color: var(--ink); } .rr-alb-row-name { font-family: var(--font-he); font-weight: 600; font-size: 13px; } .rr-alb-row-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ash); display: flex; gap: 10px; align-items: center; } .rr-alb-row.is-on .rr-alb-row-meta { color: var(--smoke); } .rr-alb-row-meta i { font-style: normal; } .rr-alb-new { display: block; width: 100%; background: none; border: 0; cursor: pointer; padding: 13px 16px; color: var(--paper); font-family: var(--font-he); font-weight: 700; font-size: 13px; text-align: right; transition: background var(--d-hover) var(--ease); } .rr-alb-new:hover { background: var(--graphite); } .rr-alb-newrow { display: flex; gap: 8px; padding: 10px 12px; } .rr-alb-newrow input { flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--smoke); padding: 8px 2px; font-family: var(--font-he); font-size: 13px; color: var(--paper); outline: none; direction: rtl; } .rr-alb-newrow input::placeholder { color: var(--ash); } .rr-alb-newrow button { border: 1px solid var(--paper); background: var(--paper); color: var(--ink); cursor: pointer; font-family: var(--font-he); font-weight: 700; font-size: 12px; padding: 8px 14px; } .rr-alb-newrow button:disabled { opacity: 0.35; pointer-events: none; } /* open album band */ .rr-alb-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid var(--smoke); padding: 14px 18px; margin-bottom: 18px; } .rr-alb-band-id { display: flex; align-items: center; gap: 14px; } .rr-alb-band-folder { font-size: 20px; color: var(--paper); } .rr-alb-band-name { font-family: var(--font-he); font-weight: 800; font-size: 18px; color: var(--paper); } .rr-alb-band-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ash); margin-top: 3px; } .rr-alb-member { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--smoke); color: var(--bone); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; } .rr-alb-band-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rr-alb-share { display: flex; gap: 8px; align-items: center; } .rr-alb-share input { background: transparent; border: 0; border-bottom: 1px solid var(--smoke); min-width: 210px; padding: 8px 2px; font-family: var(--font-mono); font-size: 12px; color: var(--paper); outline: none; } .rr-alb-share input::placeholder { color: var(--ash); } .rr-alb-share button { border: 1px solid var(--paper); background: var(--paper); color: var(--ink); cursor: pointer; font-family: var(--font-he); font-weight: 700; font-size: 12px; padding: 8px 14px; } .rr-alb-share button:disabled { opacity: 0.35; pointer-events: none; } .rr-alb-share-msg { flex-basis: 100%; font-family: var(--font-he); font-size: 12px; font-weight: 600; padding-top: 8px; } .rr-alb-share-msg.ok { color: var(--bone); } .rr-alb-share-msg.err { color: var(--accent-red); } /* ================================================================== RUREAL Studio — studio.css The composer cockpit · feed · lightbox · compare · moodboard · queue ========================================================================= */ .rr-studio-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; } .rr-studio-hello { direction: rtl; max-width: 420px; color: var(--smoke); font-size: 16px; line-height: 1.55; margin-top: 18px; } /* ================================================================== STUDIO STAGE — the casting room (dark, full-bleed) + floating composer ========================================================================= */ .rr-studio-stage { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; } .rr-stage { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: calc(100vh - var(--nav-h) - var(--tick-h)); padding: clamp(18px,2.4vw,30px) clamp(16px,4vw,54px) clamp(330px,44vh,390px); } /* top rail */ .rr-stage-top { display: flex; align-items: center; gap: 18px; direction: rtl; flex-wrap: wrap; position: relative; z-index: 4; } .rr-stage .rr-ws-modes { display: inline-flex; border: 1px solid var(--smoke); } .rr-stage .rr-ws-mode { font-family: var(--font-he); font-weight: 600; font-size: 13px; padding: 9px 16px; background: transparent; border: 0; border-inline-start: 1px solid var(--smoke); color: var(--ash); cursor: pointer; transition: all var(--d-hover) var(--ease); } .rr-stage .rr-ws-mode:first-child { border-inline-start: 0; } .rr-stage .rr-ws-mode.is-active { background: var(--paper); color: var(--ink); } .rr-stage-meters { display: flex; gap: 22px; margin-inline: auto; flex-wrap: wrap; } .rr-meter { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-mono); font-size: 13px; color: var(--paper); letter-spacing: 0.02em; direction: ltr; } .rr-meter i { font-style: normal; font-size: 9px; letter-spacing: 0.18em; color: var(--ash); } .rr-stage-galink { background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--bone); white-space: nowrap; transition: color var(--d-hover) var(--ease); } .rr-stage-galink:hover { color: var(--paper); } /* kinetic backdrop word */ .rr-stage-back { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; } .rr-stage-backline { font-family: var(--font-display); font-size: clamp(80px, 16vw, 260px); letter-spacing: -0.04em; line-height: 0.8; color: var(--paper); opacity: 0.05; white-space: nowrap; text-transform: uppercase; } /* scene */ .rr-stage-scene { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40vh; } .rr-stage-spot { position: absolute; top: 50%; left: 50%; width: min(760px, 84vw); height: min(760px, 84vw); transform: translate(-50%, -54%); background: radial-gradient(circle, rgba(232,227,218,0.16), rgba(232,227,218,0.05) 42%, transparent 66%); pointer-events: none; } .rr-stage-floor { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: min(520px, 70vw); height: 26px; background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%); pointer-events: none; } /* hero figure */ .rr-stage-hero { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; } .rr-stage-fig { position: relative; height: clamp(240px, calc(100vh - 590px), 520px); cursor: pointer; animation: rr-walk-in .7s var(--ease-out) both; } .rr-stage-fig img { height: 100%; width: auto; object-fit: contain; filter: grayscale(0.1) contrast(1.03); display: block; } @keyframes rr-walk-in { from { transform: translateX(4%) scale(0.975); } to { transform: none; } } .rr-stage-cast { position: absolute; top: 8%; inset-inline-start: -8px; background: var(--accent-red); color: var(--paper); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; padding: 5px 9px; transform: rotate(-4deg); } .rr-stage-herometa { display: flex; align-items: center; gap: 16px; margin-top: 20px; direction: rtl; } .rr-stage-fr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ash); } .rr-stage-name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; } .rr-stage-heroacts { display: flex; gap: 8px; } .rr-stage-pick { font-family: var(--font-he); font-weight: 600; font-size: 13px; padding: 9px 16px; border: 1px solid var(--smoke); background: transparent; color: var(--bone); cursor: pointer; transition: all var(--d-hover) var(--ease); } .rr-stage-pick:hover { border-color: var(--paper); color: var(--paper); } .rr-stage-pick.on { background: var(--accent-red); border-color: var(--accent-red); color: var(--paper); } .rr-stage-mini { width: 40px; height: 38px; border: 1px solid var(--smoke); background: transparent; color: var(--bone); cursor: pointer; font-size: 15px; transition: all var(--d-hover) var(--ease); } .rr-stage-mini:hover { border-color: var(--paper); color: var(--paper); } /* rendering — the R monogram fills with progress; readout sits BESIDE it so the block stays short and never slips under the fixed lineup/composer */ .rr-genrow { display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); direction: rtl; } .rr-genmark { position: relative; height: clamp(180px, calc(100vh - 640px), 340px); aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; } .rr-genmark-ghost, .rr-genmark-fill i { font-family: var(--font-display); font-size: clamp(150px, calc(80vh - 510px), 290px); line-height: 1; letter-spacing: -0.04em; } .rr-genmark-ghost { color: transparent; -webkit-text-stroke: 1px var(--smoke); } .rr-genmark-fill { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; transition: height .3s var(--ease); } .rr-genmark-fill i { font-style: normal; color: var(--paper); display: block; } .rr-genmark-scan { position: absolute; left: -12%; right: -12%; height: 2px; background: var(--accent-red); box-shadow: 0 0 14px rgba(229,57,43,0.8); animation: rr-genscan 1.7s var(--ease) infinite; } @keyframes rr-genscan { 0% { top: 4%; } 50% { top: 96%; } 100% { top: 4%; } } .rr-gen-readout { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; direction: rtl; text-align: right; } .rr-gen-pct { font-family: var(--font-display); font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.02em; } .rr-gen-pct i { font-style: normal; font-size: 0.5em; color: var(--ash); } .rr-gen-stage { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone); display: inline-flex; align-items: center; gap: 9px; } .rr-gen-brief { max-width: 260px; font-family: var(--font-he); font-size: 13px; color: var(--ash); line-height: 1.5; } /* reveal flash when the figure enters */ .rr-stage-flash { position: absolute; inset: -8%; z-index: 6; background: var(--paper); pointer-events: none; animation: rr-flash .7s var(--ease-out) both; } @keyframes rr-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } } .rr-caststamp-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-red); box-shadow: 0 0 0 0 rgba(229,57,43,.6); animation: rr-pulse 1.5s var(--ease) infinite; } /* scene arrows */ .rr-stage-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 54px; height: 54px; border-radius: 999px; border: 1px solid var(--smoke); background: rgba(10,10,10,0.4); color: var(--paper); cursor: pointer; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all var(--d-hover) var(--ease); } .rr-stage-arrow:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .rr-stage-arrow.next { left: clamp(6px, 3vw, 40px); } .rr-stage-arrow.prev { right: clamp(6px, 3vw, 40px); } /* empty stage */ .rr-stage-empty { position: relative; z-index: 3; text-align: center; direction: rtl; } .rr-stage-empty-mark { font-family: var(--font-display); font-size: clamp(56px,12vw,180px); letter-spacing: -0.05em; line-height: 0.8; } .rr-stage-empty-h { font-family: var(--font-he); font-weight: 800; font-size: clamp(22px,3vw,34px); margin-top: 12px; } .rr-stage-empty-p { max-width: 440px; margin: 16px auto 0; color: var(--bone); font-size: 15px; line-height: 1.6; } /* lineup — in the wings, sits inside the composer stack, always above the bar */ .rr-stage-lineup { display: flex; gap: 10px; justify-content: center; flex-wrap: nowrap; margin-bottom: 10px; overflow-x: auto; padding: 2px; } .rr-stage-thumb { position: relative; width: 74px; height: 96px; border: 1px solid var(--smoke); background: var(--graphite); cursor: pointer; overflow: hidden; padding: 0; transition: all var(--d-hover) var(--ease); flex: 0 0 auto; } .rr-stage-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: opacity var(--d-hover) var(--ease); } .rr-stage-thumb:hover img { opacity: 1; } .rr-stage-thumb.is-focus { border-color: var(--paper); } .rr-stage-thumb.is-focus img { opacity: 1; } .rr-stage-thumb.is-focus::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--paper); } .rr-stage-thumb.picked::before { content: ''; position: absolute; inset: 0; border: 2px solid var(--accent-red); z-index: 2; } .rr-stage-thumb-n { position: absolute; top: 4px; inset-inline-start: 5px; font-family: var(--font-mono); font-size: 9px; color: var(--paper); z-index: 3; text-shadow: 0 1px 2px rgba(0,0,0,0.8); } .rr-stage-thumb.loading { display: flex; align-items: center; justify-content: center; } .rr-stage-thumb.loading span { font-family: var(--font-display); font-size: 15px; color: var(--bone); } @media (max-width: 640px) { .rr-stage-meters { gap: 14px; width: 100%; order: 3; margin-inline: 0; } .rr-stage-fig { height: 44vh; } .rr-stage-arrow { width: 44px; height: 44px; font-size: 20px; } } /* ================================================================== FLOATING COMPOSER ========================================================================= */ .rr-fc { position: fixed; bottom: clamp(16px,3vh,30px); left: 50%; transform: translateX(-50%); z-index: 76; width: min(940px, 94vw); direction: rtl; } .rr-fc-pop { background: var(--ink); color: var(--paper); border: 1px solid var(--graphite); padding: 18px 20px; margin-bottom: 10px; animation: rr-pop .28s var(--ease-out) both; } .rr-fc-pop-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); margin-bottom: 14px; } .rr-fc-pop .rr-preset-pill { border-color: var(--smoke); color: var(--bone); } .rr-fc-pop .rr-preset-pill:hover { border-color: var(--paper); color: var(--paper); } .rr-fc-pop .rr-preset-pill.is-active { background: var(--paper); color: var(--ink); border-color: var(--paper); } .rr-fc-pop .rr-mood-cell { border-color: var(--smoke); } .rr-fc-pop .rr-mood-add { border-color: var(--smoke); color: var(--bone); } .rr-fc-bar { background: var(--ink); color: var(--paper); border: 1px solid var(--graphite); padding: 16px 18px 14px; box-shadow: 0 24px 60px -30px rgba(10,10,10,0.7); } .rr-fc-brief { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--graphite); } .rr-fc-brief-t { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.02em; color: var(--paper); } .rr-fc-brief-m { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); } /* G97: התמונות המצורפות בשורה משלהן ותיבת הטקסט תמיד ברוחב מלא — גם עם המון תמונות */ .rr-fc-top { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .rr-fc-refs { display: flex; gap: 7px; flex-shrink: 0; padding-top: 2px; flex-wrap: wrap; max-width: 100%; } .rr-fc-refs:empty { display: none; } .rr-fc-ref { width: 46px; height: 46px; border: 1px dashed var(--smoke); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ash); position: relative; overflow: hidden; transition: all var(--d-hover) var(--ease); } .rr-fc-ref:hover { border-color: var(--paper); color: var(--paper); } .rr-fc-ref .rr-ref-plus { font-size: 18px; font-weight: 300; } .rr-fc-ref.filled { border-style: solid; border-color: var(--paper); } .rr-fc-ref.filled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rr-fc-ref .rr-ref-x { top: 2px; left: 2px; width: 16px; height: 16px; font-size: 9px; background: var(--ink); color: var(--paper); border-color: var(--paper); } .rr-fc-prompt { flex: 1 1 auto; width: 100%; min-width: 0; background: transparent; border: 0; resize: none; outline: none; direction: rtl; font-family: var(--font-he); font-weight: 500; font-size: clamp(16px,1.6vw,20px); line-height: 1.4; color: var(--paper); padding: 4px 2px; min-height: 46px; max-height: 220px; overflow-y: auto; } .rr-fc-prompt::placeholder { color: var(--ash); font-weight: 400; } .rr-fc-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--graphite); flex-wrap: wrap; } .rr-fc-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rr-fc-pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 9px 13px; border: 1px solid var(--smoke); background: transparent; color: var(--bone); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: all var(--d-hover) var(--ease); } .rr-fc-pill:hover { border-color: var(--paper); color: var(--paper); } .rr-fc-pill.is-on, .rr-fc-pill.is-open { background: var(--paper); color: var(--ink); border-color: var(--paper); } .rr-fc-g { color: var(--accent-red); font-size: 9px; } .rr-fc-caret { color: var(--ash); transform: rotate(90deg); display: inline-block; } .rr-fc-modelwrap { position: relative; } .rr-fc-menu { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; background: var(--ink); border: 1px solid var(--smoke); min-width: 180px; animation: rr-pop .2s var(--ease-out) both; z-index: 5; } .rr-fc-menu button { display: block; width: 100%; text-align: right; direction: rtl; background: none; border: 0; border-bottom: 1px solid var(--graphite); color: var(--bone); cursor: pointer; padding: 11px 14px; font-family: var(--font-mono); font-size: 12px; transition: background var(--d-hover) var(--ease); } .rr-fc-menu button:last-child { border-bottom: 0; } .rr-fc-menu button:hover, .rr-fc-menu button.is-active { background: var(--graphite); color: var(--paper); } .rr-fc-step { display: inline-flex; align-items: center; border: 1px solid var(--smoke); } .rr-fc-step button { background: transparent; border: 0; color: var(--bone); cursor: pointer; width: 30px; height: 34px; font-size: 15px; transition: background var(--d-hover) var(--ease); } .rr-fc-step button:hover { background: var(--graphite); color: var(--paper); } .rr-fc-step span { font-family: var(--font-mono); font-size: 11px; color: var(--bone); padding: 0 8px; min-width: 34px; text-align: center; } .rr-fc-gen { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 22px; background: var(--paper); color: var(--ink); border: 1px solid var(--paper); cursor: pointer; display: inline-flex; align-items: center; gap: 12px; transition: opacity var(--d-hover) var(--ease); } .rr-fc-gen:hover { opacity: 0.85; } .rr-fc-gen[disabled] { opacity: 0.4; pointer-events: none; } .rr-fc-cost { font-family: var(--font-display); font-size: 14px; letter-spacing: 0; color: var(--accent-red); } @media (max-width: 640px) { .rr-ws-grid { grid-template-columns: repeat(2, 1fr); } .rr-fc-controls { flex-direction: column; align-items: stretch; } .rr-fc-gen { justify-content: center; } .rr-fc-left { justify-content: center; } } @media (max-width: 1100px) and (min-width: 641px) { .rr-ws-grid { grid-template-columns: repeat(3, 1fr); } } /* mode bar */ .rr-mode-bar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 28px; direction: rtl; } .rr-mode-desc { direction: rtl; color: var(--ash); font-size: 13px; } /* ================================================================== COMPOSER ========================================================================= */ .rr-composer { border: 1px solid var(--ink); background: var(--paper); direction: rtl; display: grid; grid-template-columns: 1fr; } .rr-comp-pad { padding: clamp(22px, 3vw, 40px); } /* shared field label */ .rr-field-label { direction: rtl; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); margin-bottom: 12px; } /* preset pills — single line, calm */ .rr-preset-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; direction: rtl; } .rr-preset-pill { border: 1px solid var(--bone); padding: 9px 16px; cursor: pointer; background: transparent; font-family: var(--font-he); font-weight: 500; font-size: 14px; color: var(--smoke); transition: all var(--d-hover) var(--ease); white-space: nowrap; } .rr-preset-pill:hover { border-color: var(--ink); color: var(--ink); } .rr-preset-pill.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* inline reference row — compact, secondary */ .rr-ref-inline { margin-bottom: 6px; } .rr-ref-mini-row { display: flex; gap: 10px; direction: rtl; } .rr-ref-mini { width: 64px; height: 64px; border: 1px dashed var(--ash); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ash); transition: all var(--d-hover) var(--ease); position: relative; overflow: hidden; } .rr-ref-mini:hover { border-color: var(--ink); color: var(--ink); } .rr-ref-mini .rr-ref-plus { font-size: 22px; font-weight: 300; } .rr-ref-mini.filled { border-style: solid; border-color: var(--ink); } .rr-ref-mini.filled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rr-ref-x { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 999px; background: var(--paper); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 10px; z-index: 2; } /* big prompt */ .rr-prompt-wrap { position: relative; margin-bottom: 30px; } .rr-prompt { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink); resize: none; font-family: var(--font-he); font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; line-height: 1.35; color: var(--ink); outline: none; padding: 6px 0 18px; direction: rtl; } .rr-prompt::placeholder { color: var(--ash); font-weight: 400; } /* moodboard drawer */ .rr-mood-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; color: var(--smoke); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; transition: color var(--d-hover) var(--ease); } .rr-mood-toggle:hover { color: var(--ink); } .rr-mood { border: 1px solid var(--bone); padding: 18px; margin-top: 16px; animation: rr-pop .3s var(--ease-out) both; } .rr-mood-grid { display: flex; gap: 10px; flex-wrap: wrap; direction: rtl; } .rr-mood-cell { width: 72px; height: 72px; border: 1px solid var(--ink); overflow: hidden; position: relative; } .rr-mood-cell img { width: 100%; height: 100%; object-fit: cover; } .rr-mood-add { width: 72px; height: 72px; border: 1px dashed var(--ash); display: flex; align-items: center; justify-content: center; color: var(--ash); font-size: 22px; cursor: pointer; background: transparent; } .rr-mood-add:hover { border-color: var(--ink); color: var(--ink); } .rr-swatch { width: 72px; height: 72px; } /* settings — always-visible tidy grid */ .rr-settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 28px; margin-bottom: 34px; direction: rtl; } .rr-set-field { min-width: 0; } .rr-chip-row { display: flex; gap: 8px; flex-wrap: wrap; } .rr-select { width: 100%; border: 1px solid var(--ink); background: var(--paper); padding: 12px 14px; font-family: var(--font-he); font-size: 15px; color: var(--ink); cursor: pointer; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; direction: rtl; } /* generate footer */ .rr-create-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--ink); color: var(--paper); padding: 22px clamp(22px,3vw,40px); direction: rtl; } .rr-create-l { display: flex; align-items: center; gap: 20px; } .rr-create-cost .c-n { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.02em; } .rr-create-cost .c-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); } .rr-create-cost .rr-step-kicker { color: var(--accent-red); margin-bottom: 2px; } .rr-band-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 17px 30px; border: 1px solid var(--paper); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: opacity var(--d-hover) var(--ease), background var(--d-hover) var(--ease), color var(--d-hover) var(--ease); } .rr-band-btn:hover { opacity: 0.85; } .rr-band-btn.ghost { background: transparent; color: var(--paper); } .rr-band-btn.ghost:hover { background: var(--graphite); opacity: 1; } .rr-band-btn[disabled] { opacity: 0.4; pointer-events: none; } .rr-gen-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid var(--ink); flex-wrap: wrap; } .rr-gen-cost { direction: rtl; } .rr-gen-cost .c-n { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; } .rr-gen-cost .c-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); } .rr-gen-actions { display: flex; gap: 12px; } /* ================================================================== FEED / STAGE ========================================================================= */ .rr-feed { margin-top: 64px; } .rr-feed-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; direction: rtl; } .rr-feed-head h2 { font-family: var(--font-he); font-weight: 800; font-size: 26px; margin: 0; } .rr-batch { margin-bottom: 48px; direction: rtl; } .rr-batch-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .rr-batch-prompt { font-size: 15px; color: var(--ink); flex: 1; min-width: 200px; } .rr-batch-tags { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); } .rr-batch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* a rendering job tile */ .rr-job-tile { aspect-ratio: 4/5; border: 1px solid var(--ink); position: relative; overflow: hidden; background: var(--bone); display: flex; align-items: center; justify-content: center; } .rr-job-scan { position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(to bottom, transparent, rgba(229,57,43,0.18), transparent); animation: rr-scan 1.6s var(--ease) infinite; } @keyframes rr-scan { from { top: -30%; } to { top: 100%; } } .rr-job-pct { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.02em; color: var(--ink); } .rr-job-stage { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); } /* empty state */ .rr-empty { border: 1px dashed var(--ash); padding: 80px 24px; text-align: center; direction: rtl; } .rr-empty .e-h { font-family: var(--font-display); font-size: 40px; letter-spacing: -0.02em; color: var(--bone); } .rr-empty .e-s { color: var(--ash); margin-top: 12px; font-size: 14px; } /* ================================================================== QUEUE — floating rail bottom ========================================================================= */ .rr-queue { position: fixed; top: calc(var(--nav-h) + var(--tick-h) + 16px); inset-inline-start: 22px; z-index: 70; direction: rtl; display: flex; flex-direction: column; gap: 10px; max-width: 300px; } .rr-queue-item { background: var(--ink); color: var(--paper); padding: 14px 18px; display: flex; align-items: center; gap: 14px; animation: rr-pop .4s var(--ease-out) both; border: 1px solid var(--ink); } .rr-queue-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-red); box-shadow: 0 0 0 0 rgba(229,57,43,.6); animation: rr-pulse 1.5s var(--ease) infinite; flex-shrink: 0; } @keyframes rr-pulse { 0%{box-shadow:0 0 0 0 rgba(229,57,43,.6)} 100%{box-shadow:0 0 0 9px rgba(229,57,43,0)} } .rr-queue-txt { flex: 1; } .rr-queue-title { font-size: 13px; } .rr-queue-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); margin-top: 2px; } .rr-queue-pct { font-family: var(--font-display); font-size: 18px; } /* ================================================================== LIGHTBOX actions (studio results) + COMPARE ========================================================================= */ .rr-lb-actions { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; direction: rtl; } .rr-lb-btn { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 11px 18px; transition: opacity var(--d-hover) var(--ease); } .rr-lb-btn:hover { opacity: 0.8; } .rr-lb-btn.ghost { background: transparent; color: var(--paper); } .rr-compare { position: fixed; inset: 0; z-index: 330; background: rgba(10,10,10,0.94); display: flex; align-items: center; justify-content: center; gap: 24px; padding: 60px 40px; } .rr-compare-col { flex: 1; max-width: 40vw; text-align: center; } .rr-compare-col img { width: 100%; max-height: 76vh; object-fit: contain; background: var(--paper); } .rr-compare-cap { color: var(--paper); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 16px; } /* add-to-collection sheet */ .rr-coll-sheet { position: absolute; inset-inline-end: 0; bottom: 56px; background: var(--paper); border: 1px solid var(--ink); min-width: 200px; z-index: 10; direction: rtl; animation: rr-pop .24s var(--ease-out) both; } .rr-coll-sheet button { display: block; width: 100%; text-align: right; padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--bone); cursor: pointer; font-family: var(--font-he); font-size: 13px; } .rr-coll-sheet button:hover { background: var(--bone); } .rr-coll-sheet-h { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); padding: 10px 16px 6px; } .rr-coll-sheet button.is-here { color: var(--ash); pointer-events: none; } .rr-coll-sheet button.new { font-weight: 700; } .rr-coll-new { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; } .rr-coll-new input { border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 8px 2px; font-family: var(--font-he); font-size: 14px; color: var(--ink); outline: none; direction: rtl; } .rr-coll-new input::placeholder { color: var(--ash); } .rr-coll-new .go { border: 1px solid var(--ink) !important; background: var(--ink) !important; color: var(--paper) !important; text-align: center !important; font-weight: 700; } .rr-coll-new .go:disabled { opacity: 0.35; pointer-events: none; } .rr-coll-new .go:hover { background: var(--graphite) !important; } @media (max-width: 860px) { .rr-settings-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (max-width: 760px) { .rr-batch-grid { grid-template-columns: repeat(2, 1fr); } .rr-compare { flex-direction: column; padding: 30px 16px; } .rr-compare-col { max-width: 90vw; } } /* ================================================================== RUREAL — COMPAT LAYER (חיבור לאפליקציה הקיימת; ויזואלי בלבד) ========================================================================= */ /* פלאשים על מסכי הכניסה הכהים */ .rr-flash-stack { margin: 26px auto 0; max-width: 420px; display: flex; flex-direction: column; gap: 8px; } .rr-flash { direction: rtl; font-family: var(--font-he); font-size: 13px; padding: 12px 16px; border: 1px solid var(--smoke); color: var(--bone); background: rgba(232,227,218,0.06); } .rr-flash.err { border-color: var(--accent-red); color: var(--paper); } /* פלאשים בעמודי האפליקציה */ .rr-page .rr-flash-app { direction: rtl; font-family: var(--font-he); font-size: 14px; font-weight: 600; padding: 13px 18px; border: 1px solid var(--ink); margin-bottom: 10px; background: var(--paper); } .rr-flash-app.err { background: var(--ink); color: var(--paper); } /* שדות הכניסה בפריסת טופס אמיתית */ .rr-login-form form { display: flex; flex-direction: column; gap: 18px; align-items: center; width: 100%; } .rr-login-consent { direction: rtl; display: flex; gap: 9px; align-items: flex-start; max-width: 420px; color: var(--ash); font-family: var(--font-he); font-size: 12px; line-height: 1.5; text-align: right; } .rr-login-consent input { margin-top: 2px; accent-color: var(--accent-red); } .rr-login-hint { direction: rtl; font-family: var(--font-he); font-size: 11px; color: var(--smoke); max-width: 420px; } .rr-login-row { display: flex; gap: 14px; width: 100%; max-width: 420px; } .rr-login-row .rr-login-input { max-width: none; flex: 1; } /* פעמון האדמין בניווט החדש */ .rr-nav .bell { margin-inline-start: 0; border-radius: 999px; } /* עטיפת עמוד פנימי תחת השלד החדש */ .rr-app .container { padding-top: 24px; } /* מונע קפיצת פונט של הוורדמרק */ .rr-wm, .rr-foot-wm, .rr-login-wm { font-weight: 400; } /* קישורים בלשוניות ובחלופות הכניסה — בלי קו תחתון של דפדפן */ a.rr-auth-tab { text-decoration: none; display: inline-block; } .rr-auth-alt a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; } .rr-auth-alt a:hover { color: var(--accent-red); } a.rr-nav-me, a.rr-credits-chip, a.rr-wm, a.rr-nav-link { text-decoration: none; } /* בטיחות תוכן: כניסת עמוד היא תזוזה בלבד — לעולם לא שקיפות מ-0 (כלל קשיח בעיצוב) */ main.container.rr-route-enter { opacity: 1; animation: rr-fadeup 0.8s cubic-bezier(0.16,1,0.3,1) both; } /* לשונית פעילה — מילוי נייר ישיר (חסין RTL, בלי מחוון זז) */ .rr-auth-tab.is-active { background: var(--paper); color: var(--ink); } /* ── מסך הסטודיו: תוספות תאימות לקוקפיט ── */ /* הודעות תחזוקה/קרדיטים על הבמה הכהה */ .rr-stage-note { position: relative; z-index: 4; margin-top: 14px; border: 1px solid var(--accent-red); background: rgba(229,57,43,0.12); color: var(--paper); padding: 12px 16px; font-family: var(--font-he); font-size: 14px; direction: rtl; } .rr-stage-note a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; } /* כרטיס נייר לפאנלים תפעוליים (סרוק טרנד / חותמת) בתוך הבמה */ .rr-stage-panelwrap { position: relative; z-index: 3; display: flex; justify-content: center; padding: clamp(20px, 4vh, 44px) 0; } .rr-stage-panel { background: var(--paper); color: var(--ink); width: min(680px, 94vw); padding: clamp(20px, 3vw, 32px); direction: rtl; } /* במצבי כלים אין קומפוזר צף — אין צורך במרווח התחתון הגדול */ .rr-stage.is-tools { padding-bottom: clamp(40px, 6vh, 60px); } /* וידאו על הבמה ובליינאפ */ .rr-stage-fig video { height: 100%; width: auto; max-width: 88vw; display: block; background: #000; } .rr-stage-thumb video { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: opacity var(--d-hover) var(--ease); } .rr-stage-thumb.is-focus video, .rr-stage-thumb:hover video { opacity: 1; } /* כפתור ההורדה על הבמה הוא קישור */ a.rr-stage-pick { text-decoration: none; display: inline-block; } /* שגיאות יצירה מעל הקומפוזר */ .rr-fc-errors { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .rr-fc-err { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); border: 1px solid var(--accent-red); color: var(--paper); padding: 10px 14px; font-family: var(--font-he); font-size: 13px; direction: rtl; animation: rr-pop 0.25s var(--ease-out) both; } .rr-fc-err button { background: none; border: 0; color: var(--bone); cursor: pointer; font-family: var(--font-he); font-size: 12px; } .rr-fc-err button:hover { color: var(--paper); } /* ── עמוד הדוגמנים: תוספות תאימות ── */ /* מסלולים וכרטיסים כקישורים אמיתיים */ a.rr-cast-path, span.rr-cast-path { text-decoration: none; color: inherit; } span.rr-cast-path.is-on { color: var(--paper); cursor: default; } a.rr-cast-card-figs { text-decoration: none; } a.rr-cast-card-go { text-decoration: none; display: inline-block; } .rr-cast-card-head form { display: inline; line-height: 1; } /* כפתור השמירה בגיליון — בלי ירושה מה-btn הישן */ .rr-cast-save-go { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-family: var(--font-he); font-weight: 800; font-size: 15px; padding: 16px 30px; cursor: pointer; transition: all var(--d-hover) var(--ease); } .rr-cast-save-go:hover { background: var(--graphite); } .rr-cast-save-go:disabled { opacity: 0.35; cursor: not-allowed; } /* משבצות השראה במעבדה — התצוגה נכתבת כ-background על התווית */ .rr-lab-src { background-size: cover; background-position: 50% 0; } /* שדות משניים במעבדה */ .rr-lab-vibe { width: 100%; margin-top: 18px; font-size: 14px; font-weight: 400; } .rr-lab-desc { font-size: 14px; font-weight: 400; } .rr-lab-mix + .rr-lab-mix { margin-top: 10px; } /* שורת סטטוס במעבדה */ .rr-lab-status { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--graphite); color: var(--bone); font-family: var(--font-he); font-size: 13px; direction: rtl; } /* פלאש בעמודי האפליקציה — גם בלי עטיפת rr-page */ .rr-flash-app { direction: rtl; font-family: var(--font-he); font-size: 14px; font-weight: 600; padding: 13px 18px; border: 1px solid var(--ink); margin-bottom: 10px; background: var(--paper); } /* ── הגלריה: תוספות תאימות לכספת ── */ .rr-cell-pick .pick-mark { display: none; color: var(--paper); font-size: 13px; line-height: 1; } .rr-cell-pick.on .pick-mark { display: block; } a.rr-cell-act { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* G121: כפתור "שלט" — קובץ מוכן לדפוס מהגלריה */ .rr-cell-printform { display: inline-flex; margin: 0; } .rr-cell-printform .rr-cell-act { width: auto; padding: 0 10px; font-family: var(--font-he); font-size: 11px; cursor: pointer; } .rr-cell-frame video.rr-cell-img { object-fit: cover; } .rr-cell .rr-menu { position: absolute; top: 44px; inset-inline-start: 12px; } /* ── קרדיטים / פרופיל / אדמין: תוספות תאימות ── */ .rr-pass-note { direction: rtl; font-family: var(--font-he); font-size: 12px; color: var(--ash); margin-top: 30px; max-width: 620px; } .rr-pass-acts .paypal-buttons { min-height: 44px; } a.rr-vault-tab { text-decoration: none; color: inherit; display: inline-block; } a.rr-dossier-cell { text-decoration: none; display: block; } .rr-dossier-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } a.seg-btn { text-decoration: none; display: inline-block; } /* התראות אדמין */ .rr-alerts { border: 1px solid var(--accent-red); padding: clamp(20px,2.6vw,32px); direction: rtl; margin-bottom: 28px; background: var(--paper); } .rr-alerts-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .rr-alerts-head h3 { font-family: var(--font-he); font-weight: 800; font-size: 20px; margin: 0; } .rr-alerts-count { min-width: 30px; height: 30px; border-radius: 999px; background: var(--accent-red); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; padding: 0 8px; } .rr-alert-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--bone); } .rr-alert-row:last-child { border-bottom: 0; } .rr-alert-body { flex: 1; min-width: 0; } .rr-alert-title { font-weight: 700; font-size: 14px; } .rr-alert-times { color: var(--accent-red); font-size: 12px; } .rr-alert-action { font-size: 13px; color: var(--smoke); margin-top: 3px; } .rr-alert-time { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ash); margin-top: 5px; } /* שורת הוספת קרדיטים ותוספת פר-משתמשת */ .rr-add-row .rr-cast-save-go { padding: 12px 26px; } .rr-add-row input[type="number"].qty { -moz-appearance: textfield; } .rr-topup { display: inline-flex; gap: 6px; align-items: center; } .rr-topup input[type="number"] { width: 72px; border: 1px solid var(--bone); background: transparent; padding: 8px; font-family: var(--font-mono); font-size: 11px; text-align: center; color: var(--ink); } .rr-topup input[type="number"]:focus { border-color: var(--ink); outline: none; } .rr-clear-all { margin-top: 18px; text-align: start; } /* טבלת המשתמשים */ .rr-user-search { max-width: 260px; font-size: 13px; padding: 8px 2px; } .rr-table-wrap { overflow-x: auto; } .rr-users { width: 100%; border-collapse: collapse; direction: rtl; } .rr-users th { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--ink); white-space: nowrap; } .rr-users td { padding: 12px; font-size: 13px; border-bottom: 1px solid var(--bone); white-space: nowrap; } .rr-users tr:last-child td { border-bottom: 0; } .rr-users td.num { font-family: var(--font-mono); font-size: 12px; } .rr-users tbody tr:hover { background: var(--bone); } /* ── שער "בהזמנה בלבד": הודעה חמה עם כפתור הרשמה לקורס ── */ .rr-flash.rr-flash-gate { border-color: var(--bone); color: var(--paper); background: rgba(232,227,218,0.08); text-align: center; padding: 18px 20px; } .rr-flash-gate p { margin: 0 0 14px; line-height: 1.6; font-size: 14px; } .rr-gate-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink); font-family: var(--font-he); font-weight: 800; font-size: 14px; padding: 13px 24px; text-decoration: none; transition: all var(--d-hover) var(--ease); } .rr-gate-btn:hover { background: var(--accent-red); color: var(--paper); } /* שדה ביטחון להעלאת רפרנסים (מוצג רק אם משבצות ה-JS לא נטענו) */ .rr-cast-fallback { margin-top: 12px; } .rr-cast-fallback input { width: 100%; border: 1px dashed var(--ash); padding: 12px; font-family: var(--font-he); font-size: 13px; background: transparent; } /* קובץ שנקלט אך אינו ניתן לתצוגה בדפדפן (HEIC) — סימון "נקלטה" */ .rr-cast-slot-ok { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); font-size: 22px; } .rr-cast-slot-ok small { font-family: var(--font-he); font-size: 10px; color: var(--ash); } .rr-fc-ref .rr-ref-ok { color: var(--paper); font-size: 16px; } /* ── מעבדת הסטיילים בקומפוזר ── */ .rr-style-hint { font-family: var(--font-he); font-size: 12px; color: var(--ash); margin: 0 0 12px; line-height: 1.55; direction: rtl; } .rr-style-name { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--smoke); color: var(--paper); font-family: var(--font-he); font-size: 15px; font-weight: 700; padding: 10px 2px; margin: 14px 0; outline: none; direction: rtl; } .rr-style-name::placeholder { color: var(--ash); font-weight: 400; } .rr-style-name:focus { border-color: var(--paper); } .rr-style-acts { display: flex; gap: 8px; } .rr-style-go { border: 1px solid var(--paper); background: var(--paper); color: var(--ink); font-family: var(--font-he); font-weight: 800; font-size: 13px; padding: 10px 18px; cursor: pointer; transition: all var(--d-hover) var(--ease); } .rr-style-go:hover { background: var(--accent-red); border-color: var(--accent-red); color: var(--paper); } .rr-style-go:disabled { opacity: 0.35; cursor: default; } .rr-style-cancel { border: 1px solid var(--smoke); background: transparent; color: var(--bone); font-family: var(--font-he); font-size: 13px; padding: 10px 16px; cursor: pointer; transition: all var(--d-hover) var(--ease); } .rr-style-cancel:hover { border-color: var(--paper); color: var(--paper); } .rr-style-status { margin-top: 10px; font-family: var(--font-he); font-size: 12px; color: var(--accent-red); direction: rtl; } /* שורות תפריט הסטיילים: תמונה קטנה + מחיקה */ .rr-fc-menu .rr-menu-thumb { width: 26px; height: 26px; object-fit: cover; float: left; margin-inline-start: 10px; } .rr-fc-menu .rr-menu-x { float: left; color: var(--ash); padding: 0 4px; } .rr-fc-menu .rr-menu-x:hover { color: var(--accent-red); } /* ── הבמאי (Director): יצירה בתוך שיחה ── */ .rr-dir { background: var(--ink); color: var(--paper); min-height: calc(100vh - var(--nav-h) - var(--tick-h)); display: flex; flex-direction: column; padding: clamp(18px,2.6vw,36px) clamp(16px,4vw,54px) 0; } .rr-dir-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; direction: rtl; border-bottom: 1px solid var(--graphite); padding-bottom: 16px; } .rr-dir-head h1 { font-family: var(--font-display); font-size: clamp(38px,6vw,80px); letter-spacing: -0.04em; line-height: 0.9; margin: 8px 0 0; } .rr-dir-head .accent { color: var(--accent-red); } /* G104: תפריט השיחות של הבמאי — כל שיחה נשמרת וחוזרים אליה */ .rr-dir-body { display: flex; gap: 22px; flex: 1; min-height: 0; width: min(1100px, 100%); margin: 0 auto; } .rr-dir-side { width: 220px; flex: 0 0 auto; padding-top: 22px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-bottom: 170px; } .rr-dir-new { display: block; font-family: var(--font-he); font-size: 13px; font-weight: 700; color: var(--paper); text-decoration: none; border: 1px solid var(--graphite); padding: 9px 12px; text-align: center; transition: border-color var(--d-hover) var(--ease); } .rr-dir-new:hover { border-color: var(--paper); } .rr-dir-side-item { display: flex; align-items: center; gap: 6px; border: 1px solid transparent; } .rr-dir-side-item a { flex: 1; min-width: 0; font-family: var(--font-he); font-size: 12px; color: var(--ash); text-decoration: none; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-dir-side-item a:hover { color: var(--paper); } .rr-dir-side-item.is-active { border-color: var(--graphite); background: rgba(232,227,218,0.05); } .rr-dir-side-item.is-active a { color: var(--paper); } .rr-dir-side-item form { margin: 0; } .rr-dir-side-item button { border: 0; background: transparent; color: var(--graphite); font-size: 10px; cursor: pointer; padding: 6px; } .rr-dir-side-item button:hover { color: var(--accent-red); } @media (max-width: 760px) { .rr-dir-body { flex-direction: column; gap: 0; } .rr-dir-side { width: 100%; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 12px 0 6px; gap: 8px; } .rr-dir-new { flex: 0 0 auto; } .rr-dir-side-item { flex: 0 0 auto; max-width: 180px; border-color: var(--graphite); } } .rr-dir-chat { flex: 1; overflow-y: auto; min-width: 0; padding: 22px 4px 170px; display: flex; flex-direction: column; gap: 12px; } .rr-dir-msg { max-width: 82%; padding: 13px 17px; font-family: var(--font-he); font-size: 15px; line-height: 1.6; animation: rr-pop 0.25s var(--ease-out) both; } .rr-dir-msg.user { align-self: flex-start; background: var(--paper); color: var(--ink); } .rr-dir-msg.assistant { align-self: flex-end; border: 1px solid var(--graphite); background: rgba(232,227,218,0.05); color: var(--bone); } .rr-dir-msg.err { align-self: center; border: 1px solid var(--accent-red); color: var(--paper); background: rgba(229,57,43,0.10); font-size: 13px; } .rr-dir-msg-att { display: block; width: 120px; margin-top: 10px; border: 1px solid var(--smoke); } .rr-dir-typing i { font-style: normal; display: inline-block; animation: rr-dirdot 1.2s var(--ease) infinite; } .rr-dir-typing i:nth-child(2) { animation-delay: 0.15s; } .rr-dir-typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes rr-dirdot { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } } .rr-dir-img { align-self: flex-end; width: min(400px, 82%); border: 1px solid var(--graphite); background: var(--graphite); animation: rr-pop 0.3s var(--ease-out) both; } .rr-dir-img img { width: 100%; display: block; } .rr-dir-img .cap { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ash); } .rr-dir-img .cap a { color: var(--bone); text-decoration: none; } .rr-dir-img .cap a:hover { color: var(--paper); } .rr-dir-bar { position: fixed; bottom: clamp(14px,3vh,26px); left: 50%; transform: translateX(-50%); z-index: 76; width: min(820px, 94vw); background: var(--ink); border: 1px solid var(--graphite); padding: 12px 14px; box-shadow: 0 24px 60px -30px rgba(10,10,10,0.7); } .rr-dir-row { display: flex; gap: 10px; align-items: flex-end; } .rr-dir-bar textarea { flex: 1; background: transparent; border: 0; outline: none; color: var(--paper); font-family: var(--font-he); font-size: 15px; line-height: 1.5; resize: none; max-height: 120px; padding: 9px 2px; } .rr-dir-bar textarea::placeholder { color: var(--ash); } .rr-dir-send { background: var(--accent-red); color: var(--paper); border: 0; font-family: var(--font-he); font-weight: 800; font-size: 14px; padding: 11px 22px; cursor: pointer; transition: opacity var(--d-hover) var(--ease); } .rr-dir-send:hover { opacity: 0.85; } .rr-dir-plus { width: 40px; height: 40px; border: 1px dashed var(--smoke); background: transparent; color: var(--bone); font-size: 17px; cursor: pointer; transition: all var(--d-hover) var(--ease); flex: 0 0 auto; } .rr-dir-plus:hover { border-color: var(--paper); color: var(--paper); } /* G118: עריכת פרומפט נוחה — סימון טקסט בולט על רקע כהה + כפתורי ניקוי */ .rr-fc-prompt::selection, #dir-input::selection, .lb-prompt::selection { background: var(--paper); color: var(--ink); } .rr-fc-clear, .rr-dir-clear { flex: 0 0 auto; border: 1px solid var(--smoke); background: transparent; color: var(--bone); font-family: var(--font-he); font-size: 12px; padding: 6px 12px; cursor: pointer; transition: all var(--d-hover) var(--ease); align-self: flex-start; } .rr-fc-clear:hover, .rr-dir-clear:hover { border-color: var(--paper); color: var(--paper); } .rr-dir-clear { width: 32px; height: 40px; padding: 0; } /* G119: גלריית הצוות לאדמין — תיקייה לכל עובדת */ .rr-team-folder { border: 1px solid var(--ash); margin-bottom: 14px; background: var(--paper); } .rr-team-folder summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; flex-wrap: wrap; } .rr-team-folder summary::-webkit-details-marker { display: none; } .rr-team-folder[open] summary { border-bottom: 1px solid var(--ash); } .rr-team-name { font-family: var(--font-he); font-weight: 800; font-size: 16px; color: var(--ink); } .rr-team-mail { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--graphite); } .rr-team-count { margin-inline-start: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--graphite); border: 1px solid var(--ash); padding: 3px 10px; } .rr-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 16px 18px; } .rr-team-cell { position: relative; display: block; border: 1px solid var(--ash); background: var(--bone); aspect-ratio: 3 / 4; overflow: hidden; } .rr-team-cell img, .rr-team-cell video { width: 100%; height: 100%; object-fit: cover; display: block; } .rr-team-cell:hover { border-color: var(--ink); } .rr-team-tag { position: absolute; top: 6px; inset-inline-start: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; background: var(--ink); color: var(--paper); padding: 2px 7px; } .rr-team-date { position: absolute; bottom: 0; inset-inline: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--paper); background: rgba(10,10,10,0.72); padding: 4px 8px; } /* G120: משימות לעובדות */ .rr-team-tasks { padding: 14px 18px; border-bottom: 1px solid var(--ash); display: grid; gap: 8px; } .rr-team-taskform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .rr-team-taskform .field-line { flex: 1 1 180px; } .rr-team-taskrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-he); font-size: 13px; color: var(--ink); } .rr-team-taskrow.is-done { color: var(--graphite); text-decoration: line-through; } .rr-team-taskdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-red); flex: 0 0 auto; } .rr-team-taskrow.is-done .rr-team-taskdot { background: var(--ash); } .rr-team-tasktitle { flex: 1; } .rr-team-taskstate { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--graphite); } .rr-team-taskrow button { border: 0; background: transparent; color: var(--graphite); cursor: pointer; } .rr-team-taskrow button:hover { color: var(--accent-red); } .rr-task { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border: 1px solid var(--ash); background: var(--paper); padding: 16px 20px; margin-bottom: 12px; } .rr-task.is-done { opacity: 0.55; } .rr-task-title { font-family: var(--font-he); font-weight: 800; font-size: 16px; color: var(--ink); display: block; } .rr-task-body { font-family: var(--font-he); font-size: 13px; color: var(--graphite); margin: 6px 0 0; line-height: 1.5; } .rr-task-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--graphite); display: block; margin-top: 8px; } /* G123: דד-ליין, תוצרים למשימה, ועמוד צוות מסודר */ .rr-task.is-late, .rr-team-taskrow.is-late { border-color: var(--accent-red); } .rr-task.is-late .rr-task-date { color: var(--accent-red); } .rr-team-taskrow.is-late .rr-team-taskdue { color: var(--accent-red); } .rr-team-taskdue { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--graphite); display: block; margin-top: 2px; } .rr-team-taskmain { flex: 1; min-width: 0; } .rr-team-taskfiles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .rr-team-tf { position: relative; width: 54px; height: 72px; border: 1px solid var(--ash); } .rr-team-tf img { width: 100%; height: 100%; object-fit: cover; display: block; } .rr-team-tf form { position: absolute; top: -6px; inset-inline-start: -6px; } .rr-team-tf form button { width: 16px; height: 16px; font-size: 9px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; padding: 0; line-height: 1; } .rr-task-upload { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; flex-wrap: wrap; } .rr-task-drop { flex: 1 1 240px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--smoke); padding: 14px; cursor: pointer; font-family: var(--font-he); font-size: 12px; color: var(--graphite); transition: border-color 0.2s var(--ease); } .rr-task-drop.is-over, .rr-task-drop:hover { border-color: var(--ink); color: var(--ink); } .rr-task-drop input { display: none; } .rr-task-gal { margin-top: 10px; } .rr-task-gal summary { font-family: var(--font-he); font-size: 12px; color: var(--graphite); cursor: pointer; } .rr-task-galgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; margin: 10px 0; } .rr-task-galpick { position: relative; display: block; aspect-ratio: 3 / 4; border: 1px solid var(--ash); cursor: pointer; } .rr-task-galpick img { width: 100%; height: 100%; object-fit: cover; display: block; } .rr-task-galpick input { display: none; } .rr-task-galpick .pick { position: absolute; top: 4px; inset-inline-start: 4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid var(--ink); background: var(--paper); color: transparent; } .rr-task-galpick input:checked ~ .pick { background: var(--ink); color: var(--paper); } .rr-task-galpick input:checked ~ img { outline: 2px solid var(--ink); } .rr-team-block { padding: 14px 18px; border-bottom: 1px solid var(--ash); } .rr-team-block:last-child { border-bottom: 0; } .rr-team-block-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--graphite); margin-bottom: 10px; } .rr-team-chip { font-family: var(--font-he); font-size: 11px; color: var(--graphite); border: 1px solid var(--ash); padding: 2px 10px; } .rr-team-chip.is-open { border-color: var(--accent-red); color: var(--accent-red); } .rr-team-duewrap { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-he); font-size: 12px; color: var(--graphite); } .rr-team-duewrap .field-line { max-width: 150px; } .rr-team-brands { display: flex; gap: 10px; flex-wrap: wrap; } .rr-team-brand { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--ash); padding: 10px 16px; text-decoration: none; transition: border-color 0.2s var(--ease); } .rr-team-brand:hover { border-color: var(--ink); } .rr-team-brandname { font-family: var(--font-he); font-weight: 800; font-size: 14px; color: var(--ink); } .rr-team-branddrops { font-family: var(--font-he); font-size: 11px; color: var(--graphite); } /* G124: תיקיות סטודיו בגלריה — צוות בלבד */ .rr-folders { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; } .rr-folders-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ash); } .rr-folder-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--graphite); padding: 8px 14px; text-decoration: none; color: var(--paper); transition: border-color 0.2s var(--ease); } .rr-folder-chip:hover { border-color: var(--paper); } .rr-folder-chip b { font-family: var(--font-he); font-weight: 700; font-size: 13px; } .rr-folder-chip i { font-family: var(--font-mono); font-size: 10px; font-style: normal; color: var(--ash); } .rr-folder-chip .rr-folder-by { font-family: var(--font-he); font-size: 10px; color: var(--ash); } .rr-folder-chip.is-shared { border-style: dashed; } .rr-folder-new { display: inline-flex; gap: 8px; align-items: center; } .rr-folder-new .field-line { max-width: 170px; background: transparent; color: var(--paper); border-bottom-color: var(--graphite); } .rr-vault-foldersel { background: transparent; border: 1px solid var(--graphite); color: var(--paper); font-family: var(--font-he); font-size: 12px; padding: 8px 10px; cursor: pointer; } .rr-folder-grid .rr-team-cell { border-color: var(--smoke); } .rr-folder-grid .rr-bk-photo-x { position: absolute; top: 4px; inset-inline-start: 4px; } /* G126: דוח כמויות להצעת מחיר */ .rr-qty-range { margin-bottom: 24px; } .rr-qty-total { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; } .rr-qty-big { flex: 1 1 160px; border: 1px solid var(--ink); padding: 18px 22px; } .rr-qty-n { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--ink); display: block; } .rr-qty-l { font-family: var(--font-he); font-size: 12px; color: var(--graphite); display: block; margin-top: 8px; } .rr-qty-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--bone); text-decoration: none; } .rr-qty-row:hover .rr-qty-title { color: var(--accent-red); } .rr-qty-title { font-family: var(--font-he); font-weight: 800; font-size: 15px; color: var(--ink); } .rr-qty-dates { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--graphite); } .rr-qty-items { margin-inline-start: auto; font-family: var(--font-he); font-size: 13px; color: var(--ink); } /* G128: עריכת הפרומפט בחדר הלוק */ .rr-room-prompt { width: 100%; } .rr-room-prompt summary { font-family: var(--font-he); font-size: 12px; color: var(--ash); cursor: pointer; margin-bottom: 6px; } .rr-room-prompt .bk-promptov { width: 100%; min-height: 110px; resize: vertical; font-size: 12px; line-height: 1.5; direction: ltr; text-align: left; } /* G127: ארון פר-דרופ + ציר אירועים */ .rr-dc-grid { padding: 12px 0; } .rr-dc-item { width: 76px; height: 100px; } .rr-dc-reject { display: inline-flex; gap: 8px; align-items: center; } .rr-dc-reject .field-line { max-width: 220px; } /* Brand Studio: חדר היצירה של המותג + ניהול כרטיסי סגנון */ .rr-bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; padding: 14px 22px; } .rr-bs-pick { position: relative; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--bone); padding: 8px; cursor: pointer; transition: border-color var(--d-hover) var(--ease); } .rr-bs-pick:hover { border-color: var(--smoke); } .rr-bs-pick img { width: 100%; height: 130px; object-fit: cover; display: block; background: var(--bone); } .rr-bs-pick span { font-family: var(--font-he); font-size: 12px; color: var(--ink); line-height: 1.35; } .rr-bs-pick input { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; width: 16px; height: 16px; accent-color: var(--ink); } .rr-bs-pick:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .rr-bs-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 14px 22px; } .rr-bs-result { display: flex; flex-direction: column; gap: 6px; } .rr-bs-result img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid var(--bone); display: block; } .rr-bs-cardlist { display: flex; flex-direction: column; gap: 12px; padding: 0 22px 12px; } .rr-bs-cardrow { display: flex; gap: 14px; border: 1px solid var(--bone); padding: 12px; } .rr-bs-cardrow.is-approved { border-color: var(--ink); } .rr-bs-cardrow > img { width: 84px; height: 105px; object-fit: cover; border: 1px solid var(--smoke); flex: 0 0 auto; } .rr-bs-cardbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .rr-bs-cardbody b { font-family: var(--font-he); font-size: 14px; } .rr-bs-cardstate { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--graphite); } .rr-bs-cardform { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; } .rr-bs-cardform textarea { flex: 1 1 260px; } .rr-bs-cardacts { display: flex; gap: 8px; flex-wrap: wrap; } .rr-dc-source { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 22px 4px; } .rr-dc-srcopt { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-he); font-size: 13px; color: var(--ink); cursor: pointer; } .rr-dc-srcopt input { accent-color: var(--ink); } .rr-dc-setrow { display: flex; gap: 16px; align-items: flex-start; } .rr-dc-setthumb { flex: 0 0 auto; width: 110px; border: 1px solid var(--smoke); display: block; } .rr-dc-setthumb img { display: block; width: 100%; height: 138px; object-fit: cover; } /* עוגן חזרה לכרטיס אחרי יצירה (G200) — שהכותרת הדביקה לא תסתיר אותו */ .rr-bk-look { scroll-margin-top: 90px; } /* חיווי צף "טוטאל חדש מוכן" (G201) — לחיצה גוללת לכרטיס, בלי רענון */ .rr-ready-chip { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 60; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 10px 18px; font-family: inherit; font-size: 14px; cursor: pointer; border-radius: 999px; transform: translateY(0); transition: transform .2s var(--ease-out); } .rr-ready-chip:hover { transform: translateY(-2px); } /* חדר המדיומים (G226/G227) */ .rr-md-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; } .rr-md-slot { position: relative; border: 1px solid var(--smoke); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--paper); } .rr-md-slot.has-img { border-color: var(--ink); } .rr-md-slot-en { position: absolute; top: -8px; inset-inline-end: 10px; background: var(--paper); padding: 0 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--graphite); } .rr-md-slot .rr-field-label { margin: 0; } .rr-md-file { width: 100%; font-family: 'Heebo', sans-serif; font-size: 12px; color: var(--graphite); min-width: 0; } .rr-md-file::file-selector-button { background: var(--paper); border: 1px solid var(--ink); color: var(--ink); padding: 5px 12px; font-family: 'Heebo', sans-serif; font-size: 13px; cursor: pointer; margin-inline-end: 8px; } .rr-md-file::file-selector-button:hover { background: var(--ink); color: var(--paper); } .rr-md-hint { font-family: 'Heebo', sans-serif; font-size: 12px; color: var(--graphite); overflow-wrap: anywhere; } .rr-md-thumb img { width: 62px; height: 82px; object-fit: cover; border: 1px solid var(--ink); display: block; } .rr-md-sep { margin-top: 18px; } .rr-md-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 10px; } .rr-md-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 10px; } .rr-md-shotbtn { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 12px 10px; font-family: 'Heebo', sans-serif; font-size: 14px; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .rr-md-shotbtn:hover { background: var(--ink); color: var(--paper); } .rr-md-allbtn { width: 100%; } .rr-md-err { color: var(--accent-red); font-family: 'Heebo', sans-serif; } .rr-rload.is-md { width: 100%; height: auto; aspect-ratio: 3/4; } /* בחירת טוטאל מהגלריה (G231): דיאלוג דפדוף אמיתי */ .rr-md-gopen { display: inline-block; cursor: pointer; margin-bottom: 14px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 10px 18px; font-family: 'Heebo', sans-serif; font-size: 14px; } .rr-md-gopen:hover { background: var(--ink); color: var(--paper); } .rr-md-gdialog { border: 1px solid var(--ink); background: var(--paper); padding: 18px; width: min(1100px, 92vw); max-height: 86vh; overflow-y: auto; position: relative; } /* הדיאלוג יושב מעל הסמן המעוצב של האתר - מחזירים בו את העכבר הרגיל (G234) */ html.rr-cursor-on .rr-md-gdialog, html.rr-cursor-on .rr-md-gdialog * { cursor: auto !important; } html.rr-cursor-on .rr-md-gdialog button, html.rr-cursor-on .rr-md-gdialog a { cursor: pointer !important; } .rr-md-gdialog::backdrop { background: rgba(20, 20, 20, .55); } .rr-md-gclose { position: absolute; top: 12px; inset-inline-start: 12px; border: 1px solid var(--ink); background: var(--paper); width: 30px; height: 30px; cursor: pointer; font-size: 14px; } .rr-md-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .rr-md-gpick { position: relative; border: 1px solid var(--smoke); background: var(--paper); padding: 2px; cursor: pointer; } .rr-md-gpick img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; } .rr-md-gpick i { position: absolute; top: 6px; inset-inline-start: 6px; background: var(--ink); color: var(--paper); font-style: normal; font-size: 9px; font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; padding: 1px 5px; } .rr-md-gpick.is-picked { border: 2px solid var(--ink); } .rr-md-gpick:hover { border-color: var(--ink); } .rr-md-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .rr-md-results a { position: relative; border: 1px solid var(--smoke); display: block; } .rr-md-results img { width: 100%; display: block; } .rr-md-results i { position: absolute; bottom: 0; inset-inline-start: 0; background: var(--ink); color: var(--paper); font-style: normal; font-size: 11px; padding: 2px 8px; font-family: 'Heebo', sans-serif; } /* מכסת המותג המייצר (G219) */ .rr-bk-quota { font-family: 'Heebo', sans-serif; font-size: 13px; color: var(--graphite); border: 1px solid var(--smoke); padding: 4px 12px; display: inline-block; margin-top: 8px; } .rr-bk-quota.is-low { border-color: var(--accent-red); color: var(--accent-red); } /* גיליון דמות (G218) */ .rr-bk-sheetbox { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; width: 100%; } .rr-bk-sheet-angles { display: flex; gap: 3px; } .rr-bk-sheet-angles img { width: 26px; height: 34px; object-fit: cover; border: 1px solid var(--ash); display: block; } .rr-bk-sheetbox .rr-bk-backchip.is-ok { border-color: var(--ink); color: var(--ink); } .rr-bk-sheetbox button { cursor: pointer; } /* צילום גב לפריט (G214) */ .rr-bk-backrow { display: flex; align-items: center; gap: 4px; margin-top: 2px; } .rr-bk-backchip { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; border: 1px solid var(--smoke); padding: 1px 6px; cursor: pointer; color: var(--graphite); background: var(--paper); text-decoration: none; } .rr-bk-backrow.has-back .rr-bk-backchip { border-color: var(--ink); color: var(--ink); } .rr-bk-backrow button { border: 1px solid var(--smoke); background: var(--paper); font-size: 9px; width: 16px; height: 16px; padding: 0; cursor: pointer; } /* פריט ארון שממתין לאישור האדמין (G205) */ .rr-dc-item { position: relative; } .rr-dc-item.is-pending img { opacity: .55; } /* כפתור אישור הפריט בפינה הנגדית - שלא יוסתר על ידי ה-X (G208) */ .rr-dc-item .rr-dc-okform { inset-inline-start: auto; inset-inline-end: -6px; } .rr-dc-item .rr-dc-okform button { background: var(--ink); color: var(--paper); } .rr-dc-pend { position: absolute; inset-inline-start: 4px; top: 4px; background: var(--ink); color: var(--paper); font-size: 10px; padding: 2px 6px; font-style: normal; font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; } /* מחיקת לוק מהכרטיס (G197) */ .rr-bk-lookx { background: none; border: 1px solid var(--smoke); color: var(--ink); cursor: pointer; padding: 2px 8px; font-size: 12px; } .rr-bk-lookx:hover { border-color: var(--accent-red); color: var(--accent-red); } /* בחירה בין שתי אופציות הטוטאל בעמוד הדרופ (G196) */ .rr-bk-pickrow { display: flex; gap: 8px; align-items: center; width: 100%; margin-top: 6px; } /* רקע לכל דוגמנית (G192) */ .rr-dc-charsets { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .rr-dc-charset { display: flex; align-items: center; gap: 10px; border: 1px solid var(--smoke); padding: 8px 10px; } .rr-dc-charset .rr-dc-setthumb { width: 56px; } .rr-dc-charset .rr-dc-setthumb img { height: 74px; } .rr-dc-setbody { flex: 1 1 auto; min-width: 0; } .rr-dc-event { display: flex; gap: 14px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--bone); } .rr-dc-event-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--graphite); flex: 0 0 auto; } .rr-dc-event-body { font-family: var(--font-he); font-size: 13px; color: var(--ink); } .rr-dir-attach { display: flex; gap: 8px; margin-bottom: 10px; } .rr-dir-attach .att { position: relative; width: 46px; height: 46px; border: 1px solid var(--smoke); display: flex; align-items: center; justify-content: center; color: var(--bone); } .rr-dir-attach .att img { width: 100%; height: 100%; object-fit: cover; } .rr-dir-attach .att button { position: absolute; top: -7px; inset-inline-start: -7px; width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--paper); background: var(--ink); color: var(--paper); font-size: 9px; cursor: pointer; line-height: 1; } /* משבצת בזמן גרירת תמונה מעליה */ .rr-cast-slot.is-drag, .rr-fc-ref.is-drag, .rr-lab-src.is-drag { border-style: solid; border-color: var(--accent-red); } .rr-dir-bar.is-drag { border-color: var(--accent-red); } /* רובריקות ליהוק במעבדת הפנים (מין/גיל) */ .rr-lab-seg { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--smoke); margin-top: 8px; } .rr-lab-seg button { flex: 1 1 auto; background: transparent; border: 0; border-inline-start: 1px solid var(--smoke); color: var(--bone); font-family: var(--font-he); font-weight: 600; font-size: 12px; padding: 9px 10px; cursor: pointer; transition: all var(--d-hover) var(--ease); white-space: nowrap; } .rr-lab-seg button:first-child { border-inline-start: 0; } .rr-lab-seg button:hover { color: var(--paper); } .rr-lab-seg button.is-active { background: var(--paper); color: var(--ink); } /* הודעת כישלון על במת המעבדה */ .rr-lab-errtext { color: var(--paper); font-family: var(--font-he); font-size: 15px; line-height: 1.6; max-width: 380px; margin: 18px auto 0; border: 1px solid var(--accent-red); background: rgba(229,57,43,0.10); padding: 14px 18px; direction: rtl; } /* SKIN: כפתור המעבר השני לעור אמיתי — מתאר בהיר על הבמה הכהה */ .rr-lab-skinbtn { background: transparent; color: var(--paper); border: 1px solid var(--smoke); margin-top: 10px; } .rr-lab-skinbtn span { font-family: var(--font-mono); letter-spacing: 0.14em; } .rr-lab-skinbtn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); } /* ריטושי ריאליזם בלייטבוקס של הגלריה */ .rr-lb-pass span { font-family: var(--font-mono); letter-spacing: 0.12em; } .rr-lb-pass:disabled { opacity: 0.4; pointer-events: none; } .rr-lb-note { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); max-width: min(560px, 88vw); font-family: var(--font-he); font-size: 13px; line-height: 1.5; color: var(--paper); background: var(--ink); border: 1px solid var(--smoke); padding: 10px 16px; direction: rtl; text-align: center; } /* ── לוקבוק (Lookbook): מותגים, דרופים ולוקים — עמוד בהיר כמו הליהוק ── */ .rr-bk .rr-cast-sheet { margin-top: 26px; } .rr-bk-back { font-family: var(--font-he); font-size: 13px; color: var(--graphite); text-decoration: none; border-bottom: 1px solid var(--ash); } .rr-bk-back:hover { color: var(--ink); border-color: var(--ink); } .rr-bk-formrow { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding: 18px 22px 14px; } .rr-bk-field { flex: 1 1 220px; min-width: 180px; } .rr-bk-field-s { flex: 0 1 150px; min-width: 120px; } .rr-bk-file { font-family: var(--font-he); font-size: 12px; color: var(--graphite); max-width: 100%; } .rr-bk-select { background: transparent; } .rr-bk-hint { font-family: var(--font-he); font-size: 12px; color: var(--graphite); padding: 0 22px 16px; margin: 0; } .rr-bk-empty { font-family: var(--font-he); font-size: 14px; color: var(--graphite); padding: 22px; margin: 0; } .rr-bk-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; padding: 4px 22px 22px; } .rr-bk-brandcard { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--ink); padding: 18px; text-decoration: none; transition: transform .25s var(--ease-out), background .25s; } .rr-bk-brandcard:hover { transform: translateY(-3px); background: var(--bone); } .rr-bk-brandname { font-family: var(--font-he); font-weight: 700; font-size: 18px; color: var(--ink); } .rr-bk-brandmeta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--graphite); } .rr-bk-brandmail { font-family: var(--font-mono); font-size: 10px; color: var(--ash); } .rr-bk-assets { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 22px 0; } .rr-bk-assets:empty { padding: 0; } .rr-bk-asset { position: relative; width: 108px; } .rr-bk-asset img { width: 108px; height: 138px; object-fit: cover; border: 1px solid var(--ink); display: block; background: var(--bone); } .rr-bk-asset-name { display: block; font-family: var(--font-he); font-size: 11px; color: var(--graphite); margin-top: 5px; line-height: 1.35; } .rr-bk-asset-x { position: absolute; top: 4px; inset-inline-start: 4px; margin: 0; } .rr-bk-asset-x button { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); width: 22px; height: 22px; font-size: 11px; cursor: pointer; } .rr-bk-asset-x button:hover { background: var(--accent-red); border-color: var(--accent-red); color: var(--paper); } .rr-bk-plan { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 18px 22px 0; } .rr-bk-plan-opt { font-family: var(--font-he); font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; cursor: pointer; } .rr-bk-plan-opt.is-locked { color: var(--graphite); cursor: default; } .rr-bk-plan-opt input { accent-color: var(--accent-red); width: 16px; height: 16px; } .rr-bk-looks { display: flex; flex-direction: column; gap: 18px; padding: 6px 22px 22px; } .rr-bk-look { border: 1px solid var(--ink); } .rr-bk-look-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink); padding: 10px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--graphite); } .rr-bk-status { font-family: var(--font-he); font-size: 12px; letter-spacing: 0; color: var(--ink); border: 1px solid var(--ash); padding: 2px 10px; } .rr-bk-status.is-approved { border-color: var(--ink); background: var(--ink); color: var(--paper); } .rr-bk-status.is-rejected { border-color: var(--accent-red); color: var(--accent-red); } .rr-bk-status.is-generated { border-color: var(--ink); } .rr-bk-look-body { padding: 14px; } .rr-bk-look-parts { display: flex; flex-wrap: wrap; gap: 8px; } .rr-bk-look-parts img { width: 64px; height: 82px; object-fit: cover; border: 1px solid var(--ash); background: var(--bone); } .rr-bk-look-parts img.acc { width: 48px; height: 62px; } .rr-bk-look-reason { font-family: var(--font-he); font-size: 13px; color: var(--graphite); margin: 10px 0 0; line-height: 1.5; } .rr-bk-look-outs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .rr-bk-look-outs:empty { margin: 0; } .rr-bk-out { position: relative; display: block; } .rr-bk-out img { width: 150px; height: 200px; object-fit: cover; border: 1px solid var(--ink); display: block; background: var(--bone); transition: transform .25s var(--ease-out); } .rr-bk-out:hover img { transform: translateY(-3px); } .rr-bk-out span { position: absolute; bottom: 6px; inset-inline-start: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; background: var(--ink); color: var(--paper); padding: 2px 7px; } .rr-bk-look-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; } .rr-bk-inline { margin: 0; display: inline; } .rr-bk-act { font-family: var(--font-he); font-size: 13px; background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 8px 16px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .rr-bk-act:hover { background: var(--ink); color: var(--paper); } .rr-bk-act:disabled { opacity: 0.45; pointer-events: none; } .rr-bk-act.is-approve { background: var(--ink); color: var(--paper); } .rr-bk-act.is-approve:hover { background: var(--accent-red); border-color: var(--accent-red); } .rr-bk-act.is-x:hover { background: var(--accent-red); border-color: var(--accent-red); color: var(--paper); } .rr-bk-look-err { font-family: var(--font-he); font-size: 13px; color: var(--ink); border: 1px solid var(--accent-red); background: rgba(229,57,43,0.07); padding: 10px 14px; margin: 12px 0 0; } /* לוקבוק: הערות מותג וניהול צוות */ .rr-bk-note { font-family: var(--font-he); font-size: 13px; color: var(--ink); border: 1px solid var(--accent-red); background: rgba(229,57,43,0.07); padding: 10px 14px; margin: 12px 0 0; line-height: 1.5; } .rr-bk-noteform { display: flex; gap: 10px; margin-top: 12px; align-items: flex-start; flex-wrap: wrap; } .rr-bk-noteform textarea { flex: 1 1 320px; border: 1px solid var(--ink); background: transparent; font-family: var(--font-he); font-size: 13px; padding: 9px 12px; resize: vertical; direction: rtl; } .rr-bk-noteform textarea:focus { outline: 1px solid var(--ink); } .rr-bk-staffrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--graphite); border: 1px solid var(--ash); padding: 4px 10px; } .rr-bk-staffrow button { border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; } .rr-bk-staffrow button:hover { color: var(--accent-red); } /* לוקבוק G84: סטטוסי דרופ, מקטים, שליחה ומשוב */ .rr-bk-status.is-draft { border-color: var(--ash); color: var(--graphite); } .rr-bk-status.is-working { border-color: var(--ink); } .rr-bk-status.is-submitted { border-color: var(--accent-red); color: var(--accent-red); } .rr-bk-status.is-notes { border-color: var(--accent-red); color: var(--accent-red); } .rr-bk-launch { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--graphite); border: 1px solid var(--ash); padding: 3px 10px; } /* G116: שורת מטא מסודרת בכותרת הדרופ — סטטוס, תאריך, מסנג'ר, בית המותג */ .rr-bk-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .rr-bk-meta .rr-bk-status, .rr-bk-meta .rr-bk-launch { margin: 0; } .rr-bk-metalink { font-family: var(--font-he); font-size: 12px; color: var(--ink); text-decoration: none; border: 1px solid var(--ash); padding: 2px 12px; transition: border-color 0.2s var(--ease); } .rr-bk-metalink:hover { border-color: var(--ink); } /* G116: פס סטטוס ברור לצוות — מה מצב הדרופ מול המותג ומה הצעד הבא */ .rr-bk-flow { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; border: 1px solid var(--ink); background: var(--paper); } .rr-bk-flow-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--graphite); } .rr-bk-flow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--smoke); flex: 0 0 auto; } .rr-bk-flow.is-working .rr-bk-flow-dot { background: var(--ink); } .rr-bk-flow.is-submitted .rr-bk-flow-dot { background: var(--accent-red); } .rr-bk-flow.is-submitted { border-color: var(--accent-red); } .rr-bk-flow.is-approved { border-color: var(--ink); background: var(--ink); } .rr-bk-flow.is-approved .rr-bk-flow-text { color: var(--paper); } .rr-bk-flow.is-approved .rr-bk-flow-tag { color: var(--bone); } .rr-bk-flow.is-approved .rr-bk-flow-dot { background: var(--paper); } .rr-bk-flow-text { font-family: var(--font-he); font-size: 13px; color: var(--ink); line-height: 1.5; } .rr-bk-daterow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; } .rr-bk-daterow .field-line { max-width: 170px; } .rr-bk-sku { position: absolute; top: 116px; inset-inline-end: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; background: var(--ink); color: var(--paper); padding: 2px 6px; } .rr-bk-sendrow { padding: 4px 22px 6px; margin: 0; } .rr-bk-finalrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 8px 22px 4px; } /* INBOX: צ'יפ בניווט + תגית מונה + רשימת עדכונים */ .rr-nav-inbox { position: relative; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink); text-decoration: none; border: 1px solid var(--ink); padding: 7px 12px; display: inline-flex; align-items: center; gap: 7px; transition: background .2s, color .2s; } .rr-nav-inbox:hover, .rr-nav-inbox.is-active { background: var(--ink); color: var(--paper); } .rr-inbox-badge { font-family: var(--font-mono); font-size: 9px; background: var(--accent-red); color: #fff; min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 999px; } .rr-bk-notices { display: flex; flex-direction: column; gap: 0; padding: 10px 22px 22px; } .rr-bk-notice { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--ash); padding: 13px 2px; text-decoration: none; } a.rr-bk-notice:hover { background: var(--bone); } .rr-bk-notice-body { font-family: var(--font-he); font-size: 14px; color: var(--ink); line-height: 1.5; } .rr-bk-notice.is-new .rr-bk-notice-body { font-weight: 700; } .rr-bk-notice.is-new .rr-bk-notice-body::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-red); margin-inline-end: 8px; vertical-align: 2px; } .rr-bk-notice-time { font-family: var(--font-mono); font-size: 10px; color: var(--graphite); white-space: nowrap; } /* מסנג'ר מותג-צוות: שיחה שחורה */ .rr-bk-chatrow { margin: 0 0 6px; } .rr-bk-chatbtn { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); text-decoration: none; padding: 12px 20px; font-family: var(--font-he); font-size: 14px; transition: transform .25s var(--ease-out); } .rr-bk-chatbtn:hover { transform: translateY(-2px); } .rr-bk-chatbtn span[dir="ltr"] { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ash); } .rr-chat { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); display: flex; flex-direction: column; min-height: calc(100vh - 220px); } .rr-chat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 22px 26px 18px; border-bottom: 1px solid var(--graphite); flex-wrap: wrap; } .rr-chat-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ash); display: inline-flex; align-items: center; gap: 8px; } .rr-chat-head h1 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 44px); color: var(--paper); margin: 6px 0 0; line-height: 1; } .rr-chat-head h1 .accent { color: var(--accent-red); } .rr-chat-back { font-family: var(--font-he); font-size: 13px; color: var(--ash); text-decoration: none; border-bottom: 1px solid var(--graphite); } .rr-chat-back:hover { color: var(--paper); border-color: var(--paper); } .rr-chat-scroll { flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; max-height: 56vh; } .rr-chat-empty { font-family: var(--font-he); font-size: 14px; color: var(--ash); margin: auto; text-align: center; max-width: 420px; line-height: 1.6; } .rr-chat-msg { max-width: min(78%, 560px); padding: 10px 14px 12px; animation: rr-chat-in .3s var(--ease-out); } .rr-chat-msg.is-mine { align-self: flex-start; background: var(--paper); color: var(--ink); } .rr-chat-msg.is-theirs { align-self: flex-end; border: 1px solid var(--graphite); color: var(--paper); } .rr-chat-msg p { font-family: var(--font-he); font-size: 14px; line-height: 1.55; margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; } .rr-chat-who { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; opacity: 0.55; display: block; } @keyframes rr-chat-in { from { transform: translateY(10px); } to { transform: translateY(0); } } .rr-chat-composer { display: flex; gap: 0; border-top: 1px solid var(--graphite); margin: 0; } .rr-chat-composer textarea { flex: 1; background: transparent; border: 0; color: var(--paper); font-family: var(--font-he); font-size: 15px; padding: 16px 20px; resize: none; min-height: 56px; direction: rtl; } .rr-chat-composer textarea:focus { outline: none; background: rgba(232,227,218,0.05); } .rr-chat-composer textarea::placeholder { color: var(--graphite); } .rr-chat-send { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; background: var(--paper); color: var(--ink); border: 0; padding: 0 26px; cursor: pointer; transition: background .2s, color .2s; } .rr-chat-send:hover { background: var(--accent-red); color: #fff; } /* לוקבוק G85: סיווג צילום הדגם (גוף/בובה/קולב) + בקרת נאמנות */ .rr-bk-shotform { display: flex; gap: 4px; margin-top: 4px; align-items: center; } .rr-bk-shotsel { font-family: var(--font-he); font-size: 10px; color: var(--graphite); background: transparent; border: 1px solid var(--ash); padding: 2px 4px; max-width: 82px; } .rr-bk-shotform button { border: 1px solid var(--ash); background: transparent; color: var(--graphite); width: 20px; height: 20px; font-size: 10px; cursor: pointer; } .rr-bk-shotform button:hover { border-color: var(--ink); color: var(--ink); } .rr-bk-shotchip { display: inline-block; font-family: var(--font-he); font-size: 10px; color: var(--graphite); border: 1px solid var(--ash); padding: 1px 6px; margin-top: 4px; } .rr-bk-qc { font-family: var(--font-he); font-size: 13px; line-height: 1.5; margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--ash); color: var(--ink); } .rr-bk-qc span[dir="ltr"], .rr-bk-qc-head span[dir="ltr"] { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; border: 1px solid currentColor; padding: 1px 6px; margin-inline-end: 8px; } .rr-bk-qc.is-pass { border-color: var(--ink); } .rr-bk-qc.is-flags { border-color: var(--accent-red); background: rgba(229,57,43,0.07); } .rr-bk-qc.is-flags .rr-bk-qc-head { display: block; font-weight: 700; color: var(--accent-red); } .rr-bk-qc.is-flags ul { margin: 6px 18px 0 0; padding: 0; } .rr-bk-qc.is-flags li { margin-top: 3px; } .rr-bk-qc.is-skip { border-style: dashed; color: var(--graphite); } /* לוקבוק G87: פרופיל סטיילינג פר מותג */ .rr-bk-profileform { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 18px 22px 8px; margin: 0; } .rr-bk-profileform textarea { width: 100%; border: 1px solid var(--ink); background: transparent; font-family: var(--font-he); font-size: 14px; line-height: 1.6; padding: 12px 14px; resize: vertical; direction: rtl; } .rr-bk-profileform textarea:focus { outline: 1px solid var(--ink); } /* לוקבוק G89: פריט מוביל, פריטי ארון ומד כיסוי */ .rr-bk-part { position: relative; display: inline-block; } .rr-bk-part i { position: absolute; bottom: 3px; inset-inline-start: 3px; font-style: normal; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; background: var(--ink); color: var(--paper); padding: 1px 5px; } .rr-bk-part.is-hero img { border-color: var(--accent-red); border-width: 2px; } .rr-bk-part.is-hero i { background: var(--accent-red); color: #fff; } .rr-bk-part.is-wardrobe img { opacity: 0.85; border-style: dashed; } .rr-bk-coverage { border: 1px dashed var(--accent-red); padding: 10px 14px !important; margin: 14px 22px 0 !important; color: var(--ink); } .rr-bk-coverage.is-full { border: 1px solid var(--ink); } .rr-bk-coverage span[dir="ltr"] { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; border: 1px solid currentColor; padding: 1px 6px; margin-inline-start: 8px; } /* G90: תפריט מובייל — מסך שחור מלא בסטייל RUREAL */ .rr-mnav-btn { display: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 8px 14px; cursor: pointer; } @media (max-width: 960px) { .rr-mnav-btn { display: inline-flex; } .rr-logout { display: none; } /* היציאה עוברת לתפריט המלא */ } @media (max-width: 640px) { .rr-nav-me-name { display: none; } /* מפנים מקום בשורת הניווט הצפופה */ } .rr-mnav { position: fixed; inset: 0; z-index: 300; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; transform: translateY(-103%); transition: transform 0.45s var(--ease-out); } .rr-mnav.is-open { transform: translateY(0); } .rr-mnav-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--graphite); } .rr-mnav-wm { font-family: var(--font-display); font-size: 22px; color: var(--paper); letter-spacing: -0.02em; } .rr-mnav-wm sup { font-size: 9px; } .rr-mnav-x { background: transparent; border: 1px solid var(--paper); color: var(--paper); width: 42px; height: 42px; font-size: 15px; cursor: pointer; } .rr-mnav-x:active { background: var(--accent-red); border-color: var(--accent-red); } .rr-mnav-links { display: flex; flex-direction: column; padding: 26px 22px; overflow-y: auto; } .rr-mnav-links a { font-family: var(--font-display); font-size: clamp(32px, 8.5vw, 52px); line-height: 1.05; color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(232, 227, 218, 0.14); padding: 13px 0; display: flex; align-items: baseline; gap: 14px; } .rr-mnav-links a:active { color: var(--accent-red); } .rr-mnav-links a span { font-family: var(--font-he); font-size: 13px; color: var(--ash); font-weight: 400; margin-inline-start: auto; direction: rtl; } .rr-mnav-links a b.rr-inbox-badge { font-family: var(--font-mono); font-weight: 400; align-self: center; } .rr-mnav-foot { margin-top: auto; padding: 18px 22px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--graphite); } .rr-mnav-foot a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--ash); text-decoration: none; } .rr-mnav-foot a:active { color: var(--accent-red); } /* G90: דחיסת שורת הניווט במסכים צרים — שהכל ייכנס ו-MENU תמיד נגיש */ @media (max-width: 640px) { .rr-nav { padding: 0 12px; } .rr-wm { font-size: 19px; } .rr-nav-right { gap: 8px; } .rr-credits-chip { padding: 6px 9px; } .rr-credits-chip .lab { display: none; } /* נשאר רק המספר */ .rr-nav-inbox { padding: 6px 9px; letter-spacing: 0.1em; } .rr-mnav-btn { padding: 7px 10px; letter-spacing: 0.1em; } .rr-nav .bell { width: 34px; height: 34px; } } /* G91: חדר ההפקה — מסך עבודה כהה ללוק אחד */ .rr-room { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); display: flex; flex-direction: column; min-height: calc(100vh - 220px); } .rr-room-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 20px 26px 16px; border-bottom: 1px solid var(--graphite); flex-wrap: wrap; } .rr-room-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ash); display: inline-flex; align-items: center; gap: 8px; } .rr-room-title h1 { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 50px); line-height: 1; margin: 8px 0 0; color: var(--paper); } .rr-room-title h1 em { font-style: normal; font-size: 0.45em; color: var(--graphite); } .rr-room-nav { display: flex; align-items: center; gap: 10px; } .rr-room-arrow { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--paper); color: var(--paper); text-decoration: none; font-size: 17px; transition: background .2s, color .2s; } .rr-room-arrow:hover { background: var(--paper); color: var(--ink); } .rr-room-arrow.is-off { border-color: var(--graphite); color: var(--graphite); } .rr-room-exit { font-family: var(--font-he); font-size: 13px; color: var(--ash); text-decoration: none; border-bottom: 1px solid var(--graphite); margin-inline-start: 8px; } .rr-room-exit:hover { color: var(--paper); border-color: var(--paper); } .rr-room-body { display: grid; grid-template-columns: 1fr 340px; gap: 0; flex: 1; } .rr-room-stage { padding: 26px; border-inline-end: 1px solid var(--graphite); display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: flex-start; } .rr-room-stage > a { display: block; max-width: 100%; } #room-main { max-width: 100%; max-height: 68vh; border: 1px solid var(--graphite); display: block; } .rr-room-empty { font-family: var(--font-he); font-size: 15px; color: var(--ash); text-align: center; line-height: 1.8; border: 1px dashed var(--graphite); padding: 60px 40px; margin-top: 40px; } .rr-room-shots { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .rr-room-shot { position: relative; display: block; } .rr-room-shot img { width: 92px; height: 122px; object-fit: cover; border: 1px solid var(--graphite); display: block; transition: transform .25s var(--ease-out); } .rr-room-shot:hover img { transform: translateY(-3px); } .rr-room-shot span { position: absolute; bottom: 4px; inset-inline-start: 4px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; background: var(--ink); color: var(--paper); padding: 1px 5px; } .rr-room-rail { padding: 22px; display: flex; flex-direction: column; gap: 20px; } .rr-room-sec { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } .rr-room-lab { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--graphite); border-bottom: 1px solid var(--graphite); padding-bottom: 4px; width: 100%; } .rr-room-hero { font-family: var(--font-he); font-size: 13px; color: var(--paper); } .rr-room-parts { display: flex; flex-wrap: wrap; gap: 8px; } .rr-room-parts img { width: 56px; height: 72px; object-fit: cover; border: 1px solid var(--graphite); background: var(--graphite); display: block; } /* G105: החלפת הרכב הלוק — הסרה מכל פריט תומך והוספה מהמאגרים */ .rr-room-partx { position: absolute; top: -7px; inset-inline-start: -7px; margin: 0; } .rr-room-partx button { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--paper); background: var(--ink); color: var(--paper); font-size: 9px; cursor: pointer; line-height: 1; } .rr-room-partx button:hover { background: var(--accent-red); border-color: var(--accent-red); } .rr-room-swap { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--graphite); } .rr-room-swap form { display: flex; gap: 8px; margin: 0; align-items: center; } .rr-room-swap select { flex: 1; min-width: 0; } .rr-room-swap .rr-bk-act { flex: 0 0 auto; color: var(--paper); border-color: var(--graphite); } .rr-room-swap .rr-bk-act:hover { border-color: var(--paper); } /* G105: רצף העבודה — "מה עכשיו" מתחת לתמונה המוכנה */ .rr-room-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--graphite); } .rr-room-next .rr-bk-act { color: var(--paper); border-color: var(--graphite); text-decoration: none; } .rr-room-next .rr-bk-act:hover { border-color: var(--paper); } .rr-room-next .rr-bk-act.is-approve { border-color: var(--paper); font-weight: 700; } .rr-room-reason { font-family: var(--font-he); font-size: 12px; color: var(--ash); margin: 0; line-height: 1.6; } .rr-room-qc { font-family: var(--font-he); font-size: 12px; color: var(--ash); margin: 0; line-height: 1.6; } .rr-room-qc.is-pass { color: var(--paper); } .rr-room-qc.is-flags { color: #ff8d84; margin: 0; padding-inline-start: 16px; } .rr-room-qc.is-flags li { margin-top: 3px; } .rr-room-input { width: 100%; background: transparent; border: 1px solid var(--graphite); color: var(--paper); font-family: var(--font-he); font-size: 13px; padding: 9px 11px; } .rr-room-input:focus { outline: 1px solid var(--paper); } .rr-room-input option { color: var(--ink); } .rr-room-go { width: 100%; font-family: var(--font-he); font-size: 14px; font-weight: 700; background: var(--paper); color: var(--ink); border: 0; padding: 13px 16px; cursor: pointer; transition: background .2s, color .2s; } .rr-room-go:hover { background: var(--accent-red); color: #fff; } .rr-room-go:disabled { opacity: 0.55; } .rr-room-btns { display: flex; flex-wrap: wrap; gap: 8px; } .rr-room-btns .rr-bk-act { border-color: var(--graphite); color: var(--paper); } .rr-room-btns .rr-bk-act:hover { background: var(--paper); color: var(--ink); } .rr-room-hint { font-family: var(--font-he); font-size: 11px; color: var(--graphite); margin: auto 0 0; } .rr-room .rr-bk-look-err { border-color: var(--accent-red); color: var(--paper); background: rgba(229,57,43,0.15); } @media (max-width: 900px) { .rr-room-body { grid-template-columns: 1fr; } .rr-room-stage { border-inline-end: 0; border-bottom: 1px solid var(--graphite); } } .rr-bk-roomlink { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--ink); text-decoration: none; border: 1px solid var(--ink); padding: 2px 8px; margin-inline-start: 10px; transition: background .2s, color .2s; } .rr-bk-roomlink:hover { background: var(--ink); color: var(--paper); } .rr-room .rr-bk-status { color: var(--paper); border-color: var(--ash); } .rr-room .rr-bk-status.is-approved { background: var(--paper); color: var(--ink); border-color: var(--paper); } /* G92: ארון האקססוריז המרכזי */ .rr-closet-tags { display: block; font-family: var(--font-he); font-size: 10px; color: var(--ash); margin-top: 2px; line-height: 1.4; } /* G92: פעולות אדמין על משתמש — איפוס סיסמה ומחיקה */ .rr-user-actions { white-space: nowrap; } .rr-user-actions form { display: inline; margin: 0 0 0 6px; } .rr-user-actions button { font-family: var(--font-he); font-size: 11px; background: transparent; border: 1px solid var(--ash); color: var(--graphite); padding: 4px 9px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .rr-user-actions button:hover { border-color: var(--ink); color: var(--ink); } .rr-user-actions button.is-x:hover { background: var(--accent-red); border-color: var(--accent-red); color: #fff; } /* G94: עמוד מותג מסודר — שורת סיכום ותפריט קבוצות */ .rr-bk-sumrow { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--graphite); margin: -8px 0 6px; } .rr-bk-groupnav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; } .rr-bk-groupnav button { font-family: var(--font-he); font-size: 14px; background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 9px 20px; cursor: pointer; transition: background .2s, color .2s; } .rr-bk-groupnav button:hover { background: var(--bone); } .rr-bk-groupnav button.is-active { background: var(--ink); color: var(--paper); } /* G96: כרטיס מוצר למותג + מקט בכותרת הלוק */ .rr-bk-headsku { font-family: var(--font-mono); font-weight: 400; font-size: 9px; letter-spacing: 0.1em; background: var(--ink); color: var(--paper); padding: 2px 7px; margin-inline-start: 8px; } .rr-bk-look.is-product .rr-bk-look-parts { display: none; } .rr-bk-look.is-product .rr-bk-out img { width: 240px; height: 320px; } .rr-bk-look.is-product .rr-bk-look-head span:first-child { font-family: var(--font-he); font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink); } /* G96: דגמי הדרופ בתצוגה מקובצת — שורת דגם שנפתחת לצבעים ולתמונות */ .rr-bk-models { padding: 18px 22px 0; display: flex; flex-direction: column; gap: 10px; } .rr-bk-models:empty { padding: 0; } .rr-bk-model { border: 1px solid var(--ink); background: var(--paper); } .rr-bk-model > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; } .rr-bk-model > summary::-webkit-details-marker { display: none; } .rr-bk-model > summary:hover { background: var(--bone); } .rr-bk-model > summary img { width: 44px; height: 56px; object-fit: cover; border: 1px solid var(--ink); background: var(--bone); flex: 0 0 auto; } .rr-bk-model-sku { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; background: var(--ink); color: var(--paper); padding: 2px 7px; flex: 0 0 auto; } .rr-bk-model-name { font-family: var(--font-he); font-size: 14px; font-weight: 700; color: var(--ink); } .rr-bk-model-kind { font-family: var(--font-he); font-size: 11px; color: var(--graphite); border: 1px solid var(--ash); padding: 1px 8px; } .rr-bk-model-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--graphite); margin-inline-start: auto; } .rr-bk-model-arrow { color: var(--graphite); font-size: 11px; transition: transform .2s var(--ease); } .rr-bk-model[open] > summary .rr-bk-model-arrow { transform: rotate(180deg); } .rr-bk-model[open] > summary { border-bottom: 1px solid var(--smoke); } .rr-bk-modelfix { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--smoke); margin: 0; } .rr-bk-modelfix .rr-bk-shotsel { max-width: 140px; font-size: 11px; padding: 3px 6px; } .rr-bk-modelfix button, .rr-bk-colorfix button { border: 1px solid var(--ash); background: transparent; color: var(--graphite); width: 24px; height: 24px; font-size: 11px; cursor: pointer; flex: 0 0 auto; } .rr-bk-modelfix button:hover, .rr-bk-colorfix button:hover { border-color: var(--ink); color: var(--ink); } .rr-bk-addphotos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--smoke); background: var(--bone); } .rr-bk-color { padding: 10px 14px; } .rr-bk-color + .rr-bk-color { border-top: 1px dashed var(--smoke); } .rr-bk-color-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .rr-bk-color-head .rr-bk-model-sku { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .rr-bk-colorfix { display: flex; align-items: center; gap: 6px; margin: 0; } .rr-bk-colorfix .rr-bk-shotsel { max-width: 150px; font-size: 11px; padding: 3px 6px; } .rr-bk-color-name { font-family: var(--font-he); font-size: 13px; color: var(--ink); } .rr-bk-color-name.is-wait { color: var(--graphite); font-size: 11px; } .rr-bk-color-photos { display: flex; flex-wrap: wrap; gap: 10px; } .rr-bk-photo { position: relative; width: 96px; } .rr-bk-photo img { width: 96px; height: 122px; object-fit: cover; border: 1px solid var(--smoke); display: block; background: var(--bone); } .rr-bk-photorow { display: flex; align-items: center; gap: 3px; margin-top: 4px; } .rr-bk-photorow .rr-bk-shotsel { flex: 1; min-width: 0; max-width: 72px; } .rr-bk-photorow button { border: 1px solid var(--ash); background: transparent; color: var(--graphite); width: 20px; height: 20px; font-size: 10px; cursor: pointer; flex: 0 0 auto; } .rr-bk-photorow button:hover { border-color: var(--ink); color: var(--ink); } .rr-bk-photo-x { position: absolute; top: 4px; inset-inline-start: 4px; margin: 0; } .rr-bk-photo-x button { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); width: 20px; height: 20px; font-size: 10px; cursor: pointer; } .rr-bk-photo-x button:hover { background: var(--accent-red); border-color: var(--accent-red); color: #fff; } @media (max-width: 640px) { .rr-bk-models { padding: 14px 12px 0; } .rr-bk-model > summary { flex-wrap: wrap; gap: 8px; } .rr-bk-model-meta { margin-inline-start: 0; width: 100%; } } /* G110: X על צילום נגזרת — מוחקים ומפיקים מחדש מכל עמוד */ .rr-bk-outwrap { position: relative; display: inline-block; } .rr-room-shotwrap { position: relative; display: inline-block; } /* שתי אופציות ללוק — האופציה השנייה ליד הטוטאל עם כפתור החלפה */ .rr-room-altrow { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 10px; } .rr-room-altimg { width: 92px; height: 122px; object-fit: cover; border: 1px solid var(--graphite); display: block; transition: transform .25s var(--ease-out); } .rr-room-altrow a:hover .rr-room-altimg { transform: translateY(-3px); } /* משבצות "בהפקה" — חיווי חי לכל צילום נגזרת (מדיום/גב/פקשוט) בזמן העבודה */ .rr-room-pend { position: relative; width: 92px; height: 122px; border: 1px solid var(--graphite); display: flex; align-items: center; justify-content: center; background: var(--paper); } .rr-room-pend img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rr-room-pend > b { position: absolute; bottom: 4px; inset-inline-start: 4px; z-index: 2; font-family: var(--font-mono); font-weight: 400; font-size: 8px; letter-spacing: 0.1em; background: var(--ink); color: var(--paper); padding: 1px 5px; } .rr-room-pend > b.is-x { color: var(--accent-red); } .rr-room-pend .rr-rload { width: 100%; height: 100%; border: 0; background: transparent; } .rr-room-pend .rr-rload b { font-size: 54px; } /* איקס מחיקה על ריבוע דרופ (אדמין) — עם שאלת אישור, כמו מתוך הדרופ */ .rr-bk-cardwrap { position: relative; display: block; } .rr-bk-cardwrap .rr-bk-brandcard { height: 100%; } .rr-bk-cardx { position: absolute; top: 8px; inset-inline-start: 8px; margin: 0; } .rr-bk-cardx button { width: 22px; height: 22px; border: 1px solid var(--smoke); background: var(--paper); color: var(--ink); font-size: 11px; cursor: pointer; line-height: 1; } .rr-bk-cardx button:hover { background: var(--accent-red); border-color: var(--accent-red); color: var(--paper); } /* איקס לאקססורי בלוק (G256) — מסירים אחד, השאר נשארים */ .rr-bk-accwrap { position: relative; display: inline-block; } .rr-bk-accx { position: absolute; top: 2px; inset-inline-start: 2px; margin: 0; } .rr-bk-accx button { width: 18px; height: 18px; border: 1px solid var(--smoke); background: var(--paper); color: var(--ink); font-size: 10px; cursor: pointer; line-height: 1; padding: 0; } .rr-bk-accx button:hover { background: var(--accent-red); border-color: var(--accent-red); color: var(--paper); } .rr-bk-shotprog { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .rr-room-shotx { position: absolute; top: 4px; left: 4px; margin: 0; } .rr-room-shotx button { width: 20px; height: 20px; border: 1px solid var(--paper); background: var(--ink); color: var(--paper); font-size: 10px; cursor: pointer; line-height: 1; } .rr-room-shotx button:hover { background: var(--accent-red); border-color: var(--accent-red); } /* G107: שגיאת הצעה ממוקדת — מוצגת ליד הכפתור שנלחץ */ .rr-bk-sug-err { font-family: var(--font-he); font-size: 12px; color: var(--accent-red); } /* G106: שיעורי הסטיילינג שהצוות מלמד — מוצגים כפילים עם מחיקה */ .rr-bk-manual { margin: 4px 22px 14px; border: 1px solid var(--smoke); } .rr-bk-manual > summary { cursor: pointer; padding: 10px 14px; font-family: var(--font-he); font-size: 13px; color: var(--ink); } .rr-bk-manual[open] > summary { border-bottom: 1px solid var(--bone); } .rr-bk-manual .rr-bk-formrow { padding: 14px; } .rr-bk-manual .rr-bk-hint { display: block; padding: 0 14px 12px; } .rr-bk-manual .rr-bk-shotsel { max-width: 240px; } .rr-bk-lessons { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 12px; } .rr-bk-lesson { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-he); font-size: 12px; color: var(--ink); border: 1px solid var(--smoke); padding: 4px 10px; } .rr-bk-lesson form { margin: 0; } .rr-bk-lesson button { border: 0; background: transparent; color: var(--graphite); font-size: 10px; cursor: pointer; padding: 2px; } .rr-bk-lesson button:hover { color: var(--accent-red); } /* G103: שאלת הדרופ — שילובים מארון הבגדים של המותג או רק מהדרופ */ .rr-bk-wtoggle { padding-top: 0; } .rr-bk-wtoggle .rr-bk-shotsel { max-width: 380px; font-size: 12px; padding: 5px 8px; } /* G97: לוקים מקובצים לפי הדגם המוביל */ .rr-bk-lookgroup { border: 1px solid var(--ink); } .rr-bk-lookgroup-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--smoke); background: var(--bone); } .rr-bk-lookgroup-head b { font-family: var(--font-he); font-size: 14px; color: var(--ink); } .rr-bk-lookgroup-head .rr-bk-model-meta { margin-inline-start: auto; } .rr-bk-lookgroup .rr-bk-look { border: 0; border-top: 1px dashed var(--smoke); margin: 0; } .rr-bk-lookgroup .rr-bk-look:first-of-type { border-top: 0; } @media (max-width: 640px) { .rr-bk-lookgroup-head { flex-wrap: wrap; gap: 8px; } } /* G98: חיווי ייצור — האות R מתמלאת עד שהתמונה מוכנה. שורד מעבר בין מסכים */ .rr-rload { width: 180px; height: 240px; border: 1px solid var(--smoke); display: flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; background: var(--paper); } .rr-rload b { font-family: var(--font-display); font-weight: 400; font-size: 110px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ink); position: relative; } .rr-rload b::after { content: 'R'; position: absolute; inset: 0; color: var(--ink); -webkit-text-stroke: 0; clip-path: inset(100% 0 0 0); animation: rr-rfill 2.4s var(--ease) infinite; } .rr-rload i { position: absolute; bottom: 10px; font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--graphite); } @keyframes rr-rfill { 0% { clip-path: inset(100% 0 0 0); } 75% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); } } .rr-rload.is-stage { width: min(420px, 80%); height: 420px; background: transparent; border-color: var(--graphite); margin: 0 auto; } .rr-room .rr-rload b { -webkit-text-stroke: 1px var(--paper); } .rr-room .rr-rload b::after { color: var(--paper); } .rr-room .rr-rload i { color: var(--ash); } /* G97: חיווי עבודה על כל כפתור שנשלח (מונע גם לחיצה כפולה) */ button.is-working, input.is-working { animation: rr-working 0.9s var(--ease) infinite alternate; pointer-events: none; } @keyframes rr-working { from { opacity: 0.5; } to { opacity: 0.9; } } /* G131: גלריות הצוות בצד שמאל (אדמין) + רפרנסים של יצירה */ .rr-gal-team { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; } .rr-gal-team-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--accent-red); } .rr-gal-team-link { font-family: var(--font-he); font-size: 12px; color: var(--bone); text-decoration: none; border: 1px solid var(--graphite); padding: 6px 12px; transition: border-color 0.2s var(--ease); } .rr-gal-team-link i { font-family: var(--font-mono); font-size: 10px; font-style: normal; color: var(--ash); margin-inline-start: 4px; } .rr-gal-team-link:hover { border-color: var(--paper); } .rr-gal-team-link.is-on { border-color: var(--paper); background: var(--paper); color: var(--ink); } .rr-gal-team-link.is-on i { color: var(--graphite); } .rr-vault-cols { display: flex; gap: 22px; align-items: flex-start; } .rr-vault-main { flex: 1 1 auto; min-width: 0; } @media (min-width: 1100px) { .rr-gal-team { order: 2; flex: 0 0 185px; flex-direction: column; align-items: stretch; position: sticky; top: 84px; margin: 0; } .rr-gal-team-link { display: flex; justify-content: space-between; align-items: center; } } @media (max-width: 1099px) { .rr-vault-cols { flex-direction: column; } } /* חלון פרטי יצירה של עובדת: תמונה + פרומפט + רפרנסים */ .rr-tvd { position: fixed; inset: 0; background: rgba(10,10,10,0.88); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; } .rr-tvd-box { display: flex; gap: 0; background: var(--ink); border: 1px solid var(--smoke); max-width: 1050px; width: 100%; max-height: 88vh; position: relative; } .rr-tvd-x { position: absolute; top: 10px; inset-inline-end: 12px; color: var(--paper); cursor: pointer; font-size: 18px; z-index: 2; } .rr-tvd-media { flex: 1 1 55%; min-width: 0; background: #000; display: flex; align-items: center; justify-content: center; } .rr-tvd-media img { max-width: 100%; max-height: 88vh; object-fit: contain; display: block; } .rr-tvd-info { flex: 1 1 45%; min-width: 0; padding: 26px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .rr-tvd-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ash); } .rr-tvd-prompt { font-family: var(--font-he); font-size: 13px; line-height: 1.6; color: var(--bone); white-space: pre-wrap; margin: 0; max-height: 34vh; overflow-y: auto; border: 1px solid var(--graphite); padding: 12px; direction: ltr; text-align: left; } .rr-tvd-reflab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ash); } .rr-tvd-refs { display: flex; gap: 8px; flex-wrap: wrap; } .rr-tvd-refs a { width: 62px; height: 82px; border: 1px solid var(--graphite); display: block; } .rr-tvd-refs img { width: 100%; height: 100%; object-fit: cover; display: block; } .rr-tvd-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; } .rr-tvd-acts button, .rr-tvd-acts a { font-family: var(--font-he); font-size: 13px; padding: 10px 16px; border: 1px solid var(--smoke); background: transparent; color: var(--paper); cursor: pointer; text-decoration: none; display: inline-block; } .rr-tvd-acts button:hover, .rr-tvd-acts a:hover { border-color: var(--paper); } .rr-tvd-acts .is-main { background: var(--accent-red); border-color: var(--accent-red); font-weight: 800; } @media (max-width: 760px) { .rr-tvd-box { flex-direction: column; overflow-y: auto; } .rr-tvd-media img { max-height: 44vh; } } .g-refsbox { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px; inset-inline: 6px; top: auto; bottom: 6px; position: absolute; background: var(--ink); border: 1px solid var(--smoke); z-index: 6; } .g-refsbox[hidden] { display: none; } .g-refsbox a { width: 44px; height: 58px; border: 1px solid var(--graphite); display: block; } .g-refsbox img { width: 100%; height: 100%; object-fit: cover; display: block; } /* G134: צפייה מוגדלת בלחיצה — רפרנסים לא נמחקים ולא בורחים לטאב */ .rr-zoom { position: fixed; inset: 0; z-index: 500; background: rgba(10,10,10,0.92); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 24px; } .rr-zoom img { max-width: 94%; max-height: 94%; object-fit: contain; border: 1px solid var(--smoke); } .rr-fc-ref.filled { cursor: zoom-in; } /* G135: הפרומפט והרפרנסים בתוך הלייטבוקס */ .rr-lb-info { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: min(94%, 860px); background: rgba(10,10,10,0.94); border: 1px solid var(--graphite); border-bottom: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; max-height: 34vh; overflow-y: auto; } .rr-lb-prompt-row { display: flex; gap: 12px; align-items: flex-start; } .rr-lb-prompt { flex: 1; min-width: 0; font-family: var(--font-he); font-size: 12px; line-height: 1.55; color: var(--bone); margin: 0; white-space: pre-wrap; max-height: 14vh; overflow-y: auto; text-align: left; } .rr-lb-refs { display: flex; gap: 6px; flex-wrap: wrap; } .rr-lb-refs a { width: 42px; height: 56px; border: 1px solid var(--graphite); display: block; flex: 0 0 auto; } .rr-lb-refs img { width: 100%; height: 100%; object-fit: cover; display: block; } /* מסך הפניות (G241) */ .rr-leads-list { display: flex; flex-direction: column; gap: 12px; } .rr-lead { border: 1px solid var(--smoke); padding: 16px 18px; } .rr-lead.is-new { border-color: var(--ink); border-inline-start: 4px solid var(--accent-red); } .rr-lead.is-closed { opacity: .55; } .rr-lead-main b { font-size: 17px; } .rr-lead-meta { color: var(--graphite); font-size: 14px; margin-inline-start: 10px; } .rr-lead-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .rr-lead-tags i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px; border: 1px solid var(--smoke); padding: 2px 8px; color: var(--graphite); } .rr-lead-note { margin: 10px 0 0; color: var(--graphite); font-size: 14px; line-height: 1.5; } .rr-lead-actions { display: flex; gap: 6px; margin-top: 12px; } .rr-lead-actions .is-cur { background: var(--ink); color: var(--paper); } /* מדריך האדמין (G241) */ .rr-guide-body { font-family: 'Heebo', sans-serif; line-height: 1.7; font-size: 15px; } .rr-guide-body ul, .rr-guide-body ol { padding-inline-start: 20px; margin: 8px 0; } .rr-guide-body li { margin-bottom: 8px; } .rr-guide-map li b, .rr-guide-flow li b { color: var(--ink); } /* צלמי מחדש (G258) - כפתור של צילום שכבר קיים, מראה מעודן יותר */ .rr-bk-act.is-redo { border-style: dashed; opacity: .8; } .rr-bk-act.is-redo:hover { opacity: 1; } /* ── CAMPAIGNS (בקרוב): טיזר השלב הבא למותגים ── */ .rr-camp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 960px; } .rr-camp-card { border: 1px solid var(--ink); background: var(--paper); } .rr-camp-card h3 { font-family: var(--font-he); font-size: 20px; margin: 20px 22px 8px; color: var(--ink); } .rr-camp-card p { font-family: var(--font-he); font-size: 14px; color: var(--graphite); margin: 0 22px 24px; line-height: 1.6; } .rr-camp-back { margin-top: 32px; } .rr-bk-camplink { margin-top: 14px; padding: 0; } /* ── בורר אקססוריז מהארון ללוק (G269) ── */ .rr-bk-accpick { margin: 6px 0 10px; border: 1px solid var(--smoke); background: var(--paper); } .rr-bk-accpick summary { cursor: pointer; font-family: var(--font-he); font-size: 12.5px; color: var(--graphite); padding: 8px 12px; list-style: none; } .rr-bk-accpick summary::-webkit-details-marker { display: none; } .rr-bk-accpick summary::before { content: '+ '; } .rr-bk-accpick[open] summary { border-bottom: 1px solid var(--smoke); } .rr-bk-accpick[open] summary::before { content: '- '; } .rr-bk-accpick-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 4px; } .rr-bk-accopt { position: relative; width: 56px; cursor: pointer; } .rr-bk-accopt img { display: block; width: 100%; height: 72px; object-fit: cover; border: 1px solid var(--smoke); } .rr-bk-accopt input { position: absolute; top: 4px; inset-inline-start: 4px; z-index: 1; margin: 0; } .rr-bk-accopt input:checked + img { border: 2px solid var(--ink); } .rr-bk-accpick form > .rr-bk-act { margin: 8px 12px 10px; } .rr-bk-accpick form > .rr-bk-hint { display: block; padding: 0 12px 10px; }