/*! * Actress profile — nude.com * Self-hosted replacement for the dead mrskincdn.com stylesheets. * Everything is scoped to #actress-page so it cannot leak into the * Elementor header/footer or any other template. * * Covers BOTH markup variants found in post_content: * A) .details-section / .details-thumbnail / .details-list (~23,030 posts) * B) .top-details-area / .media-object / .pedigree-details (~9,200 posts) */ /* NB: do not paint here. #actress-page ends exactly where the Elementor footer begins, so there is no gap to cover, and the header's "Our Friends" row is transparent black text that relies on the theme's white body — a dark body drops it to ~1.1:1 contrast. Everything stays inside #actress-page. */ #actress-page { /* ---- palette (dark, committed; accent is the brand orange #E43D12) ---- */ --bg: oklch(0.16 0.008 45); --surface: oklch(0.21 0.010 45); --surface-2: oklch(0.26 0.012 45); --line: oklch(0.32 0.014 45); --ink: oklch(0.97 0.004 45); --muted: oklch(0.75 0.012 45); /* 0.66 not 0.58: --faint is used for 10px text on the darker .az plate and only clears 4.5:1 from here up (measured 4.32 at 0.58). */ --faint: oklch(0.66 0.012 45); --accent: oklch(0.58 0.199 33); /* #E43D12 */ --accent-lift: oklch(0.68 0.185 38); --accent-ink: oklch(0.72 0.170 40); /* accent as text on dark */ --cool: oklch(0.78 0.090 220); /* "Sexy" / informational */ --star-off: oklch(0.34 0.010 45); --display: "ZCOOL XiaoWei", Georgia, serif; --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --shadow: 0 1px 2px oklch(0 0 0 / .4), 0 8px 24px oklch(0 0 0 / .35); --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */ /* z-index scale */ --z-base: 1; --z-overlay: 10; --z-modal-backdrop: 40; --z-modal: 50; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; padding-block: 0 clamp(2rem, 5vw, 4rem); overflow-x: hidden; } /* ============================================================ Base ============================================================ */ #actress-page *, #actress-page *::before, #actress-page *::after { box-sizing: border-box; } #actress-page img { max-width: 100%; height: auto; display: block; } #actress-page a { color: var(--accent-ink); text-decoration: none; transition: color .18s var(--ease); } #actress-page a:hover { color: var(--accent-lift); } #actress-page a:focus-visible, #actress-page button:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 3px; border-radius: var(--r-sm); } #actress-page p { margin: 0 0 .75em; } #actress-page ul { margin: 0; padding: 0; } #actress-page hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; } #actress-page .MyClass { display: none !important; } /* wpautop() turns every newline in post_content into a
. Inside a grid container each
becomes a grid item and shunts the next value onto its own row, so they must go where we rely on grid or on tight line counts. Scoped deliberately:
is still meaningful in prose and captions. */ #actress-page .details-list br, #actress-page .pedigree-details br, #actress-page .appearance-item br, #actress-page .details-rating br, #actress-page .object-rating br, #actress-page .sk-tag-cloud br, #actress-page .access-form ul br { display: none; } /* ============================================================ Layout primitives (replacing Bootstrap 3) ============================================================ */ #actress-page .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } #actress-page .content-container { padding-block: clamp(1.75rem, 4vw, 3rem); } /* alternating slabs give vertical rhythm without drawing boxes */ #actress-page .content-container.bg-white { background: var(--surface); } #actress-page .row-r { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; } #actress-page .row-r > [class*="col-"] { flex: 1 1 100%; min-width: 0; } @media (min-width: 576px) { #actress-page .row-r > .col-sm-2 { flex-basis: calc(16.6667% - 1.05rem); } #actress-page .row-r > .col-sm-3 { flex-basis: calc(25% - 1rem); } #actress-page .row-r > .col-sm-4 { flex-basis: calc(33.3333% - .9rem); } #actress-page .row-r > .col-sm-6 { flex-basis: calc(50% - .625rem); } #actress-page .row-r > .col-sm-7 { flex-basis: calc(58.3333% - .55rem); } #actress-page .row-r > .col-xs-6 { flex-basis: calc(50% - .625rem); } } @media (min-width: 992px) { #actress-page .row-r > .col-md-3 { flex-basis: calc(25% - 1rem); } #actress-page .row-r > .col-md-4 { flex-basis: calc(33.3333% - .9rem); } #actress-page .row-r > .col-md-6 { flex-basis: calc(50% - .625rem); } } @media (max-width: 575.98px) { #actress-page .hidden-xs { display: none !important; } } /* The scene grid is the one place a real 2D grid beats flex — breakpoint-free and never leaves a stranded last row. */ #actress-page .top-scenes-container.row-r { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min, 210px), 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); } /* the source markup is col-xs-6, i.e. two-up on phones — honour that rather than letting a 210px floor collapse it to a single column */ @media (max-width: 700px) { #actress-page .top-scenes-container.row-r { --thumb-min: 140px; } } #actress-page .top-scenes-container.row-r > [class*="col-"] { flex: none; } /* ---- spacing / text utilities used by the scraped markup ---- */ #actress-page .py-4 { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); } #actress-page .p-3 { padding: clamp(.9rem, 2vw, 1.25rem); } #actress-page .mr-2 { margin-right: 1rem; } #actress-page .mt-2 { margin-top: 1rem; } #actress-page .mb-2 { margin-bottom: 1rem; } #actress-page .my-0 { margin-block: 0; } #actress-page .my-1 { margin-block: .5rem; } #actress-page .mx-0 { margin-inline: 0; } #actress-page .list-unstyled { list-style: none; padding: 0; } #actress-page .img-responsive { width: 100%; } #actress-page .invisible { visibility: hidden; } #actress-page .text-muted { color: var(--muted); } #actress-page .text-danger { color: var(--accent-ink); font-weight: 600; } #actress-page .text-info, #actress-page .text-blue, #actress-page .text-primary { color: var(--cool); font-weight: 600; } /* ============================================================ Typography ============================================================ */ #actress-page h1, #actress-page h2, #actress-page h3, #actress-page .h2, #actress-page .h4, #actress-page .h5 { font-family: var(--display); color: var(--ink); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0 0 .5rem; letter-spacing: -0.015em; } #actress-page .h4 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); } #actress-page .h5 { font-size: 1rem; letter-spacing: 0; } /* Section headings: display type + a short accent rule. One consistent device instead of an eyebrow above every block. */ #actress-page .section-header { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 1.25rem; padding-bottom: .6rem; position: relative; } #actress-page .section-header::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--accent); border-radius: 2px; } #actress-page .section-header.invisible::after { display: none; } /* ============================================================ HERO — shared shell for variant A and variant B ============================================================ */ #actress-page .details-section, #actress-page .top-details-container { position: relative; isolation: isolate; background: var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; } /* Blurred portrait backdrop (src copied to --hero by actress.js). Falls back to a flat surface when the var is absent. */ #actress-page .details-section::before, #actress-page .top-details-container::before { content: ""; position: absolute; inset: -10%; z-index: -2; background-image: var(--hero, none); background-size: cover; background-position: center 22%; filter: blur(38px) saturate(1.25); opacity: .38; transform: scale(1.15); } #actress-page .details-section::after, #actress-page .top-details-container::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, oklch(0.16 0.008 45 / .55) 0%, oklch(0.16 0.008 45 / .82) 55%, oklch(0.16 0.008 45 / .97) 100% ); } #actress-page .top-details-area > .container, #actress-page .details-section > .container { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); /* tight row gap: variant A puts the name block and the metadata block in two separate rows of column 2 and they must read as one unit */ column-gap: clamp(1.25rem, 3vw, 2.5rem); row-gap: .75rem; align-items: start; align-content: start; padding-block: clamp(1.75rem, 4vw, 3rem); } /* Variant B nests the hero in a .media wrapper — flatten it. */ #actress-page .top-details-area .media { display: contents; } /* --- portrait --- */ #actress-page .details-thumbnail, #actress-page .top-details-area .media-left { margin: 0; padding: 0; } #actress-page .details-thumbnail img, #actress-page .media-object { width: 100%; aspect-ratio: 144 / 200; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow); outline: 1px solid oklch(1 0 0 / .10); outline-offset: -1px; background: var(--surface-2); } /* A fair number of biopic files 404. Show a neutral silhouette plate rather than a torn-image icon with the alt text spilling out of the frame. */ #actress-page .details-thumbnail.is-broken, #actress-page .top-details-area .media-left.is-broken { position: relative; aspect-ratio: 144 / 200; border-radius: var(--r-md); background: linear-gradient(160deg, var(--surface-2), var(--surface)); outline: 1px solid oklch(1 0 0 / .10); outline-offset: -1px; box-shadow: var(--shadow); overflow: hidden; } #actress-page .details-thumbnail.is-broken img, #actress-page .media-left.is-broken .media-object { display: none; } #actress-page .details-thumbnail.is-broken::after, #actress-page .media-left.is-broken::after { content: "\f007"; font: 900 2.4rem/1 "Font Awesome 5 Free", sans-serif; color: var(--star-off); position: absolute; inset: 0; display: grid; place-items: center; } /* --- name + meta column --- */ #actress-page .details-header, #actress-page .details-content { grid-column: 2; } #actress-page .top-details-area .media-body { grid-column: 2; min-width: 0; } #actress-page .details-title, #actress-page .media-heading { font-family: var(--display); font-size: clamp(2rem, 5.5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 .4rem; color: var(--ink); } /* the "Nude" / "Sexy" qualifier that follows the name */ #actress-page .details-title .text-muted, #actress-page .media-heading .text-muted { display: block; font-family: var(--body); font-size: clamp(.8rem, 1.4vw, .95rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-top: .5rem; } #actress-page .details-rating, #actress-page .object-rating { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .75rem 0 1.25rem; } #actress-page .rating-string { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: oklch(1 0 0 / .09); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; } /* --- metadata: label/value pairs in a two-column definition grid --- */ #actress-page .details-list, #actress-page .pedigree-details { display: grid; gap: .55rem .9rem; margin: 0; list-style: none; padding: 0; max-width: 62ch; } #actress-page .details-list p, #actress-page .pedigree-details li { display: grid; grid-template-columns: minmax(88px, max-content) minmax(0, 1fr); gap: .25rem .9rem; margin: 0; padding-bottom: .55rem; border-bottom: 1px solid oklch(1 0 0 / .07); font-size: .93rem; } #actress-page .details-list p:last-child, #actress-page .pedigree-details li:last-child { border-bottom: 0; } #actress-page .details-list strong, #actress-page .detail-type { color: var(--muted); font-weight: 500; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; padding-top: .12em; } #actress-page .details-list span, #actress-page .detail-info { color: var(--ink); } /* a bare

with no (e.g. "1 Blog Post for this celebrity") */ #actress-page .details-list p:not(:has(strong)) { display: block; color: var(--muted); font-size: .85rem; } /* ============================================================ Star ratings ============================================================ */ #actress-page .star-rating { display: inline-flex; gap: .12em; font-size: .95rem; line-height: 1; white-space: nowrap; } #actress-page .star-rating .fa-star.active { color: var(--accent); } #actress-page .star-rating .fa-star.inactive { color: var(--star-off); } #actress-page .rating-block { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; } #actress-page .scene-keywords { font-size: .85rem; } #actress-page .scene-description { display: block; color: var(--muted); font-size: .9rem; margin-top: .5rem; max-width: 70ch; } #actress-page .scene-description .fa-clock-o { margin-right: .25rem; } /* ============================================================ Top scenes — featured player ============================================================ */ #actress-page .featured-scene-container { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } @media (max-width: 860px) { #actress-page .featured-scene-container { grid-template-columns: 1fr; } } #actress-page .sk-video-player-container, #actress-page .sk-video-player { width: 100%; } #actress-page .video-js { position: relative; display: block; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); cursor: pointer; } #actress-page .vjs-poster { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform .5s var(--ease), filter .35s var(--ease); } #actress-page .video-js:hover .vjs-poster { transform: scale(1.04); filter: brightness(.82); } /* Rebuild the play button in CSS — the video.js icon font is not loaded. */ #actress-page .vjs-big-play-button { position: absolute; top: 50%; left: 50%; translate: -50% -50%; margin: 0 !important; /* kills the old -10.12778em hack */ width: clamp(58px, 8vw, 78px); aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; background: var(--accent); box-shadow: 0 6px 26px oklch(0 0 0 / .5), 0 0 0 0 oklch(0.58 0.199 33 / .5); cursor: pointer; z-index: var(--z-overlay); transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .2s var(--ease); } #actress-page .vjs-big-play-button::before { content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%; border-style: solid; border-width: .58em 0 .58em 0.95em; border-color: transparent transparent transparent #fff; } #actress-page .vjs-big-play-button:hover { background: var(--accent-lift); transform: scale(1.09); box-shadow: 0 10px 34px oklch(0 0 0 / .55), 0 0 0 14px oklch(0.58 0.199 33 / .16); } #actress-page .vjs-icon-placeholder { display: none; } #actress-page .vjs-control-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* description panel beside the player */ #actress-page .featured-scene-description-container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: center; } #actress-page .featured-scene-description .h4 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: .6rem; } /* ---- tag cloud (chips are wrapped by actress.js) ---- */ #actress-page .sk-tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; } #actress-page .sk-tag-cloud .sk-tag { font-size: .75rem; letter-spacing: .03em; color: var(--muted); background: oklch(1 0 0 / .06); border: 1px solid var(--line); border-radius: 999px; padding: .28rem .62rem; transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); } #actress-page .sk-tag-cloud .sk-tag:hover { color: var(--ink); border-color: var(--accent); background: oklch(0.58 0.199 33 / .14); } /* ============================================================ Scene thumbnails ============================================================ */ #actress-page .thumbnail { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); box-shadow: 0 1px 2px oklch(0 0 0 / .35); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } #actress-page .thumbnail:hover { transform: translateY(-4px); box-shadow: var(--shadow); } #actress-page .thumbnail-image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); } #actress-page .thumbnail-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease), filter .3s var(--ease); } #actress-page .thumbnail:hover .thumbnail-image img { transform: scale(1.07); filter: brightness(.72); } /* broken source (many data-fallback paths 404) */ #actress-page .thumbnail-image.is-broken img { display: none; } #actress-page .thumbnail-image.is-broken::after { content: "\f03d"; font: 900 1.4rem/1 "Font Awesome 5 Free", sans-serif; color: var(--faint); position: absolute; inset: 0; display: grid; place-items: center; } #actress-page .thumbnail .play-icon { position: absolute; top: 50%; left: 50%; translate: -50% -50%; font-size: 2.1rem; color: #fff; text-shadow: 0 2px 12px oklch(0 0 0 / .6); opacity: .85; z-index: var(--z-base); transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s var(--ease); pointer-events: none; } #actress-page .thumbnail:hover .play-icon { opacity: 1; transform: scale(1.15); color: var(--accent-lift); } #actress-page .thumbnail .caption { padding: .65rem .75rem .8rem; font-size: .85rem; color: var(--ink); } #actress-page .thumbnail .caption-hover { display: block; } #actress-page .thumbnail .caption-hover .rating-block { margin-top: .35rem; } /* "New" badge */ #actress-page .badges { position: absolute; top: .5rem; left: .5rem; z-index: var(--z-base); display: flex; gap: .3rem; } #actress-page .badge-updated { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 4px; padding: .2rem .45rem; } /* ---- "+6 More Pics & Clips" upsell tile ---- */ #actress-page .sales-thumbnail { height: 100%; min-height: 150px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-md); background: radial-gradient(120% 100% at 50% 0%, oklch(0.58 0.199 33 / .16), transparent 70%), var(--surface); cursor: pointer; transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); } #actress-page .sales-thumbnail:hover { border-color: var(--accent); transform: translateY(-4px); } #actress-page .sales-thumbnail-count { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; color: var(--accent-ink); } #actress-page .sales-thumbnail-caption { font-size: .82rem; font-weight: 600; color: var(--ink); margin-top: .35rem; } /* ============================================================ Biography ============================================================ */ #actress-page .description--expanded, #actress-page .biography-section p { max-width: 68ch; font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.75; color: var(--muted); text-wrap: pretty; } #actress-page .description--expanded strong { color: var(--ink); font-weight: 600; } #actress-page .description--expanded em { color: var(--ink); } /* ============================================================ Filmography ============================================================ */ #actress-page .info-table { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } #actress-page .appearance-item-container + .appearance-item-container { border-top: 1px solid var(--line); } #actress-page .appearance-item { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px; align-items: center; gap: 1rem; padding: .9rem clamp(.85rem, 2vw, 1.25rem); margin: 0; transition: background .2s var(--ease); } #actress-page .appearance-item:hover { background: oklch(1 0 0 / .04); } #actress-page .appearance-item > [class*="col-"] { flex: none; } #actress-page .appearance-item p { margin: 0; } #actress-page .appearance-item .text-info { color: var(--ink); font-weight: 500; font-size: 1rem; } #actress-page .item-nude-type { display: inline-block; font-family: var(--body); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: .25rem .6rem; margin: 0; border: 1px solid currentColor; } #actress-page .item-nude-type.text-danger { color: var(--accent-ink); } #actress-page .item-nude-type.text-blue, #actress-page .item-nude-type.text-info { color: var(--cool); } /* nested nude-scene rows under a film */ #actress-page .nude-scenes-list { display: block; background: oklch(0 0 0 / .28); padding: .85rem clamp(.85rem, 2vw, 1.25rem); margin: 0; border-top: 1px solid var(--line); } #actress-page .nude-scenes-list .media { display: block; margin: 0; } #actress-page .nude-scenes-list .media + .media { margin-top: .75rem; } #actress-page .nude-scenes-list .media-body { display: block; } @media (max-width: 700px) { #actress-page .appearance-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: .45rem; } #actress-page .appearance-item > .col-md-3:last-child { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; } } /* ============================================================ Advertising slots ============================================================ */ #actress-page .az { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: oklch(0 0 0 / .2); margin-block: 1rem; } #actress-page .az:not(:has(iframe)):not(:has(img)):not(:has(ins)) { display: none; } #actress-page .az .caption { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } /* ============================================================ Upsell / CTA blocks ============================================================ */ #actress-page .inline-access-form, #actress-page .container-gray, #actress-page .container-black { background: transparent; } #actress-page .access-form { max-width: 1200px; margin: clamp(1.25rem, 3vw, 2rem) auto; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(110% 130% at 0% 0%, oklch(0.58 0.199 33 / .22), transparent 62%), var(--surface); text-align: center; } #actress-page .access-form .title { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin-bottom: .35rem; } #actress-page .access-form .description { color: var(--muted); font-size: .98rem; margin-bottom: 1rem; } #actress-page .access-form ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem 1.25rem; text-align: left; margin: 1.25rem auto; max-width: 780px; } #actress-page .access-form li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--muted); } #actress-page .access-form .icon-btn { color: var(--accent); } /* top / bottom "Get All Her Nudes Here" links become real buttons */ #actress-page .h2.title { text-align: center; margin-block: clamp(1.25rem, 3vw, 2rem); } #actress-page .h2.title > a, #actress-page .btn-full-access { display: inline-block; font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--accent); border: 0; border-radius: 999px; padding: .85rem 1.9rem; box-shadow: 0 6px 20px oklch(0.58 0.199 33 / .3); transition: transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease); } #actress-page .h2.title > a:hover, #actress-page .btn-full-access:hover { background: var(--accent-lift); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px oklch(0.58 0.199 33 / .42); } /* ---- modal ---- */ #actress-page .access-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; place-items: center; padding: 1.25rem; background: oklch(0.10 0.006 45 / .82); backdrop-filter: blur(6px); overflow-y: auto; } #actress-page .access-modal[style*="block"] { display: grid; } #actress-page .access-modal .modal-dialog { width: min(760px, 100%); margin: auto; } #actress-page .access-modal .modal-content { position: relative; background-size: cover; background-position: center; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 30px 80px oklch(0 0 0 / .6); overflow: hidden; } #actress-page .access-modal .modal-body { background: linear-gradient(90deg, oklch(0.16 0.008 45 / .96) 30%, oklch(0.16 0.008 45 / .72) 100%); padding: clamp(1.5rem, 4vw, 2.5rem); } #actress-page .access-modal .access-form { border: 0; background: transparent; margin: 0; padding: 0; } #actress-page .access-modal .close { position: absolute; top: .6rem; right: .8rem; width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; color: var(--ink); background: oklch(1 0 0 / .1); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; z-index: var(--z-modal); transition: background .2s var(--ease), transform .2s var(--ease); } #actress-page .access-modal .close:hover { background: oklch(1 0 0 / .2); transform: rotate(90deg); } /* ============================================================ Motion — one orchestrated hero entrance, not fade-on-scroll ============================================================ */ @keyframes sdp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } #actress-page .details-thumbnail img, #actress-page .media-object, #actress-page .details-title, #actress-page .media-heading, #actress-page .details-rating, #actress-page .object-rating, #actress-page .details-list, #actress-page .pedigree-details { animation: sdp-rise .62s var(--ease) both; } #actress-page .details-thumbnail img, #actress-page .media-object { animation-delay: .02s; } #actress-page .details-title, #actress-page .media-heading { animation-delay: .08s; } #actress-page .details-rating, #actress-page .object-rating { animation-delay: .14s; } #actress-page .details-list, #actress-page .pedigree-details { animation-delay: .2s; } @media (prefers-reduced-motion: reduce) { #actress-page *, #actress-page *::before, #actress-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } #actress-page .video-js:hover .vjs-poster, #actress-page .thumbnail:hover .thumbnail-image img { transform: none; } } /* ============================================================ Small screens ============================================================ */ @media (max-width: 700px) { #actress-page .top-details-area > .container, #actress-page .details-section > .container { grid-template-columns: 1fr; justify-items: center; text-align: center; } #actress-page .details-thumbnail, #actress-page .top-details-area .media-left { width: min(190px, 55%); } #actress-page .details-header, #actress-page .details-content, #actress-page .top-details-area .media-body { grid-column: 1; } #actress-page .details-rating, #actress-page .object-rating { justify-content: center; } #actress-page .details-list, #actress-page .pedigree-details { text-align: left; width: 100%; } #actress-page .details-list p, #actress-page .pedigree-details li { grid-template-columns: 1fr; gap: .1rem; } }