/* Mad Lashes Studio — design system v2 (brand-faithful to madlashesco.com). See DESIGN-NOTES.md. */ :root { /* colour */ --c-bg: #ffffff; --c-surface: #ffffff; --c-surface-2: #f6f6f6; --c-tint: rgba(51, 50, 50, 0.05); --c-text: #3a3a3a; --c-body: #333232; --c-muted: #6b6b6b; --c-subtle: #8f8f8f; --c-line: #ebebeb; --c-field: #cccccc; --c-field-strong: #b3b3b3; --c-primary: #3a3a3a; --c-primary-hover: #212121; --c-primary-focus: #606060; --c-on-primary: #ffffff; --c-accent: #ff13a6; --c-accent-tint: #ffecfa; --c-accent-focus: #ffb9ed; --c-stage: #121212; --c-stage-2: #1b1b1b; --c-on-stage: #ffffff; --c-success: #2e7d4f; --c-error: #c0392b; --c-error-tint: #fdecea; /* space */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; /* type */ --font-head: Helvetica, Arial, sans-serif; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --t-xs: 11px; --t-sm: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 22px; --track-head: 0.1em; --track-btn: 0.08em; /* shape */ --border: 1px solid var(--c-line); --radius: 2px; --radius-sheet: 12px; --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-primary-focus); --icon: 20px; --icon-stroke: 1.5; --target: 44px; /* motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --t: 180ms; /* shell */ --header-h: 56px; --tabbar: 58px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --gutter: var(--s4); } /* Mad Lashes Studio: "noir" theme CANDIDATE (not approved; Alec directs the final pass). Token-only: dark surfaces, white text, the existing pink unchanged. Photo/camera stage, lash previews, the logo tile and the printable blueprint are not touched. Enable with . */ :root[data-theme="noir"] { --c-bg: #000000; /* the same black as the splash: no seam between the intro and the app */ --c-surface: #0a0a0a; --c-surface-2: #141414; --c-tint: rgba(255, 255, 255, 0.06); --c-text: #f4f4f4; --c-body: #e4e4e4; --c-muted: #a6a6a6; --c-subtle: #7f7f7f; --c-line: #262626; --c-field: #3b3b3b; --c-field-strong: #555555; --c-primary: #f4f4f4; /* primary buttons invert to white, as they already do on the dark stage */ --c-primary-hover: #ffffff; --c-primary-focus: #9a9a9a; --c-on-primary: #000000; --c-accent: #ff13a6; /* unchanged brand pink */ --c-accent-tint: rgba(255, 19, 166, 0.16); --c-accent-focus: #ffb9ed; --c-stage: #000000; --c-stage-2: #0a0a0a; --c-error-tint: rgba(192, 57, 43, 0.18); color-scheme: dark; } :root[data-theme="noir"] body { background: var(--c-bg); color: var(--c-body); } html, body { background: #000000; min-height: 100dvh; } body { padding-bottom: var(--safe-b); } :root[data-theme="noir"] .closeup__label, :root[data-theme="noir"] .empty .btn--primary { color: #111111; } /* dark text on the white pills/buttons over the stage */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: var(--c-bg); color: var(--c-body); font: 400 var(--t-md)/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow: hidden; overscroll-behavior: none; } body { position: fixed; inset: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { -webkit-tap-highlight-color: transparent; cursor: pointer; } button:disabled { cursor: default; } [hidden] { display: none !important; } :focus-visible { outline: none; box-shadow: var(--focus-ring); } svg { display: block; flex: none; } a { color: inherit; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .num, output, .stepper__value, .field__value { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ type */ .eyebrow, .field__label { margin: 0; font: 700 var(--t-xs)/1.3 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: var(--c-text); } .eyebrow--center { text-align: center; } .hint, .meta { margin: var(--s2) 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--c-muted); } .meta { margin: 0; } .body { margin: var(--s2) 0 0; color: var(--c-body); font-size: var(--t-md); line-height: 1.6; } .h-title { margin: 0; font: 700 var(--t-lg)/1.2 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: var(--c-text); } /* ------------------------------------------------------------------ shell */ .app { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--c-bg); } .app > .topbar { grid-row: 1; } .app > .workspace { grid-row: 2; } .app > .tabbar { grid-row: 3; } .splash { grid-row: 1 / -1; display: grid; place-items: center; height: 100%; background: #000; } .splash img { width: min(86vw, 460px); opacity: 0; } .topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); height: calc(var(--header-h) + var(--safe-t)); padding: var(--safe-t) calc(var(--s3) + var(--safe-r)) 0 calc(var(--s3) + var(--safe-l)); background: var(--c-surface); border-bottom: var(--border); position: relative; z-index: 20; } .brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .brand__mark { width: 36px; height: 36px; display: block; border-radius: var(--radius); } .brand__word { font: 700 var(--t-sm)/1 var(--font-head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text); white-space: nowrap; } .topbar__center { display: flex; justify-content: center; } .topbar__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); min-width: 0; } .engine-status { display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; } .engine-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-field); flex: none; } .engine-status[data-state="ready"]::before { background: var(--c-success); } .engine-status[data-state="loading"]::before { animation: pulse 1.1s ease-in-out infinite; } .engine-status[data-state="error"] { color: var(--c-error); } .engine-status[data-state="error"]::before { background: var(--c-error); } .test-badge { font: 700 9px/1 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); border: 1px solid var(--c-accent); padding: 4px 5px 3px; border-radius: var(--radius); white-space: nowrap; } .icon-btn { display: inline-grid; place-items: center; width: var(--target); height: var(--target); border: 0; background: none; color: var(--c-text); border-radius: var(--radius); } .icon-btn:hover { background: var(--c-tint); } .icon-btn svg { width: var(--icon); height: var(--icon); } .workspace { position: relative; min-height: 0; display: grid; overflow: clip; } /* ------------------------------------------------------------------ segmented / tabs (shared look) */ .seg { display: flex; gap: var(--s4); overflow-x: auto; scrollbar-width: none; border-bottom: var(--border); } .seg::-webkit-scrollbar { display: none; } .seg__opt { flex: none; position: relative; min-height: var(--target); min-width: var(--target); padding: 0 2px; border: 0; background: none; color: var(--c-muted); text-align: center; font: 700 var(--t-xs)/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; } .seg__opt:hover { color: var(--c-text); } .seg__opt.is-active { color: var(--c-text); } .seg__opt.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-accent); } .seg--compact { border-bottom: 0; gap: var(--s3); } /* Value segments (curl, volume, compare) share the row evenly so nothing is clipped in narrow inspectors. */ .panel .seg { gap: 0; } .panel .seg__opt { flex: 1 1 0; } /* Curl letters read as values, not labels. */ [data-testid="curl-all"] .seg__opt, [data-testid="sec-curl"] .seg__opt, .spike .seg__opt { font: 600 var(--t-md)/1 var(--font-ui); letter-spacing: 0; text-transform: none; } /* The Photo/Live mode switch is an outline pair like the website's buttons. */ .topbar__center .seg { border: 1px solid var(--c-primary); border-radius: var(--radius); gap: 0; padding: 0; } .topbar__center .seg__opt { min-height: 44px; min-width: 64px; padding: 0 var(--s3); color: var(--c-text); } .topbar__center .seg__opt.is-active { background: var(--c-primary); color: var(--c-on-primary); } .topbar__center .seg__opt.is-active::after { display: none; } /* ------------------------------------------------------------------ preview column */ .preview { position: relative; min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: var(--c-stage); } .toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 46px; padding: 0 var(--s2) 0 var(--s4); background: var(--c-surface); border-bottom: var(--border); } .toolbar.is-disabled .toolbar__tools, .toolbar.is-disabled .seg { opacity: 0.4; pointer-events: none; } .toolbar .seg { border-bottom: 0; } .toolbar__tools { display: flex; align-items: center; gap: 0; } .tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--target); min-width: var(--target); padding: 0 var(--s2); border: 0; background: none; color: var(--c-muted); position: relative; font: 700 var(--t-xs)/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; } .tool svg { width: 18px; height: 18px; } .tool:hover { color: var(--c-text); } .tool.is-active { color: var(--c-text); } .tool.is-active::after { content: ""; position: absolute; left: var(--s2); right: var(--s2); bottom: 6px; height: 2px; background: var(--c-accent); } .stage { position: relative; overflow: clip; min-height: 0; background: var(--c-stage); touch-action: none; user-select: none; -webkit-user-select: none; } .stage__base, .stage__lash-canvas, .stage__debug { position: absolute; inset: 0; width: 100%; height: 100%; } .stage__lashes, .stage__debug { position: absolute; inset: 0; pointer-events: none; } .stage.is-panning { cursor: grabbing; } .stage__overlay { position: absolute; inset: 0; pointer-events: none; } .stage__overlay > * { pointer-events: auto; } .stage__divider { position: absolute; top: 0; bottom: 0; width: var(--target); margin-left: -22px; cursor: ew-resize; touch-action: none; z-index: 3; } .stage__divider::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--c-on-stage); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); } .stage__divider-knob { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; background: var(--c-surface); border-radius: var(--radius); font: 700 10px/1 var(--font-head); letter-spacing: var(--track-btn); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .stage__divider-knob span { padding: 7px 8px 6px; color: var(--c-muted); } .stage__divider-knob span + span { color: var(--c-text); border-left: var(--border); } .stage__handles { position: absolute; inset: 0; pointer-events: none; z-index: 4; } .handle { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; pointer-events: none; touch-action: none; } .handle__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c-on-stage); background: rgba(58, 58, 58, 0.35); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); transition: transform 120ms var(--ease); } .handle--arch .handle__dot { width: 22px; height: 22px; } .handle--offset .handle__dot { border-color: var(--c-accent); } .handle.is-dragging .handle__dot, .handle:focus-visible .handle__dot { transform: scale(1.25); background: rgba(255, 19, 166, 0.35); } .handle:focus-visible { box-shadow: none; } .empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); padding: var(--s5) var(--gutter); text-align: center; color: var(--c-on-stage); background: radial-gradient(90% 70% at 50% 45%, #242424 0%, var(--c-stage) 70%); } .empty__mark { width: 88px; height: 88px; border-radius: var(--radius); } .empty .eyebrow { color: rgba(255, 255, 255, 0.72); } .empty__title { margin: 0; font: 700 var(--t-xl)/1.25 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: var(--c-on-stage); } .empty__title em { font-style: normal; color: var(--c-accent-focus); } .empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s2); } .empty .btn--primary { background: var(--c-on-stage); color: var(--c-text); border-color: var(--c-on-stage); } .empty .btn--primary:hover { background: #f0f0f0; } .empty .btn--line { color: var(--c-on-stage); border-color: var(--c-on-stage); } .empty .btn--line:hover { background: rgba(255, 255, 255, 0.1); } .empty__note { margin: 0; font-size: var(--t-sm); color: rgba(255, 255, 255, 0.6); } .busy { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity var(--t) var(--ease); pointer-events: none !important; } .busy.is-visible { opacity: 1; } .busy__bar { display: block; height: 2px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent) no-repeat; background-size: 40% 100%; animation: sweep 1.1s linear infinite; } .busy__text { display: inline-block; margin: var(--s3) 0 0 var(--s3); padding: 6px 10px 5px; background: var(--c-surface); border-radius: var(--radius); font: 700 var(--t-xs)/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-text); } .live-status { position: absolute; left: 50%; top: var(--s3); transform: translateX(-50%); margin: 0; max-width: calc(100% - 24px); padding: 8px 12px; background: var(--c-surface); border-radius: var(--radius); font-size: var(--t-sm); color: var(--c-text); text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .livebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--c-surface); border-top: var(--border); } .livebar__side { display: flex; align-items: center; gap: var(--s1); min-width: 0; } .livebar__side--end { justify-content: flex-end; } .shutter { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--c-primary); background: var(--c-surface); display: grid; place-items: center; padding: 0; } .shutter__ring { width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary); transition: transform 120ms var(--ease); } .shutter:active .shutter__ring { transform: scale(0.9); } .closeup { position: relative; height: 140px; background: var(--c-stage); } .closeup::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--c-surface); } .closeup__base, .closeup__lash-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .closeup__lashes { position: absolute; inset: 0; pointer-events: none; } .closeup__label { position: absolute; top: 6px; padding: 3px 5px 2px; background: rgba(255, 255, 255, 0.92); border-radius: var(--radius); font: 700 9px/1 var(--font-head); letter-spacing: var(--track-btn); color: var(--c-text); } .closeup__label--r { left: 6px; } .closeup__label--l { left: calc(50% + 7px); } /* ------------------------------------------------------------------ inspector / panel */ .controls { position: relative; min-height: 0; display: flex; flex-direction: column; background: var(--c-surface); } .sheet-grip, .peek-line { display: none; } .tabs { display: flex; gap: var(--s4); padding: 0 var(--gutter); border-bottom: var(--border); overflow-x: auto; scrollbar-width: none; flex: none; } .tabs::-webkit-scrollbar { display: none; } .tabs__tab { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 48px; min-width: var(--target); padding: 0; border: 0; background: none; color: var(--c-muted); position: relative; font: 700 var(--t-xs)/1 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; white-space: nowrap; } .tabs__tab svg { display: none; } .tabs__tab:hover { color: var(--c-text); } .tabs__tab.is-active { color: var(--c-text); } .tabs__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-accent); } .panels { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--c-field) transparent; } .panel { padding: 0 var(--gutter) calc(var(--s6) + var(--safe-b)); } .panel__intro { display: none; } .panel-section { padding: var(--s4) 0 var(--s5); border-bottom: var(--border); } .panel-section:last-child { border-bottom: 0; } .panel-section__head { margin-bottom: var(--s3); } .panel-section__head--row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .panel-section__title { margin: var(--s1) 0 0; font: 700 var(--t-md)/1.25 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-text); } .panel-section > .eyebrow:first-child { margin-bottom: var(--s3); } .panel-section__head .eyebrow { color: var(--c-muted); } /* ------------------------------------------------------------------ controls */ .field { display: block; margin: var(--s4) 0 0; } .field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); } .field__value { font: 600 var(--t-md)/1 var(--font-ui); color: var(--c-text); } .field > .seg, .field > .text, .field > .select { margin-top: var(--s2); } .range { -webkit-appearance: none; appearance: none; width: 100%; height: var(--target); margin: 0; background: transparent; cursor: pointer; --pct: 50%; } .range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--c-primary) var(--pct), var(--c-line) var(--pct)); } .range::-moz-range-track { height: 3px; background: var(--c-line); } .range::-moz-range-progress { height: 3px; background: var(--c-primary); } .range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8.5px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-primary); } .range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-primary); } .range:focus-visible { box-shadow: none; } .range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); } .stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); } .stepper__ctl { display: flex; align-items: center; gap: var(--s1); } .stepper__btn { display: grid; place-items: center; width: var(--target); height: var(--target); border-radius: var(--radius); border: 1px solid var(--c-field); background: var(--c-surface); color: var(--c-text); } .stepper__btn svg { width: 16px; height: 16px; } .stepper__btn:hover { border-color: var(--c-primary); } .stepper__btn:active { background: var(--c-tint); } .stepper__readout { min-width: 72px; text-align: center; display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; } .stepper__value { font: 600 var(--t-lg)/1 var(--font-ui); color: var(--c-text); } .stepper__unit { font: 700 10px/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-muted); } .pair { display: grid; grid-template-columns: 1fr; } .pair .stepper { margin-top: var(--s3); } .switch { display: flex; align-items: center; gap: var(--s3); min-height: 52px; margin-top: var(--s2); cursor: pointer; position: relative; } .switch__text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .switch__label { font-size: var(--t-md); color: var(--c-text); } .switch__hint { font-size: var(--t-sm); color: var(--c-muted); } .switch__input { position: absolute; opacity: 0; width: 44px; height: 28px; right: 0; margin: 0; cursor: pointer; } .switch__track { width: 44px; height: 26px; border-radius: 13px; background: var(--c-field); position: relative; flex: none; transition: background var(--t) var(--ease); } .switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--t) var(--ease); } .switch__input:checked + .switch__track { background: var(--c-primary); } .switch__input:checked + .switch__track::after { transform: translateX(18px); } .switch__input:focus-visible + .switch__track { box-shadow: var(--focus-ring); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--target); padding: 0 var(--s4); border: 1px solid transparent; border-radius: var(--radius); font: 700 12px/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; white-space: nowrap; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); } .btn svg { width: 16px; height: 16px; } .btn--small { padding: 0 var(--s3); font-size: var(--t-xs); } .btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); } .btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); } .btn--accent { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); } .btn--accent:hover { background: var(--c-primary-hover); } .btn--line { background: transparent; border-color: var(--c-primary); color: var(--c-text); } .btn--line:hover { background: var(--c-tint); } .btn--ghost { background: transparent; color: var(--c-text); padding-left: var(--s2); padding-right: var(--s2); text-decoration: underline; text-decoration-color: var(--c-field); text-underline-offset: 4px; } .btn--ghost:hover { text-decoration-color: var(--c-text); } .btn:disabled { opacity: 0.4; } .btn:focus-visible { box-shadow: var(--focus-ring); } .btn-row { display: flex; gap: var(--s2); } .btn-stack { display: grid; gap: var(--s3); margin-top: var(--s4); } .btn-stack .file-btn .btn, .btn-stack > .btn { width: 100%; } .file-btn { display: inline-flex; } .text, .select { width: 100%; min-height: var(--target); padding: 10px var(--s3); font: 400 16px/1.3 var(--font-ui); color: var(--c-body); background: var(--c-surface); border: 1px solid var(--c-field); border-radius: var(--radius); } .text::placeholder { color: var(--c-subtle); } .text:focus, .select:focus { outline: none; border-color: var(--c-field-strong); box-shadow: var(--focus-ring); } .text--area { resize: vertical; min-height: 88px; line-height: 1.45; margin-top: var(--s2); } .select { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--c-text) 50%), linear-gradient(135deg, var(--c-text) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .select--cam { width: auto; max-width: 200px; } .chips { display: flex; flex-wrap: wrap; gap: var(--s2); } .chip { min-height: var(--target); padding: 0 var(--s4); border-radius: var(--radius); border: 1px solid var(--c-field); background: var(--c-surface); color: var(--c-text); font: 700 var(--t-xs)/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; } .chip:hover { border-color: var(--c-primary); } .chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); } .swatches { display: flex; gap: var(--s3); flex-wrap: wrap; } .swatch { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--target); padding: 0 var(--s3) 0 var(--s2); border: 1px solid var(--c-field); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); } .swatch__dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); } .swatch--black .swatch__dot { background: #111; } .swatch--dark-brown .swatch__dot { background: #3b2419; } .swatch--brown .swatch__dot { background: #6a4630; } .swatch__name { font: 700 var(--t-xs)/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; } .swatch.is-active { border-color: var(--c-accent); background: var(--c-accent-tint); } /* ------------------------------------------------------------------ lookbook */ .lookbook { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: var(--s2); margin: 0 calc(-1 * var(--gutter)); padding: var(--s4) var(--gutter) var(--s4); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); scrollbar-width: none; border-bottom: var(--border); } .lookbook::-webkit-scrollbar { display: none; } .look-card { display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0 0 var(--s2); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); scroll-snap-align: start; overflow: hidden; } .look-card__art { width: 100%; aspect-ratio: 16 / 10; padding: 6px 8px 0; color: var(--c-text); background: var(--c-surface-2); } .look-card__name { margin: var(--s2) var(--s2) 0; font: 700 var(--t-xs)/1.2 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; } .look-card__sub { margin: 3px var(--s2) 0; font-size: 11.5px; line-height: 1.3; color: var(--c-muted); } .look-card:hover { border-color: var(--c-field-strong); } .look-card.is-active { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); } .look-card.is-active .look-card__art { background: var(--c-accent-tint); } /* ------------------------------------------------------------------ length map */ .lashmap-wrap { margin: 0; padding: var(--s3) 0 var(--s2); border-bottom: var(--border); } .lashmap { width: 100%; height: auto; touch-action: none; overflow: visible; } .lashmap__arc { fill: none; stroke: var(--c-text); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; } .lashmap__hit { fill: transparent; } .lashmap__lash { stroke: var(--c-field-strong); stroke-width: 1; stroke-linecap: round; pointer-events: none; } .lashmap__mm { fill: var(--c-muted); font: 600 14px var(--font-ui); font-variant-numeric: tabular-nums; pointer-events: none; } .lashmap__lead { stroke: var(--c-line); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; } .lashmap__idx { fill: var(--c-subtle); font: 700 8px var(--font-head); letter-spacing: 0.08em; pointer-events: none; } .lashmap__sec { cursor: pointer; outline: none; } .lashmap__sec.is-selected .lashmap__hit { fill: var(--c-accent-tint); fill-opacity: 0.6; } .lashmap__sec.is-selected .lashmap__lash { stroke: var(--c-text); } .lashmap__sec.is-selected .lashmap__mm { fill: var(--c-text); font-weight: 700; } .lashmap__sec.is-selected .lashmap__idx { fill: var(--c-accent); } .lashmap__sec:focus-visible .lashmap__hit { fill: var(--c-tint); } .lashmap__boundary { cursor: ew-resize; outline: none; } .lashmap__bline { stroke: var(--c-field); stroke-dasharray: 2 3; } .lashmap__bhit { fill: transparent; } .lashmap__bdot { fill: var(--c-surface); stroke: var(--c-text); stroke-width: 1.5; } .lashmap__boundary:focus-visible .lashmap__bdot, .lashmap__boundary:hover .lashmap__bdot { fill: var(--c-accent); stroke: var(--c-accent); } .lashmap__end { fill: var(--c-subtle); font: 700 8px var(--font-head); letter-spacing: 0.08em; } .spikes { display: grid; gap: var(--s3); margin-top: var(--s3); } .spike { padding: var(--s1) var(--s3) var(--s4); border: var(--border); border-radius: var(--radius); background: var(--c-surface-2); } .spike__head { display: flex; align-items: center; justify-content: space-between; } .spike__title { font: 700 var(--t-xs)/1 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: var(--c-text); } /* ------------------------------------------------------------------ blueprint tab */ .approval { margin: var(--s4) 0 0; padding: var(--s4); border: var(--border); border-left: 3px solid var(--c-field); border-radius: var(--radius); background: var(--c-surface-2); } .approval__status { margin: var(--s2) 0 var(--s1); font: 700 var(--t-lg)/1.2 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: var(--c-text); display: flex; align-items: center; gap: var(--s2); } .approval__id { margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; } .approval .btn--accent { width: 100%; white-space: normal; line-height: 1.25; padding: var(--s2) var(--s3); text-align: center; } .approval.is-approved { border-left-color: var(--c-accent); background: var(--c-accent-tint); } .approval.is-approved .approval__status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); } .bp-thumb { display: block; width: 100%; padding: 0; border: var(--border); border-radius: var(--radius); background: var(--c-surface); overflow: hidden; cursor: zoom-in; } .bp-thumb svg { width: 100%; height: auto; } .checks { margin-top: var(--s4); } .checks__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--s2); border-bottom: var(--border); } .checks__count { font: 700 var(--t-sm)/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-success); } .checks__count.is-bad { color: var(--c-error); } .checks__list { list-style: none; margin: 0; padding: 0; } .checks__item { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: var(--border); font-size: var(--t-sm); color: var(--c-body); } .checks__item svg { width: 16px; height: 16px; color: var(--c-success); } .checks__item small { color: var(--c-muted); font-size: var(--t-xs); text-align: right; font-variant-numeric: tabular-nums; } .checks__item.is-bad, .checks__item.is-bad svg { color: var(--c-error); } .export-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } .export-row .btn { flex: 1 1 auto; } .map-save { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: end; } .map-save .field { margin-top: 0; } .maps { list-style: none; margin: var(--s3) 0 0; padding: 0; } .maps__item { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; column-gap: var(--s1); align-items: center; padding: var(--s2) 0; border-bottom: var(--border); } .maps__name { font: 700 var(--t-sm)/1.2 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text); grid-column: 1; } .maps__meta { grid-column: 1; grid-row: 2; font-size: var(--t-xs); color: var(--c-muted); } .maps__item .btn { grid-row: 1 / span 2; } .maps__empty { padding: var(--s3) 0; color: var(--c-muted); font-size: var(--t-sm); } /* ------------------------------------------------------------------ studio (brand content, website style) */ .studio-strip { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--target); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); background: var(--c-primary); color: var(--c-on-primary); text-decoration: none; font: 700 var(--t-xs)/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; } .studio-strip svg { width: 16px; height: 16px; } .studio-hero { padding: var(--s5) 0; text-align: center; border-bottom: var(--border); } .studio-hero__logo { width: 120px; height: 120px; margin: 0 auto var(--s4); display: block; border-radius: var(--radius); } .studio-hero__title { margin: var(--s2) 0; font: 700 var(--t-xl)/1.25 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: var(--c-text); } .studio-hero__lede { margin: 0 auto; max-width: 36ch; color: var(--c-body); font-size: var(--t-md); line-height: 1.6; } .studio-hero .btn-row { justify-content: center; margin-top: var(--s4); flex-wrap: wrap; } .studio-links { display: grid; margin-top: var(--s2); } .studio-link { display: flex; align-items: center; gap: var(--s3); min-height: 56px; border-bottom: var(--border); text-decoration: none; } .studio-link svg { width: var(--icon); height: var(--icon); color: var(--c-text); } .studio-link__text { display: flex; flex-direction: column; gap: 2px; } .studio-link__label { font: 700 var(--t-sm)/1.2 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-text); } .studio-link small { font-size: var(--t-sm); color: var(--c-muted); } .studio-link.is-placeholder { opacity: 0.5; pointer-events: none; } .studio-list { list-style: none; margin: var(--s2) 0 0; padding: 0; columns: 2; column-gap: var(--s4); } .studio-list li { padding: var(--s2) 0; border-bottom: var(--border); font-size: var(--t-md); color: var(--c-body); break-inside: avoid; } .studio-foot { padding: var(--s5) 0 var(--s2); text-align: center; } .studio-foot p { margin: var(--s1) 0; font-size: var(--t-xs); color: var(--c-muted); } /* ------------------------------------------------------------------ dialogs (full-screen sheets) */ .modal-root .sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--c-bg); animation: rise var(--t) var(--ease); } .sheet__head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s3); padding: calc(var(--s2) + var(--safe-t)) calc(var(--s2) + var(--safe-r)) var(--s2) calc(var(--gutter) + var(--safe-l)); border-bottom: var(--border); } .sheet__titles .eyebrow { color: var(--c-muted); } .sheet__title { margin: var(--s1) 0 0; font: 700 var(--t-lg)/1.2 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: var(--c-text); } .sheet__actions { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; } .sheet__actions .btn--ghost { text-decoration: none; border: 1px solid var(--c-primary); padding: 0 var(--s3); } .sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 calc(var(--gutter) + var(--safe-r)) calc(var(--s6) + var(--safe-b)) calc(var(--gutter) + var(--safe-l)); background: var(--c-surface-2); } .bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); max-width: 1280px; margin: 0 auto; padding-top: var(--s5); } .bp-main { min-width: 0; } .bp-approval { margin: 0 0 var(--s3); font: 700 var(--t-xs)/1.2 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-muted); } .bp-approval.is-approved { color: var(--c-text); } .bp-approval.is-approved::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c-accent); } .bp-paper { background: var(--c-surface); border: var(--border); border-radius: var(--radius); overflow: hidden; } .bp-paper svg { width: 100%; height: auto; } .bp-table { width: 100%; margin-top: var(--s4); border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; background: var(--c-surface); border: var(--border); } .bp-table th { padding: var(--s2); text-align: left; font: 700 10px/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-text); border-bottom: var(--border); background: var(--c-surface-2); } .bp-table td { padding: var(--s2); border-bottom: var(--border); color: var(--c-body); white-space: nowrap; } .bp-table td.num { font-weight: 700; color: var(--c-text); } .bp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: var(--s4) 0 0; } .bp-facts dt { font: 700 10px/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-muted); } .bp-facts dd { margin: var(--s1) 0 0; font-size: var(--t-md); color: var(--c-text); } .bp-spikes { margin-top: var(--s4); } .bp-spike-list { margin: var(--s2) 0 0; padding: 0; list-style: none; } .bp-spike-list li { padding: var(--s2) 0; border-bottom: var(--border); font-size: var(--t-sm); color: var(--c-body); } .bp-disclosure { margin: var(--s4) 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--c-muted); } .bp-footer { margin: var(--s2) 0 0; font: 700 10px/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-subtle); } .bp-side { min-width: 0; } .bp-side .checks { margin-top: 0; padding: var(--s3); background: var(--c-surface); border: var(--border); border-radius: var(--radius); } .bp-side > .eyebrow { margin-top: var(--s5); } .bp-txt { margin: var(--s2) 0 0; padding: var(--s3); background: var(--c-surface); border: var(--border); border-radius: var(--radius); font: 10.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--c-body); white-space: pre; overflow-x: auto; } .review { max-width: 1280px; margin: 0 auto; padding-top: var(--s5); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--s5); align-items: start; } .compare { display: grid; gap: var(--s4); position: sticky; top: 0; } .compare__cell { margin: 0; } .compare__cell .eyebrow { margin-bottom: var(--s2); } .compare__img, .compare__canvas { display: block; width: 100%; height: auto; max-height: 36vh; object-fit: contain; background: var(--c-stage); border-radius: var(--radius); } .compare__empty { display: grid; place-items: center; aspect-ratio: 3 / 2; max-height: 30vh; margin: 0; border: 1px dashed var(--c-field); border-radius: var(--radius); color: var(--c-muted); font-size: var(--t-sm); background: var(--c-surface); } .compare__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); } .compare__tools .switch { flex: 1; min-width: 220px; margin: 0; } .review__form { background: var(--c-surface); border: var(--border); border-radius: var(--radius); padding: 0 var(--s4); } .rate { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); } .rate__btns { display: flex; gap: var(--s1); } .rate__btn { width: var(--target); height: var(--target); border-radius: var(--radius); border: 1px solid var(--c-field); background: var(--c-surface); color: var(--c-text); font: 600 var(--t-md)/1 var(--font-ui); } .rate__btn.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); } .asbuilt__row { display: grid; grid-template-columns: 1fr auto 76px; align-items: center; gap: var(--s2); border-bottom: var(--border); } .asbuilt__row .stepper { margin: var(--s1) 0; gap: var(--s2); } .asbuilt__row .stepper > .field__label { min-width: 22px; } .asbuilt__planned { font-size: var(--t-xs); color: var(--c-muted); } .deviations { margin: var(--s2) 0 0; padding: 0; list-style: none; } .deviations li { padding: var(--s2) 0; border-bottom: var(--border); font-size: var(--t-sm); color: var(--c-body); } .deviations__none { color: var(--c-muted) !important; } .summary { max-width: 880px; margin: 0 auto; padding-top: var(--s5); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line); border: var(--border); margin-bottom: var(--s4); } .stats--small { grid-template-columns: repeat(3, 1fr); margin: var(--s2) 0 0; } .stat { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); background: var(--c-surface); } .stat__value { font: 700 var(--t-xl)/1 var(--font-ui); color: var(--c-text); font-variant-numeric: tabular-nums; } .summary .panel-section { background: var(--c-surface); border: var(--border); padding: var(--s3) var(--s4); margin-bottom: var(--s3); } .rank { margin: var(--s2) 0 0; padding: 0; list-style: none; counter-reset: r; } .rank li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: var(--border); font-size: var(--t-sm); color: var(--c-body); counter-increment: r; } .rank li::before { content: counter(r) "."; color: var(--c-muted); width: 22px; flex: none; } .rank li span:first-child { flex: 1; } .rank__n { font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ toast, share bar */ .toast { position: fixed; left: 50%; top: calc(var(--header-h) + var(--safe-t) + 56px); z-index: 80; transform: translate(-50%, -6px); opacity: 0; pointer-events: none; max-width: min(440px, calc(100vw - 24px)); padding: 10px 14px; background: var(--c-primary); color: var(--c-on-primary); border-radius: var(--radius); font-size: var(--t-sm); text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .toast.is-error { background: var(--c-error); } .ready-bar { position: fixed; left: 50%; bottom: calc(var(--s4) + var(--safe-b)); z-index: 85; transform: translateX(-50%); display: flex; align-items: center; gap: var(--s2); max-width: calc(100vw - 24px); padding: var(--s1) var(--s1) var(--s1) var(--s3); background: var(--c-surface); border: var(--border); border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); font-size: var(--t-sm); } .ready-bar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ready-bar strong { font-weight: 700; } .tabbar { display: none; } /* ------------------------------------------------------------------ wide layout: iPad / desktop inspector */ .app[data-layout="wide"] .workspace { grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 420px); } .app[data-layout="wide"] .controls { border-left: var(--border); } .app[data-layout="wide"] .lookbook { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: var(--s4) 0; } .app[data-layout="wide"] .closeup-slot--sheet { display: none; } .app[data-layout="wide"].is-short .closeup-slot--sheet { display: block; border-bottom: var(--border); } .app[data-layout="wide"].is-short .closeup-slot--stage { display: none; } .app[data-layout="wide"].is-short .closeup { height: 92px; } .app[data-layout="wide"].is-short { --header-h: 50px; } .app[data-layout="wide"].is-short .toolbar { height: 40px; } .app[data-layout="wide"].is-short .workspace { grid-template-columns: minmax(0, 1fr) clamp(280px, 40vw, 360px); } .app[data-layout="wide"].is-short .brand__mark { width: 30px; height: 30px; } .app[data-layout="wide"].is-short .tabs__tab { min-height: 44px; letter-spacing: 0.04em; font-size: 10px; } .app[data-layout="wide"].is-short .tabs { gap: 10px; padding: 0 var(--s3); justify-content: space-between; } .app[data-layout="wide"].is-short .lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ------------------------------------------------------------------ phone layout: stage + expandable panel */ .app[data-layout="phone"] { --peek: 60px; --tabbar-h: calc(var(--tabbar) + var(--safe-b)); --gutter: var(--s4); } .app[data-layout="phone"].has-closeup { --peek: 150px; } .app[data-layout="phone"] .brand__word { font-size: var(--t-xs); letter-spacing: 0.14em; } .app[data-layout="phone"] .brand__mark { width: 32px; height: 32px; } .app[data-layout="phone"] .topbar { grid-template-columns: auto 1fr auto; padding-left: calc(var(--s3) + var(--safe-l)); padding-right: calc(var(--s1) + var(--safe-r)); gap: var(--s2); } .app[data-layout="phone"] .topbar__center .seg__opt { min-width: 52px; padding: 0 var(--s2); } .app[data-layout="phone"] .engine-status { width: 12px; overflow: hidden; color: transparent; font-size: 0; gap: 0; } .app[data-layout="phone"] .workspace { display: block; } .app[data-layout="phone"] .preview { position: absolute; inset: 0 0 var(--peek) 0; grid-template-rows: auto minmax(0, 1fr); } .app[data-layout="phone"] .toolbar { height: 44px; padding: 0 0 0 var(--s3); } .app[data-layout="phone"] .toolbar .seg { gap: var(--s2); } .app[data-layout="phone"] .tool { padding: 0 6px; } .app[data-layout="phone"] .tool svg { display: none; } .app[data-layout="phone"] .closeup-slot--stage { display: none; } .app[data-layout="phone"] .livebar { position: absolute; left: 0; right: 0; bottom: 0; border-top: 0; background: transparent; padding: var(--s3) var(--s2); } .app[data-layout="phone"] .livebar .tool, .app[data-layout="phone"] .livebar .seg__opt { color: var(--c-on-stage); } .app[data-layout="phone"] .livebar .select--cam { display: none; } .app[data-layout="phone"] .livebar .seg { background: rgba(0, 0, 0, 0.45); border-radius: var(--radius); padding: 0 var(--s2); } .app[data-layout="phone"] .livebar .tool { background: rgba(0, 0, 0, 0.45); border-radius: var(--radius); } .app[data-layout="phone"] .controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--peek); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--c-surface); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.22); transition: height 220ms var(--ease); overflow: clip; } .app[data-layout="phone"] .controls.is-dragging { transition: none; } .app[data-layout="phone"] .controls[data-sheet="half"] { height: 56%; } .app[data-layout="phone"] .controls[data-sheet="full"] { height: calc(100% - 64px); } .app[data-layout="phone"] .controls[data-sheet="peek"] .panels { visibility: hidden; } .app[data-layout="phone"] .sheet-grip { display: grid; place-items: center; flex: none; width: 100%; height: var(--target); margin-bottom: -16px; padding: 0; border: 0; background: none; touch-action: none; position: relative; z-index: 2; } .app[data-layout="phone"] .sheet-grip span { width: 36px; height: 4px; border-radius: 2px; background: var(--c-field); } .app[data-layout="phone"] .closeup-slot--sheet { flex: none; padding: var(--s1) var(--s3) var(--s2); } .app[data-layout="phone"] .controls[data-sheet="half"] .closeup-slot--sheet { display: none; } .app[data-layout="phone"] .closeup { height: 98px; border-radius: var(--radius); overflow: hidden; } .app[data-layout="phone"] .peek-line { display: block; margin: 0; padding: var(--s1) var(--s4) var(--s3); text-align: center; font: 700 10px/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-muted); } .app[data-layout="phone"] .tabs { display: none; } .app[data-layout="phone"] .panels { border-top: var(--border); } .app[data-layout="phone"] .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tabbar-h); padding: 0 calc(var(--s1) + var(--safe-r)) var(--safe-b) calc(var(--s1) + var(--safe-l)); background: var(--c-surface); border-top: var(--border); position: relative; z-index: 40; } .tabbar__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: var(--target); border: 0; background: none; color: var(--c-muted); position: relative; font: 700 9.5px/1 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; } .tabbar__tab svg { width: 22px; height: 22px; } .tabbar__tab.is-active { color: var(--c-text); } .tabbar__tab.is-active::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; background: var(--c-accent); } .app[data-layout="phone"] .ready-bar { bottom: calc(var(--tabbar-h) + var(--s3)); } .app[data-layout="phone"] .empty__actions { flex-direction: column; width: 100%; max-width: 280px; } .app[data-layout="phone"] .empty__actions .btn, .app[data-layout="phone"] .empty__actions .file-btn { width: 100%; } .app[data-layout="phone"] .bp-layout, .app[data-layout="phone"] .review { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .app[data-layout="phone"] .bp-table { display: block; overflow-x: auto; } .app[data-layout="phone"] .compare { position: static; } .app[data-layout="phone"] .bp-facts { grid-template-columns: repeat(2, 1fr); } .app[data-layout="phone"] .stats { grid-template-columns: repeat(2, 1fr); } .app[data-layout="phone"] .sheet__head { grid-template-columns: 1fr auto; } .app[data-layout="phone"] .sheet__actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } .app[data-layout="phone"] .sheet__close { grid-column: 2; grid-row: 1; } /* ------------------------------------------------------------------ §17 eye analysis */ .analysis__status { margin: 0; font: 700 var(--t-sm)/1.35 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text); } .analysis__status.is-low { color: var(--c-error); } .analysis__issues { margin: var(--s2) 0 0; padding: 0 0 0 var(--s4); font-size: var(--t-sm); color: var(--c-muted); } .analysis > .btn { margin-top: var(--s3); } .traits { margin-top: var(--s3); border-top: var(--border); } .trait { padding: var(--s3) 0; border-bottom: var(--border); } .trait__head { display: grid; grid-template-columns: 72px minmax(0, 1fr) 48px; align-items: center; gap: var(--s2); } .trait__label { font: 700 var(--t-xs)/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; color: var(--c-muted); } .trait__select { min-height: var(--target); font-size: 16px; } .trait__conf { justify-self: end; font: 600 var(--t-sm)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-success); } .trait__conf.is-low { color: var(--c-error); } .trait__measured { margin: var(--s2) 0 0; font: 600 var(--t-sm)/1.35 var(--font-ui); color: var(--c-text); font-variant-numeric: tabular-nums; } .trait__why { margin: var(--s1) 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--c-muted); } .trait.is-overridden { box-shadow: inset 3px 0 0 var(--c-accent); padding-left: var(--s3); } .rec { margin-top: var(--s4); padding: var(--s4); background: var(--c-surface-2); border: var(--border); border-radius: var(--radius); } .rec__head { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: var(--s3); margin-top: var(--s2); } .rec__art svg { width: 112px; height: auto; } .rec__name { margin: 0; font: 700 var(--t-sm)/1.35 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text); } .rec__reasons { margin: var(--s3) 0; padding-left: var(--s4); font-size: var(--t-sm); line-height: 1.5; color: var(--c-body); } .rec__reasons li + li { margin-top: var(--s1); } .rec > .btn { width: 100%; } /* ------------------------------------------------------------------ §17 client records, look card, booking */ .client-current { padding: var(--s3) var(--s4); background: var(--c-surface-2); border: var(--border); border-radius: var(--radius); } .client-current__name { margin: 0 0 var(--s1); font: 700 var(--t-md)/1.25 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text); } .booking-note { margin: var(--s3) 0 0; padding: var(--s3); border: var(--border); border-left: 3px solid var(--c-accent); border-radius: var(--radius); background: var(--c-surface-2); font-size: var(--t-sm); line-height: 1.45; color: var(--c-body); } .btn-row--wrap { flex-wrap: wrap; margin-top: var(--s3); } .clients { max-width: 1180px; margin: 0 auto; padding-top: var(--s5); display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--s5); align-items: start; } .clients__list, .client-detail, .client-detail__empty { background: var(--c-surface); border: var(--border); border-radius: var(--radius); padding: var(--s4); } .client-detail { padding-top: var(--s2); } .client-detail__empty { margin: 0; color: var(--c-muted); } .records-notice { margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--c-muted); } .records-notice.is-warning { color: var(--c-error); } .clients__bar { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: center; } .client-new { margin-top: var(--s3); padding: var(--s3); background: var(--c-surface-2); border: var(--border); } .client-new .btn-row { margin-top: var(--s3); } .client-list { list-style: none; margin: var(--s3) 0 0; padding: 0; } .client-list__empty { padding: var(--s3) 0; color: var(--c-muted); font-size: var(--t-sm); list-style: none; } .client-item { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); align-items: center; width: 100%; min-height: 56px; padding: var(--s2) 0; border: 0; border-bottom: var(--border); background: none; text-align: left; } .client-item.is-active { box-shadow: inset 3px 0 0 var(--c-accent); padding-left: var(--s3); } .client-item__initials { display: grid; place-items: center; width: 44px; height: 44px; background: var(--c-primary); color: var(--c-on-primary); font: 700 var(--t-sm)/1 var(--font-head); letter-spacing: 0.06em; border-radius: var(--radius); } .client-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .client-item__name { font: 700 var(--t-sm)/1.25 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client-item__meta { font-size: var(--t-xs); color: var(--c-muted); } .client-detail__title { margin: var(--s2) 0 0; font: 700 var(--t-lg)/1.2 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: var(--c-text); } .history { list-style: none; margin: var(--s3) 0 0; padding: 0; } .history__item { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s2); align-items: center; padding: var(--s3) 0; border-bottom: var(--border); } .history__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .history__name { font: 700 var(--t-sm)/1.25 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text); } .history__meta { font-size: var(--t-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; } .badges { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); } .badge { padding: 2px 6px; border: 1px solid var(--c-field); border-radius: var(--radius); font: 700 10px/1.3 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text); } .danger { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--c-error); background: var(--c-error-tint); border-radius: var(--radius); } .danger__text { margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--c-body); } .lookcard { max-width: 1080px; margin: 0 auto; padding-top: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--s5); align-items: start; } .lookcard__preview { background: var(--c-surface); border: var(--border); border-radius: var(--radius); padding: var(--s3); } .lookcard__img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; } .lookcard__side .panel-section { background: var(--c-surface); border: var(--border); padding: var(--s3) var(--s4); } .app[data-layout="phone"] .clients, .app[data-layout="phone"] .lookcard { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s3); } .app[data-layout="phone"] [data-testid="clients-sheet"].has-selection .clients__list { display: none; } .app[data-layout="phone"] [data-testid="clients-sheet"]:not(.has-selection) .clients__detail { display: none; } .app[data-layout="phone"] .history__item { grid-template-columns: 1fr auto; } .app[data-layout="phone"] .history__item .btn--ghost { grid-column: 2; } [data-testid="clients-sheet"]:not(.has-selection) [data-testid="client-back"], .app:not([data-layout="phone"]) [data-testid="client-back"] { display: none; } @media (max-width: 370px) { .app[data-layout="phone"] .brand__word { display: none; } } @media (max-height: 700px) { .empty { gap: var(--s3); } .empty__mark { width: 64px; height: 64px; } .empty__note { display: none; } } @media (max-height: 520px) { .empty__mark, .empty .eyebrow { display: none; } .empty__title { font-size: var(--t-lg); } .app[data-layout="phone"] .empty__actions { flex-direction: row; max-width: none; } } @keyframes pulse { 50% { opacity: 0.35; } } @keyframes sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } /* ------------------------------------------------------------------ print: blueprint only, white paper */ @media print { @page { margin: 12mm; } html, body { position: static; height: auto; overflow: visible; background: #fff !important; color: #222 !important; } .app { position: static; display: block; background: #fff; } .app > :not(.modal-root) { display: none !important; } .modal-root > :not([data-testid="blueprint-sheet"]) { display: none !important; } .modal-root [data-testid="blueprint-sheet"] { display: block !important; position: static; background: #fff; animation: none; } .sheet__head { padding: 0 0 8px; } .sheet__actions, .sheet__close { display: none !important; } .sheet__body { overflow: visible; padding: 0; background: #fff; } .bp-layout { display: block; padding: 0; } .bp-side .checks { display: none; } .bp-txt { page-break-before: always; } } /* ------------------------------------------------------------------ one-time iOS install hint (card on the stage, not a banner) */ .install-hint { position: absolute; left: 50%; top: var(--s3); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s1); max-width: calc(100% - 24px); padding: 0 0 0 var(--s3); background: var(--c-surface); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); font-size: var(--t-sm); color: var(--c-body); white-space: nowrap; z-index: 6; } .install-hint strong { font-weight: 700; color: var(--c-text); } .app.has-modal ~ .toast, .app.has-modal .toast { top: auto; bottom: calc(var(--s5) + var(--safe-b)); } /* Phone live controls: toggles on one row, shutter centred below, nothing clipped. */ .app[data-layout="phone"] .livebar { grid-template-columns: auto 1fr auto; grid-template-areas: "l . r" "s s s"; row-gap: var(--s2); } .app[data-layout="phone"] .livebar__side { grid-area: l; } .app[data-layout="phone"] .livebar__side--end { grid-area: r; } .app[data-layout="phone"] .livebar .shutter { grid-area: s; justify-self: center; } /* ------------------------------------------------------------------ §18 opening sequence, sign-in and lock screen. The only dark surfaces in the app: Lexy's neon logo on black, then the sign-in card. Everything behind them keeps the light brand design above. */ .gate { /* White-label: an imported studio profile paints its own accent here; Mad Lashes keeps the brand pink. */ --gate-accent: var(--c-accent); position: fixed; inset: 0; z-index: 200; display: grid; align-content: center; justify-items: center; padding: calc(var(--safe-t) + var(--s5)) calc(var(--safe-r) + var(--s4)) calc(var(--safe-b) + var(--s6)) calc(var(--safe-l) + var(--s4)); background: #000; color: #fff; font-family: var(--font-ui); overflow: hidden; transition: opacity 400ms ease; } .gate[data-phase="done"] { opacity: 0; pointer-events: none; } /* §18.2 Trusted device: the lit logo, still centred, fades out over the app instead of lifting to reveal a card. */ .gate[data-phase="dissolve"] { opacity: 0; pointer-events: none; transition: opacity 800ms cubic-bezier(.4,.1,.3,1); } .gate[data-phase="dissolve"] .gate__logo { opacity: 1; transform: scale(1); } .gate[data-phase="dissolve"] .gate__card { opacity: 0; } .gate__stack { display: grid; justify-items: center; gap: clamp(24px, 5vh, 52px); width: min(100%, 460px); transform: translateY(var(--rise, 12vh)); transition: transform 650ms cubic-bezier(.22, .7, .25, 1); will-change: transform; } .gate[data-phase="rise"] .gate__stack, .gate[data-phase="card"] .gate__stack, .gate[data-phase="ready"] .gate__stack, .gate[data-phase="done"] .gate__stack { transform: none; } .gate__logo { position: relative; width: min(86vw, 460px); aspect-ratio: 1200 / 610; opacity: 0; transform: scale(1.02); transition: opacity 900ms cubic-bezier(.3, .55, .25, 1), transform 1100ms cubic-bezier(.22, .7, .25, 1); will-change: opacity, transform; } .gate[data-phase="fade"] .gate__logo, .gate[data-phase="glow"] .gate__logo, .gate[data-phase="rise"] .gate__logo, .gate[data-phase="card"] .gate__logo, .gate[data-phase="ready"] .gate__logo, .gate[data-phase="done"] .gate__logo { opacity: 1; transform: scale(1); } .gate__logo-art { position: absolute; inset: 0; } .gate__logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* Only opacity animates on these layers; both are composited, so the ignition stays smooth on a phone. */ .gate__logo-img--neon { /* The lit state is generated from this very crop (scripts/splash_assets.py), so it sits exactly on top. */ opacity: 0; transition: opacity 1000ms cubic-bezier(.4, .2, .35, 1); will-change: opacity; } .gate__logo-bloom { position: absolute; inset: -14% -8%; pointer-events: none; opacity: 0; background: radial-gradient(56% 50% at 50% 47%, var(--gate-glow-soft, rgba(255, 60, 190, 0.3)), var(--gate-glow-inner, rgba(255, 19, 166, 0.12)) 50%, rgba(0, 0, 0, 0) 74%); mix-blend-mode: screen; filter: blur(14px); transition: opacity 1000ms cubic-bezier(.4, .2, .35, 1); will-change: opacity; } .gate__logo--studio { width: min(60vw, 300px); aspect-ratio: auto; display: grid; place-items: center; } .gate__logo--studio .gate__logo-art { position: static; } .gate__logo--studio .gate__logo-img { position: static; height: auto; max-height: 38vh; } .gate__logo--studio .gate__logo-bloom { display: none; } /* The glow beat: the neon lights up over the plain logo and the air around it warms. */ .gate[data-phase="glow"] .gate__logo-img--neon, .gate[data-phase="rise"] .gate__logo-img--neon, .gate[data-phase="card"] .gate__logo-img--neon, .gate[data-phase="ready"] .gate__logo-img--neon, .gate[data-phase="done"] .gate__logo-img--neon, .gate[data-phase="dissolve"] .gate__logo-img--neon { opacity: 1; } .gate[data-phase="glow"] .gate__logo-bloom, .gate[data-phase="rise"] .gate__logo-bloom, .gate[data-phase="card"] .gate__logo-bloom, .gate[data-phase="ready"] .gate__logo-bloom, .gate[data-phase="done"] .gate__logo-bloom, .gate[data-phase="dissolve"] .gate__logo-bloom { opacity: 1; } .gate__card { width: 100%; display: grid; gap: var(--s4); justify-items: stretch; opacity: 0; transform: translateY(18px); transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.7,.2,1); pointer-events: none; } .gate[data-phase="card"] .gate__card, .gate[data-phase="ready"] .gate__card { opacity: 1; transform: none; pointer-events: auto; } .gate__form { display: grid; gap: var(--s3); } .gate__title { margin: 0 0 var(--s1); font: 600 var(--t-sm)/1.4 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: #fff; } .gate__field { display: grid; grid-template-columns: 52px 1px 1fr; align-items: center; min-height: 56px; border: 1.5px solid var(--gate-accent); border-radius: 999px; background: var(--gate-glow-bg, rgba(255, 19, 166, 0.04)); box-shadow: 0 0 12px var(--gate-glow-soft, rgba(255, 19, 166, 0.35)), inset 0 0 10px var(--gate-glow-inner, rgba(255, 19, 166, 0.12)); } .gate__field:focus-within { box-shadow: 0 0 18px var(--gate-glow-strong, rgba(255, 19, 166, 0.6)), inset 0 0 14px var(--gate-glow-focus-inner, rgba(255, 19, 166, 0.18)); } .gate__field-icon { display: grid; place-items: center; color: #fff; } .gate__field-icon svg { width: 22px; height: 22px; } .gate__field-rule { height: 22px; background: rgba(255, 255, 255, 0.5); } .gate__input { min-height: 52px; padding: 0 var(--s4); border: 0; background: none; color: #fff; font: 400 16px/1.3 var(--font-ui); letter-spacing: 0.02em; } .gate__input::placeholder { color: rgba(255, 255, 255, 0.65); } .gate__input:focus { outline: none; } .gate__input:disabled { color: rgba(255, 255, 255, 0.6); } .gate__submit { min-height: 52px; border: 1.5px solid #fff; border-radius: 999px; background: #fff; color: #111; font: 700 var(--t-sm)/1 var(--font-head); letter-spacing: var(--track-btn); text-transform: uppercase; cursor: pointer; } .gate__submit:hover:not(:disabled) { background: var(--gate-accent); border-color: var(--gate-accent); color: #fff; } .gate__submit:disabled { opacity: 0.45; cursor: default; } .gate[data-busy="yes"] .gate__submit { opacity: 0.6; } .gate__forgot { justify-self: center; min-height: 44px; padding: 0 var(--s3); border: 0; background: none; cursor: pointer; color: var(--gate-accent); font: 500 var(--t-xs)/1 var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0; transition: opacity 400ms ease; } .gate[data-phase="ready"] .gate__forgot { opacity: 1; } .gate__forgot:hover { color: #fff; } .gate__error { min-height: 18px; margin: 0; color: #ff9ad8; font-size: var(--t-sm); } .gate__hint { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: var(--t-xs); line-height: 1.5; } /* §18.1 A closed build: the notice stands where the form would be, in the studio's own accent. */ .gate__closed { display: grid; gap: 8px; padding: 4px 2px 2px; text-align: center; } .gate__closed-title { margin: 0; color: var(--gate-accent); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.04em; } .gate__closed-body { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: var(--t-xs); line-height: 1.55; } .gate__closed[hidden] { display: none; } .gate button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* The neon field itself brightens on focus (see .gate__field:focus-within), so the app's default ring is dropped here. */ .gate__input:focus, .gate__input:focus-visible { outline: none; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .gate, .gate__stack, .gate__logo, .gate__logo-img, .gate__logo-bloom, .gate__card, .gate__forgot { transition: none !important; } } /* Recovery code, shown once after the first sign-in. */ .recovery { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--s4); background: rgba(18, 18, 18, 0.72); } .recovery__card { width: min(100%, 420px); padding: var(--s5); background: var(--c-surface); border-radius: var(--radius-sheet); display: grid; gap: var(--s3); } .recovery__title { margin: 0; font: 700 var(--t-xl)/1.2 var(--font-head); text-transform: uppercase; letter-spacing: var(--track-head); } .recovery__code { margin: 0; padding: var(--s3); background: var(--c-surface-2); border: var(--border); font: 600 var(--t-lg)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; letter-spacing: 0.08em; word-break: break-all; } .recovery__note { margin: 0; color: var(--c-muted); font-size: var(--t-sm); line-height: 1.5; } .recovery__actions { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }