/* ========================================================================== RefaceX — Global Theme Palette source: DTEK palette (yellow / near-black / off-white) ========================================================================== */ :root { --rx-yellow: #FFF01F; --rx-yellow-dim: #E0D400; --rx-black: #000000; --rx-black-soft: #2E2A2B; --rx-black-softer: #383334; --rx-white: #FAFAFA; --rx-gray: #9C9698; --rx-danger: #FF5C5C; --rx-success: #4ADE80; /* Page-level surface tokens — these are what actually flip between dark/light mode. Everything else (yellow accent, button-on-yellow text) stays constant across both modes. */ --rx-page-bg: var(--rx-black); --rx-page-fg: var(--rx-white); /* iOS-style frosted glass surfaces, replacing flat grey cards */ --rx-glass-bg: rgba(255,255,255,0.06); --rx-glass-bg-strong: rgba(255,255,255,0.10); --rx-glass-border: rgba(255,255,255,0.14); --rx-glass-blur: blur(24px) saturate(180%); /* "Square round" — a squircle-style radius, not a full pill */ --rx-radius-sm: 8px; --rx-radius-md: 12px; --rx-radius-lg: 18px; --rx-radius-btn: 10px; --rx-shadow: 0 8px 30px rgba(0,0,0,0.35); --rx-font-display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* NOTE: "Roobert" is a commercial font (not on Google Fonts) — this declares it correctly so it activates automatically if you add a licensed Roobert @font-face later, but without those font files every browser will silently fall back to system-ui in the meantime. */ --rx-font-body: 'Roobert', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ---------- Light mode ---------- Toggle via , set from /admin/appearance. Only the page-level surface tokens flip; yellow stays yellow, and text-on-yellow-button stays dark, in both modes. */ [data-theme="light"] { --rx-page-bg: #FAFAFA; --rx-page-fg: #1B1918; --rx-gray: #6B6560; --rx-black-softer: #ECECEC; --rx-glass-bg: rgba(0,0,0,0.035); --rx-glass-bg-strong: rgba(0,0,0,0.06); --rx-glass-border: rgba(0,0,0,0.10); } * { box-sizing: border-box; } body { background: var(--rx-page-bg); color: var(--rx-page-fg); font-family: var(--rx-font-body); margin: 0; -webkit-font-smoothing: antialiased; position: relative; } /* ---------- Ambient background: gradient mesh + grain ---------- Gives the frosted-glass surfaces something to actually diffuse — flat black behind a blur is invisible; this is what makes the glass panels read as glass instead of just "slightly lighter black". */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 900px 600px at 8% -5%, rgba(255,240,31,0.16), transparent 60%), radial-gradient(ellipse 700px 700px at 95% 15%, rgba(255,240,31,0.09), transparent 55%), radial-gradient(ellipse 800px 800px at 50% 100%, rgba(255,255,255,0.05), transparent 60%), var(--rx-page-bg); pointer-events: none; } /* subtle film-grain texture for a premium, non-flat black */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } h1, h2, h3, h4, .rx-display, .rx-logo, button, .btn { font-family: var(--rx-font-display); font-weight: 700; letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } /* ---------- Layout shells ---------- */ .rx-app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } .rx-sidebar { background: var(--rx-glass-bg); backdrop-filter: var(--rx-glass-blur); -webkit-backdrop-filter: var(--rx-glass-blur); border-right: 1px solid var(--rx-glass-border); padding: 28px 18px; display: flex; flex-direction: column; gap: 4px; } .rx-logo { font-size: 26px; color: var(--rx-yellow); margin-bottom: 28px; padding: 0 10px; } .rx-logo-img { height: 90px; display: block; } /* nav — 2x the previous 45px, per explicit request */ .rx-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--rx-radius-md); color: var(--rx-gray); font-family: var(--rx-font-body); font-weight: 500; cursor: pointer; transition: background .15s ease, color .15s ease; } .rx-nav-item:hover { background: rgba(128,128,128,0.08); color: var(--rx-page-fg); } .rx-nav-item.active { background: var(--rx-yellow); color: var(--rx-black); font-weight: 700; } .rx-main { padding: 40px 48px; overflow-y: auto; } @media (max-width: 860px) { .rx-app { grid-template-columns: 1fr; } .rx-sidebar { display: none; } } /* ---------- Cards (iOS-style frosted glass) ---------- */ .rx-card { background: var(--rx-glass-bg); backdrop-filter: var(--rx-glass-blur); -webkit-backdrop-filter: var(--rx-glass-blur); border: 1px solid var(--rx-glass-border); border-radius: var(--rx-radius-lg); padding: 24px; } .rx-card.highlight { border-color: var(--rx-yellow); box-shadow: 0 0 0 1px rgba(255,240,31,0.15); } .rx-grid { display: grid; gap: 20px; } /* ---------- Buttons / inputs ---------- */ .btn { border: none; border-radius: var(--rx-radius-btn); padding: 14px 22px; font-size: 15px; cursor: pointer; transition: transform .12s ease, opacity .12s ease; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--rx-yellow); color: var(--rx-black); } .btn-primary:hover { background: var(--rx-yellow-dim); } .btn-outline { background: transparent; border: 1px solid var(--rx-glass-border); color: var(--rx-page-fg); } .btn-outline:hover { border-color: var(--rx-yellow); color: var(--rx-yellow); } .rx-input, .rx-textarea, select.rx-input { width: 100%; background: var(--rx-glass-bg); border: 1px solid var(--rx-glass-border); border-radius: var(--rx-radius-md); padding: 14px 16px; color: var(--rx-page-fg); font-family: var(--rx-font-body); font-size: 15px; } .rx-input:focus, .rx-textarea:focus { outline: none; border-color: var(--rx-yellow); } .rx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--rx-radius-btn); font-size: 12px; font-weight: 700; background: rgba(254,223,4,0.12); color: var(--rx-yellow); } .rx-pill.live { background: rgba(74,222,128,0.12); color: var(--rx-success); } /* ---------- Landing page: full-bleed video hero ---------- */ .rx-nav-public { display: flex; justify-content: space-between; align-items: center; padding: 20px 6vw 20px 4vw; position: absolute; top: 0; left: 0; right: 0; z-index: 3; } .rx-hero-video { position: relative; min-height: 92vh; overflow: hidden; display: flex; align-items: center; } .rx-hero-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .rx-hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 42%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.05) 100%); z-index: 1; } /* smooth bottom edge — fades the video into the page instead of a hard cut */ .rx-hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to bottom, transparent, var(--rx-page-bg) 90%); z-index: 2; pointer-events: none; } .rx-hero-content { position: relative; z-index: 2; max-width: 900px; padding: 130px 6vw 60px 4vw; } .rx-hero-kicker { font-family: var(--rx-font-display); font-weight: 800; color: var(--rx-yellow); text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(14px, 1.6vw, 18px); margin: 0 0 14px; } .rx-hero-content h1 { font-size: clamp(36px, 5.4vw, 66px); font-weight: 800; line-height: 1.05; margin: 0 0 20px; white-space: normal; } .rx-hero-content .highlight { color: var(--rx-yellow); } .rx-hero-content p.sub { color: var(--rx-white); opacity: 0.85; font-size: 18px; line-height: 1.5; max-width: 520px; margin: 0 0 32px; } .rx-hero-cta { display: flex; gap: 14px; } /* ---------- "How it works" — horizontal scroll of step frames ---------- */ .rx-steps-scroll { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 6px 6vw 10px; margin: 0 -6vw; scrollbar-width: thin; scrollbar-color: var(--rx-yellow) transparent; } .rx-steps-scroll::-webkit-scrollbar { height: 6px; } .rx-steps-scroll::-webkit-scrollbar-thumb { background: var(--rx-yellow); border-radius: var(--rx-radius-btn); } .rx-step { flex: 0 0 auto; width: 300px; scroll-snap-align: start; } .rx-step-frame { position: relative; aspect-ratio: 3/4; border-radius: var(--rx-radius-lg); overflow: hidden; background: var(--rx-black-softer); border: 1px solid var(--rx-glass-border); margin-bottom: 14px; } .rx-step-frame.output { border-color: var(--rx-yellow); } .rx-step-frame video, .rx-step-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .rx-step-number { position: absolute; top: 12px; left: 12px; width: 28px; height: 28px; border-radius: var(--rx-radius-btn); background: var(--rx-yellow); color: var(--rx-black); font-family: var(--rx-font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; } .rx-step h4 { margin: 0 0 6px; font-size: 16px; } .rx-step p { margin: 0; color: var(--rx-gray); font-size: 13px; line-height: 1.5; } @media (max-width: 860px) { .rx-hero-content { padding: 100px 6vw 50px; max-width: 100%; } .rx-step { width: 240px; } } /* ---------- Premium icon chips (replaces the flat yellow squares) ---------- */ .rx-feat-icon { width: 48px; height: 48px; border-radius: var(--rx-radius-md); display: flex; align-items: center; justify-content: center; color: var(--rx-yellow); position: relative; background: linear-gradient(155deg, rgba(255,240,31,0.16), rgba(255,240,31,0.02)); border: 1px solid rgba(255,240,31,0.22); box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 6px 18px rgba(255,240,31,0.08); } .rx-feat-icon svg { width: 22px; height: 22px; position: relative; z-index: 1; }