/* ========================================================================== Mike's Place — Barton Creek Brand stylesheet — design tokens + utility classes you can apply to ANY Elementor element via the "Advanced → CSS Classes" field. This file is loaded site-wide when the plugin is active. It does NOT make sweeping changes to non-Mike's-Place pages — every utility class is prefixed `bc-` and only takes effect when you opt in by adding the class. See README.md → "Brand styling cheatsheet" for the full list with examples. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS (CSS variables) These mirror the inline tokens output in by the plugin, in case that gets stripped by an aggressive cache. -------------------------------------------------------------------------- */ :root { --bc-ink: #0F4C5C; --bc-cacao: #0F4C5C; --bc-bark: #6B6560; --bc-parchment: #F2EAD8; --bc-cream: #FBF7F0; --bc-sand: #E8DDC9; --bc-macaw: #E36F1E; --bc-macaw-deep: #B85513; --bc-jade: #2D6B7A; --bc-jade-deep: #1F5763; --bc-ochre: #C79A3A; --bc-ember: #B83A2B; --bc-charcoal: #2D2A26; --bc-wa-green: #25D366; --bc-wa-green-deep: #1DA851; --bc-font-serif: 'Fraunces', Georgia, serif; --bc-font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --bc-font-mono: 'JetBrains Mono', ui-monospace, monospace; --bc-radius-card: 16px; --bc-radius-pill: 999px; } /* -------------------------------------------------------------------------- 2. EDITORIAL DISPLAY TYPE — `.bc-display` and `.bc-display-it` Apply to any heading or text element to get the big editorial Fraunces treatment. .bc-display-it is the italic accent variant (use for the second line that splits a headline). -------------------------------------------------------------------------- */ .bc-display { font-family: var(--bc-font-serif) !important; font-optical-sizing: auto; font-variation-settings: "opsz" 144, "SOFT" 30; font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; } .bc-display-it { font-family: var(--bc-font-serif) !important; font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 60; } .bc-display-tight { line-height: 1.1; } /* -------------------------------------------------------------------------- 3. EYEBROW — `.bc-eyebrow` Mono-spaced uppercase label. Use it for chapter labels, photo captions, prices labels — anything tiny and structural. -------------------------------------------------------------------------- */ .bc-eyebrow { font-family: var(--bc-font-mono) !important; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 4. COLOR UTILITIES Add to any element to apply a brand color directly. Useful for native Elementor Heading widgets where you want to color one inline span. -------------------------------------------------------------------------- */ .bc-bg-cream { background-color: var(--bc-cream); } .bc-bg-parchment { background-color: var(--bc-parchment); } .bc-bg-sand { background-color: var(--bc-sand); } .bc-bg-ink { background-color: var(--bc-ink); } .bc-bg-cacao { background-color: var(--bc-cacao); } .bc-bg-jade { background-color: var(--bc-jade); } .bc-bg-macaw { background-color: var(--bc-macaw); } .bc-text-cream { color: var(--bc-cream); } .bc-text-parchment{ color: var(--bc-parchment); } .bc-text-ink { color: var(--bc-ink); } .bc-text-cacao { color: var(--bc-cacao); } .bc-text-bark { color: var(--bc-bark); } .bc-text-macaw { color: var(--bc-macaw); } .bc-text-jade { color: var(--bc-jade); } .bc-text-ochre { color: var(--bc-ochre); } .bc-text-ember { color: var(--bc-ember); } /* -------------------------------------------------------------------------- 5. BUTTONS — `.bc-btn` + variants Apply to Elementor's Button widget by setting the "CSS Classes" field to e.g. "bc-btn bc-btn-primary". Removes Elementor's default button styling and applies our pill design. -------------------------------------------------------------------------- */ .bc-btn { display: inline-flex !important; align-items: center; gap: 10px; padding: 18px 26px; border-radius: var(--bc-radius-pill); font-family: var(--bc-font-sans) !important; font-weight: 500; font-size: 15px; line-height: 1; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; } .bc-btn-primary { background: var(--bc-macaw) !important; color: var(--bc-cream) !important; } .bc-btn-primary:hover, .bc-btn-primary:focus-visible { background: var(--bc-macaw-deep) !important; color: var(--bc-cream) !important; transform: translateY(-1px); } .bc-btn-dark { padding: 14px 20px; background: var(--bc-ink) !important; color: var(--bc-cream) !important; } .bc-btn-dark:hover, .bc-btn-dark:focus-visible { background: var(--bc-ink) !important; color: var(--bc-cream) !important; transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(15, 76, 92, 0.45); } .bc-btn-ghost { padding: 14px 20px; background: transparent !important; color: var(--bc-ink) !important; border: 1px solid rgba(15, 76, 92, 0.25); } .bc-btn-ghost:hover, .bc-btn-ghost:focus-visible { background: var(--bc-ink) !important; color: var(--bc-cream) !important; border-color: var(--bc-ink); transform: translateY(-1px); } /* -------------------------------------------------------------------------- 6. ANIMATED UNDERLINE — `.bc-ulink` For inline text links — animated underline wipes left on hover. -------------------------------------------------------------------------- */ .bc-ulink { position: relative; } .bc-ulink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(0); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .bc-ulink:hover::after, .bc-ulink:focus-visible::after { transform-origin: left; transform: scaleX(1); } /* -------------------------------------------------------------------------- 7. CHAPTER RULE — `.bc-rule` Adds the small "— · " line + dot before chapter eyebrow text. Wrap an inline element with it: CHAPTER 02 -------------------------------------------------------------------------- */ .bc-rule { display: inline-flex; align-items: center; gap: 8px; } .bc-rule::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.5; } .bc-rule::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bc-macaw); } /* -------------------------------------------------------------------------- 8. CORNER BRACKETS — `.bc-corner` Adds orange L-brackets at top-left and bottom-right of any container. Apply to a container in Elementor (e.g. an Inner Section) by setting its CSS class to `bc-corner`. Make sure the container has padding. -------------------------------------------------------------------------- */ .bc-corner { position: relative; } .bc-corner::before, .bc-corner::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--bc-macaw); border-style: solid; border-width: 0; pointer-events: none; } .bc-corner::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; } .bc-corner::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; } /* -------------------------------------------------------------------------- 9. PHOTO PLACEHOLDER — `.bc-ph` Striped diagonal placeholder block for image-less drafts. Used internally by widgets and available as a utility if you want to mock up a section before the real photo is sourced. Variants: .bc-ph — light (sand stripes) .bc-ph.bc-ph-dark — ink stripes .bc-ph.bc-ph-jade — jade stripes Set data-label and data-caption attributes for the corner labels. -------------------------------------------------------------------------- */ .bc-ph { position: relative; background: repeating-linear-gradient(135deg, #E8DDC9 0 14px, #DCCFB3 14px 28px); color: var(--bc-bark); overflow: hidden; isolation: isolate; } .bc-ph::before { content: attr(data-label); position: absolute; left: 14px; top: 12px; font-family: var(--bc-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--bc-ink); color: var(--bc-parchment); padding: 5px 8px; border-radius: 2px; z-index: 2; } .bc-ph::after { content: attr(data-caption); position: absolute; right: 14px; bottom: 12px; font-family: var(--bc-font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--bc-ink); background: var(--bc-parchment); padding: 5px 8px; border-radius: 2px; max-width: 75%; text-align: right; z-index: 2; } .bc-ph-dark { background: repeating-linear-gradient(135deg, var(--bc-ink) 0 14px, #0A3B47 14px 28px); color: var(--bc-parchment); } .bc-ph-dark::after { background: var(--bc-ink); color: var(--bc-parchment); } .bc-ph-jade { background: repeating-linear-gradient(135deg, var(--bc-jade) 0 14px, var(--bc-jade-deep) 14px 28px); color: var(--bc-cream); } .bc-ph-jade::after { background: var(--bc-ink); color: var(--bc-cream); } .bc-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .bc-ph.has-image::before, .bc-ph.has-image::after { display: none; } /* -------------------------------------------------------------------------- 10. KEN BURNS — `.bc-kenburns` Slow zoom + drift loop. Apply to a background image element. Pauses for prefers-reduced-motion. -------------------------------------------------------------------------- */ @keyframes bc-kenburns { 0% { transform: scale(1.05); } 50% { transform: scale(1.18) translate3d(-1.5%, -1%, 0); } 100% { transform: scale(1.05); } } .bc-kenburns { animation: bc-kenburns 22s ease-in-out infinite; transform-origin: 60% 50%; will-change: transform; } @media (prefers-reduced-motion: reduce) { .bc-kenburns { animation: none; } } /* -------------------------------------------------------------------------- 11. SCRIM + GRAIN OVERLAYS `.bc-scrim` — gradient darken for legibility over photos `.bc-grain` — subtle noise overlay for paper-like texture -------------------------------------------------------------------------- */ .bc-scrim { background: linear-gradient(180deg, rgba(28, 19, 12, 0.45) 0%, rgba(28, 19, 12, 0.10) 35%, rgba(28, 19, 12, 0.65) 100%); } .bc-grain { position: relative; } .bc-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjUgMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC41NSIvPjwvc3ZnPg=="); mix-blend-mode: multiply; opacity: 0.18; } /* -------------------------------------------------------------------------- 12. STARS — `.bc-stars` Apply to any text element containing star characters to render the warm ochre rating star treatment. -------------------------------------------------------------------------- */ .bc-stars { color: var(--bc-ochre); letter-spacing: 2px; font-size: 18px; } /* -------------------------------------------------------------------------- 13. NUMBER CIRCLE — `.bc-nc` Small circular pip with a number inside. For numbered lists. -------------------------------------------------------------------------- */ .bc-nc { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(15, 76, 92, 0.25); font-family: var(--bc-font-mono); font-size: 11px; background: var(--bc-cream); } /* -------------------------------------------------------------------------- 14. ENTRANCE REVEAL — `.bc-reveal` + data-bc-anim="reveal" Hide content initially; animations.js fades it in on scroll. If JS fails to load, the .bc-anim-fallback class on shows it. -------------------------------------------------------------------------- */ .bc-reveal { opacity: 0; transform: translateY(14px); } .bc-anim-fallback .bc-reveal { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; } @media (prefers-reduced-motion: reduce) { .bc-reveal { opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------------------------------- 15. WHATSAPP FAB Floating bottom-right button + popover. Rendered site-wide via inc/whatsapp-fab.php. All visible text is Customizer-driven. -------------------------------------------------------------------------- */ .bc-wa { position: fixed; bottom: 20px; right: 20px; z-index: 9999; user-select: none; } .bc-wa-fab { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bc-wa-green); color: var(--bc-cream); border: none; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(15, 76, 92, 0.45), 0 4px 10px -4px rgba(15, 76, 92, 0.25); transition: background 0.2s ease, transform 0.2s ease; padding: 0; } .bc-wa-fab:hover { background: var(--bc-wa-green-deep); transform: scale(1.05); } /* Lock the FAB and popover SVG sizing so global theme/plugin rules can't shrink them. Some optimization plugins (Jetpack, etc.) set svg { width:auto } or svg { max-width:1em } which leaves the icon too small inside our FAB. */ .bc-wa-fab svg { width: 26px !important; height: 26px !important; display: block !important; flex-shrink: 0 !important; fill: currentColor !important; } .bc-wa-pop-icon svg { width: 22px !important; height: 22px !important; display: block !important; flex-shrink: 0 !important; fill: currentColor !important; } .bc-wa-pop-icon-sm svg { width: 16px !important; height: 16px !important; } .bc-wa-pop-close svg, .bc-wa-pop-arrow svg { width: 14px !important; height: 14px !important; display: block !important; flex-shrink: 0 !important; } @keyframes bc-wa-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 12px 30px -10px rgba(15, 76, 92, 0.45); } 50% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0), 0 12px 30px -10px rgba(15, 76, 92, 0.45); } } .bc-wa-fab { animation: bc-wa-pulse 2.4s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .bc-wa-fab { animation: none; } } .bc-wa-pop { position: absolute; bottom: 76px; right: 0; width: 320px; background: var(--bc-cream); border-radius: 16px; border: 1px solid rgba(15, 76, 92, 0.1); overflow: hidden; box-shadow: 0 12px 30px -10px rgba(15, 76, 92, 0.45), 0 4px 10px -4px rgba(15, 76, 92, 0.25); transform-origin: bottom right; transform: scale(0.9) translateY(8px); opacity: 0; pointer-events: none; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease; } .bc-wa-pop.bc-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; } .bc-wa-pop-head { background: var(--bc-wa-green); color: var(--bc-cream); padding: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .bc-wa-pop-head .bc-eyebrow { color: rgba(251, 247, 240, 0.8); } .bc-wa-pop-title { font-size: 22px; margin-top: 4px; line-height: 1.1; color: var(--bc-cream); } .bc-wa-pop-close { background: rgba(251, 247, 240, 0.15); color: rgba(251, 247, 240, 0.9); border: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; } .bc-wa-pop-close:hover { background: rgba(251, 247, 240, 0.25); color: var(--bc-cream); } .bc-wa-pop-row { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid rgba(15, 76, 92, 0.1); transition: background 0.2s ease; color: inherit; text-decoration: none; } .bc-wa-pop-row:hover { background: rgba(232, 221, 201, 0.4); } .bc-wa-pop-row:last-of-type { border-bottom: none; } .bc-wa-pop-row.bc-primary { background: rgba(45, 107, 122, 0.04); } .bc-wa-pop-row-body { flex: 1; } .bc-wa-pop-row-name { display: block; font-weight: 500; font-size: 16px; color: var(--bc-ink); } .bc-wa-pop-row-name-sm { font-size: 13.5px; color: var(--bc-bark); } .bc-wa-pop-row-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; } .bc-wa-pop-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bc-ember); display: inline-block; } .bc-wa-pop-meta-text { font-size: 10px; } .bc-wa-pop-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bc-jade); color: var(--bc-cream); flex-shrink: 0; } .bc-wa-pop-icon-sm { width: 36px; height: 36px; background: rgba(107, 101, 96, 0.15); color: var(--bc-bark); } .bc-wa-pop-foot { padding: 10px 16px; background: rgba(232, 221, 201, 0.4); color: var(--bc-bark); text-align: center; } /* Hide FAB while editing in Elementor — it gets in the way */ .elementor-editor-active .bc-wa { display: none; } /* -------------------------------------------------------------------------- 16. HEADER SCROLL STATE The plugin adds `.bc-scrolled` to after scrolling past the hero. Use it in your Elementor Theme Builder header to swap colors: body.bc-scrolled .your-header { background: var(--bc-cream); ... } -------------------------------------------------------------------------- */ /* (No CSS here on purpose — you set the colors per-header in Theme Builder or in your own CSS.) */