/* Theme Name: DD Locations v5 Theme URI: https://github.com/elementor/hello-theme-child/ Description: DD location subsite child theme v5 - Hello Elementor parent theme. Aligned with the Dinner Detective Design System (Noir Detective Gold). Tokens, type, components and surfaces all sourced from /colors_and_type.css. Author: Steve Wilder Author URI: https://elementor.com/ Template: hello-elementor Version: 5.0.0 Text Domain: dd-locations-v5 License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* ----------------------------------------------------------------------------- This stylesheet is intentionally thin. The canonical token + base layer lives in /colors_and_type.css (Dinner Detective Design System) and must be enqueued FIRST so every variable below resolves correctly. Below-the-fold body content uses /page-content.css (enqueued after this). Above-the-fold critical CSS is inlined from /critical-atf.css in . --------------------------------------------------------------------------- */ /* == Base typography - design-system body stack =========================== */ p, .wpseo-address-wrapper, #menu-choices, footer { font-family: var(--dd-font-body); } footer a { font-weight: 600; } main { min-height: 75vh; min-width: 100vw; } /* "Get Tickets!" CTA link — theme red (enforced here for any Elementor nav instances) */ .buy-tickets-link a, .buy-tickets-link a:visited { color: var(--dd-red, #8B1A1A) !important; } .buy-tickets-link a:hover, .buy-tickets-link a:focus { color: var(--dd-red-hover, #9B2222) !important; } /* == Gap fix: no space between sticky header spacer and first page section == */ .site-main, .site-main > .page-content { margin-top: 0; padding-top: 0; } .site-main > .page-content > section:first-child, .site-main > section:first-child, .site-main > .elementor:first-child .elementor-section:first-child, .site-main > .elementor:first-child .e-con.e-parent:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* Restore top padding on hero sections so eyebrow text has breathing room from the sticky header. The rule above zeros padding-top on ALL section:first-child elements; ID selectors win the !important cascade. */ #private-events-cta { padding-top: 3% !important; } #dd-solve { padding-top: 60px !important; } @media (max-width: 1024px) { #private-events-cta { padding-top: 20px !important; } #dd-solve { padding-top: 60px !important; } } @media (max-width: 767px) { #private-events-cta { padding-top: 40px !important; } #dd-solve { padding-top: 60px !important; } } /* == Front-page hero: ensure flush top (no gap above bg image) ============ */ section#dd-solve { margin-top: 0; padding-top: 0; } .hidden { display: none !important; } .site-main { max-width: 100% !important; } .nowrap { white-space: nowrap; } /* == Headings - Montserrat 700 uppercase tracked +4% ====================== Special Elite is editorial-only; never used for UI labels or page titles. ========================================================================= */ h1, h1.entry-title { text-align: center !important; font-family: var(--dd-font-display) !important; text-transform: uppercase !important; font-weight: 700 !important; font-style: normal; letter-spacing: var(--dd-track-heading); color: var(--dd-text) !important; margin: 0; font-size: var(--dd-text-3xl); line-height: var(--dd-leading-tight); } h2 { font-family: var(--dd-font-display) !important; font-weight: 700; text-transform: uppercase; letter-spacing: var(--dd-track-heading); font-size: var(--dd-text-2xl) !important; color: var(--dd-gold); } h3 { font-family: var(--dd-font-display) !important; font-weight: 700; text-transform: uppercase; letter-spacing: var(--dd-track-heading); font-size: var(--dd-text-xl) !important; color: var(--dd-gold); } h4 { font-family: var(--dd-font-display) !important; font-weight: 700; letter-spacing: var(--dd-track-heading); font-size: var(--dd-text-md) !important; color: var(--dd-text); } .sb-relative, .wpseo-business-name, h5 { font-family: var(--dd-font-display) !important; font-weight: 700; } .wpseo-extra-comment { font-style: italic; } input[name="quantity"], input[name="ign-donation"] { width: 5em !important; } @media only screen and (max-width: 768px) { h1.entry-title { font-size: var(--dd-text-2xl) !important; } } /* == Location menu image sizing =========================================== */ #dd-template-location-menu-container img, #dd-template-location-menu-container source, #dd-template-location-menu-container picture { object-fit: cover; } /* == Page template chrome (title banner + content area) =================== */ .dd-template-title { display: flex; background-image: url(https://www.thedinnerdetective.com/_images/detectives-header-bkgd.avif); background-position: center center; background-size: cover; background-repeat: no-repeat; min-height: 175px; min-width: 100%; flex-direction: column; justify-content: center; position: relative; isolation: isolate; border-bottom: 1px solid rgba(201,168,68,0.18); /* override the global --page-title-display:none so h1.entry-title is visible here */ --page-title-display: block; } .dd-template-title::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 10, 0.78); /* 70-85% dark overlay per design system */ z-index: -1; pointer-events: none; } @media only screen and (min-width: 767px) { .dd-template-title { min-height: 200px; } } /* Dark content area - matches the unbroken dark envelope */ .dd-template-content { padding: var(--dd-space-5) var(--dd-space-4); background-color: var(--dd-bg-dark); color: var(--dd-text-body); min-height: 75vh; min-width: 100%; } /* == Social/blog widget text ============================================== */ .sb-item-text { font-family: var(--dd-font-body); } .sb-item-text .sb-fs { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } /* == Menu choices widget ================================================== */ #menu-choices li { text-transform: capitalize; } .elementor-button-text:hover { color: var(--dd-gold) !important; } #menu-choices ul li { font-weight: 700 !important; margin: var(--dd-space-1) 0 !important; } #menu-choices ul li ul li { font-weight: 400 !important; } #menu-choices ul li ul li ul li { font-style: italic !important; font-weight: 400 !important; } .populate-posts { background-color: rgba(245, 184, 32, 0.06) !important; /* gold @ 6% on dark envelope */ border: 1px solid rgba(245, 184, 32, 0.20) !important; border-radius: var(--dd-radius-lg) !important; padding: var(--dd-space-3) !important; } .populate-posts label { font-weight: 700 !important; } /* ========================================================================= CTA SECTIONS Two-up CTA cards. Card radius 8px, button radius 4px (no pills). Border 1px gold-alt @ 20-30%. Gold never on buttons; red is action only. ========================================================================= */ .dd-cta-row { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: var(--dd-space-5); } .dd-cta { position: relative; border-radius: var(--dd-radius-lg); /* 8px - design-system card */ overflow: hidden; box-sizing: border-box; } .dd-cta-left, .dd-cta-right { min-height: 260px; display: flex; color: var(--dd-text); flex: 1 1 320px; padding: var(--dd-space-4) var(--dd-space-5) var(--dd-space-4) 12%; flex-direction: column; justify-content: space-evenly; background-repeat: no-repeat; background-size: contain; background-position: -66px; transition: border-color var(--dd-transition-base); } .dd-cta-left { background-color: rgba(245, 184, 32, 0.08); border: 1px solid rgba(201, 168, 68, 0.25); } .dd-cta-right { background-color: rgba(139, 26, 26, 0.10); border: 1px solid rgba(139, 26, 26, 0.30); } .dd-cta-left:hover, .dd-cta-right:hover { border-color: var(--dd-gold-alt); } .dd-cta-subtitle, .dd-cta-title { text-align: right; font-weight: 700; } .dd-cta-title { margin: 0 0 0.4em; font-family: var(--dd-font-display); text-transform: uppercase; letter-spacing: var(--dd-track-heading); line-height: var(--dd-leading-tight); font-size: var(--dd-text-xl); color: var(--dd-gold); paint-order: stroke fill; } .dd-cta-subtitle { margin: 0 0 0.3em; font-family: var(--dd-font-body); line-height: var(--dd-leading-snug); color: var(--dd-text); } .dd-cta-stars { font-size: 1.4em; color: var(--dd-star); } .dd-cta-locations { font-size: var(--dd-text-md); font-style: italic; font-weight: 400; color: var(--dd-gold-alt); } /* CTA primary button - red, 4px radius, 5% tracking */ .dd-cta-button { display: block; align-self: normal; margin-top: 0.7em; margin-left: 4em; padding: 14px 28px; border-radius: var(--dd-radius-sm); /* 4px */ border: none; background-color: var(--dd-red); color: var(--dd-text) !important; text-decoration: none !important; text-transform: uppercase; font-family: var(--dd-font-display); font-weight: 700; letter-spacing: var(--dd-track-button); font-size: var(--dd-text-sm); cursor: pointer; text-align: center; transition: background-color var(--dd-transition-fast); } .dd-cta-button:hover, .dd-cta-button:focus-visible { background-color: var(--dd-red-hover); color: var(--dd-text) !important; } .dd-cta-list { margin: 0.4em 0 0 3.4em; padding: 0 0 0 2.2em; text-align: left; font-family: var(--dd-font-body); font-weight: 700; font-size: var(--dd-text-md); line-height: var(--dd-leading-snug); color: var(--dd-text); } .dd-cta-list li { margin: 0.1em 0; } .dd-cta-testimonial { margin: var(--dd-space-5); padding: var(--dd-space-3) var(--dd-space-4) var(--dd-space-4); background-color: var(--dd-bg-card); border: 1px solid rgba(201, 168, 68, 0.20); border-radius: var(--dd-radius-lg); /* 8px card */ text-align: center; } /* Editorial Special-Elite quote - design-system permitted use */ .dd-quote { margin: 0 0 0.4em; font-family: var(--dd-font-case) !important; font-weight: 400; font-size: var(--dd-text-xl); color: var(--dd-text); } .dd-quote-meta { margin: 0; font-family: var(--dd-font-body); font-size: var(--dd-text-base); color: var(--dd-gold-alt); } .dd-quote-meta a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; } .dd-cta, .dd-quote, .dd-quote-meta { opacity: 1; transform: translateY(0); } .dd-cta-container { margin: var(--dd-space-5) auto; max-width: var(--dd-max-width); /* 1200px */ } /* == CTA responsive ======================================================= */ @media (max-width: 1100px) { .dd-cta-left { background-position: -106px; } .dd-cta-right { background-position: -106px; } .dd-cta-subtitle { margin-left: 65px; } .dd-cta-list { margin-left: 75px; } } @media (max-width: 1000px) { .dd-cta-left { background-blend-mode: normal; padding: var(--dd-space-5); } .dd-cta-right { background-blend-mode: normal; padding: var(--dd-space-5); } .dd-cta-title, .dd-cta-subtitle { text-align: center; margin-left: 0; } .dd-cta-list { margin-left: 0; padding-left: 30px; } .dd-cta-button { align-self: stretch; margin-left: 0; } } @media (max-width: 900px) { .dd-cta-left, .dd-cta-right { padding: 3%; } .dd-cta-title { font-size: var(--dd-text-lg); } .dd-cta-stars { font-size: 1.1em; } .dd-cta-list { font-size: var(--dd-text-sm); padding-left: 5.6em; } } @media (max-width: 600px) { .dd-cta-container { padding: var(--dd-space-3); } .dd-cta-row { gap: var(--dd-space-3); } .dd-cta-left, .dd-cta-right { flex-basis: 100%; text-align: left; } .dd-cta-subtitle, .dd-cta-title { text-align: center; } .dd-cta-testimonial { margin: var(--dd-space-3) 0; padding: var(--dd-space-3) var(--dd-space-3) var(--dd-space-4); } .dd-quote { font-size: var(--dd-text-md) !important; } }