/* >>> assets/css/fonts.css <<< */ /* ========================================================================= GAY DALLAS — CROSSROADS · LOCAL FONTS Self-hosted @font-face declarations. Latin subset only. Fonts downloaded from fonts.gstatic.com and served from the theme so the site has no runtime dependency on Google Fonts (resilient offline, no EU GDPR concern, portable to any host). Source fonts (all Open Font License / Apache-2.0): - Bricolage Grotesque — OFL 1.1 (Ateliertriay) - DM Sans — OFL 1.1 (Colophon Foundry, Indian Type Foundry, Google) - Instrument Serif — OFL 1.1 (Instrument / Rodrigo Fuenzalida & Jacob Wise) - JetBrains Mono — OFL 1.1 (JetBrains) ========================================================================= */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(https://discovergaydallas.com/wp-content/themes/dgd-afterdark/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(https://discovergaydallas.com/wp-content/themes/dgd-afterdark/assets/fonts/dm-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(https://discovergaydallas.com/wp-content/themes/dgd-afterdark/assets/fonts/dm-sans-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://discovergaydallas.com/wp-content/themes/dgd-afterdark/assets/fonts/instrument-serif-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://discovergaydallas.com/wp-content/themes/dgd-afterdark/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://discovergaydallas.com/wp-content/themes/dgd-afterdark/assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://discovergaydallas.com/wp-content/themes/dgd-afterdark/assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* >>> assets/css/base.css <<< */ /* ========================================================================= GAY DALLAS — CROSSROADS · BASE Tokens, resets, typography defaults, shared utility classes. ========================================================================= */ :root { /* Site is always dark — owners' decision. No light mode toggle. color-scheme is 'dark' so form controls, scrollbars, and browser UI render in their dark variants. */ color-scheme: dark; /* All --dgd-* tokens below alias theme.json. theme.json is the single source of truth for every value; these aliases exist so the ~1000 downstream `var(--dgd-*)` usages in this codebase keep working. New code should prefer `var(--wp--preset--color--*)` etc. directly. Hardcoded fallbacks are kept so the editor preview iframe still renders correctly in the brief window before theme.json resolves. */ /* ---------- Permanently-dark chrome surfaces ---------- */ --dgd-night: var(--wp--preset--color--night, #0F0B23); --dgd-night-deep: var(--wp--preset--color--night-darker, #05020E); --dgd-on-dark: var(--wp--preset--color--on-dark, #FFFDF7); --dgd-on-dark-soft: var(--wp--custom--dgd--on-dark--soft, rgba(255, 253, 247, 0.85)); --dgd-on-dark-muted: var(--wp--custom--dgd--on-dark--muted, rgba(255, 253, 247, 0.55)); --dgd-on-dark-border: var(--wp--custom--dgd--on-dark--border, rgba(255, 253, 247, 0.18)); /* ---------- Surface + text ---------- NOTE: theme.json slug "ivory" maps to #0C0820 (the deep midnight bg). Naming is historical — don't follow the slug literally. */ --dgd-midnight: var(--wp--preset--color--ivory, #0C0820); /* primary bg */ --dgd-bone: var(--wp--preset--color--bone, #1A1440); /* elevated card */ --dgd-ink: var(--wp--preset--color--ink, #F4EEE0); /* body text */ --dgd-ink-soft: var(--wp--preset--color--ink-soft, #C8BFDC); --dgd-muted: var(--wp--preset--color--muted, #A89FC4); --dgd-border: var(--wp--preset--color--border, #3A2D6A); --dgd-card-ring: var(--wp--custom--dgd--card-ring, 0 0 0 1px rgba(255,255,255,0.08)); /* Section washes */ --dgd-blush: var(--wp--preset--color--blush, #2A0A1C); --dgd-sky-wash: var(--wp--preset--color--sky-wash, #062538); --dgd-sun-wash: var(--wp--preset--color--sun-wash, #231A0A); /* Neon accents */ --dgd-fuchsia: var(--wp--preset--color--fuchsia, #FF3889); --dgd-fuchsia-mid: var(--wp--preset--color--fuchsia-mid, #FF52A0); --dgd-fuchsia-deep: var(--wp--preset--color--fuchsia-deep, #C51864); --dgd-cyan: var(--wp--preset--color--cyan, #00C8E6); --dgd-buttercup: var(--wp--preset--color--buttercup, #FFD43B); --dgd-violet: var(--wp--preset--color--violet, #6B33FF); --dgd-violet-bright: var(--wp--preset--color--violet-bright, #A78BFA); --dgd-mint: var(--wp--preset--color--mint, #3DF5C9); --dgd-tangerine: var(--wp--preset--color--tangerine, #FF7A33); /* ---------- "On-accent" text tokens ---------- Pre-computed to meet WCAG AA against their matching accent background. NEVER pair `color: var(--dgd-fuchsia)` with a fuchsia gradient — that was the segmenter-CTA bug from 2026-04. The rule is "color token family must not match the background token family." */ --dgd-on-fuchsia: var(--wp--custom--dgd--on-accent--fuchsia, #FFFDF7); /* 3.36:1 on #FF3889 — large text only */ --dgd-on-violet: var(--wp--custom--dgd--on-accent--violet, #FFFDF7); /* 6.94:1 on #6B33FF */ --dgd-on-cyan: var(--wp--custom--dgd--on-accent--cyan, #0F0B23); /* 10.8:1 on #00C8E6 */ --dgd-on-buttercup: var(--wp--custom--dgd--on-accent--buttercup, #0F0B23); /* 12.2:1 on #FFD43B */ --dgd-on-mint: var(--wp--custom--dgd--on-accent--mint, #0F0B23); /* 11.6:1 on #3DF5C9 */ --dgd-on-tangerine: var(--wp--custom--dgd--on-accent--tangerine, #0F0B23); /* 6.1:1 on #FF7A33 */ /* Alpha-aware versions for use in rgba() calculations */ --dgd-ink-rgb: var(--wp--custom--dgd--rgb--ink, 244, 238, 224); --dgd-midnight-rgb: var(--wp--custom--dgd--rgb--midnight, 10, 7, 22); --dgd-radius-sm: var(--wp--custom--dgd--radius--sm, 10px); --dgd-radius-md: var(--wp--custom--dgd--radius--md, 18px); --dgd-radius-lg: var(--wp--custom--dgd--radius--lg, 28px); --dgd-radius-xl: var(--wp--custom--dgd--radius--xl, 44px); --dgd-shadow-soft: var(--wp--preset--shadow--soft, 0 2px 10px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3)); --dgd-shadow-card: var(--wp--preset--shadow--card, 0 10px 28px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.35)); --dgd-shadow-lift: var(--wp--preset--shadow--lift, 0 24px 48px rgba(0,0,0,0.6), 0 8px 18px rgba(0,0,0,0.4)); --dgd-gutter: var(--wp--custom--dgd--gutter, clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem)); --dgd-wide: 1320px; /* layout.wideSize — not exposed as a CSS var by theme.json */ --dgd-content: 760px; /* layout.contentSize — same */ --dgd-ease: var(--wp--custom--dgd--ease, cubic-bezier(0.2, 0.8, 0.2, 1)); /* ---------- Cinema poster signature tokens ---------- For .cinema-* utilities only. Non-cinema components keep using --dgd-fuchsia / --dgd-cyan etc. directly — DON'T reach for these outside .cinema-poster surfaces. --cinema-accent is the rotation lever: override per-page via data-cinema-accent="cyan|buttercup|tangerine|violet|mint" on a .cinema-poster (or its parent), and the offset shadow on .cinema-cta + the rule prefix on .cinema-headline__line follow. */ --cinema-grade: contrast(1.15) saturate(0.9) brightness(0.7) hue-rotate(-5deg); --cinema-grain-opacity: 0.4; --cinema-frame-size: 32px; --cinema-frame-inset: 1.5rem; --cinema-frame-stroke: 1.5; --cinema-accent: var(--dgd-fuchsia); --cinema-accent-on: var(--dgd-on-dark); --cinema-marker-color: var(--dgd-buttercup); --cinema-spine-tracking: 0.32em; --cinema-marker-tracking: 0.28em; --cinema-meta-tracking: 0.2em; } /* ---------- Base typography ---------- */ body { background: var(--dgd-midnight); color: var(--dgd-ink); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } html { /* Clip prevents the offcanvas drawer (transformed offscreen) from extending document scrollWidth past the viewport. Body alone wasn't enough on mobile because html is the scroll container. */ overflow-x: clip; } ::selection { background: var(--dgd-fuchsia); color: var(--dgd-midnight); } /* ---------- Skip-to-content link ---------- */ .dgd-skip-link { position: absolute; top: -100%; left: 1rem; z-index: 100000; padding: 0.75rem 1.5rem; background: var(--dgd-fuchsia); color: var(--dgd-midnight); font-weight: 700; font-size: 0.875rem; text-decoration: none; border-radius: var(--dgd-radius-sm); outline: 3px solid var(--dgd-violet-bright); outline-offset: 2px; } .dgd-skip-link:focus { top: 0.75rem; color: var(--dgd-midnight); } /* ---------- Canonical breakpoints ---------- The theme has historically grown 22+ unique @media values across CSS files. Going forward, every NEW @media (min/max-width) rule MUST use one of the four canonical values below. Legacy rules at other widths are tracked in `bin/breakpoint.allowlist`; the lint-tokens.sh script gates new drift. --dgd-bp-sm: 480px — phone landscape / phablet --dgd-bp-md: 768px — tablet --dgd-bp-lg: 1024px — small desktop --dgd-bp-xl: 1280px — large desktop CSS @media doesn't read custom properties, so these aren't `var()`'able. The values exist only as documentation + lint targets. Use them as literals in @media rules: `@media (max-width: 768px)`. */ /* ---------- Eyebrow label ---------- `.dgd-eyebrow` is the canonical primitive: mono uppercase, fuchsia by default, with a 28×2px rule prefix in currentColor. Documented modifiers (compose with the base): - .dgd-eyebrow--alt cyan tone; pairs with cinema family - .dgd-eyebrow--soft on-dark-soft tone; for hero overlays / dark surfaces - .dgd-eyebrow--ink body-text tone; for in-flow editorial labels - .dgd-eyebrow--no-bar drops the rule prefix (when paired with a live-dot) Scoped variants that intentionally diverge — keep, don't migrate: - .cinema-eyebrow (cinema poster signature: cyan, 0.32em tracking) - .dgd-hero__eyebrow (Crossroads hero: text-shadow halo for photo bg) - .dgd-rightnow__eyebrow (carries the live-pulse dot) - .dgd-concierge-slide__kicker (concierge slide deck) These five-plus duplicates that REPEAT the base typography unnecessarily should compose `.dgd-eyebrow` as a sibling class instead of restating font rules: `.dgd-sec-head__eyebrow`, `.dgd-mega__eyebrow`, `.dgd-strip__cta-eyebrow`, `.dgd-nhoods__eyebrow`, `.dgd-from-editor__link-eyebrow`. The lint guard nudges new code toward composition. */ .is-style-dgd-ad-eyebrow, .dgd-eyebrow { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dgd-fuchsia); line-height: 1; display: inline-flex; align-items: center; gap: 0.5rem; } .dgd-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; } .dgd-eyebrow--alt { color: var(--dgd-cyan); } .dgd-eyebrow--soft { color: var(--dgd-on-dark-soft); } .dgd-eyebrow--ink { color: var(--dgd-ink-soft); } .dgd-eyebrow--no-bar::before { display: none; } /* ---------- Crosswalk divider (6 bars) ---------- */ .is-style-dgd-ad-crosswalk, .dgd-crosswalk { --bar-h: 10px; position: relative; height: calc(var(--bar-h) * 6 + 10px); width: 100%; background: transparent; display: grid; grid-template-rows: repeat(6, 1fr); gap: 2px; padding: 0; margin: 0; } .is-style-dgd-ad-crosswalk::before, .is-style-dgd-ad-crosswalk::after, .dgd-crosswalk::before, .dgd-crosswalk::after { display: none; } .dgd-crosswalk__bar { display: block; height: 100%; border-radius: 4px; } .dgd-crosswalk__bar--1 { background: var(--dgd-fuchsia); } .dgd-crosswalk__bar--2 { background: var(--dgd-tangerine); } .dgd-crosswalk__bar--3 { background: var(--dgd-buttercup); } .dgd-crosswalk__bar--4 { background: var(--dgd-mint); } .dgd-crosswalk__bar--5 { background: var(--dgd-cyan); } .dgd-crosswalk__bar--6 { background: var(--dgd-violet); } /* ---------- Neon pill buttons (block style: is-style-dgd-ad-neon) ---------- */ .wp-block-button.is-style-dgd-ad-neon .wp-block-button__link { background: var(--dgd-fuchsia) !important; color: var(--dgd-midnight) !important; border-radius: 999px; font-family: "DM Sans", sans-serif; font-weight: 700; padding: 1rem 1.9rem; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: transform 0.25s var(--dgd-ease), box-shadow 0.25s var(--dgd-ease), background 0.25s var(--dgd-ease); box-shadow: 0 10px 24px rgba(255,31,122,0.28); } .wp-block-button.is-style-dgd-ad-neon .wp-block-button__link:hover { background: var(--dgd-violet) !important; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(107,51,255,0.35); } /* ---------- Outline pill (block style: is-style-dgd-ad-outline) ---------- */ .wp-block-button.is-style-dgd-ad-outline .wp-block-button__link { background: transparent !important; color: var(--dgd-ink) !important; border: 2px solid var(--dgd-ink) !important; border-radius: 999px; padding: calc(1rem - 2px) calc(1.9rem - 2px); font-family: "DM Sans", sans-serif; font-weight: 700; text-decoration: none; transition: all 0.25s var(--dgd-ease); } .wp-block-button.is-style-dgd-ad-outline .wp-block-button__link:hover { background: var(--dgd-ink) !important; color: var(--dgd-midnight) !important; } /* ---------- Ghost pill (block style: is-style-dgd-ad-ghost) ---------- */ .wp-block-button.is-style-dgd-ad-ghost .wp-block-button__link { background: transparent !important; color: var(--dgd-ink-soft) !important; border: 0 !important; border-radius: 999px; padding: 1rem 1.4rem; font-family: "DM Sans", sans-serif; font-weight: 600; text-decoration: none; transition: color 0.2s var(--dgd-ease), background 0.2s var(--dgd-ease); } .wp-block-button.is-style-dgd-ad-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--dgd-ink) !important; } /* ---------- Crossroads card surface ---------- */ .wp-block-group.is-style-dgd-ad-card { background: var(--dgd-bone); color: var(--dgd-ink); border: 1px solid var(--dgd-border); border-radius: var(--dgd-radius-md); padding: clamp(1.25rem, 1rem + 1vw, 2rem); box-shadow: var(--dgd-shadow-card); transition: transform 0.25s var(--dgd-ease), box-shadow 0.25s var(--dgd-ease); } .wp-block-group.is-style-dgd-ad-card:hover { transform: translateY(-2px); box-shadow: var(--dgd-shadow-lift); } .wp-block-group.is-style-dgd-ad-card h2, .wp-block-group.is-style-dgd-ad-card h3, .wp-block-group.is-style-dgd-ad-card h4 { color: var(--dgd-ink); } /* ---------- Container + section utility ---------- */ .dgd-wrap { max-width: var(--dgd-wide); margin-inline: auto; padding-inline: var(--dgd-gutter); } .dgd-section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); } .dgd-section--tight { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .dgd-bg-blush { background: var(--dgd-blush); } .dgd-bg-sky { background: var(--dgd-sky-wash); } .dgd-bg-sun { background: var(--dgd-sun-wash); } .dgd-bg-ink { background: var(--dgd-ink); color: var(--dgd-midnight); } .dgd-bg-ink h1,.dgd-bg-ink h2,.dgd-bg-ink h3,.dgd-bg-ink h4 { color: var(--dgd-midnight); } /* ---------- Readable image surface primitive ---------- Any element that layers text on top of a user-editable image (hero, card, tile, etc.) should carry .dgd-surface-image. The class bundles: 1. position: relative + isolate so ::after stacks cleanly under content 2. color: var(--dgd-on-dark) as the default safe text color 3. A bottom-weighted dark scrim so text at the bottom of the surface has guaranteed contrast even against bright images. Patterns that need a stronger floor can set --dgd-scrim-floor (0..1). Patterns that need a top-weighted or full-height scrim can override ::after directly; this primitive just guarantees the common case. */ .dgd-surface-image { position: relative; isolation: isolate; color: var(--dgd-on-dark); } .dgd-surface-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(12, 8, 32, 0) 0%, rgba(12, 8, 32, 0.35) 40%, rgba(12, 8, 32, var(--dgd-scrim-floor, 0.85)) 100% ); z-index: 0; pointer-events: none; } .dgd-surface-image > * { position: relative; z-index: 1; } /* ---------- Heading display polish ---------- */ h1, h2, h3, h4 { font-family: "Bricolage Grotesque", "Arial Black", sans-serif; font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; color: var(--dgd-ink); } .dgd-serif-italic { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; } /* ---------- Focus ---------- */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--dgd-violet-bright); outline-offset: 3px; border-radius: 4px; } /* ---------- Print ---------- */ @media print { :root { color-scheme: light; } body { background: #fff !important; color: #1a1a1a !important; font-size: 11pt; line-height: 1.5; } h1, h2, h3, h4 { color: #1a1a1a !important; } /* Hide chrome */ .dgd-site-header, .dgd-site-footer, .dgd-drawer, .dgd-mega, .dgd-search-overlay, .dgd-hero, .dgd-rightnow, .dgd-newsletter, .dgd-star-btn, .dgd-sticky-bar, .dgd-share-section, .wp-block-button, nav { display: none !important; } /* Show link URLs */ a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; word-break: break-all; } a[href^="#"]::after, a[href^="javascript"]::after { content: ""; } /* Cards & sections */ .dgd-directory__card, .dgd-events__card, .wp-block-group { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; background: #fff !important; color: #1a1a1a !important; } img { max-width: 100% !important; } } /* ---------- Reduced-motion safety net ---------- Final fallback covering any animation/transition added later that doesn't have its own `prefers-reduced-motion` handling. Components opting into intentional motion (hero carousel, marquee) already branch on this media query earlier in the cascade. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Fluidity ---------- Smooth in-page anchor scrolling for skip-link, jump links, table of contents. Gated on no-preference so the reduced-motion override above still wins. View Transitions provide a free cross-fade on every same-origin navigation in browsers that support it (Chrome 111+, Safari 18+); browsers without support continue to use standard hard navigation. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @view-transition { navigation: auto; } /* Patterns can render zero output (e.g. dgd-afterdark/home-neighborhoods * self-hides when fewer than 3 neighborhoods are published). When that * happens the front-page.html spacing wrapper is left as a .wp-block-group * containing only whitespace text nodes (so `:empty` won't match). Collapse * any wrapper that has no element children. */ main .wp-block-group:not(:has(*)) { display: none; } /* >>> assets/css/header.css <<< */ /* ========================================================================= GAY DALLAS — CROSSROADS · HEADER Visit-Houston-fluid nav, brighter/bolder Dallas execution. Two-tier: utility bar + main nav with mega panels. ========================================================================= */ .dgd-site-header { position: sticky; top: 0; z-index: 900; background: var(--dgd-midnight); border-bottom: 1px solid var(--dgd-border); transition: box-shadow 0.3s var(--dgd-ease); } .dgd-site-header.is-scrolled { box-shadow: 0 8px 24px rgba(15,11,35,0.08); } /* ---------- Utility Bar (top strip) — ALWAYS DARK ---------- */ .dgd-util { background: var(--dgd-night); color: var(--dgd-on-dark); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .dgd-util__inner { max-width: var(--dgd-wide); margin-inline: auto; padding: 0.6rem var(--dgd-gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .dgd-util__loc { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--dgd-on-dark); opacity: 0.85; font-family: var(--dgd-font-mono, "JetBrains Mono", monospace); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; white-space: nowrap; } .dgd-util__loc svg { color: var(--dgd-fuchsia); flex-shrink: 0; } .dgd-util__left, .dgd-util__right { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .dgd-util__left li, .dgd-util__right li { display: inline-flex; } .dgd-util a { color: var(--dgd-on-dark); text-decoration: none; padding: 0.45rem 0.75rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.4rem; transition: background 0.2s var(--dgd-ease), color 0.2s var(--dgd-ease); } /* On touch viewports, ensure a 44px tap target on the utility-nav pills. Desktop keeps the compact pill height to preserve the slim header strip. */ @media (max-width: 860px) { .dgd-util a { min-height: 44px; } } .dgd-util a:hover { background: var(--dgd-fuchsia); color: var(--dgd-on-dark); } .dgd-util__weather { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border: 1px solid var(--dgd-on-dark-border); border-radius: 999px; line-height: 1; color: var(--dgd-on-dark); } .dgd-util__weather svg { width: 16px; height: 16px; } .dgd-util__weather strong { color: var(--dgd-buttercup); font-weight: 700; } .dgd-util__trip { /* Use fuchsia-deep (#C51864) instead of fuchsia (#FF3889) so the white label text hits AA contrast (6.0:1 vs 3.34:1). The hover state promotes to full fuchsia + violet shift, which doubles as a visual affordance. */ background: var(--dgd-fuchsia-deep); color: var(--dgd-on-dark) !important; font-weight: 700; padding: 0.5rem 0.9rem !important; } .dgd-util__trip:hover { background: var(--dgd-violet) !important; } .dgd-util__trip-count { display: inline-block; background: var(--dgd-on-dark); color: var(--dgd-fuchsia-deep); border-radius: 999px; min-width: 1.1rem; height: 1.1rem; font-size: 0.7rem; font-weight: 800; line-height: 1.1rem; text-align: center; padding: 0 0.3rem; } @media (max-width: 860px) { .dgd-util__inner { gap: 0.5rem; } /* Keep About + Newsletter visible; hide Submit/Partner + Weather + Location */ .dgd-util__left li:nth-child(2), .dgd-util__left li:nth-child(3) { display: none; } .dgd-util__weather { display: none; } .dgd-util__loc { display: none; } .dgd-util a { padding: 0.4rem 0.6rem; } } @media (max-width: 480px) { .dgd-util { font-size: 0.7rem; } /* On very narrow screens keep only About + My Trip */ .dgd-util__left li:not(:first-child) { display: none; } } /* ---------- Main Nav Bar ---------- */ .dgd-main { position: relative; background: var(--dgd-midnight); } .dgd-main__inner { max-width: var(--dgd-wide); margin-inline: auto; padding: 1rem var(--dgd-gutter); display: flex; align-items: center; gap: 2rem; } /* Logo */ .dgd-logo { display: flex; flex-direction: column; line-height: 0.9; text-decoration: none; color: var(--dgd-ink); position: relative; } .dgd-logo__tag { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dgd-fuchsia); font-weight: 600; margin-bottom: 0.3rem; } .dgd-logo__mark { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--dgd-ink); } .dgd-logo__mark em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--dgd-fuchsia); } /* Primary nav */ .dgd-nav { flex: 1; display: flex; justify-content: center; } .dgd-nav__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.25rem; } .dgd-nav__item { position: relative; } .dgd-nav__link { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: 0; padding: 0.75rem 1rem; font-family: "DM Sans", sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--dgd-ink); text-decoration: none; cursor: pointer; border-radius: 999px; transition: color 0.2s var(--dgd-ease), background 0.2s var(--dgd-ease); position: relative; } .dgd-nav__link::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 3px; background: var(--dgd-fuchsia); border-radius: 2px; transform: translateX(-50%); transition: width 0.3s var(--dgd-ease); } .dgd-nav__link:hover, .dgd-nav__link[aria-expanded="true"] { color: var(--dgd-fuchsia); } .dgd-nav__link:hover::after, .dgd-nav__link[aria-expanded="true"]::after { width: calc(100% - 2rem); } .dgd-nav__link .dgd-nav__caret { transition: transform 0.25s var(--dgd-ease); } .dgd-nav__link[aria-expanded="true"] .dgd-nav__caret { transform: rotate(180deg); } /* Header actions — always anchored far right. On desktop, .dgd-nav has flex:1 filling the middle; actions land flush right. On mobile when .dgd-nav is hidden, margin-left:auto still pushes actions all the way right so they don't cluster against the logo. */ .dgd-header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .dgd-icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 999px; color: var(--dgd-ink); cursor: pointer; transition: all 0.2s var(--dgd-ease); } .dgd-icon-btn:hover { background: var(--dgd-ink); color: var(--dgd-midnight); border-color: var(--dgd-ink); transform: translateY(-1px); } .dgd-icon-btn--menu { display: none; } .dgd-icon-btn__bar { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: absolute; } .dgd-icon-btn__bar:nth-child(1) { transform: translateY(-6px); } .dgd-icon-btn__bar:nth-child(3) { transform: translateY(6px); } .dgd-cta-btn { background: var(--dgd-fuchsia); color: var(--dgd-midnight); border: 0; border-radius: 999px; padding: 0.85rem 1.5rem; font-family: "DM Sans", sans-serif; font-size: 0.95rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.25s var(--dgd-ease); box-shadow: 0 10px 24px rgba(255,31,122,0.28); white-space: nowrap; } .dgd-cta-btn:hover { background: var(--dgd-violet); box-shadow: 0 16px 32px rgba(107,51,255,0.35); transform: translateY(-1px); } /* Mobile breakpoint: switch to hamburger + drawer below the canonical 1024 px */ @media (max-width: 1024px) { .dgd-nav { display: none; } .dgd-icon-btn--menu { display: inline-flex; position: relative; } /* Scoped: only the persistent-header CTA hides at mobile widths; the same button rendered inside the drawer's lead area stays visible. */ .dgd-header-actions .dgd-cta-btn { display: none; } .dgd-mega { display: none !important; } } @media (max-width: 640px) { .dgd-main__inner { gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .dgd-header-actions { gap: 0.35rem; } .dgd-logo__tag { font-size: 0.6rem; margin-bottom: 0.2rem; } .dgd-logo__mark { font-size: 1.5rem; } } /* Drawer top logo tightening */ @media (max-width: 480px) { .dgd-drawer__top { padding: 1rem 1.25rem; } .dgd-drawer__nav a { font-size: 1.25rem; padding: 1rem 1.25rem; } .dgd-drawer__sub a { padding-left: 2.25rem; } .dgd-drawer__util { padding: 1.25rem; } } /* ---------- Mega Panels ---------- */ .dgd-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--dgd-midnight); border-top: 1px solid var(--dgd-border); border-bottom: 4px solid var(--dgd-fuchsia); box-shadow: 0 24px 48px rgba(15,11,35,0.12); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s var(--dgd-ease), transform 0.25s var(--dgd-ease), visibility 0.25s; pointer-events: none; z-index: 899; } .dgd-mega[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .dgd-mega__inner { max-width: var(--dgd-wide); margin-inline: auto; padding: 2.5rem var(--dgd-gutter) 2.5rem; } .dgd-mega__header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .dgd-mega__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dgd-fuchsia); margin: 0 0 0.35rem; font-weight: 600; } .dgd-mega__title { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0; color: var(--dgd-ink); } .dgd-mega__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; color: var(--dgd-fuchsia); font-weight: 400; } .dgd-mega__close { background: var(--dgd-bone); border: 1px solid var(--dgd-border); width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--dgd-ink); cursor: pointer; transition: all 0.2s var(--dgd-ease); } .dgd-mega__close:hover { background: var(--dgd-ink); color: var(--dgd-midnight); } .dgd-mega__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; } @media (max-width: 900px) { .dgd-mega__grid { grid-template-columns: 1fr; gap: 2rem; } } .dgd-mega__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 720px) { .dgd-mega__cards { grid-template-columns: 1fr; } } /* Sub-section inside a mega panel (e.g. Neighborhoods inside Plan Your Visit). Visually separated with a dashed rule so it reads as its own band without closing the panel. */ .dgd-mega__section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px dashed var(--dgd-border); } .dgd-mega__section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; } .dgd-mega__section-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--dgd-ink); margin: 0.15rem 0 0; } .dgd-mega__section-link { color: var(--dgd-fuchsia); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: transform 0.2s var(--dgd-ease); display: inline-block; } .dgd-mega__section-link:hover, .dgd-mega__section-link:focus-visible { transform: translateX(2px); } .dgd-mega__card { display: flex; flex-direction: column; text-decoration: none; color: var(--dgd-ink); background: var(--dgd-bone); border-radius: var(--dgd-radius-md); overflow: hidden; border: 1px solid var(--dgd-border); transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease), border-color 0.3s var(--dgd-ease); } .dgd-mega__card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(15,11,35,0.12); border-color: var(--dgd-fuchsia); } .dgd-mega__card-image { aspect-ratio: 4/3; background: var(--dgd-blush); position: relative; display: flex; align-items: flex-start; padding: 1rem; } .dgd-mega__card-badge { display: inline-block; background: var(--dgd-midnight); color: var(--dgd-ink); font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 999px; box-shadow: var(--dgd-shadow-soft); } .dgd-mega__card-body { padding: 1rem 1.1rem 1.25rem; } .dgd-mega__card-body h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.25rem; line-height: 1.1; } .dgd-mega__card-body p { margin: 0; font-size: 0.85rem; color: var(--dgd-muted); line-height: 1.4; } .dgd-mega__links { display: flex; flex-direction: column; gap: 0.5rem; } .dgd-mega__section-label { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dgd-muted); margin: 0 0 0.75rem; } .dgd-mega__links ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem; } .dgd-mega__links a { display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: var(--dgd-ink); font-size: 0.95rem; font-weight: 600; padding: 0.55rem 0; border-bottom: 1px solid var(--dgd-border); transition: color 0.2s var(--dgd-ease), padding 0.25s var(--dgd-ease); } .dgd-mega__links a::after { content: "→"; opacity: 0; transform: translateX(-4px); transition: all 0.25s var(--dgd-ease); color: var(--dgd-fuchsia); } .dgd-mega__links a:hover { color: var(--dgd-fuchsia); padding-left: 0.5rem; } .dgd-mega__links a:hover::after { opacity: 1; transform: translateX(0); } /* ---------- Mobile drawer ---------- */ .dgd-drawer { position: fixed; inset: 0; background: rgba(15,11,35,0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--dgd-ease), visibility 0s 0.3s; z-index: 1100; } .dgd-drawer[aria-hidden="false"] { visibility: visible; pointer-events: auto; opacity: 1; backdrop-filter: blur(4px); transition: opacity 0.3s var(--dgd-ease), visibility 0s 0s; } .dgd-drawer__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(92vw, 420px); background: var(--dgd-midnight); box-shadow: -20px 0 40px rgba(0,0,0,0.3); transform: translateX(100%); transition: transform 0.35s var(--dgd-ease); display: flex; flex-direction: column; overflow-y: auto; } /* Scroll shadow adjusted for dark theme */ .dgd-site-header.is-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,0.5); } /* Utility bar deepens slightly to separate from main nav */ .dgd-util { background: var(--dgd-night-deep); } .dgd-drawer[aria-hidden="false"] .dgd-drawer__panel { transform: translateX(0); } .dgd-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--dgd-border); } .dgd-drawer__lead { padding: 1.25rem 1.5rem 0; } .dgd-drawer__lead .dgd-cta-btn { width: 100%; justify-content: center; padding: 1rem 1.5rem; font-size: 1rem; } .dgd-drawer__nav { list-style: none; margin: 0; padding: 1rem 0; } .dgd-drawer__nav li { border-bottom: 1px solid var(--dgd-border); } .dgd-drawer__nav a { display: block; padding: 1.15rem 1.5rem; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--dgd-ink); text-decoration: none; transition: all 0.2s var(--dgd-ease); } .dgd-drawer__nav a:hover, .dgd-drawer__nav a:focus { color: var(--dgd-fuchsia); padding-left: 2rem; } .dgd-drawer__sub { list-style: none; margin: 0; padding: 0 0 1rem 0; background: var(--dgd-bone); } .dgd-drawer__sub li { border: 0; } .dgd-drawer__sub a { font-family: "DM Sans", sans-serif; font-size: 0.95rem; font-weight: 600; padding: 0.6rem 1.5rem 0.6rem 2.75rem; color: var(--dgd-ink-soft); position: relative; } .dgd-drawer__sub a::before { content: "→"; position: absolute; left: 1.75rem; color: var(--dgd-fuchsia); } .dgd-drawer__sub a:hover, .dgd-drawer__sub a:focus { color: var(--dgd-fuchsia); padding-left: 3rem; } .dgd-drawer__util { margin-top: auto; padding: 1.5rem; background: var(--dgd-blush); } .dgd-drawer__util-title { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dgd-fuchsia); font-weight: 600; margin: 0 0 0.75rem; } .dgd-drawer__util ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .dgd-drawer__util a { text-decoration: none; color: var(--dgd-ink); font-weight: 600; /* Drawer secondary links (Submit, Partner, Newsletter, My Trip) need a proper touch target — they were rendering at ~21px tall before. */ display: flex; align-items: center; min-height: 44px; padding-block: 0.25rem; } /* ---------- Drawer sub-menu accordion (chevron next to parent link) ---------- */ .dgd-drawer__row { display: flex; align-items: center; justify-content: space-between; } .dgd-drawer__row a { flex: 1 1 auto; } .dgd-drawer__expand { background: transparent; border: 0; color: var(--dgd-ink); padding: 0.75rem 1.5rem; min-height: 44px; min-width: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.15s var(--dgd-ease), transform 0.2s var(--dgd-ease); } .dgd-drawer__expand:hover { background: var(--dgd-bone); } .dgd-drawer__expand svg { transition: transform 0.2s var(--dgd-ease); } .dgd-drawer__expand[aria-expanded="true"] svg { transform: rotate(180deg); } /* ---------- Visible focus ring on interactive header elements ---------- Uses :focus-visible so mouse-click focus doesn't also ring the button. Keyboard (Tab) users get a clear indicator on every focusable control. */ .dgd-nav__link:focus-visible, .dgd-icon-btn:focus-visible, .dgd-cta-btn:focus-visible, .dgd-drawer__nav a:focus-visible, .dgd-drawer__expand:focus-visible, .dgd-drawer__sub a:focus-visible, .dgd-drawer__util a:focus-visible, .dgd-util a:focus-visible, .dgd-mega__card:focus-visible, .dgd-mega__close:focus-visible, .dgd-logo:focus-visible { outline: 2px solid var(--dgd-fuchsia); outline-offset: 2px; border-radius: 6px; } /* ---------- Wide-desktop mega-panel cap ---------- Keep mega-panel content from stretching into oversized cards on >1600px monitors. --dgd-wide (1320px) already caps most layout; this belt-and- suspenders ensures cards inside the mega stay tidy. */ @media (min-width: 1600px) { .dgd-mega__inner { padding-block: 3rem; } .dgd-mega__cards { max-width: 960px; } } /* >>> assets/css/components/hero.css <<< */ /* ============================================================ * Hero — The Crossroads. Slide system, veil, scrim, low-power * fallback, content stack, dots + pause control. * * Extracted from components.css (was lines 21–477). * * Loads BEFORE components.css so that the responsive overrides * later in components.css (e.g. lines 3406–3433, 3994–4012, * 6258–6278, plus the HERO REWORK section at 7755+) and the * `.dgd-hero__identity` augmentation in components/eyebrows.css * still win. * ============================================================ */ /* ============================================================ * .dgd-hero-deck — canonical subtitle/lede primitive for hero * patterns. Pairs with `.dgd-eyebrow` above the title and any * cinema/tonight/concierge scoped variant alongside. * * The three hero families (cinema, tonight, concierge) keep * their existing scoped classes for color/typography tweaks: * .cinema-tagline, .dgd-tonight-hero__lede, * .dgd-concierge-slide__sub * Compose with the primitive — it sets baseline size, leading, * max-width, and on-dark-soft color so all hero subtitles share * the same starting point. Scoped variants override only what * they need to. * ============================================================ */ .dgd-hero-deck { margin: 0 0 1.5rem; font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--dgd-on-dark-soft); max-width: 60ch; font-weight: 400; } /* ================================================ HERO — The Crossroads ================================================ */ .dgd-hero { position: relative; min-height: clamp(560px, 78vh, 820px); /* svh falls back to vh on unsupported browsers */ min-height: clamp(560px, 78svh, 820px); overflow: hidden; isolation: isolate; background: var(--dgd-night); } /* Identity bar — sits above the slide stack, rides every slide. Establishes * "this is the guide" before the rotating event slide steals the eye. */ .dgd-hero__identity { position: absolute; inset: 0 0 auto 0; z-index: 4; margin: 0; padding: 0.75rem 1.5rem; background: linear-gradient(180deg, rgba(5,2,14,0.78) 0%, rgba(5,2,14,0.45) 70%, transparent 100%); color: var(--dgd-on-dark-soft); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.85rem; text-shadow: 0 1px 8px rgba(0,0,0,0.5); pointer-events: none; } .dgd-hero__identity-brand { color: var(--dgd-on-dark); font-weight: 700; } .dgd-hero__identity-sep { color: var(--dgd-fuchsia); opacity: 0.85; } @media (max-width: 560px) { .dgd-hero__identity { font-size: 0.6rem; letter-spacing: 0.14em; gap: 0.35rem 0.55rem; padding: 0.6rem 1rem; } } /* Slides container — holds absolutely-positioned slide stack */ .dgd-hero__slides { position: relative; width: 100%; min-height: clamp(560px, 78svh, 820px); } /* ========== HERO SLIDE SYSTEM — fluid, adaptive, graceful ========== Architecture: - Each slide = absolute-positioned article with media + veil + content - Crossfade between slides (2s, ease-out-quart) — the "outer" transition - Per-slide reveal animation (9s) — blur→unblur + Ken Burns + continuous drift - Local text scrim (radial) ensures text always has contrast on any image - Per-slide text_tint modifier (normal/strong/soft) for light vs dark photos - Low-power fallback: static image + cheap crossfade only */ /* Slide crossfade — outgoing slides gently push forward (scale 1.04) as * they fade so the handoff has a direction; incoming slides settle in * from the same scale to their natural 1.0. Paired with the continuous * Ken Burns on .dgd-hero__media, this gives every transition two layers * of motion — a slide-level "lift-off" plus an image-level drift. */ .dgd-hero__slide { position: absolute; inset: 0; display: flex; align-items: flex-end; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.04); will-change: opacity, transform; transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 1.2s; } .dgd-hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); } /* Media layer — sharp from frame one, with a single very subtle zoom. Ken Burns directional drift used to live here but read as motion overload when stacked with the crossfade + content rise; we keep just a slow uniform scale so the image breathes without competing for attention. */ .dgd-hero__media { position: absolute; inset: -3%; z-index: 0; background-size: cover; background-position: center; filter: saturate(1.15) contrast(1.03); transform: scale(1); will-change: transform; } .dgd-hero__slide.is-active .dgd-hero__media { animation: dgd-hero-reveal 14s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes dgd-hero-reveal { 0% { transform: scale(1); } 100% { transform: scale(1.04); } } /* ========== VEIL SYSTEM ========== veil = bottom-gradient scrim (global bottom darkening) slide::after = localized radial scrim focused on text zone (bottom-left) */ .dgd-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* Gentle top-to-bottom fade, leaves most of the image visible */ .dgd-hero__veil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,11,35,0.05) 0%, rgba(15,11,35,0) 40%, rgba(15,11,35,0.12) 70%, rgba(15,11,35,0.35) 100%); } /* Softer bottom scrim that fades in with the slide. The veil lives on * from frame 1 at full target opacity since the image is no longer * blur-holding, so a simple transition is enough — no multi-stage * keyframe needed. */ .dgd-hero__veil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,11,35,0) 0%, rgba(15,11,35,0) 40%, rgba(15,11,35,0.18) 65%, rgba(15,11,35,0.5) 100%); opacity: 0; transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .dgd-hero__slide.is-active .dgd-hero__veil::after { opacity: 1; } /* ========== LOCAL TEXT SCRIM ========== Radial gradient focused on bottom-left where text lives. Gives text contrast without fully blocking out the image — you can still see people, colors, and activity through the scrim. */ .dgd-hero__slide::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; /* Default scrim is calibrated for a mix of dark and bright frames — * the core 0.68 alpha guarantees legibility on warm daytime photos * (Drag Race brunch, patio shots) where the old 0.55 let the eyebrow * yellow wash out. Use .is-tint-soft to opt individual slides out. */ background: radial-gradient( ellipse 75% 60% at 25% 90%, rgba(15, 11, 35, 0.68) 0%, rgba(15, 11, 35, 0.45) 35%, rgba(15, 11, 35, 0.18) 60%, rgba(15, 11, 35, 0) 82% ); opacity: 0; transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; } .dgd-hero__slide.is-active::after { opacity: 1; } /* Per-slide tint strength — all gentler than before */ .dgd-hero__slide--tint-strong::after { background: radial-gradient( ellipse 78% 62% at 25% 92%, rgba(15, 11, 35, 0.72) 0%, rgba(15, 11, 35, 0.5) 28%, rgba(15, 11, 35, 0.22) 55%, rgba(15, 11, 35, 0.03) 80% ); } .dgd-hero__slide--tint-soft::after { background: radial-gradient( ellipse 65% 48% at 25% 92%, rgba(15, 11, 35, 0.4) 0%, rgba(15, 11, 35, 0.22) 30%, rgba(15, 11, 35, 0.08) 55%, rgba(15, 11, 35, 0) 75% ); } /* ========== LOW-POWER FALLBACK ========== Triggered via JS when device is slow, connection is slow, user prefers reduced motion, or the display updates slowly. Keeps the essential crossfade but drops expensive filter/transform animations. */ .dgd-hero.is-low-power .dgd-hero__media { filter: saturate(1.1) contrast(1.03) !important; transform: none !important; animation: none !important; } .dgd-hero.is-low-power .dgd-hero__slide.is-active .dgd-hero__media { animation: none !important; } .dgd-hero.is-low-power .dgd-hero__veil::after { animation: none !important; opacity: 1; } .dgd-hero.is-low-power .dgd-hero__slide { transition: opacity 1s ease-in-out, visibility 1s !important; } .dgd-hero.is-low-power .dgd-hero__slide::after { transition: opacity 1s ease-in-out !important; } .dgd-hero.is-low-power .dgd-hero__content { transition: opacity 0.8s ease-out !important; transform: none !important; } .dgd-hero.is-low-power .dgd-hero__slide.is-active .dgd-hero__content { opacity: 1; } .dgd-hero__content { position: relative; z-index: 3; /* above the local text scrim */ max-width: var(--dgd-wide); width: 100%; margin-inline: auto; padding: 5rem var(--dgd-gutter) 5rem; color: var(--dgd-on-dark); /* Subtle rise + fade in; arrives just after the slide begins so users have the full slide duration to read. */ transform: translateY(20px); opacity: 0; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; } /* Safety scrim hugging the copy block itself, independent of the image. * The local slide scrim is tuned to the image's bottom-left composition; * this one travels with the text, so even if a slide has a bright patch * right where the copy sits (or future slides use different compositions) * the title/subhead/eyebrow never lose contrast. Non-blocking radial so * the image still reads through. */ .dgd-hero__content::before { content: ""; position: absolute; z-index: -1; inset: -1.5rem -2.5rem -1.5rem -1.5rem; background: radial-gradient( ellipse 85% 75% at 30% 55%, rgba(15, 11, 35, 0.32) 0%, rgba(15, 11, 35, 0.12) 50%, rgba(15, 11, 35, 0) 85% ); border-radius: 1rem; pointer-events: none; } .dgd-hero__slide.is-active .dgd-hero__content { transform: translateY(0); opacity: 1; } .dgd-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--dgd-buttercup); margin: 0 0 1.5rem; /* Multi-layer shadow creates a soft halo that works on any backdrop */ text-shadow: 0 2px 8px rgba(15, 11, 35, 0.9), 0 0 16px rgba(15, 11, 35, 0.6); } .dgd-hero__eyebrow::before { content: ""; width: 36px; height: 2px; background: currentColor; } .dgd-hero__title { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(2.75rem, 1.75rem + 6vw, 8rem); font-weight: 800; font-variation-settings: "wdth" 85; letter-spacing: -0.035em; line-height: 0.9; color: var(--dgd-on-dark); margin: 0 0 1.25rem; max-width: 22ch; overflow-wrap: anywhere; /* Triple-layer shadow: close blur for crisp edge, mid blur for depth, wide blur for halo — works on any background brightness */ text-shadow: 0 1px 2px rgba(15, 11, 35, 0.8), 0 4px 16px rgba(15, 11, 35, 0.7), 0 8px 48px rgba(15, 11, 35, 0.5); } .dgd-hero__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--dgd-fuchsia); font-variation-settings: normal; letter-spacing: -0.01em; text-shadow: 0 1px 2px rgba(15, 11, 35, 0.9), 0 4px 18px rgba(255, 31, 122, 0.45), 0 8px 32px rgba(15, 11, 35, 0.7); white-space: nowrap; } .dgd-hero__subhead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.5; max-width: 56ch; /* Site-wide --dgd-on-dark-soft is 0.85 alpha — fine for dark UI * surfaces but can wash out on a bright hero frame. Bump locally * to 0.92 and deepen the mid-blur shadow for a safer contrast. */ color: rgba(255, 253, 247, 0.92); margin: 0 0 2rem; font-weight: 400; text-shadow: 0 1px 2px rgba(15, 11, 35, 0.85), 0 2px 12px rgba(15, 11, 35, 0.8); } .dgd-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } .dgd-hero__cta { display: inline-flex; align-items: center; gap: 0.65rem; padding: 1.1rem 2rem; border-radius: 999px; text-decoration: none; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 1rem; transition: all 0.3s var(--dgd-ease); } .dgd-hero__cta--primary { background: var(--dgd-fuchsia); color: var(--dgd-on-dark); box-shadow: 0 12px 32px rgba(255, 31, 122, 0.45), 0 2px 8px rgba(15, 11, 35, 0.3); } .dgd-hero__cta--primary:hover { background: var(--dgd-on-dark); color: var(--dgd-night); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255, 253, 247, 0.3), 0 4px 12px rgba(15, 11, 35, 0.35); } /* Glass ghost — legible over any photo via backdrop blur */ .dgd-hero__cta--ghost { background: rgba(15, 11, 35, 0.3); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); color: var(--dgd-on-dark); border: 1.5px solid rgba(255, 253, 247, 0.55); box-shadow: 0 2px 12px rgba(15, 11, 35, 0.25); } .dgd-hero__cta--ghost:hover { background: var(--dgd-on-dark); color: var(--dgd-night); border-color: var(--dgd-on-dark); transform: translateY(-2px); } .dgd-hero__credit { display: block; margin-top: 2.5rem; font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgd-on-dark-muted); } /* Dots + pause button sit OUTSIDE the slide stack so they're always visible */ .dgd-hero__dots { position: absolute; left: var(--dgd-gutter); bottom: 1.5rem; display: flex; gap: 0.5rem; z-index: 5; } .dgd-hero__dot { width: 30px; height: 4px; background: rgba(255,253,247,0.3); border: 0; border-radius: 999px; cursor: pointer; padding: 0; transition: background 0.3s, width 0.3s; } .dgd-hero__dot:hover { background: rgba(255,253,247,0.55); } .dgd-hero__dot.is-active { background: var(--dgd-fuchsia); width: 48px; box-shadow: 0 0 12px rgba(255, 31, 122, 0.6); } .dgd-hero__pause { position: absolute; right: var(--dgd-gutter); bottom: 1.25rem; z-index: 5; width: 36px; height: 36px; border-radius: 999px; background: rgba(255,253,247,0.12); border: 1px solid rgba(255,253,247,0.25); color: var(--dgd-on-dark); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.25s var(--dgd-ease); } .dgd-hero__pause:hover { background: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); transform: scale(1.05); } .dgd-hero__pause-icon--play { display: none; } .dgd-hero.is-paused .dgd-hero__pause-icon--play { display: block; } .dgd-hero.is-paused .dgd-hero__pause-icon--pause { display: none; } /* ============================================================ * Event poster hero (.dgd-event-poster) * * Two-column layout for single-event detail pages: clickable flyer on the * left, title/meta/description/buttons on the right. Cinema corner brackets * wrap the flyer to nod to the cinema aesthetic without obscuring the art. * Collapses to a single column at <=768px. The Add-to-Trip button lives in * a topbar above the grid so it's reachable without scrolling past the body. * ============================================================ */ .dgd-event-poster { --dgd-poster-gap: clamp(1.25rem, 2vw, 2.5rem); display: block; max-width: var(--dgd-wrap-max, 1200px); margin-inline: auto; padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 4vw, 3rem); } .dgd-event-poster__topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block-end: 1rem; margin-block-end: var(--dgd-poster-gap); border-block-end: 1px solid var(--dgd-border); } .dgd-event-poster__breadcrumb a { color: var(--dgd-ink-soft); text-decoration: none; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s var(--dgd-ease); } .dgd-event-poster__breadcrumb a:hover, .dgd-event-poster__breadcrumb a:focus-visible { color: var(--dgd-fuchsia); } .dgd-event-poster__add-trip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.65rem 1.2rem; background: transparent; color: var(--dgd-on-dark); border: 1px solid rgba(255, 253, 247, 0.25); border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: background 0.2s var(--dgd-ease), border-color 0.2s var(--dgd-ease), color 0.2s var(--dgd-ease); } .dgd-event-poster__add-trip:hover, .dgd-event-poster__add-trip:focus-visible { background: rgba(255, 56, 137, 0.12); border-color: var(--dgd-fuchsia); color: var(--dgd-fuchsia); } .dgd-event-poster__add-trip.is-saved { background: rgba(61, 245, 201, 0.12); border-color: var(--dgd-mint, #3DF5C9); color: var(--dgd-mint, #3DF5C9); } .dgd-event-poster__main { display: grid; gap: var(--dgd-poster-gap); grid-template-columns: 1fr; } @media (min-width: 768px) { .dgd-event-poster__main { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } } /* Media column ---------------------------------------------------------- */ .dgd-event-poster__media { min-width: 0; } .dgd-event-poster__frame { position: relative; /* Inherits the .cinema-frame absolute positioning context. */ } .dgd-event-poster__frame .wp-block-image { margin: 0; } .dgd-event-poster__frame .wp-block-image figure, .dgd-event-poster__frame figure.wp-block-image { margin: 0; } .dgd-event-poster__frame .wp-block-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: var(--dgd-bone); cursor: zoom-in; } .dgd-event-poster__media-fallback { aspect-ratio: 3 / 4; border-radius: 8px; background: var(--wp--preset--gradient--neon-wash, linear-gradient(135deg, #FF1F7A 0%, #6B33FF 100%)); } /* Body column ----------------------------------------------------------- */ .dgd-event-poster__body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .dgd-event-poster__eyebrow { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgd-fuchsia); } .dgd-event-poster__title { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3rem); line-height: 1.05; color: var(--dgd-on-dark); } .dgd-event-poster__meta { margin: 0; color: var(--dgd-ink-soft); font-size: 1rem; line-height: 1.45; } .dgd-event-poster__live { color: var(--dgd-cyan); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; } .dgd-event-poster__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.25rem; } .dgd-event-poster__chip { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; background: rgba(255, 253, 247, 0.06); border: 1px solid rgba(255, 253, 247, 0.14); border-radius: 999px; color: var(--dgd-ink); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; line-height: 1; } .dgd-event-poster__chip--cover { color: var(--dgd-buttercup); background: rgba(255, 212, 59, 0.12); border-color: rgba(255, 212, 59, 0.3); } .dgd-event-poster__chip--tag { color: var(--dgd-fuchsia); background: rgba(255, 56, 137, 0.12); border-color: rgba(255, 56, 137, 0.3); } .dgd-event-poster__description { color: var(--dgd-ink); font-size: 1rem; line-height: 1.6; max-width: 65ch; } .dgd-event-poster__description > :first-child { margin-block-start: 0; } .dgd-event-poster__description > :last-child { margin-block-end: 0; } .dgd-event-poster__description p { margin: 0 0 1rem; } .dgd-event-poster__description p:last-child { margin-bottom: 0; } .dgd-event-poster__description h2, .dgd-event-poster__description h3, .dgd-event-poster__description h4 { font-family: "Bricolage Grotesque", sans-serif; color: var(--dgd-on-dark); margin: 1.25rem 0 0.5rem; line-height: 1.2; } .dgd-event-poster__description ul, .dgd-event-poster__description ol { margin: 0 0 1rem 1.25rem; padding: 0; } .dgd-event-poster__description a { color: var(--dgd-fuchsia); } /* Actions ribbon sits between the poster body and the share section. * Single horizontal row of every event action (CTAs + Add-to-Trip), * centered, with flex-wrap so any button that won't fit drops to a new * line cleanly. Top border separates it from the poster description * above without competing with the share section's own separator below. * * On phones (<=480px) we force a single-column stack with full-width * tap targets so the actions feel like a deliberate menu rather than a * cramped wrap. */ .dgd-event-poster__actions { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: 0.75rem; margin-block-start: 2.5rem; padding-block-start: 2rem; border-block-start: 1px solid var(--dgd-border); } .dgd-event-poster__actions > .wp-block-button { margin: 0; } @media (max-width: 480px) { .dgd-event-poster__actions { flex-direction: column; align-items: stretch; gap: 0.65rem; } .dgd-event-poster__actions > .wp-block-button, .dgd-event-poster__actions > .wp-block-button .wp-block-button__link { width: 100%; text-align: center; } .dgd-event-poster__actions > .dgd-event-poster__add-trip { width: 100%; justify-content: center; } } .dgd-event-poster__source { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--dgd-muted); } .dgd-event-poster__source a { color: var(--dgd-ink-soft); text-decoration: none; border-block-end: 1px dotted rgba(200, 191, 220, 0.4); transition: color 0.2s var(--dgd-ease), border-color 0.2s var(--dgd-ease); } .dgd-event-poster__source a:hover, .dgd-event-poster__source a:focus-visible { color: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); } /* Prominent gradient Add-to-Trip pinned to the actions ribbon below the * poster. The same .dgd-add-to-trip-btn hydration in ui.js syncs its * label with the topbar button when toggled so both stay in lockstep. * * Typography + sizing override the base .dgd-event-poster__add-trip * (which is mono/uppercase for the small topbar variant) so this pill * matches the neon CTA pill (.is-style-dgd-ad-neon) sitting beside it * in the actions ribbon — same padding, same family, same weight, no * uppercase tracking — and the ribbon reads as a single button row. */ .dgd-event-poster__add-trip--prominent { padding: 1rem 1.9rem; gap: 0.5rem; font-family: "DM Sans", sans-serif; /* Mirror the wp-block-button__link fluid scale so this pill matches * the neon CTA height across breakpoints (14px → 20px). Hard-coding * 1rem here would visibly under-size against the neon at >320px. */ font-size: var(--wp--preset--font-size--medium, 1rem); line-height: 1.6; font-weight: 700; letter-spacing: 0; text-transform: none; background: linear-gradient(135deg, var(--dgd-fuchsia) 0%, var(--wp--preset--color--violet, #6B33FF) 100%); /* Drop the 1px border the base .__add-trip applies for the topbar * variant — the neon CTA pill beside us renders with border:0, and a * stray 1px border here adds 2px of total height. */ border: 0; color: var(--dgd-on-dark); box-shadow: 0 10px 24px rgba(255, 56, 137, 0.28); } .dgd-event-poster__add-trip--prominent:hover, .dgd-event-poster__add-trip--prominent:focus-visible { background: linear-gradient(135deg, var(--wp--preset--color--fuchsia-bright, #FF1F7A) 0%, var(--wp--preset--color--violet, #6B33FF) 100%); border: 0; color: var(--dgd-on-dark); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(107, 51, 255, 0.35); } .dgd-event-poster__add-trip--prominent.is-saved { background: rgba(61, 245, 201, 0.18); border-color: var(--dgd-mint, #3DF5C9); color: var(--dgd-mint, #3DF5C9); box-shadow: none; } @media (max-width: 480px) { .dgd-event-poster__add-trip--prominent { width: 100%; justify-content: center; } } /* >>> assets/css/components/neighborhoods.css <<< */ /* ============================================================ * Neighborhoods — `.dgd-hoods*` cards used on the home page. * * Extracted from components.css (was lines 1109–1243). * Loads BEFORE components.css so the responsive overrides * later in components.css (e.g. lines 3470–3556 inside @media * queries) still win. * ============================================================ */ .dgd-hoods { padding-block: clamp(4rem, 3rem + 5vw, 7rem); background: var(--dgd-sun-wash); } .dgd-hoods__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; margin-top: 2.5rem; } .dgd-hoods__card { grid-column: span 4; display: flex; flex-direction: column; padding: 2rem; background: var(--dgd-bone); border-radius: var(--dgd-radius-lg); text-decoration: none; color: var(--dgd-ink); border: 1px solid var(--dgd-border); transition: all 0.35s var(--dgd-ease); min-height: 280px; position: relative; overflow: hidden; } /* Data-driven card colors (set via dgd_card_color meta). */ .dgd-hoods__card[data-color="fuchsia"] { background: var(--dgd-fuchsia); color: var(--dgd-midnight); border-color: transparent; } .dgd-hoods__card[data-color="cyan"] { background: var(--dgd-cyan); color: var(--dgd-ink); border-color: transparent; } .dgd-hoods__card[data-color="violet"] { background: var(--dgd-violet); color: var(--dgd-midnight); border-color: transparent; } .dgd-hoods__card[data-color="buttercup"] { background: var(--dgd-buttercup); color: var(--dgd-ink); border-color: transparent; } .dgd-hoods__card[data-color="mint"] { background: var(--dgd-mint); color: var(--dgd-ink); border-color: transparent; } /* Neighborhood cards with a featured-image background. */ .dgd-hoods__card[data-has-image="1"] { color: var(--dgd-midnight); border-color: transparent; justify-content: flex-end; } .dgd-hoods__card[data-has-image="1"]::before { content: ""; position: absolute; inset: 0; /* Stronger veil — concentrate the dark band where the text actually sits * (lower half of the card). Cedar Springs and Bishop Arts photos with * bright lower halves were eating titles at the previous gradient. */ background: linear-gradient(180deg, rgba(5,2,14,0.50) 0%, rgba(5,2,14,0.88) 45%, rgba(5,2,14,0.97) 100%); border-radius: inherit; z-index: 1; } .dgd-hoods__card[data-has-image="1"] > * { position: relative; z-index: 2; } .dgd-hoods__card[data-has-image="1"] .dgd-hoods__eyebrow { color: var(--dgd-buttercup); opacity: 1; text-shadow: 0 1px 6px rgba(0,0,0,0.7); } .dgd-hoods__card[data-has-image="1"] .dgd-hoods__name { /* Override the card's `color: var(--dgd-midnight)` (which is the dark midnight * bg token, not a light text token) so the title actually reads light on * photos. Layered shadow holds the title against any local photo brightness. */ color: var(--dgd-on-dark); text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.85); } .dgd-hoods__card[data-has-image="1"] .dgd-hoods__desc { color: var(--dgd-on-dark); opacity: 0.95; text-shadow: 0 1px 6px rgba(0,0,0,0.6); } /* Solid pill for tags on photo cards — translucent + blur disappeared * against busy photography. */ .dgd-hoods__card[data-has-image="1"] .dgd-hoods__tag { background: var(--dgd-bone); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--dgd-on-dark); border-color: var(--dgd-cyan); opacity: 1; font-weight: 700; } @media (max-width: 768px) { .dgd-hoods__card { grid-column: span 6 !important; } } @media (max-width: 480px) { .dgd-hoods__card { grid-column: span 12 !important; padding: 1.25rem; } } .dgd-hoods__card:hover { transform: translateY(-4px); box-shadow: var(--dgd-shadow-lift); } .dgd-hoods__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.75rem; opacity: 0.7; } .dgd-hoods__name { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 0.75rem; color: inherit; } .dgd-hoods__desc { font-size: 0.95rem; line-height: 1.45; margin: 0 0 auto; opacity: 0.9; } .dgd-hoods__tags { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .dgd-hoods__tag { display: inline-block; padding: 0.3rem 0.7rem; font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; opacity: 0.95; } /* >>> assets/css/components.css <<< */ /* ========================================================================= GAY DALLAS — CROSSROADS · COMPONENTS Hero, marquee, venue plates, neighborhood cards, stories, footer. --------------------------------------------------------------------------- Responsive breakpoints (canonical — use these for all NEW media queries) --------------------------------------------------------------------------- Tier Pixel value Use for sm 480px small phone → larger phone (~iPhone SE → iPhone Pro) md 768px phone → tablet (iPad portrait crossover) lg 1024px tablet → desktop (iPad landscape → laptop) theme.json contentSize is 720px so constrained content fits below `md` without colliding with the 768px tablet edge. wideSize is 1320px. Existing @media rules use legacy values (560/600/640/720/900/980 etc.). Do NOT churn those wholesale — migrate only when you're already touching the rule for another reason. ========================================================================= */ /* Hero (.dgd-hero*) moved to assets/css/components/hero.css. Loaded BEFORE this file so the responsive overrides + HERO REWORK section later in this file (and in components/eyebrows.css) still win. */ /* ================================================ RIGHT NOW CAROUSEL — horizontal card scroller under the hero ================================================ */ .dgd-rightnow { background: var(--dgd-night); color: var(--dgd-on-dark); border-top: 4px solid var(--dgd-fuchsia); border-bottom: 1px solid var(--dgd-on-dark-border); padding-block: 2.25rem 2.75rem; position: relative; z-index: 5; /* Tucks under the hero by 1.5rem so the fuchsia rule reads as the hero's * sealed bottom edge. The hero clips its own overflow, so this margin * just pulls our band visually upward. */ margin-top: -1.5rem; } @media (max-width: 768px) { .dgd-rightnow { margin-top: 0; padding-block: 1.5rem 2rem; } } .dgd-rightnow__head { align-items: end; margin-bottom: 1.5rem; } .dgd-rightnow__head .dgd-sec-head__title { color: var(--dgd-on-dark); font-size: clamp(1.85rem, 1.4rem + 2vw, 3.25rem); max-width: 22ch; margin-top: 0.4rem; } .dgd-rightnow__head .dgd-sec-head__link { color: var(--dgd-on-dark); border-color: var(--dgd-on-dark-border); } .dgd-rightnow__head .dgd-sec-head__link:hover { background: var(--dgd-fuchsia); color: var(--dgd-on-dark); border-color: var(--dgd-fuchsia); } .dgd-rightnow__eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dgd-on-dark-soft); font-weight: 700; } .dgd-rightnow__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--dgd-fuchsia); box-shadow: 0 0 12px var(--dgd-fuchsia); animation: dgd-pulse 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .dgd-rightnow__pulse { animation: none; } } /* Scroller mechanism mirrors .dgd-partner-news__scroller — same flex / * scroll-snap / chevron pattern. JS at ui.js:1376 wires both via the * generic [data-dgd-scroll] handler. */ .dgd-rightnow__scroller { position: relative; margin-top: 0.5rem; } .dgd-rightnow__track { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-inline: 0.5rem; gap: 1.1rem; padding: 0.25rem 0.25rem 1.25rem; scrollbar-width: thin; scrollbar-color: var(--dgd-fuchsia) rgba(255,255,255,0.06); scroll-behavior: smooth; } .dgd-rightnow__track::-webkit-scrollbar { height: 8px; } .dgd-rightnow__track::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; } .dgd-rightnow__track::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--dgd-fuchsia), var(--dgd-violet)); border-radius: 4px; } .dgd-rightnow__scroller::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1.5rem; width: 48px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--dgd-night)); opacity: 0.85; transition: opacity 0.25s var(--dgd-ease); } .dgd-rightnow__scroller.is-at-end::after { opacity: 0; } /* When the merged tonight stream has only 1–2 cards, narrow + center the track * so the layout doesn't broadcast emptiness with a visible third slot. */ .dgd-tonight__group--sparse .dgd-rightnow__track { max-width: 720px; margin-inline: auto; justify-content: center; } .dgd-tonight__group--sparse .dgd-rightnow__scroller::after { display: none; } .dgd-rightnow__scroll-btn { position: absolute; top: calc(50% - 0.75rem); transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dgd-on-dark-border); background: rgba(10,7,22,0.92); color: var(--dgd-on-dark); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: var(--dgd-shadow-card); cursor: pointer; transition: background 0.2s var(--dgd-ease), border-color 0.2s var(--dgd-ease), opacity 0.25s var(--dgd-ease), transform 0.2s var(--dgd-ease), color 0.2s var(--dgd-ease); } .dgd-rightnow__scroll-btn:hover, .dgd-rightnow__scroll-btn:focus-visible { background: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); color: var(--dgd-on-dark); transform: translateY(-50%) scale(1.08); } .dgd-rightnow__scroll-btn[disabled], .dgd-rightnow__scroll-btn.is-disabled { opacity: 0.18; cursor: default; pointer-events: none; } .dgd-rightnow__scroll-btn--prev { left: -22px; } .dgd-rightnow__scroll-btn--next { right: -22px; } @media (max-width: 768px) { .dgd-rightnow__scroll-btn--prev { left: 4px; } .dgd-rightnow__scroll-btn--next { right: 4px; } } @media (max-width: 480px) { .dgd-rightnow__scroll-btn { display: none; } .dgd-rightnow__scroller::after { width: 32px; } } /* ---- Card ---- */ .dgd-rightnow__card { flex: 0 0 clamp(260px, 26vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--dgd-bone); border: 1px solid var(--dgd-on-dark-border); border-radius: var(--dgd-radius-md); overflow: hidden; text-decoration: none; color: var(--dgd-on-dark); transition: transform 0.25s var(--dgd-ease), border-color 0.25s var(--dgd-ease), box-shadow 0.25s var(--dgd-ease); outline-offset: 2px; } .dgd-rightnow__card:hover { transform: translateY(-3px); border-color: var(--dgd-fuchsia); box-shadow: 0 18px 32px rgba(0,0,0,0.5); } .dgd-rightnow__card-media { position: relative; aspect-ratio: 5/3; background-color: var(--dgd-bone); background-size: cover; background-position: center; } .dgd-rightnow__card-media::after { /* Subtle gradient so the badge always sits on a darker patch of image. */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,2,14,0.45) 0%, transparent 35%, rgba(5,2,14,0.5) 100%); pointer-events: none; } .dgd-rightnow__badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--dgd-night); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .dgd-rightnow__badge--live { background: var(--dgd-fuchsia); color: var(--dgd-on-dark); box-shadow: 0 0 16px rgba(255,56,137,0.55); animation: dgd-rightnow-live-pulse 2.2s ease-in-out infinite; } .dgd-rightnow__badge--soon { background: var(--dgd-mint); color: var(--dgd-night); } .dgd-rightnow__badge--tonight { background: var(--dgd-cyan); color: var(--dgd-night); } .dgd-rightnow__badge--open { background: var(--dgd-mint); color: var(--dgd-night); } @keyframes dgd-rightnow-live-pulse { 0%, 100% { box-shadow: 0 0 16px rgba(255,56,137,0.55); } 50% { box-shadow: 0 0 28px rgba(255,56,137,0.85); } } @media (prefers-reduced-motion: reduce) { .dgd-rightnow__badge--live { animation: none; } } .dgd-rightnow__card-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.15rem; flex: 1; } .dgd-rightnow__card-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0; color: var(--dgd-on-dark); /* Two-line clamp keeps cards uniform regardless of title length. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dgd-rightnow__card-subtitle { font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--dgd-fuchsia); margin: 0; /* Single-line clamp for the venue/vibe so layouts don't reflow. */ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .dgd-rightnow__card--open .dgd-rightnow__card-subtitle { color: var(--dgd-mint); } .dgd-rightnow__card--tonight .dgd-rightnow__card-subtitle { color: var(--dgd-cyan); } .dgd-rightnow__card-time { font-family: "DM Sans", sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--dgd-on-dark-soft); margin: 0.15rem 0 0; } /* Closing-soon urgency cue — same font, hotter color. */ .dgd-rightnow__card-time--closing { color: var(--dgd-tangerine); font-weight: 700; } /* Per-kind top accent stripe on the card itself — quick visual sort cue. */ .dgd-rightnow__card--live { box-shadow: inset 0 3px 0 0 var(--dgd-fuchsia); } .dgd-rightnow__card--soon { box-shadow: inset 0 3px 0 0 var(--dgd-mint); } .dgd-rightnow__card--tonight { box-shadow: inset 0 3px 0 0 var(--dgd-cyan); } .dgd-rightnow__card--open { box-shadow: inset 0 3px 0 0 var(--dgd-mint); } /* Terminal CTA card — outlined, no media, big arrow. */ .dgd-rightnow__card--cta { background: transparent; border: 2px dashed var(--dgd-on-dark-border); align-items: center; justify-content: center; text-align: center; padding: 1.5rem 1.25rem; min-height: 100%; } .dgd-rightnow__card--cta:hover { border-color: var(--dgd-fuchsia); background: rgba(255,56,137,0.05); } .dgd-rightnow__card-cta { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; margin: auto 0; } .dgd-rightnow__card-cta-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--dgd-fuchsia); } .dgd-rightnow__card-cta-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.4rem; line-height: 1.05; letter-spacing: -0.02em; color: var(--dgd-on-dark); max-width: 14ch; } .dgd-rightnow__card-cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: var(--dgd-fuchsia); color: var(--dgd-on-dark); margin-top: 0.5rem; transition: transform 0.25s var(--dgd-ease), background 0.25s var(--dgd-ease); } .dgd-rightnow__card--cta:hover .dgd-rightnow__card-cta-arrow { transform: translateX(6px); background: var(--dgd-cyan); color: var(--dgd-night); } /* ---------------------------------------------------------------- * Mobile vertical-stack mode (≤560px) * ---------------------------------------------------------------- */ /* Below the chevron-hide breakpoint the carousel becomes a vertical feed: * cards flip to row direction (small thumb on the left, content right) and * the track stops scrolling horizontally. Visible mass IS the FOMO. */ @media (max-width: 480px) { .dgd-rightnow__scroller { margin-top: 0.25rem; } .dgd-rightnow__scroller::after { display: none; } .dgd-rightnow__track { display: flex; flex-direction: column; overflow-x: visible; scroll-snap-type: none; gap: 0.6rem; padding: 0; } .dgd-rightnow__track::-webkit-scrollbar { display: none; } .dgd-rightnow__card { flex: 0 0 auto; flex-direction: row; align-items: stretch; min-height: 96px; } .dgd-rightnow__card-media { flex: 0 0 96px; aspect-ratio: 1/1; } .dgd-rightnow__card-media::after { background: linear-gradient(135deg, rgba(5,2,14,0.55) 0%, rgba(5,2,14,0.1) 100%); } .dgd-rightnow__badge { top: 0.4rem; left: 0.4rem; font-size: 0.5rem; letter-spacing: 0.13em; padding: 0.2rem 0.45rem; } .dgd-rightnow__card-body { padding: 0.65rem 0.85rem; gap: 0.2rem; justify-content: center; } .dgd-rightnow__card-title { font-size: 1rem; -webkit-line-clamp: 2; } .dgd-rightnow__card-subtitle { font-size: 0.6rem; letter-spacing: 0.14em; } .dgd-rightnow__card-time { font-size: 0.78rem; margin-top: 0.1rem; } /* CTA card adopts the same row layout — icon left, copy right. */ .dgd-rightnow__card--cta { padding: 0.85rem 1rem; text-align: left; align-items: stretch; justify-content: flex-start; min-height: 72px; } .dgd-rightnow__card-cta { flex-direction: row; align-items: center; gap: 0.85rem; margin: 0; width: 100%; text-align: left; } .dgd-rightnow__card-cta-eyebrow, .dgd-rightnow__card-cta-title { text-align: left; max-width: none; } .dgd-rightnow__card-cta-title { font-size: 1rem; line-height: 1.15; flex: 1; } .dgd-rightnow__card-cta-arrow { width: 36px; height: 36px; margin-top: 0; flex: 0 0 36px; } } /* ================================================ STRIP CRAWL — Numbered Venue Plates ================================================ */ .dgd-strip { background: var(--dgd-midnight); position: relative; } .dgd-strip__head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin-bottom: 3rem; } @media (max-width: 760px) { .dgd-strip__head { grid-template-columns: 1fr; } } .dgd-strip__title { font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; margin: 0; max-width: 16ch; } .dgd-strip__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--dgd-fuchsia); } .dgd-strip__lede { max-width: 40ch; font-size: 1.1rem; line-height: 1.5; color: var(--dgd-ink-soft); } .dgd-strip__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; } .dgd-strip__item { grid-column: span 4; display: flex; flex-direction: column; text-decoration: none; color: var(--dgd-ink); position: relative; border-radius: var(--dgd-radius-lg); overflow: hidden; background: var(--dgd-bone); border: 1px solid var(--dgd-border); transition: transform 0.4s var(--dgd-ease), box-shadow 0.4s var(--dgd-ease), border-color 0.4s var(--dgd-ease); min-height: 360px; } .dgd-strip__item:nth-child(1), .dgd-strip__item:nth-child(6) { grid-column: span 6; } @media (max-width: 980px) { .dgd-strip__item, .dgd-strip__item:nth-child(1), .dgd-strip__item:nth-child(6) { grid-column: span 6; } } @media (max-width: 620px) { .dgd-strip__item, .dgd-strip__item:nth-child(1), .dgd-strip__item:nth-child(6) { grid-column: span 12; } } .dgd-strip__item:hover { transform: translateY(-6px); box-shadow: 0 32px 56px rgba(15,11,35,0.15); border-color: var(--dgd-fuchsia); } .dgd-strip__media { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s var(--dgd-ease); } .dgd-strip__item:hover .dgd-strip__media { transform: scale(1.05); } .dgd-strip__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,11,35,0) 30%, rgba(15,11,35,0.92) 100%); } .dgd-strip__body { position: relative; z-index: 2; margin-top: auto; padding: 1.75rem 1.75rem 1.75rem; color: var(--dgd-midnight); } .dgd-strip__number { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2; font-family: "Bricolage Grotesque", sans-serif; font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--dgd-midnight); letter-spacing: -0.04em; text-shadow: 0 4px 16px rgba(15,11,35,0.4); font-variation-settings: "wdth" 75; } .dgd-strip__badge { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; background: var(--dgd-buttercup); color: var(--dgd-on-buttercup); font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(15,11,35,0.2); } .dgd-strip__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; margin: 0 0 0.35rem; line-height: 1; letter-spacing: -0.02em; /* Text color is set to var(--dgd-on-dark) below — do not re-assert --dgd-midnight here, that would produce dark-on-dark. */ } .dgd-strip__meta { font-size: 0.9rem; color: rgba(255,253,247,0.85); margin: 0; line-height: 1.4; } .dgd-strip__meta strong { color: var(--dgd-mint); font-weight: 600; } /* CTA tile — sits in the 7th slot, paired with the 6th venue * (which the existing :nth-child(6) rule sets to span 6). Outlined * dashed border + neon hover so it reads as a decisive "there's more" * rather than another venue. */ .dgd-strip__item--cta { grid-column: span 6; min-height: 360px; background: var(--dgd-midnight); border: 2px dashed var(--dgd-border); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; } @media (max-width: 980px) { .dgd-strip__item--cta { grid-column: span 6; } } @media (max-width: 620px) { .dgd-strip__item--cta { grid-column: span 12; min-height: 220px; } } .dgd-strip__item--cta:hover { border-color: var(--dgd-fuchsia); background: var(--dgd-bone); transform: translateY(-2px); } .dgd-strip__cta { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 48ch; position: relative; z-index: 2; } .dgd-strip__cta-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dgd-fuchsia); font-weight: 700; margin: 0; } .dgd-strip__cta-headline { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--dgd-ink); margin: 0; } .dgd-strip__cta-sub { font-size: 0.95rem; line-height: 1.5; color: var(--dgd-ink-soft); margin: 0.35rem 0 0.75rem; } .dgd-strip__cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--dgd-fuchsia); color: var(--dgd-on-dark); margin-top: 0.25rem; transition: transform 0.3s var(--dgd-ease), background 0.3s var(--dgd-ease); } .dgd-strip__item--cta:hover .dgd-strip__cta-arrow { transform: translateX(6px); background: var(--dgd-cyan); color: var(--dgd-midnight); } /* Neighborhoods (.dgd-hoods*) moved to assets/css/components/neighborhoods.css. Loaded BEFORE this file so the @media overrides below (and other late responsive rules) still win. */ /* ================================================ EVENTS GRID (tonight / this weekend) ================================================ */ .dgd-events { padding-block: var(--wp--custom--dgd--section--pad-lg); } .dgd-events__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } /* Event card chrome migrated to components/card.css (.dgd-card--event variant). The .dgd-events__grid below remains as the parent grid layout. */ /* ================================================ STORIES (editorial cards) ================================================ */ .dgd-stories { background: var(--dgd-blush); padding-block: var(--wp--custom--dgd--section--pad-lg); } .dgd-stories__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; } /* Tablet (768px) collapses the 3-col into 1-col rather than cramping at the former 860px threshold (the 768–859 band rendered three tall narrow cards). */ @media (max-width: 1024px) { .dgd-stories__grid { grid-template-columns: 1fr 1fr; } .dgd-stories__main { grid-row: auto; grid-column: 1 / -1; } } @media (max-width: 768px) { .dgd-stories__grid { grid-template-columns: 1fr; } } .dgd-stories__main, .dgd-stories__side { display: flex; flex-direction: column; text-decoration: none; color: var(--dgd-ink); background: var(--dgd-midnight); border-radius: var(--dgd-radius-lg); overflow: hidden; border: 1px solid var(--dgd-border); transition: all 0.3s var(--dgd-ease); } .dgd-stories__main { grid-row: span 2; } .dgd-stories__main:hover, .dgd-stories__side:hover { transform: translateY(-4px); box-shadow: var(--dgd-shadow-lift); } .dgd-stories__media { aspect-ratio: 16/10; background-size: cover; background-position: center; } .dgd-stories__main .dgd-stories__media { aspect-ratio: 4/3; } .dgd-stories__side .dgd-stories__media { aspect-ratio: 16/9; } .dgd-stories__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .dgd-stories__category { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dgd-fuchsia); font-weight: 600; } .dgd-stories__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: -0.02em; } .dgd-stories__main .dgd-stories__title { font-size: 2.25rem; } .dgd-stories__excerpt { font-size: 0.95rem; line-height: 1.5; color: var(--dgd-ink-soft); margin: 0; } /* Typographic variant — ships when a post has no featured image. The * gradient stays as a left-edge accent stripe instead of taking over the * card, so the section reads as editorial confidence rather than "broken * placeholder." */ .dgd-stories__main--typographic, .dgd-stories__side--typographic { position: relative; padding-left: 1.5rem; background: var(--dgd-bone); } .dgd-stories__accent { position: absolute; inset: 0 auto 0 0; width: 6px; border-radius: var(--dgd-radius-lg) 0 0 var(--dgd-radius-lg); pointer-events: none; } .dgd-stories__main--typographic .dgd-stories__body, .dgd-stories__side--typographic .dgd-stories__body { padding: 2.25rem 2rem; justify-content: center; } .dgd-stories__main--typographic .dgd-stories__title { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1; } .dgd-stories__side--typographic .dgd-stories__title { font-size: 1.65rem; line-height: 1.05; } .dgd-stories__main--typographic .dgd-stories__excerpt, .dgd-stories__side--typographic .dgd-stories__excerpt { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--dgd-ink); opacity: 0.85; margin-top: 0.75rem; position: relative; padding-left: 1.25rem; } .dgd-stories__main--typographic .dgd-stories__excerpt::before, .dgd-stories__side--typographic .dgd-stories__excerpt::before { content: ""; position: absolute; left: 0; top: 0.5em; bottom: 0.5em; width: 2px; background: var(--dgd-fuchsia); opacity: 0.6; } /* ================================================ NEWSLETTER CTA ================================================ */ .dgd-newsletter { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); background: var(--dgd-night); color: var(--dgd-on-dark); position: relative; overflow: hidden; } .dgd-newsletter::before { content: ""; position: absolute; top: -80px; right: -80px; /* Capped to 60vw on small screens so the blurred backdrop circle doesn't overwhelm the layout or bleed off-canvas at 320–480px viewports. */ width: min(400px, 60vw); height: min(400px, 60vw); background: radial-gradient(circle, var(--dgd-fuchsia) 0%, transparent 70%); opacity: 0.4; filter: blur(60px); pointer-events: none; } .dgd-newsletter::after { content: ""; position: absolute; bottom: -80px; left: -80px; width: min(400px, 60vw); height: min(400px, 60vw); background: radial-gradient(circle, var(--dgd-cyan) 0%, transparent 70%); opacity: 0.3; filter: blur(60px); pointer-events: none; } .dgd-newsletter__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; /* Mobile edge padding so headline + form fields don't hug the screen edge when the section's outer block padding is reduced on narrow viewports. */ padding-inline: var(--wp--preset--spacing--30); text-align: center; } .dgd-newsletter__eyebrow { color: var(--dgd-buttercup); font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; margin: 0 0 1rem; } .dgd-newsletter__title { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; color: var(--dgd-on-dark); margin: 0 0 1rem; } .dgd-newsletter__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; color: var(--dgd-fuchsia); font-weight: 400; } .dgd-newsletter__sub { font-size: 1.1rem; color: var(--dgd-on-dark-soft); margin: 0 0 2rem; line-height: 1.5; } .dgd-newsletter__form { display: flex; gap: 0.5rem; max-width: 520px; margin-inline: auto; padding: 0.4rem; background: var(--dgd-on-dark); border-radius: 999px; } @media (max-width: 560px) { .dgd-newsletter__form { flex-direction: column; border-radius: var(--dgd-radius-lg); padding: 0.75rem; } } .dgd-newsletter__input { flex: 1; background: transparent; border: 0; padding: 0.85rem 1.25rem; min-height: 44px; font-family: "DM Sans", sans-serif; font-size: 1rem; color: var(--dgd-night); outline: none; } .dgd-newsletter__input:focus-visible { outline: 3px solid var(--dgd-violet); outline-offset: -3px; border-radius: 999px; } .dgd-newsletter__submit { background: var(--dgd-fuchsia); color: var(--dgd-on-dark); border: 0; border-radius: 999px; padding: 0.9rem 1.75rem; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.25s var(--dgd-ease); } .dgd-newsletter__submit:hover { background: var(--dgd-violet); } .dgd-newsletter__submit.is-success { background: var(--dgd-mint); color: var(--dgd-night); } .dgd-newsletter__submit.is-error { background: var(--dgd-tangerine); color: var(--dgd-night); } .dgd-newsletter__status { margin: 1rem 0 0; min-height: 1.25em; font-size: 0.9375rem; color: var(--dgd-ink-soft); text-align: center; } .dgd-newsletter__status.is-success { color: var(--dgd-mint); } .dgd-newsletter__status.is-error { color: var(--dgd-tangerine); } /* ================================================ SECTION HEADER (shared) ================================================ */ .dgd-sec-head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin-bottom: 2.5rem; } @media (max-width: 720px) { .dgd-sec-head { grid-template-columns: 1fr; } } .dgd-sec-head__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--dgd-fuchsia); margin: 0 0 0.75rem; } .dgd-sec-head__title { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; margin: 0; max-width: 18ch; } .dgd-sec-head__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; color: var(--dgd-fuchsia); font-weight: 400; } .dgd-sec-head__link { text-decoration: none; font-family: "DM Sans", sans-serif; font-weight: 700; color: var(--dgd-ink); display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border: 2px solid var(--dgd-ink); border-radius: 999px; transition: all 0.25s var(--dgd-ease); } .dgd-sec-head__link:hover { background: var(--dgd-ink); color: var(--dgd-midnight); } /* ================================================ FOOTER ================================================ */ .dgd-footer { background: var(--dgd-night); color: var(--dgd-on-dark); padding: 5rem var(--dgd-gutter) 3rem; } .dgd-footer__inner { max-width: var(--dgd-wide); margin-inline: auto; } .dgd-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,253,247,0.12); } /* 4-col → 2-col at tablet (was 880, dropped to canonical 768 to match the site-wide breakpoint policy and remove the 768–879 cramped band). */ @media (max-width: 768px) { .dgd-footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 480px) { .dgd-footer__top { grid-template-columns: 1fr; } } .dgd-footer__brand h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; margin: 0 0 1rem; color: var(--dgd-on-dark); } .dgd-footer__brand h3 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; color: var(--dgd-fuchsia); font-weight: 400; } .dgd-footer__brand p { max-width: 34ch; color: rgba(255,253,247,0.75); line-height: 1.5; margin: 0 0 1.5rem; } .dgd-footer__socials { display: flex; gap: 0.75rem; } .dgd-footer__socials a { width: 44px; height: 44px; border-radius: 999px; background: rgba(255,253,247,0.08); color: var(--dgd-on-dark); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.25s var(--dgd-ease); } .dgd-footer__socials a:hover { background: var(--dgd-fuchsia); transform: translateY(-2px); } .dgd-footer__col h4 { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dgd-buttercup); font-weight: 600; margin: 0 0 1rem; } .dgd-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .dgd-footer__col a { color: rgba(255,253,247,0.85); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; display: inline-flex; align-items: center; min-height: 44px; } .dgd-footer__col a:hover { color: var(--dgd-fuchsia); } .dgd-footer__bottom { padding-top: 2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: rgba(255,253,247,0.55); font-family: "JetBrains Mono", monospace; letter-spacing: 0.05em; } .dgd-footer__bottom a { color: inherit; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.25rem; } .dgd-footer__bottom a:hover { color: var(--dgd-fuchsia); } /* ================================================ LISTING / EVENT detail pages ================================================ */ .dgd-listing-hero { padding: 4rem var(--dgd-gutter) 3rem; background: var(--dgd-blush); border-bottom: 1px solid var(--dgd-border); } .dgd-listing-hero__inner { max-width: var(--dgd-wide); margin-inline: auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: center; } @media (max-width: 900px) { .dgd-listing-hero__inner { grid-template-columns: 1fr; } } .dgd-listing-hero__media { aspect-ratio: 4/3; border-radius: var(--dgd-radius-lg); background: var(--dgd-bone); background-size: cover; background-position: center; box-shadow: var(--dgd-shadow-lift); overflow: hidden; position: relative; } .dgd-listing-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .dgd-listing-hero__title { font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); margin: 0 0 1rem; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; } .dgd-listing-hero__vibe { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.3rem; color: var(--dgd-ink-soft); margin: 0 0 1.5rem; line-height: 1.3; } .dgd-listing-hero__meta { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.75rem; font-size: 0.95rem; } .dgd-listing-hero__meta div { display: flex; align-items: flex-start; gap: 0.75rem; } .dgd-listing-hero__meta strong { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dgd-fuchsia); font-weight: 600; min-width: 80px; padding-top: 0.2rem; } /* ================================================ HELPERS / misc ================================================ */ .dgd-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .dgd-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; background: var(--dgd-midnight); border: 1px solid var(--dgd-border); border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--dgd-ink); text-decoration: none; transition: all 0.2s var(--dgd-ease); } .dgd-pill:hover { background: var(--dgd-fuchsia); color: var(--dgd-midnight); border-color: var(--dgd-fuchsia); } /* ================================================ PAGE HEROES (shared) Centered eyebrow + display title, hue-aware wash. Use CSS vars so they invert in dark mode. ================================================ */ .dgd-page-hero { width: 100%; /* Tighten hero padding — override the large spacing|70 / spacing|60 from templates */ padding-top: clamp(3rem, 2rem + 4vw, 5rem) !important; padding-bottom: clamp(2rem, 1.5rem + 3vw, 3.5rem) !important; } .dgd-page-hero--blush { background: linear-gradient(135deg, var(--dgd-blush) 0%, #1A0820 50%, var(--dgd-midnight) 100%); } .dgd-page-hero--sky { background: linear-gradient(135deg, var(--dgd-sky-wash) 0%, #0A1A30 50%, var(--dgd-midnight) 100%); } .dgd-page-hero--sun { background: linear-gradient(135deg, var(--dgd-sun-wash) 0%, #1A150A 50%, var(--dgd-midnight) 100%); } .dgd-page-hero--night { background: var(--wp--preset--color--night); color: var(--wp--preset--color--on-dark); } .dgd-page-hero--night h1, .dgd-page-hero--night h2, .dgd-page-hero--night p { color: inherit; } /* ================================================ FEATURE CARDS, STAT BLOCKS, GRADIENT CALLOUTS Rich visual blocks for content pages (About, Partner, etc.) ================================================ */ /* Feature card — icon/emoji + title + description, with gradient left border */ .dgd-feature-card { background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-left: 4px solid var(--dgd-fuchsia); border-radius: var(--dgd-radius-md); padding: 2rem; transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease), border-color 0.3s; } .dgd-feature-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--dgd-fuchsia), var(--dgd-shadow-lift); border-left-color: var(--dgd-fuchsia); } .dgd-feature-card:nth-child(2) { border-left-color: var(--dgd-cyan); } .dgd-feature-card:nth-child(2):hover { box-shadow: 0 0 0 1px var(--dgd-cyan), var(--dgd-shadow-lift); } .dgd-feature-card:nth-child(3) { border-left-color: var(--dgd-buttercup); } .dgd-feature-card:nth-child(3):hover { box-shadow: 0 0 0 1px var(--dgd-buttercup), var(--dgd-shadow-lift); } .dgd-feature-card:nth-child(4) { border-left-color: var(--dgd-violet); } .dgd-feature-card:nth-child(4):hover { box-shadow: 0 0 0 1px var(--dgd-violet), var(--dgd-shadow-lift); } .dgd-feature-card:nth-child(5) { border-left-color: var(--dgd-mint); } .dgd-feature-card:nth-child(6) { border-left-color: var(--dgd-tangerine); } .dgd-feature-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 1rem; display: block; } /* Page-helper classes (feature-card content, page-section padding, dgd-stack spacers, page-cols-2, eyebrow center-stack, etc.) live in `components/page-helpers.css` and are enqueued by functions.php right after this file. Move them here only if the rest of components.css decomposes too. */ /* Stat counter — big number + label */ .dgd-stat { text-align: center; padding: 2rem 1rem; } .dgd-stat__number { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(3rem, 2rem + 5vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--dgd-fuchsia); margin: 0; } .dgd-stat__label { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dgd-muted); margin-top: 0.65rem; } /* Gradient accent section — full-width colored band */ .dgd-accent-band { padding: clamp(3rem, 2rem + 4vw, 5rem) var(--dgd-gutter); position: relative; overflow: hidden; } .dgd-accent-band--fuchsia { background: linear-gradient(135deg, var(--wp--preset--color--blush) 0%, #1A0520 100%); } .dgd-accent-band--violet { background: linear-gradient(135deg, #140830 0%, #0A0716 100%); } .dgd-accent-band--cyan { background: linear-gradient(135deg, var(--wp--preset--color--sky-wash) 0%, #0A0716 100%); } .dgd-accent-band--sun { background: linear-gradient(135deg, var(--wp--preset--color--sun-wash) 0%, #0A0716 100%); } /* Pull quote */ .dgd-pullquote { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); line-height: 1.25; color: var(--dgd-ink); max-width: 28ch; margin: 0 auto; text-align: center; padding: 3rem 1rem; position: relative; } .dgd-pullquote::before { content: ""; display: block; width: 48px; height: 4px; background: var(--dgd-fuchsia); border-radius: 999px; margin: 0 auto 1.5rem; } /* Step/process number */ .dgd-step-number { font-family: "Bricolage Grotesque", sans-serif; font-size: 4rem; font-weight: 800; line-height: 1; color: var(--dgd-fuchsia); opacity: 0.25; font-variation-settings: "wdth" 75; position: absolute; top: -0.5rem; right: 1rem; } /* ================================================ DARK THEME POLISH (always on — owners locked us to dark) ================================================ */ /* Glow hover on cards, not a white flash */ .dgd-strip__item:hover { box-shadow: 0 0 0 2px var(--dgd-fuchsia), 0 32px 56px rgba(0,0,0,0.7); } .dgd-strip__name { color: var(--dgd-on-dark); } .dgd-strip__meta { color: var(--dgd-on-dark-soft); } /* Neighborhoods — uncolored cards use the default bone surface (set on base class). */ /* Forced always-dark page hero keeps its exact hex */ .dgd-page-hero--night { background: #0A0716; } /* ================================================ TIMELINE — History of Us Vertical timeline with decade markers and colored left borders. ================================================ */ .dgd-timeline { --dgd-tl-line: var(--dgd-border); position: relative; padding: 0; list-style: none; margin: 0; } .dgd-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.5rem; width: 2px; background: var(--dgd-tl-line); } @media (min-width: 720px) { .dgd-timeline::before { left: 50%; transform: translateX(-1px); } } .dgd-timeline__era { position: relative; padding: 0 0 3rem 4rem; } @media (min-width: 720px) { .dgd-timeline__era { width: 50%; padding: 0 3rem 3rem 0; } .dgd-timeline__era:nth-child(even) { margin-left: 50%; padding: 0 0 3rem 3rem; } } /* Decade dot on the timeline line */ .dgd-timeline__era::before { content: ""; position: absolute; left: calc(1.5rem - 6px); top: 0.6rem; width: 14px; height: 14px; border-radius: 50%; background: var(--dgd-fuchsia); border: 3px solid var(--dgd-midnight); z-index: 1; } @media (min-width: 720px) { .dgd-timeline__era::before { left: auto; right: -7px; } .dgd-timeline__era:nth-child(even)::before { left: -7px; right: auto; } } /* Accent color rotation per era */ .dgd-timeline__era:nth-child(1)::before { background: var(--dgd-fuchsia); } .dgd-timeline__era:nth-child(2)::before { background: var(--dgd-cyan); } .dgd-timeline__era:nth-child(3)::before { background: var(--dgd-buttercup); } .dgd-timeline__era:nth-child(4)::before { background: var(--dgd-mint); } .dgd-timeline__era:nth-child(5)::before { background: var(--dgd-violet); } .dgd-timeline__era:nth-child(6)::before { background: var(--dgd-tangerine); } .dgd-timeline__card { background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: var(--dgd-radius-md); padding: 2rem; position: relative; } .dgd-timeline__era:nth-child(1) .dgd-timeline__card { border-left: 4px solid var(--dgd-fuchsia); } .dgd-timeline__era:nth-child(2) .dgd-timeline__card { border-left: 4px solid var(--dgd-cyan); } .dgd-timeline__era:nth-child(3) .dgd-timeline__card { border-left: 4px solid var(--dgd-buttercup); } .dgd-timeline__era:nth-child(4) .dgd-timeline__card { border-left: 4px solid var(--dgd-mint); } .dgd-timeline__era:nth-child(5) .dgd-timeline__card { border-left: 4px solid var(--dgd-violet); } .dgd-timeline__era:nth-child(6) .dgd-timeline__card { border-left: 4px solid var(--dgd-tangerine); } .dgd-timeline__decade { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; margin: 0 0 0.65rem; } .dgd-timeline__era:nth-child(1) .dgd-timeline__decade { color: var(--dgd-fuchsia); } .dgd-timeline__era:nth-child(2) .dgd-timeline__decade { color: var(--dgd-cyan); } .dgd-timeline__era:nth-child(3) .dgd-timeline__decade { color: var(--dgd-buttercup); } .dgd-timeline__era:nth-child(4) .dgd-timeline__decade { color: var(--dgd-mint); } .dgd-timeline__era:nth-child(5) .dgd-timeline__decade { color: var(--dgd-violet); } .dgd-timeline__era:nth-child(6) .dgd-timeline__decade { color: var(--dgd-tangerine); } .dgd-timeline__heading { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem); font-weight: 700; line-height: 1.15; color: var(--dgd-ink); margin: 0 0 0.75rem; } .dgd-timeline__body { font-size: 0.95rem; line-height: 1.65; color: var(--dgd-ink-soft); } .dgd-timeline__body p { margin: 0 0 0.75rem; } .dgd-timeline__body p:last-child { margin-bottom: 0; } /* ================================================ FEATURED EVENT SPOTLIGHT Full-width dramatic card for the next big event. ================================================ */ .dgd-spotlight { position: relative; overflow: hidden; border-radius: var(--dgd-radius-lg, 1rem); min-height: 380px; display: flex; align-items: flex-end; background: var(--dgd-bone); border: 1px solid var(--dgd-border); } .dgd-spotlight__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } .dgd-spotlight__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,7,22,0.92) 0%, rgba(10,7,22,0.5) 45%, rgba(10,7,22,0.15) 100%); } .dgd-spotlight__content { position: relative; z-index: 1; padding: 3rem; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: end; } @media (max-width: 600px) { .dgd-spotlight__content { grid-template-columns: 1fr; padding: 2rem; } } .dgd-spotlight__date { background: var(--dgd-buttercup); color: var(--wp--preset--color--night); border-radius: var(--dgd-radius-md); padding: 1rem 1.25rem; text-align: center; min-width: 80px; line-height: 1; } .dgd-spotlight__date-month { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; display: block; } .dgd-spotlight__date-day { font-family: "Bricolage Grotesque", sans-serif; font-size: 2.75rem; font-weight: 800; display: block; margin-top: 0.15rem; } .dgd-spotlight__info { min-width: 0; } .dgd-spotlight__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--dgd-fuchsia); margin: 0 0 0.5rem; } .dgd-spotlight__title { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.75rem, 1.25rem + 3vw, 3rem); font-weight: 800; line-height: 1; color: var(--dgd-on-dark); margin: 0 0 0.5rem; letter-spacing: -0.02em; } .dgd-spotlight__venue { font-size: 0.95rem; color: var(--dgd-on-dark-soft, #C8BFDC); margin: 0 0 1.25rem; } .dgd-spotlight__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ================================================ TAG PILLS — small inline tags for neighborhoods etc. ================================================ */ .dgd-tag-pill { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--dgd-border); background: var(--dgd-bone); color: var(--dgd-ink-soft); transition: border-color 0.2s, color 0.2s; } .dgd-tag-pill:hover { border-color: var(--dgd-fuchsia); color: var(--dgd-fuchsia); } /* ================================================ LEGAL PROSE — Terms, Privacy pages ================================================ */ .dgd-legal-prose { max-width: 68ch; margin-inline: auto; font-size: 0.95rem; line-height: 1.75; color: var(--dgd-ink-soft); } .dgd-legal-prose h2, .dgd-legal-prose h3 { color: var(--dgd-ink); margin-top: 2.5rem; margin-bottom: 0.75rem; } .dgd-legal-prose h2 { font-size: 1.35rem; font-weight: 700; } .dgd-legal-prose h3 { font-size: 1.1rem; font-weight: 600; } .dgd-legal-prose p { margin-bottom: 1rem; } .dgd-legal-prose ul, .dgd-legal-prose ol { padding-left: 1.5rem; margin-bottom: 1rem; } .dgd-legal-prose li { margin-bottom: 0.35rem; } .dgd-legal-prose a { color: var(--dgd-fuchsia); text-decoration: underline; text-underline-offset: 3px; } /* ================================================ LIVE PULSE — Tonight page "Live" indicator ================================================ */ .dgd-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dgd-fuchsia); margin-right: 0.5rem; vertical-align: middle; position: relative; } .dgd-live-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--dgd-fuchsia); opacity: 0.5; animation: dgd-pulse 2s ease-in-out infinite; } @keyframes dgd-pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.8); opacity: 0; } } /* ================================================ CALLOUT BOX — Safer Routes, emergency info ================================================ */ .dgd-callout { background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-left: 4px solid var(--dgd-fuchsia); border-radius: var(--dgd-radius-md); padding: 2rem; margin: 2rem 0; } .dgd-callout--emergency { border-left-color: var(--dgd-tangerine); background: linear-gradient(135deg, var(--wp--preset--color--sun-wash) 0%, var(--dgd-bone) 100%); } .dgd-callout--tip { border-left-color: var(--dgd-mint); } .dgd-callout__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--dgd-ink); margin: 0 0 0.5rem; } .dgd-callout__body { font-size: 0.92rem; line-height: 1.6; color: var(--dgd-ink-soft); } .dgd-callout__body a { color: var(--dgd-fuchsia); text-decoration: underline; text-underline-offset: 3px; } /* ================================================ RAINBOW CROSSWALK DIVIDER ================================================ */ .dgd-crosswalk { display: flex; height: 6px; gap: 0; border-radius: 3px; overflow: hidden; margin: 3rem 0; } .dgd-crosswalk span { flex: 1; } .dgd-crosswalk span:nth-child(1) { background: var(--dgd-fuchsia); } .dgd-crosswalk span:nth-child(2) { background: var(--dgd-tangerine); } .dgd-crosswalk span:nth-child(3) { background: var(--dgd-buttercup); } .dgd-crosswalk span:nth-child(4) { background: var(--dgd-mint); } .dgd-crosswalk span:nth-child(5) { background: var(--dgd-cyan); } .dgd-crosswalk span:nth-child(6) { background: var(--dgd-violet); } /* ================================================ HOW-IT-WORKS STEPS — Submit Event page ================================================ */ .dgd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; padding: 0; margin: 0; } @media (max-width: 720px) { .dgd-steps { grid-template-columns: 1fr; } } .dgd-step { background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: var(--dgd-radius-md); padding: 2rem; position: relative; overflow: hidden; } .dgd-step__number { font-family: "Bricolage Grotesque", sans-serif; font-size: 5rem; font-weight: 800; line-height: 1; color: var(--dgd-fuchsia); opacity: 0.12; font-variation-settings: "wdth" 75; position: absolute; top: -0.75rem; right: 0.75rem; } .dgd-step:nth-child(2) .dgd-step__number { color: var(--dgd-cyan); } .dgd-step:nth-child(3) .dgd-step__number { color: var(--dgd-buttercup); } .dgd-step__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--dgd-ink); margin: 0 0 0.5rem; position: relative; } .dgd-step__desc { font-size: 0.9rem; line-height: 1.55; color: var(--dgd-ink-soft); position: relative; } /* ================================================ NEIGHBORHOOD SINGLE — listings grid for a hood ================================================ */ .dgd-nhood-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; } /* ================================================ NON-PROFIT CARD — archive grid ================================================ */ .dgd-nonprofit-card { background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: var(--dgd-radius-md); padding: 2rem; transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease); } .dgd-nonprofit-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--dgd-fuchsia), var(--dgd-shadow-lift); } .dgd-nonprofit-card__tagline { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.05rem; color: var(--dgd-ink-soft); margin: 0.5rem 0 1rem; } .dgd-nonprofit-card__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* ================================================ SEARCH OVERLAY ================================================ */ .dgd-search-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .dgd-search-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; } .dgd-search-overlay__backdrop { position: absolute; inset: 0; background: rgba(10, 7, 22, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .dgd-search-overlay__panel { position: relative; width: 90%; max-width: 640px; z-index: 1; transform: translateY(-20px); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .dgd-search-overlay[aria-hidden="false"] .dgd-search-overlay__panel { transform: translateY(0); } .dgd-search-overlay__label { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dgd-muted); margin-bottom: 1rem; } .dgd-search-overlay__row { display: flex; gap: 0; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 999px; overflow: hidden; } .dgd-search-overlay__input { flex: 1; background: transparent; border: 0; padding: 1rem 1.5rem; font-family: "DM Sans", sans-serif; font-size: 1.1rem; color: var(--dgd-ink); outline: none; } .dgd-search-overlay__input:focus-visible { outline: 3px solid var(--dgd-violet); outline-offset: -3px; border-radius: 999px 0 0 999px; } .dgd-search-overlay__input::placeholder { color: var(--dgd-muted); } .dgd-search-overlay__go { background: var(--dgd-fuchsia); border: 0; padding: 1rem 1.25rem; color: var(--dgd-on-dark); cursor: pointer; display: flex; align-items: center; } .dgd-search-overlay__go:hover { background: var(--dgd-fuchsia-deep); } .dgd-search-overlay__close { position: absolute; top: -3rem; right: 0; background: none; border: 0; color: var(--dgd-muted); cursor: pointer; padding: 0.5rem; min-width: 44px; min-height: 44px; } .dgd-search-overlay__close:hover { color: var(--dgd-ink); } .dgd-search-overlay__hints { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .dgd-search-overlay__hints a { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--dgd-border); color: var(--dgd-ink-soft); text-decoration: none; transition: border-color 0.2s, color 0.2s; display: inline-flex; align-items: center; min-height: 44px; } .dgd-search-overlay__hints a:hover { border-color: var(--dgd-fuchsia); color: var(--dgd-fuchsia); } /* ================================================ STAR / SAVE BUTTON (My Trip) ================================================ */ .dgd-star-btn { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5; background: rgba(10, 7, 22, 0.6); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--dgd-ink-soft); transition: background 0.2s, color 0.2s, transform 0.2s; } .dgd-star-btn:hover { background: rgba(10, 7, 22, 0.8); color: var(--dgd-buttercup); transform: scale(1.1); } .dgd-star-btn.is-saved { background: var(--dgd-buttercup); color: var(--wp--preset--color--night); border-color: var(--dgd-buttercup); } .dgd-star-btn.is-saved svg { fill: currentColor; } .dgd-star-btn:focus-visible { outline: 3px solid var(--dgd-violet); outline-offset: 2px; } .dgd-star-btn.is-saved:hover { background: var(--dgd-buttercup-deep, #e6be35); transform: scale(1.1); } /* Pulse animation on save */ @keyframes dgd-star-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.35); box-shadow: 0 0 12px var(--dgd-buttercup); } 100% { transform: scale(1); } } .dgd-star-btn--pulse { animation: dgd-star-pulse 0.4s ease-out; } /* When a date badge is present, push the star button below it */ .dgd-directory__card:has(.dgd-directory__card-datebadge) > .dgd-star-btn { top: 3.75rem; } /* ================================================ EVENT SUBMISSION FORM ================================================ */ .dgd-event-form { display: grid; gap: 1.25rem; } .dgd-event-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 600px) { .dgd-event-form__row { grid-template-columns: 1fr; } } .dgd-event-form label { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dgd-muted); margin-bottom: 0.4rem; } .dgd-event-form input, .dgd-event-form textarea, .dgd-event-form select { width: 100%; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: var(--dgd-radius-md); padding: 0.85rem 1rem; font-family: "DM Sans", sans-serif; font-size: 0.95rem; color: var(--dgd-ink); outline: none; transition: border-color 0.2s; } .dgd-event-form input:focus, .dgd-event-form textarea:focus, .dgd-event-form select:focus { border-color: var(--dgd-fuchsia); } .dgd-event-form textarea { min-height: 120px; resize: vertical; } .dgd-event-form input::placeholder, .dgd-event-form textarea::placeholder { color: var(--dgd-muted); } .dgd-event-form__submit { background: var(--dgd-fuchsia); color: var(--wp--preset--color--on-dark); border: 0; border-radius: 999px; padding: 1rem 2.5rem; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.2s; justify-self: start; } .dgd-event-form__submit:hover { background: var(--dgd-fuchsia-deep); } .dgd-event-form__submit:disabled { opacity: 0.6; cursor: not-allowed; } /* ================================================ STRIP MAP — Leaflet + CartoDB Dark Matter ================================================ */ .dgd-strip-map { padding: var(--wp--preset--spacing--60) 0; } .dgd-strip-map__canvas { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 420px; margin-top: 2rem; border-radius: var(--dgd-radius-lg); overflow: hidden; border: 1px solid var(--dgd-border); /* Painted in before tiles arrive so the empty state blends with CartoDB Dark */ background: var(--wp--preset--color--night-darker); } .dgd-strip-map__canvas--empty { aspect-ratio: auto; min-height: 0; padding: 2rem 0; } .dgd-strip-map__legend { text-align: center; font-size: 0.8rem; color: var(--dgd-muted); margin-top: 1rem; } .dgd-strip-map__attr { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.7rem; letter-spacing: 0.05em; } /* Leaflet controls + popups retuned for the dark theme */ .leaflet-container { background: var(--wp--preset--color--night-darker); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .leaflet-control-zoom a { background: rgba(10, 7, 22, 0.85); color: var(--dgd-ink); border: 1px solid var(--dgd-border); } .leaflet-control-zoom a:hover { background: rgba(255, 56, 137, 0.25); color: var(--dgd-ink); } .leaflet-control-attribution { background: rgba(10, 7, 22, 0.85) !important; color: var(--dgd-muted) !important; font-size: 10px !important; } .leaflet-control-attribution a { color: var(--dgd-muted) !important; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--dgd-bone); color: var(--dgd-ink); box-shadow: var(--dgd-shadow-card); } .leaflet-popup-content-wrapper { border-radius: var(--dgd-radius-sm); } .leaflet-popup-content { margin: 0.75rem 1rem; } .dgd-strip-map__popup strong { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 1rem; line-height: 1.15; color: var(--dgd-ink); margin-bottom: 0.15rem; } .dgd-strip-map__popup-type { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dgd-muted); margin-bottom: 0.5rem; } .dgd-strip-map__popup-link { display: inline-block; color: var(--dgd-fuchsia); font-weight: 700; font-size: 0.85rem; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; } .dgd-strip-map__popup-link:hover, .dgd-strip-map__popup-link:focus-visible { border-color: var(--dgd-fuchsia); } /* Permanent venue labels next to each pin */ .dgd-strip-map__label.leaflet-tooltip { background: rgba(10, 7, 22, 0.88); border: 1px solid rgba(255, 56, 137, 0.35); color: var(--dgd-ink); font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.01em; padding: 3px 8px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } /* Kill Leaflet's default arrow/tail on the tooltip — cleaner chip look */ .dgd-strip-map__label.leaflet-tooltip::before { display: none !important; } .dgd-strip-map__label--east { color: #FFD0E5; } .dgd-strip-map__label--west { color: #D0F4FF; } @media (max-width: 720px) { .dgd-strip-map__label.leaflet-tooltip { font-size: 0.65rem; padding: 2px 6px; max-width: 160px; } } /* Marker hover glow — circle markers use the fill color as currentColor */ .dgd-strip-map-pin { transition: filter 0.2s, stroke-width 0.2s; cursor: pointer; } .dgd-strip-map-pin:hover, .dgd-strip-map-pin:focus-visible { filter: drop-shadow(0 0 6px rgba(255, 56, 137, 0.6)); stroke-width: 3; } @media (max-width: 720px) { .dgd-strip-map__canvas { aspect-ratio: 4 / 5; min-height: 480px; } } /* ================================================ PARTNER NEWS — Dallas Voice card grid ================================================ */ .dgd-partner-news { padding-block: clamp(3rem, 2rem + 4vw, 5rem); } .dgd-partner-news__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--wp--preset--spacing--50, 1.5rem); margin-top: 2rem; } .dgd-partner-news--wide .dgd-partner-news__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } @media (min-width: 1100px) { .dgd-partner-news--wide .dgd-partner-news__grid { grid-template-columns: repeat(4, 1fr); } } .dgd-partner-news__card { display: flex; flex-direction: column; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: var(--dgd-radius-lg); overflow: hidden; text-decoration: none; color: var(--dgd-ink); box-shadow: var(--dgd-shadow-card); transition: transform 0.25s var(--dgd-ease), box-shadow 0.25s var(--dgd-ease), border-color 0.25s var(--dgd-ease); } .dgd-partner-news__card:hover, .dgd-partner-news__card:focus-visible { transform: translateY(-3px); box-shadow: var(--dgd-shadow-lift); border-color: var(--dgd-fuchsia); text-decoration: none; } .dgd-partner-news__media { width: 100%; aspect-ratio: 16 / 10; background-color: var(--dgd-midnight); position: relative; transition: filter 0.35s var(--dgd-ease); } .dgd-partner-news__card:hover .dgd-partner-news__media { filter: brightness(1.08) saturate(1.1); } .dgd-partner-news__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 7, 22, 0.35)); pointer-events: none; } .dgd-partner-news__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; } .dgd-partner-news__cat { margin: 0 0 0.25rem; font-size: 0.65rem; } .dgd-partner-news__title { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--dgd-ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dgd-partner-news__excerpt { font-size: 0.9rem; line-height: 1.5; color: var(--dgd-ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dgd-partner-news__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.5rem 0 0; padding-top: 0.75rem; border-top: 1px dashed var(--dgd-border); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgd-muted); } .dgd-partner-news__read { color: var(--dgd-fuchsia); font-weight: 700; transition: transform 0.2s var(--dgd-ease); display: inline-block; } .dgd-partner-news__card:hover .dgd-partner-news__read { transform: translateX(2px); } .dgd-partner-news__attribution { text-align: center; margin-top: 2rem; font-size: 0.8rem; color: var(--dgd-muted); } .dgd-partner-news__attribution a { color: var(--dgd-fuchsia); text-decoration: none; font-weight: 700; } .dgd-partner-news__attribution a:hover, .dgd-partner-news__attribution a:focus-visible { text-decoration: underline; } /* Homepage scroller — keeps the card size the editor likes while letting visitors swipe through up to 9 "This Week" picks without the grid growing taller. Strip + /news/ keep their multi-row grid layout untouched. */ .dgd-partner-news--home .dgd-partner-news__scroller { position: relative; margin-top: 2rem; } .dgd-partner-news--home .dgd-partner-news__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-inline: 0.5rem; gap: 1.25rem; margin-top: 0; padding: 0.25rem 0.25rem 1.25rem; scrollbar-width: thin; scrollbar-color: var(--dgd-fuchsia) rgba(255, 255, 255, 0.06); scroll-behavior: smooth; } .dgd-partner-news--home .dgd-partner-news__grid::-webkit-scrollbar { height: 8px; } .dgd-partner-news--home .dgd-partner-news__grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 4px; } .dgd-partner-news--home .dgd-partner-news__grid::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--dgd-fuchsia), var(--dgd-violet)); border-radius: 4px; } .dgd-partner-news--home .dgd-partner-news__card { flex: 0 0 clamp(260px, 28vw, 320px); scroll-snap-align: start; outline-offset: 2px; } .dgd-partner-news--home .dgd-partner-news__scroller::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1.5rem; width: 48px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--dgd-midnight)); opacity: 0.55; transition: opacity 0.25s var(--dgd-ease); } .dgd-partner-news--home .dgd-partner-news__scroller.is-at-end::after { opacity: 0; } /* Prev/Next arrow buttons overlaying the scroller edges */ .dgd-partner-news__scroll-btn { position: absolute; top: calc(50% - 0.75rem); transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dgd-border); background: rgba(10, 7, 22, 0.9); color: var(--dgd-ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: var(--dgd-shadow-card); cursor: pointer; transition: background 0.2s var(--dgd-ease), border-color 0.2s var(--dgd-ease), opacity 0.25s var(--dgd-ease), transform 0.2s var(--dgd-ease); } .dgd-partner-news__scroll-btn:hover, .dgd-partner-news__scroll-btn:focus-visible { background: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); color: var(--dgd-midnight); transform: translateY(-50%) scale(1.08); } .dgd-partner-news__scroll-btn[disabled], .dgd-partner-news__scroll-btn.is-disabled { opacity: 0.2; cursor: default; pointer-events: none; } .dgd-partner-news__scroll-btn--prev { left: -22px; } .dgd-partner-news__scroll-btn--next { right: -22px; } @media (max-width: 900px) { .dgd-partner-news__scroll-btn--prev { left: 4px; } .dgd-partner-news__scroll-btn--next { right: 4px; } } @media (max-width: 560px) { .dgd-partner-news__scroll-btn { display: none; } .dgd-partner-news--home .dgd-partner-news__scroller::after { width: 32px; } } /* "View more" CTA on home + Strip */ .dgd-partner-news__more { display: flex; justify-content: center; margin-top: 2rem; } .dgd-partner-news__more-link { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.75rem; border: 2px solid var(--dgd-border); border-radius: 999px; color: var(--dgd-ink); text-decoration: none; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; transition: all 0.2s var(--dgd-ease); } .dgd-partner-news__more-link:hover, .dgd-partner-news__more-link:focus-visible { background: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); color: var(--dgd-midnight); transform: translateY(-1px); } .dgd-partner-news__more-link svg { transition: transform 0.2s var(--dgd-ease); } .dgd-partner-news__more-link:hover svg { transform: translateX(3px); } /* "X new this week" freshness badge (news page hero) */ .dgd-partner-news__fresh { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.5rem; padding: 0.25rem 0.7rem; background: rgba(61, 245, 201, 0.12); border: 1px solid rgba(61, 245, 201, 0.35); border-radius: 999px; color: var(--dgd-mint); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; } .dgd-partner-news__fresh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dgd-mint); box-shadow: 0 0 0 0 rgba(61, 245, 201, 0.6); animation: dgd-partner-news-pulse 2s ease-out infinite; } @keyframes dgd-partner-news-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 245, 201, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(61, 245, 201, 0); } } @media (prefers-reduced-motion: reduce) { .dgd-partner-news__fresh-dot { animation: none; } } /* Category tabs (filter pills) on /news/ */ .dgd-partner-news__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0.5rem; } .dgd-partner-news__tab { display: inline-flex; align-items: center; padding: 0.4rem 0.9rem; border: 1px solid var(--dgd-border); border-radius: 999px; background: var(--dgd-bone); color: var(--dgd-ink-soft); text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; transition: all 0.2s var(--dgd-ease); } .dgd-partner-news__tab:hover, .dgd-partner-news__tab:focus-visible { border-color: var(--dgd-fuchsia); color: var(--dgd-ink); } .dgd-partner-news__tab.is-active { background: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); color: var(--dgd-midnight); } /* Pagination (Prev / page numbers / Next) */ .dgd-partner-news__pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--dgd-border); } .dgd-partner-news__pg-link, .dgd-partner-news__pg-num { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid var(--dgd-border); border-radius: 8px; color: var(--dgd-ink-soft); text-decoration: none; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; font-weight: 600; transition: all 0.2s var(--dgd-ease); min-width: 2.2rem; justify-content: center; } .dgd-partner-news__pg-link { padding-inline: 1rem; } .dgd-partner-news__pg-link:hover, .dgd-partner-news__pg-num:hover, .dgd-partner-news__pg-link:focus-visible, .dgd-partner-news__pg-num:focus-visible { border-color: var(--dgd-fuchsia); color: var(--dgd-ink); background: rgba(255, 56, 137, 0.08); } .dgd-partner-news__pg-num.is-current { background: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); color: var(--dgd-midnight); cursor: default; } .dgd-partner-news__pg-gap { color: var(--dgd-muted); padding-inline: 0.3rem; font-family: "JetBrains Mono", monospace; } @media (max-width: 720px) { .dgd-partner-news__grid { grid-template-columns: 1fr; gap: 1.25rem; } .dgd-partner-news__body { padding: 1rem; } .dgd-partner-news__tabs { gap: 0.35rem; } .dgd-partner-news__tab { padding: 0.35rem 0.7rem; font-size: 0.7rem; } /* Show fewer page numbers inline on mobile — Prev/Next still handle nav. */ .dgd-partner-news__pg-num:not(.is-current):nth-of-type(n + 4) { display: none; } } /* ================================================ VISUAL POLISH — global refinements ================================================ */ /* Tighter spacing between WP block sections */ .wp-block-group > * + .wp-block-group, .wp-block-group > * + section, main > * + * { margin-top: 0 !important; } /* Event card nth-child hover-border cycle migrated to components/card.css under .dgd-card--event. */ /* Feature cards — add subtle gradient shimmer on hover */ .dgd-feature-card { transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease), border-color 0.3s; position: relative; overflow: hidden; } .dgd-feature-card::after { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent); transition: left 0.6s ease; pointer-events: none; } .dgd-feature-card:hover::after { left: 150%; } /* Callout boxes — subtle left glow on hover */ .dgd-callout { transition: border-left-color 0.3s, box-shadow 0.3s; } .dgd-callout:hover { box-shadow: -4px 0 16px -4px rgba(255, 56, 137, 0.2); } .dgd-callout--tip:hover { box-shadow: -4px 0 16px -4px rgba(61, 245, 201, 0.2); } .dgd-callout--emergency:hover { box-shadow: -4px 0 16px -4px rgba(255, 122, 51, 0.2); } /* Newsletter section — add subtle radial glow */ .dgd-newsletter { position: relative; } .dgd-newsletter::before { content: ""; position: absolute; top: -100px; left: 50%; width: 600px; height: 600px; transform: translateX(-50%); background: radial-gradient(circle, rgba(255, 56, 137, 0.08) 0%, transparent 70%); pointer-events: none; } /* Footer — add top gradient border */ .dgd-footer { border-top: 1px solid var(--dgd-border); position: relative; } .dgd-footer::before { content: ""; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--dgd-fuchsia), var(--dgd-cyan), var(--dgd-buttercup), transparent); } /* Section headers — add animated underline to the link */ .dgd-sec-head__link { position: relative; } .dgd-sec-head__link::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.3s ease; } .dgd-sec-head__link:hover::after { width: calc(100% - 20px); } /* Single listing/event — better content prose styling */ .entry-content p, .wp-block-group .wp-block-post-content p { line-height: 1.75; margin-bottom: 1.25rem; } /* Smooth page load */ @keyframes dgd-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } main > *:first-child { animation: dgd-fade-in 0.5s ease-out; } /* Utility bar — slightly reduce height */ .dgd-util { padding-block: 0.4rem; } /* Better mobile responsiveness for feature card grids */ @media (max-width: 768px) { .dgd-feature-card { padding: 1.5rem; } .dgd-feature-icon { font-size: 2rem; } .dgd-steps { gap: 1rem; } .dgd-callout { padding: 1.5rem; } } /* ========================================================================= MOBILE POLISH Targeted tweaks for phone-sized viewports. Touch targets, tight spacing, iOS Safari fixes, safe-area insets, and specific layout adjustments. ========================================================================= */ /* ---------- Under 860px (large phones / small tablets) ---------- */ @media (max-width: 860px) { /* Hero — tighten padding and tune title floor */ .dgd-hero, .dgd-hero__slides { min-height: clamp(540px, 72svh, 780px); /* svh = small viewport height. iOS Safari handles the URL bar gracefully, falls back to vh automatically on browsers that don't support svh. */ } .dgd-hero__content { padding: 3.5rem var(--dgd-gutter) 4.5rem; } .dgd-hero__title { font-size: clamp(3rem, 1.5rem + 10vw, 6rem); max-width: 12ch; line-height: 0.92; } .dgd-hero__subhead { font-size: 1.05rem; line-height: 1.45; } .dgd-hero__ctas { gap: 0.65rem; } .dgd-hero__cta { padding: 0.95rem 1.5rem; font-size: 0.95rem; } .dgd-hero__credit { margin-top: 2rem; } .dgd-hero__dots { bottom: 1.25rem; } .dgd-hero__pause { bottom: 1rem; width: 32px; height: 32px; } /* Right Now — section header tightens; card layout stays a horizontal * carousel here (vertical-stack mode kicks in below 560px). */ .dgd-rightnow__head .dgd-sec-head__title { font-size: clamp(1.65rem, 1.3rem + 1.6vw, 2.4rem); } /* Strip crawl — smaller numbers, tighter plate */ .dgd-strip__item { min-height: 320px; border-radius: var(--dgd-radius-md); } .dgd-strip__number { font-size: 2.75rem; top: 1rem; left: 1rem; } .dgd-strip__badge { top: 1rem; right: 1rem; font-size: 0.6rem; padding: 0.3rem 0.6rem; } .dgd-strip__body { padding: 1.25rem 1.25rem 1.25rem; } .dgd-strip__name { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); } .dgd-strip__meta { font-size: 0.85rem; } /* Neighborhoods — tighter card padding */ .dgd-hoods__card { padding: 1.5rem; min-height: 220px; } .dgd-hoods__name { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); } /* Stories — flatten grid-row span at single column */ .dgd-stories__main { grid-row: auto; } .dgd-stories__main .dgd-stories__title { font-size: 1.75rem; } .dgd-stories__main .dgd-stories__media { aspect-ratio: 16/10; } /* Events grid — more flexible on narrow screens */ .dgd-events__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* Section heads — tighter outline link button */ .dgd-sec-head__link { padding: 0.65rem 1.1rem; font-size: 0.9rem; } /* Strip head / section heads stack titles to the lede below */ .dgd-strip__head { gap: 1rem; } .dgd-strip__title { font-size: clamp(2.25rem, 1.5rem + 4vw, 4rem); max-width: none; } .dgd-strip__lede { font-size: 1rem; max-width: none; } /* Listing hero — tighter padding, reduce image height on single column */ .dgd-listing-hero { padding: 3rem var(--dgd-gutter) 2.5rem; } .dgd-listing-hero__inner { gap: 1.75rem; } .dgd-listing-hero__media { aspect-ratio: 16/10; border-radius: var(--dgd-radius-md); } .dgd-listing-hero__title { font-size: clamp(2rem, 1.5rem + 4vw, 3.5rem); } .dgd-listing-hero__vibe { font-size: 1.1rem; } /* Newsletter */ .dgd-newsletter__title { font-size: clamp(2rem, 1.5rem + 3vw, 3rem); } .dgd-newsletter__sub { font-size: 1rem; } /* Footer — more breathing room at single-col */ .dgd-footer { padding: 4rem var(--dgd-gutter) 2.5rem; } .dgd-footer__brand h3 { font-size: 1.85rem; } /* Pill chips smaller */ .dgd-pill { padding: 0.4rem 0.75rem; font-size: 0.65rem; } } /* ---------- Under 560px (phones) ---------- */ @media (max-width: 560px) { /* Strip — go fully edge-to-edge on very narrow screens */ .dgd-strip__grid { gap: 1rem; } .dgd-strip__number { font-size: 2.5rem; } /* Hoods — single column handled by base; just tighten */ .dgd-hoods__grid { gap: 1rem; } .dgd-hoods__card { min-height: 200px; } /* Events grid — force single column instead of minmax */ .dgd-events__grid { grid-template-columns: 1fr; gap: 1rem; } /* Stories gap tightening */ .dgd-stories__grid { gap: 1rem; } /* Newsletter form stays stacked (already set) */ .dgd-newsletter__form { padding: 0.75rem; } .dgd-newsletter__submit { width: 100%; } } /* ================================================ DIRECTORY — Rich listing/event cards with images ================================================ */ .dgd-directory { padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60); overflow-x: clip; /* Prevent horizontal scroll from filter pills or sticky bleed */ } /* Sticky filter pills wrap */ .dgd-directory__filters-sentinel { height: 0; pointer-events: none; } .dgd-directory__filters-wrap { position: sticky; top: 0; z-index: 50; transition: background 0.3s, box-shadow 0.3s; } .dgd-directory__filters-wrap.is-sticky { background: rgba(12, 8, 32, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-top: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--dgd-border); box-shadow: 0 4px 24px rgba(0,0,0,0.3); } .dgd-directory__filters-wrap.is-sticky .dgd-directory__filters { margin-bottom: 0.5rem; padding-bottom: 0.5rem; } .dgd-directory__filters-wrap.is-sticky .dgd-directory__filters--when { margin-bottom: 0; } /* Event count indicator */ .dgd-directory__count { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dgd-muted); margin: 0 0 1.25rem; font-weight: 600; } /* Filter pills bar */ .dgd-directory__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--dgd-border); } .dgd-directory__pill { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--dgd-border); background: transparent; color: var(--dgd-ink-soft); text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; } .dgd-directory__pill:hover { border-color: var(--dgd-fuchsia); color: var(--dgd-fuchsia); } .dgd-directory__pill.is-active { /* fuchsia-deep (#C51864) hits 6.0:1 with white; plain fuchsia was 3.39:1 and failed AA for the pill's small-text/600-weight label. */ background: var(--dgd-fuchsia-deep); border-color: var(--dgd-fuchsia-deep); color: var(--dgd-on-dark); } .dgd-directory__pill-count { font-size: 0.6rem; opacity: 0.7; } .dgd-directory__filters--when { border-bottom: none; margin-bottom: 1.5rem; padding-bottom: 0; } .dgd-directory__filters--nhood { margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--dgd-border); border-bottom: none; margin-bottom: 1.5rem; padding-bottom: 0; } /* Horizontal scroll for filter pills on mobile */ @media (max-width: 640px) { .dgd-directory__filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.75rem; mask-image: linear-gradient(to right, transparent, black 0.5rem, black calc(100% - 1.5rem), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 0.5rem, black calc(100% - 1.5rem), transparent); } .dgd-directory__filters::-webkit-scrollbar { display: none; } .dgd-directory__pill { white-space: nowrap; flex-shrink: 0; } } /* Card grid — responsive: 2 cols mobile, 3 tablet, 4 desktop */ .dgd-directory__grid { display: grid; /* Single column at small phones — keeps event/venue cards readable. Bumps to 2-up at sm (480), 3-up at md+ (768/640 legacy), 4-up at lg+. */ grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 480px) { .dgd-directory__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 640px) { .dgd-directory__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .dgd-directory__grid { grid-template-columns: repeat(4, 1fr); } } /* Card */ .dgd-directory__card { display: flex; flex-direction: column; text-decoration: none; color: var(--dgd-ink); background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: var(--dgd-radius-md); overflow: hidden; transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease), border-color 0.3s; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); } .dgd-directory__card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--dgd-fuchsia), 0 12px 40px rgba(255,56,137,0.2); border-color: var(--dgd-fuchsia); } /* Event type accent — top border glow */ .dgd-directory__card[data-type="drag"] { border-top: 2px solid var(--wp--preset--color--violet); } .dgd-directory__card[data-type="nightlife"] { border-top: 2px solid var(--wp--preset--color--fuchsia); } .dgd-directory__card[data-type="culture"] { border-top: 2px solid var(--wp--preset--color--cyan); } .dgd-directory__card[data-type="festival"] { border-top: 2px solid var(--wp--preset--color--buttercup); } .dgd-directory__card[data-type="pride"] { border-top: 2px solid var(--wp--preset--color--fuchsia); } .dgd-directory__card[data-type="sports"] { border-top: 2px solid var(--wp--preset--color--mint); } .dgd-directory__card[data-type="bar"] { border-top: 2px solid var(--wp--preset--color--fuchsia); } .dgd-directory__card[data-type="club"] { border-top: 2px solid var(--wp--preset--color--violet); } .dgd-directory__card[data-type="restaurant"] { border-top: 2px solid var(--wp--preset--color--buttercup); } .dgd-directory__card[data-type="cafe"] { border-top: 2px solid var(--wp--preset--color--mint); } .dgd-directory__card[data-type="hotel"] { border-top: 2px solid var(--wp--preset--color--cyan); } .dgd-directory__card[data-type="shop"] { border-top: 2px solid var(--wp--preset--color--tangerine); } /* Card image area */ .dgd-directory__card-image { aspect-ratio: 4/3; background-size: cover; background-position: center; position: relative; overflow: hidden; } /* Subtle bottom scrim for badges */ .dgd-directory__card-image::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(0deg, rgba(10,8,32,0.5) 0%, transparent 100%); pointer-events: none; } /* Type badge */ .dgd-directory__card-badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; font-family: "JetBrains Mono", monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 6px; background: rgba(10, 8, 32, 0.7); backdrop-filter: blur(8px); color: var(--wp--preset--color--on-dark); } /* Date badge — top-right of event card images */ .dgd-directory__card-datebadge { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; display: flex; flex-direction: column; align-items: center; min-width: 2.75rem; padding: 0.35rem 0.5rem 0.4rem; border-radius: 8px; background: rgba(10, 8, 32, 0.75); backdrop-filter: blur(8px); line-height: 1; text-align: center; } .dgd-directory__card-datebadge-mo { font-family: "JetBrains Mono", monospace; font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--dgd-fuchsia); } .dgd-directory__card-datebadge-day { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--wp--preset--color--on-dark); line-height: 1.1; letter-spacing: -0.02em; } /* Recurring event date badge — compact day + time */ .dgd-directory__card-datebadge--recurring .dgd-directory__card-datebadge-mo { font-size: 0.65rem; color: var(--dgd-cyan, var(--wp--preset--color--cyan)); } .dgd-directory__card-datebadge--recurring .dgd-directory__card-datebadge-day { font-size: 0.7rem; font-family: "JetBrains Mono", monospace; font-weight: 600; letter-spacing: 0.05em; } /* Price badge */ .dgd-directory__card-price { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 2; font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.1em; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 6px; background: rgba(255, 212, 59, 0.9); color: var(--wp--preset--color--night); } /* Card body */ .dgd-directory__card-body { padding: 1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; } .dgd-directory__card-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1rem; font-weight: 800; line-height: 1.15; margin: 0; letter-spacing: -0.01em; color: var(--dgd-ink); } .dgd-directory__card-vibe { font-size: 0.82rem; line-height: 1.45; color: var(--dgd-ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dgd-directory__card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; } .dgd-directory__card-nhood { display: inline-flex; align-items: center; gap: 0.3rem; font-family: "JetBrains Mono", monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgd-muted); } .dgd-directory__card-date { font-family: "JetBrains Mono", monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgd-buttercup); font-weight: 600; } /* Event card meta — clock + venue + address */ .dgd-directory__card-when { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--dgd-ink); width: 100%; } .dgd-directory__card-when svg { flex-shrink: 0; color: var(--dgd-fuchsia); } .dgd-directory__card-venue { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--dgd-ink); width: 100%; } .dgd-directory__card-venue svg { flex-shrink: 0; color: var(--dgd-fuchsia); } .dgd-directory__card-address { font-size: 0.7rem; color: var(--dgd-muted); padding-left: 1.15rem; width: 100%; } /* Mobile: 1 col on very small */ @media (max-width: 480px) { .dgd-directory__grid { grid-template-columns: 1fr; } .dgd-directory__card-image { aspect-ratio: 16/9; } .dgd-directory__card-title { font-size: 1.2rem; } .dgd-directory__card-vibe { -webkit-line-clamp: 3; } .dgd-directory__card-actions { flex-direction: row; } .dgd-directory__card-actions .dgd-directory__card-tickets, .dgd-directory__card-nav { flex: 1; padding: 0.55rem 0.75rem; font-size: 0.72rem; } } /* Section headers fully stack with tighter gap */ .dgd-sec-head { gap: 1rem; margin-bottom: 1.75rem; } .dgd-sec-head__title { font-size: clamp(1.85rem, 1.3rem + 3vw, 3rem); } /* Page hero padding */ .dgd-page-hero > .wp-block-group, .dgd-page-hero { padding-left: var(--dgd-gutter); padding-right: var(--dgd-gutter); } /* Listing hero meta labels wrap gracefully */ .dgd-listing-hero__meta div { flex-wrap: wrap; } .dgd-listing-hero__meta strong { min-width: auto; } /* Footer columns get tighter */ .dgd-footer__col h4 { margin-bottom: 0.75rem; } .dgd-footer__col ul { gap: 0.5rem; } } /* ---------- iOS Safari / touch device polish ---------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Kill the ugly blue tap highlight, keep focus-visible outline for keyboard */ a, button, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; } /* Momentum scrolling on scrollable regions */ .dgd-drawer__panel { -webkit-overflow-scrolling: touch; } /* Safe-area insets on always-sticky / always-dark bars (iPhone notch area) */ @supports (padding: env(safe-area-inset-left)) { .dgd-util__inner { padding-left: max(var(--dgd-gutter), env(safe-area-inset-left)); padding-right: max(var(--dgd-gutter), env(safe-area-inset-right)); } .dgd-main__inner { padding-left: max(var(--dgd-gutter), env(safe-area-inset-left)); padding-right: max(var(--dgd-gutter), env(safe-area-inset-right)); } .dgd-footer { padding-left: max(var(--dgd-gutter), env(safe-area-inset-left)); padding-right: max(var(--dgd-gutter), env(safe-area-inset-right)); padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); } .dgd-hero__content { padding-left: max(var(--dgd-gutter), env(safe-area-inset-left)); padding-right: max(var(--dgd-gutter), env(safe-area-inset-right)); } .dgd-drawer__panel { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-right: env(safe-area-inset-right); } } /* Reduce motion — respect user preference */ @media (prefers-reduced-motion: reduce) { .dgd-hero__slide, .dgd-strip__item, .dgd-mega, .dgd-drawer, .dgd-drawer__panel, .dgd-hero__cta, .dgd-hoods__card, .dgd-stories__main, .dgd-stories__side, .dgd-rightnow__card, .dgd-mega__card { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transform: none !important; } } /* ------------------------------------------------------------------ LISTING ABOUT CARD ------------------------------------------------------------------ */ .dgd-listing-about { max-width: var(--wp--style--global--wide-size, 1320px); } .dgd-listing-about .dgd-about__heading { font-family: var(--wp--preset--font-family--display); letter-spacing: -0.02em; color: var(--dgd-ink); } .dgd-listing-about__card { background: var(--dgd-bone); border-radius: 0.75rem; border-left: 3px solid var(--dgd-fuchsia) !important; } .dgd-listing-about__card p { font-size: 0.95rem; line-height: 1.7; color: var(--dgd-ink-soft); margin-bottom: 0.75rem; } .dgd-listing-about__card p:last-child { margin-bottom: 0; } .dgd-listing-about__card strong { color: var(--dgd-ink); } @media (max-width: 600px) { .dgd-listing-about__card { padding: 1.25rem 1.25rem !important; } } /* ------------------------------------------------------------------ LISTING HERO v2 — full-bleed image with overlay + details bar ------------------------------------------------------------------ */ .dgd-listing-hero2 { position: relative; } .dgd-listing-hero2__image { position: relative; min-height: 520px; display: flex; align-items: flex-end; padding: 3rem var(--wp--preset--spacing--30) 2.5rem; background-size: cover; background-position: center; } .dgd-listing-hero2__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(10, 7, 22, 0.95) 0%, rgba(10, 7, 22, 0.6) 40%, rgba(10, 7, 22, 0.2) 70%, transparent 100% ); } .dgd-listing-hero2__content { position: relative; z-index: 1; max-width: var(--wp--style--global--wide-size, 1320px); margin: 0 auto; width: 100%; } .dgd-listing-hero2__badge { display: inline-block; padding: 0.3rem 0.8rem; background: rgba(255, 56, 137, 0.2); border: 1px solid var(--dgd-fuchsia); border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dgd-fuchsia); margin-bottom: 0.75rem; } .dgd-listing-hero2__nhood { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.5rem; font-size: 0.78rem; color: var(--dgd-ink-soft); font-weight: 600; } .dgd-listing-hero2__title { font-family: var(--wp--preset--font-family--display); font-size: clamp(2.75rem, 2rem + 5vw, 5.5rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.03em; margin: 0.5rem 0 0.75rem; color: var(--dgd-ink); max-width: 700px; } .dgd-listing-hero2__vibe { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); color: var(--dgd-ink-soft); margin: 0 0 1.5rem; max-width: 550px; line-height: 1.4; } .dgd-listing-hero2__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .dgd-listing-hero2__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.75rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: all 0.2s; cursor: pointer; } .dgd-listing-hero2__btn--primary { background: var(--dgd-fuchsia); color: var(--wp--preset--color--on-dark); border: 2px solid var(--dgd-fuchsia); } .dgd-listing-hero2__btn--primary:hover { background: var(--dgd-violet); border-color: var(--dgd-violet); transform: scale(1.03); } .dgd-listing-hero2__btn--ghost { background: transparent; color: var(--dgd-ink); border: 2px solid rgba(255,255,255,0.25); } .dgd-listing-hero2__btn--ghost:hover { border-color: var(--dgd-ink); background: rgba(255,255,255,0.06); } /* Details bar */ .dgd-listing-hero2__details { display: flex; flex-wrap: wrap; gap: 0; max-width: var(--wp--style--global--wide-size, 1320px); margin: 0 auto; padding: 0 var(--wp--preset--spacing--30); background: var(--dgd-bone); border-bottom: 1px solid var(--dgd-border); } .dgd-listing-hero2__detail { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.25rem 1.75rem; border-right: 1px solid var(--dgd-border); min-width: 140px; } .dgd-listing-hero2__detail:last-child { border-right: none; } .dgd-listing-hero2__fun-fact { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.25rem 1.75rem; flex: 1; background: rgba(255, 56, 137, 0.04); border-left: 3px solid var(--dgd-fuchsia); } .dgd-listing-hero2__detail-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dgd-fuchsia); } .dgd-listing-hero2__detail-value { font-size: 0.88rem; font-weight: 500; color: var(--dgd-ink); } .dgd-listing-hero2__detail-link { font-size: 0.88rem; font-weight: 600; color: var(--dgd-cyan); text-decoration: none; } .dgd-listing-hero2__detail-link:hover { text-decoration: underline; } @media (max-width: 768px) { .dgd-listing-hero2__image { min-height: 400px; padding: 2rem 1.25rem 2rem; } .dgd-listing-hero2__title { font-size: clamp(2rem, 1.5rem + 4vw, 3.5rem); } .dgd-listing-hero2__details { flex-direction: column; padding: 0; } .dgd-listing-hero2__detail { border-right: none; border-bottom: 1px solid var(--dgd-border); padding: 1rem 1.25rem; } .dgd-listing-hero2__fun-fact { padding: 1rem 1.25rem; } } /* ========================================================================== SINGLE EVENT V2 — IMMERSIVE HERO ========================================================================== */ .dgd-ehero { position: relative; width: 100%; height: min(80vh, 600px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; } .dgd-ehero__media { position: absolute; inset: -4%; background-size: cover; background-position: center; transform: scale(1.04); animation: dgd-ehero-drift 20s ease-in-out infinite alternate; } @keyframes dgd-ehero-drift { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.08) translate(-0.5%, -0.5%); } } @media (prefers-reduced-motion: reduce) { .dgd-ehero__media { animation: none; transform: scale(1); } } .dgd-ehero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 8, 32, 0.15) 0%, rgba(12, 8, 32, 0.25) 30%, rgba(12, 8, 32, 0.7) 65%, rgba(12, 8, 32, 0.95) 100% ); pointer-events: none; } .dgd-ehero__breadcrumb { position: absolute; top: 0; left: 0; right: 0; padding: 1.25rem var(--wp--preset--spacing--30, 2rem); z-index: 3; } .dgd-ehero__breadcrumb a { display: inline-flex; align-items: center; gap: 0.35rem; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: rgba(244, 238, 224, 0.65); text-decoration: none; transition: color 0.2s; } .dgd-ehero__breadcrumb a:hover { color: var(--wp--preset--color--on-dark); } .dgd-ehero__content { position: relative; z-index: 2; max-width: var(--wp--style--global--wide-size, 1320px); margin: 0 auto; padding: 0 var(--wp--preset--spacing--30, 2rem) var(--wp--preset--spacing--40, 2.5rem); width: 100%; display: flex; flex-direction: column; gap: 0.6rem; animation: dgd-ehero-fadein 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes dgd-ehero-fadein { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .dgd-ehero__content { animation: none; } } .dgd-ehero__badge { display: inline-flex; align-self: flex-start; padding: 0.35rem 1rem; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp--preset--color--on-dark); animation: dgd-ehero-fadein 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } .dgd-ehero__title { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(2.2rem, 1.5rem + 4vw, 4.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; color: var(--wp--preset--color--on-dark); margin: 0; max-width: 18ch; animation: dgd-ehero-fadein 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } .dgd-ehero__when { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dgd-buttercup, var(--wp--preset--color--buttercup)); margin: 0; animation: dgd-ehero-fadein 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; } .dgd-ehero__venue { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 600; color: rgba(244, 238, 224, 0.8); margin: 0; animation: dgd-ehero-fadein 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; } .dgd-ehero__venue svg { opacity: 0.6; } .dgd-ehero__venue-link { color: rgba(244, 238, 224, 0.9); text-decoration: none; border-bottom: 1px dashed rgba(255, 56, 137, 0.6); transition: color 0.2s, border-color 0.2s; } .dgd-ehero__venue-link:hover { color: var(--wp--preset--color--on-dark); border-bottom-color: var(--dgd-fuchsia); border-bottom-style: solid; } /* External-source attribution chip on imported events */ .dgd-ehero__source { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding: 0.25rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(10, 7, 22, 0.55); color: rgba(244, 238, 224, 0.85); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; } .dgd-ehero__source svg { opacity: 0.7; } .dgd-ehero__source-link { color: var(--dgd-fuchsia); text-decoration: none; font-weight: 700; } .dgd-ehero__source-link:hover, .dgd-ehero__source-link:focus-visible { color: var(--wp--preset--color--on-dark); } @media (max-width: 600px) { .dgd-ehero { height: 60vh; min-height: 380px; } .dgd-ehero__title { font-size: clamp(1.8rem, 1.2rem + 4vw, 2.8rem); } .dgd-ehero__content { padding-bottom: var(--wp--preset--spacing--30, 1.5rem); } } /* ========================================================================== SINGLE EVENT V2 — STICKY QUICK-ACTION BAR ========================================================================== */ .dgd-esticky__sentinel { height: 0; pointer-events: none; } .dgd-esticky { position: fixed; left: 0; right: 0; top: 0; z-index: 80; opacity: 0; transform: translateY(-100%); pointer-events: none; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .dgd-esticky.is-stuck { opacity: 1; transform: translateY(0); pointer-events: auto; background: rgba(12, 8, 32, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--dgd-border); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } .dgd-esticky.is-dismissed { opacity: 0; transform: translateY(-100%); pointer-events: none; } .dgd-esticky__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--dgd-ink-soft); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; flex-shrink: 0; } .dgd-esticky__close:hover { color: var(--dgd-ink); background: rgba(255, 253, 247, 0.08); border-color: var(--dgd-border); } @media (min-width: 700px) { /* On desktop the bar has room; the close is a nice-to-have but lower prominence. */ .dgd-esticky__close { opacity: 0.7; } .dgd-esticky__close:hover { opacity: 1; } } .dgd-esticky__inner { display: flex; align-items: center; gap: 1rem; padding-block: 0.65rem; } .dgd-esticky__title { flex: 1; min-width: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--dgd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dgd-esticky__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .dgd-esticky__btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; border: none; font-family: inherit; } .dgd-esticky__btn--ghost { background: transparent; color: var(--dgd-ink-soft); border: 1px solid var(--dgd-border); } .dgd-esticky__btn--ghost:hover { border-color: var(--dgd-fuchsia); color: var(--dgd-fuchsia); transform: scale(1.04); } .dgd-esticky__btn--primary { background: var(--dgd-fuchsia); color: var(--wp--preset--color--on-dark); } .dgd-esticky__btn--primary:hover { background: var(--dgd-violet); transform: scale(1.04); color: var(--wp--preset--color--on-dark); } .dgd-esticky__save.is-saved { color: var(--dgd-buttercup); border-color: var(--dgd-buttercup); } .dgd-esticky__save.is-saved svg { fill: currentColor; } @media (max-width: 600px) { .dgd-esticky { display: none; } } @media (max-width: 900px) { .dgd-esticky__btn-label { display: none; } /* Touch target: WCAG-recommended 44px minimum. Tightened padding kept visual density but cropped the tap target. */ .dgd-esticky__btn { min-height: 44px; min-width: 44px; padding: 0.65rem 0.85rem; display: inline-flex; align-items: center; justify-content: center; } } /* ========================================================================== SINGLE EVENT V2 — DETAILS CARDS ========================================================================== */ .dgd-edetails { padding: var(--wp--preset--spacing--40, 2rem) 0; position: relative; z-index: 1; margin-top: -1.5rem; } .dgd-edetails__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .dgd-edetails__card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1.75rem; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } .dgd-edetails__card-label { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dgd-fuchsia); } /* Date block — calendar style */ .dgd-edetails__date-block { display: flex; flex-direction: column; align-items: center; width: 80px; padding: 0.5rem 0; border-radius: 12px; border: 2px solid var(--dgd-fuchsia); background: rgba(255, 56, 137, 0.06); text-align: center; } .dgd-edetails__date-month { font-family: "JetBrains Mono", monospace; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dgd-fuchsia); } .dgd-edetails__date-day { font-family: "Bricolage Grotesque", sans-serif; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--dgd-ink); } .dgd-edetails__date-dow { font-family: "JetBrains Mono", monospace; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dgd-ink-soft); } /* Time display */ .dgd-edetails__time { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.95rem; color: var(--dgd-ink); } .dgd-edetails__time svg { color: var(--dgd-ink-soft); flex-shrink: 0; } .dgd-edetails__time-sep { opacity: 0.5; } /* Recurrence badge */ .dgd-edetails__recurrence { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--dgd-cyan, var(--wp--preset--color--cyan)); } /* Calendar link */ .dgd-edetails__cal { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--dgd-cyan, var(--wp--preset--color--cyan)); text-decoration: none; transition: color 0.2s; } .dgd-edetails__cal:hover { color: var(--wp--preset--color--on-dark); } .dgd-edetails__cal svg { flex-shrink: 0; } /* Venue spotlight */ .dgd-edetails__venue-spotlight { display: flex; gap: 1rem; align-items: flex-start; } .dgd-edetails__venue-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; } .dgd-edetails__venue-thumb img { width: 100%; height: 100%; object-fit: cover; } .dgd-edetails__venue-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .dgd-edetails__venue-name { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.2rem; font-weight: 700; margin: 0; color: var(--dgd-ink); } .dgd-edetails__venue-name a { color: var(--dgd-ink); text-decoration: none; border-bottom: 1px dashed var(--dgd-fuchsia); transition: color 0.2s, border-color 0.2s; } .dgd-edetails__venue-name a:hover { color: var(--dgd-fuchsia); border-bottom-style: solid; } /* Venue co-location context */ .dgd-edetails__venue-context { font-size: 0.8rem; color: var(--dgd-cyan, var(--wp--preset--color--cyan)); margin: 0; } .dgd-edetails__venue-context a { color: var(--dgd-cyan, var(--wp--preset--color--cyan)); text-decoration: none; font-weight: 600; border-bottom: 1px dashed currentColor; transition: color 0.2s; } .dgd-edetails__venue-context a:hover { color: var(--wp--preset--color--on-dark); } /* Address link */ .dgd-edetails__address { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--dgd-muted); text-decoration: none; transition: color 0.2s; } .dgd-edetails__address:hover { color: var(--dgd-fuchsia); } /* Get directions button */ .dgd-edetails__directions { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; padding: 0.45rem 1.1rem; border-radius: 999px; border: 1px solid var(--dgd-cyan, var(--wp--preset--color--cyan)); background: transparent; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--dgd-cyan, var(--wp--preset--color--cyan)); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; align-self: flex-start; } .dgd-edetails__directions:hover { background: var(--dgd-cyan, var(--wp--preset--color--cyan)); color: var(--wp--preset--color--night); transform: scale(1.04); } .dgd-edetails__directions:focus-visible { outline: 3px solid var(--dgd-violet); outline-offset: 2px; } .dgd-edetails__directions svg { flex-shrink: 0; } /* Action row */ .dgd-edetails__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; } .dgd-edetails__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; border-radius: 999px; background: var(--dgd-fuchsia); color: var(--wp--preset--color--on-dark); font-size: 0.88rem; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; animation: dgd-neon-pulse 3s ease-in-out infinite; } @keyframes dgd-neon-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(255, 56, 137, 0.25); } 50% { box-shadow: 0 8px 32px rgba(255, 56, 137, 0.45); } } @media (prefers-reduced-motion: reduce) { .dgd-edetails__cta { animation: none; box-shadow: 0 8px 24px rgba(255, 56, 137, 0.25); } } .dgd-edetails__cta:hover { background: var(--dgd-violet); transform: scale(1.04); color: var(--wp--preset--color--on-dark); } .dgd-edetails__share-btn, .dgd-edetails__save-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 999px; border: 1px solid var(--dgd-border); background: transparent; color: var(--dgd-ink-soft); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.2s; font-family: inherit; } .dgd-edetails__share-btn:hover { border-color: var(--dgd-fuchsia); color: var(--dgd-fuchsia); transform: scale(1.04); } .dgd-edetails__save-btn:hover { border-color: var(--dgd-buttercup, var(--wp--preset--color--buttercup)); color: var(--dgd-buttercup, var(--wp--preset--color--buttercup)); transform: scale(1.04); } .dgd-edetails__save-btn.is-saved { border-color: var(--dgd-buttercup, var(--wp--preset--color--buttercup)); color: var(--dgd-buttercup, var(--wp--preset--color--buttercup)); } .dgd-edetails__save-btn.is-saved svg { fill: currentColor; } .dgd-edetails__share-btn:focus-visible, .dgd-edetails__save-btn:focus-visible { outline: 3px solid var(--dgd-violet); outline-offset: 2px; } @media (max-width: 600px) { .dgd-edetails__grid { grid-template-columns: 1fr; } .dgd-edetails__actions { flex-direction: column; align-items: stretch; } .dgd-edetails__cta, .dgd-edetails__share-btn, .dgd-edetails__save-btn { justify-content: center; width: 100%; } } /* ========================================================================== SINGLE EVENT V2 — ABOUT (enhanced) ========================================================================== */ .dgd-event-about--v2 .dgd-about__heading { border-bottom-color: var(--dgd-fuchsia); } /* ========================================================================== SINGLE EVENT V2 — SHARE SECTION ========================================================================== */ .dgd-eshare { padding: var(--wp--preset--spacing--40, 2rem) 0 var(--wp--preset--spacing--50, 3rem); text-align: center; } .dgd-eshare__heading { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--dgd-ink); margin: 0 0 0.3rem; } .dgd-eshare__sub { font-size: 0.95rem; color: var(--dgd-ink-soft); margin: 0 0 1.5rem; } .dgd-eshare__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 700px; margin: 0 auto; } .dgd-eshare__option { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.25rem 1rem; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 14px; cursor: pointer; text-decoration: none; color: var(--dgd-ink); transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; font-family: inherit; } .dgd-eshare__option:hover { border-color: var(--dgd-fuchsia); transform: translateY(-3px); box-shadow: 0 0 0 1px var(--dgd-fuchsia), 0 8px 24px rgba(255, 56, 137, 0.15); color: var(--dgd-ink); } .dgd-eshare__option svg { color: var(--dgd-fuchsia); } .dgd-eshare__option-label { font-weight: 700; font-size: 0.85rem; } .dgd-eshare__option-sub { font-size: 0.7rem; color: var(--dgd-ink-soft); } @media (max-width: 600px) { .dgd-eshare__grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== SINGLE EVENT V2 — RELATED EVENTS (horizontal scroll) ========================================================================== */ .dgd-erelated { padding: var(--wp--preset--spacing--50) 0; } .dgd-erelated__section { margin-bottom: var(--wp--preset--spacing--40); } .dgd-erelated__section:last-child { margin-bottom: 0; } .dgd-erelated__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; max-width: var(--wp--style--global--wide-size, 1320px); margin-left: auto; margin-right: auto; padding: 0 var(--wp--preset--spacing--30, 2rem); } .dgd-erelated__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--dgd-ink); margin: 0; } .dgd-erelated__link { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgd-fuchsia); text-decoration: none; white-space: nowrap; transition: color 0.2s; } .dgd-erelated__link:hover { color: var(--wp--preset--color--on-dark); } /* Horizontal scroll track */ .dgd-erelated__track-wrap { position: relative; } .dgd-erelated__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.5rem var(--wp--preset--spacing--30, 2rem) 1rem; } .dgd-erelated__track::-webkit-scrollbar { display: none; } /* Related event card — horizontal scroll variant */ .dgd-erelated__card { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: var(--dgd-ink); background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: var(--dgd-radius-md, 12px); overflow: hidden; transition: transform 0.3s var(--dgd-ease, ease), box-shadow 0.3s, border-color 0.3s; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .dgd-erelated__card:hover { transform: translateY(-5px); border-color: var(--dgd-fuchsia); box-shadow: 0 0 0 1px var(--dgd-fuchsia), 0 12px 40px rgba(255, 56, 137, 0.2); } .dgd-erelated__card[data-type="drag"] { border-top: 2px solid var(--wp--preset--color--violet); } .dgd-erelated__card[data-type="nightlife"] { border-top: 2px solid var(--wp--preset--color--fuchsia); } .dgd-erelated__card[data-type="culture"] { border-top: 2px solid var(--wp--preset--color--cyan); } .dgd-erelated__card[data-type="festival"] { border-top: 2px solid var(--wp--preset--color--buttercup); } .dgd-erelated__card[data-type="pride"] { border-top: 2px solid var(--wp--preset--color--fuchsia); } .dgd-erelated__card[data-type="sports"] { border-top: 2px solid var(--wp--preset--color--mint); } .dgd-erelated__card-image { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; } .dgd-erelated__card-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.25rem 1.25rem; } .dgd-erelated__card-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--dgd-ink); margin: 0; line-height: 1.3; } .dgd-erelated__card-when { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--dgd-fuchsia); } .dgd-erelated__card-venue { font-size: 0.85rem; color: var(--dgd-ink-soft); display: flex; align-items: center; gap: 0.3rem; } /* Scroll nav arrows */ .dgd-erelated__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--dgd-border); background: rgba(12, 8, 32, 0.85); backdrop-filter: blur(8px); color: var(--dgd-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s, transform 0.2s; } .dgd-erelated__nav:hover { border-color: var(--dgd-fuchsia); color: var(--dgd-fuchsia); transform: translateY(-50%) scale(1.1); } .dgd-erelated__nav--prev { left: 0.5rem; } .dgd-erelated__nav--next { right: 0.5rem; } .dgd-erelated__nav[disabled] { opacity: 0.3; pointer-events: none; } @media (max-width: 600px) { .dgd-erelated__card { flex: 0 0 260px; } .dgd-erelated__nav { display: none; } } /* ------------------------------------------------------------------ EVENT DETAILS BAR (single event page) — legacy, kept for cache ------------------------------------------------------------------ */ .dgd-event-bar { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-start; max-width: var(--wp--style--global--wide-size, 1320px); margin: 0 auto; padding: 1.75rem 2rem; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.4); position: relative; z-index: 1; margin-top: -1rem; } .dgd-event-bar__item { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 180px; } .dgd-event-bar__item--cta { flex: 0 0 auto; justify-content: center; display: flex; flex-direction: column; gap: 0.5rem; align-self: center; } .dgd-event-bar__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dgd-fuchsia); } .dgd-event-bar__value { font-weight: 600; color: var(--dgd-ink); font-size: 0.95rem; } .dgd-event-bar__sub { font-size: 0.82rem; color: var(--dgd-muted); } .dgd-event-bar__recurrence { font-size: 0.78rem; color: var(--dgd-cyan); font-weight: 600; } .dgd-event-bar__ticket { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.5rem; border-radius: 999px; background: var(--dgd-fuchsia); color: var(--wp--preset--color--on-dark); font-size: 0.85rem; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.2s, transform 0.2s; } .dgd-event-bar__ticket:hover { background: var(--dgd-violet); transform: scale(1.04); color: var(--wp--preset--color--on-dark); } /* Venue link in event bar */ .dgd-event-bar__venue-link { color: var(--dgd-ink); text-decoration: none; border-bottom: 1px dashed var(--dgd-fuchsia); transition: color 0.2s, border-color 0.2s; } .dgd-event-bar__venue-link:hover { color: var(--dgd-fuchsia); border-bottom-style: solid; } /* Address link with map pin */ .dgd-event-bar__address-link { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; color: var(--dgd-muted); transition: color 0.2s; } .dgd-event-bar__address-link:hover { color: var(--dgd-fuchsia); } /* End time display */ .dgd-event-bar__end { opacity: 0.6; } /* Add to Calendar link */ .dgd-event-bar__cal { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--dgd-cyan, var(--wp--preset--color--cyan)); text-decoration: none; transition: color 0.2s; } .dgd-event-bar__cal:hover { color: var(--wp--preset--color--on-dark); } .dgd-event-bar__cal svg { flex-shrink: 0; } /* Get Directions button in event details bar */ .dgd-event-bar__directions { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding: 0.45rem 1.1rem; border-radius: 999px; border: 1px solid var(--dgd-cyan, var(--wp--preset--color--cyan)); background: transparent; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--dgd-cyan, var(--wp--preset--color--cyan)); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; } .dgd-event-bar__directions:hover { background: var(--dgd-cyan, var(--wp--preset--color--cyan)); color: var(--wp--preset--color--night); transform: scale(1.04); } .dgd-event-bar__directions:focus-visible { outline: 3px solid var(--dgd-violet); outline-offset: 2px; } .dgd-event-bar__directions svg { flex-shrink: 0; } /* Share button in event details bar */ .dgd-event-bar__share { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.5rem; border-radius: 999px; border: 1px solid var(--dgd-border); background: transparent; color: var(--dgd-ink-soft); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.2s; font-family: inherit; } .dgd-event-bar__share:hover { border-color: var(--dgd-fuchsia); color: var(--dgd-fuchsia); transform: scale(1.04); } .dgd-event-bar__share:focus-visible { outline: 3px solid var(--dgd-violet); outline-offset: 2px; } /* ========================================================================== MOBILE STICKY BOTTOM ACTION BAR (single event page) ========================================================================== */ .dgd-event-bar-mobile { display: none; } @media (max-width: 600px) { .dgd-event-bar-mobile { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--dgd-bone); border-top: 1px solid var(--dgd-border); padding: 0.6rem 1rem; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); gap: 0.5rem; box-shadow: 0 -4px 24px rgba(0,0,0,0.4); } /* Prevent content from hiding behind the bar */ body:has(.dgd-event-bar-mobile) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); } /* Toast positions above the bar on mobile */ body:has(.dgd-event-bar-mobile) .dgd-toast { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); } } .dgd-event-bar-mobile__btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.5rem 0.5rem; font-family: "JetBrains Mono", monospace; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dgd-ink-soft); background: none; border: none; cursor: pointer; text-decoration: none; transition: color 0.2s; min-height: 48px; border-radius: 10px; } .dgd-event-bar-mobile__btn:hover, .dgd-event-bar-mobile__btn:active { color: var(--dgd-ink); } .dgd-event-bar-mobile__btn.is-saved { color: var(--dgd-buttercup); } .dgd-event-bar-mobile__btn--primary { background: var(--dgd-fuchsia); color: var(--wp--preset--color--on-dark); } .dgd-event-bar-mobile__btn--primary:hover, .dgd-event-bar-mobile__btn--primary:active { color: var(--wp--preset--color--on-dark); background: var(--dgd-violet); } /* ========================================================================== SINGLE EVENT — HERO ========================================================================== */ .dgd-event-hero { padding: var(--wp--preset--spacing--30) 0 0; } .dgd-event-hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; } .dgd-event-hero__media { border-radius: 16px; overflow: hidden; } .dgd-event-hero__media img { width: 100%; height: auto; display: block; border-radius: 16px; aspect-ratio: 4/3; object-fit: cover; } .dgd-event-hero__info { display: flex; flex-direction: column; gap: 0.6rem; } .dgd-event-hero__title { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(2rem, 1.2rem + 3.5vw, 4rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; color: var(--dgd-ink); margin: 0; } .dgd-event-hero__excerpt { font-size: 1.05rem; line-height: 1.55; color: var(--dgd-ink-soft); margin-top: 0.25rem; } .dgd-event-hero__excerpt p { margin: 0; } .dgd-event-hero__actions { margin-top: 0.75rem; } @media (max-width: 900px) { .dgd-event-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; } } /* ========================================================================== SINGLE EVENT — ABOUT SECTION ========================================================================== */ .dgd-event-about { background: var(--dgd-bone); border-top: 1px solid var(--dgd-border); border-bottom: 1px solid var(--dgd-border); } .dgd-event-about .dgd-about__heading { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--dgd-ink); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--dgd-fuchsia); display: inline-block; } .dgd-event-about .entry-content { font-size: 1rem; line-height: 1.75; color: var(--dgd-ink-soft); } .dgd-event-about .entry-content p { margin-bottom: 1rem; } .dgd-event-about .entry-content > *:last-child { margin-bottom: 0; } @media (max-width: 600px) { .dgd-event-bar { flex-direction: column; padding: 1.25rem 1.25rem; } .dgd-event-bar__item--cta { align-self: stretch; } .dgd-event-bar__ticket { justify-content: center; width: 100%; } } /* ------------------------------------------------------------------ TICKET BUTTON (on directory cards) ------------------------------------------------------------------ */ .dgd-directory__card-tickets { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding: 0.45rem 1rem; border-radius: 999px; /* fuchsia-deep (#C51864) keeps the ticket button on-brand while hitting 6.0:1 with the white uppercase label. Plain fuchsia was 3.39:1 (failed AA small-text). Hover still promotes to violet. */ background: var(--dgd-fuchsia-deep); color: var(--dgd-on-dark); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, transform 0.2s; } .dgd-directory__card-tickets:hover { background: var(--dgd-violet); transform: scale(1.04); } /* Card actions row — tickets + navigate side by side */ .dgd-directory__card-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; } .dgd-directory__card-actions .dgd-directory__card-tickets { margin-top: 0; flex: 1; justify-content: center; } .dgd-directory__card-nav { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: 1; padding: 0.45rem 1rem; border-radius: 999px; background: transparent; border: 1px solid var(--dgd-border); color: var(--dgd-ink-soft); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; font-family: inherit; } .dgd-directory__card-nav:hover { border-color: var(--dgd-cyan); color: var(--dgd-cyan); transform: scale(1.04); } .dgd-directory__card-nav:focus-visible { outline: 3px solid var(--dgd-violet); outline-offset: 2px; } /* ========================================================================== TOAST NOTIFICATION ========================================================================== */ .dgd-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem); opacity: 0; z-index: 200; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 12px; padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--dgd-ink); box-shadow: 0 12px 40px rgba(0,0,0,0.5); transition: opacity 0.3s, transform 0.3s; white-space: nowrap; pointer-events: none; } .dgd-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .dgd-toast__undo { color: var(--dgd-fuchsia); font-weight: 700; background: none; border: none; cursor: pointer; font-size: 0.85rem; font-family: inherit; padding: 0; } .dgd-toast__undo:hover { text-decoration: underline; } /* ------------------------------------------------------------------ MY TRIP — share bar, groups, banner, empty state ------------------------------------------------------------------ */ .dgd-my-trip { max-width: var(--wp--style--global--wide-size, 1320px); margin: 0 auto; padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--70); } /* Share bar */ .dgd-my-trip-share { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 1rem; margin-bottom: 2rem; } .dgd-my-trip-share__summary { font-size: 0.9rem; font-weight: 600; color: var(--dgd-ink-soft); } .dgd-my-trip-share__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .dgd-my-trip-share__btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border: 1px solid var(--dgd-border); border-radius: 999px; background: transparent; color: var(--dgd-ink-soft); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .dgd-my-trip-share__btn:hover { background: var(--dgd-border); color: var(--dgd-ink); } .dgd-my-trip-share__btn--copy:hover { border-color: var(--dgd-fuchsia); color: var(--dgd-fuchsia); } .dgd-my-trip-share__btn--share:hover { border-color: var(--dgd-cyan); color: var(--dgd-cyan); } .dgd-my-trip-share__btn--clear { border-color: transparent; color: var(--dgd-muted); } .dgd-my-trip-share__btn--clear:hover { color: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); background: rgba(255, 56, 137, 0.1); } /* Shared trip banner */ .dgd-my-trip-banner { text-align: center; padding: 1.25rem; background: linear-gradient(135deg, rgba(255, 56, 137, 0.12), rgba(107, 51, 255, 0.12)); border: 1px solid var(--dgd-fuchsia); border-radius: 1rem; margin-bottom: 2rem; } .dgd-my-trip-banner p { margin: 0 0 0.75rem; font-weight: 600; color: var(--dgd-ink); } .dgd-my-trip-banner__cta { display: inline-block; padding: 0.5rem 1.25rem; background: var(--dgd-fuchsia); color: var(--wp--preset--color--on-dark); border-radius: 999px; font-size: 0.85rem; font-weight: 700; text-decoration: none; } /* Trip groups */ .dgd-my-trip-group { margin-bottom: 2.5rem; } .dgd-my-trip-group__title { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--dgd-ink); } /* Empty state */ .dgd-my-trip-empty { text-align: center; padding: 4rem 1rem; color: var(--dgd-muted); } .dgd-my-trip-empty__icon { margin-bottom: 1.5rem; opacity: 0.4; } .dgd-my-trip-empty h2 { font-size: 1.5rem; color: var(--dgd-ink); margin: 0 0 0.5rem; } .dgd-my-trip-empty p { margin: 0 0 1.5rem; font-size: 1rem; } .dgd-my-trip-empty__actions { display: flex; gap: 0.75rem; justify-content: center; } .dgd-my-trip-empty__btn { padding: 0.7rem 1.5rem; border-radius: 999px; background: var(--dgd-bone); border: 1px solid var(--dgd-border); color: var(--dgd-ink); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: all 0.2s; } .dgd-my-trip-empty__btn:hover { background: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); color: var(--wp--preset--color--on-dark); } /* ------------------------------------------------------------------ RELATED CONTENT — events at venue + nearby spots ------------------------------------------------------------------ */ .dgd-related { max-width: var(--wp--style--global--wide-size, 1320px); margin: 0 auto; padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--60); } .dgd-related__section { margin-bottom: 2.5rem; } .dgd-related__title { font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1.25rem; color: var(--dgd-ink); } .dgd-related__events { display: flex; flex-direction: column; gap: 0.75rem; } .dgd-related__event { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 0.75rem; text-decoration: none; color: var(--dgd-ink); transition: border-color 0.2s, transform 0.15s; } .dgd-related__event:hover { border-color: var(--dgd-fuchsia); transform: translateX(4px); } .dgd-related__event-date { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dgd-fuchsia); min-width: 120px; } .dgd-related__event-name { font-weight: 600; font-size: 0.95rem; flex: 1; } .dgd-related__event-ticket { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--dgd-cyan); } .dgd-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } /* Hide rogue

tags injected by wpautop inside grids */ .dgd-related__grid > p, .dgd-related__events > p, .dgd-listing-hero2 > p, .dgd-listing-hero2__details > p, .dgd-listing-hero2__content > p, .dgd-listing-hero2__image > p { display: none !important; } .dgd-related__grid .dgd-directory__card { min-height: auto; } .dgd-related__grid .dgd-directory__card-image { aspect-ratio: 3/2; min-height: 0; } @media (max-width: 900px) { .dgd-related__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .dgd-related__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .dgd-my-trip-share { flex-direction: column; align-items: stretch; text-align: center; } .dgd-my-trip-share__actions { justify-content: center; } .dgd-related__event { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .dgd-related__event-date { min-width: auto; } } /* ========================================================================== BREADCRUMB NAVIGATION ========================================================================== */ .dgd-breadcrumb { padding: 1.25rem 0 0; font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } .dgd-breadcrumb a { color: var(--dgd-ink-soft); text-decoration: none; transition: color 0.2s; } .dgd-breadcrumb a:hover { color: var(--dgd-fuchsia); } .dgd-breadcrumb__sep { margin-inline: 0.5em; color: var(--dgd-muted); } .dgd-breadcrumb [aria-current] { color: var(--dgd-ink); } /* ========================================================================== RELATED EVENTS (single event page) ========================================================================== */ /* ========================================================================== RELATED EVENTS (single event page) ========================================================================== */ .dgd-related-events { padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--50); } .dgd-related-events__section { margin-bottom: var(--wp--preset--spacing--40); } .dgd-related-events__section:last-child { margin-bottom: 0; } .dgd-related-events__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; } .dgd-related-events__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--dgd-ink); margin: 0; } .dgd-related-events__link { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgd-fuchsia); text-decoration: none; white-space: nowrap; transition: color 0.2s; } .dgd-related-events__link:hover { color: var(--wp--preset--color--on-dark); } .dgd-related-events__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } /* Related event card — full vertical card matching archive style */ .dgd-related-event { display: flex; flex-direction: column; text-decoration: none; color: var(--dgd-ink); background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: var(--dgd-radius-md); overflow: hidden; transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s, border-color 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); } .dgd-related-event:hover { transform: translateY(-5px); border-color: var(--dgd-fuchsia); box-shadow: 0 0 0 1px var(--dgd-fuchsia), 0 12px 40px rgba(255,56,137,0.2); } /* Type accent — top border */ .dgd-related-event[data-type="drag"] { border-top: 2px solid var(--wp--preset--color--violet); } .dgd-related-event[data-type="nightlife"] { border-top: 2px solid var(--wp--preset--color--fuchsia); } .dgd-related-event[data-type="culture"] { border-top: 2px solid var(--wp--preset--color--cyan); } .dgd-related-event[data-type="festival"] { border-top: 2px solid var(--wp--preset--color--buttercup); } .dgd-related-event[data-type="pride"] { border-top: 2px solid var(--wp--preset--color--fuchsia); } .dgd-related-event[data-type="sports"] { border-top: 2px solid var(--wp--preset--color--mint); } .dgd-related-event__image { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; position: relative; } .dgd-related-event__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.25rem 1.25rem; } .dgd-related-event__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--dgd-ink); margin: 0; line-height: 1.3; } .dgd-related-event__when { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--dgd-fuchsia); } .dgd-related-event__venue { font-size: 0.85rem; color: var(--dgd-ink-soft); display: flex; align-items: center; gap: 0.3rem; } @media (max-width: 600px) { .dgd-related-events__grid { grid-template-columns: 1fr; } } /* ========================================================================= POLISH PASS — image fade-in, badge system, Open-now chip, touch targets, empty-filter state, skeletons, trip map. ========================================================================= */ /* Image fade-in on load. Applies to images with data-fade; JS removes is-loading once decoded. */ .dgd-fade-img { opacity: 0; transition: opacity 0.45s var(--dgd-ease); } .dgd-fade-img.is-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { .dgd-fade-img { opacity: 1; transition: none; } } /* Background-image cards fade from gradient to image — prevents harsh pop. */ .dgd-directory__card-image { background-color: var(--dgd-bone); transition: filter 0.4s var(--dgd-ease); } .dgd-directory__card:hover .dgd-directory__card-image { filter: brightness(1.05) saturate(1.08); } @media (prefers-reduced-motion: reduce) { .dgd-directory__card-image, .dgd-directory__card:hover .dgd-directory__card-image { transition: none; filter: none; } } /* Card hover already translates the card; gate under reduced-motion. */ @media (prefers-reduced-motion: reduce) { .dgd-directory__card { transition: none; } .dgd-directory__card:hover { transform: none; } } /* ---------- Unified badge component ---------- */ .dgd-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.7rem; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; white-space: nowrap; background: rgba(255, 253, 247, 0.08); color: var(--dgd-ink); border: 1px solid rgba(255, 253, 247, 0.14); } .dgd-badge--open { background: rgba(61, 245, 201, 0.14); color: var(--dgd-mint); border-color: rgba(61, 245, 201, 0.32); } .dgd-badge--open::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dgd-mint); box-shadow: 0 0 8px var(--dgd-mint); } .dgd-badge--closed { background: rgba(255, 253, 247, 0.05); color: var(--dgd-muted); border-color: rgba(255, 253, 247, 0.1); } .dgd-badge--closed::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dgd-muted); } .dgd-badge--now { background: rgba(255, 56, 137, 0.18); color: var(--dgd-fuchsia); border-color: rgba(255, 56, 137, 0.42); } .dgd-badge--now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dgd-fuchsia); box-shadow: 0 0 10px var(--dgd-fuchsia); animation: dgd-now-pulse 1.6s var(--dgd-ease) infinite; } .dgd-badge--saves { background: rgba(255, 212, 59, 0.14); color: var(--dgd-buttercup); border-color: rgba(255, 212, 59, 0.32); } /* Event lifecycle status badges (cancelled / postponed / sold-out). Rendered by dgd_render_event_status_badge() when dgd_event_status meta is set. Scheduled events emit no badge at all. */ .dgd-badge--cancelled { background: rgba(179, 45, 46, 0.18); color: var(--wp--preset--color--coral, #FF5A4E); border-color: rgba(179, 45, 46, 0.42); } .dgd-badge--postponed { background: rgba(255, 212, 59, 0.18); color: var(--dgd-buttercup); border-color: rgba(255, 212, 59, 0.42); } .dgd-badge--sold-out { background: rgba(168, 159, 196, 0.14); color: var(--dgd-muted); border-color: rgba(168, 159, 196, 0.32); } .dgd-listing-hero2__saves, .dgd-ehero__saves { margin-top: 0.6rem; display: inline-flex; } .dgd-ehero__status-line { margin: 0.6rem 0 0; } @keyframes dgd-now-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } } @media (prefers-reduced-motion: reduce) { .dgd-badge--now::before { animation: none; } } /* ---------- Touch-target minimum on interactive pills / inline buttons ---- */ /* Pills keep their existing look; we widen the tap area via padding on pointer:coarse devices only so desktop density isn't affected. */ @media (pointer: coarse) { .dgd-directory__pill { padding: 0.7rem 1.1rem; min-height: 44px; } .dgd-star-btn, .dgd-my-trip-share__btn, .dgd-directory__card-nav, .dgd-directory__card-tickets { min-height: 44px; min-width: 44px; } } /* ---------- Empty-filter state (distinct from 'no posts at all') --------- */ .dgd-directory__emptystate { grid-column: 1 / -1; text-align: center; padding: clamp(2rem, 1rem + 4vw, 4rem) 1rem; border: 1px dashed var(--dgd-border); border-radius: var(--dgd-radius-md); background: rgba(255, 253, 247, 0.02); } .dgd-directory__emptystate h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0 0 0.5rem; color: var(--dgd-ink); } .dgd-directory__emptystate p { color: var(--dgd-ink-soft); margin: 0 0 1.25rem; font-size: 1rem; } .dgd-directory__emptystate__reset { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1.3rem; background: var(--dgd-fuchsia); color: var(--dgd-midnight); border-radius: 999px; font-weight: 700; font-size: 0.85rem; text-decoration: none; transition: background 0.2s var(--dgd-ease), transform 0.2s var(--dgd-ease); } .dgd-directory__emptystate__reset:hover { background: var(--dgd-violet); transform: translateY(-1px); } /* ---------- Events archive "Show more" pagination ------------------------ */ /* Sits below the events grid. Outline pill on desktop (left-aligned-feel via auto-margin centering); full-width on mobile so it's a generous tap target. Spinner sweeps in alongside the label while loading. */ .dgd-directory__more { display: flex; justify-content: center; margin: 2.5rem 0 0.5rem; } .dgd-directory__more-btn { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; padding: 1rem 2.25rem; border-radius: 999px; border: 1px solid var(--dgd-fuchsia); background: transparent; color: var(--dgd-ink); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 48px; /* mobile tap target */ min-width: 220px; } .dgd-directory__more-btn:hover:not(:disabled), .dgd-directory__more-btn:focus-visible:not(:disabled) { background: var(--dgd-fuchsia); color: var(--dgd-on-dark); border-color: var(--dgd-fuchsia); transform: translateY(-1px); } .dgd-directory__more-btn:disabled { cursor: wait; opacity: 0.75; } .dgd-directory__more-btn.is-error { border-color: var(--wp--preset--color--tangerine); color: var(--wp--preset--color--tangerine); } .dgd-directory__more-spinner { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: dgd-load-more-spin 0.7s linear infinite; } .dgd-directory__more-btn.is-loading .dgd-directory__more-spinner { display: inline-block; } @keyframes dgd-load-more-spin { to { transform: rotate(360deg); } } .dgd-directory__more-fallback { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; color: var(--dgd-ink-soft); text-decoration: underline; } @media (max-width: 480px) { .dgd-directory__more { margin: 2rem 0 0.5rem; } .dgd-directory__more-btn { width: 100%; min-width: 0; padding: 1.05rem 1.25rem; } } @media (prefers-reduced-motion: reduce) { .dgd-directory__more-btn { transition: none; } .dgd-directory__more-btn:hover:not(:disabled) { transform: none; } .dgd-directory__more-spinner { animation: none; } } /* ---------- Skeleton loading (My Trip + async grids) ---------------------- */ .dgd-skeleton { background: linear-gradient(90deg, rgba(255, 253, 247, 0.05) 0%, rgba(255, 253, 247, 0.12) 50%, rgba(255, 253, 247, 0.05) 100%); background-size: 200% 100%; animation: dgd-skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--dgd-radius-md); } @keyframes dgd-skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .dgd-skeleton { animation: none; background: rgba(255, 253, 247, 0.08); } } .dgd-my-trip-skeleton { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; } @media (min-width: 640px) { .dgd-my-trip-skeleton { grid-template-columns: repeat(3, 1fr); } } .dgd-skeleton-card { min-height: 280px; display: grid; grid-template-rows: 62% auto; gap: 0.75rem; padding: 0; overflow: hidden; } .dgd-skeleton-card__img { background: rgba(255, 253, 247, 0.06); } .dgd-skeleton-card__title { height: 1.1rem; width: 70%; margin: 0.5rem 1rem 0; } .dgd-skeleton-card__meta { height: 0.85rem; width: 45%; margin: 0 1rem 1rem; } /* ---------- My Trip: starter trips + map toggle + error state ----------- */ .dgd-my-trip-starters { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .dgd-my-trip-starter { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.25rem; border-radius: var(--dgd-radius-md); background: var(--dgd-bone); border: 1px solid var(--dgd-border); text-decoration: none; color: var(--dgd-ink); transition: transform 0.2s var(--dgd-ease), border-color 0.2s; } .dgd-my-trip-starter:hover { transform: translateY(-2px); border-color: var(--dgd-fuchsia); } .dgd-my-trip-starter__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dgd-fuchsia); } .dgd-my-trip-starter__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--dgd-ink); line-height: 1.1; } .dgd-my-trip-starter__hint { font-size: 0.8rem; color: var(--dgd-ink-soft); } .dgd-my-trip-map-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.1rem; border-radius: 999px; background: rgba(0, 200, 230, 0.14); color: var(--dgd-cyan); border: 1px solid rgba(0, 200, 230, 0.35); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.2s var(--dgd-ease), color 0.2s; margin: 1rem 0; } .dgd-my-trip-map-toggle:hover, .dgd-my-trip-map-toggle.is-open { background: var(--dgd-cyan); color: var(--dgd-midnight); } .dgd-my-trip-map { width: 100%; height: clamp(260px, 32vw, 420px); border-radius: var(--dgd-radius-md); overflow: hidden; border: 1px solid var(--dgd-border); background: var(--dgd-bone); margin-bottom: 1.5rem; } .dgd-my-trip-map.is-hidden { display: none; } .dgd-my-trip-map .leaflet-container { background: #0b0a1e; } .dgd-my-trip-pin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--dgd-midnight); box-shadow: 0 2px 8px rgba(0,0,0,0.6); } .dgd-my-trip-error { padding: 1.5rem; border-radius: var(--dgd-radius-md); background: rgba(197, 24, 100, 0.12); border: 1px solid rgba(197, 24, 100, 0.35); color: var(--dgd-ink); text-align: center; } .dgd-my-trip-error__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.2rem; font-weight: 700; margin: 0 0 0.4rem; } .dgd-my-trip-error__body { color: var(--dgd-ink-soft); font-size: 0.95rem; margin: 0; } /* Partial-load notice — shown when a shared trip URL references items the server can no longer resolve (deleted/unpublished), or when the owner-view prune dropped stale localStorage entries. Quieter than the error block. */ .dgd-my-trip-partial { margin: 0 0 1rem; padding: 0.65rem 0.9rem; border-radius: var(--dgd-radius-sm, 6px); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--wp--preset--color--border, rgba(255, 255, 255, 0.12)); color: var(--dgd-ink-soft); font-size: 0.9rem; line-height: 1.4; } /* Drag handle + dragging state on trip items */ .dgd-my-trip-item { position: relative; touch-action: none; } .dgd-my-trip-item__handle { position: absolute; top: 0.6rem; left: 0.6rem; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(12, 8, 32, 0.75); color: var(--dgd-ink-soft); cursor: grab; border: 0; z-index: 3; opacity: 0; transition: opacity 0.2s var(--dgd-ease); } .dgd-my-trip-item:hover .dgd-my-trip-item__handle, .dgd-my-trip-item:focus-within .dgd-my-trip-item__handle { opacity: 1; } .dgd-my-trip-item.is-dragging { opacity: 0.5; transform: scale(0.98); } .dgd-my-trip-item.is-drag-over { outline: 2px dashed var(--dgd-cyan); outline-offset: 4px; } @media (pointer: coarse) { .dgd-my-trip-item__handle { opacity: 1; } } /* ========================================================================= HERO AUTOPLAY PROGRESS BAR Thin fill that tracks elapsed time for the active slide. Driven by the --dgd-hero-progress CSS variable (0..1) set from JS on every tick. ========================================================================= */ .dgd-hero__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; background: rgba(255, 253, 247, 0.08); overflow: hidden; pointer-events: none; } .dgd-hero__progress > span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--dgd-fuchsia, var(--wp--preset--color--fuchsia)) 0%, var(--dgd-cyan, var(--wp--preset--color--cyan)) 100%); transform-origin: left center; transform: scaleX(0); /* No transition — JS updates every TICK_MS and the fill moves perceptibly smooth at that cadence. A CSS transition here fights the JS ticks. */ } @media (prefers-reduced-motion: reduce) { .dgd-hero__progress { display: none; } } /* ========================================================================= BADGE — additional status variants .dgd-badge / --open / --closed / --now / --saves already exist above. ========================================================================= */ .dgd-badge--closes-soon { background: rgba(255, 212, 59, 0.16); color: var(--dgd-buttercup, var(--wp--preset--color--buttercup)); border-color: rgba(255, 212, 59, 0.36); } .dgd-badge--closes-soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dgd-buttercup, var(--wp--preset--color--buttercup)); box-shadow: 0 0 8px var(--dgd-buttercup, var(--wp--preset--color--buttercup)); } .dgd-badge--opens-at { background: rgba(0, 200, 230, 0.12); color: var(--dgd-cyan, var(--wp--preset--color--cyan)); border-color: rgba(0, 200, 230, 0.32); } .dgd-badge--opens-at::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dgd-cyan, var(--wp--preset--color--cyan)); } /* ========================================================================= TABS — chip-style filter over sections like events-grid ========================================================================= */ .dgd-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; } .dgd-tab { position: relative; appearance: none; border: 1px solid rgba(255, 253, 247, 0.12); background: rgba(255, 253, 247, 0.03); color: var(--dgd-ink, #F4EEE0); padding: 0.55rem 1rem; border-radius: 999px; font-family: "DM Sans", sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 0.2s var(--dgd-ease), border-color 0.2s var(--dgd-ease), color 0.2s var(--dgd-ease); } .dgd-tab:hover { background: rgba(255, 253, 247, 0.07); border-color: rgba(255, 253, 247, 0.22); } .dgd-tab:focus-visible { outline: 2px solid var(--dgd-cyan, var(--wp--preset--color--cyan)); outline-offset: 2px; } .dgd-tab.is-active { background: var(--dgd-fuchsia, var(--wp--preset--color--fuchsia)); border-color: var(--dgd-fuchsia, var(--wp--preset--color--fuchsia)); color: var(--wp--preset--color--ivory); } /* Secondary tab row — muted surface + cyan accent so it reads as a separate filter dimension (neighborhood) rather than competing with the time tabs. */ .dgd-tabs--nhoods { margin-top: -0.5rem; margin-bottom: 1.5rem; gap: 0.4rem 0.55rem; align-items: center; } .dgd-tabs__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(244, 238, 224, 0.55); margin-inline-end: 0.35rem; } .dgd-tabs--nhoods .dgd-tab { padding: 0.38rem 0.8rem; font-size: 0.78rem; border-color: rgba(0, 200, 230, 0.22); background: rgba(0, 200, 230, 0.04); } .dgd-tabs--nhoods .dgd-tab:hover { border-color: rgba(0, 200, 230, 0.45); background: rgba(0, 200, 230, 0.10); } .dgd-tabs--nhoods .dgd-tab.is-active { background: var(--dgd-cyan, var(--wp--preset--color--cyan)); border-color: var(--dgd-cyan, var(--wp--preset--color--cyan)); color: var(--wp--preset--color--ivory); } .dgd-events__empty { margin-block-start: 1.5rem; padding: 1.25rem 1rem; background: rgba(26, 20, 64, 0.35); border: 1px dashed rgba(244, 238, 224, 0.2); border-radius: 14px; text-align: center; color: rgba(244, 238, 224, 0.8); font-size: 0.92rem; } .dgd-events__empty[hidden] { display: none; } .dgd-events__empty a { color: var(--dgd-fuchsia); text-decoration: none; font-weight: 700; margin-inline-start: 0.4rem; } .dgd-events__empty a:hover, .dgd-events__empty a:focus-visible { text-decoration: underline; } /* .is-hidden rule for event cards migrated to .dgd-card.is-hidden in components/card.css. */ .dgd-tab__count { opacity: 0.7; margin-left: 0.3rem; font-variant-numeric: tabular-nums; } /* Grid filter mechanism — tab buttons set a data-filter on the grid container, and matching [data-event-*] attributes on cards determine visibility. */ [data-event-filter="tonight"] [data-event-card]:not([data-event-when~="today"]) { display: none !important; } [data-event-filter="weekend"] [data-event-card]:not([data-event-when~="weekend"]) { display: none !important; } [data-event-filter="type"][data-event-filter-type] [data-event-card] { /* Visibility toggled via JS by adding/removing an `is-hidden` class, because CSS cannot read a dynamic attribute value against a space- separated attribute list for arbitrary types. */ } [data-event-filter="type"] [data-event-card].is-hidden { display: none !important; } /* ========================================================================= TRIP RAIL — horizontal "Continue your trip" shelf on the front page JS hydrates this from localStorage on load. Hidden by default (the [hidden] attribute) and revealed only when items are present — so no layout shift on fresh visits. ========================================================================= */ .dgd-trip-rail[hidden] { display: none; } .dgd-trip-rail { width: 100%; background: linear-gradient(180deg, rgba(12, 8, 32, 0.6) 0%, rgba(12, 8, 32, 0) 100%); padding: 1.5rem 0 1.25rem; } .dgd-trip-rail__wrap { max-width: var(--dgd-wide, 1200px); margin-inline: auto; padding-inline: var(--dgd-gutter, 1.25rem); } .dgd-trip-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .dgd-trip-rail__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .dgd-trip-rail__link { font-size: 0.85rem; font-weight: 600; color: var(--dgd-ink, #F4EEE0); text-decoration: none; opacity: 0.85; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.25rem; } .dgd-trip-rail__link:hover { opacity: 1; text-decoration: underline; } .dgd-trip-rail__scroller { display: flex; gap: 0.85rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; } .dgd-trip-rail__card { flex: 0 0 clamp(220px, 32vw, 280px); scroll-snap-align: start; position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; min-height: 130px; text-decoration: none; color: var(--dgd-ink, #F4EEE0); background: linear-gradient(135deg, var(--wp--preset--color--fuchsia-bright) 0%, var(--wp--preset--color--violet) 100%); box-shadow: 0 6px 22px rgba(12, 8, 32, 0.25); transition: transform 0.2s var(--dgd-ease); } .dgd-trip-rail__card:hover { transform: translateY(-2px); } .dgd-trip-rail__card-media { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.05); opacity: 0.85; } .dgd-trip-rail__card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 8, 32, 0) 30%, rgba(12, 8, 32, 0.55) 60%, rgba(12, 8, 32, 0.92) 100%); } .dgd-trip-rail__card-body { position: relative; margin-top: auto; padding: 0.85rem 1rem 0.95rem; z-index: 1; } .dgd-trip-rail__card-badge { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--warm-ivory); margin-bottom: 0.25rem; text-shadow: 0 1px 4px rgba(12, 8, 32, 0.8); } .dgd-trip-rail__card-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.2; text-shadow: 0 1px 6px rgba(12, 8, 32, 0.8); } .dgd-trip-rail__card-meta { margin: 0.2rem 0 0; font-size: 0.78rem; opacity: 0.88; } @media (prefers-reduced-motion: reduce) { .dgd-trip-rail__card { transition: none; } .dgd-trip-rail__card:hover { transform: none; } } @media (max-width: 480px) { /* Tighten the rail gutter so cards get more room on narrow phones. */ .dgd-trip-rail__wrap { padding-inline: 1rem; } .dgd-trip-rail__card { flex-basis: min(85vw, 260px); } /* Event tabs keep wrapping but gain a touch more air between rows. */ .dgd-tabs { row-gap: 0.5rem; } .dgd-tab { padding: 0.5rem 0.85rem; font-size: 0.78rem; } /* Hero progress bar is a bit thicker for touch feedback. */ .dgd-hero__progress { height: 4px; } } /* ================================================ FACE-AWARE FOCAL POINT The dgd-core filter on wp_get_attachment_image_attributes writes object-position + --dgd-focal-* custom properties onto tags. These rules let wrappers (or wrappers' pseudo-elements) pick up the same focal when they do their own cropping. ================================================ */ .wp-block-post-featured-image img, .wp-block-image img[style*="--dgd-focal"] { object-position: var(--dgd-focal-x, 50%) var(--dgd-focal-y, 50%); } /* ================================================ LAST-CALL PILL Shown on event cards that are currently live AND within 90 min of end. Kept in SSR when the server detects the window, toggled by countdown JS as time ticks forward. Respects prefers-reduced-motion. ================================================ */ .dgd-last-call { display: inline-flex; align-items: center; gap: 6px; margin-top: 0.4rem; padding: 4px 10px; background: rgba(255, 56, 137, 0.16); color: var(--dgd-fuchsia); border: 1px solid rgba(255, 56, 137, 0.40); border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; white-space: nowrap; animation: dgd-last-call-pulse 2.4s ease-in-out infinite; } .dgd-last-call[hidden] { display: none; } .dgd-last-call::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dgd-fuchsia); box-shadow: 0 0 8px var(--dgd-fuchsia); flex-shrink: 0; } @keyframes dgd-last-call-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @media (prefers-reduced-motion: reduce) { .dgd-last-call { animation: none; } } /* ================================================ HOME SEARCH BAR Sits under the hero carousel. One input, a primary submit button, and a short row of "try:" chips that are also keyboard-navigable links. Submits to /?s=... (WP core search) so zero backend work is required. ================================================ */ .dgd-home-search { position: relative; z-index: 3; margin-top: clamp(-3rem, -4vw, -1.75rem); padding-block: clamp(1rem, 2.5vw, 1.5rem); } .dgd-home-search .dgd-wrap { display: flex; flex-direction: column; gap: 0.5rem; } .dgd-home-search__label { font-family: var(--dgd-font-display, "Bricolage Grotesque", serif); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgd-fuchsia); } .dgd-home-search__row { display: flex; align-items: center; gap: 0.5rem; background: rgba(26, 20, 64, 0.88); border: 1px solid rgba(255, 56, 137, 0.35); border-radius: 999px; padding: 0.45rem 0.45rem 0.45rem 1rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 56, 137, 0.08); transition: border-color 180ms ease, box-shadow 180ms ease; } .dgd-home-search__row:focus-within { border-color: var(--dgd-fuchsia); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 56, 137, 0.25); } .dgd-home-search__icon { color: rgba(244, 238, 224, 0.6); flex-shrink: 0; } .dgd-home-search__input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--dgd-ink, #F4EEE0); font: inherit; font-size: clamp(0.95rem, 1.8vw, 1.05rem); padding: 0.6rem 0.25rem; } .dgd-home-search__input::placeholder { color: rgba(244, 238, 224, 0.55); } .dgd-home-search__go { flex-shrink: 0; background: var(--dgd-fuchsia); color: var(--dgd-midnight, var(--wp--preset--color--ivory)); border: 0; border-radius: 999px; padding: 0.6rem 1.25rem; font: inherit; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } .dgd-home-search__go:hover, .dgd-home-search__go:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255, 56, 137, 0.45); background: var(--wp--preset--color--fuchsia-mid); } .dgd-home-search__hints { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; padding-inline: 0.5rem; font-size: 0.82rem; color: rgba(244, 238, 224, 0.7); } .dgd-home-search__hints-label { font-weight: 700; letter-spacing: 0.04em; opacity: 0.65; } .dgd-home-search__hints a { color: var(--dgd-ink, #F4EEE0); text-decoration: none; padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(26, 20, 64, 0.55); border: 1px solid rgba(255, 56, 137, 0.18); transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } .dgd-home-search__hints a:hover, .dgd-home-search__hints a:focus-visible { background: rgba(255, 56, 137, 0.15); border-color: var(--dgd-fuchsia); transform: translateY(-1px); } @media (max-width: 520px) { .dgd-home-search__go { padding: 0.55rem 0.95rem; font-size: 0.88rem; } .dgd-home-search__input { font-size: 0.95rem; } } @media (prefers-reduced-motion: reduce) { .dgd-home-search__go, .dgd-home-search__hints a { transition: none; } .dgd-home-search__go:hover, .dgd-home-search__hints a:hover { transform: none; } } /* ================================================ SAFER ROUTES TRUST STRIP Slim band above footer. Pride gradient top border, shield mark, assertive CTA to the dedicated Safer Routes page. ================================================ */ .dgd-safer-strip { position: relative; margin-block-start: clamp(2rem, 5vw, 4rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); background: linear-gradient(180deg, rgba(26, 20, 64, 0) 0%, rgba(26, 20, 64, 0.55) 70%, rgba(12, 8, 32, 0.75) 100%); } .dgd-safer-strip::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; background: linear-gradient(90deg, var(--dgd-fuchsia) 0%, var(--dgd-tangerine) 20%, var(--dgd-buttercup) 40%, var(--dgd-mint) 60%, var(--dgd-cyan) 80%, var(--dgd-violet) 100%); opacity: 0.85; } .dgd-safer-strip__inner { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2rem); align-items: center; justify-content: space-between; } .dgd-safer-strip__copy { flex: 1 1 420px; min-width: 0; } .dgd-safer-strip__eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--dgd-fuchsia); margin-block-end: 0.35rem; } .dgd-safer-strip__shield { display: inline-flex; color: var(--dgd-fuchsia); } .dgd-safer-strip__title { font-family: var(--dgd-font-display, "Bricolage Grotesque", serif); font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; line-height: 1.05; margin: 0 0 0.5rem; color: var(--dgd-ink, #F4EEE0); } .dgd-safer-strip__title em { font-family: var(--dgd-font-serif, "Instrument Serif", serif); font-style: italic; font-weight: 400; color: var(--dgd-fuchsia); } .dgd-safer-strip__blurb { margin: 0; max-width: 60ch; font-size: clamp(0.9rem, 1.6vw, 1rem); color: rgba(244, 238, 224, 0.78); line-height: 1.5; } .dgd-safer-strip__cta { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--dgd-fuchsia); color: var(--dgd-midnight, var(--wp--preset--color--ivory)); padding: 0.85rem 1.4rem; border-radius: 999px; font-weight: 800; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 28px rgba(255, 56, 137, 0.35); transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; } .dgd-safer-strip__cta:hover, .dgd-safer-strip__cta:focus-visible { transform: translateY(-2px); background: var(--wp--preset--color--fuchsia-mid); box-shadow: 0 14px 36px rgba(255, 56, 137, 0.5); } @media (prefers-reduced-motion: reduce) { .dgd-safer-strip__cta { transition: none; } .dgd-safer-strip__cta:hover { transform: none; } } /* ================================================ OPEN RIGHT NOW STRIP Single-row horizontal chip scroller of currently-open venues. Text-only chips (no images) so the whole row stays compact and fast. Closing-soon chips pick up the fuchsia accent so they stand out from the steady-open majority. Scroll-snap on the row + native overflow scroll on mobile. ================================================ */ .dgd-open-now { margin-block-start: clamp(0.5rem, 2vw, 1.25rem); padding-block: 0.75rem; } .dgd-open-now__wrap { display: flex; align-items: center; gap: 0.9rem; position: relative; } .dgd-open-now__head { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; font-family: var(--dgd-font-display, "Bricolage Grotesque", serif); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgd-mint, var(--wp--preset--color--mint)); } .dgd-open-now__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--dgd-mint, var(--wp--preset--color--mint)); box-shadow: 0 0 0 0 rgba(61, 245, 201, 0.55); animation: dgd-open-now-pulse 2.2s ease-out infinite; } @keyframes dgd-open-now-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 245, 201, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(61, 245, 201, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 245, 201, 0); } } .dgd-open-now__chips { display: flex; align-items: center; gap: 0.55rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 0.1rem; padding-inline-end: 2.25rem; flex: 1 1 auto; min-width: 0; -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%); mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%); } .dgd-open-now__chips::-webkit-scrollbar { display: none; } .dgd-open-now__chip { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; scroll-snap-align: start; text-decoration: none; /* Vertical padding bumps the chip past the 44px touch-target threshold without losing the dense pill aesthetic of the open-now rail. */ padding: 0.75rem 1rem; min-height: 44px; background: rgba(26, 20, 64, 0.78); border: 1px solid rgba(61, 245, 201, 0.5); box-shadow: inset 0 0 0 1px rgba(61, 245, 201, 0.08), 0 1px 0 rgba(0, 0, 0, 0.35); color: var(--dgd-ink, #F4EEE0); border-radius: 999px; font-size: 0.85rem; font-weight: 600; line-height: 1; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } .dgd-open-now__chip:hover, .dgd-open-now__chip:focus-visible { background: rgba(61, 245, 201, 0.14); border-color: var(--dgd-mint, var(--wp--preset--color--mint)); transform: translateY(-1px); } .dgd-open-now__chip.is-closing { border-color: rgba(255, 56, 137, 0.45); background: rgba(255, 56, 137, 0.10); } .dgd-open-now__chip.is-closing:hover, .dgd-open-now__chip.is-closing:focus-visible { border-color: var(--dgd-fuchsia); background: rgba(255, 56, 137, 0.20); } .dgd-open-now__chip-title { font-weight: 700; } .dgd-open-now__chip-meta { opacity: 0.7; font-size: 0.78rem; font-weight: 500; } .dgd-open-now__chip.is-closing .dgd-open-now__chip-meta { color: var(--dgd-fuchsia); opacity: 0.95; } @media (max-width: 480px) { .dgd-open-now__wrap { flex-direction: column; align-items: flex-start; gap: 0.55rem; } .dgd-open-now__chips { width: 100%; } } @media (prefers-reduced-motion: reduce) { .dgd-open-now__pulse { animation: none; } .dgd-open-now__chip { transition: none; } .dgd-open-now__chip:hover { transform: none; } } /* ================================================ TRIP RAIL EMPTY-STATE NUDGE Slim bottom-anchored banner that slides in once the user has scrolled past the hero, when no trip items exist yet. Session-scoped dismiss via the X button. Self-removes after 14s if ignored. ================================================ */ .dgd-trip-nudge { position: fixed; inset-block-end: max(1rem, env(safe-area-inset-bottom, 1rem)); inset-inline: 0; display: flex; justify-content: center; padding-inline: 1rem; z-index: 900; opacity: 0; transform: translateY(24px); transition: opacity 260ms ease, transform 260ms ease; pointer-events: none; } .dgd-trip-nudge.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .dgd-trip-nudge__inner { display: inline-flex; align-items: center; gap: 0.8rem; max-width: 540px; padding: 0.75rem 0.85rem 0.75rem 1.1rem; background: rgba(26, 20, 64, 0.92); color: var(--dgd-ink, #F4EEE0); border: 1px solid rgba(255, 56, 137, 0.45); border-radius: 999px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 56, 137, 0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 0.9rem; } .dgd-trip-nudge__icon { color: var(--dgd-buttercup, var(--wp--preset--color--buttercup)); flex-shrink: 0; display: inline-flex; } .dgd-trip-nudge__copy { flex: 1 1 auto; line-height: 1.35; } .dgd-trip-nudge__close { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: rgba(244, 238, 224, 0.08); color: var(--dgd-ink, #F4EEE0); border: 0; border-radius: 50%; cursor: pointer; transition: background 180ms ease; } .dgd-trip-nudge__close:hover, .dgd-trip-nudge__close:focus-visible { background: rgba(255, 56, 137, 0.25); } @media (max-width: 500px) { .dgd-trip-nudge__inner { font-size: 0.82rem; padding: 0.65rem 0.75rem 0.65rem 0.95rem; } } @media (prefers-reduced-motion: reduce) { .dgd-trip-nudge { transition: opacity 180ms linear; transform: none; } .dgd-trip-nudge__close { transition: none; } } /* ================================================ LIVE BANNER (Tonight in Dallas) Thin time-aware strip just below the header. Pulsing mint dot, current day + time, and a summary of what's live right now. Links to /tonight/. ================================================ */ .dgd-live-banner { position: relative; background: linear-gradient(90deg, rgba(107, 51, 255, 0.22) 0%, rgba(255, 56, 137, 0.16) 50%, rgba(61, 245, 201, 0.18) 100%); border-block-end: 1px solid rgba(255, 56, 137, 0.25); padding-block: 0.55rem; font-size: 0.82rem; color: var(--dgd-ink, #F4EEE0); } .dgd-live-banner__inner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .dgd-live-banner__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--dgd-mint, var(--wp--preset--color--mint)); box-shadow: 0 0 0 0 rgba(61, 245, 201, 0.65); animation: dgd-live-banner-pulse 2s ease-out infinite; flex-shrink: 0; } @keyframes dgd-live-banner-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 245, 201, 0.65); } 70% { box-shadow: 0 0 0 10px rgba(61, 245, 201, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 245, 201, 0); } } .dgd-live-banner__clock { display: inline-flex; align-items: baseline; gap: 0.35rem; flex-shrink: 0; font-weight: 600; letter-spacing: 0.02em; } .dgd-live-banner__clock strong { font-family: var(--dgd-font-display, "Bricolage Grotesque", serif); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; color: var(--dgd-mint, var(--wp--preset--color--mint)); } .dgd-live-banner__sep { opacity: 0.45; } .dgd-live-banner__stats { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; opacity: 0.9; } .dgd-live-banner__dot { opacity: 0.35; } .dgd-live-banner__cta { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--dgd-fuchsia); text-decoration: none; font-weight: 700; letter-spacing: 0.03em; flex-shrink: 0; padding: 0.25rem 0.45rem; border-radius: 6px; transition: background 180ms ease; } .dgd-live-banner__cta:hover, .dgd-live-banner__cta:focus-visible { background: rgba(255, 56, 137, 0.16); } @media (max-width: 560px) { .dgd-live-banner { font-size: 0.76rem; padding-block: 0.5rem; } .dgd-live-banner__cta { font-size: 0.76rem; } } @media (prefers-reduced-motion: reduce) { .dgd-live-banner__pulse { animation: none; } .dgd-live-banner__cta { transition: none; } } /* ================================================ STRIP MAP PREVIEW Neon faux-map teaser on the home page. Venue pins sit in absolute position derived from real lat/lng, so the shape mirrors the Strip's geography without loading Leaflet. The whole canvas is one big link to /the-strip/ where the real interactive map lives. ================================================ */ .dgd-strip-preview__canvas { position: relative; display: block; aspect-ratio: 16 / 9; max-height: clamp(280px, 38vw, 440px); margin-block-start: 1rem; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 30% 30%, rgba(107, 51, 255, 0.35) 0%, transparent 55%), radial-gradient(circle at 70% 70%, rgba(0, 200, 230, 0.28) 0%, transparent 55%), linear-gradient(160deg, #0A0520 0%, var(--wp--preset--color--bone) 55%, var(--wp--preset--color--ivory) 100%); border: 1px solid rgba(255, 56, 137, 0.25); text-decoration: none; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .dgd-strip-preview__canvas:hover, .dgd-strip-preview__canvas:focus-visible { transform: translateY(-2px); border-color: var(--dgd-fuchsia); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 56, 137, 0.18); } .dgd-strip-preview__gridlines { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 45%, transparent 85%); pointer-events: none; } .dgd-strip-preview__pin { --pin-color: var(--dgd-fuchsia); position: absolute; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; /* click falls through to the canvas link */ } .dgd-strip-preview__pin-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--pin-color); box-shadow: 0 0 0 2px rgba(12, 8, 32, 0.9), 0 0 16px var(--pin-color); animation: dgd-strip-preview-pin 3s ease-in-out infinite; } @keyframes dgd-strip-preview-pin { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.18); opacity: 1; } } .dgd-strip-preview__pin-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dgd-ink, #F4EEE0); background: rgba(12, 8, 32, 0.75); padding: 2px 6px; border-radius: 4px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; opacity: 0.78; } .dgd-strip-preview__overlay { position: absolute; inset-inline: 1rem; inset-block-end: 1rem; display: flex; flex-direction: column; gap: 0.15rem; z-index: 3; background: rgba(12, 8, 32, 0.78); border: 1px solid rgba(255, 56, 137, 0.3); border-radius: 12px; padding: 0.7rem 1rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dgd-strip-preview__overlay-line { font-size: 0.82rem; color: rgba(244, 238, 224, 0.82); } .dgd-strip-preview__overlay-cta { font-family: var(--dgd-font-display, "Bricolage Grotesque", serif); font-weight: 800; font-size: 0.95rem; color: var(--dgd-fuchsia); letter-spacing: 0.01em; } @media (max-width: 640px) { .dgd-strip-preview__pin-label { display: none; } /* too dense on narrow */ .dgd-strip-preview__overlay { inset-inline: 0.75rem; inset-block-end: 0.75rem; padding: 0.55rem 0.8rem; } .dgd-strip-preview__overlay-line { font-size: 0.75rem; } .dgd-strip-preview__overlay-cta { font-size: 0.85rem; } } @media (prefers-reduced-motion: reduce) { .dgd-strip-preview__canvas { transition: none; } .dgd-strip-preview__canvas:hover { transform: none; } .dgd-strip-preview__pin-dot { animation: none; } } /* ================================================ TRIP CHIP (persistent summary pill) Fixed-position pill in the bottom-right that shows "N · View trip" once the user has saved anything. Hidden entirely while the trip is empty. Respects iOS safe-area. Paired with the empty-state nudge (which shows only when the trip IS empty) — the two are mutually exclusive in UX. ================================================ */ .dgd-trip-chip { position: fixed; inset-block-end: max(1rem, env(safe-area-inset-bottom, 1rem)); inset-inline-end: max(1rem, env(safe-area-inset-right, 1rem)); z-index: 901; display: none; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem 0.65rem 0.9rem; background: var(--dgd-fuchsia, var(--wp--preset--color--fuchsia)); color: var(--dgd-midnight, var(--wp--preset--color--ivory)); font-weight: 800; letter-spacing: 0.02em; text-decoration: none; border-radius: 999px; box-shadow: 0 14px 36px rgba(255, 56, 137, 0.45), 0 0 0 1px rgba(255, 56, 137, 0.25); transform: translateY(18px); opacity: 0; transition: transform 260ms ease, opacity 260ms ease, background 180ms ease; } .dgd-trip-chip.is-visible { display: inline-flex; } .dgd-trip-chip.is-visible:not(:hover) { animation: dgd-trip-chip-in 320ms ease forwards; } @keyframes dgd-trip-chip-in { to { transform: translateY(0); opacity: 1; } } /* After entry animation completes, freeze at visible state via transitions for any hover or DOM mutations. */ .dgd-trip-chip.is-visible:hover, .dgd-trip-chip.is-visible:focus-visible { background: var(--wp--preset--color--fuchsia-mid); transform: translateY(-1px); opacity: 1; } .dgd-trip-chip__icon { display: inline-flex; color: var(--dgd-buttercup, var(--wp--preset--color--buttercup)); filter: drop-shadow(0 1px 2px rgba(12, 8, 32, 0.35)); } .dgd-trip-chip__count { font-family: var(--dgd-font-display, "Bricolage Grotesque", serif); font-size: 1.05rem; font-weight: 800; line-height: 1; } .dgd-trip-chip__divider { opacity: 0.5; } .dgd-trip-chip__cta { font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase; } @media (max-width: 420px) { .dgd-trip-chip__cta { display: none; } .dgd-trip-chip__divider { display: none; } } @media (prefers-reduced-motion: reduce) { .dgd-trip-chip { transition: none; transform: none; opacity: 1; } .dgd-trip-chip.is-visible:not(:hover) { animation: none; } .dgd-trip-chip.is-visible:hover { transform: none; } } /* ================================================ NONPROFITS STRIP Horizontal scroller of community organizations. Same scroll-helper wiring as the partner-news scroller so prev/next buttons hook up via the generic [data-dgd-scroll] delegation in ui.js. ================================================ */ .dgd-nonprofits__scroller { position: relative; } .dgd-nonprofits__scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(12, 8, 32, 0.85); color: var(--dgd-ink, #F4EEE0); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: background 180ms ease, transform 180ms ease; } .dgd-nonprofits__scroll-btn:hover { background: var(--dgd-fuchsia); color: var(--wp--preset--color--ivory); transform: translateY(-50%) scale(1.06); } .dgd-nonprofits__scroll-btn.is-disabled { opacity: 0.3; pointer-events: none; } .dgd-nonprofits__scroll-btn--prev { inset-inline-start: -4px; } .dgd-nonprofits__scroll-btn--next { inset-inline-end: -4px; } @media (max-width: 720px) { .dgd-nonprofits__scroll-btn { display: none; } } .dgd-nonprofits__track { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 0.25rem 0.5rem; padding-inline: 0.1rem; } .dgd-nonprofits__track::-webkit-scrollbar { display: none; } /* Card chrome migrated to components/card.css (.dgd-card--nonprofit variant). Only the scroll-btn reduced-motion rule remains here since the buttons are scroller chrome, not card chrome. */ @media (prefers-reduced-motion: reduce) { .dgd-nonprofits__scroll-btn { transition: none; } .dgd-nonprofits__scroll-btn:hover { transform: none; } } /* Pulse Ribbon, Hero identity bar, Curator badge, Ritual line, Press Strip, Week Pulse, Eyebrow detail — moved to assets/css/components/eyebrows.css. Loaded AFTER this file so the .dgd-hero__identity augmentation defined there can override the base from components/hero.css. */ /* ============================================================= HERO REWORK — stage + proof strip + audience segmenter anchors The hero is now composed as: stage (cinematic carousel) on top, proof (identity + press) + segmenter (anchor pills) below. Both proof and segmenter are STATIC — they do not rotate with slides. ============================================================= */ /* The outer .dgd-hero was previously the positioned ancestor for the * dots+pause overlay. We relocate those responsibilities to a new inner * stage wrapper so the proof strip can flow after the stage in normal * document flow without overlapping the dots. */ .dgd-hero { min-height: auto; } /* Full-viewport cinematic stage. Subtracts the static chrome above the * hero (site header + pulse ribbon) so the stage fits exactly in what * remains of the viewport — no dead space below the fold. The JS in * ui.js measures header + pulse each resize and writes the px total to * --dgd-hero-chrome on ; the 215px fallback covers first paint * and no-JS. dvh keeps mobile address-bar collapse from jumping. */ .dgd-hero__stage { position: relative; overflow: hidden; isolation: isolate; min-height: calc(100vh - var(--dgd-hero-chrome, 215px)); min-height: calc(100svh - var(--dgd-hero-chrome, 215px)); min-height: calc(100dvh - var(--dgd-hero-chrome, 215px)); max-height: calc(100vh - var(--dgd-hero-chrome, 215px)); max-height: calc(100dvh - var(--dgd-hero-chrome, 215px)); background: var(--dgd-night); } /* Slides fill the stage fully; override the earlier constrained min-height * so every slide media covers the full viewport edge-to-edge. */ .dgd-hero .dgd-hero__slides { position: absolute; inset: 0; min-height: 0; height: 100%; } /* Copy stack vertically centered (with a bottom bias) inside the stage so * it reads above the fold on first paint even when the non-sticky site * header + pulse ribbon consume the top ~215px of the viewport. */ .dgd-hero .dgd-hero__slide { align-items: center; } .dgd-hero .dgd-hero__content { max-width: min(920px, 92vw); padding: clamp(2rem, 4vh, 4rem) var(--dgd-gutter) clamp(6rem, 10vh, 9rem); margin-inline: 0; margin-top: auto; margin-bottom: auto; width: 100%; display: flex; flex-direction: column; align-items: flex-start; } .dgd-hero .dgd-hero__eyebrow { margin: 0 0 1.1rem; } .dgd-hero .dgd-hero__title { max-width: 15ch; font-size: clamp(2.9rem, 1.7rem + 4.6vw, 6.25rem); line-height: 0.94; margin: 0 0 1.15rem; } .dgd-hero .dgd-hero__subhead { max-width: 52ch; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); margin: 0 0 1.75rem; } .dgd-hero .dgd-hero__ctas { align-items: center; gap: 1.1rem; } .dgd-hero .dgd-hero__credit { margin-top: 1.75rem; } /* On short viewports, drop the stage-is-remaining-viewport contract and * let the hero size to content — otherwise a laptop in picture-in-picture, * split-screen, or small windowed browser gets squeezed so the CTAs disappear. * 700px catches more real-world short windows than the old 620 threshold. */ @media (max-height: 700px) { .dgd-hero__stage { min-height: 580px; max-height: none; } } /* On phones, the full-viewport hero compresses the title into a narrow * portrait band and pushes the rest of the home below an aggressive scroll. * Cap to ~72vh so the title gets room and the next section is visible right * under the fold without disappearing the hero CTAs. */ @media (max-width: 720px) { .dgd-hero__stage { min-height: min(72vh, 640px); min-height: min(72svh, 640px); min-height: min(72dvh, 640px); max-height: min(72vh, 640px); max-height: min(72dvh, 640px); } } /* Dots + pause at the absolute bottom of the stage. Raise slightly on * taller viewports so they don't feel glued to the edge. */ .dgd-hero .dgd-hero__dots { bottom: clamp(1.5rem, 3vh, 2.5rem); } .dgd-hero .dgd-hero__pause { bottom: clamp(1.25rem, 3vh, 2.25rem); } /* Scroll hint: small chevron the user perceives as "there's more below" * without stealing attention from the CTA. Keyboard-users get the skip * link; this is visual-only. */ .dgd-hero__scroll-hint { position: absolute; left: 50%; bottom: clamp(1.25rem, 2.5vh, 2rem); transform: translateX(-50%); z-index: 4; color: var(--dgd-on-dark); font-family: "JetBrains Mono", monospace; font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.55; pointer-events: none; display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem; text-shadow: 0 1px 6px rgba(15, 11, 35, 0.7); } .dgd-hero__scroll-hint svg { width: 14px; height: 14px; animation: dgd-hero-scroll-bounce 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes dgd-hero-scroll-bounce { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dgd-hero__scroll-hint svg { animation: none; } } @media (max-width: 720px) { .dgd-hero__scroll-hint { display: none; } } /* Hide the legacy top identity bar (now superseded by the proof strip below). * Left in the DOM as dead weight would still be a visible overlay when * enabled via variation; this override neutralizes it cleanly. */ .dgd-hero > .dgd-hero__identity { display: none; } .dgd-hero__chip { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1.25rem; padding: 0.5rem 1rem 0.55rem; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; background: rgba(255, 31, 122, 0.18); color: var(--dgd-on-dark); border: 1px solid rgba(255, 31, 122, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-self: flex-start; } .dgd-hero__chip--live .dgd-hero__chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dgd-fuchsia); box-shadow: 0 0 0 0 rgba(255, 56, 137, 0.55); animation: dgd-hero-chip-pulse 2s ease-out infinite; } @keyframes dgd-hero-chip-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 56, 137, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(255, 56, 137, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 56, 137, 0); } } @media (prefers-reduced-motion: reduce) { .dgd-hero__chip--live .dgd-hero__chip-dot { animation: none; } } /* Secondary CTA — demoted to a quiet text-link so the primary pill reads * as the single conversion target. Keeps discoverability without stealing * the eye from the daypart-aware primary. */ .dgd-hero__cta--link { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.9rem 0.5rem; background: transparent; border: 0; border-radius: 0; color: var(--dgd-on-dark); font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 0.95rem; text-decoration: none; opacity: 0.85; transition: opacity 0.25s var(--dgd-ease), transform 0.25s var(--dgd-ease); } .dgd-hero__cta--link:hover { opacity: 1; transform: translateX(3px); } .dgd-hero__cta--link svg { transition: transform 0.25s var(--dgd-ease); } .dgd-hero__cta--link:hover svg { transform: translateX(3px); } /* ---- Proof strip: identity (counters + brand) + press chips ---- */ .dgd-hero__proof { background: linear-gradient(180deg, var(--dgd-night) 0%, #120D2A 100%); color: var(--dgd-on-dark); border-top: 1px solid rgba(255, 253, 247, 0.08); padding-block: 1.25rem 1.1rem; padding-inline: var(--dgd-gutter); display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; } .dgd-hero__proof-line { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--dgd-on-dark-soft); display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.45rem 0.75rem; max-width: var(--dgd-wide); } .dgd-hero__proof-brand { color: var(--dgd-on-dark); font-weight: 700; } .dgd-hero__proof-tag { color: var(--dgd-on-dark-soft); } .dgd-hero__proof-sep { color: var(--dgd-fuchsia); opacity: 0.7; } .dgd-hero__proof-stat { display: inline-flex; align-items: center; gap: 0.35rem; } .dgd-hero__proof-stat strong { color: var(--dgd-on-dark); font-weight: 800; font-family: "Bricolage Grotesque", sans-serif; font-size: 1rem; letter-spacing: -0.01em; } .dgd-hero__proof-stat--live { color: var(--dgd-buttercup); } .dgd-hero__proof-stat--live strong { color: var(--dgd-buttercup); } .dgd-hero__proof-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--dgd-buttercup); box-shadow: 0 0 0 0 rgba(255, 212, 59, 0.55); animation: dgd-hero-chip-pulse 2s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .dgd-hero__proof-pulse { animation: none; } } .dgd-hero__press { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 0.55rem; max-width: var(--dgd-wide); } .dgd-hero__press-label { font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dgd-on-dark-muted); margin-right: 0.35rem; } .dgd-hero__press-chip { font-family: "Instrument Serif", Georgia, serif; font-size: 0.95rem; font-style: italic; color: var(--dgd-on-dark); padding: 0.15rem 0.7rem; border-radius: 999px; background: rgba(255, 253, 247, 0.06); border: 1px solid rgba(255, 253, 247, 0.14); } /* Segmenter anchor row lives inside the hero proof — small, repeat-above-fold * pill shortcuts that jump to the corresponding segmenter card below. */ .dgd-hero__segmenter { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.45rem; padding-top: 0.4rem; width: 100%; max-width: var(--dgd-wide); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .dgd-hero__segmenter::-webkit-scrollbar { display: none; } .dgd-hero__seg-link { flex: 0 0 auto; scroll-snap-align: start; padding: 0.55rem 1.05rem; border-radius: 999px; background: rgba(255, 253, 247, 0.06); border: 1px solid rgba(255, 253, 247, 0.14); color: var(--dgd-on-dark); text-decoration: none; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.005em; transition: background 0.2s var(--dgd-ease), border-color 0.2s var(--dgd-ease), transform 0.2s var(--dgd-ease); } .dgd-hero__seg-link:hover { background: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); color: var(--dgd-on-dark); transform: translateY(-1px); } @media (max-width: 560px) { .dgd-hero__proof { gap: 0.6rem; padding-block: 1rem 0.85rem; } .dgd-hero__proof-line { font-size: 0.65rem; letter-spacing: 0.12em; gap: 0.35rem 0.55rem; } .dgd-hero__proof-stat strong { font-size: 0.9rem; } .dgd-hero__press { gap: 0.3rem 0.45rem; } .dgd-hero__press-chip { font-size: 0.85rem; padding: 0.1rem 0.55rem; } .dgd-hero__segmenter { justify-content: flex-start; padding-inline-start: 0.25rem; } .dgd-hero__seg-link { font-size: 0.78rem; padding: 0.5rem 0.9rem; } } /* ============================================================= HOME SEGMENTER — four audience-routing cards ============================================================= */ .dgd-segmenter { padding-block: var(--wp--custom--dgd--section--pad-md); background: var(--dgd-midnight); color: var(--dgd-on-dark); } .dgd-segmenter .dgd-sec-head { margin-bottom: 2rem; } .dgd-segmenter__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .dgd-segmenter__cell { scroll-margin-top: 5rem; /* anchor offset so sticky header doesn't cover the card on jump */ } .dgd-segmenter__card { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.6rem 1.3rem 1.4rem; height: 100%; min-height: 260px; border-radius: 20px; background: linear-gradient(180deg, rgba(26, 20, 64, 0.88) 0%, rgba(12, 8, 32, 0.95) 100%); border: 1px solid var(--dgd-on-dark-border, rgba(255, 253, 247, 0.18)); color: var(--dgd-on-dark); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform 0.3s var(--dgd-ease), border-color 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease); } .dgd-segmenter__glow { position: absolute; inset: auto -20% -20% -20%; height: 45%; z-index: -1; filter: blur(44px); opacity: 0.55; transition: opacity 0.3s var(--dgd-ease), transform 0.3s var(--dgd-ease); } /* Dark anchor under the glow so the CTA text reads reliably regardless of gradient colors on this card. Sits above the glow (z-index -1) but below every content node (which have no z-index and form their own stacking context via the card's `isolation: isolate`). */ .dgd-segmenter__card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(to top, rgba(12, 8, 32, 0.85) 0%, rgba(12, 8, 32, 0.55) 45%, transparent 100%); z-index: -1; pointer-events: none; } .dgd-segmenter__icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 253, 247, 0.08); color: var(--dgd-on-dark); } .dgd-segmenter__icon svg { width: 24px; height: 24px; } .dgd-segmenter__eyebrow { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dgd-on-dark-soft); font-weight: 700; } .dgd-segmenter__title { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--dgd-on-dark); } .dgd-segmenter__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--dgd-fuchsia); } .dgd-segmenter__body { margin: 0; color: var(--dgd-on-dark-soft); font-size: 0.95rem; line-height: 1.45; } .dgd-segmenter__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding-top: 0.3rem; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--dgd-on-dark); transition: transform 0.25s var(--dgd-ease), color 0.25s var(--dgd-ease); } .dgd-segmenter__card:hover { transform: translateY(-4px); border-color: rgba(255, 56, 137, 0.45); box-shadow: 0 20px 48px rgba(15, 11, 35, 0.6), 0 0 0 1px rgba(255, 56, 137, 0.2); } .dgd-segmenter__card:hover .dgd-segmenter__glow { opacity: 0.8; transform: translateY(-8px); } .dgd-segmenter__card:hover .dgd-segmenter__cta { color: var(--dgd-fuchsia); transform: translateX(3px); } .dgd-segmenter__card:hover .dgd-segmenter__cta svg { transform: translateX(3px); } .dgd-segmenter__cta svg { transition: transform 0.25s var(--dgd-ease); } .dgd-segmenter__card:focus-visible { outline: 3px solid var(--dgd-violet-bright); outline-offset: 3px; } @media (max-width: 1024px) { .dgd-segmenter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .dgd-segmenter__grid { grid-template-columns: 1fr; } .dgd-segmenter__card { min-height: auto; padding: 1.35rem 1.1rem 1.2rem; } } /* ============================================================= HOME STRIP — framed composite wrapping strip-map + strip-crawl ============================================================= */ .dgd-home-strip { padding-block: clamp(2rem, 4vw, 3.5rem); background: var(--dgd-night); } .dgd-home-strip__frame { position: relative; } /* Tighten the stacked spacing between the included patterns so the two * read as ONE section. The map pattern emits its own section padding; we * compress the gap into the crawl via negative margin. */ .dgd-home-strip__frame .dgd-strip-map + .dgd-strip { margin-top: -1rem; } /* ============================================================= HOME NEIGHBORHOODS — mosaic explorer beyond Cedar Springs ============================================================= */ .dgd-nhoods { padding-block: var(--wp--custom--dgd--section--pad-md); background: var(--dgd-midnight); color: var(--dgd-on-dark); } .dgd-nhoods__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; } .dgd-nhoods__cell { --dgd-nhood-span: 4; grid-column: span var(--dgd-nhood-span); min-height: 280px; } /* Sparse-content overrides: when total cells <= 3, force equal widths so the * mosaic doesn't broadcast empty quadrants. Mosaic spans only kick in once * there's enough content (4+) to fill a row asymmetrically. */ .dgd-nhoods__grid--count-1 .dgd-nhoods__cell { grid-column: span 12; } .dgd-nhoods__grid--count-2 .dgd-nhoods__cell { grid-column: span 6; } .dgd-nhoods__grid--count-3 .dgd-nhoods__cell { grid-column: span 4; } .dgd-nhoods__cell--placeholder { opacity: 0.7; } .dgd-nhoods__cell--placeholder .dgd-nhoods__card::after { content: "Coming soon"; position: absolute; top: 1rem; right: 1rem; z-index: 3; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(12,8,32,0.6); border: 1px solid rgba(255,253,247,0.3); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dgd-on-dark); } .dgd-nhoods__card { position: relative; display: flex; align-items: flex-end; height: 100%; min-height: 280px; border-radius: 20px; overflow: hidden; color: var(--dgd-on-dark); text-decoration: none; isolation: isolate; transition: transform 0.35s var(--dgd-ease), box-shadow 0.35s var(--dgd-ease); } .dgd-nhoods__media { position: absolute; inset: 0; z-index: 0; transition: transform 0.6s var(--dgd-ease); } .dgd-nhoods__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12, 8, 32, 0) 30%, rgba(12, 8, 32, 0.4) 60%, rgba(12, 8, 32, 0.9) 100%); } .dgd-nhoods__body { position: relative; z-index: 2; padding: 1.35rem 1.4rem 1.45rem; display: flex; flex-direction: column; gap: 0.35rem; } .dgd-nhoods__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dgd-buttercup); font-weight: 700; } .dgd-nhoods__name { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1; color: var(--dgd-on-dark); text-shadow: 0 1px 2px rgba(15, 11, 35, 0.85), 0 4px 18px rgba(15, 11, 35, 0.55); } .dgd-nhoods__lede { font-size: 0.95rem; line-height: 1.4; color: var(--dgd-on-dark-soft); max-width: 44ch; } .dgd-nhoods__meta { display: inline-flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin-top: 0.35rem; } .dgd-nhoods__pill { font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(255, 253, 247, 0.12); color: var(--dgd-on-dark); border: 1px solid rgba(255, 253, 247, 0.2); } .dgd-nhoods__count { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 0.8rem; color: var(--dgd-fuchsia); padding: 0.15rem 0; } .dgd-nhoods__card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(15, 11, 35, 0.65); } .dgd-nhoods__card:hover .dgd-nhoods__media { transform: scale(1.06); } .dgd-nhoods__card:focus-visible { outline: 3px solid var(--dgd-violet-bright); outline-offset: 3px; } @media (max-width: 900px) { .dgd-nhoods__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .dgd-nhoods__cell { grid-column: span min(var(--dgd-nhood-span), 6); } } @media (max-width: 560px) { .dgd-nhoods__grid { grid-template-columns: 1fr; } .dgd-nhoods__cell { grid-column: span 1; min-height: 240px; } .dgd-nhoods__card { min-height: 240px; } } /* ================================================ HERO AUDIENCE LANES — tablist filter that reshapes which slides are visible without rebuilding the carousel. ================================================ */ .dgd-hero__lanes { position: relative; z-index: 6; display: flex; flex-wrap: nowrap; gap: 0.5rem; padding: 0.75rem var(--dgd-gutter, 1.5rem) 0; margin: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--dgd-gutter, 1.5rem); scrollbar-width: none; } .dgd-hero__lanes::-webkit-scrollbar { display: none; } .dgd-hero__lane { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; background: rgba(15, 11, 35, 0.55); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); border: 1px solid rgba(255, 253, 247, 0.18); color: var(--dgd-on-dark); font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 0.8rem; line-height: 1; cursor: pointer; transition: background 0.25s var(--dgd-ease), border-color 0.25s var(--dgd-ease), color 0.25s var(--dgd-ease), transform 0.25s var(--dgd-ease); } .dgd-hero__lane:hover { border-color: rgba(255, 56, 137, 0.65); } .dgd-hero__lane[aria-selected="true"] { background: var(--dgd-fuchsia); border-color: var(--dgd-fuchsia); color: var(--dgd-on-dark); box-shadow: 0 6px 20px rgba(255, 31, 122, 0.35); } .dgd-hero__lane:focus-visible { outline: 2px solid var(--dgd-cyan); outline-offset: 2px; } .dgd-hero__lane-chip { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(255, 56, 137, 0.85); color: var(--dgd-on-dark); font-family: "JetBrains Mono", monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.65rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .dgd-hero__lane-chip--visitor { background: rgba(0, 200, 230, 0.85); color: var(--wp--preset--color--night); } .dgd-hero__lane-chip--pride { background: linear-gradient(105deg, var(--wp--preset--color--fuchsia) 0%, var(--wp--preset--color--buttercup) 100%); color: var(--wp--preset--color--night); } .dgd-hero__lane-chip--weekend { background: rgba(255, 212, 59, 0.92); color: var(--wp--preset--color--night); } .dgd-hero__lane-chip--all { background: rgba(255, 253, 247, 0.18); color: var(--dgd-on-dark); } /* Lane filter — when a non-"all" lane is active, hide slides whose data-lane doesn't match. Slides tagged "all" stay visible under every lane. */ .dgd-hero[data-lane-active="tonight"] .dgd-hero__slide:not([data-lane="tonight"]):not([data-lane="all"]), .dgd-hero[data-lane-active="weekend"] .dgd-hero__slide:not([data-lane="weekend"]):not([data-lane="all"]), .dgd-hero[data-lane-active="visitor"] .dgd-hero__slide:not([data-lane="visitor"]):not([data-lane="all"]), .dgd-hero[data-lane-active="pride"] .dgd-hero__slide:not([data-lane="pride"]):not([data-lane="all"]) { display: none; } @media (prefers-reduced-motion: reduce) { .dgd-hero__lane { transition: none; } } /* ================================================ FEATURED EVENT SPOTLIGHT — extensions for the rebuilt pattern. Original `.dgd-spotlight*` selectors live above; this block only adds the new chips, lede, veil, and saved-by-N proof. ================================================ */ .dgd-spotlight-section .dgd-sec-head { margin-bottom: 1.5rem; } .dgd-spotlight__veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(10, 7, 22, 0.55) 0%, rgba(10, 7, 22, 0.85) 100%); pointer-events: none; } .dgd-spotlight__date-year { font-family: "JetBrains Mono", monospace; font-size: 0.6rem; letter-spacing: 0.18em; font-weight: 600; display: block; margin-top: 0.2rem; opacity: 0.75; } .dgd-spotlight__type-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; background: linear-gradient(105deg, var(--dgd-fuchsia) 0%, var(--dgd-violet, var(--wp--preset--color--violet)) 100%); color: var(--dgd-on-dark); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-right: 0.5rem; vertical-align: middle; } .dgd-spotlight__eyebrow-label { vertical-align: middle; } .dgd-spotlight__lede { font-size: 1rem; line-height: 1.55; color: var(--dgd-on-dark-soft, #C8BFDC); margin: 0 0 1.25rem; max-width: 60ch; } .dgd-spotlight__saves { margin-top: 0.85rem; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--dgd-on-dark-muted); } /* ================================================ HOME STRIP TEASER — static six-card walk replacement for the Mapbox-based home-strip pattern. Pure CSS, no JS dependency. ================================================ */ .dgd-strip-teaser { padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem); } .dgd-strip-teaser__grid { display: grid; grid-template-columns: minmax(260px, 28%) 1fr; gap: clamp(1.5rem, 0.75rem + 2vw, 3rem); align-items: stretch; } @media (max-width: 900px) { .dgd-strip-teaser__grid { grid-template-columns: 1fr; } } .dgd-strip-teaser__lede { align-self: center; display: flex; flex-direction: column; gap: 0.85rem; } .dgd-strip-teaser__lede .dgd-eyebrow { margin: 0; } .dgd-strip-teaser__lede .dgd-sec-head__title { font-size: clamp(1.85rem, 1.4rem + 1.8vw, 2.6rem); margin: 0; } .dgd-strip-teaser__sub { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--dgd-on-dark-soft, #C8BFDC); max-width: 36ch; } .dgd-strip-teaser__cta { align-self: flex-start; margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.5rem; background: var(--dgd-fuchsia); color: var(--dgd-on-dark); border-radius: 999px; text-decoration: none; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 0.95rem; box-shadow: 0 12px 28px rgba(255, 31, 122, 0.35); transition: transform 0.25s var(--dgd-ease), box-shadow 0.25s var(--dgd-ease); } .dgd-strip-teaser__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(255, 31, 122, 0.42); } .dgd-strip-teaser__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 1100px) { .dgd-strip-teaser__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 60%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--dgd-gutter, 1.5rem); padding-bottom: 0.5rem; scrollbar-width: thin; } } .dgd-strip-teaser__cell { scroll-snap-align: start; display: flex; } .dgd-strip-teaser__card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: 240px; padding: 1rem; border-radius: var(--dgd-radius-md, 12px); overflow: hidden; text-decoration: none; color: var(--dgd-on-dark); background: var(--dgd-bone); border: 1px solid var(--dgd-border); transition: transform 0.25s var(--dgd-ease), box-shadow 0.25s var(--dgd-ease); } .dgd-strip-teaser__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10, 7, 22, 0.4); } .dgd-strip-teaser__card:focus-visible { outline: 3px solid var(--dgd-cyan); outline-offset: 3px; } .dgd-strip-teaser__media { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transition: transform 0.45s var(--dgd-ease); } .dgd-strip-teaser__card:hover .dgd-strip-teaser__media { transform: scale(1.05); } .dgd-strip-teaser__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 7, 22, 0.95) 0%, rgba(10, 7, 22, 0.45) 55%, rgba(10, 7, 22, 0) 100%); z-index: 1; } .dgd-strip-teaser__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.3rem; } .dgd-strip-teaser__num { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 700; color: var(--dgd-buttercup); margin-bottom: 0.15rem; } .dgd-strip-teaser__name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; } .dgd-strip-teaser__type { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dgd-on-dark-soft, #C8BFDC); } .dgd-strip-teaser__vibe { font-size: 0.85rem; color: var(--dgd-on-dark-soft, #C8BFDC); line-height: 1.4; margin-top: 0.25rem; } .dgd-strip-teaser__badge { margin-top: 0.5rem; } @media (prefers-reduced-motion: reduce) { .dgd-strip-teaser__card, .dgd-strip-teaser__media, .dgd-strip-teaser__cta { transition: none; } } /* ========================================================================= PASS 2C — Refinement primitives Used by Newsletter, Submit Event, Contact, About, Partner page bodies. Tokens land in base.css :root; theme.json provides palette. ========================================================================= */ /* ---------- 1. Form pill — input/textarea/select with fuchsia focus ring ---- */ .dgd-form-pill { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1.25rem; } .dgd-form-pill__label { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dgd-violet-bright); } .dgd-form-pill__label--required::after { content: " *"; color: var(--dgd-fuchsia); } .dgd-form-pill__input, .dgd-form-pill__textarea, .dgd-form-pill__select { background: var(--dgd-bone); border: 1.5px solid var(--dgd-border); border-radius: 999px; padding: 0.85rem 1.25rem; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.4; color: var(--dgd-ink); outline: 0; transition: border-color 0.18s var(--dgd-ease), box-shadow 0.18s var(--dgd-ease); width: 100%; } .dgd-form-pill__textarea { border-radius: 18px; resize: vertical; min-height: 6.5rem; } .dgd-form-pill__input::placeholder, .dgd-form-pill__textarea::placeholder { color: var(--dgd-muted); opacity: 1; } .dgd-form-pill__input:focus, .dgd-form-pill__textarea:focus, .dgd-form-pill__select:focus { border-color: var(--dgd-fuchsia); box-shadow: 0 0 0 4px rgba(255, 56, 137, 0.18); } .dgd-form-pill__input:invalid:not(:placeholder-shown), .dgd-form-pill__textarea:invalid:not(:placeholder-shown) { border-color: var(--dgd-tangerine); } .dgd-form-pill__hint { font-family: "DM Sans", -apple-system, sans-serif; font-size: 0.78rem; line-height: 1.4; color: var(--dgd-muted); } .dgd-form-pill__hint--error { color: var(--dgd-tangerine); } /* Form wrapper helpers — used by form-newsletter, form-contact, form-submit-event patterns */ .dgd-form-cinema { background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 28px; padding: clamp(1.75rem, 3vw, 2.5rem); box-shadow: var(--dgd-card-ring), var(--dgd-shadow-card); max-width: 580px; } .dgd-form-cinema__head { margin: 0 0 1.5rem; } .dgd-form-cinema__title { font-family: "Bricolage Grotesque", "Arial Black", sans-serif; font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; line-height: 1.05; color: var(--dgd-ink); margin: 0 0 0.5rem; } .dgd-form-cinema__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--dgd-fuchsia); } .dgd-form-cinema__deck { font-family: "DM Sans", -apple-system, sans-serif; font-size: 0.95rem; line-height: 1.55; color: var(--dgd-ink-soft); margin: 0; } .dgd-form-cinema__row { display: grid; gap: 0; } @media (min-width: 640px) { .dgd-form-cinema__row--2 { grid-template-columns: 1fr 1fr; gap: 0 1rem; } } .dgd-form-cinema__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--dgd-border); } .dgd-form-cinema__status { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--dgd-muted); } .dgd-form-cinema__status--ok { color: var(--dgd-mint); } .dgd-form-cinema__status--err { color: var(--dgd-tangerine); } /* ---------- 2. Trust stats — 2-up to 4-up grid ----------------------------- */ .dgd-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0; list-style: none; padding: 0; } .dgd-stat-strip__item { background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-radius: 18px; padding: 1.5rem 1.25rem; text-align: center; box-shadow: var(--dgd-card-ring); transition: transform 0.32s var(--dgd-ease), border-color 0.18s var(--dgd-ease); } .dgd-stat-strip__item:hover { transform: translateY(-3px); border-color: var(--dgd-fuchsia-deep); } .dgd-stat-strip__num { display: block; font-family: "Bricolage Grotesque", "Arial Black", sans-serif; font-weight: 800; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1; letter-spacing: -0.025em; color: var(--dgd-fuchsia); margin: 0 0 0.5rem; } .dgd-stat-strip__label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dgd-on-dark-soft); } .dgd-stat-strip[data-accent="cyan"] .dgd-stat-strip__num { color: var(--dgd-cyan); } .dgd-stat-strip[data-accent="buttercup"] .dgd-stat-strip__num { color: var(--dgd-buttercup); } .dgd-stat-strip[data-accent="mint"] .dgd-stat-strip__num { color: var(--dgd-mint); } .dgd-stat-strip[data-accent="violet"] .dgd-stat-strip__num { color: var(--dgd-violet-bright); } .dgd-stat-strip[data-accent="tangerine"] .dgd-stat-strip__num { color: var(--dgd-tangerine); } /* ---------- 3. Image-overlay card variant ---------------------------------- */ .dgd-overlay-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; isolation: isolate; text-decoration: none; color: inherit; background: var(--dgd-bone); box-shadow: var(--dgd-card-ring); transition: transform 0.32s var(--dgd-ease), box-shadow 0.32s var(--dgd-ease); } .dgd-overlay-card:hover, .dgd-overlay-card:focus-visible { transform: translateY(-4px); box-shadow: var(--dgd-shadow-lift); } .dgd-overlay-card__media { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; filter: var(--cinema-grade); } .dgd-overlay-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,11,35,0) 35%, rgba(15,11,35,0.9) 100%); pointer-events: none; } .dgd-overlay-card__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1rem 1.25rem 1.25rem; } .dgd-overlay-card__tag { display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dgd-buttercup); margin: 0 0 0.5rem; } .dgd-overlay-card__title { font-family: "Bricolage Grotesque", "Arial Black", sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--dgd-on-dark); margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } .dgd-overlay-card__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--dgd-buttercup); } /* ---------- 4. Editorial pullquote (single quote, prominent) --------------- */ .dgd-pullquote { border-left: 2px solid var(--dgd-fuchsia); padding: 0.5rem 0 0.5rem 1.5rem; margin: clamp(2rem, 4vw, 3rem) 0; max-width: 56ch; } .dgd-pullquote__text { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.4; color: var(--dgd-ink); margin: 0 0 1rem; } .dgd-pullquote__attr { display: flex; gap: 0.875rem; align-items: center; } .dgd-pullquote__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--dgd-fuchsia), var(--dgd-violet)); flex: none; } .dgd-pullquote__who { font-family: "DM Sans", -apple-system, sans-serif; font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: var(--dgd-ink); } .dgd-pullquote__source { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dgd-muted); margin-top: 0.3rem; } .dgd-pullquote--accent-cyan { border-left-color: var(--dgd-cyan); } .dgd-pullquote--accent-buttercup { border-left-color: var(--dgd-buttercup); } .dgd-pullquote--accent-mint { border-left-color: var(--dgd-mint); } .dgd-pullquote--accent-violet { border-left-color: var(--dgd-violet-bright); } @media (prefers-reduced-motion: reduce) { .dgd-stat-strip__item, .dgd-overlay-card { transition: none; } .dgd-stat-strip__item:hover, .dgd-overlay-card:hover { transform: none; } } /* ── Scroll reveal — applied via IntersectionObserver in ui.js ───────────── */ .dgd-reveal { opacity: 0; transform: translateY(8px); transition: opacity 480ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1); will-change: opacity, transform; } .dgd-reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .dgd-reveal { opacity: 1; transform: none; transition: none; } } /* ── Form status (live region for newsletter / submit-event / contact) ───── */ .dgd-form-status { margin-top: 0.75rem; font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--dgd-on-dark-soft, rgba(244, 238, 224, 0.7)); min-height: 1.25rem; opacity: 0; transition: opacity 240ms ease; } .dgd-form-status.is-active { opacity: 1; } .dgd-form-status.is-success { color: var(--dgd-mint, var(--wp--preset--color--mint)); } .dgd-form-status.is-error { color: var(--dgd-fuchsia, var(--wp--preset--color--fuchsia)); } @keyframes dgd-spin { to { transform: rotate(360deg); } } .dgd-spinner { display: inline-block; font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace); margin-right: 0.4em; } .dgd-spinner::before { content: "◰"; display: inline-block; animation: dgd-spin 900ms linear infinite; } @media (prefers-reduced-motion: reduce) { .dgd-spinner::before { animation: none; content: "…"; } } /* ========================================================================= TONIGHT HERO — front-page primary Action-first hero replacing hero-concierge on the home page only. Live status pill + primary pick + 3-up "also tonight" + CTAs. ========================================================================= */ .dgd-tonight-hero { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); background: radial-gradient(ellipse 60% 40% at 80% 0%, rgba(255,56,137,0.10), transparent 60%), radial-gradient(ellipse 50% 30% at 10% 100%, rgba(0,200,230,0.08), transparent 60%), var(--dgd-midnight); position: relative; overflow: hidden; } .dgd-tonight-hero__pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(255, 56, 137, 0.12); border: 1px solid rgba(255, 56, 137, 0.4); color: var(--dgd-ink); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--wp--preset--spacing--30); } .dgd-tonight-hero__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--wp--preset--color--fuchsia-bright, var(--dgd-fuchsia)); box-shadow: 0 0 12px var(--wp--preset--color--fuchsia-bright, var(--dgd-fuchsia)); animation: dgd-pulse-dot 2.4s ease-in-out infinite; } .dgd-tonight-hero__sep { opacity: 0.45; } @keyframes dgd-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } @media (prefers-reduced-motion: reduce) { .dgd-tonight-hero__dot { animation: none; } } .dgd-tonight-hero__head { max-width: 720px; margin-bottom: var(--wp--preset--spacing--40); } .dgd-tonight-hero__title { font-family: var(--wp--preset--font-family--display); font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.025em; color: var(--dgd-ink); margin: 0.25rem 0 0.75rem; } .dgd-tonight-hero__title em { font-style: normal; font-family: var(--wp--preset--font-family--serif); color: var(--dgd-fuchsia); } .dgd-tonight-hero__lede { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); color: var(--dgd-ink-soft); margin: 0; max-width: 56ch; line-height: 1.55; } .dgd-tonight-hero__lede strong { color: var(--dgd-buttercup); font-weight: 700; } .dgd-tonight-hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--30); } @media (max-width: 768px) { .dgd-tonight-hero__grid { grid-template-columns: 1fr; } } .dgd-tonight-hero__primary { position: relative; display: block; min-height: 360px; border-radius: var(--dgd-radius-lg); overflow: hidden; text-decoration: none; isolation: isolate; border: 1px solid var(--dgd-border); box-shadow: var(--dgd-shadow-card); transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease); } .dgd-tonight-hero__primary:hover { transform: translateY(-3px); box-shadow: var(--dgd-shadow-lift); } .dgd-tonight-hero__primary-media { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .dgd-tonight-hero__primary-media--gradient { background: linear-gradient(135deg, var(--dgd-fuchsia) 0%, var(--dgd-violet) 50%, var(--dgd-cyan) 100%); } .dgd-tonight-hero__primary-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,8,32,0.05) 0%, rgba(12,8,32,0.6) 55%, rgba(12,8,32,0.94) 100%); z-index: 1; } .dgd-tonight-hero__primary-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.4rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); height: 100%; justify-content: flex-end; color: var(--dgd-on-dark); } .dgd-tonight-hero__primary-eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--dgd-buttercup); } .dgd-tonight-hero__primary-title { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--dgd-on-dark); } .dgd-tonight-hero__primary-when { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.95rem; color: var(--dgd-on-dark-soft); letter-spacing: 0.05em; } .dgd-tonight-hero__primary-countdown { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--dgd-buttercup); color: var(--dgd-midnight); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; width: fit-content; } .dgd-tonight-hero__primary-excerpt { color: var(--dgd-on-dark-soft); font-size: 0.95rem; line-height: 1.5; max-width: 50ch; } .dgd-tonight-hero__sides { display: flex; flex-direction: column; gap: 0.65rem; margin: 0; padding: 0; list-style: none; } .dgd-tonight-hero__side-link { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.95rem 1.1rem; border-radius: var(--dgd-radius-md); background: var(--dgd-bone); border: 1px solid var(--dgd-border); color: var(--dgd-ink); text-decoration: none; transition: transform 0.2s var(--dgd-ease), border-color 0.2s var(--dgd-ease), background 0.2s var(--dgd-ease); } .dgd-tonight-hero__side-link:hover { transform: translateY(-2px); border-color: var(--dgd-fuchsia); background: rgba(255, 56, 137, 0.06); } .dgd-tonight-hero__side-when { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--dgd-buttercup); text-transform: uppercase; } .dgd-tonight-hero__side-title { font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; font-weight: 700; line-height: 1.15; } .dgd-tonight-hero__side-venue { color: var(--dgd-ink-soft); font-size: 0.85rem; } .dgd-tonight-hero__cta { margin-top: var(--wp--preset--spacing--30); } .dgd-tonight-hero__cta .wp-block-buttons { gap: 0.75rem; flex-wrap: wrap; } /* ========================================================================= STRIP TEASER — front-page "walk the strip" preview ========================================================================= */ .dgd-strip-teaser { padding-block: var(--wp--preset--spacing--60); background: var(--dgd-blush); } .dgd-strip-teaser__wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--wp--preset--spacing--40); align-items: center; } @media (max-width: 768px) { .dgd-strip-teaser__wrap { grid-template-columns: 1fr; } } .dgd-strip-teaser__title { font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margin: 0.25rem 0 0.75rem; color: var(--dgd-ink); } .dgd-strip-teaser__title em { font-style: normal; font-family: var(--wp--preset--font-family--serif); color: var(--dgd-fuchsia); } .dgd-strip-teaser__lede { color: var(--dgd-ink-soft); margin: 0 0 var(--wp--preset--spacing--30); max-width: 50ch; } .dgd-strip-teaser__stack { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .dgd-strip-teaser__stop-link { display: grid; grid-template-columns: auto 64px 1fr; align-items: center; gap: 1rem; padding: 0.7rem 1rem; border-radius: var(--dgd-radius-md); background: rgba(255,253,247,0.04); border: 1px solid var(--dgd-border); color: var(--dgd-ink); text-decoration: none; transition: transform 0.2s var(--dgd-ease), border-color 0.2s var(--dgd-ease), background 0.2s var(--dgd-ease); } .dgd-strip-teaser__stop-link:hover { transform: translateX(4px); border-color: var(--dgd-fuchsia); background: rgba(255, 56, 137, 0.06); } .dgd-strip-teaser__num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.95rem; font-weight: 700; color: var(--dgd-fuchsia); letter-spacing: 0.04em; } .dgd-strip-teaser__img { width: 64px; height: 64px; border-radius: var(--dgd-radius-sm); background-size: cover; background-position: center; flex: none; } .dgd-strip-teaser__img--gradient { background: linear-gradient(135deg, var(--dgd-fuchsia), var(--dgd-violet)); } .dgd-strip-teaser__name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; } /* ========================================================================= FROM THE EDITOR — front-page editorial slot ========================================================================= */ .dgd-from-editor { padding-block: var(--wp--preset--spacing--60); } .dgd-from-editor__quote { margin: 0; padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--dgd-radius-lg); background: var(--dgd-bone); border: 1px solid var(--dgd-border); border-left: 4px solid var(--dgd-fuchsia); box-shadow: var(--dgd-shadow-card); } .dgd-from-editor__blockquote { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2rem); line-height: 1.35; font-style: italic; color: var(--dgd-ink); margin: 0 0 1rem; } .dgd-from-editor__cite cite { font-family: "JetBrains Mono", ui-monospace, monospace; font-style: normal; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--dgd-buttercup); text-transform: uppercase; } .dgd-from-editor__link-card { display: flex; flex-direction: column; gap: 0.4rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--dgd-radius-lg); background: var(--dgd-bone); border: 1px solid var(--dgd-border); text-decoration: none; color: var(--dgd-ink); transition: transform 0.25s var(--dgd-ease), border-color 0.25s var(--dgd-ease); box-shadow: var(--dgd-shadow-card); } .dgd-from-editor__link-card:hover { transform: translateY(-3px); border-color: var(--dgd-fuchsia); box-shadow: var(--dgd-shadow-lift); } .dgd-from-editor__link-eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgd-buttercup); } .dgd-from-editor__link-title { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .dgd-from-editor__link-cta { color: var(--dgd-fuchsia); font-weight: 700; margin-top: 0.5rem; } /* ========================================================================= BIG EVENTS AHEAD — front-page long-lead ========================================================================= */ .dgd-big-ahead { padding-block: var(--wp--preset--spacing--60); } .dgd-big-ahead__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; } .dgd-big-ahead__card { position: relative; display: block; min-height: 320px; border-radius: var(--dgd-radius-lg); overflow: hidden; text-decoration: none; isolation: isolate; border: 1px solid var(--dgd-border); box-shadow: var(--dgd-shadow-card); transition: transform 0.25s var(--dgd-ease), box-shadow 0.25s var(--dgd-ease); } .dgd-big-ahead__card:hover { transform: translateY(-3px); box-shadow: var(--dgd-shadow-lift); } .dgd-big-ahead__media { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .dgd-big-ahead__media--gradient { background: linear-gradient(135deg, var(--dgd-fuchsia), var(--dgd-violet)); } .dgd-big-ahead__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,8,32,0) 0%, rgba(12,8,32,0.55) 40%, rgba(12,8,32,0.92) 100%); z-index: 1; } .dgd-big-ahead__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; justify-content: flex-end; color: var(--dgd-on-dark); } .dgd-big-ahead__date { display: inline-flex; align-items: baseline; gap: 0.5rem; width: fit-content; padding: 0.45rem 0.8rem; border-radius: var(--dgd-radius-sm); background: rgba(255, 212, 59, 0.95); color: var(--dgd-midnight); font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .dgd-big-ahead__date-month { font-size: 0.7rem; } .dgd-big-ahead__date-day { font-size: 1.4rem; font-weight: 800; } .dgd-big-ahead__date-weekday { font-size: 0.7rem; opacity: 0.8; } .dgd-big-ahead__name { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; color: var(--dgd-on-dark); text-shadow: 0 1px 8px rgba(12, 8, 32, 0.85); } .dgd-big-ahead__countdown { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem; color: var(--wp--preset--color--warm-ivory); letter-spacing: 0.05em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(12, 8, 32, 0.9); } /* ========================================================================= COMMUNITY BAND — merged nonprofits + newsletter ========================================================================= */ .dgd-community-band { padding-block: var(--wp--preset--spacing--70); background: var(--dgd-night); } .dgd-community-band__nonprofits { margin-bottom: var(--wp--preset--spacing--50); } .dgd-community-band__orgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; margin: var(--wp--preset--spacing--30) 0 0; padding: 0; list-style: none; } .dgd-community-band__org-link { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.15rem; border-radius: var(--dgd-radius-md); background: rgba(255,253,247,0.04); border: 1px solid var(--dgd-on-dark-border); text-decoration: none; color: var(--dgd-on-dark); transition: transform 0.2s var(--dgd-ease), border-color 0.2s var(--dgd-ease), background 0.2s var(--dgd-ease); } .dgd-community-band__org-link:hover { transform: translateY(-2px); border-color: var(--dgd-fuchsia); background: rgba(255, 56, 137, 0.08); } .dgd-community-band__org-name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; } .dgd-community-band__org-tagline { color: var(--dgd-on-dark-soft); font-size: 0.88rem; } .dgd-community-band__org-cta { color: var(--dgd-fuchsia); font-size: 0.85rem; font-weight: 700; margin-top: 0.25rem; } .dgd-community-band__newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--40); align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--dgd-radius-lg); background: linear-gradient(135deg, rgba(255,56,137,0.10), rgba(107,51,255,0.10)); border: 1px solid var(--dgd-on-dark-border); } @media (max-width: 768px) { .dgd-community-band__newsletter { grid-template-columns: 1fr; } } .dgd-community-band__news-title { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 800; line-height: 1.05; margin: 0.25rem 0 0.5rem; color: var(--dgd-on-dark); } .dgd-community-band__news-title em { font-style: normal; font-family: var(--wp--preset--font-family--serif); color: var(--dgd-buttercup); } .dgd-community-band__news-lede { color: var(--dgd-on-dark-soft); margin: 0; } .dgd-community-band__form-label { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dgd-on-dark-soft); margin-bottom: 0.4rem; } .dgd-community-band__form-row { display: flex; gap: 0.5rem; position: relative; } .dgd-community-band__form-input { flex: 1; padding: 0.85rem 1rem; border-radius: var(--dgd-radius-md); border: 1px solid var(--dgd-on-dark-border); background: rgba(0,0,0,0.3); color: var(--dgd-on-dark); font-family: var(--wp--preset--font-family--body); font-size: 1rem; min-width: 0; } .dgd-community-band__form-input:focus { outline: 2px solid var(--dgd-fuchsia); outline-offset: 2px; border-color: var(--dgd-fuchsia); } .dgd-community-band__form-btn { padding: 0.85rem 1.5rem; border-radius: var(--dgd-radius-md); border: 0; background: var(--dgd-fuchsia); color: var(--dgd-night-deep); font-family: var(--wp--preset--font-family--body); font-weight: 700; cursor: pointer; transition: background 0.2s var(--dgd-ease), transform 0.2s var(--dgd-ease); } .dgd-community-band__form-btn:hover { background: var(--dgd-fuchsia-mid); transform: translateY(-1px); } .dgd-community-band__form-status { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--dgd-mint); min-height: 1.2em; } @media (max-width: 480px) { .dgd-community-band__form-row { flex-direction: column; gap: 0.75rem; } .dgd-community-band__form-input { min-height: 44px; } .dgd-community-band__form-btn { width: 100%; min-height: 44px; } } /* ---------- Footer — Community partners + Safer Routes ---------- Slim row above the main footer. Extracted from the inline