/* =============================================================================
Dracula's Castle — Modern UI layer (v2)
Full port: design tokens, global base, typography, header, footer,
hero, booking/LatePoint, legends cards, blog, FAQ, tabs, contact forms.
All overrides are scoped to Ozeum / Elementor / LatePoint structures so the
Elementor editor remains fully editable.
============================================================================= */
/* -----------------------------------------------------------------------------
0. DESIGN TOKENS
----------------------------------------------------------------------------- */
:root {
/* Background layers — dark with slight cold-blue shift */
--dc-bg: #11151F;
--dc-bg-raised: #1A2030;
--dc-bg-card: #232A3C;
--dc-bg-card-hover: #2E3751;
--dc-bg-elev: #2B344A;
/* Borders */
--dc-border: rgba(255,255,255,0.11);
--dc-border-strong: rgba(255,255,255,0.20);
--dc-border-gold: rgba(231,194,116,0.35);
/* Text tiers */
--dc-text: #F4F6FB;
--dc-text-soft: #CBD0DA;
--dc-text-muted: #9AA0AE;
--dc-text-dim: #6B7284;
--dc-muted: #8B92A3; /* alias for excerpt text (invalid var fix) */
/* Brand */
--dc-red: #E11D2E;
--dc-red-hover: #C3101F;
--dc-red-soft: rgba(225,29,46,.14);
--dc-gold: #D4A853;
--dc-gold-soft: rgba(212,168,83,.18);
--dc-gold-strong: #E7C274;
/* Gradients */
--dc-grad-red: linear-gradient(135deg, #E11D2E 0%, #9C0A19 100%);
--dc-grad-hero: linear-gradient(180deg, rgba(17,21,31,0) 0%, rgba(17,21,31,.55) 60%, rgba(17,21,31,.95) 100%);
--dc-grad-card: linear-gradient(180deg, rgba(35,42,60,0.4) 0%, rgba(35,42,60,0.92) 100%);
/* Radii */
--dc-r-sm: 6px;
--dc-r: 10px;
--dc-r-md: 14px;
--dc-r-lg: 20px;
--dc-r-xl: 28px;
/* Shadows */
--dc-sh-sm: 0 1px 3px rgba(0,0,0,.35);
--dc-sh: 0 4px 14px rgba(0,0,0,.35);
--dc-sh-md: 0 12px 30px rgba(0,0,0,.45);
--dc-sh-lg: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px var(--dc-border);
--dc-sh-red: 0 6px 16px rgba(225,29,46,.3);
--dc-sh-glow:0 0 0 1px var(--dc-border), 0 20px 50px rgba(225,29,46,.18);
/* Motion */
--dc-t-fast: 150ms cubic-bezier(.4,0,.2,1);
--dc-t: 250ms cubic-bezier(.4,0,.2,1);
--dc-t-slow: 450ms cubic-bezier(.4,0,.2,1);
/* Typography — MedievalSharp removed; elegant serif + uppercase gothic serif */
--dc-ff-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--dc-ff-display: 'Cormorant Garamond', 'Cinzel', Georgia, serif;
--dc-ff-heading: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
--dc-ff-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
--dc-ff-accent: 'Bebas Neue', 'Inter', sans-serif;
--dc-ff-mono: 'Bebas Neue', 'Inter', sans-serif;
/* Surfaces (card / listing tiles) */
--dc-surface: #1A2030; /* was referenced but never defined; matches --dc-bg-raised */
/* Layout */
--dc-container: 1240px;
--dc-gutter: clamp(16px, 3vw, 32px);
}
/* -----------------------------------------------------------------------------
1. GLOBAL BASE — keep site-wide typography & palette coherent with the new
chrome, but we stay narrow here (round 1). Ozeum's scheme_dark still applies.
----------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body.scheme_dark,
body.scheme_default,
body,
.body_wrap,
.page_wrap,
.page_content_wrap {
background-color: var(--dc-bg) !important;
color: var(--dc-text-soft) !important;
font-family: var(--dc-ff-body) !important;
font-weight: 400;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.content_wrap > .content,
.sidebar_inner,
.elementor-section:not(.elementor-section-stretched) { background: transparent !important; }
/* --- Typography hierarchy --- */
body, p, li, span, div { font-family: var(--dc-ff-body) !important; }
h1, h1 .elementor-heading-title,
h2, h2 .elementor-heading-title {
font-family: var(--dc-ff-display) !important;
color: var(--dc-text) !important;
font-weight: 400 !important;
letter-spacing: 0.005em !important;
line-height: 1.15 !important;
}
h1, h1 .elementor-heading-title { font-size: clamp(2.5rem, 5vw, 4.6rem) !important; }
h2, h2 .elementor-heading-title { font-size: clamp(2rem, 3.6vw, 3rem) !important; }
h3, h3 .elementor-heading-title,
h4, h4 .elementor-heading-title,
.post_title, .entry-title,
.sc_item_title_text {
font-family: var(--dc-ff-heading) !important;
color: var(--dc-text) !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
line-height: 1.25 !important;
text-transform: uppercase;
}
h3, h3 .elementor-heading-title { font-size: clamp(1.3rem, 2vw, 1.7rem) !important; }
h4, h4 .elementor-heading-title, .post_title { font-size: clamp(1rem, 1.4vw, 1.2rem) !important; }
.sc_title_extra .sc_item_title_text {
font-family: var(--dc-ff-accent) !important;
font-weight: 400 !important;
font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
color: var(--dc-gold) !important;
letter-spacing: 0.1em !important;
text-transform: none !important;
line-height: 1.4 !important;
}
p, .elementor-widget-text-editor p { color: var(--dc-text-soft) !important; }
a { color: var(--dc-gold); transition: color var(--dc-t-fast); }
a:hover { color: var(--dc-red); }
/* --- Container / Layout --- */
.elementor-section.elementor-section-boxed > .elementor-container {
max-width: var(--dc-container) !important;
padding-left: var(--dc-gutter) !important;
padding-right: var(--dc-gutter) !important;
}
/* Spacer widgets are capped — many were 80–120px in the original page. */
.elementor-widget-spacer .elementor-spacer-inner { max-height: 20px !important; min-height: 0 !important; }
/* Zero out spacers adjacent to headings on top-level sections (they
accumulate with section padding and produce the 80–200px dead zones
the client complained about). */
.dc-info-section + section .elementor-widget-spacer .elementor-spacer-inner,
.dc-info-section .elementor-widget-spacer .elementor-spacer-inner { max-height: 0 !important; }
/* Tighten section gaps globally */
.page_content_wrap .elementor-top-section { margin-bottom: 0 !important; }
.page_content_wrap .elementor-top-section > .elementor-container {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Hide empty spacer sections */
.dc-hidden-section { display: none !important; }
/* Tight, uniform vertical rhythm between top-level sections.
Earlier we used clamp(48px, 6vw, 88px) which at 1280px width
yielded 76.8px — way too airy per client feedback. Capped to ~30px. */
.page_content_wrap .elementor-section.elementor-top-section:not(.elementor-section-stretched) {
padding-top: clamp(18px, 2.4vw, 32px) !important;
padding-bottom: clamp(18px, 2.4vw, 32px) !important;
}
/* Compact sections that are specifically heading / intro blocks. */
.page_content_wrap .elementor-section.elementor-top-section.dc-info-section,
.page_content_wrap .elementor-section.elementor-top-section.dc-legends-intro,
.page_content_wrap .elementor-section.elementor-top-section.dc-visit-heading-wrap {
padding-top: clamp(10px, 1.6vw, 20px) !important;
padding-bottom: clamp(4px, 1vw, 12px) !important;
}
/* -----------------------------------------------------------------------------
2. HEADER (top panel) — sticky, glassmorphism, compact
----------------------------------------------------------------------------- */
.top_panel,
.top_panel_custom,
.top_panel_custom_header-custom {
position: sticky !important;
top: 0 !important;
/* Match Ozeum .header_position_over stacking so dropdowns sit above page chrome */
z-index: 8000 !important;
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: 0 !important;
right: auto !important;
background: rgba(11, 14, 19, 0.82) !important;
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
/* Single line under the whole header; inner narrow row has no own bottom border. */
border-bottom: 1px solid var(--dc-border);
transition: background var(--dc-t), border-color var(--dc-t);
}
/* Archives/singular can add a header image on .top_panel — drop it so
the bar matches the glass strip (no extra texture / overlay line). */
.top_panel.top_panel_custom.with_bg_image {
background-image: none !important;
}
.top_panel.top_panel_custom.with_bg_image:before {
display: none !important;
content: none !important;
background: none !important;
}
/* Single posts with a featured image: header-custom.php adds with_featured_image
(without with_bg_image), so the rules above do not run — header then diverges. */
.top_panel.top_panel_custom.without_bg_image.with_featured_image,
.top_panel.top_panel_custom.with_featured_image {
background-image: none !important;
}
.top_panel.top_panel_custom.with_featured_image::before,
.top_panel.top_panel_custom.with_featured_image::after {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
}
/* One glass treatment everywhere (default vs over used to diverge). */
.header_position_default .top_panel,
.header_position_default .top_panel_custom,
.header_position_over .top_panel,
.header_position_over .top_panel_custom {
background: rgba(11, 14, 19, 0.82) !important;
}
.top_panel .sc_layouts_row_delimiter,
.top_panel .elementor-top-section.sc_layouts_row_delimiter {
border: none !important;
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------------------------
Header parity (home vs inner pages)
Homepage uses body.header_position_over — Ozeum sets
.header_position_over .sc_layouts_row[class*=scheme_]:not(.fixed_on) {
background: transparent }. On archives / blog_mode_blog the body is
header_position_default, so scheme_dark rows keep solid fills → banded
header, different “width” of colour blocks, extra visual lines. Force the
same single glass slab as the front page everywhere inside .top_panel.
--------------------------------------------------------------------------- */
.top_panel .sc_layouts_row:not(.sc_layouts_row_fixed_on),
.top_panel .elementor-top-section,
.top_panel .elementor-inner-section {
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.top_panel .elementor-column,
.top_panel .elementor-widget-wrap {
background-color: transparent !important;
background-image: none !important;
}
/* Kill Elementor section overlays / slideshow layers inside the header bar */
.top_panel .elementor-background-overlay,
.top_panel .elementor-background-slideshow,
.top_panel .elementor-background-video-container {
display: none !important;
}
/* Elementor CPT header layout ID 2747: editor adds 1px top/bottom borders on the
compact logo+menu rows (37815e5, …) and gradient overlays on wrapper sections.
On category/archives those read as extra rules above/below the nav; homepage
over-hero often masks them. Strip here so all templates match. */
.elementor.elementor-2747 .elementor-element.elementor-element-37815e5,
.elementor.elementor-2747 .elementor-element.elementor-element-f73d558,
.elementor.elementor-2747 .elementor-element.elementor-element-fa3d0bc {
border: none !important;
border-style: none !important;
border-width: 0 !important;
}
/* Stronger than Elementor inline block for layout 2747 overlays */
.elementor.elementor-2747 .elementor-background-overlay {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
background: none !important;
background-image: none !important;
}
/* Utility row: on header_position_over the right column can stack search + language;
singles never matched body.home — they stayed on the "old" stack. Keep one row
and match Elementor post-2747 padding (25px) like category. */
body .top_panel .elementor-top-section.sc_layouts_row_type_narrow .elementor-column.sc_layouts_column_align_right > .elementor-widget-wrap {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0 !important;
}
body .top_panel .elementor-element.elementor-element-3048c87b > .elementor-widget-container,
body .top_panel .elementor-element.elementor-element-ad48c3a > .elementor-widget-container {
border-style: solid !important;
border-width: 0 1px 0 1px !important;
border-color: rgba(59, 58, 49, 0.95) !important;
/* Elementor: 13px 25px — was 14px and looked tighter than category */
padding: 13px 25px !important;
box-sizing: border-box !important;
}
body .top_panel .elementor-top-section.sc_layouts_row_type_narrow .elementor-widget-shortcode:has(.gtranslate_wrapper) > .elementor-widget-container {
/* Elementor a5539b5: margin 0 0 0 10px; padding 0 */
margin: 0 0 0 10px !important;
padding: 0 !important;
}
/* Neutralize Elementor default paddings inside the header */
.top_panel .elementor-section,
.top_panel .elementor-inner-section,
.top_panel .elementor-column,
.top_panel .elementor-widget-wrap,
.top_panel .elementor-element-populated {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
.top_panel .elementor-container {
padding-left: var(--dc-gutter) !important;
padding-right: var(--dc-gutter) !important;
max-width: var(--dc-container);
margin: 0 auto;
}
.top_panel .elementor-widget,
.top_panel .sc_layouts_item {
margin: 0 !important;
}
/* --- Top utility row (hours + address + search + lang) --------------------- */
.top_panel .elementor-top-section.sc_layouts_row_type_narrow {
background: rgba(0,0,0,0.3) !important;
/* Avoid double line with .top_panel border: separation is the darker strip only */
border-bottom: none;
font-size: 12.5px;
letter-spacing: 0.02em;
}
.top_panel .elementor-top-section.sc_layouts_row_type_narrow .elementor-container {
padding-top: 6px !important;
padding-bottom: 6px !important;
min-height: 34px;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
column-gap: 10px;
}
/* Keep address, search, and language on one bar without awkward wraps */
.top_panel .elementor-top-section.sc_layouts_row_type_narrow .elementor-row,
.top_panel .sc_layouts_row_type_narrow .elementor-row {
flex-wrap: nowrap !important;
width: 100% !important;
}
.top_panel .elementor-top-section.sc_layouts_row_type_narrow .elementor-column {
min-width: 0 !important;
}
.top_panel .sc_layouts_row_type_narrow .elementor-column:first-child { flex: 0 0 auto; }
/* Middle columns: hours + address — allow shrink + ellipsis */
.top_panel .sc_layouts_row_type_narrow .sc_layouts_iconed_text { max-width: 100%; }
.top_panel .sc_layouts_iconed_text { display: flex; align-items: center; gap: 6px; }
.top_panel .sc_layouts_iconed_text_line1 {
color: var(--dc-text-muted) !important;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12.5px !important;
line-height: 1.4 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase;
min-width: 0;
}
/* Language + last utilities stay on the first row */
.top_panel .elementor-top-section.sc_layouts_row_type_narrow .elementor-column:last-child,
.top_panel .sc_layouts_row_type_narrow .gtranslate_wrapper {
flex: 0 0 auto;
}
.top_panel .sc_layouts_iconed_text_icon {
color: var(--dc-gold) !important;
flex-shrink: 0;
}
.top_panel .sc_layouts_iconed_text_icon [class^="icon-"],
.top_panel .sc_layouts_iconed_text_icon [class*=" icon-"] {
font-size: 14px !important;
color: var(--dc-gold) !important;
}
/* --- Main header row (logo + menu) — compact ------------------------------ */
.top_panel .elementor-top-section:not(.sc_layouts_row_type_narrow) .elementor-container {
padding-top: 8px !important;
padding-bottom: 8px !important;
min-height: 64px;
align-items: center;
}
/* Logo — override Elementor's 2em max-height with a fixed size */
.top_panel .sc_layouts_logo .logo_image,
.top_panel .sc_layouts_logo img,
.elementor .top_panel .sc_layouts_logo .logo_image {
max-height: 44px !important;
width: auto !important;
transition: transform var(--dc-t);
}
.top_panel .sc_layouts_logo:hover img { transform: scale(1.03); }
/* Prevent flexbox from squishing the logo column */
.top_panel .elementor-column:has(.sc_layouts_logo) {
flex: 0 0 auto !important;
min-width: 260px !important;
}
/* Navigation menu */
.top_panel .sc_layouts_menu_nav {
display: flex !important;
align-items: center;
gap: 2px;
background: transparent !important;
}
/* Prevent Ozeum JS from hiding items into a "more" kebab — also suppress menu-collapse flash before JS */
.top_panel .sc_layouts_menu_nav > li.menu-item-more,
.top_panel .sc_layouts_menu_nav > li.menu-collapse { display: none !important; }
.top_panel .sc_layouts_menu_nav > li {
display: list-item !important;
float: none !important;
margin: 0;
}
.top_panel .sc_layouts_menu_nav > li > a {
padding: 10px 12px !important;
border-radius: var(--dc-r) !important;
font-family: var(--dc-ff-body) !important;
font-weight: 500 !important;
font-size: 13.5px !important;
letter-spacing: 0.02em !important;
color: var(--dc-text-soft) !important;
text-transform: none !important;
transition: all var(--dc-t-fast) !important;
position: relative;
white-space: nowrap;
background: transparent !important;
}
.top_panel .sc_layouts_menu_nav > li > a > span { color: inherit !important; }
.top_panel .sc_layouts_menu_nav > li > a:hover,
.top_panel .sc_layouts_menu_nav > li.current-menu-item > a,
.top_panel .sc_layouts_menu_nav > li.current-menu-ancestor > a {
color: var(--dc-text) !important;
background: rgba(255,255,255,0.05) !important;
}
.top_panel .sc_layouts_menu_nav > li.current-menu-item > a::after,
.top_panel .sc_layouts_menu_nav > li.current-menu-ancestor > a::after {
content: "";
position: absolute;
left: 14px; right: 14px;
bottom: 4px; height: 2px;
background: var(--dc-red);
border-radius: 2px;
}
/* Front-page in-page anchors: single active item from location.hash (JS). */
.top_panel .sc_layouts_menu_nav > li.dc-nav-hash-active:not(.menu-item-cta):not(.dc-cta) > a {
color: var(--dc-text) !important;
background: rgba(255,255,255,0.05) !important;
}
.top_panel .sc_layouts_menu_nav > li.dc-nav-hash-active:not(.menu-item-cta):not(.dc-cta) > a::after {
content: "";
position: absolute;
left: 14px; right: 14px;
bottom: 4px; height: 2px;
background: var(--dc-red);
border-radius: 2px;
}
.menu_mobile .menu_mobile_nav > li.dc-nav-hash-active:not(.menu-item-cta):not(.dc-cta) > a {
color: var(--dc-gold-strong) !important;
}
/* Dropdown (children menu) */
.top_panel .sc_layouts_menu_nav > li > ul,
.top_panel .sc_layouts_menu_nav > li ul ul {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-md) !important;
box-shadow: var(--dc-sh-md) !important;
padding: 8px !important;
min-width: 220px !important;
}
.top_panel .sc_layouts_menu_nav > li > ul > li > a,
.top_panel .sc_layouts_menu_nav ul li a {
color: var(--dc-text-soft) !important;
border-radius: var(--dc-r) !important;
padding: 8px 12px !important;
font-size: 13.5px !important;
background: transparent !important;
}
.top_panel .sc_layouts_menu_nav ul li a:hover,
.top_panel .sc_layouts_menu_nav ul li.current-menu-item > a {
color: var(--dc-text) !important;
background: rgba(255,255,255,0.05) !important;
}
/* Primary CTA menu item — class "menu-item-cta" OR a slug-based rule matches */
.top_panel .sc_layouts_menu_nav > li.menu-item-cta,
.top_panel .sc_layouts_menu_nav > li.dc-cta { margin-left: 10px; }
.top_panel .sc_layouts_menu_nav > li.menu-item-cta > a,
.top_panel .sc_layouts_menu_nav > li.dc-cta > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
background: var(--dc-grad-red) !important;
color: #fff !important;
padding: 9px 18px !important;
font-weight: 700 !important;
font-size: 12.5px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: var(--dc-r) !important;
box-shadow: var(--dc-sh-red);
transition: all var(--dc-t-fast) !important;
}
/* Ticket icon — matches www/CLAUDE/home-page-modern.html (Book CTA) */
.top_panel .sc_layouts_menu_nav > li.menu-item-cta > a::before,
.top_panel .sc_layouts_menu_nav > li.dc-cta > a::before {
content: "" !important;
display: block !important;
width: 14px;
height: 14px;
margin-right: 8px;
flex: 0 0 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.top_panel .sc_layouts_menu_nav > li.menu-item-cta > a > span,
.top_panel .sc_layouts_menu_nav > li.dc-cta > a > span { color: #fff !important; }
.top_panel .sc_layouts_menu_nav > li.menu-item-cta > a:hover,
.top_panel .sc_layouts_menu_nav > li.dc-cta > a:hover {
background: var(--dc-red-hover) !important;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(225,29,46,.45);
}
.top_panel .sc_layouts_menu_nav > li.menu-item-cta > a::after,
.top_panel .sc_layouts_menu_nav > li.dc-cta > a::after { display: none !important; }
/* --- Search in header — icon-only toggle ---------------------------------- */
.top_panel .sc_layouts_search,
.top_panel .search_wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.top_panel .search_wrap .search_form_wrap {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
margin-top: 10px !important;
width: 320px !important;
max-width: calc(100vw - 32px) !important;
padding: 10px !important;
background: #1a2033 !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: var(--dc-r-md) !important;
box-shadow: 0 12px 48px rgba(0,0,0,0.7) !important;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--dc-t-fast), visibility var(--dc-t-fast), transform var(--dc-t-fast);
z-index: 10000 !important;
}
/* Lift the search's parent section above the nav row when open */
.top_panel .elementor-top-section:has(.dc-search-open) {
z-index: 100 !important;
}
.top_panel .sc_layouts_search.dc-search-open .search_form_wrap,
.top_panel .search_wrap.dc-search-open .search_form_wrap,
.top_panel .search_wrap.opened .search_form_wrap,
.top_panel .search_wrap:focus-within .search_form_wrap {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.top_panel .search_wrap .search_form {
display: flex;
gap: 6px;
align-items: center;
margin: 0;
}
.top_panel .search_wrap .search_field {
flex: 1;
min-width: 0;
background: rgba(255,255,255,0.06) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r) !important;
color: var(--dc-text) !important;
padding: 8px 12px !important;
font-size: 13.5px !important;
width: 100% !important;
height: 36px !important;
visibility: visible !important;
opacity: 1 !important;
transition: border-color var(--dc-t-fast), background var(--dc-t-fast), box-shadow var(--dc-t-fast) !important;
}
/* Override theme's search_style_fullscreen / search_style_expand defaults that hide the field */
.top_panel .search_wrap.search_style_fullscreen .search_field,
.top_panel .search_wrap.search_style_expand .search_field {
width: 100% !important;
visibility: visible !important;
}
.top_panel .search_wrap .search_field:focus {
outline: none;
border-color: var(--dc-gold) !important;
background: rgba(255,255,255,0.09) !important;
box-shadow: 0 0 0 3px var(--dc-gold-soft);
}
/* Search submit button — arrow icon inside the popup so users can click to submit.
Theme CSS absolutely-positions .search_submit; we force it back into the flex
row so it sits at the right of the input. Also neutralises theme's left padding
on the input that was making space for the overlapped button. */
.top_panel .search_wrap .search_form_wrap .search_form {
position: relative;
}
.top_panel .search_wrap .search_form_wrap .search_field {
padding: 8px 12px !important;
flex: 1 1 auto !important;
order: 1;
}
.top_panel .search_wrap .search_form_wrap .search_submit {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
flex: 0 0 36px !important;
order: 2;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: var(--dc-r) !important;
background: linear-gradient(135deg, #e11d2e 0%, #9c0a19 100%) !important;
color: #fff !important;
cursor: pointer !important;
line-height: 1 !important;
font-size: 0 !important;
transition: transform var(--dc-t-fast), filter var(--dc-t-fast) !important;
}
.top_panel .search_wrap .search_form_wrap .search_submit::before {
content: "" !important;
display: inline-block !important;
width: 16px !important;
height: 16px !important;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain !important;
font-family: var(--dc-ff-body) !important;
font-size: 0 !important;
margin: 0 !important;
color: transparent !important;
}
.top_panel .search_wrap .search_form_wrap .search_submit:hover {
filter: brightness(1.08);
transform: translateX(1px) !important;
}
.top_panel .search_wrap.expanded,
.top_panel .search_wrap.search_opened { position: relative; }
/* The inline collapsed search trigger — render as a compact icon + label */
.top_panel .sc_layouts_search { cursor: pointer; padding: 6px 10px; border-radius: var(--dc-r); }
.top_panel .sc_layouts_search:hover { background: rgba(255,255,255,0.05); }
.top_panel .sc_layouts_search::before {
content: "";
display: inline-block;
width: 16px; height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain;
flex-shrink: 0;
margin-right: 6px;
}
/* The default Ozeum "SEARCH" label — reuse as-is but trim */
.top_panel .sc_layouts_search .search_submit,
.top_panel .sc_layouts_search .search_wrap::before { display: none !important; }
.top_panel .sc_layouts_search .search_field_wrap { display: none; }
.top_panel .sc_layouts_search.dc-search-open .search_field_wrap,
.top_panel .sc_layouts_search.dc-search-open .search_form_wrap { display: block; }
/* Hide the label text when "collapsed" is wanted; keep small "Search" at ≥1024 */
@media (max-width: 1279px) {
.top_panel .sc_layouts_search .search_label,
.top_panel .sc_layouts_search .search_title { display: none !important; }
}
/* --- GTranslate pill ------------------------------------------------------ */
.top_panel .gtranslate_wrapper,
.top_panel .elementor-widget-gtranslate,
.top_panel .gtranslate_wrapper > div {
display: inline-flex;
align-items: center;
position: relative;
}
.top_panel .gtranslate_wrapper .gt_switcher-popup,
.top_panel .gt_switcher,
.top_panel .gt_switcher-popup {
padding: 6px 10px !important;
border-radius: var(--dc-r) !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid var(--dc-border) !important;
font-size: 12.5px !important;
color: var(--dc-text-soft) !important;
transition: all var(--dc-t-fast) !important;
cursor: pointer;
height: 30px;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 6px;
}
.top_panel .gt_switcher-popup:hover,
.top_panel .gt_switcher:hover {
background: rgba(255,255,255,0.1) !important;
border-color: var(--dc-border-strong) !important;
}
.top_panel .gt_switcher-popup > span[style*="font-size:8px"] {
color: var(--dc-text-muted) !important;
font-size: 9px !important;
transform: translateY(-1px);
display: inline-block;
transition: transform var(--dc-t-fast);
}
.top_panel .gtranslate_wrapper.dc-lang-open .gt_switcher-popup > span[style*="font-size:8px"] {
transform: translateY(-1px) rotate(180deg);
}
/* GTranslate popup — hide by default, open only when .dc-lang-open */
.top_panel .gtranslate_wrapper { position: relative; }
.top_panel .gt_white_content,
.top_panel .gtranslate_wrapper .gt_white_content {
display: none !important;
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
margin-top: 6px !important;
width: 180px !important;
min-width: 0 !important;
max-width: 180px !important;
max-height: 360px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 4px !important;
background: #1a2033 !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: var(--dc-r-md) !important;
box-shadow: 0 12px 48px rgba(0,0,0,0.7) !important;
z-index: 10000 !important;
opacity: 1 !important;
color: var(--dc-text) !important;
}
/* Slim scrollbar */
.top_panel .gt_white_content::-webkit-scrollbar { width: 4px; }
.top_panel .gt_white_content::-webkit-scrollbar-track { background: transparent; }
.top_panel .gt_white_content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.top_panel .gtranslate_wrapper.dc-lang-open .gt_white_content {
display: flex !important;
flex-flow: column nowrap !important;
}
/* Lift the entire section above the nav row when dropdown is open */
.top_panel .elementor-top-section:has(.dc-lang-open) {
z-index: 100 !important;
}
.top_panel .elementor-top-section:has(.sc_layouts_menu) {
z-index: 1;
}
.top_panel .gt_black_overlay { display: none !important; }
.top_panel .gt_languages {
display: flex !important;
flex-flow: column nowrap !important;
max-height: none !important;
gap: 2px;
overflow: visible;
}
.top_panel .gt_languages .glink {
display: flex !important;
align-items: center;
gap: 8px;
padding: 7px 10px !important;
border-radius: var(--dc-r) !important;
color: var(--dc-text-soft) !important;
font-size: 13px !important;
text-decoration: none !important;
transition: all var(--dc-t-fast);
}
.top_panel .gt_languages .glink:hover {
background: rgba(255,255,255,0.06) !important;
color: var(--dc-text) !important;
}
.top_panel .gt_languages .glink.gt-current-lang {
background: var(--dc-gold-soft) !important;
color: var(--dc-gold) !important;
}
/* Force dark theme on the GTranslate popup globally */
.gt_white_content,
.gtranslate_wrapper .gt_white_content,
div.gt_white_content {
background: #1a2033 !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: var(--dc-r-md) !important;
box-shadow: 0 12px 48px rgba(0,0,0,0.7) !important;
z-index: 10000 !important;
padding: 4px !important;
width: 180px !important;
max-width: 180px !important;
position: absolute !important;
}
.gt_white_content .glink,
.gt_white_content a.glink {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 10px !important;
border: none !important;
border-bottom: none !important;
border-radius: var(--dc-r) !important;
color: var(--dc-text-soft) !important;
font-size: 13px !important;
text-decoration: none !important;
transition: all var(--dc-t-fast) !important;
}
.gt_white_content .glink:hover,
.gt_white_content a.glink:hover {
background: rgba(255,255,255,0.08) !important;
color: var(--dc-text) !important;
}
.gt_white_content .glink.gt-current-lang {
background: var(--dc-gold-soft) !important;
color: var(--dc-gold) !important;
}
.gt_white_content .glink img {
width: 16px !important;
height: 16px !important;
border-radius: 2px !important;
flex-shrink: 0;
}
.gt_white_content .glink span,
.gt_white_content .gt_languages .glink span,
.top_panel .gt_white_content .glink span {
font-size: 12px !important;
line-height: 1.3 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
display: inline !important;
white-space: nowrap;
text-transform: none !important;
letter-spacing: 0 !important;
}
.gt_white_content .gt_languages {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
/* Cart in header — hide if empty, keep compact */
.top_panel .sc_layouts_cart {
display: inline-flex;
align-items: center;
padding: 8px 10px;
border-radius: var(--dc-r);
color: var(--dc-text-soft) !important;
}
.top_panel .sc_layouts_cart:hover { background: rgba(255,255,255,0.05); color: var(--dc-text) !important; }
.top_panel .sc_layouts_cart_items_count {
background: var(--dc-red) !important;
color: #fff !important;
font-size: 10px !important;
}
/* -----------------------------------------------------------------------------
3. MOBILE HAMBURGER (injected via JS) + MOBILE MENU PANEL
----------------------------------------------------------------------------- */
.dc-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 40px;
height: 40px;
padding: 0;
margin: 0 0 0 8px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--dc-border);
border-radius: var(--dc-r);
cursor: pointer;
transition: all var(--dc-t-fast);
flex-shrink: 0;
}
.dc-hamburger:hover { background: rgba(255,255,255,0.1); border-color: var(--dc-border-strong); }
.dc-hamburger span {
display: block;
width: 18px;
height: 2px;
background: var(--dc-text);
border-radius: 2px;
transition: transform var(--dc-t-fast), opacity var(--dc-t-fast);
}
.dc-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dc-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dc-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Show hamburger only at mobile widths — flex-align instead of absolute */
@media (max-width: 1023px) {
.dc-hamburger {
display: inline-flex;
margin-left: auto;
align-self: center;
z-index: 10;
}
/* Tablet layout: hamburger is direct child of right-aligned widget-wrap */
.top_panel .elementor-top-section .elementor-widget-wrap:has(.dc-hamburger) {
align-items: center !important;
align-content: center !important;
}
/* Mobile/tablet single-column layout: hamburger sits next to logo on the same row */
.top_panel .elementor-column:has(.elementor-widget-wrap > .dc-hamburger) {
width: 100% !important;
flex-basis: 100% !important;
max-width: 100% !important;
}
.top_panel .elementor-widget-wrap:has(> .dc-logo-row):has(> .dc-hamburger) {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
width: 100% !important;
}
.top_panel .elementor-widget.dc-logo-row {
flex: 0 1 auto !important;
width: auto !important;
max-width: calc(100% - 60px) !important;
}
.top_panel .elementor-widget.dc-logo-row .sc_layouts_logo img {
max-height: 44px !important;
width: auto !important;
}
}
/* Mobile menu panel — use Ozeum's existing .menu_mobile container */
.menu_mobile, .menu_mobile_fullscreen {
background: rgba(11, 14, 19, 0.98) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.menu_mobile.opened { height: 100% !important; }
.menu_mobile_overlay.opened { display: block !important; opacity: 1; }
.menu_mobile .menu_mobile_nav {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.menu_mobile .menu_mobile_nav > li { margin: 0; padding: 0; }
.menu_mobile .menu_mobile_nav > li > a {
font-family: var(--dc-ff-display) !important;
font-size: 26px !important;
color: var(--dc-text) !important;
padding: 14px 0 !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: 0.01em;
display: inline-block;
}
.menu_mobile .menu_mobile_nav > li > a:hover,
.menu_mobile .menu_mobile_nav > li > a:focus { color: var(--dc-red) !important; }
.menu_mobile .menu_mobile_nav > li.menu-item-cta,
.menu_mobile .menu_mobile_nav > li.dc-cta { margin-top: 22px; }
.menu_mobile .menu_mobile_nav > li.menu-item-cta > a,
.menu_mobile .menu_mobile_nav > li.dc-cta > a {
display: inline-block;
padding: 14px 28px !important;
background: var(--dc-grad-red) !important;
color: #fff !important;
border-radius: 999px !important;
font-family: var(--dc-ff-body) !important;
font-size: 14px !important;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: var(--dc-sh-red);
}
.menu_mobile .menu_mobile_close {
background: rgba(255,255,255,0.06) !important;
border: 1px solid var(--dc-border) !important;
border-radius: 50% !important;
width: 44px;
height: 44px;
top: 16px !important;
right: 16px !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.menu_mobile .menu_mobile_close .theme_button_close_icon::before,
.menu_mobile .menu_mobile_close .theme_button_close_icon::after {
background: var(--dc-text);
}
.menu_mobile .sc_layouts_logo img { max-height: 60px !important; }
body.dc-menu-open { overflow: hidden; }
/* Mobile menu language selector */
.dc-mobile-lang {
padding: 20px 30px;
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 10px;
}
.dc-mobile-lang-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dc-text-muted);
margin: 0 0 12px;
}
.dc-mobile-lang-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
.dc-mobile-lang-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--dc-r);
color: var(--dc-text-soft) !important;
font-size: 13px;
text-decoration: none !important;
transition: all var(--dc-t-fast);
}
.dc-mobile-lang-item:hover { background: rgba(255,255,255,0.06); color: var(--dc-text) !important; }
.dc-mobile-lang-item.active { background: var(--dc-gold-soft); color: var(--dc-gold) !important; }
.dc-mobile-lang-item img { border-radius: 2px; flex-shrink: 0; }
/* -----------------------------------------------------------------------------
4. HEADER RESPONSIVE
----------------------------------------------------------------------------- */
/* Large desktop padding for menu spacing */
@media (min-width: 1440px) {
.top_panel .sc_layouts_menu_nav > li > a { padding: 10px 14px !important; }
}
/* Small desktop / tablet landscape */
@media (max-width: 1279px) {
.top_panel .elementor-container { padding-left: 20px !important; padding-right: 20px !important; }
.top_panel .sc_layouts_menu_nav > li > a { padding: 8px 12px !important; font-size: 13.5px !important; }
.top_panel .sc_layouts_menu_nav > li.menu-item-cta > a,
.top_panel .sc_layouts_menu_nav > li.dc-cta > a { padding: 10px 16px !important; font-size: 12.5px !important; }
.top_panel .sc_layouts_iconed_text_line1 { max-width: 280px; }
.top_panel .elementor-top-section.sc_layouts_row_type_narrow { font-size: 11.5px; }
}
/* Tablet portrait: hide desktop menu, show only logo + hamburger */
@media (max-width: 1023px) {
/* Hide Ozeum menu on tablet/mobile — we use mobile panel instead */
.top_panel .sc_layouts_menu,
.top_panel .elementor-widget-trx_sc_layouts_menu { display: none !important; }
/* Small utility row can keep its items */
.top_panel .elementor-top-section.sc_layouts_row_type_narrow .sc_layouts_iconed_text_line1 {
font-size: 11px !important;
}
}
/* Mobile */
@media (max-width: 767px) {
/* Hide utility bar on small mobile — too crowded */
.top_panel .elementor-top-section.sc_layouts_row_type_narrow {
display: none !important;
}
.top_panel .elementor-top-section:not(.sc_layouts_row_type_narrow) .elementor-container {
min-height: 56px;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.top_panel .sc_layouts_logo img { max-height: 38px !important; }
/* Prevent logo column from being too wide — give room for hamburger */
.top_panel .elementor-column:has(.sc_layouts_logo) {
min-width: auto !important;
flex: 1 1 auto !important;
}
/* Hide non-essential items in main row on mobile (lang, search, cart) */
.top_panel .elementor-top-section:not(.sc_layouts_row_type_narrow) .sc_layouts_search,
.top_panel .elementor-top-section:not(.sc_layouts_row_type_narrow) .gtranslate_wrapper,
.top_panel .elementor-top-section:not(.sc_layouts_row_type_narrow) .elementor-widget-gtranslate,
.top_panel .elementor-top-section:not(.sc_layouts_row_type_narrow) .sc_layouts_cart {
display: none !important;
}
}
/* Tiny phones */
@media (max-width: 480px) {
.top_panel .sc_layouts_logo img { max-height: 32px !important; }
.dc-hamburger { width: 36px; height: 36px; }
}
/* -----------------------------------------------------------------------------
5. FOOTER — JS-injected 4-column layout (matches home-page-modern.html)
The Elementor footer-814 is hidden; replaced by .dc-footer injected via JS.
----------------------------------------------------------------------------- */
.footer_wrap,
.footer_wrap.scheme_dark {
background-color: #06080C !important;
color: var(--dc-text-muted) !important;
border-top: 1px solid var(--dc-border);
padding: 0 !important;
}
.dc-footer {
max-width: var(--dc-container);
margin: 0 auto;
padding: 72px var(--dc-gutter) 24px;
}
.dc-footer-grid {
display: grid;
grid-template-columns: 1.1fr 1.4fr 1.2fr 1.4fr;
gap: 48px;
align-items: start;
}
.dc-footer-col h4 {
font-family: var(--dc-ff-heading) !important;
font-size: 20px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: none !important;
color: var(--dc-text) !important;
margin: 0 0 20px !important;
line-height: 1.2 !important;
}
.dc-footer-col p {
color: var(--dc-text-muted) !important;
font-size: 14px !important;
line-height: 1.75 !important;
margin: 0 0 12px !important;
}
/* Col 1 — brand */
.dc-footer-brand .dc-footer-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
text-decoration: none !important;
}
.dc-footer-brand .dc-footer-logo img {
max-height: 56px;
width: auto;
}
.dc-footer-brand .dc-footer-logo-text {
font-family: var(--dc-ff-display);
font-size: 20px;
line-height: 1;
color: var(--dc-text) !important;
}
.dc-footer-brand .dc-footer-logo-text small {
display: block;
font-family: var(--dc-ff-heading);
font-size: 9.5px;
letter-spacing: 0.3em;
color: var(--dc-text-muted) !important;
margin-top: 4px;
text-transform: uppercase;
}
.dc-footer-connect {
font-size: 14px !important;
color: var(--dc-text-soft) !important;
margin: 0 0 10px !important;
}
.dc-footer-social {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.dc-footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(212,168,83,0.1);
color: var(--dc-gold) !important;
transition: all var(--dc-t-fast);
}
.dc-footer-social a:hover {
background: var(--dc-gold);
color: var(--dc-bg) !important;
transform: translateY(-2px);
}
.dc-footer-social svg {
width: 18px; height: 18px;
fill: currentColor;
}
.dc-footer-copyright {
font-size: 13px !important;
color: var(--dc-text-muted) !important;
margin: 0 0 14px !important;
}
.dc-footer-legal {
list-style: none;
padding: 0;
margin: 0;
}
.dc-footer-legal li { margin-bottom: 6px; }
.dc-footer-legal a {
font-size: 13px !important;
color: var(--dc-gold) !important;
text-decoration: none !important;
transition: color var(--dc-t-fast);
}
.dc-footer-legal a:hover { color: var(--dc-gold-strong) !important; text-decoration: underline; }
/* Col 2 — Terms */
.dc-footer-terms p {
font-size: 13.5px !important;
color: var(--dc-text-muted) !important;
}
/* Col 3 — Contact */
.dc-contact-item {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 18px;
}
.dc-contact-item:last-child { margin-bottom: 0; }
.dc-contact-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(212,168,83,0.1);
color: var(--dc-gold);
display: inline-flex;
align-items: center;
justify-content: center;
}
.dc-contact-icon svg { width: 15px; height: 15px; fill: currentColor; }
.dc-contact-body {
font-size: 14px !important;
line-height: 1.6;
color: var(--dc-text-soft) !important;
}
.dc-contact-body a {
color: var(--dc-text-soft) !important;
text-decoration: none !important;
transition: color var(--dc-t-fast);
}
.dc-contact-body a:hover { color: var(--dc-gold) !important; }
/* Col 4 — Program */
.dc-program-section { margin-bottom: 18px; }
.dc-program-section:last-child { margin-bottom: 0; }
.dc-program-title {
font-family: var(--dc-ff-heading) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.08em;
color: var(--dc-gold) !important;
margin: 0 0 10px !important;
text-transform: uppercase;
}
.dc-program-section p {
font-size: 13.5px !important;
line-height: 1.6 !important;
margin: 0 0 8px !important;
color: var(--dc-text-muted) !important;
}
.dc-program-section p strong,
.dc-program-section p b {
color: var(--dc-text) !important;
font-weight: 600 !important;
}
/* Disclaimer — collapsible */
.dc-footer-disclaimer {
max-width: var(--dc-container);
margin: 0 auto;
padding: 24px var(--dc-gutter);
border-top: 1px solid var(--dc-border);
font-size: 11.5px;
line-height: 1.7;
color: var(--dc-text-muted);
opacity: 0.85;
}
.dc-footer-disclaimer details { cursor: pointer; }
.dc-footer-disclaimer summary {
font-family: var(--dc-ff-heading);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dc-gold);
margin-bottom: 8px;
list-style: none;
user-select: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.dc-footer-disclaimer summary::after {
content: "\25BE";
transition: transform var(--dc-t-fast);
display: inline-block;
}
.dc-footer-disclaimer details[open] summary::after { transform: rotate(180deg); }
.dc-footer-disclaimer summary::-webkit-details-marker { display: none; }
.dc-footer-disclaimer p {
color: var(--dc-text-muted) !important;
font-size: 12px !important;
line-height: 1.75 !important;
margin: 0 0 10px !important;
}
.dc-footer-disclaimer a {
color: var(--dc-gold) !important;
text-decoration: underline !important;
}
/* Copyright line */
.dc-footer-bottom {
max-width: var(--dc-container);
margin: 0 auto;
padding: 16px var(--dc-gutter) 28px;
border-top: 1px solid var(--dc-border);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--dc-text-muted);
gap: 20px;
}
.dc-footer-bottom .dc-footer-muted { opacity: 0.7; }
/* Footer responsive */
@media (max-width: 1024px) {
.dc-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
.dc-footer { padding-top: 48px; }
.dc-footer-grid { grid-template-columns: 1fr; gap: 32px; }
.dc-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
}
/* -----------------------------------------------------------------------------
6. COOKIE BANNER — match theme, non-intrusive
----------------------------------------------------------------------------- */
#cookie-notice,
.cookie-notice-banner,
.cli-bar-container {
background: rgba(11, 14, 19, 0.96) !important;
border-top: 1px solid var(--dc-border) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
color: var(--dc-text-soft) !important;
font-family: var(--dc-ff-body) !important;
font-size: 13px !important;
}
#cookie-notice .cn-button,
.cli-plugin-button {
border-radius: var(--dc-r) !important;
font-size: 12.5px !important;
padding: 8px 16px !important;
}
/* =============================================================================
7. HERO SECTION
============================================================================= */
/* Hero section — styled via semantic classes (dc-hero / dc-hero-content etc). */
.dc-hero {
min-height: 92vh !important;
}
.dc-hero::before {
content: "";
position: absolute;
inset: 0;
background: var(--dc-grad-hero);
z-index: 1;
pointer-events: none;
}
.dc-hero > .elementor-container {
position: relative; z-index: 2;
}
.dc-hero .dc-hero-inner {
display: flex;
justify-content: center;
}
.dc-hero .dc-hero-side { display: none !important; }
.dc-hero .dc-hero-content {
max-width: 820px !important;
text-align: center !important;
}
.dc-hero .elementor-widget-trx_sc_title {
text-align: center !important;
}
.dc-hero .sc_align_left { text-align: center !important; }
.dc-hero-eyebrow .sc_item_title_text,
.dc-hero-title .sc_item_title_text {
color: #fff !important;
text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.dc-hero-title h2,
.dc-hero-title .sc_item_title_text {
font-family: var(--dc-ff-display) !important;
font-size: clamp(2.6rem, 5vw, 4.4rem) !important;
font-weight: 400 !important;
letter-spacing: 0.01em !important;
line-height: 1.05 !important;
white-space: nowrap;
margin: 0.2em 0 0.5em !important;
color: #fff !important;
}
@media (max-width: 540px) {
.dc-hero-title h2,
.dc-hero-title .sc_item_title_text {
font-size: clamp(2.2rem, 10vw, 3.2rem) !important;
}
}
/* Hero CTA button */
.dc-hero-cta .elementor-button {
background: var(--dc-grad-red) !important;
color: #fff !important;
padding: 22px 52px !important;
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
border-radius: var(--dc-r-md) !important;
border: none !important;
box-shadow: 0 12px 36px rgba(225,29,46,.45), 0 0 0 0 rgba(225,29,46,.3) !important;
transition: all var(--dc-t) !important;
position: relative;
overflow: hidden;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
.dc-hero-cta .elementor-button:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(225,29,46,.6), 0 0 0 4px rgba(225,29,46,.18) !important;
}
.dc-hero-cta .elementor-button .elementor-button-text { display: inline !important; }
.dc-hero-cta .elementor-button::after {
content: "\2192";
display: inline-block;
font-family: var(--dc-ff-body) !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 1;
transition: transform var(--dc-t-fast);
flex-shrink: 0;
}
.dc-hero-cta .elementor-button:hover::after { transform: translateX(5px); }
/* Romania logo in hero */
.dc-hero .elementor-widget-image img {
max-width: 110px !important;
opacity: 0.85;
margin: 24px auto 0 !important;
display: block;
}
.dc-hero > .elementor-shape { opacity: 0.35; }
/* Trust badge row — hero stats box (rating / booked / cancellation / instant).
Injected as an HTML widget via add-trust-row.php immediately below the
Book Your Tickets button. */
.dc-hero-cta { position: relative; }
.dc-hero-trust {
margin-top: 28px;
}
.dc-hero-trust .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.dc-trust-row {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 14px;
margin: 0 auto;
padding: 12px 22px;
background: rgba(15, 18, 25, 0.55);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
max-width: 760px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.dc-trust-row .dc-trust-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--dc-ff-body);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--dc-text-soft);
white-space: nowrap;
line-height: 1;
}
.dc-trust-row .dc-trust-item strong { color: var(--dc-text); font-weight: 700; }
.dc-trust-row .dc-trust-item .dc-trust-ico { width: 14px; height: 14px; flex: none; display: inline-block; }
.dc-trust-row .dc-trust-item.is-rating .dc-trust-ico { color: var(--dc-gold-strong); }
.dc-trust-row .dc-trust-item.is-check .dc-trust-ico { color: #4ADE80; }
.dc-trust-row .dc-trust-item.is-bolt .dc-trust-ico { color: var(--dc-gold-strong); }
.dc-trust-row .dc-trust-item.is-users .dc-trust-ico { color: var(--dc-text-soft); }
.dc-trust-row .dc-trust-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.16); }
@media (max-width: 560px) {
.dc-trust-row { gap: 8px 12px; max-width: 100%; }
.dc-trust-row .dc-trust-item { font-size: 12px; }
.dc-trust-row .dc-trust-sep { display: none; }
}
/* =============================================================================
8. BOOKING SECTION
============================================================================= */
.dc-booking-section {
background: linear-gradient(180deg, var(--dc-bg) 0%, var(--dc-bg-raised) 100%) !important;
}
.dc-booking-section .elementor-heading-title {
font-size: clamp(2rem, 3vw, 2.8rem) !important;
margin-bottom: 12px !important;
text-align: center !important;
}
.dc-booking-section h5,
.dc-booking-section .elementor-widget-text-editor p {
color: var(--dc-text-muted) !important;
text-align: center !important;
font-size: 16px !important;
line-height: 1.7 !important;
max-width: 640px;
margin: 0 auto 28px !important;
}
.dc-booking-section .elementor-col-50:nth-child(2) {
padding: 32px !important;
background: var(--dc-bg-card);
border: 1px solid var(--dc-border);
border-radius: var(--dc-r-lg);
box-shadow: var(--dc-sh);
}
.dc-booking-section .elementor-col-50:nth-child(2) h2,
.dc-booking-section .elementor-col-50:nth-child(2) h3 {
font-size: 18px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--dc-gold) !important;
font-family: var(--dc-ff-body) !important;
font-weight: 700 !important;
margin-top: 24px !important;
padding-top: 24px !important;
border-top: 1px solid var(--dc-border);
}
.dc-booking-section .elementor-col-50:nth-child(2) > .elementor-widget-wrap > *:first-child h2,
.dc-booking-section .elementor-col-50:nth-child(2) > .elementor-widget-wrap > *:first-child h3 {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
/* =============================================================================
9. LATEPOINT BOOKING FORM — Dark theme override
============================================================================= */
.latepoint-w,
.latepoint-booking-form-element,
.latepoint-form-w,
.latepoint-form-w form,
.latepoint-heading-w,
.latepoint-side-panel {
background: transparent !important;
color: var(--dc-text-soft) !important;
}
.latepoint-w.latepoint-inline-form {
margin: 0 !important;
box-shadow: none !important;
}
.latepoint-w.latepoint-inline-form .latepoint-booking-form-element {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border);
border-radius: var(--dc-r-lg) !important;
box-shadow: var(--dc-sh-md) !important;
overflow: hidden;
}
.latepoint-form-w { background: transparent !important; }
.latepoint-heading-w {
border-bottom: 1px solid var(--dc-border) !important;
background: rgba(255,255,255,0.03) !important;
padding: 18px 24px !important;
}
.latepoint-heading-w h3,
.latepoint-heading-w .latepoint-lightbox-summary-trigger {
color: var(--dc-text) !important;
font-family: var(--dc-ff-display) !important;
font-size: 22px !important;
font-weight: 600 !important;
}
/* Warning / recommendation strip */
.latepoint-w .latepoint-step-content-text-left p,
.latepoint-step-content-text-left p {
background: linear-gradient(90deg, rgba(231,194,116,0.14) 0%, rgba(231,194,116,0.04) 100%) !important;
border: 1px solid rgba(231,194,116,0.30) !important;
border-left: 3px solid var(--dc-gold-strong) !important;
color: var(--dc-text) !important;
padding: 14px 18px 14px 48px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
border-radius: var(--dc-r) !important;
margin-bottom: 22px !important;
position: relative;
}
.latepoint-w .latepoint-step-content-text-left p::before,
.latepoint-step-content-text-left p::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
border-radius: 50%;
background: radial-gradient(circle, var(--dc-gold-strong) 0%, var(--dc-gold) 100%);
box-shadow: 0 0 0 3px rgba(231,194,116,0.18);
}
.latepoint-w .latepoint-step-content-text-left p::after,
.latepoint-step-content-text-left p::after {
content: "!";
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
color: #0B0E13;
font-family: var(--dc-ff-body);
font-size: 14px;
font-weight: 900;
line-height: 1;
}
/* Service (ticket pack) cards */
.latepoint-booking-form-element .os-items .os-item .os-item-i {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-md) !important;
padding: 14px 16px !important;
color: var(--dc-text-soft) !important;
transition: all var(--dc-t) !important;
position: relative;
}
.latepoint-booking-form-element .os-items .os-item .os-item-i:hover {
border-color: var(--dc-gold) !important;
background: var(--dc-bg-card-hover) !important;
box-shadow: 0 0 0 1px var(--dc-gold), 0 8px 24px rgba(212,168,83,.18) !important;
transform: translateY(-1px);
}
/* Hide pseudo-element checkbox square on multiselect ticket cards */
.latepoint-booking-form-element .os-items .os-item.os-allow-multiselect .os-item-i:before { display: none !important; }
/* Ticket PNG icons — invert + tint gold so they're visible on dark */
.latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-img-w {
flex: 0 0 52px !important;
height: 52px !important;
width: 52px !important;
margin-right: 16px !important;
border-radius: 12px !important;
background-color: rgba(231,194,116,0.10) !important;
border: 1px solid rgba(231,194,116,0.22) !important;
background-size: 28px 28px !important;
filter: brightness(0) saturate(100%) invert(80%) sepia(35%) saturate(520%) hue-rotate(358deg) brightness(96%) contrast(92%);
transition: all var(--dc-t) !important;
}
.latepoint-booking-form-element .os-items .os-item .os-item-i:hover .os-item-img-w {
background-color: rgba(231,194,116,0.18) !important;
border-color: rgba(231,194,116,0.45) !important;
transform: scale(1.04);
}
.latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-name {
color: var(--dc-text) !important;
font-size: 15px !important;
font-weight: 700 !important;
font-family: var(--dc-ff-body) !important;
letter-spacing: 0.02em !important;
text-transform: uppercase;
}
.latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-desc {
color: var(--dc-text-muted) !important;
font-size: 12.5px !important;
margin-top: 4px !important;
text-transform: none;
font-weight: 400;
}
.latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-price-w {
border-left: 1px solid var(--dc-border-strong) !important;
padding-left: 16px !important;
margin-left: 10px !important;
}
.latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-price {
color: var(--dc-gold-strong) !important;
font-family: var(--dc-ff-body) !important;
font-weight: 800 !important;
font-size: 20px !important;
}
.latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-price-label {
color: var(--dc-text-dim) !important;
font-size: 10px !important;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600 !important;
margin-top: 2px !important;
}
.latepoint-btn, .latepoint-btn-primary {
background: var(--dc-grad-red) !important;
color: #fff !important;
padding: 14px 24px !important;
border-radius: var(--dc-r) !important;
font-family: var(--dc-ff-body) !important;
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
transition: all var(--dc-t-fast) !important;
}
.latepoint-btn:hover, .latepoint-btn-primary:hover {
background: var(--dc-red-hover) !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(225,29,46,.35);
}
/* =============================================================================
10. VISIT THE CASTLE — gallery + journey list
============================================================================= */
.dc-visit-gallery {
background: var(--dc-bg-raised) !important;
}
.dc-visit-gallery .elementor-widget-image-gallery .gallery-item {
overflow: hidden;
border-radius: var(--dc-r-md);
transition: transform var(--dc-t);
}
.dc-visit-gallery .elementor-widget-image-gallery .gallery-item:hover { transform: scale(1.03); }
.dc-visit-gallery .elementor-widget-image-gallery img {
border-radius: var(--dc-r-md) !important;
transition: transform var(--dc-t), filter var(--dc-t);
}
.dc-visit-gallery .elementor-widget-image-gallery img:hover {
transform: scale(1.06);
filter: brightness(1.08);
}
.dc-visit-gallery .elementor-col-50:last-child .elementor-widget-text-editor {
font-size: 15.5px;
line-height: 1.75;
}
/* =============================================================================
11. 1 CASTLE, 2 LEGENDS — Poster-style cards (Vlad + Dracula)
Styled via semantic classes: dc-info-section (heading area),
dc-legends (grid container), dc-legend-card (wrapper),
dc-legend-image / dc-legend-body (inner regions), dc-legacy-divider (hidden)
============================================================================= */
/* Use elementor-element.dc-info-section (2 classes) to match Elementor's
own specificity for inline padding rules — otherwise its per-post CSS
keeps its ~80px default and stacks visually with the next section. */
.elementor-element.dc-info-section,
section.elementor-section.dc-info-section {
background: transparent !important;
position: relative;
padding-top: 16px !important;
padding-bottom: 0 !important;
}
.dc-info-section::before {
content: "";
display: none !important;
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 0%, rgba(225,29,46,0.07) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(212,168,83,0.05) 0%, transparent 50%);
pointer-events: none;
}
.dc-info-section h1,
.dc-info-section h2,
.dc-info-section .elementor-heading-title {
text-align: center;
font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
font-family: var(--dc-ff-display) !important;
}
.dc-info-section h1::before {
content: "";
display: block;
width: 80px; height: 2px;
background: linear-gradient(90deg, transparent, var(--dc-gold), transparent);
margin: 18px auto 0;
}
/* (Numbered section eyebrows removed — per client feedback numbers belong
only to the hero trust row, not to every section heading.) */
/* Two-column grid container */
.dc-legends > .e-con-inner {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 32px;
max-width: var(--dc-container);
margin: 0 auto;
padding: 0 var(--dc-gutter);
width: 100% !important;
}
@media (max-width: 900px) {
.dc-legends > .e-con-inner { grid-template-columns: 1fr; gap: 28px; }
}
/* Each legend card */
.dc-legend-card {
display: flex !important;
flex-direction: column !important;
position: relative;
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-lg) !important;
overflow: hidden !important;
padding: 0 !important;
width: 100% !important;
transition: transform var(--dc-t), box-shadow var(--dc-t), border-color var(--dc-t);
box-shadow: var(--dc-sh);
}
.dc-legend-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 4;
pointer-events: none;
}
.dc-legend-card.dc-legend-historic::before {
background: linear-gradient(90deg, #E11D2E 0%, #9C0A19 100%);
}
.dc-legend-card.dc-legend-mythic::before {
background: linear-gradient(90deg, var(--dc-gold-strong) 0%, var(--dc-gold) 100%);
}
.dc-legend-card:hover {
transform: translateY(-6px);
box-shadow: var(--dc-sh-lg);
border-color: var(--dc-border-strong);
}
.dc-legend-card.dc-legend-historic:hover { border-color: rgba(225,29,46,0.45); }
.dc-legend-card.dc-legend-mythic:hover { border-color: rgba(231,194,116,0.45); }
/* Hero image inside legend card */
.dc-legend-card .dc-legend-image {
order: 1;
margin: 0 !important;
position: relative;
overflow: hidden;
aspect-ratio: 4/5;
min-height: 380px;
}
.dc-legend-card .dc-legend-image .elementor-widget-container { height: 100%; }
.dc-legend-card .dc-legend-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center 15%;
filter: brightness(0.88) contrast(1.08) saturate(1.05);
transition: transform var(--dc-t-slow), filter var(--dc-t-slow) !important;
display: block;
}
.dc-legend-card:hover .dc-legend-image img {
transform: scale(1.04);
filter: brightness(1) contrast(1.12) saturate(1.1);
}
.dc-legend-card .dc-legend-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(17,21,31,0.15) 0%, rgba(17,21,31,0.0) 30%, rgba(17,21,31,0.65) 70%, var(--dc-bg-card) 100%);
pointer-events: none;
}
/* Chips floating at image top */
.dc-legend-card .dc-legend-image::before {
position: absolute;
top: 20px; left: 20px;
z-index: 3;
padding: 6px 12px;
border-radius: 999px;
font-family: var(--dc-ff-heading);
font-size: 10.5px;
letter-spacing: 0.22em;
font-weight: 600;
text-transform: uppercase;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.dc-legend-card.dc-legend-historic .dc-legend-image::before {
content: "Historical \00B7 1431 \2013 1476";
background: rgba(225,29,46,0.85);
color: #fff;
border: 1px solid rgba(255,255,255,0.15);
}
.dc-legend-card.dc-legend-mythic .dc-legend-image::before {
content: "Fictional \00B7 Since 1897";
background: rgba(231,194,116,0.85);
color: #1A1F29;
border: 1px solid rgba(255,255,255,0.15);
}
/* Name plate pulled over image */
.dc-legend-card .dc-legend-name {
order: 2;
padding: 0 32px !important;
margin: -90px 0 0 0 !important;
text-align: left !important;
position: relative;
z-index: 2;
}
.dc-legend-card .dc-legend-name h3 {
font-family: var(--dc-ff-display) !important;
font-size: clamp(2.2rem, 3.4vw, 3rem) !important;
font-weight: 400 !important;
color: #fff !important;
text-transform: none !important;
letter-spacing: 0.005em !important;
line-height: 1.05 !important;
margin: 0 !important;
text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}
.dc-legend-card .dc-legend-name::before {
display: block;
font-family: var(--dc-ff-heading) !important;
font-size: 10.5px;
letter-spacing: 0.30em;
text-transform: uppercase;
color: var(--dc-gold-strong);
font-weight: 700;
margin-bottom: 8px;
text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.dc-legend-card.dc-legend-historic .dc-legend-name::before {
content: "The Historical Prince";
}
.dc-legend-card.dc-legend-mythic .dc-legend-name::before {
content: "The Immortal Legend";
}
.dc-legend-card .dc-legend-name h3::after {
content: "";
display: block;
width: 44px; height: 2px;
background: var(--dc-gold-strong);
margin: 14px 0 0;
border-radius: 1px;
}
/* Body area of legends cards */
.dc-legend-card .dc-legend-body {
order: 3;
padding: 22px 32px 28px !important;
margin: 0 !important;
flex: 1;
display: flex;
flex-direction: column;
}
.dc-legend-card .dc-legend-body p {
color: var(--dc-text-soft) !important;
font-size: 14.5px !important;
line-height: 1.72 !important;
margin: 0 0 14px !important;
}
.dc-legend-card .dc-legend-body p:first-of-type::first-letter {
font-family: var(--dc-ff-display);
font-size: 2.8em;
line-height: 0.9;
color: var(--dc-gold-strong);
float: left;
padding: 6px 10px 0 0;
font-weight: 400;
}
.dc-legend-card .dc-legend-body p span,
.dc-legend-card .dc-legend-body p font {
color: inherit !important;
}
.dc-legend-card .dc-legend-body p b,
.dc-legend-card .dc-legend-body p strong {
color: var(--dc-text) !important;
font-weight: 700 !important;
}
/* Second paragraph — pull quote */
.dc-legend-card .dc-legend-body p:nth-of-type(2) {
position: relative;
padding: 14px 18px !important;
margin: 6px 0 16px !important;
background: rgba(255,255,255,0.025);
border-left: 3px solid var(--dc-gold);
border-radius: 0 8px 8px 0;
font-family: var(--dc-ff-serif);
font-style: italic;
font-size: 14px !important;
line-height: 1.65 !important;
color: var(--dc-text) !important;
}
.dc-legend-card.dc-legend-historic .dc-legend-body p:nth-of-type(2) {
border-left-color: var(--dc-red);
}
/* (Removed the CSS-only "Discover his story" pseudo-element — it was not
clickable. The whole card is the semantic unit; no redundant CTA. The
legacy divider is kept hidden to match the reference design.) */
.dc-legend-card .dc-legacy-divider { display: none !important; }
@media (max-width: 600px) {
.dc-legend-card .dc-legend-image { aspect-ratio: 4/4.5; min-height: 320px; }
.dc-legend-card .dc-legend-name {
margin-top: -72px !important;
padding: 0 22px !important;
}
.dc-legend-card .dc-legend-body {
padding: 20px 22px 26px !important;
}
}
/* =============================================================================
12. BLOG POSTS — Editorial magazine cards
============================================================================= */
.dc-info-content {
position: relative;
padding-top: 4px !important;
padding-bottom: 20px !important;
background: transparent !important;
}
.dc-info-content::after {
content: "";
display: block;
height: 1px;
max-width: var(--dc-container);
margin: 40px auto 0;
background: linear-gradient(90deg, transparent 0%, var(--dc-border-strong) 50%, transparent 100%);
}
.dc-info-content .sc_item_title_text {
font-family: var(--dc-ff-display) !important;
font-size: clamp(2rem, 3.4vw, 3rem) !important;
}
.trx_sc_blogger .post_item,
.elementor-widget-trx_sc_blogger .post_item {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-lg) !important;
overflow: hidden !important;
transition: transform var(--dc-t), border-color var(--dc-t), box-shadow var(--dc-t) !important;
margin-bottom: 0 !important;
position: relative;
display: flex !important;
flex-direction: column !important;
height: 100%;
width: 100% !important;
}
.post_layout_plain .post_featured,
.trx_sc_blogger .post_layout_plain .post_featured {
width: 100% !important;
flex-shrink: 1 !important;
}
.post_layout_plain .post_featured + .post_content_wrap,
.trx_sc_blogger .post_layout_plain .post_featured + .post_content_wrap {
width: 100% !important;
}
.trx_sc_blogger .post_content_wrap,
.elementor-widget-trx_sc_blogger .post_content_wrap {
display: flex;
flex-direction: column;
flex: 1;
}
.trx_sc_blogger .post_item:hover,
.elementor-widget-trx_sc_blogger .post_item:hover {
transform: translateY(-4px);
border-color: var(--dc-gold);
box-shadow: var(--dc-sh-lg);
}
.trx_sc_blogger .post_featured,
.elementor-widget-trx_sc_blogger .post_featured {
overflow: hidden !important;
margin: 0 !important;
aspect-ratio: 16/9;
position: relative;
}
.trx_sc_blogger .post_featured img,
.elementor-widget-trx_sc_blogger .post_featured img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform var(--dc-t-slow);
}
.trx_sc_blogger .post_item:hover .post_featured img,
.elementor-widget-trx_sc_blogger .post_item:hover .post_featured img { transform: scale(1.07); }
.trx_sc_blogger .post_featured .view,
.elementor-widget-trx_sc_blogger .post_featured .view { display: none !important; }
.trx_sc_blogger .post_header,
.elementor-widget-trx_sc_blogger .post_header {
padding: 22px 26px 10px !important;
position: relative;
}
.trx_sc_blogger .post_header::before,
.elementor-widget-trx_sc_blogger .post_header::before {
content: "";
display: inline-block;
margin-bottom: 10px;
padding: 5px 11px;
border-radius: 4px;
background: rgba(231,194,116,0.12);
border: 1px solid rgba(231,194,116,0.38);
color: var(--dc-gold-strong);
font-family: var(--dc-ff-heading);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}
/* Fake category/time label ONLY in the homepage blog widget.
Previously unscoped, which made this pseudo-content bleed onto every
category/archive card too, duplicating our real dc-card-meta row. */
.trx_sc_blogger .column-1_2:nth-of-type(1) .post_header::before,
.elementor-widget-trx_sc_blogger .column-1_2:nth-of-type(1) .post_header::before {
content: "Legends \00B7 5 min read";
}
.trx_sc_blogger .column-1_2:nth-of-type(2) .post_header::before,
.elementor-widget-trx_sc_blogger .column-1_2:nth-of-type(2) .post_header::before {
content: "History \00B7 6 min read";
background: rgba(225,29,46,0.14);
border-color: rgba(225,29,46,0.42);
color: #ff8a95;
}
/* Defensive: ensure non-blogger post_headers don't display the pseudo. */
body.archive .post_header::before,
body.category .post_header::before,
body.blog_mode_blog .posts_container > .column-1_2 > .post_item .post_header::before,
body.blog_mode_home .posts_container > .column-1_2 > .post_item .post_header::before,
body.tag .post_header::before,
body.search .post_header::before { content: none !important; display: none !important; }
.trx_sc_blogger .post_title,
.elementor-widget-trx_sc_blogger .post_title {
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.32 !important;
margin: 0 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
}
.trx_sc_blogger .post_title a,
.elementor-widget-trx_sc_blogger .post_title a {
color: var(--dc-text) !important;
text-decoration: none !important;
font-family: var(--dc-ff-serif) !important;
font-style: normal;
transition: color var(--dc-t-fast) !important;
}
.trx_sc_blogger .post_item:hover .post_title a,
.elementor-widget-trx_sc_blogger .post_item:hover .post_title a { color: var(--dc-gold-strong) !important; }
.trx_sc_blogger .post_content,
.elementor-widget-trx_sc_blogger .post_content {
padding: 0 26px 24px !important;
color: var(--dc-text-soft) !important;
font-size: 14px !important;
line-height: 1.65 !important;
flex: 1;
display: flex;
flex-direction: column;
}
.trx_sc_blogger .post_content_inner,
.elementor-widget-trx_sc_blogger .post_content_inner {
flex: 1;
margin-bottom: 12px;
}
/* Same pill as category listings (dc-card-readmore). Ozeum `.post_item .more-link`
loads after this file and decorates with :before line + :after fontello in a
circle — we must clear both; category path uses JS + .dc-card-readmore reset. */
.trx_sc_blogger .post_content a.more-link,
.elementor-widget-trx_sc_blogger .post_content a.more-link {
position: relative !important;
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 10px !important;
color: var(--dc-text) !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid var(--dc-border) !important;
font-family: var(--dc-ff-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 10px 16px 10px 18px !important;
border-radius: 999px !important;
margin-top: 14px !important;
line-height: 1.2 !important;
min-height: 0 !important;
height: auto !important;
max-width: 100% !important;
width: max-content !important;
box-sizing: border-box !important;
-webkit-appearance: none !important;
white-space: nowrap !important;
transition: gap var(--dc-t-fast), color var(--dc-t-fast), background var(--dc-t-fast), border-color var(--dc-t-fast) !important;
text-decoration: none !important;
align-self: flex-start !important;
vertical-align: middle !important;
}
.trx_sc_blogger .post_content a.more-link::before,
.elementor-widget-trx_sc_blogger .post_content a.more-link::before {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
position: static !important;
transform: none !important;
}
.trx_sc_blogger .post_content a.more-link::after,
.elementor-widget-trx_sc_blogger .post_content a.more-link::after {
position: static !important;
right: auto !important;
left: auto !important;
top: auto !important;
bottom: auto !important;
content: "" !important;
flex: 0 0 14px !important;
width: 14px !important;
min-width: 14px !important;
height: 14px !important;
margin: 0 0 0 2px !important;
padding: 0 !important;
line-height: 0 !important;
border: none !important;
border-radius: 0 !important;
font-size: 0 !important;
font-family: var(--dc-ff-body) !important;
display: block !important;
letter-spacing: 0 !important;
text-align: left !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
transform: none !important;
-webkit-transform: none !important;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain !important;
transition: transform var(--dc-t-fast) !important;
}
.trx_sc_blogger .post_content a.more-link:hover,
.elementor-widget-trx_sc_blogger .post_content a.more-link:hover {
color: var(--dc-text) !important;
background: rgba(231, 194, 116, 0.12) !important;
border-color: var(--dc-gold) !important;
gap: 14px !important;
}
.trx_sc_blogger .post_content a.more-link:hover::after,
.elementor-widget-trx_sc_blogger .post_content a.more-link:hover::after {
transform: translateX(2px) !important;
-webkit-transform: translateX(2px) !important;
}
.trx_sc_blogger .post_content p,
.elementor-widget-trx_sc_blogger .post_content p {
margin: 0 !important;
padding-top: 8px;
}
.trx_sc_blogger .posts_container,
.elementor-widget-trx_sc_blogger .posts_container {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
margin-right: 0 !important;
}
.trx_sc_blogger .posts_container > .column-1_2,
.elementor-widget-trx_sc_blogger .posts_container > .column-1_2 {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 auto !important;
float: none !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
@media (max-width: 767px) {
.trx_sc_blogger .posts_container,
.elementor-widget-trx_sc_blogger .posts_container {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
}
/* =============================================================================
13. FAQ ACCORDION
============================================================================= */
.dc-faq-title {
margin-top: 56px !important;
margin-bottom: 28px !important;
}
.dc-faq-title h2.elementor-heading-title {
color: var(--dc-text) !important;
}
.elementor-widget-accordion .elementor-accordion-item {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-md) !important;
margin-bottom: 12px !important;
overflow: hidden;
transition: border-color var(--dc-t-fast);
}
.elementor-widget-accordion .elementor-accordion-item:hover {
border-color: var(--dc-border-strong) !important;
}
.elementor-widget-accordion .elementor-tab-title {
padding: 20px 24px !important;
background: transparent !important;
border: none !important;
color: var(--dc-text) !important;
font-family: var(--dc-ff-body) !important;
font-weight: 600 !important;
font-size: 16px !important;
cursor: pointer;
transition: background var(--dc-t-fast) !important;
}
.elementor-widget-accordion .elementor-tab-title a {
color: inherit !important;
text-decoration: none !important;
}
.elementor-widget-accordion .elementor-tab-title:hover {
background: rgba(255,255,255,0.03) !important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active {
color: var(--dc-gold) !important;
border-bottom: 1px solid var(--dc-border) !important;
}
.elementor-widget-accordion .elementor-accordion-icon {
color: var(--dc-text-muted) !important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
color: var(--dc-gold) !important;
}
.elementor-widget-accordion .elementor-accordion-icon svg {
width: 14px; height: 14px;
fill: currentColor !important;
transition: transform var(--dc-t);
}
.elementor-widget-accordion .elementor-accordion-icon i {
color: inherit !important;
}
.elementor-widget-accordion .elementor-tab-content {
padding: 18px 24px 22px !important;
color: var(--dc-text-soft) !important;
font-size: 15px !important;
line-height: 1.7 !important;
border-top: none !important;
background: rgba(0,0,0,0.15) !important;
}
/* =============================================================================
14. HOW TO REACH — Tabs
============================================================================= */
.elementor-widget-tabs .elementor-tabs-wrapper {
border-bottom: 1px solid var(--dc-border) !important;
gap: 4px;
}
.elementor-widget-tabs .elementor-tab-title {
padding: 14px 24px !important;
background: transparent !important;
border: none !important;
color: var(--dc-text-muted) !important;
font-family: var(--dc-ff-body) !important;
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
position: relative;
transition: color var(--dc-t-fast);
cursor: pointer;
}
.elementor-widget-tabs .elementor-tab-title:hover { color: var(--dc-text) !important; }
.elementor-widget-tabs .elementor-tab-title.elementor-active {
color: var(--dc-gold) !important;
}
.elementor-widget-tabs .elementor-tab-title.elementor-active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--dc-gold);
}
.elementor-widget-tabs .elementor-tab-content {
padding: 28px 24px !important;
background: var(--dc-bg-card);
border: 1px solid var(--dc-border) !important;
border-top: none !important;
border-radius: 0 0 var(--dc-r-md) var(--dc-r-md);
color: var(--dc-text-soft) !important;
font-size: 15px !important;
line-height: 1.75 !important;
}
/* =============================================================================
15. CONTACT FORM
============================================================================= */
.trx_sc_form form input,
.trx_sc_form form textarea,
.trx_sc_form form select,
.wpcf7 form input,
.wpcf7 form textarea,
.wpcf7 form select {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
color: var(--dc-text) !important;
padding: 14px 16px !important;
border-radius: var(--dc-r) !important;
font-family: var(--dc-ff-body) !important;
font-size: 15px !important;
transition: all var(--dc-t-fast) !important;
}
.trx_sc_form form input:focus,
.trx_sc_form form textarea:focus,
.wpcf7 form input:focus,
.wpcf7 form textarea:focus {
border-color: var(--dc-gold) !important;
background: var(--dc-bg-raised) !important;
box-shadow: 0 0 0 3px var(--dc-gold-soft) !important;
outline: none;
}
.trx_sc_form form input[type=submit],
.trx_sc_form form button[type=submit],
.wpcf7 form input[type=submit] {
background: var(--dc-grad-red) !important;
color: #fff !important;
border: none !important;
padding: 16px 32px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
cursor: pointer !important;
box-shadow: 0 8px 20px rgba(225,29,46,.3) !important;
}
.trx_sc_form form input[type=submit]:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(225,29,46,.45) !important;
}
/* =============================================================================
16. UTILITIES — dividers, scrollbar, selection
============================================================================= */
.elementor-widget-divider { opacity: 0.5; }
.elementor-divider-separator {
background-color: var(--dc-gold) !important;
max-width: 60px;
height: 2px !important;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dc-bg); }
::-webkit-scrollbar-thumb { background: var(--dc-bg-card-hover); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--dc-border-strong); }
::selection { background: var(--dc-red); color: #fff; }
/* =============================================================================
17. RESPONSIVE — content section overrides
============================================================================= */
@media (max-width: 767px) {
.page_content_wrap .elementor-section.elementor-top-section:not(.elementor-section-stretched) {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
h1, h1 .elementor-heading-title { font-size: 2.2rem !important; }
h2, h2 .elementor-heading-title { font-size: 1.7rem !important; }
.dc-hero { min-height: 70vh !important; }
.dc-hero-title h2 { font-size: 2.6rem !important; }
.dc-hero-cta .elementor-button { padding: 16px 30px !important; font-size: 14.5px !important; gap: 8px !important; }
}
@media (max-width: 480px) {
.dc-booking-section .elementor-col-50:nth-child(2) { padding: 20px !important; }
.trx_sc_blogger .post_header, .trx_sc_blogger .post_content { padding-left: 18px !important; padding-right: 18px !important; }
.dc-hero-title h2 { font-size: 2.1rem !important; }
}
/* =============================================================================
18. CATEGORY / ARCHIVE PAGES
============================================================================= */
/* Content + sidebar area */
body.blog_mode_blog .page_content_wrap,
body.blog_mode_home .page_content_wrap,
body.dc-listing-page .page_content_wrap,
.archive .page_content_wrap {
background: var(--dc-bg) !important;
}
body.blog_mode_blog .content_wrap,
body.blog_mode_home .content_wrap,
body.dc-listing-page .content_wrap,
.archive .content_wrap {
max-width: var(--dc-container) !important;
margin: 0 auto;
padding-left: var(--dc-gutter) !important;
padding-right: var(--dc-gutter) !important;
}
/* Post items in category listing (legacy Ozeum body classes + unified dc-listing) */
body.blog_mode_blog .post_item,
body.blog_mode_home .post_item,
body.dc-listing-page .post_item,
.archive .post_item {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-lg) !important;
overflow: hidden;
margin-bottom: 28px !important;
transition: transform var(--dc-t), box-shadow var(--dc-t), border-color var(--dc-t);
}
body.blog_mode_blog .post_item:hover,
body.blog_mode_home .post_item:hover,
body.dc-listing-page .post_item:hover,
.archive .post_item:hover {
transform: translateY(-3px);
border-color: var(--dc-gold) !important;
box-shadow: var(--dc-sh-md);
}
body.blog_mode_blog .post_item .post_featured img,
body.blog_mode_home .post_item .post_featured img,
body.dc-listing-page .post_item .post_featured img,
.archive .post_item .post_featured img {
border-radius: 0 !important;
transition: transform var(--dc-t-slow);
}
body.blog_mode_blog .post_item:hover .post_featured img,
body.blog_mode_home .post_item:hover .post_featured img,
body.dc-listing-page .post_item:hover .post_featured img,
.archive .post_item:hover .post_featured img {
transform: scale(1.04);
}
body.blog_mode_blog .post_item .post_header,
body.blog_mode_home .post_item .post_header,
body.dc-listing-page .post_item .post_header,
.archive .post_item .post_header {
padding: 20px 24px 8px !important;
}
body.blog_mode_blog .post_item .post_title,
body.blog_mode_home .post_item .post_title,
body.dc-listing-page .post_item .post_title,
.archive .post_item .post_title {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-transform: none !important;
}
body.blog_mode_blog .post_item .post_title a,
body.blog_mode_home .post_item .post_title a,
body.dc-listing-page .post_item .post_title a,
.archive .post_item .post_title a {
color: var(--dc-text) !important;
font-family: var(--dc-ff-serif) !important;
text-decoration: none !important;
transition: color var(--dc-t-fast);
}
body.blog_mode_blog .post_item:hover .post_title a,
body.blog_mode_home .post_item:hover .post_title a,
body.dc-listing-page .post_item:hover .post_title a,
.archive .post_item:hover .post_title a {
color: var(--dc-gold-strong) !important;
}
body.blog_mode_blog .post_item .post_content,
body.blog_mode_home .post_item .post_content,
body.dc-listing-page .post_item .post_content,
.archive .post_item .post_content {
padding: 0 24px 20px !important;
color: var(--dc-text-soft) !important;
font-size: 14.5px !important;
line-height: 1.65 !important;
}
body.blog_mode_blog .post_item .more-link,
body.blog_mode_home .post_item .more-link,
body.dc-listing-page .post_item .more-link,
.archive .post_item .more-link {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
color: var(--dc-text) !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid var(--dc-border) !important;
font-family: var(--dc-ff-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-decoration: none !important;
padding: 10px 18px !important;
border-radius: 999px !important;
transition: gap var(--dc-t-fast), color var(--dc-t-fast), background var(--dc-t-fast), border-color var(--dc-t-fast) !important;
width: auto !important;
align-self: flex-start !important;
}
body.blog_mode_blog .post_item .more-link::after,
body.blog_mode_home .post_item .more-link::after,
body.dc-listing-page .post_item .more-link::after,
.archive .post_item .more-link::after {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain !important;
transition: transform var(--dc-t-fast) !important;
font-size: 0 !important;
}
body.blog_mode_blog .post_item .more-link:hover::after,
body.blog_mode_home .post_item .more-link:hover::after,
body.dc-listing-page .post_item .more-link:hover::after,
.archive .post_item .more-link:hover::after {
transform: translateX(2px) !important;
}
body.blog_mode_blog .post_item .more-link:hover,
body.blog_mode_home .post_item .more-link:hover,
body.dc-listing-page .post_item .more-link:hover,
.archive .post_item .more-link:hover {
background: rgba(231, 194, 116, 0.12) !important;
border-color: var(--dc-gold) !important;
gap: 14px !important;
}
/* Sidebar — hidden on all post index views; full-width content + 3-up grid. */
body.archive .sidebar,
body.dc-listing-page .sidebar,
body.blog_mode_blog .sidebar,
body.blog_mode_home .sidebar,
body.category .sidebar,
body.tag .sidebar {
display: none !important;
}
body.archive .content,
body.dc-listing-page .content,
body.blog_mode_blog .content,
body.blog_mode_home .content,
body.category .content,
body.tag .content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
body.archive .content_wrap,
body.dc-listing-page .content_wrap,
body.blog_mode_blog .content_wrap,
body.blog_mode_home .content_wrap,
body.category .content_wrap,
body.tag .content_wrap {
max-width: var(--dc-container) !important;
padding-left: var(--dc-gutter) !important;
padding-right: var(--dc-gutter) !important;
}
/* 3-up grid for post listings on archive/category pages.
Ozeum wraps each post in .column-1_2 so we apply grid on container and
neutralise its inline column widths. */
body.archive .posts_container,
body.dc-listing-page .posts_container,
body.category .posts_container,
body.tag .posts_container {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 28px !important;
}
body.archive .posts_container > [class*="column-"],
body.dc-listing-page .posts_container > [class*="column-"],
body.category .posts_container > [class*="column-"],
body.tag .posts_container > [class*="column-"] {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.archive .posts_container .post_item,
body.dc-listing-page .posts_container .post_item,
body.category .posts_container .post_item,
body.tag .posts_container .post_item {
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: none !important;
background: var(--dc-surface) !important;
border: 1px solid var(--dc-border-strong) !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
border-radius: var(--dc-r-lg) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
transition: transform var(--dc-t-fast), border-color var(--dc-t-fast), box-shadow var(--dc-t-fast);
}
body.archive .posts_container .post_item:hover,
body.dc-listing-page .posts_container .post_item:hover,
body.category .posts_container .post_item:hover,
body.tag .posts_container .post_item:hover {
transform: translateY(-3px);
border-color: var(--dc-gold);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
/* Featured image — fixed aspect ratio, full card width */
body.archive .posts_container .post_item .post_featured,
body.dc-listing-page .posts_container .post_item .post_featured,
body.category .posts_container .post_item .post_featured,
body.tag .posts_container .post_item .post_featured {
width: 100% !important;
aspect-ratio: 16 / 10 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
float: none !important;
}
body.archive .posts_container .post_item .post_featured img,
body.dc-listing-page .posts_container .post_item .post_featured img,
body.category .posts_container .post_item .post_featured img,
body.tag .posts_container .post_item .post_featured img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform var(--dc-t-slow);
}
body.archive .posts_container .post_item:hover .post_featured img,
body.dc-listing-page .posts_container .post_item:hover .post_featured img,
body.category .posts_container .post_item:hover .post_featured img,
body.tag .posts_container .post_item:hover .post_featured img {
transform: scale(1.05);
}
/* Content area — readable padding + typography */
body.archive .posts_container .post_item .post_content,
body.dc-listing-page .posts_container .post_item .post_content,
body.category .posts_container .post_item .post_content,
body.tag .posts_container .post_item .post_content {
padding: 22px 22px 26px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
margin: 0 !important;
}
body.archive .posts_container .post_item .post_header,
body.dc-listing-page .posts_container .post_item .post_header,
body.category .posts_container .post_item .post_header,
body.tag .posts_container .post_item .post_header {
margin: 0 0 10px 0 !important;
}
body.archive .posts_container .post_item .post_title,
body.dc-listing-page .posts_container .post_item .post_title,
body.category .posts_container .post_item .post_title,
body.tag .posts_container .post_item .post_title {
font-family: var(--dc-ff-heading) !important;
font-size: 22px !important;
line-height: 1.25 !important;
margin: 0 0 6px 0 !important;
color: var(--dc-text) !important;
}
body.archive .posts_container .post_item .post_title a,
body.dc-listing-page .posts_container .post_item .post_title a,
body.category .posts_container .post_item .post_title a,
body.tag .posts_container .post_item .post_title a {
color: var(--dc-text) !important;
text-decoration: none !important;
}
body.archive .posts_container .post_item .post_title a:hover,
body.dc-listing-page .posts_container .post_item .post_title a:hover,
body.category .posts_container .post_item .post_title a:hover,
body.tag .posts_container .post_item .post_title a:hover {
color: var(--dc-gold) !important;
}
body.archive .posts_container .post_item .post_meta,
body.dc-listing-page .posts_container .post_item .post_meta,
body.category .posts_container .post_item .post_meta,
body.tag .posts_container .post_item .post_meta {
font-family: var(--dc-ff-body) !important;
font-size: 11px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--dc-gold-strong) !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.archive .posts_container .post_item .post_meta a,
body.dc-listing-page .posts_container .post_item .post_meta a,
body.category .posts_container .post_item .post_meta a,
body.tag .posts_container .post_item .post_meta a {
color: var(--dc-gold-strong) !important;
}
body.archive .posts_container .post_item .post_content_inner,
body.dc-listing-page .posts_container .post_item .post_content_inner,
body.category .posts_container .post_item .post_content_inner,
body.tag .posts_container .post_item .post_content_inner {
font-size: 14.5px !important;
line-height: 1.6 !important;
color: var(--dc-muted) !important;
flex: 1 1 auto !important;
}
body.archive .posts_container .post_item .more-link,
body.dc-listing-page .posts_container .post_item .more-link,
body.category .posts_container .post_item .more-link,
body.tag .posts_container .post_item .more-link {
margin-top: 14px !important;
align-self: flex-start !important;
}
/* Ozeum `skins/default/css/style.css` .post_item .more-link: huge right
padding, absolute :before (line) + :after (fontello) — that fights our
inline-flex + SVG. Kill theme pseudo and reset padding for listing pills. */
body.archive .posts_container .post_item a.more-link.dc-card-readmore,
body.dc-listing-page .posts_container .post_item a.more-link.dc-card-readmore,
body.category .posts_container .post_item a.more-link.dc-card-readmore,
body.tag .posts_container .post_item a.more-link.dc-card-readmore,
body.blog_mode_blog .post_item a.more-link.dc-card-readmore,
body.blog_mode_home .post_item a.more-link.dc-card-readmore {
position: relative !important;
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
padding: 10px 16px 10px 18px !important;
min-height: 0 !important;
height: auto !important;
line-height: 1.2 !important;
width: max-content !important;
max-width: 100% !important;
box-sizing: border-box !important;
-webkit-appearance: none !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
body.archive .posts_container .post_item a.more-link.dc-card-readmore::before,
body.dc-listing-page .posts_container .post_item a.more-link.dc-card-readmore::before,
body.category .posts_container .post_item a.more-link.dc-card-readmore::before,
body.tag .posts_container .post_item a.more-link.dc-card-readmore::before,
body.blog_mode_blog .post_item a.more-link.dc-card-readmore::before,
body.blog_mode_home .post_item a.more-link.dc-card-readmore::before {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
}
body.archive .posts_container .post_item a.more-link.dc-card-readmore::after,
body.dc-listing-page .posts_container .post_item a.more-link.dc-card-readmore::after,
body.category .posts_container .post_item a.more-link.dc-card-readmore::after,
body.tag .posts_container .post_item a.more-link.dc-card-readmore::after,
body.blog_mode_blog .post_item a.more-link.dc-card-readmore::after,
body.blog_mode_home .post_item a.more-link.dc-card-readmore::after {
position: static !important;
right: auto !important;
left: auto !important;
top: auto !important;
bottom: auto !important;
content: "" !important;
flex: 0 0 14px !important;
width: 14px !important;
min-width: 14px !important;
height: 14px !important;
margin: 0 0 0 2px !important;
padding: 0 !important;
line-height: 0 !important;
border: none !important;
border-radius: 0 !important;
font-size: 0 !important;
font-family: var(--dc-ff-body) !important;
display: block !important;
transform: none !important;
-webkit-transform: none !important;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain !important;
}
body.archive .posts_container .post_item a.more-link.dc-card-readmore:hover::after,
body.dc-listing-page .posts_container .post_item a.more-link.dc-card-readmore:hover::after,
body.category .posts_container .post_item a.more-link.dc-card-readmore:hover::after,
body.tag .posts_container .post_item a.more-link.dc-card-readmore:hover::after,
body.blog_mode_blog .post_item a.more-link.dc-card-readmore:hover::after,
body.blog_mode_home .post_item a.more-link.dc-card-readmore:hover::after {
transform: translateX(2px) !important;
-webkit-transform: translateX(2px) !important;
}
body.archive .posts_container .post_item a.more-link.dc-card-readmore .dc-card-readmore-label,
body.dc-listing-page .posts_container .post_item a.more-link.dc-card-readmore .dc-card-readmore-label,
body.category .posts_container .post_item a.more-link.dc-card-readmore .dc-card-readmore-label,
body.tag .posts_container .post_item a.more-link.dc-card-readmore .dc-card-readmore-label {
flex: 0 1 auto !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1.2 !important;
}
@media (max-width: 1024px) {
body.archive .posts_container,
body.dc-listing-page .posts_container,
body.category .posts_container,
body.tag .posts_container {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 22px !important;
}
}
@media (max-width: 640px) {
body.archive .posts_container,
body.dc-listing-page .posts_container,
body.category .posts_container,
body.tag .posts_container {
grid-template-columns: 1fr !important;
}
}
/* Sidebar styling — kept for single post view where it is still useful */
body.single .sidebar {
width: 320px !important;
max-width: 320px !important;
}
body.single .content {
width: calc(100% - 320px - 24px) !important;
}
@media (max-width: 1023px) {
body.single .sidebar,
body.single .content {
width: 100% !important;
max-width: 100% !important;
}
}
.sidebar_inner {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.sidebar_inner .widget {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-lg) !important;
padding: 24px !important;
margin-bottom: 24px !important;
overflow: hidden;
}
.sidebar_inner .widget:last-child { margin-bottom: 0 !important; }
.sidebar_inner .widget_title,
.sidebar_inner h5 {
font-family: var(--dc-ff-heading) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--dc-gold) !important;
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--dc-border) !important;
}
.sidebar_inner .widget a {
color: var(--dc-text-soft) !important;
text-decoration: none !important;
transition: color var(--dc-t-fast);
}
.sidebar_inner .widget a:hover {
color: var(--dc-gold) !important;
}
/* Categories widget — gold accent pills */
.sidebar_inner .widget_categories .cat-item,
.sidebar_inner .widget_archive li {
padding: 8px 0 !important;
border-bottom: 1px solid var(--dc-border) !important;
font-size: 14px !important;
display: flex !important;
align-items: center;
}
.sidebar_inner .widget_categories .cat-item:last-child,
.sidebar_inner .widget_archive li:last-child {
border-bottom: none !important;
}
.sidebar_inner .widget_categories .cat-item::before {
content: "";
display: inline-block;
width: 3px;
height: 14px;
background: var(--dc-gold);
border-radius: 2px;
margin-right: 10px;
flex-shrink: 0;
}
.sidebar_inner .widget_categories .cat-item a {
font-weight: 500 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
font-size: 13px !important;
}
/* Recent posts widget — card style */
.sidebar_inner .widget_recent_posts .post_item,
.sidebar_inner .widget_recent_entries li {
display: flex !important;
gap: 14px;
align-items: flex-start;
padding: 14px 0 !important;
border-bottom: 1px solid var(--dc-border) !important;
margin: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
.sidebar_inner .widget_recent_posts .post_item:first-child,
.sidebar_inner .widget_recent_entries li:first-child {
padding-top: 0 !important;
}
.sidebar_inner .widget_recent_posts .post_item:last-child,
.sidebar_inner .widget_recent_entries li:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
}
.sidebar_inner .widget_recent_posts .post_thumb {
flex: 0 0 68px !important;
height: 68px !important;
border-radius: var(--dc-r) !important;
overflow: hidden;
}
.sidebar_inner .widget_recent_posts .post_thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.sidebar_inner .widget_recent_posts .post_title {
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
}
.sidebar_inner .widget_recent_posts .post_title a {
font-family: var(--dc-ff-body) !important;
}
.sidebar_inner .widget_recent_posts .post_info,
.sidebar_inner .widget_recent_posts .post_date {
font-size: 11px !important;
color: var(--dc-text-dim) !important;
margin-top: 4px;
}
/* LatePoint widget in sidebar — clean, modern */
.sidebar_inner .latepoint-w,
.sidebar_inner .latepoint-booking-form-element {
background: var(--dc-bg-card) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
.sidebar_inner .widget:has(.latepoint-w) {
padding: 0 !important;
overflow: hidden;
}
.sidebar_inner .widget:has(.latepoint-w) .latepoint-w {
margin: 0 !important;
}
.sidebar_inner .latepoint-heading-w {
padding: 16px 20px !important;
background: var(--dc-grad-red) !important;
border-bottom: none !important;
}
.sidebar_inner .latepoint-heading-w h3 {
color: #fff !important;
font-size: 15px !important;
font-family: var(--dc-ff-heading) !important;
letter-spacing: 0.06em !important;
text-align: center !important;
}
.sidebar_inner .latepoint-form-w {
padding: 12px !important;
}
/* Service items inside sidebar LatePoint */
.sidebar_inner .os-item-i {
background: rgba(255,255,255,0.03) !important;
border: 1px solid var(--dc-border) !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
border-radius: var(--dc-r) !important;
margin-bottom: 8px !important;
padding: 12px !important;
}
.sidebar_inner .os-item-i:hover {
border-color: var(--dc-gold) !important;
}
.sidebar_inner .os-item-name-and-description h3 {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--dc-text) !important;
margin-bottom: 2px !important;
}
.sidebar_inner .os-item-name-and-description .item-desc {
font-size: 11px !important;
color: var(--dc-text-muted) !important;
line-height: 1.4 !important;
}
.sidebar_inner .os-item-price {
color: var(--dc-gold) !important;
font-size: 18px !important;
font-weight: 700 !important;
}
.sidebar_inner .os-item-price .os-price-label {
font-size: 9px !important;
color: var(--dc-text-dim) !important;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Warning strip in sidebar */
.sidebar_inner .latepoint-w .os-form-message-w {
background: rgba(212,168,83,0.1) !important;
border: 1px solid rgba(212,168,83,0.3) !important;
border-radius: var(--dc-r) !important;
padding: 10px 12px !important;
margin-bottom: 12px !important;
font-size: 12px !important;
line-height: 1.5 !important;
color: var(--dc-text-soft) !important;
}
/* Service icons in sidebar — make visible on dark bg */
.sidebar_inner .os-item-img-w img {
filter: brightness(1.3) saturate(0.8);
border-radius: var(--dc-r) !important;
}
.sidebar_inner .widget_block {
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* Post meta (date, author, etc.) on archive listings */
body.blog_mode_blog .post_meta,
body.blog_mode_home .post_meta,
body.dc-listing-page .post_meta,
.archive .post_meta,
.post_item .post_meta {
font-size: 12px !important;
color: var(--dc-text-muted) !important;
font-family: var(--dc-ff-body) !important;
}
body.blog_mode_blog .post_meta a,
body.blog_mode_home .post_meta a,
body.dc-listing-page .post_meta a,
.archive .post_meta a {
color: var(--dc-text-muted) !important;
text-decoration: none !important;
}
body.blog_mode_blog .post_meta a:hover,
body.blog_mode_home .post_meta a:hover,
body.dc-listing-page .post_meta a:hover,
.archive .post_meta a:hover {
color: var(--dc-gold) !important;
}
/* Pagination */
.nav-links,
.page_links {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 40px !important;
}
.nav-links .page-numbers,
.page_links a,
.page_links span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: var(--dc-r) !important;
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
color: var(--dc-text-soft) !important;
font-family: var(--dc-ff-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all var(--dc-t-fast);
}
.nav-links .page-numbers:hover,
.page_links a:hover {
background: var(--dc-bg-card-hover) !important;
border-color: var(--dc-gold) !important;
color: var(--dc-text) !important;
}
.nav-links .page-numbers.current,
.page_links > span:not(.page-links-title) {
background: var(--dc-grad-red) !important;
border-color: transparent !important;
color: #fff !important;
}
/* =============================================================================
19. SINGLE POST PAGE
============================================================================= */
.post_item_single .post_header {
margin-bottom: 24px !important;
}
.post_item_single .post_title {
font-family: var(--dc-ff-display) !important;
font-size: clamp(2rem, 4vw, 3rem) !important;
font-weight: 400 !important;
color: var(--dc-text) !important;
line-height: 1.15 !important;
text-transform: none !important;
letter-spacing: 0.005em !important;
}
.post_item_single .post_content {
font-size: 16px !important;
line-height: 1.75 !important;
color: var(--dc-text-soft) !important;
}
.post_item_single .post_content p {
margin-bottom: 1.2em !important;
}
.post_item_single .post_content h2,
.post_item_single .post_content h3 {
margin-top: 1.8em !important;
margin-bottom: 0.6em !important;
}
.post_item_single .post_content blockquote,
.post_item_single .post_content .wp-block-quote {
border-left: 3px solid var(--dc-gold) !important;
padding: 16px 20px !important;
margin: 24px 0 !important;
background: rgba(255,255,255,0.025);
border-radius: 0 var(--dc-r) var(--dc-r) 0;
font-family: var(--dc-ff-serif) !important;
font-style: italic;
font-size: 17px !important;
color: var(--dc-text) !important;
}
.post_item_single .post_content img {
border-radius: var(--dc-r-md) !important;
max-width: 100% !important;
height: auto !important;
}
/* Post navigation (prev/next) */
.nav-links-single .nav-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 48px !important;
}
.nav-links-single .nav-links a {
display: block;
padding: 18px 20px !important;
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-md) !important;
color: var(--dc-text-soft) !important;
text-decoration: none !important;
font-size: 14px !important;
transition: all var(--dc-t-fast);
}
.nav-links-single .nav-links a:hover {
border-color: var(--dc-gold) !important;
background: var(--dc-bg-card-hover) !important;
color: var(--dc-text) !important;
}
/* Related posts / comments */
.comments_wrap,
.related_wrap {
background: var(--dc-bg-raised) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-lg) !important;
padding: 32px !important;
margin-top: 40px !important;
}
.comments_wrap .comments_list_title,
.related_wrap .section_title {
font-family: var(--dc-ff-heading) !important;
font-size: 18px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--dc-text) !important;
}
/* =============================================================================
20. SINGLE POST — hide sidebar, style featured image, dark-theme LatePoint
Applies only to single post templates (body.single-post / .blog_mode_post /
.is_single). Category pages keep their own styles above.
============================================================================= */
body.single-post.blog_mode_post.is_single .sidebar,
body.single.single-post .sidebar { display: none !important; }
body.single-post.blog_mode_post.is_single .content,
body.single.single-post .content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
body.single-post.blog_mode_post.is_single .content_wrap,
body.single.single-post .content_wrap {
max-width: 960px;
margin: 0 auto;
}
/* Featured image on single posts — make it prominent and visually rich */
body.single-post .post_item_single .post_featured,
body.single-post .post_item_single > .post_featured,
body.single-post .post_featured.post_featured_default {
position: relative;
margin: 0 0 32px !important;
border-radius: var(--dc-r-lg) !important;
overflow: hidden !important;
border: 1px solid var(--dc-border);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
aspect-ratio: 16 / 9;
display: block !important;
}
body.single-post .post_item_single .post_featured img,
body.single-post .post_featured.post_featured_default img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: var(--dc-r-lg) !important;
transform: scale(1.02);
transition: transform var(--dc-t-slow);
}
body.single-post .post_item_single .post_featured:hover img {
transform: scale(1.04);
}
/* Subtle vignette overlay on hero image for editorial feel */
body.single-post .post_item_single .post_featured::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
pointer-events: none;
}
body.single-post .post_item_single { padding: 28px 0 60px !important; }
body.single-post .post_item_single .post_header { margin-bottom: 28px !important; }
body.single-post .post_item_single .post_title {
font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important;
line-height: 1.1 !important;
margin-bottom: 14px !important;
}
body.single-post .post_item_single .post_meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-family: var(--dc-ff-body) !important;
font-size: 11.5px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--dc-gold-strong) !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
}
body.single-post .post_item_single .post_content {
font-size: 16.5px !important;
line-height: 1.8 !important;
color: var(--dc-text-soft) !important;
}
body.single-post .post_item_single .post_content > p:first-of-type {
font-size: 18.5px !important;
color: var(--dc-text) !important;
line-height: 1.65 !important;
font-family: var(--dc-ff-serif) !important;
font-style: italic;
}
/* =============================================================================
21. ARTICLE "BOOK NOW" RESOURCE BUTTONS — dark card treatment so they don't
appear as bright white WordPress block buttons. These are rendered by
LatePoint's [latepoint-resources] shortcode inside posts.
============================================================================= */
.latepoint-resources-items-w { margin: 28px 0 !important; }
.latepoint-resources-items-w .resource-item {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-lg) !important;
padding: 22px !important;
transition: transform var(--dc-t-fast), border-color var(--dc-t-fast), box-shadow var(--dc-t-fast);
}
.latepoint-resources-items-w .resource-item:hover {
transform: translateY(-2px);
border-color: var(--dc-gold);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.latepoint-resources-items-w .resource-item .ri-avatar {
border-radius: 50% !important;
border: 2px solid var(--dc-border) !important;
}
.latepoint-resources-items-w .resource-item .ri-name h3 {
font-family: var(--dc-ff-heading) !important;
color: var(--dc-text) !important;
font-size: 16px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin: 12px 0 14px !important;
}
/* Cover both selector flavours — ri-buttons is both a wrapper AND has
* the wp-block-button class on the same element, depending on LatePoint
* versions; markup varies. */
.latepoint-resources-items-w .resource-item .ri-buttons .wp-block-button__link,
.latepoint-resources-items-w .resource-item .ri-buttons.wp-block-button .wp-block-button__link,
.latepoint-resources-items-w .resource-item .wp-block-button__link,
.latepoint-resources-items-w .resource-item a.latepoint-book-button,
.latepoint-resources-items-w .resource-item .latepoint-book-button,
.wp-block-button__link.latepoint-book-button {
background: linear-gradient(135deg, #e11d2e 0%, #9c0a19 100%) !important;
background-color: #e11d2e !important;
color: #fff !important;
padding: 12px 24px !important;
border-radius: 999px !important;
border: 0 !important;
font-family: var(--dc-ff-body) !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: 0 8px 20px rgba(225, 29, 46, 0.35) !important;
transition: transform var(--dc-t-fast), box-shadow var(--dc-t-fast), filter var(--dc-t-fast) !important;
display: inline-block !important;
}
.latepoint-resources-items-w .resource-item .ri-buttons .wp-block-button__link:hover,
.latepoint-resources-items-w .resource-item .ri-buttons.wp-block-button .wp-block-button__link:hover,
.latepoint-resources-items-w .resource-item .wp-block-button__link:hover,
.latepoint-resources-items-w .resource-item a.latepoint-book-button:hover {
transform: translateY(-2px);
filter: brightness(1.1);
box-shadow: 0 12px 28px rgba(225, 29, 46, 0.5) !important;
}
/* =============================================================================
22. LATEPOINT BOOKING POPUP — dark theme
Overrides LatePoint's default white side-panel / summary / form so the
modal matches the site's dark aesthetic.
============================================================================= */
:root {
--latepoint-side-panel-bg: #0f131a !important;
--latepoint-summary-panel-bg: #0f131a !important;
--latepoint-body-color: #e9ecf1 !important;
--latepoint-headings-color: #ffffff !important;
--latepoint-color-text-faded: #9aa3bf !important;
--latepoint-calendar-weekday-label-color: #ffffff !important;
--latepoint-calendar-weekday-label-bg: #151a23 !important;
--latepoint-border-radius: 12px !important;
--latepoint-border-radius-sm: 8px !important;
--latepoint-border-radius-md: 10px !important;
--latepoint-border-radius-lg: 16px !important;
}
/* Outer modal overlay + panels */
.latepoint-lightbox-w,
.latepoint-overlay { background: rgba(5, 7, 12, 0.75) !important; }
.latepoint-booking-form-element,
.latepoint-form-element,
.latepoint-side-panel,
.latepoint-form-w,
.latepoint-summary-panel,
.latepoint-summary-w,
.latepoint-summary-w .summary-box,
.latepoint-summary-w .summary-heading,
.latepoint-summary-w .main-box,
.latepoint-steps-w,
.latepoint-step-w,
.latepoint-body,
.latepoint-w,
.latepoint-lightbox-i,
.latepoint-lightbox-form {
background: #0f131a !important;
color: var(--dc-text) !important;
}
.latepoint-side-panel { border-right: 1px solid var(--dc-border) !important; }
.latepoint-summary-panel,
.latepoint-summary-w { border-left: 1px solid var(--dc-border) !important; }
/* Summary panel children — texts, labels, amounts */
.latepoint-summary-w,
.latepoint-summary-w * {
color: var(--dc-text-soft) !important;
background-color: transparent !important;
}
.latepoint-summary-w h1,
.latepoint-summary-w h2,
.latepoint-summary-w h3,
.latepoint-summary-w h4,
.latepoint-summary-w strong,
.latepoint-summary-w .summary-heading,
.latepoint-summary-w .sbc-main-item,
.latepoint-summary-w .sbc-big-item,
.latepoint-summary-w .cost-total,
.latepoint-summary-w .total-cost {
color: #ffffff !important;
}
/* Container that holds the whole summary (needs opaque dark bg,
above rule zeroed all children bgs). */
.latepoint-w .latepoint-summary-w { background: #0f131a !important; }
.latepoint-summary-w .summary-box,
.latepoint-summary-w .main-box { background: #151a23 !important; border: 1px solid var(--dc-border) !important; border-radius: 12px !important; }
.latepoint-summary-w .summary-box-heading { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
.latepoint-summary-w .sbh-line,
.latepoint-summary-w .pbh-line,
.latepoint-summary-w .subtotal-separator,
.latepoint-summary-w .summary-box-heading .sbh-line {
border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
background: transparent !important;
background-image: none !important;
}
/* Kill dotted radial-gradient backgrounds on specific summary elements only
(don't use a wildcard here — would kill avatar inline bg-image too). */
.latepoint-summary-w .summary-header-inner,
.latepoint-summary-w .summary-header,
.latepoint-summary-w .summary-box-heading,
.latepoint-summary-w .pb-heading,
.latepoint-summary-w .sbh-line,
.latepoint-summary-w .pbh-line,
.latepoint-summary-w .subtotal-separator {
background-image: none !important;
}
.latepoint-summary-w .summary-header-inner { background: transparent !important; }
.latepoint-summary-w .cost-breakdown-wrapper,
.latepoint-summary-w .summary-price-breakdown-wrapper,
.latepoint-summary-w .os-price-breakdown { background: #0b0e14 !important; border-top: 1px solid var(--dc-border) !important; padding: 14px 16px !important; border-radius: 10px !important; }
.latepoint-summary-w .summary-price-breakdown-inner { background: transparent !important; }
.latepoint-summary-w .summary-header-label,
.latepoint-summary-w .summary-header-inner span { color: #fff !important; font-family: var(--dc-ff-heading) !important; }
.latepoint-summary-w .latepoint-add-another-item-trigger {
color: var(--dc-gold-strong) !important;
background: rgba(231, 194, 116, 0.08) !important;
border: 1px dashed rgba(231, 194, 116, 0.35) !important;
padding: 10px 12px !important;
border-radius: 8px !important;
}
.latepoint-summary-w .latepoint-add-another-item-trigger:hover {
background: rgba(231, 194, 116, 0.15) !important;
border-color: var(--dc-gold) !important;
}
.latepoint-summary-w .os-avatar-w { border-radius: 50% !important; border: 1px solid var(--dc-border) !important; }
.latepoint-summary-w a { color: var(--dc-gold-strong) !important; }
.latepoint-heading-w,
.latepoint-heading-w h2,
.latepoint-heading-w h3,
.latepoint-steps-heading,
.latepoint-desc-title,
.latepoint-selection-title,
.latepoint-side-panel h2,
.latepoint-side-panel h3,
.latepoint-summary-panel h2,
.latepoint-summary-panel h3,
.latepoint-body h1,
.latepoint-body h2,
.latepoint-body h3,
.latepoint-body h4 {
color: #fff !important;
font-family: var(--dc-ff-heading) !important;
}
/* Service cards (CASTLE ENTRANCE, etc.) inside the modal */
.latepoint-body .os-service-selector,
.latepoint-body .os-item,
.latepoint-body .os-services-list > div,
.latepoint-body .latepoint-items > div {
background: #151a23 !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r-md) !important;
color: var(--dc-text) !important;
}
.latepoint-body .os-service-selector:hover,
.latepoint-body .os-item:hover {
border-color: var(--dc-gold) !important;
background: #1a2030 !important;
}
.latepoint-body .os-service-selector.selected,
.latepoint-body .os-item.selected,
.latepoint-body .os-item.active {
border-color: #e11d2e !important;
background: #1e1419 !important;
box-shadow: inset 0 0 0 1px rgba(225, 29, 46, 0.5);
}
/* Service title text */
.latepoint-body .os-service-selector h3,
.latepoint-body .os-service-selector .os-item-title,
.latepoint-body .os-item h3 {
color: #fff !important;
font-family: var(--dc-ff-heading) !important;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.latepoint-body .os-service-selector p,
.latepoint-body .os-service-selector .os-item-descr,
.latepoint-body .os-item p { color: var(--dc-text-soft) !important; }
/* Price tag */
.latepoint-body .os-item-price,
.latepoint-body .os-starts-from-price,
.latepoint-body .item-price,
.latepoint-body .latepoint-item-price {
color: var(--dc-gold-strong) !important;
font-family: var(--dc-ff-heading) !important;
}
/* Buttons inside popup */
.latepoint-body .latepoint-btn,
.latepoint-body button.latepoint-btn,
.latepoint-w .latepoint-btn {
border-radius: 999px !important;
font-family: var(--dc-ff-body) !important;
font-weight: 600 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid transparent !important;
transition: filter var(--dc-t-fast), background var(--dc-t-fast), border-color var(--dc-t-fast) !important;
}
.latepoint-body .latepoint-btn-primary,
.latepoint-body .latepoint-next-btn,
.latepoint-w .latepoint-next-btn {
background: var(--dc-grad-red) !important;
color: #fff !important;
box-shadow: 0 8px 20px rgba(225, 29, 46, 0.4) !important;
}
.latepoint-body .latepoint-btn-primary:hover,
.latepoint-body .latepoint-next-btn:hover { filter: brightness(1.1); }
/* BACK / prev button — styled dark pill, matches design */
.latepoint-body .latepoint-btn-white,
.latepoint-body .latepoint-prev-btn,
.latepoint-w .latepoint-prev-btn {
background: var(--dc-bg-elev) !important;
color: var(--dc-text-soft) !important;
border: 1px solid var(--dc-border-strong) !important;
border-radius: 999px !important;
font-family: var(--dc-ff-body) !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all var(--dc-t-fast) !important;
}
.latepoint-body .latepoint-btn-white:hover,
.latepoint-body .latepoint-prev-btn:hover,
.latepoint-w .latepoint-prev-btn:hover {
background: var(--dc-bg-card-hover) !important;
border-color: var(--dc-gold) !important;
color: var(--dc-text) !important;
}
/* ── Customer Information & all LatePoint form steps — dark inputs ──────────
LatePoint front.css uses .latepoint-w .os-form-group .os-form-control with
background-color:#fff !important — we must match or beat that specificity. */
/* Footer bar (BACK / NEXT buttons row) — LatePoint hardcodes #fff */
.latepoint-w .latepoint-footer,
.latepoint-footer {
background-color: var(--dc-bg-raised) !important;
border-top: 1px solid var(--dc-border) !important;
}
/* The .os-form-w inner white card around fields */
.latepoint-w .os-form-w,
.os-form-w {
background-color: transparent !important;
padding: 16px 0 !important;
margin: 0 !important;
}
/* os-form-control inputs — exact LatePoint specificity + !important */
.latepoint-w .os-form-group.os-form-select-group .os-form-control,
.latepoint-w .os-form-group.os-form-select-group input.os-form-control,
.latepoint-w .os-form-group.os-form-textfield-group .os-form-control,
.latepoint-w .os-form-group.os-form-textfield-group input.os-form-control,
.os-form-group.os-form-group-simple.os-form-textfield-group .os-form-control,
.latepoint-w .os-form-group.os-form-select-group input[type="text"],
.latepoint-w .os-form-group.os-form-select-group input[type="email"],
.latepoint-w .os-form-group.os-form-select-group input[type="tel"],
.latepoint-w .os-form-group.os-form-select-group input[type="number"],
.latepoint-w .os-form-group.os-form-textfield-group input[type="text"],
.latepoint-w .os-form-group.os-form-textfield-group input[type="email"],
.latepoint-w .os-form-group.os-form-textfield-group input[type="tel"],
.latepoint-w .os-form-group.os-form-textfield-group input[type="number"] {
background-color: var(--dc-bg-raised) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r) !important;
color: var(--dc-text) !important;
font-family: var(--dc-ff-body) !important;
font-size: 14px !important;
}
.latepoint-w .os-form-group.os-form-select-group .os-form-control:focus,
.latepoint-w .os-form-group.os-form-select-group input.os-form-control:focus,
.latepoint-w .os-form-group.os-form-textfield-group .os-form-control:focus,
.latepoint-w .os-form-group.os-form-textfield-group input.os-form-control:focus {
background-color: var(--dc-bg-card) !important;
border-color: var(--dc-gold) !important;
box-shadow: 0 0 0 3px var(--dc-gold-soft) !important;
outline: none !important;
}
/* Phone field container (.os-form-phonefield-group + .lp_iti) */
.latepoint-w .os-form-group.os-form-phonefield-group,
.os-form-group.os-form-phonefield-group {
background-color: var(--dc-bg-raised) !important;
border: 1px solid var(--dc-border) !important;
border-radius: var(--dc-r) !important;
}
.latepoint-w .os-form-group.os-form-phonefield-group .lp_iti,
.latepoint-w .os-form-group.os-form-group-simple.os-form-phonefield-group .lp_iti,
.os-form-group.os-form-group-simple.os-form-phonefield-group .lp_iti {
background-color: transparent !important;
border: none !important;
}
.latepoint-w .os-form-group.os-form-phonefield-group .lp_iti__selected-dial-code {
color: var(--dc-text-soft) !important;
}
.latepoint-w .os-form-group.os-form-phonefield-group:has(input:focus) {
border-color: var(--dc-gold) !important;
}
/* os-form-group-simple plain style inputs (fallback) */
.latepoint-w .os-form-group.os-form-group-simple.os-form-textfield-group .os-form-control,
.latepoint-w .os-form-group.os-form-group-simple.os-form-select-group .os-form-control {
background-color: var(--dc-bg-raised) !important;
border: 1px solid var(--dc-border) !important;
color: var(--dc-text) !important;
}
/* Labels */
.latepoint-w .os-form-group label,
.latepoint-w .os-form-group.os-form-textfield-group label {
color: var(--dc-text-muted) !important;
font-family: var(--dc-ff-body) !important;
}
.latepoint-w .os-form-group.os-form-group-simple.os-form-textfield-group label {
color: var(--dc-text-soft) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* Placeholders */
.latepoint-w .os-form-group .os-form-control::placeholder,
.latepoint-w .os-form-group input.os-form-control::placeholder {
color: var(--dc-text-dim) !important;
opacity: 1 !important;
}
/* Form groups spacing */
.latepoint-w .os-form-group { margin-bottom: 14px !important; }
/* Generic fallback for any remaining inputs */
.latepoint-body input[type="text"],
.latepoint-body input[type="email"],
.latepoint-body input[type="tel"],
.latepoint-body input[type="number"],
.latepoint-body textarea,
.latepoint-body select {
background: var(--dc-bg-raised) !important;
border: 1px solid var(--dc-border) !important;
color: var(--dc-text) !important;
}
.latepoint-body input:focus,
.latepoint-body textarea:focus,
.latepoint-body select:focus {
outline: none !important;
border-color: var(--dc-gold) !important;
box-shadow: 0 0 0 3px var(--dc-gold-soft) !important;
}
/* Close button */
.latepoint-body .latepoint-lightbox-close,
.latepoint-lightbox-close,
.latepoint-close-lightbox {
color: #fff !important;
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 999px !important;
}
/* Summary panel typography */
.latepoint-summary-panel .summary-row,
.latepoint-summary-panel .summary-total,
.latepoint-summary-panel .total-cost,
.latepoint-summary-panel .cost-breakdown,
.latepoint-summary-panel * { color: var(--dc-text-soft) !important; }
.latepoint-summary-panel strong,
.latepoint-summary-panel .cost-total,
.latepoint-summary-panel h2,
.latepoint-summary-panel h3 { color: #fff !important; }
/* Step progress dots */
.latepoint-body .latepoint-steps-progress .step-item,
.latepoint-body .latepoint-step-item { color: var(--dc-text-soft) !important; }
.latepoint-body .latepoint-steps-progress .step-item.current,
.latepoint-body .latepoint-step-item.active { color: var(--dc-gold-strong) !important; }
/* ── Calendar — date numbers & headers are #14161d (nearly black) in LP CSS ─ */
.latepoint-booking-form-element .os-monthly-calendar-days .os-day .os-day-number,
.latepoint-w .os-monthly-calendar-days .os-day .os-day-number {
color: var(--dc-text-soft) !important;
}
/* Today highlight — swap cream bg for gold tint */
.latepoint-booking-form-element .os-monthly-calendar-days .os-day.os-today.os-month-current .os-day-box .os-day-number,
.latepoint-w .os-monthly-calendar-days .os-day.os-today.os-month-current .os-day-box .os-day-number {
background-color: var(--dc-gold-soft) !important;
color: var(--dc-gold-strong) !important;
border-radius: 4px;
}
/* Selected day — keep red but ensure white text */
.latepoint-booking-form-element .os-monthly-calendar-days .os-day.selected .os-day-box .os-day-number,
.latepoint-w .os-monthly-calendar-days .os-day.selected .os-day-box .os-day-number {
color: #fff !important;
background-color: transparent !important;
}
/* Not-available days — dimmed, overrides the general os-day-number rule above */
.latepoint-booking-form-element .os-monthly-calendar-days .os-day.os-not-available .os-day-number,
.latepoint-w .os-monthly-calendar-days .os-day.os-not-available .os-day-number {
color: #adadae !important;
}
/* Available day bar — keep LP's lime green */
.latepoint-booking-form-element .os-day-status .day-available,
.latepoint-w .os-day-status .day-available {
background-color: #8fe286 !important;
}
/* Weekday header row (M T W T F S S) — LP uses #f5f5f5 bg */
.latepoint-booking-form-element .os-weekdays .weekday,
.latepoint-w .os-weekdays .weekday {
background-color: transparent !important;
color: var(--dc-text-muted) !important;
}
/* Weekend days — LP uses cream/yellow bg */
.latepoint-booking-form-element .calendar-style-classic .os-weekdays .weekday.weekday-6,
.latepoint-booking-form-element .calendar-style-classic .os-weekdays .weekday.weekday-7,
.latepoint-w .calendar-style-classic .os-weekdays .weekday.weekday-6,
.latepoint-w .calendar-style-classic .os-weekdays .weekday.weekday-7 {
background-color: transparent !important;
color: var(--dc-gold) !important;
}
/* Available day cell bg — LP uses #eefdec (light green) */
.latepoint-booking-form-element .calendar-style-classic .os-monthly-calendar-days .os-day.os-day-current .os-day-box,
.latepoint-w .calendar-style-classic .os-monthly-calendar-days .os-day.os-day-current .os-day-box {
background-color: rgba(225, 29, 46, 0.08) !important;
}
/* ── Times header "Pick a slot for 29 April" — LP sets #16171d ────────────── */
.latepoint-booking-form-element .times-header,
.latepoint-w .times-header {
color: var(--dc-text-soft) !important;
}
.latepoint-booking-form-element .times-header span,
.latepoint-w .times-header span {
color: var(--dc-red) !important;
border-bottom-color: var(--dc-red) !important;
}
/* Times header divider lines */
.latepoint-booking-form-element .time-selector-w.style-timebox .times-header .th-line,
.latepoint-w .time-selector-w.style-timebox .times-header .th-line {
background-color: var(--dc-border) !important;
}
/* ── Time slot buttons — LP has no specific bg, inherits, but can look odd ── */
.latepoint-booking-form-element .os-time-slot,
.latepoint-w .os-time-slot {
background: var(--dc-bg-card) !important;
border: 1px solid var(--dc-border) !important;
color: var(--dc-text-soft) !important;
border-radius: var(--dc-r-sm) !important;
transition: all var(--dc-t-fast) !important;
}
.latepoint-booking-form-element .os-time-slot:hover,
.latepoint-w .os-time-slot:hover {
border-color: var(--dc-gold) !important;
background: var(--dc-bg-card-hover) !important;
color: var(--dc-text) !important;
}
.latepoint-booking-form-element .os-time-slot.selected,
.latepoint-booking-form-element .os-time-slot.os-selected,
.latepoint-w .os-time-slot.selected,
.latepoint-w .os-time-slot.os-selected {
background: var(--dc-grad-red) !important;
border-color: var(--dc-red) !important;
color: #fff !important;
}
/* ── Verify Order Details — sbc-big-item & cart items are #14161d ─────────── */
.summary-box .sbc-big-item,
.latepoint-w .summary-box .sbc-big-item,
.latepoint-booking-form-element .summary-box .sbc-big-item {
color: var(--dc-text) !important;
}
.summary-box .sbc-main-item,
.latepoint-w .summary-box .sbc-main-item,
.full-summary-wrapper .summary-box .sbc-main-item,
.confirmation-info-w .summary-box .sbc-main-item {
color: var(--dc-text-soft) !important;
}
.summary-box .sbc-highlighted-item,
.latepoint-w .summary-box .sbc-highlighted-item {
color: var(--dc-text-muted) !important;
}
/* Cart item cards in verify step — LP uses light border/shadow */
.latepoint-booking-form-element .step-verify-w .cart-item-wrapper.multi-item {
border: 1px solid var(--dc-border) !important;
box-shadow: none !important;
background: var(--dc-bg-card) !important;
border-radius: var(--dc-r-md) !important;
}
/* Remove-item button white halo */
.latepoint-booking-form-element .step-verify-w .cart-item-wrapper .os-remove-item-from-cart {
box-shadow: 0 0 0 3px var(--dc-bg-raised) !important;
}
/* ── Footer (BACK/NEXT) — ensure padding so NEXT btn has right margin ─────── */
.latepoint-w .latepoint-footer,
.latepoint-footer {
padding: 14px 18px !important;
}
.latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-footer .latepoint-next-btn {
margin-right: 20px !important;
}
/* ── Summary attributes (booking details list) ───────────────────────────── */
.summary-attributes span,
.summary-attributes span strong {
color: #fff !important;
}
/* ── Calendar month prev/next nav buttons ────────────────────────────────── */
.latepoint-booking-form-element .os-current-month-label-w .os-month-prev-btn,
.latepoint-booking-form-element .os-current-month-label-w .os-month-next-btn {
color: var(--dc-text-soft) !important;
opacity: 1 !important;
}
.latepoint-booking-form-element .os-current-month-label-w .os-month-prev-btn:hover,
.latepoint-booking-form-element .os-current-month-label-w .os-month-next-btn:hover {
color: var(--dc-gold) !important;
}
/* =============================================================================
23. DC CARD META + READ MORE (archive / category / single) — homepage parity
Added via the_content filter in child functions.php so markup is consistent
across classic and modern layouts without overriding template files.
============================================================================= */
.dc-card-meta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--dc-ff-body) !important;
font-size: 11px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--dc-gold-strong) !important;
margin: 0 0 10px 0 !important;
line-height: 1;
padding: 0 !important;
}
.dc-card-meta .dc-card-meta-sep {
width: 3px; height: 3px; border-radius: 50%;
background: var(--dc-border);
flex: none;
}
.dc-card-meta .dc-card-meta-time::before {
content: "";
display: inline-block;
width: 11px; height: 11px;
margin-right: 4px;
vertical-align: -1px;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain;
}
/* The explicit "Read more" button injected via the_content filter.
Same pill style as homepage more-link. */
.dc-card-readmore {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
color: var(--dc-text) !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid var(--dc-border) !important;
font-family: var(--dc-ff-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-decoration: none !important;
padding: 10px 18px !important;
border-radius: 999px !important;
margin-top: 14px !important;
transition: gap var(--dc-t-fast), color var(--dc-t-fast), background var(--dc-t-fast), border-color var(--dc-t-fast) !important;
width: auto !important;
align-self: flex-start !important;
}
.dc-card-readmore::after {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain !important;
transition: transform var(--dc-t-fast) !important;
}
.dc-card-readmore:hover {
background: rgba(231, 194, 116, 0.12) !important;
border-color: var(--dc-gold) !important;
gap: 14px !important;
}
.dc-card-readmore:hover::after { transform: translateX(2px) !important; }
/* Ensure the injected meta + read more live inside each post card's
.post_content so the archive grid styles flow-wrap them correctly. */
body.archive .posts_container .post_item .post_content,
body.dc-listing-page .posts_container .post_item .post_content,
body.category .posts_container .post_item .post_content,
body.tag .posts_container .post_item .post_content {
display: flex !important;
flex-direction: column !important;
}
body.archive .posts_container .post_item .dc-card-meta,
body.dc-listing-page .posts_container .post_item .dc-card-meta,
body.category .posts_container .post_item .dc-card-meta,
body.tag .posts_container .post_item .dc-card-meta {
order: -1;
margin: 0 0 8px 0 !important;
}
body.archive .posts_container .post_item .dc-card-readmore,
body.dc-listing-page .posts_container .post_item .dc-card-readmore,
body.category .posts_container .post_item .dc-card-readmore,
body.tag .posts_container .post_item .dc-card-readmore {
margin-top: 14px !important;
align-self: flex-start !important;
}
/* =============================================================================
24. SINGLE POST HERO — featured image + title injected by child theme JS
Pulls post thumbnail from WP, displays as a full-width cover image with
gradient scrim + large title + meta row below. The Elementor content body
flows directly under it.
============================================================================= */
body.single-post .dc-single-hero {
position: relative;
width: 100%;
min-height: clamp(280px, 44vw, 520px);
margin: 0 0 32px;
overflow: hidden;
border-radius: var(--dc-r-lg);
background: #0b0e14;
display: flex;
align-items: flex-end;
}
body.single-post .dc-single-hero-media {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.02);
transition: transform 0.8s ease;
}
body.single-post .dc-single-hero:hover .dc-single-hero-media { transform: scale(1.06); }
body.single-post .dc-single-hero-scrim {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10,13,20,0) 0%, rgba(10,13,20,0.45) 55%, rgba(10,13,20,0.92) 100%),
radial-gradient(ellipse at 50% 100%, rgba(225,29,46,0.12), transparent 70%);
pointer-events: none;
}
body.single-post .dc-single-hero-content {
position: relative;
z-index: 2;
padding: 36px clamp(20px, 5vw, 56px);
width: 100%;
}
body.single-post .dc-single-hero-title {
font-family: var(--dc-ff-display) !important;
font-size: clamp(2rem, 4vw, 3.4rem) !important;
line-height: 1.15 !important;
color: #fff !important;
margin: 8px 0 0 !important;
letter-spacing: 0.01em !important;
text-wrap: balance;
max-width: 1000px;
}
body.single-post .dc-single-hero-meta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--dc-ff-body);
font-size: 11.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dc-gold-strong);
}
body.single-post .dc-single-hero-meta .dc-single-cat {
color: #fff !important;
background: rgba(225, 29, 46, 0.88);
padding: 5px 12px;
border-radius: 999px;
text-decoration: none !important;
font-weight: 600;
}
body.single-post .dc-single-hero-meta .dc-single-cat:hover { filter: brightness(1.1); }
body.single-post .dc-single-hero-meta .dc-single-meta-sep {
width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.4); flex: none;
}
body.single-post .dc-single-hero-meta .dc-single-meta-time::before {
content: "";
display: inline-block;
width: 12px; height: 12px;
margin-right: 4px;
vertical-align: -2px;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain;
}
/* Article body: comfortable reading typography and width */
body.single-post .page_content_wrap .content,
body.single-post .content_wrap .content {
max-width: 1080px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 12px clamp(20px, 5vw, 48px) 56px !important;
}
body.single-post .post_content_single,
body.single-post .page_content_wrap .content > p,
body.single-post .page_content_wrap .content > div > p {
font-family: var(--dc-ff-body) !important;
font-size: 16.5px !important;
line-height: 1.85 !important;
color: var(--dc-text-soft) !important;
}
body.single-post .page_content_wrap h1,
body.single-post .page_content_wrap h2,
body.single-post .page_content_wrap h3,
body.single-post .page_content_wrap h4,
body.single-post .page_content_wrap .entry-content h1,
body.single-post .page_content_wrap .entry-content h2,
body.single-post .page_content_wrap .entry-content h3 {
font-family: var(--dc-ff-heading) !important;
color: var(--dc-text) !important;
letter-spacing: 0.01em !important;
margin-top: 40px !important;
margin-bottom: 16px !important;
}
body.single-post .page_content_wrap blockquote {
border-left: 3px solid var(--dc-gold) !important;
padding: 14px 22px !important;
margin: 28px 0 !important;
background: rgba(231, 194, 116, 0.05) !important;
border-radius: 0 var(--dc-r) var(--dc-r) 0 !important;
color: var(--dc-text) !important;
font-style: italic !important;
}