/* * Profile: Loly Boutique Hotel (theme startup_pro by dgNet). * * Reproduces the design language of the theme's own detail pages * (inc/offerte-dettaglio, inc/room-dettaglio, inc/rooms/altre.php): * - fonts: Butler (titles), Assistant 300 (text) — both loaded by the theme * - ink #1D1D1B, link gold #A07004, label gold #FFDD82, detail gold #AD841F * - gold gradients for buttons and titles, square corners, centered text * - 750px image band with a thin white circle, like every theme hero * * Gold text is #936602, a shade darker than the theme's #A07004 (4.36:1 on * white): 4.5:1 on white and on the light boxes. Labels keep #AD841F (3:1). * Every box that paints a background also sets its text colour: the theme's * own rules (footer { background-color: #1D1D1B }) must not show through. * * Loaded only when the profile is active, after ubt.css. */ .ubt-profile-loly { --ubt-theme-accent: #a07004; --ubt-gold-link: #936602; --ubt-accent-text: var(--ubt-gold-link); --ubt-radius: 0px; --ubt-measure: 44rem; --ubt-wide: 1200px; --ubt-header-offset: 110px; --ubt-band-h: 750px; --ubt-band-bg: #1d1d1b; --ubt-band-top: 60px; --ubt-ink: #1d1d1b; --ubt-gold-2: #ad841f; --ubt-gold: linear-gradient(to right, #864c26 0%, #864c26 23%, #a8874c 34%, #e6d2af 52%, #997753 72%, #864c26 95%, #864c26 100%); /* The theme's radial gold (#FFE06B → #A07004) is too light on white for long text: same hues, darker stops, readable at body sizes. */ --ubt-gold-text: linear-gradient(90deg, #8a5d06 0%, #b8871f 50%, #8a5d06 100%); color: var(--ubt-ink); font-family: "Assistant", sans-serif; } /* The theme wraps the page in #container_page { overflow-x: hidden }, which turns it into a scroll container and breaks position: sticky (TOC). clip crops the same way without that side effect. The theme stylesheet loads later in the page, hence the extra specificity. This stylesheet is loaded only on pages the plugin renders, and the theme prints without body_class(), so the selector cannot use .ubt-template. */ html body #container_page { overflow-x: clip; } @media (max-width: 767px) { .ubt-profile-loly { --ubt-header-offset: 70px; --ubt-band-h: 350px; --ubt-band-top: 40px; } } /* Room above the theme's footer logo (.logo_footer img: 60px, pulled up 30px): template pages only, not shortcodes or parts inside theme pages. */ .ubt-main > .ubt-profile-loly { padding-bottom: 96px; } @media (max-width: 767px) { .ubt-main > .ubt-profile-loly { padding-bottom: 64px; } } /* ---------------------------------------------------------------- band */ .ubt-profile-loly .ubt-band { margin-bottom: 60px; } .ubt-profile-loly .ubt-band__inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 480px; max-width: 100%; aspect-ratio: 1; } /* Thin white ring + frosted disc, as in the theme's .borderCircle. */ .ubt-profile-loly .ubt-band__inner::before, .ubt-profile-loly .ubt-band__inner::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: -1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } .ubt-profile-loly .ubt-band__inner::before { width: 480px; height: 480px; border: 1px solid #fff; } .ubt-profile-loly .ubt-band__inner::after { width: 400px; height: 400px; background: rgba(255, 255, 255, 0.3); } .ubt-profile-loly .ubt-band__label { color: #ffdd82; font-family: "Butler", serif; font-size: 28px; font-weight: 500; letter-spacing: 0.2em; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); } .ubt-profile-loly .ubt-band__sub { color: #fff; font-family: "Assistant", sans-serif; font-size: 20px; font-weight: 300; letter-spacing: 0.08em; text-transform: lowercase; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); opacity: 1; } @media (max-width: 767px) { .ubt-profile-loly .ubt-band__inner { aspect-ratio: auto; } .ubt-profile-loly .ubt-band__inner::before, .ubt-profile-loly .ubt-band__inner::after { display: none; } .ubt-profile-loly .ubt-band__label { font-size: 22px; } } /* ---------------------------------------------------------------- intro (like .txt on detail pages) */ .ubt-profile-loly .ubt-shell > .ubt-breadcrumbs, .ubt-profile-loly .ubt-shell > .ubt-hero { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 700px; margin-inline: auto; text-align: center; } .ubt-profile-loly .ubt-breadcrumbs ol { justify-content: center; } .ubt-profile-loly .ubt-breadcrumbs { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } .ubt-profile-loly .ubt-title { color: var(--ubt-ink); font-family: "Butler", serif; font-size: 50px; font-weight: 400; line-height: 1.15; letter-spacing: 0; } .ubt-profile-loly .ubt-dek, .ubt-profile-loly .ubt-hero--archive .ubt-dek { max-width: none; margin-top: 1.25rem; background: var(--ubt-gold-text); -webkit-background-clip: text; background-clip: text; color: var(--ubt-gold-link); -webkit-text-fill-color: transparent; font-family: "Butler", serif; font-size: 18px; line-height: 1.5; } .ubt-profile-loly .ubt-meta { justify-content: center; margin-top: 1.75rem; text-align: left; font-size: 13px; } .ubt-profile-loly .ubt-meta__author a { color: var(--ubt-ink); } @media (max-width: 767px) { .ubt-profile-loly .ubt-title { font-size: 30px; } } /* ---------------------------------------------------------------- labels, chips, buttons */ /* Category labels: gold uppercase text, like the theme's .sottotitolo. */ .ubt-profile-loly .ubt-chip:not(.ubt-chip--ghost) { padding: 0; border: 0; border-radius: 0; background: none; color: var(--ubt-gold-2); font-family: "Assistant", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .ubt-profile-loly .ubt-chip:not(.ubt-chip--ghost):hover { background: none; color: var(--ubt-gold-link); } .ubt-profile-loly .ubt-chip--ghost { padding: 0.6em 1.2em; border: 1px solid rgba(29, 29, 27, 0.2); border-radius: 0; color: var(--ubt-ink); font-family: "Assistant", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; } .ubt-profile-loly .ubt-chip--ghost:hover, .ubt-profile-loly .ubt-chip--ghost:focus-visible { border-color: #a07004; background: transparent; color: var(--ubt-gold-link); } /* Active filter, search button, current page: the theme's gold "BOOK" button. */ .ubt-profile-loly .ubt-filters [aria-current], .ubt-profile-loly .ubt-search button, .ubt-profile-loly .ubt-pagination .page-numbers.current { border-color: transparent; background: var(--ubt-gold); color: #fff; } .ubt-profile-loly .ubt-search button.ubt-chip { border-color: transparent; background: var(--ubt-gold); color: #fff; padding: 0.7em 1.4em; border-radius: 0; font-family: "Butler", serif; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .ubt-profile-loly .ubt-search button.ubt-chip:hover { background: var(--ubt-gold); color: #fff; opacity: 0.85; } .ubt-profile-loly .ubt-search input[type="search"] { border-color: rgba(29, 29, 27, 0.25); border-radius: 0; font-family: "Assistant", sans-serif; font-weight: 300; } /* ---------------------------------------------------------------- archive */ .ubt-profile-loly .ubt-hero--archive { max-width: 700px; } .ubt-profile-loly .ubt-toolbar { justify-content: center; border-bottom-color: rgba(29, 29, 27, 0.12); } .ubt-profile-loly .ubt-filters { flex: 0 1 auto; } .ubt-profile-loly .ubt-pagination .page-numbers { border-radius: 0; font-family: "Butler", serif; } .ubt-profile-loly .ubt-pagination a.page-numbers:hover { border-color: #a07004; color: var(--ubt-gold-link); } /* ---------------------------------------------------------------- cards (like inc/rooms/altre.php) */ .ubt-profile-loly .ubt-card { text-align: center; } .ubt-profile-loly .ubt-card__body { align-items: center; } /* The gold vertical line the theme draws on hover. */ .ubt-profile-loly .ubt-card__body::before { content: ""; width: 1px; height: 0; background: var(--ubt-gold-2); transition: height 0.3s ease-in-out; } .ubt-profile-loly .ubt-card:hover .ubt-card__body::before { height: 36px; } .ubt-profile-loly .ubt-card__title { color: var(--ubt-ink); font-family: "Butler", serif; font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: 0; } .ubt-profile-loly .ubt-card:hover .ubt-card__link { color: var(--ubt-gold-link); } .ubt-profile-loly .ubt-card__excerpt { color: var(--ubt-ink); font-size: 15px; font-weight: 300; line-height: 1.6; } .ubt-profile-loly .ubt-card__meta { color: rgba(29, 29, 27, 0.65); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .ubt-profile-loly .ubt-card__img { transition: transform 0.4s ease-in-out; } .ubt-profile-loly .ubt-card:hover .ubt-card__img { transform: scale(1.1); } .ubt-profile-loly .ubt-card--featured .ubt-card__title { font-size: 40px; line-height: 1.15; } @media (max-width: 767px) { .ubt-profile-loly .ubt-card--featured .ubt-card__title { font-size: 30px; } } /* ---------------------------------------------------------------- article body */ .ubt-profile-loly .ubt-content { color: var(--ubt-ink); font-family: "Assistant", sans-serif; font-size: 17px; font-weight: 300; line-height: 1.8; } .ubt-profile-loly .ubt-content :is(p, li, td, th) { font-size: inherit; line-height: inherit; } .ubt-profile-loly .ubt-content p { margin: 0 0 1.2em; } .ubt-profile-loly .ubt-content a { color: var(--ubt-gold-link); text-decoration: underline; text-underline-offset: 3px; } .ubt-profile-loly .ubt-content strong { font-weight: 600; } .ubt-profile-loly .ubt-content h2 { margin: 2em 0 0.6em; color: var(--ubt-ink); font-family: "Butler", serif; font-size: 34px; font-weight: 400; line-height: 1.2; } .ubt-profile-loly .ubt-content h3 { margin: 1.8em 0 0.6em; background: var(--ubt-gold-text); -webkit-background-clip: text; background-clip: text; color: var(--ubt-gold-link); -webkit-text-fill-color: transparent; font-family: "Butler", serif; font-size: 19px; font-weight: 500; letter-spacing: 0.15em; line-height: 1.4; text-transform: uppercase; } /* The theme's reset removes list markers. */ .ubt-profile-loly .ubt-content ul { margin: 0 0 1.2em; padding-left: 1.4em; list-style: disc; } .ubt-profile-loly .ubt-content ol { margin: 0 0 1.2em; padding-left: 1.4em; list-style: decimal; } .ubt-profile-loly .ubt-content li { margin-bottom: 0.4em; } .ubt-profile-loly .ubt-content blockquote { margin: 2em 0; padding: 0 0 0 1.5em; border-left: 1px solid var(--ubt-gold-2); font-family: "Butler", serif; font-size: 22px; font-weight: 300; line-height: 1.5; } .ubt-profile-loly .ubt-content blockquote cite { display: block; margin-top: 0.75em; color: var(--ubt-gold-2); font-family: "Assistant", sans-serif; font-size: 12px; font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; } .ubt-profile-loly .ubt-content table { width: 100%; margin: 0 0 1.5em; border-collapse: collapse; font-size: 15px; } .ubt-profile-loly .ubt-content :is(th, td) { padding: 0.6em 0.8em; border-bottom: 1px solid rgba(29, 29, 27, 0.15); text-align: left; } .ubt-profile-loly .ubt-content th { font-weight: 600; } /* ---------------------------------------------------------------- toc, footer parts */ .ubt-profile-loly .ubt-toc__title { color: var(--ubt-gold-2); font-family: "Butler", serif; font-size: 12px; letter-spacing: 0.2em; } .ubt-profile-loly .ubt-toc__item a { font-size: 14px; font-weight: 300; } .ubt-profile-loly .ubt-toc__item a[aria-current="true"] { color: var(--ubt-gold-link); font-weight: 500; } .ubt-profile-loly .ubt-progress { background: var(--ubt-gold); } .ubt-profile-loly .ubt-footer { border-top-color: rgba(29, 29, 27, 0.12); } .ubt-profile-loly .ubt-share__label, .ubt-profile-loly .ubt-author__eyebrow, .ubt-profile-loly .ubt-postnav__dir { color: var(--ubt-gold-2); letter-spacing: 0.2em; } /* Opaque (the 7% gold veil of the theme, on white), with its own ink: it reads the same whatever sits behind it. */ .ubt-profile-loly .ubt-author { border-radius: 0; background: #f9f6ef; color: var(--ubt-ink); } .ubt-profile-loly .ubt-author__name { color: var(--ubt-ink); font-family: "Butler", serif; font-size: 22px; font-weight: 400; } .ubt-profile-loly .ubt-author__bio { color: var(--ubt-ink); font-weight: 300; } .ubt-profile-loly .ubt-postnav__link { border-radius: 0; border-color: rgba(29, 29, 27, 0.15); } .ubt-profile-loly .ubt-postnav__link:hover { border-color: #a07004; } .ubt-profile-loly .ubt-postnav__title { font-family: "Butler", serif; font-size: 20px; font-weight: 400; } .ubt-profile-loly .ubt-related__title { margin-bottom: 2.5rem; color: var(--ubt-ink); font-family: "Butler", serif; font-size: 40px; font-weight: 400; text-align: center; } @media (max-width: 767px) { .ubt-profile-loly .ubt-related__title { font-size: 30px; } }