/* === STYLE BLOCK === */ /* theme.css — Wild House design tokens. Dark default; .wh-light overrides. Tweaks override --wh-gold / --wh-radius / --wh-density-* on inline. */ :root { /* accent (tweakable) */ --wh-gold: #e0a458; --wh-gold-2: color-mix(in srgb, var(--wh-gold) 72%, #ffffff); --wh-gold-deep: color-mix(in srgb, var(--wh-gold) 78%, #000000); --wh-gold-soft: color-mix(in srgb, var(--wh-gold) 16%, transparent); --wh-gold-line: color-mix(in srgb, var(--wh-gold) 38%, transparent); /* service accents */ --wh-success: #46c08a; --wh-danger: #e06464; --wh-info: #5ec4f7; --wh-success-soft: color-mix(in srgb, var(--wh-success) 16%, transparent); --wh-danger-soft: color-mix(in srgb, var(--wh-danger) 16%, transparent); --wh-info-soft: color-mix(in srgb, var(--wh-info) 16%, transparent); /* shape + density (tweakable) */ --wh-radius: 16px; --wh-radius-sm: calc(var(--wh-radius) * 0.55); --wh-radius-lg: calc(var(--wh-radius) * 1.4); --wh-gap: 12px; --wh-pad: 16px; /* dark surfaces (default) */ --wh-bg: #171b22; --wh-bg-2: #12151b; --wh-surface: #1e2530; --wh-surface-2: #232c39; --wh-surface-3: #2a3340; --wh-line: rgba(231, 236, 243, 0.09); --wh-line-strong: rgba(231, 236, 243, 0.16); --wh-text: #e7ecf3; --wh-text-2: #aeb7c6; --wh-muted: #8a94a6; --wh-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.35); --wh-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --wh-img-edge: rgba(0,0,0,.35); } html.wh-light { --wh-bg: #f1ece2; --wh-bg-2: #e7e0d3; --wh-surface: #ffffff; --wh-surface-2: #f7f2ea; --wh-surface-3: #efe8db; --wh-line: rgba(40, 33, 22, 0.10); --wh-line-strong: rgba(40, 33, 22, 0.18); --wh-text: #221d14; --wh-text-2: #5b5345; --wh-muted: #837a68; --wh-shadow: 0 1px 2px rgba(60,45,20,.08), 0 14px 34px rgba(60,45,20,.12); --wh-shadow-sm: 0 1px 2px rgba(60,45,20,.10); --wh-img-edge: rgba(40,33,22,.12); --wh-gold-soft: color-mix(in srgb, var(--wh-gold) 18%, white); } /* ── base */ .wh-app, .wh-app * { box-sizing: border-box; } .wh-app { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--wh-bg); color: var(--wh-text); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv05' 1, 'ss01' 1; line-height: 1.4; } .wh-app[dir='rtl'] { direction: rtl; } /* keep numbers/currency LTR inside RTL */ .wh-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* ── scrollbars hidden inside frames (canvas owns wheel) */ .wh-app ::-webkit-scrollbar { width: 0; height: 0; } .wh-app { scrollbar-width: none; } /* ── pills + chips */ .wh-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .wh-tone-gold { color: var(--wh-gold); background: var(--wh-gold-soft); box-shadow: inset 0 0 0 1px var(--wh-gold-line); } .wh-tone-success { color: var(--wh-success); background: var(--wh-success-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wh-success) 30%, transparent); } .wh-tone-danger { color: var(--wh-danger); background: var(--wh-danger-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wh-danger) 30%, transparent); } .wh-tone-info { color: var(--wh-info); background: var(--wh-info-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wh-info) 30%, transparent); } .wh-tone-muted { color: var(--wh-muted); background: var(--wh-surface-3); box-shadow: inset 0 0 0 1px var(--wh-line); } /* ── focusable tap targets */ .wh-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s; } .wh-tap:active { transform: scale(.97); } /* ── card */ .wh-card { background: var(--wh-surface); border-radius: var(--wh-radius); box-shadow: var(--wh-shadow-sm); border: 1px solid var(--wh-line); } /* ── buttons */ .wh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--wh-line-strong); background: var(--wh-surface-2); color: var(--wh-text); font: inherit; font-weight: 600; font-size: 13px; border-radius: var(--wh-radius-sm); padding: 9px 14px; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s, border-color .15s; } .wh-btn:active { transform: scale(.97); } .wh-btn-gold { background: linear-gradient(180deg, var(--wh-gold-2), var(--wh-gold)); color: #1a130a; border-color: var(--wh-gold-deep); box-shadow: 0 2px 10px color-mix(in srgb, var(--wh-gold) 35%, transparent); } .wh-btn-gold:hover { box-shadow: 0 4px 16px color-mix(in srgb, var(--wh-gold) 45%, transparent); } .wh-btn-success { background: color-mix(in srgb, var(--wh-success) 22%, var(--wh-surface-2)); border-color: color-mix(in srgb, var(--wh-success) 45%, transparent); color: var(--wh-success); } .wh-btn-info { background: color-mix(in srgb, var(--wh-info) 22%, var(--wh-surface-2)); border-color: color-mix(in srgb, var(--wh-info) 45%, transparent); color: var(--wh-info); } .wh-btn-block { width: 100%; } /* ── inputs */ .wh-input, .wh-select { width: 100%; font: inherit; font-size: 13px; color: var(--wh-text); background: var(--wh-surface-2); border: 1px solid var(--wh-line-strong); border-radius: var(--wh-radius-sm); padding: 9px 11px; outline: none; transition: border-color .15s, box-shadow .15s; } .wh-input::placeholder { color: var(--wh-muted); } .wh-input:focus, .wh-select:focus { border-color: var(--wh-gold); box-shadow: 0 0 0 3px var(--wh-gold-soft); } .wh-select { appearance: none; cursor: pointer; padding-right: 28px; } .wh-app[dir='rtl'] .wh-select { padding-right: 11px; padding-left: 28px; } /* ── animations (light; respect reduced-motion) */ @keyframes wh-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes wh-pop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } } @keyframes wh-sheet-up { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes wh-backdrop { from { opacity: 0; } to { opacity: 1; } } @keyframes wh-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes wh-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes wh-ping { 0% { box-shadow: 0 0 0 0 var(--wh-gold-soft); } 100% { box-shadow: 0 0 0 14px transparent; } } .wh-anim-up { animation: wh-fade-up .42s cubic-bezier(.2,.7,.3,1) both; } .wh-anim-pop { animation: wh-pop .34s cubic-bezier(.2,.8,.3,1.2) both; } @media (prefers-reduced-motion: reduce) { .wh-anim-up, .wh-anim-pop { animation: none !important; } } /* ── thin scroll regions inside admin tables that must scroll on desktop */ .wh-scroll-y { overflow-y: auto; } /* ── range slider */ .wh-range { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 999px; outline: none; background: var(--wh-surface-3); cursor: pointer; } .wh-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 999px; background: linear-gradient(180deg, var(--wh-gold-2), var(--wh-gold)); border: 2px solid var(--wh-surface); box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 0 1px var(--wh-gold-deep); cursor: pointer; } .wh-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--wh-surface); background: var(--wh-gold); box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; } /* ── admin table rows */ .wh-row { transition: background .12s; } .wh-row:hover { background: var(--wh-surface-2); } /* number inputs: hide spinners for cleaner look */ .wh-input[type=number]::-webkit-inner-spin-button { opacity: .4; } /* === STYLE BLOCK === */ html, body { margin: 0; padding: 0; background: #e9e5dd; } * { -webkit-tap-highlight-color: transparent; }