/* Virtual styling (Makeup + Hair) page styles. All rules namespaced .st-* so the stylesheet can be loaded globally in the document head. Flat design: solid fills + borders, no depth shadows. Uses Bootstrap --bs-* tokens so it follows the active theme. The studios' LAYOUT is not here: /makeup and /hair render the same three-card track as /outfits (.st-studio / .st-progress / .st-wrap / .st-track / .st-card / .st-photo / .st-nav, plus .to-rbox / .to-zone / .to-idle for the photo boxes), all of which live in tryon.css and are shared verbatim - including the 3/4 photo frame, the aspect ratio phone cameras shoot. Likewise the kept looks: makeup and hair looks sit in the one dated feed on /looks, so this file carries no history, equation or modelling-video rules any more. What IS here: card 2's chosen-style tile, the style + colour picker modal, the styling-specific generating and keep effects, and the admin catalog rows. */ /* ── card 2: the chosen style ──────────────────────────────────────────────────────── */ /* The whole tile is the button that reopens the picker (same shape as card 3's idle Generate zone). It inherits .to-rbox-open's absolute fill from tryon.css; these are the styling-only extras. */ /* A chosen tile bleeds to the card edge like the upload tile beside it, so it needs no border of its own - the card supplies the outline. The empty state is a .to-zone, whose dashed border must survive. */ .st-photo--pick .to-rbox:not(.to-zone) { border-color: transparent; } /* An EzButton now as well. It is a transparent overlay laid across a photograph, so the one thing that must never happen is Bootstrap's .btn:hover painting a body-bg panel over the picture - and .to-rbox-open's own `background: none` loses that fight on specificity. Every fill and border is pinned to transparent through the variables instead. gap:0 and the zeroed padding replace what .btn's inline-flex box would otherwise add around the image. Scoped to .st-pick, never .to-rbox-open: the other four click-zone overlays are still raw buttons, where these variables are inert. */ .st-pick { cursor: pointer; gap: 0; --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; --bs-btn-border-radius: 0; --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-border-color: transparent; } .st-pick:disabled { cursor: default; } .st-pick-ph { position: relative; z-index: 1; font-size: 2.4rem; color: var(--bs-secondary-color); } /* The style's name (and hair colour) riding the bottom of its own tile - a tile alone does not say which cut or which colour it was. Click-through so the tile underneath stays one big picker button. */ /* A chip centred on the bottom edge of the IMAGE (not a bar across the card), in the same bottom slot and the same inset as every other card's bottom row - see the placement standard in tryon.css. */ .st-chosen { position: absolute; left: 50%; bottom: var(--st-edge, 1.15rem); z-index: 2; pointer-events: none; transform: translateX(-50%); max-width: calc(100% - 2 * var(--st-edge, 1.15rem)); display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.35rem 0.85rem; text-align: center; line-height: 1.2; border-radius: var(--bs-border-radius-lg); /* 0.70, not 0.55: the scrim has to carry white text over an ARBITRARY photograph, and against a pale one 55% left the caption at roughly 4.9:1 before .st-chosen-sub's own 0.85 opacity took it under AA. At 70% the worst case (a white photo behind it) is about 8.8:1. */ color: #fff; background: rgba(0, 0, 0, 0.7); } .st-chosen-name { font-size: 0.85rem; font-weight: 600; } .st-chosen-sub { font-size: 0.75rem; opacity: 0.85; } /* ── style + colour picker (modal) ─────────────────────────────────────────────────── */ /* ONE question at a time, so the list always owns the full width of the modal and there is a single scroll region under the thumb. (Hair used to put the colours in a second column, which stacked below the whole haircut gallery on a phone - the colours were unreachable without scrolling past everything, and each column fought for its own scroll.) The card is chosen in the markup; this is just the frame. */ .st-picker { display: flex; flex-direction: column; min-width: 0; } .st-picker-colhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; } .st-picker-scroll { overflow-y: auto; max-height: 60vh; padding-right: .25rem; } /* The haircut carried into the colour card, so the shade is judged against something. */ /* The chosen haircut, riding along the top of the colour card. It is also the way BACK to the haircuts now that the picker has no footer, so it is a button: quiet at rest so it still reads as a caption, with the pen and a border on hover to say it can be changed. */ .st-picker-chosen { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--bs-secondary-color); min-width: 0; padding: .25rem .5rem .25rem .25rem; background: none; border: 1px solid transparent; border-radius: var(--bs-border-radius-xxl); cursor: pointer; transition: border-color .15s, color .15s; } .st-picker-chosen:hover, .st-picker-chosen:focus-visible { border-color: var(--bs-border-color); color: var(--bs-body-color); } .st-picker-chosen img { width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; flex: none; } .st-picker-chosen span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-picker-chosen i { font-size: .75rem; flex: none; } .st-group-head { margin: 1.25rem 0 0.75rem; font-size: .95rem; font-weight: 600; } .st-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; } /* An EzButton (the platform has one button component; a tile is a button whose content is a picture, a name and a price). Three groups of declarations keep it looking exactly as it did as a raw