/*
Theme Name: Vincenzo Beautifeye
Theme URI: https://davidgagne.net/tags/wordpress/
Author: David Vincent Gagne
Author URI: https://davidgagne.net/
Description: Beautifeye — the marketing site for the museum-art app. Warm canvas backgrounds, gallery-signage serif type, and a palette pulled from real Impressionist paintings rather than the app's own UI (which is deliberately neutral so the art can be the color). Bootstrap 5 and Font Awesome.
Version: 0.0.6
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vincenzo-beautifeye
Tags: one-column, custom-menu, landing-page
*/

/*--------------------------------------------------
     NOTE: "Theme Name" and "Version" in the header above are
     auto-synced from vincenzo-core.php (THEME_NAME / THEME_VERSION)
     by the vincenzo-git-hooks pre-commit hook on every commit.
     Edits made directly to those header lines WILL BE OVERWRITTEN.
     To rename or re-version this theme, edit vincenzo-core.php.
--------------------------------------------------*/

/*---------------------------------------------------------------
-    Title:    Vincenzo-Beautifeye Stylesheet
-    File:     /style.css
-    Author:   dvg@davidgagne.net
-              (c) 2026 David V. Gagne
-    Version:  0.0.1
-    Created:  TUE AUG 18 2026 @ 15:50:00 EDT
-    Modified: TUE AUG 18 2026 @ 15:50:00 EDT
---------------------------------------------------------------*/

/*-----------------------------------------------------
     Design tokens. Beautifeye's own UI is deliberately
     neutral (black/white chrome) so museum artwork supplies
     all the color — so unlike bartender.live (whose palette
     IS the app's own screenshots), this site's palette is
     sampled from real Impressionist paintings instead: the
     warm canvas ground and cypress gold of Van Gogh's
     L'Arlésienne (Met, DT1396) and the water-garden blues
     and greens of Manet's Monet Family in Their Garden at
     Argenteuil (Met, DP-25465-001) — both public-domain
     pieces actually in the app's own catalog.
-----------------------------------------------------*/
:root {
     /* Ground */
     --vf-canvas:      #f6f0e2;   /* warm linen — the page background */
     --vf-canvas-deep: #ede3cd;   /* card/section ground, one shade down */
     --vf-paper:       #fffdf7;   /* near-white, for content on top of canvas */

     /* Ink */
     --vf-ink:         #2b271e;  /* body text — warm near-black, never pure #000 */
     --vf-ink-soft:    #5a5140;  /* secondary text */
     --vf-ink-faint:   #8c8267;  /* tertiary / captions */

     /* Accent — cypress gold (Van Gogh) */
     --vf-gold:        #c8912f;
     --vf-gold-hi:     #e0ac4c;
     --vf-gold-deep:   #9c6a1c;

     /* Accent — water-garden teal (Monet) */
     --vf-teal:        #4c7d80;
     --vf-teal-hi:     #6ea0a2;
     --vf-teal-deep:   #345759;

     /* Accent — sky/hydrangea blue, used sparingly */
     --vf-blue:        #4a6a91;

     /* Functional */
     --vf-green:       #3f8b5c;  /* iOS-style affirmative check */
     --vf-line:        rgba(43, 39, 30, 0.14);   /* hairline borders on canvas */
     --vf-line-soft:    rgba(43, 39, 30, 0.08);
     --vf-shadow:      0 1.25rem 3rem rgba(43, 39, 30, 0.16);
     --vf-shadow-sm:   0 0.5rem 1.5rem rgba(43, 39, 30, 0.12);

     /* Type */
     --vf-display: "Cormorant Garamond", "Fraunces", Georgia, "Times New Roman", serif;
     --vf-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
     background: var(--vf-canvas);
     color: var(--vf-ink);
     font-family: var(--vf-sans);
     font-size: 1.05rem;
     line-height: 1.65;
     -webkit-font-smoothing: antialiased;
     /* Faint canvas-weave texture rather than bartender's noise-grain —
        a soft diagonal crosshatch, barely visible, evoking linen. */
     background-image:
          repeating-linear-gradient(45deg, rgba(43,39,30,0.015) 0, rgba(43,39,30,0.015) 1px, transparent 1px, transparent 5px),
          repeating-linear-gradient(-45deg, rgba(43,39,30,0.015) 0, rgba(43,39,30,0.015) 1px, transparent 1px, transparent 5px);
}

a { color: var(--vf-teal-deep); text-decoration: none; }
a:hover { color: var(--vf-gold-deep); }
/* Inline text links (body copy, footer fine print) keep an underline for
   non-color-dependent recognition -- nav links, buttons, and badges never
   do, matching bartender.live/expedition's actual convention. */
p a:not(.vbf-btn):not(.vbf-tf-btn):not(.vbf-badge__link) {
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 0.15em;
}

h1, h2, h3, h4, .vbf-display {
     font-family: var(--vf-display);
     font-weight: 600;
     color: var(--vf-ink);
     letter-spacing: -0.01em;
}

.vbf-kicker {
     display: inline-flex;
     align-items: center;
     gap: 0.6em;
     font-family: var(--vf-sans);
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--vf-teal-deep);
     margin-bottom: 1rem;
}
.vbf-kicker::before {
     content: "";
     display: inline-block;
     width: 1.6rem;
     height: 1px;
     background: var(--vf-gold);
}

.vbf-lead {
     font-size: 1.2rem;
     color: var(--vf-ink-soft);
     max-width: 42rem;
}

/*-----------------------------------------------------
     Buttons — pill shape like the sibling themes, but a
     warm gold gradient in place of bartender's amber, and
     no beveled-glass inset (that read as "app UI chrome";
     this site wants to read as printed gallery material).
-----------------------------------------------------*/
.vbf-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.55rem;
     padding: 0.85rem 1.75rem;
     border-radius: 999px;
     font-weight: 600;
     font-size: 1rem;
     border: 1px solid transparent;
     transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vbf-btn:hover { transform: translateY(-1px); }
.vbf-btn--small { padding: 0.45rem 1.15rem; font-size: 0.9rem; gap: 0.4rem; }

.vbf-btn--gold {
     background: linear-gradient(180deg, var(--vf-gold-hi), var(--vf-gold));
     color: #2b1c05;
     box-shadow: var(--vf-shadow-sm);
}
.vbf-btn--gold:hover { color: #2b1c05; box-shadow: var(--vf-shadow); }

.vbf-btn--outline {
     background: transparent;
     border-color: var(--vf-ink);
     color: var(--vf-ink);
}
.vbf-btn--outline:hover { color: var(--vf-ink); border-color: var(--vf-gold-deep); background: rgba(200,145,47,0.08); }

/*-----------------------------------------------------
     App Store / TestFlight badge — partials/badge.php
-----------------------------------------------------*/
.vbf-badge { margin: 1.5rem 0 0; }
.vbf-badge__link { display: inline-block; line-height: 0; }
.vbf-badge__link img { display: block; height: 50px; width: auto; }
.vbf-badge__note {
     display: block;
     margin-top: 0.5rem;
     font-size: 0.85rem;
     color: var(--vf-ink-faint);
}
.vbf-badge--noted { margin-bottom: 0.5rem; }

.vbf-tf-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.6rem;
     padding: 0.7rem 1.4rem;
     border-radius: 999px;
     background: var(--vf-ink);
     color: var(--vf-paper);
     font-weight: 600;
}
.vbf-tf-btn:hover { color: var(--vf-paper); background: var(--vf-teal-deep); }
.vbf-tf-btn i { font-size: 1.1rem; }

/*-----------------------------------------------------
     Phone frame — partials/phone.php. A realistic dark
     device bezel (matching the sibling themes' actual
     technique -- a solid near-black border at the real
     iPhone corner radius, not a decorative frame), with
     a thin gold outline as the one nod to "gallery" rather
     than "product shot."
-----------------------------------------------------*/
.vbf-phone {
     position: relative;
     margin: 0 auto;
     max-width: 300px;
}
.vbf-phone__frame {
     border-radius: clamp(2rem, 9vw, 2.6rem);
     border: 11px solid #221c12;
     outline: 1px solid rgba(200,145,47,0.35);
     outline-offset: -1px;
     overflow: hidden;
     background: #221c12;
     box-shadow: 0 24px 60px rgba(43,39,30,0.45), 0 6px 18px rgba(200,145,47,0.12);
}
.vbf-phone__screen {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 1290 / 2796;
}
.vbf-phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vbf-phone__caption {
     text-align: center;
     margin-top: 1rem;
     font-family: var(--vf-display);
     font-style: italic;
     color: var(--vf-ink-soft);
}

/*-----------------------------------------------------
     "Mac window" mockup — no real macOS screenshot exists
     yet, so this is an honest lightweight chrome (title bar
     + traffic lights) around a real screenshot, not a claim
     of a literal Mac capture.
-----------------------------------------------------*/
.vbf-macwindow {
     border-radius: 0.75rem;
     overflow: hidden;
     background: #efe9da;
     box-shadow: var(--vf-shadow);
     border: 1px solid var(--vf-line);
}
.vbf-macwindow__bar {
     display: flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0.65rem 0.9rem;
     background: #e2d9c2;
     border-bottom: 1px solid var(--vf-line);
}
.vbf-macwindow__dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; }
.vbf-macwindow__dot--red { background: #e0645b; }
.vbf-macwindow__dot--yellow { background: #e0b054; }
.vbf-macwindow__dot--green { background: #63b568; }
.vbf-macwindow__body img { display: block; width: 100%; }

/*-----------------------------------------------------
     Hero
-----------------------------------------------------*/
.vbf-hero {
     position: relative;
     padding: 6.5rem 0 5rem;
     overflow: hidden;
}
.vbf-hero__bg {
     position: absolute;
     inset: 0;
     /* Directional wash, not a uniform veil: opaque canvas behind the
        text column so type stays legible, fading to nearly clear over
        the painting on the right so it reads at full richness --
        matching how bartender.live darkens only behind its text and
        lets the photo breathe everywhere else. */
     background-image:
          linear-gradient(100deg, rgba(246,240,226,0.96) 0%, rgba(246,240,226,0.9) 34%, rgba(246,240,226,0.45) 58%, rgba(246,240,226,0.08) 80%),
          linear-gradient(180deg, rgba(246,240,226,0.05) 0%, rgba(246,240,226,0.05) 55%, var(--vf-canvas) 100%),
          var(--vbf-hero-image, none);
     background-size: cover;
     background-position: center 30%;
     z-index: 0;
}
.vbf-hero > .container-xl { position: relative; z-index: 1; }
.vbf-hero h1 {
     font-size: clamp(2.4rem, 5vw, 3.5rem);
     line-height: 1.08;
     margin-bottom: 1.1rem;
     text-shadow: 0 2px 24px rgba(246,240,226,0.8);
}
.vbf-hero .vbf-lead { text-shadow: 0 1px 16px rgba(246,240,226,0.7); }
.vbf-hero .vbf-lead + .vbf-lead { margin-top: 0.75rem; }

.vbf-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.vbf-chip {
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
     padding: 0.4rem 0.9rem;
     border-radius: 999px;
     background: var(--vf-paper);
     border: 1px solid var(--vf-line);
     font-size: 0.85rem;
     color: var(--vf-ink-soft);
}
.vbf-chip i { color: var(--vf-gold-deep); }

/*-----------------------------------------------------
     Quote / toast — a real Van Gogh line, not app copy
-----------------------------------------------------*/
.vbf-quote { padding: 3.5rem 0; text-align: center; }
.vbf-quote__mark {
     display: block;
     width: 2.5rem;
     height: 1px;
     background: var(--vf-gold);
     margin: 0 auto 1.5rem;
}
.vbf-quote blockquote {
     font-family: var(--vf-display);
     font-style: italic;
     font-size: clamp(1.4rem, 3vw, 1.9rem);
     max-width: 42rem;
     margin: 0 auto 1rem;
     color: var(--vf-ink);
}
.vbf-quote cite {
     font-style: normal;
     font-size: 0.85rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--vf-ink-faint);
}

/*-----------------------------------------------------
     3-step "how it works"
-----------------------------------------------------*/
.vbf-steps { padding: 4rem 0; }
.vbf-step {
     background: var(--vf-paper);
     border: 1px solid var(--vf-line);
     border-radius: 1rem;
     padding: 2rem 1.75rem;
     height: 100%;
     box-shadow: var(--vf-shadow-sm);
}
.vbf-step__icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 3.25rem;
     height: 3.25rem;
     border-radius: 50%;
     background: linear-gradient(155deg, var(--vf-teal-hi), var(--vf-teal-deep));
     color: #fff;
     font-size: 1.3rem;
     margin-bottom: 1.25rem;
}
.vbf-step h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.vbf-step p { color: var(--vf-ink-soft); margin: 0; }

/*-----------------------------------------------------
     Marquee — scrolling museum names, purely atmospheric
-----------------------------------------------------*/
.vbf-marquee {
     padding: 1.5rem 0;
     background: var(--vf-ink);
     overflow: hidden;
     -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
     mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vbf-marquee__track {
     display: flex;
     width: max-content;
     animation: vbf-scroll 38s linear infinite;
}
.vbf-marquee__item {
     display: flex;
     align-items: center;
     gap: 0.9rem;
     padding: 0 2.25rem;
     font-family: var(--vf-display);
     font-size: 1.3rem;
     color: var(--vf-canvas);
     white-space: nowrap;
}
.vbf-marquee__item i { color: var(--vf-gold); font-size: 0.6rem; }
@keyframes vbf-scroll {
     from { transform: translateX(0); }
     to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
     .vbf-marquee__track { animation: none; }
}

/*-----------------------------------------------------
     Alternating feature blocks
-----------------------------------------------------*/
.vbf-feature { padding: 5rem 0; }
.vbf-feature h2 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); margin-bottom: 1rem; }
.vbf-feature p { color: var(--vf-ink-soft); }
.vbf-panel {
     background: rgba(255, 253, 247, 0.72);
     backdrop-filter: blur(6px);
     border: 1px solid var(--vf-line);
     border-radius: 1.25rem;
     padding: 2.25rem;
     box-shadow: var(--vf-shadow-sm);
}
.vbf-feature-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.vbf-feature-list li {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
     margin-bottom: 0.85rem;
     color: var(--vf-ink-soft);
}
.vbf-feature-list i { color: var(--vf-green); margin-top: 0.3rem; }

/*-----------------------------------------------------
     Trust / policy band
-----------------------------------------------------*/
.vbf-house {
     padding: 4.5rem 0;
     background: var(--vf-canvas-deep);
     border-top: 1px solid var(--vf-line);
     border-bottom: 1px solid var(--vf-line);
}
.vbf-house h2 { font-size: clamp(1.8rem, 3vw, 2.25rem); }
.vbf-house-card {
     background: var(--vf-paper);
     border: 1px solid var(--vf-line);
     border-radius: 1rem;
     padding: 1.75rem 2rem;
     box-shadow: var(--vf-shadow-sm);
}
.vbf-house-card ul { list-style: none; padding: 0; margin: 0; }
.vbf-house-card li {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.6rem 0;
     border-bottom: 1px dashed var(--vf-line);
     color: var(--vf-ink);
}
.vbf-house-card li:last-child { border-bottom: none; }
.vbf-house-card i { color: var(--vf-green); width: 1.1rem; }

/*-----------------------------------------------------
     Closing CTA
-----------------------------------------------------*/
.vbf-cta { padding: 5.5rem 0; text-align: center; }
.vbf-cta__icon {
     width: 4.5rem;
     height: 4.5rem;
     border-radius: 1.1rem;
     margin: 0 auto 1.5rem;
     box-shadow: var(--vf-shadow-sm);
}
.vbf-cta h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
.vbf-cta .vbf-lead { margin: 0 auto; }
.vbf-cta__signoff {
     margin-top: 2rem;
     font-family: var(--vf-display);
     font-style: italic;
     font-size: 1.1rem;
     color: var(--vf-ink-soft);
}

/*-----------------------------------------------------
     Header / nav
-----------------------------------------------------*/
.vbf-header {
     position: sticky;
     top: 0;
     z-index: 40;
     background:
          linear-gradient(180deg, rgba(255,253,247,0.9) 0%, rgba(237,227,205,0.86) 100%),
          var(--vf-canvas);
     backdrop-filter: blur(14px) saturate(140%);
     border-bottom: 1px solid rgba(200, 145, 47, 0.28);
     box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 24px rgba(43,39,30,0.07);
}
.vbf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0; }
.vbf-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.vbf-brand:hover { color: inherit; }
.vbf-brand__mark {
     width: 44px;
     height: 44px;
     border-radius: 11px;
     outline: 1px solid rgba(200, 145, 47, 0.45);
     outline-offset: -1px;
     box-shadow: var(--vf-shadow-sm);
}
.vbf-brand__words { display: flex; flex-direction: column; line-height: 1.05; }
.vbf-brand__name { font-family: var(--vf-display); font-weight: 600; font-size: 1.32rem; color: var(--vf-ink); letter-spacing: 0.01em; }
.vbf-brand__sub { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--vf-teal-deep); }
.vbf-nav__list { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.vbf-nav__link { color: var(--vf-ink-soft); font-weight: 500; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.vbf-nav__link:hover { color: var(--vf-gold-deep); border-bottom-color: var(--vf-gold); }

/*-----------------------------------------------------
     Footer
-----------------------------------------------------*/
.vbf-footer { padding: 3.5rem 0 2.5rem; background: var(--vf-ink); color: rgba(246,240,226,0.85); }
.vbf-footer a { color: rgba(246,240,226,0.85); }
.vbf-footer a:hover { color: var(--vf-gold-hi); }
.vbf-footer h6 { font-family: var(--vf-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246,240,226,0.55); margin-bottom: 1rem; }
.vbf-footer__nav { list-style: none; padding: 0; margin: 0; }
.vbf-footer__nav li { margin-bottom: 0.6rem; }
.vbf-footer__fine { font-size: 0.85rem; color: rgba(246,240,226,0.55); }
.vbf-footer__credit { font-size: 0.78rem; color: rgba(246,240,226,0.4); margin-top: 1rem; }

/*-----------------------------------------------------
     Generic content page (page.php)
-----------------------------------------------------*/
.vbf-page { padding: 5rem 0; }
.vbf-page h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 1.5rem; }
.vbf-page .entry-content { max-width: 42rem; }
.vbf-page .entry-content p { color: var(--vf-ink-soft); }