/* Theme Name: Divas Luxe Theme URI: https://divas-escort.com/ Description: Luxury black / gold / teal child theme for Astra. Bespoke design system with animated cards, scroll-reveal sections, gradient gold typography and high-class editorial polish. Built for divas-escort.com. Author: Divas Escort Author URI: https://divas-escort.com/ Template: astra Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: divas-luxe Tags: luxury, dark, gold, editorial, blog */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { /* base — layered blacks give depth without looking flat */ --dl-black: #08080a; --dl-surface: #0e0e12; --dl-surface-2: #14141a; --dl-surface-3: #1c1c24; /* gold — the primary accent */ --dl-gold: #c9a84c; --dl-gold-lt: #f0d98c; --dl-gold-dp: #8c6d22; --dl-gold-grad: linear-gradient(135deg, #f0d98c 0%, #c9a84c 45%, #8c6d22 100%); /* teal — the secondary accent, used sparingly for contrast + freshness */ --dl-teal: #0f9a9a; --dl-teal-lt: #5fd6d6; --dl-teal-dp: #0a6767; --dl-teal-grad: linear-gradient(135deg, #5fd6d6 0%, #0f9a9a 100%); /* type */ --dl-cream: #f6f1e4; --dl-text: #d8d4cc; --dl-muted: #8f8a80; /* lines + glow */ --dl-line: rgba(201, 168, 76, .16); --dl-line-strong: rgba(201, 168, 76, .42); --dl-glow-gold: 0 10px 40px rgba(201, 168, 76, .18); --dl-glow-teal: 0 10px 40px rgba(15, 154, 154, .20); /* motion */ --dl-ease: cubic-bezier(.22, .61, .36, 1); --dl-ease-out: cubic-bezier(.16, 1, .3, 1); --dl-dur: .5s; /* rhythm */ --dl-radius: 14px; --dl-radius-sm: 8px; --dl-shell: 1180px; /* spacing scale — everything on the site uses these, so vertical rhythm stays even and nothing is arbitrarily wide or tight. Each step fluidly shrinks on small screens rather than snapping at a breakpoint. */ --sp-1: 6px; --sp-2: 10px; --sp-3: clamp(12px, 1.4vw, 16px); --sp-4: clamp(16px, 2vw, 22px); --sp-5: clamp(22px, 2.8vw, 30px); --sp-6: clamp(28px, 3.6vw, 40px); --sp-7: clamp(36px, 5vw, 56px); --sp-8: clamp(48px, 7vw, 84px); --sp-9: clamp(60px, 9vw, 110px); } /* ========================================================================== 2. BASE ========================================================================== */ /* * The root has to carry the background, not just the body. iOS Safari paints * its status bar, its bottom toolbar and the rubber-band overscroll area from * the root element — with html transparent it falls back to white, which is why * the phone showed white bars top and bottom around a black page. * color-scheme makes Safari render its own chrome dark to match. */ html { background: var(--dl-black); color-scheme: dark; } /* * Undo Astra's mobile root shrink. * * Astra ships html{font-size:91.2%} below 921px against 100% on desktop, so the * root is 14.59px on a phone and 16px on a laptop. Every rem on the site is * therefore worth ~9% less on mobile, which is why copy read small everywhere * rather than in any one component: the first fixes here were per-component * patches for what was a single global cause. * * !important is load-bearing rather than lazy. Astra prints its dynamic CSS * inline in AFTER the child stylesheet, so an equally specific rule * (0,0,1 on html) would lose on source order no matter where it sits in here. * * Both of Astra's breakpoints are covered: it declares 91.2% at max-width 921px * and again at 544px, and the narrower one would otherwise win on a phone. */ @media (max-width: 921px) { html { font-size: 100% !important; } } body, #page { background-color: var(--dl-black); color: var(--dl-text); } /* * Faint diagonal line texture. It has to live on #page, the topmost opaque * layer — put on html or body it would simply be painted over. .ast-container * gives up its own background for the same reason. * * Deliberately not background-attachment: fixed; a fixed background over a long * scrolling page is a known repaint cost on iOS, and at a 7px repeat the * difference is invisible anyway. */ #page { background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, .019) 0, rgba(255, 255, 255, .019) 1px, transparent 1px, transparent 7px ); } .ast-container { background: transparent; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.75; } /* subtle luxury texture — a fixed radial wash so the black never reads as dead flat */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1000px 600px at 12% -8%, rgba(201, 168, 76, .07), transparent 60%), radial-gradient(900px 520px at 88% 108%, rgba(15, 154, 154, .07), transparent 60%); } #page { position: relative; z-index: 1; } h1, h2, h3, h4, h5, h6, .entry-title, .site-title { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; } /* * Headings are gold site-wide. Astra colours headings that carry an id (our * contents anchors) with its link colour, which rendered them dark blue — these * selectors are specific enough to win without needing !important everywhere. */ h1, h2, h3, h4, h5, h6, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .dl-article h1, .dl-article h2, .dl-article h3, .dl-article h4, .dl-article h5, .dl-article h6, h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], h1:target, h2:target, h3:target, h4:target, h5:target, h6:target { color: var(--dl-gold-lt); } /* the page's own H1 stays cream so it leads; everything below it is gold */ h1.dl-hero__title, h1.entry-title, h1.dl-profile__name { color: var(--dl-cream); } /* headings must never inherit a link colour */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); } h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); } p { margin: 0 0 1.35em; } a { color: var(--dl-gold-lt); text-decoration: none; transition: color .25s var(--dl-ease); } a:hover, a:focus { color: var(--dl-teal-lt); } /* keyboard focus stays visible — accessibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--dl-gold); outline-offset: 3px; } /* No blue anywhere. Astra paints buttons and the scroll-to-top in its accent, and mobile browsers add their own blue tap highlight — both look wrong on black. */ * { -webkit-tap-highlight-color: transparent; } button:focus, .dl-faq__q:focus, .dl-faq__q:active, .dl-faq__q:hover { background: transparent; box-shadow: none; } /* mouse/touch focus shouldn't paint a block; keyboard focus keeps the gold ring above */ button:focus:not(:focus-visible) { outline: none; } /* Astra's scroll-to-top */ #ast-scroll-top, .ast-scroll-to-top-right, .ast-scroll-top-icon { /* transparent: the arrow and its outline, nothing filled behind them. No backdrop blur either — blurring the page through a control that is meant to read as transparent puts the fill back in all but name. */ background: transparent !important; color: var(--dl-gold-lt) !important; border: 1px solid var(--dl-line-strong) !important; border-radius: var(--dl-radius-sm) !important; } #ast-scroll-top:hover { background: rgba(24, 20, 8, .55) !important; border-color: var(--dl-gold) !important; } /* * Only at the foot of the page. * * Astra reveals this after any downward scroll, which parks a control over the * page for the whole of a long listing. It is only worth anything once you have * run out of page, so JS sets .dl-at-foot on from the scroll position. * * `display` is forced here rather than left to Astra, which sets it inline. * Measured why: with Astra holding display:none, the fade never ran, because a * transition does not tick on an element that is not being rendered. Computed * opacity and visibility stayed frozen on their old values while pointer-events, * which is not transitioned, updated normally. Keeping the element rendered at * all times and driving only opacity/visibility makes the fade work and puts * one rule in charge instead of two fighting. * * Specificity check, because this leans on !important: the review-form lock * `body.dl-locked #ast-scroll-top` is (1,1,1) and still beats this (1,0,0), so * the button stays hidden behind the form exactly as before. */ #ast-scroll-top { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--dl-ease), visibility .3s var(--dl-ease); } .dl-at-foot #ast-scroll-top { opacity: 1; visibility: visible; pointer-events: auto; } ::selection { background: rgba(201, 168, 76, .3); color: #fff; } /* gold gradient text — for hero words + section eyebrows */ .dl-gold-text { background: var(--dl-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ========================================================================== 3. LAYOUT SHELL ========================================================================== */ .dl-shell { max-width: var(--dl-shell); margin-inline: auto; padding-inline: clamp(18px, 4vw, 34px); } /* * Astra pads .ast-container differently per template — 20px on pages, 8px on * archives — which stacked on top of the shell's own gutter and left the guide * 24px narrower than a location page on a phone. Zero it on our templates so * .dl-shell is the only thing setting the edge. * * Its 1240px max-width is deliberately left alone: that keeps the hero inside * the container on desktop rather than running edge to edge. * Scoped rather than global: Astra's own pages still need their padding. */ #content > .ast-container:has(> .dl-guide), #content > .ast-container:has(> .dl-tax), #content > .ast-container:has(> .dl-profile), #content > .ast-container:has(> .dl-home), #content > .ast-container:has(> .dl-archive) { padding-left: 0; padding-right: 0; } /* * Astra also spaces #primary away from the header — 4em of padding below 993px, * 4em of margin above it — which dropped every hero 58px down the page and left * a dead black band under the header. Our templates open with a full-bleed hero * that should meet the header, so take the top off both. The bottom stays: it's * what separates the last section from the footer. */ /* .dl-profile is deliberately not in this list: it opens with the breadcrumb row rather than a full-bleed hero, so zeroing its top padding pushed the trail and the prev/next buttons hard up against the header line. */ #primary.dl-home, #primary.dl-tax, #primary.dl-guide, #primary.dl-archive { padding-top: 0; margin-top: 0; } /* explicit rather than inherited, so the breadcrumb row and its prev/next buttons always clear the header bar at every width */ #primary.dl-profile { margin-top: 0; padding-top: clamp(14px, 2.4vw, 30px); } /* one section rhythm, three densities */ .dl-section { padding: var(--sp-8) 0; position: relative; } .dl-section--tight { padding: var(--sp-6) 0; } .dl-section--loose { padding: var(--sp-9) 0; } /* hairline divider with a gold centre fade */ .dl-rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--dl-line-strong), transparent); margin: 0; } .dl-eyebrow { display: block; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--dl-gold); margin-bottom: var(--sp-2); } /* * An eyebrow is always followed by its heading, so keying off that pairing gives * every section the same rhythm no matter how deeply the block is nested. The * positional rule this replaces only reached direct children of .dl-shell. */ .dl-eyebrow + h1, .dl-eyebrow + h2, .dl-eyebrow + h3 { margin-top: 0; margin-bottom: var(--sp-4); } /* a lede between the heading and the content carries the gap instead */ .dl-eyebrow + h2 + .dl-lede, h2 + .dl-lede { margin-top: calc(var(--sp-4) * -1 + var(--sp-2)); margin-bottom: var(--sp-4); } /* section headings without an eyebrow */ .dl-section > .dl-shell > h2 { margin: 0 0 var(--sp-4); } .dl-lede { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--dl-muted); margin: 0 0 var(--sp-4); } /* * Section ledes run the full shell width so they line up with the grid beneath * them — capped at 62ch they stopped a third of the way across and read as a * layout fault. The centred display blocks keep the measure: a centred line * running 110 characters is genuinely hard to track back from. */ .dl-hero .dl-lede, .dl-guide-promo .dl-lede { max-width: 62ch; margin-inline: auto; } .dl-lede:last-child { margin-bottom: 0; } /* ========================================================================== 4. HERO ========================================================================== */ .dl-hero { position: relative; min-height: clamp(430px, 68vh, 660px); display: grid; place-items: center; text-align: center; overflow: hidden; border-bottom: 1px solid var(--dl-line); /* Once the copy outgrows min-height the hero is exactly content height, which left the gold flourish sitting 2px off the bottom edge. This keeps air below it at every size. */ padding-block: clamp(32px, 6vw, 64px); } /* slow drifting sheen behind the hero copy */ .dl-hero::after { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0deg, rgba(201, 168, 76, .10) 60deg, transparent 130deg, rgba(15, 154, 154, .09) 220deg, transparent 300deg); animation: dl-drift 26s linear infinite; pointer-events: none; } @keyframes dl-drift { to { transform: rotate(360deg); } } .dl-hero__inner { position: relative; z-index: 2; } .dl-hero__title { margin: 0 0 18px; } /* thin gold rule under the hero title that draws itself in */ .dl-hero__flourish { width: 0; height: 1px; margin: 26px auto 0; background: var(--dl-gold-grad); animation: dl-draw 1.5s var(--dl-ease-out) .5s forwards; } @keyframes dl-draw { to { width: 190px; } } /* ========================================================================== 5. CARDS — the signature component ========================================================================== */ /* * Intrinsically responsive: the track minimum itself scales with the viewport, * so this gives 2 columns on a phone and 4 on desktop from ONE rule. No media * queries to be defeated by a cached stylesheet or a stray viewport. * 390px phone -> min 150px -> 2 columns * 768px tablet -> min ~169px -> 3-4 columns * 1180px desk -> min 250px -> 4 columns */ .dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22vw, 250px), 1fr)); gap: var(--sp-3); } @media (min-width: 783px) { .dl-grid { gap: var(--sp-4); } } .dl-card { position: relative; display: flex; flex-direction: column; /* same near-black + faint gold wash as the luxury cards, so every card on the site reads as one family */ background: radial-gradient(120% 80% at 50% 100%, rgba(201,168,76,.05), transparent 60%), linear-gradient(180deg, #0c0c10, #08080a); border: 1px solid var(--dl-line); border-radius: var(--dl-radius); overflow: hidden; isolation: isolate; transition: transform .55s var(--dl-ease-out), border-color .35s var(--dl-ease), box-shadow .55s var(--dl-ease-out); } /* animated gold border-sweep on hover (masked gradient ring — no layout shift) */ .dl-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--dl-gold-lt), transparent 35%, transparent 65%, var(--dl-teal)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s var(--dl-ease); pointer-events: none; z-index: 3; } @media (hover: hover) and (pointer: fine) { /* translate3d rather than translateY, so the lift is composited rather than going back through layout. Deliberately NOT paired with a standing will-change: that would hold every card on the GPU for the life of the page, and a promoted layer per card is what a phone cannot afford. */ .dl-card:hover { transform: translate3d(0, -8px, 0); border-color: transparent; box-shadow: var(--dl-glow-gold); } .dl-card:hover::before { opacity: 1; } .dl-card:hover .dl-card__img img { transform: scale(1.07); } .dl-card:hover .dl-card__more { gap: 14px; color: var(--dl-gold-lt); } } .dl-card:active { transform: translateY(-3px); } /* ========================================================================== THE GOLD-TO-TEAL EDGE, SHARED -------------------------------------------------------------------------- The same ring the listing cards carry, on everything else that is tappable: service chips, area chips, the area cover cards and the duo tiles. One effect across the site rather than a different accent per component. It is a 1px gradient painted into the border box and punched out with a mask, so it sits exactly where the border is and replaces it — the label underneath keeps its own colour, which is the point. border-radius: inherit means each component keeps its own shape, from the 5px chips to the 999px pills. ========================================================================== */ .dl-likes li.is-link, .dl-arealinks li a, .dl-nearby li a, .dl-guide__morecard, .dl-duo__item { position: relative; } /* the same gradient as .dl-card, deliberately not a variant of it */ .dl-likes li.is-link::before, .dl-arealinks li a::before, .dl-nearby li a::before, .dl-guide__morecard::before, .dl-duo__item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--dl-gold-lt), transparent 35%, transparent 65%, var(--dl-teal)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s var(--dl-ease); pointer-events: none; z-index: 3; } /* The ring and the border share the same 1px, so the border stands down for it — without this the resting gold sits underneath and the edge reads doubled. */ @media (hover: hover) { .dl-likes li.is-link:hover::before, .dl-arealinks li a:hover::before, .dl-nearby li a:hover::before, .dl-guide__morecard:hover::before, .dl-duo__item:hover::before { opacity: 1; } .dl-likes li.is-link:hover, .dl-arealinks li a:hover, .dl-nearby li a:hover, .dl-guide__morecard:hover { border-color: transparent; } } .dl-card__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; /* * Near-black rather than the grey surface token. * * This shows in the band where the photo does not quite reach the bottom of * its box, and the token is rgb(28,28,36) — light enough to read as a line * against a #09090c body. Measured on the rail cards: excess brightness at * the seam went 3 -> 0 from this alone. */ background: #0b0b0e; /* * An opaque row on the seam. * * Measured: nothing overhangs, the image fills its box exactly — but the * boundary lands on a fractional pixel (.578 on a 1x screen) and the body * below it has no background of its own, so the renderer blends the photo's * bright bottom row into the card behind it. That is the pale hairline, and * it shifts as the card lifts 8px on hover, which is what reads as a flash. * * box-sizing is border-box here, so this takes a pixel from the image rather * than adding one to the box: nothing moves, and the blend has something * solid to happen against. */ border-bottom: 1px solid #09090c; } .dl-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--dl-ease-out); } /* * Gradient scrim, so overlaid text stays readable on any photo — and so the * photo actually reaches the card's colour before the body starts. * * It used to stop at 85% opacity, which left 15% of the photo showing at the * very bottom edge. Measured against a bright lower edge that put rgb(37,34,34) * directly above the body's rgb(9,9,12): a 28-point step, not an antialiasing * artefact. Static and subtle at rest, but the card lifts 8px and the photo * zooms on hover, so that edge is redrawn every frame — which is the flicker. * * Carrying the last stop to full opacity on the body's own colour removes the * step rather than hiding it. Two earlier attempts here fixed the wrong layer: * compositing hints, then a 1px cap that merely moved the step up a pixel. */ /* * The readability scrim, and why it runs past the bottom edge. * * Ending the gradient at 100% put its only fully-opaque row exactly on the * img/body join. Two things then conspired: * * 1. .dl-card__body carries margin-top:-1px to guarantee no sub-pixel gap. * That hides the last row, so the row actually on show sits at ~99.6%, * where the scrim is still slightly translucent and a bright photo comes * through it. * 2. The image box ends on a fractional device pixel (226.66px on an * iPhone 13). The photo's antialiased final row has more coverage than * the scrim's, so it wins even where the scrim is nominally opaque. * * Bisected on device: moving the opaque stop earlier fixed every row except * that fractional one, and it only moved when the border width changed. Both * are needed. Extending 3px below the box puts the join deep inside the solid * region, and .dl-card's overflow:hidden keeps the overhang inside the card * while .dl-card__body (z-index:1) paints over it. * * Verified 0 excess brightness at the seam on iPhone SE / 13 / 13 Pro Max and * desktop, on both the grid cards and the recently-viewed rail, with desktop * hover unregressed. Costs no compositor layer, so it cannot bring back the * pinch-zoom crash that promoting these elements caused. */ .dl-card__img::after { content: ""; position: absolute; inset: 0 0 -3px 0; background: linear-gradient(180deg, transparent 35%, rgba(8, 8, 10, .85) 86%, #09090c 96%); } .dl-card__tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dl-black); background: var(--dl-gold-grad); } .dl-card__tag--teal { background: var(--dl-teal-grad); color: #04211f; } /* * Opaque, and overlapping the photo by a pixel. * * This was transparent, so the colour below the seam was whatever the card's * background gradient happened to be at that height — which changes from card * to card. Matching the scrim to it could only ever be right for one card size. * A flat base makes both sides of the join a known constant, and the -1px pulls * them together so there is no boundary left to rasterise between. * * #09090c is the card gradient's value through this region (it runs #0c0c10 to * #08080a), so nothing looks different — it is simply no longer variable. */ .dl-card__body { position: relative; z-index: 1; margin-top: -1px; background: #09090c; padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: var(--sp-1); } .dl-card__title { margin: 0; font-size: 1.2rem; line-height: 1.25; } .dl-card__title a { color: var(--dl-cream); } .dl-card__excerpt { font-size: .9rem; color: var(--dl-muted); margin: 0; flex: 1; } .dl-card__body > .dl-card__more { margin-top: var(--sp-2); } /* The whole listing card is the click target now that the "View profile" link is gone. The title's link is stretched over the card, so anywhere on it works. */ .dl-listing .dl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .dl-listing .dl-card__title { position: static; } .dl-listing { cursor: pointer; } /* Journal cards, the same way. The title was the only click target, so the date and the excerpt beside it did nothing, which is not what a card that looks like a card leads you to expect. inset:0 resolves against .dl-card__body, not .dl-card, because the body is the nearest positioned ancestor. That is the whole card here: these carry no thumbnail, and .dl-card__body is flex:1, so it fills the card on its own. Where a journal card does have an image, that image is already its own , so the pair still covers everything. */ .dl-post .dl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .dl-post .dl-card__title { position: static; } .dl-post { cursor: pointer; } .dl-card__more { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dl-gold); transition: gap .35s var(--dl-ease), color .35s var(--dl-ease); } .dl-card__more::after { content: ""; width: 22px; height: 1px; background: currentColor; } /* --- directory listings + taxonomy archives --- */ .dl-hero--tax { min-height: clamp(260px, 34vh, 360px); } /* ========================================================================== JOURNAL HERO STAT CARDS — frosted glass -------------------------------------------------------------------------- Four figures, each on its own surface, in place of one line of text. The frost is a real backdrop-filter rather than a flat translucent panel, which is only worth the cost when there is something behind it worth sampling. There is: the hero carries a gradient wash and the diagonal texture, so each card picks up a different part of both and they do not read as four identical rectangles. Every colour comes from the existing tokens. The numbers use --dl-gold-grad clipped to the text, the same treatment the hero titles already use, so the cards belong to the page rather than sitting on top of it. On the compositor cost, deliberately: backdrop-filter promotes each card to its own layer. Four static elements on one page is a rounding error against the 68 permanently-promoted layers that caused the iOS pinch-zoom crash earlier in this build, and none of these animate. That is also why the treatment is scoped to this one block rather than offered site-wide. ========================================================================== */ .dl-jstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); /* * Sized off the viewport, not the parent. .dl-hero uses place-items:center, * so .dl-hero__inner shrink-wraps its content and a percentage width here * resolves against a box that is itself sized by this element. Measured: * width:min(100%,660px) produced 105px cards on both a phone and a 1440 * desktop. Viewport units break that circularity. */ width: min(92vw, 660px); margin: var(--sp-4) auto 0; } .dl-jstat { position: relative; padding: var(--sp-4) var(--sp-2); border: 1px solid var(--dl-line); border-radius: var(--dl-radius); /* a cream tint rather than plain white: white frost reads blue-grey against this palette and pulls the whole hero cold */ background: linear-gradient(180deg, rgba(246, 241, 228, .06), rgba(246, 241, 228, .015)); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); /* the top inner highlight is what actually sells glass; without it the card reads as a flat translucent box */ box-shadow: inset 0 1px 0 rgba(246, 241, 228, .08); overflow: hidden; } /* one hairline of the house gold-to-teal along the top edge, so a row of four reads as a set rather than four unrelated boxes */ .dl-jstat::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--dl-gold), var(--dl-teal), transparent); opacity: .55; pointer-events: none; } .dl-jstat__n { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.55rem, 5.2vw, 2.05rem); /* * 1.25, not 1, because of the two things that combine here. * * Cormorant Garamond sets old-style figures, so 3 4 5 7 9 descend below the * baseline exactly as a lowercase g does, and so does the J in Jan/Jun/Jul. * With line-height:1 the box ends at the baseline, and background-clip:text * paints the gradient only within that box, so the descender falls outside * the paint area and simply is not drawn. It reads as the glyph being * sliced off rather than as a layout overflow. * * Measured on device at 32px: worst case is "3", "5", "9", "Sep" and "May" * at 6.7px below the box, which is 0.209em. 1.25 clears that with margin. * Only "Jul" happened to be on screen when this was spotted, which is why * it looked like a problem with one letter. */ line-height: 1.25; background: var(--dl-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* the month sits alongside three numerals, so it comes down to match their weight */ .dl-jstat__n--sm { font-size: clamp(1.25rem, 4.2vw, 1.6rem); } .dl-jstat__l { display: block; margin-top: 7px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 600px) { .dl-jstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dl-jstat { padding: var(--sp-3) var(--sp-2); } } /* Firefox without backdrop-filter, and anything else that lacks it: an opaque surface, because a 6%-alpha panel over a dark hero is invisible on its own. */ @supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .dl-jstat { background: rgba(20, 20, 26, .82); } } .dl-hero__count { margin: var(--sp-3) 0 0; font-size: .95rem; letter-spacing: .04em; color: var(--dl-muted); } .dl-hero__count strong { font-size: 1.5rem; font-family: "Cormorant Garamond", Georgia, serif; background: var(--dl-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-right: 4px; } .dl-listing .dl-card__img { aspect-ratio: 3 / 4; display: block; } .dl-listing__meta { font-size: .82rem; color: var(--dl-muted); margin: 0; } .dl-listing__price { font-size: .92rem; font-weight: 600; color: var(--dl-gold-lt); margin: 0; } /* * The rate, on the photo rather than under it. * * It sits bottom left, where .dl-card__img::after has already darkened the * photo to near-black, so it needs no plate of its own to stay legible. Two * details keep it honest: a text-shadow for the rare photo that is bright * right into the corner, and pointer-events:none so it never intercepts a tap * meant for the card, whose whole surface is the click target. */ .dl-card__rate { position: absolute; left: var(--sp-3); bottom: 10px; z-index: 2; font-size: .92rem; font-weight: 600; line-height: 1; color: var(--dl-gold-lt); text-shadow: 0 1px 6px rgba(0, 0, 0, .85); pointer-events: none; } .dl-card--mini .dl-card__rate { left: var(--sp-2); bottom: 8px; font-size: .8rem; } @media (max-width: 600px) { .dl-card__rate { left: var(--sp-2); bottom: 8px; } } .dl-empty { text-align: center; color: var(--dl-muted); padding: 40px 0; } /* empty-area state — leads with what IS available rather than what isn't */ .dl-nearby-intro { text-align: center; max-width: 62ch; margin: 0 auto var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--dl-line); } .dl-nearby-intro__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 var(--sp-2); } .dl-nearby-intro__text { color: var(--dl-muted); font-size: .98rem; margin: 0; } /* nearby-areas link cloud — the internal-link net across the borough cluster */ .dl-nearby ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); } .dl-eyebrow + .dl-nearby ul, .dl-nearby .dl-eyebrow + ul { margin-top: var(--sp-2); } .dl-nearby li a { display: inline-block; padding: 8px 16px; border: 1px solid var(--dl-line); border-radius: 999px; font-size: .86rem; color: var(--dl-text); transition: border-color .3s var(--dl-ease), color .3s var(--dl-ease), background .3s var(--dl-ease); } /* * Guarded, and teal. * * This was an unguarded :hover, so on a phone iOS left it latched on to * whichever card was tapped last — you would come back from an area page and * find one card still lit for no reason. Inside (hover: hover) it cannot apply * to touch at all, and :active below gives the press its own feedback. */ @media (hover: hover) { .dl-nearby li a:hover { border-color: transparent; } /* the ring takes over */ } /* --- clouds that carry a cover photo --- * A uniform card grid rather than a wrapping row of pills. With 44 areas the * pills wrapped into a ragged one-and-two-per-row column on a phone that was * hard to scan; equal tiles read as a set and halve the height. */ .dl-nearby--covers ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; } .dl-nearby--covers li a { display: flex; align-items: center; gap: 10px; min-width: 0; height: 100%; /* equal heights across a row */ padding: 6px 12px 6px 6px; border: 1px solid var(--dl-line); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); background-clip: padding-box; } .dl-cloud__pic { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; /* rounded square: reads as a card, not an avatar */ overflow: hidden; background: var(--dl-surface-3); /* thin gold ring, the same detail the cards use */ box-shadow: 0 0 0 1px rgba(201,168,76,.25); } .dl-cloud__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; /* faces sit near the top of a 3:4 crop */ display: block; transition: transform .6s var(--dl-ease-out); } .dl-cloud__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .dl-cloud__name { font-size: .82rem; line-height: 1.2; color: var(--dl-text); overflow-wrap: anywhere; /* "High St. Kensington" must not blow the tile out */ transition: color .25s var(--dl-ease); } .dl-nearby--covers .dl-cloud__n { font-size: .68rem; color: var(--dl-muted); margin: 0; } /* These cards are .dl-nearby li a, so the shared ring already covers the edge. Only the thumbnail outline and the zoom are added on top; the area name and the count keep their resting colours. */ @media (hover: hover) { .dl-nearby--covers li a:hover { border-color: transparent; } .dl-nearby--covers li a:hover .dl-cloud__pic { box-shadow: 0 0 0 1px var(--dl-teal); } .dl-nearby--covers li a:hover .dl-cloud__pic img { transform: scale(1.08); } } .dl-nearby--covers li a.is-pressed .dl-cloud__pic { box-shadow: 0 0 0 1px var(--dl-teal); } @media (max-width: 600px) { /* pinned to two, so a long name can't drop a tile to its own row */ .dl-nearby--covers ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .dl-nearby--covers li a { padding: 5px 9px 5px 5px; gap: 8px; border-radius: 10px; } .dl-cloud__pic { width: 36px; height: 36px; border-radius: 8px; } .dl-cloud__name { font-size: .76rem; } .dl-nearby--covers .dl-cloud__n { font-size: .64rem; } } /* --- badges on listing cards — same language as the profile, scaled down --- */ .dl-badges { position: absolute; top: 9px; left: 9px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; } .dl-badge { padding: 4px 9px; border-radius: 3px; font-family: "Inter", sans-serif; font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dl-gold-lt); background: rgba(10, 9, 7, .6); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); border: 1px solid rgba(201, 168, 76, .45); white-space: nowrap; } .dl-badge--recommended { color: #14100a; background: linear-gradient(135deg, #ffed8c, var(--dl-gold)); border-color: transparent; } .dl-badge--new { color: var(--dl-teal-lt); border-color: rgba(15,154,154,.5); } /* --- single listing / escort profile --- */ .dl-profile { padding: var(--sp-5) 0 0; } /* the profile grid needs air before the divider, or the last stat row sits on it */ .dl-profile > .dl-shell { padding-bottom: var(--sp-7); } .dl-crumbs-wrap { padding-top: 18px; } /* pages + posts: the trail sits under the title, so it needs a little air above and a hairline to separate it from the heading rather than the content */ .dl-crumbs-wrap--under { margin: 0 0 var(--sp-5); padding: var(--sp-3) 0 0; border-top: 1px solid var(--dl-line); } .dl-crumbs-wrap--under .dl-crumbs { margin-bottom: 0; } .dl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; color: var(--dl-muted); margin-bottom: 22px; } .dl-crumbs a { color: var(--dl-muted); } .dl-crumbs a:hover { color: var(--dl-gold-lt); } .dl-crumbs__here { color: var(--dl-cream); } /* Yoast prints a plain string rather than markup, so style its separator too */ .dl-crumbs .breadcrumb_last { color: var(--dl-cream); } /* profile: the trail keeps the left, prev/next escort sits at the right end of the same line. The trail can wrap internally; the arrows never shrink. */ .dl-crumbnav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: 22px; } .dl-crumbnav .dl-crumbs { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .dl-pnav { display: flex; align-items: center; flex: 0 0 auto; } .dl-pnav__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); color: var(--dl-text); background-clip: padding-box; transition: border-color .3s var(--dl-ease), color .3s var(--dl-ease), background .3s var(--dl-ease); } @media (hover: hover) { .dl-pnav__btn:hover { border-color: var(--dl-gold); color: var(--dl-gold-lt); background: rgba(201,168,76,.06); } } .dl-pnav__btn:active { border-color: var(--dl-gold); color: var(--dl-gold-lt); } .dl-pnav__sep { width: 1px; height: 15px; background: var(--dl-line); margin: 0 9px; } @media (max-width: 600px) { .dl-crumbnav { gap: var(--sp-3); margin-bottom: 16px; } .dl-pnav__btn { width: 38px; height: 38px; } /* still a comfortable thumb target */ .dl-pnav__sep { margin: 0 5px; } } .dl-chip--badge { color: var(--dl-black); background: linear-gradient(135deg, #ffed8c, var(--dl-gold)); border-color: transparent; } .dl-profile__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; } @media (max-width: 900px) { .dl-profile__grid { grid-template-columns: 1fr; } } .dl-profile__left { position: sticky; top: 92px; display: grid; gap: var(--sp-3); } @media (max-width: 900px) { .dl-profile__left { position: static; } } .dl-profile__photo { position: relative; margin: 0; border-radius: var(--dl-radius); overflow: hidden; border: 1px solid var(--dl-line); background: var(--dl-surface-2); } .dl-profile__photo img { width: 100%; height: auto; display: block; } /* ========================================================================== PHOTO LOADING — a slow gold sheen where a photo has not arrived yet Sits on ::before because the card and duo tiles already spend ::after on their scrims. z-index 1 puts it over the photo but under the rate, which is on 2, so a price never disappears behind the shimmer. Present but transparent at rest rather than only existing while loading: a pseudo-element cannot transition into being, and fading out is the whole point. Nothing animates until the class goes on. ========================================================================== */ .dl-profile__photo::before, .dl-card__img::before, .dl-duo__img::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .45s var(--dl-ease); background-color: #0e0e12; background-image: linear-gradient(100deg, transparent 22%, rgba(201, 168, 76, .20) 41%, rgba(246, 241, 228, .16) 50%, rgba(201, 168, 76, .20) 59%, transparent 78%); background-size: 220% 100%; background-repeat: no-repeat; } .dl-profile__photo.is-loading::before, .dl-card__img.is-loading::before, .dl-duo__img.is-loading::before { opacity: 1; animation: dl-sheen 1.9s ease-in-out infinite; } @keyframes dl-sheen { from { background-position: 140% 0; } to { background-position: -40% 0; } } /* the panel still covers the gap, it just stops moving */ @media (prefers-reduced-motion: reduce) { .dl-profile__photo.is-loading::before, .dl-card__img.is-loading::before, .dl-duo__img.is-loading::before { animation: none; } } /* ── badges, drawn in the theme's own language ── A vertical stack top-left of the photo. Glass fill, gold hairline, small caps. Reads as jewellery on the image rather than stickers stuck over it. */ .dl-photobadges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 2; } .dl-photobadge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 11px; border-radius: 3px; font-family: "Inter", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--dl-gold-lt); background: rgba(10, 9, 7, .62); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(201, 168, 76, .5); box-shadow: 0 2px 12px rgba(0,0,0,.35); white-space: nowrap; } /* a small gold diamond as the marker */ .dl-photobadge::before { content: ""; width: 4px; height: 4px; background: var(--dl-gold); transform: rotate(45deg); flex: none; } /* Recommended is the one worth shouting about — solid gold */ .dl-photobadge--recommended { color: #14100a; background: linear-gradient(135deg, #ffed8c, var(--dl-gold)); border-color: transparent; } .dl-photobadge--recommended::before { background: rgba(20,16,10,.55); } /* New gets the teal accent so it reads as different, not just another gold pill */ .dl-photobadge--new { color: var(--dl-teal-lt); border-color: rgba(15, 154, 154, .55); } .dl-photobadge--new::before { background: var(--dl-teal); } @media (max-width: 600px) { .dl-photobadges { top: 8px; left: 8px; gap: 5px; } .dl-photobadge { font-size: 8px; padding: 5px 9px; letter-spacing: .14em; } } .dl-profile__head { margin-bottom: var(--sp-5); } .dl-profile__name { margin: 0 0 var(--sp-3); } .dl-profile__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .dl-profile__intro { color: var(--dl-text); font-size: 1.02rem; } .dl-profile__intro p:last-child { margin-bottom: 0; } /* ── the compact luxury cards ── */ .dl-profile__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-3); align-items: start; } .dl-card-lux { padding: var(--sp-4); border: 1px solid var(--dl-line); border-radius: var(--dl-radius); /* near-black, with a faint gold wash in the top corner so it has depth without lifting away from the page */ background: radial-gradient(120% 80% at 50% 0%, rgba(201,168,76,.05), transparent 60%), linear-gradient(180deg, #0c0c10, #08080a); position: relative; overflow: hidden; } /* faded gold hairline along the top edge — the detail that makes it read as designed */ .dl-card-lux::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--dl-gold), transparent); opacity: .5; } .dl-card-lux--wide { grid-column: 1 / -1; } /* two cards sharing one column: areas + services run down the space beside the stats card, which is always the tallest of the three */ .dl-profile__stack { display: grid; gap: var(--sp-3); align-content: start; } .dl-card-lux__title { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dl-gold); font-family: "Inter", sans-serif; font-weight: 600; margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .dl-card-lux__count { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(201,168,76,.14); border: 1px solid rgba(201,168,76,.35); letter-spacing: .05em; } .dl-card-lux__note { font-size: .8rem; color: var(--dl-muted); margin: 12px 0 0; } .dl-chip { display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--dl-gold-lt); border: 1px solid rgba(201,168,76,.45); background: rgba(201,168,76,.07); } .dl-chip--teal { color: var(--dl-teal-lt); border-color: rgba(15,154,154,.5); background: rgba(15,154,154,.08); } /* a chip that jumps to a section: small chevron so it reads as tappable */ .dl-chip--jump { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .dl-chip--jump::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); } @media (hover: hover) { .dl-chip--jump:hover { background: rgba(15,154,154,.18); border-color: var(--dl-teal); } } .dl-chip--jump:active { background: rgba(15,154,154,.18); } /* the duo card must clear the sticky header when jumped to */ #duo { scroll-margin-top: 100px; } /* highlight briefly so it's obvious where you landed */ #duo:target { border-color: rgba(15,154,154,.6); animation: dl-flash 1.6s var(--dl-ease) 1; } @keyframes dl-flash { 0% { box-shadow: 0 0 0 0 rgba(15,154,154,.35); } 40% { box-shadow: 0 0 0 5px rgba(15,154,154,.16); } 100% { box-shadow: 0 0 0 0 rgba(15,154,154,0); } } /* ── rates table — the page's centrepiece, so it gets the full treatment ── */ .dl-rates { display: table; /* never let a utility rule turn this into a block */ width: 100%; border: 0; border-collapse: separate; border-spacing: 0; font-size: .92rem; table-layout: fixed; background: transparent; } /* Astra draws a full 1px border on every cell, which reads as white gridlines on a dark card. Strip them and keep only our own horizontal hairline. */ .dl-rates th, .dl-rates td { padding: 13px 16px; text-align: right; background: transparent; border: 0 !important; border-bottom: 1px solid rgba(201,168,76,.1) !important; } .dl-rates tr { background: transparent !important; } .dl-rates th:first-child, .dl-rates td:first-child { text-align: left; width: 44%; } .dl-rates thead th { font-family: "Inter", sans-serif; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dl-gold); font-weight: 600; padding-top: 0; padding-bottom: 11px; border-bottom: 1px solid var(--dl-line-strong) !important; } .dl-rates tbody tr:last-child td { border-bottom: 0 !important; } .dl-rates tbody td { color: var(--dl-cream); /* Cormorant sets figures old-style, so 3, 4, 5, 7 and 9 drop below the baseline and a column of prices came out ragged — "£1050" worst of all. Inter matches the extras card and keeps every digit on the line. Slightly smaller than the serif was, because a sans at the same size reads heavier. */ font-family: "Inter", sans-serif; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; } .dl-rates tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; } .dl-rates tbody tr { transition: background .2s var(--dl-ease); } @media (hover: hover) { .dl-rates tbody tr:hover td { background: rgba(201,168,76,.045); } } /* the duration label stays quiet so the numbers carry the row */ .dl-rates__dur { color: var(--dl-muted) !important; font-family: "Inter", sans-serif !important; font-size: .85rem !important; letter-spacing: .01em; white-space: nowrap; /* "Dinner date (3hrs)" stays on one line */ } /* the bracketed duration is secondary detail — smaller and dimmer */ .dl-rates__hrs { font-size: .78em; opacity: .72; letter-spacing: 0; } @media (max-width: 600px) { .dl-rates th, .dl-rates td { padding: 11px 8px; } .dl-rates th:first-child, .dl-rates td:first-child { width: 46%; } .dl-rates__dur { font-size: .78rem !important; } .dl-rates__hrs { font-size: .74em; } /* matches .dl-extras li at this breakpoint, so the two cards read as a pair */ .dl-rates tbody td { font-size: .84rem; } } /* the headline hour, subtly lifted */ .dl-rates tbody tr:nth-child(1) td, .dl-rates tbody tr:nth-child(2) td { color: var(--dl-gold-lt); } .dl-na { color: rgba(255,255,255,.22); font-family: "Inter", sans-serif; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } /* stats */ .dl-stats { margin: 0; } .dl-stats__row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--dl-line); } .dl-stats__row:last-child { border-bottom: 0; } .dl-stats dt { color: var(--dl-muted); font-size: .86rem; margin: 0; } .dl-stats dd { color: var(--dl-cream); font-size: .86rem; margin: 0; text-align: right; } /* extras — a price list, so it reads in columns with the figure hard right */ .dl-extras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--sp-5); } .dl-extras li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--dl-line); font-size: .88rem; } .dl-extras__label { color: var(--dl-text); } /* dotted leader carries the eye across to the price without a heavy rule */ .dl-extras li::after { content: ""; flex: 1 1 auto; height: 1px; margin-bottom: 3px; background-image: linear-gradient(90deg, var(--dl-line) 1px, transparent 1px); background-size: 4px 1px; background-repeat: repeat-x; } .dl-extras__price { order: 3; color: var(--dl-gold-lt); font-weight: 600; white-space: nowrap; } @media (max-width: 600px) { .dl-extras { grid-template-columns: 1fr; } .dl-extras li { font-size: .84rem; padding: 8px 0; } } /* services — smaller than the area chips: there are three times as many of them, and they now sit in a half-width column */ .dl-likes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; } .dl-likes li { font-size: .68rem; border-radius: 5px; color: var(--dl-text); background: rgba(255,255,255,.03); border: 1px solid var(--dl-line); transition: border-color .25s var(--dl-ease), color .25s var(--dl-ease), background .25s var(--dl-ease); } /* padding lives on the link so the whole chip is the tap target */ .dl-likes li { padding: 0; } .dl-likes li a, .dl-likes li { display: inline-block; } .dl-likes li a { padding: 3px 8px; color: inherit; } .dl-likes li:not(.is-link) { padding: 3px 8px; } /* linked services read as interactive; unlinked ones stay quiet */ .dl-likes li.is-link { border-color: rgba(201,168,76,.28); } /* hover/press is the shared ring above; the label keeps its resting colour */ /* reviews */ .dl-stars { display: inline-flex; gap: 2px; line-height: 1; } .dl-star { color: rgba(255,255,255,.16); font-size: .95rem; } .dl-star.is-on { color: var(--dl-gold); } /* ========================================================================== WITHHELD PHOTO — stands in wherever a listing's image would have gone Sized from the container rather than given dimensions of its own, so the same element works in a 3:4 card, a 40px area tile and the profile hero without a variant for each. ========================================================================== */ .dl-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 90px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 8px, transparent 8px 16px), linear-gradient(180deg, #101014, #0a0a0d); border-bottom: 1px solid var(--dl-line); } .dl-noimg__txt { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--dl-muted); } /* the tiles are 40px square, so the word cannot fit; the texture carries it */ .dl-cloud__pic .dl-noimg { min-height: 0; border-bottom: 0; } .dl-cloud__pic .dl-noimg__txt { display: none; } /* ========================================================================== JOURNAL FILTER — search + category chips above the grouped journal Deliberately lighter than the listings filter: the journal is a reading surface, so this is a search box and a row of chips rather than a panel of selects. Same tokens throughout so the two read as the same family. ========================================================================== */ .dl-jfilter { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: var(--sp-4); border: 1px solid var(--dl-line); border-radius: var(--dl-radius); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)); } .dl-jfilter__search input { width: 100%; padding: 12px 15px; border-radius: 999px; } .dl-jfilter__cats { display: flex; flex-wrap: wrap; gap: 8px; } .dl-jchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--dl-line); /* A