/* ============================================================ BARK SIDE OF THE GROOM — polish styles *** GENERATED *** Edit gen_css.py (icons) or this file directly, then re-upload. ALL custom visual styling for the site lives in THIS file. Loaded by functions.php on the live site AND in the editor. Palette slugs live in theme.json (navy/blue/sky/foam/mist/ink). MAP: 1 GLOBAL 2 HEADER 3 HERO+BUBBLES 4 WHY+VIDEO 5 CLIENTS 6 SERVICES/PRICING 7 AREAS 8 CONTACT 9 FOOTER ============================================================ */ :root{ --bk-navy:#002b5c; --bk-blue:#3498db; --bk-sky:#87ceeb; --bk-foam:#e0f7fa; --bk-mist:#e0e4e8; --bk-ink:#3d5573; --bk-line:#dbe6ef; --bk-foam-2:#eef9fb; --bk-shadow:0 10px 30px -12px rgba(0,43,92,.22); --bk-shadow-sm:0 4px 14px -8px rgba(0,43,92,.30); --bk-radius:18px; --bk-radius-lg:26px; } /* 1. GLOBAL -------------------------------------------------- */ body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ text-wrap:balance; letter-spacing:-0.01em; } /* Smooth-scroll to the #section anchors instead of teleporting. scroll-margin keeps the sticky header from covering the heading you just jumped to. (bubbles.js also handles closing the mobile menu first.) */ html{ scroll-behavior:smooth; } section[id]{ scroll-margin-top:110px; } @media (max-width:781px){ section[id]{ scroll-margin-top:80px; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } /* Don't paint a focus ring on mouse/touch -- only for keyboard users. */ a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none; } h2{ font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.15; } h3{ font-size:1.2rem; } /* --- WIDTH OVERRIDE (important!) --------------------------------- Twenty Twenty-Four constrains inner blocks to its narrow content width (theme.json contentSize). Our sections need to be wide, so .bk-wrap escapes that cap. !important is required because WP's layout rule is generated per-block with matching specificity. If sections ever look squeezed into a narrow column, look HERE. */ .wp-block-group.bk-wrap, .wp-block-columns.bk-wrap{ max-width:1140px !important; width:100%; margin-left:auto; margin-right:auto; } /* WP's constrained layout auto-centers any child narrower than the container (that's why lead paragraphs drifted to the middle while headings stayed left). Force section content flush left. !important is needed: WP's own rule has equal specificity. The hero IS centered on purpose and has no .bk-wrap. */ .wp-block-group.bk-wrap > *, .wp-block-columns.bk-wrap > *{ margin-left:0 !important; margin-right:auto !important; } /* The main wrapper must not add its own cap or padding. */ .bk-main{ max-width:none; } /* Section paddings are set per-section in the page itself; don't let TT4's global padding double up on our full-width sections. */ .bk-main > .alignfull{ margin-left:0; margin-right:0; } .bk-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bk-blue); margin-bottom:.4rem; } .bk-eyebrow::before{ content:""; width:1.3em; height:1.3em; flex:none; background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nIzM0OThkYic+PHBhdGggZD0nTTEyIDEzLjVjLTIuMiAwLTQgMS42LTQgMy42IDAgMS41IDEuMiAyLjQgMi43IDIuNC41IDAgLjktLjEgMS4zLS4zLjQuMi44LjMgMS4zLjMgMS41IDAgMi43LS45IDIuNy0yLjQgMC0yLTEuOC0zLjYtNC0zLjZ6TTYuMiAxMS42Yy0xIDAtMS44LjktMS44IDJzLjggMiAxLjggMiAxLjgtLjkgMS44LTItLjgtMi0xLjgtMnptMTEuNiAwYy0xIDAtMS44LjktMS44IDJzLjggMiAxLjggMiAxLjgtLjkgMS44LTItLjgtMi0xLjgtMnpNOS4xIDkuNmMuOSAwIDEuNi0uOSAxLjYtMnMtLjctMi0xLjYtMi0xLjYuOS0xLjYgMiAuNyAyIDEuNiAyem01LjggMGMuOSAwIDEuNi0uOSAxLjYtMnMtLjctMi0xLjYtMi0xLjYuOS0xLjYgMiAuNyAyIDEuNiAyeicvPjwvc3ZnPg==") center/contain no-repeat; } .bk-lead{ font-size:clamp(1.05rem,2vw,1.2rem); color:var(--bk-ink); max-width:62ch; } /* 2. HEADER -------------------------------------------------- */ /* STICKY GOTCHA: WordPress wraps our header template part in ANOTHER
element. position:sticky only works against the scrolling ancestor, so putting it on the inner .bk-header did nothing (it was stuck inside a box its own height). Sticky must go on the OUTER wrapper; .bk-header keeps the looks. Don't "fix" this back. */ .wp-site-blocks > header{ position:sticky; top:0; z-index:100; } .bk-header{ position:relative; background:rgba(255,255,255,.85); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--bk-mist); padding-top:.4rem; padding-bottom:.4rem; } /* Kill the 1.2rem WP puts between top-level blocks, which showed up as a white strip between the header and the hero. */ .bk-main{ margin-block-start:0 !important; } .wp-site-blocks{ padding-top:0 !important; } .bk-header-inner{ align-items:center; gap:.75rem; } .bk-header .wp-block-site-logo img{ height:66px; width:auto; } .bk-header-right{ gap:clamp(.6rem,2vw,1.5rem); align-items:center; } .bk-nav a{ color:var(--bk-navy); font-weight:600; text-decoration:none; } .bk-nav a:hover{ color:var(--bk-blue); } .bk-ig a{ color:var(--bk-navy); } .bk-ig a:hover{ color:var(--bk-blue); } .bk-call .wp-block-button__link{ box-shadow:var(--bk-shadow-sm); white-space:nowrap; } /* Desktop order: logo | nav | instagram + call */ .bk-brand{ order:1; } .bk-nav{ order:2; margin-left:auto; } .bk-header-right{ order:3; } /* 3. HERO + BUBBLES ----------------------------------------- */ .bk-hero{ position:relative; overflow:hidden; } /* SQUISHED-BUBBLES GOTCHA: the hero is a constrained-layout block, so WP applies `max-width: ` + auto margins to EVERY child -- including our canvas. The canvas buffer stayed full width while the element got clamped to 820px, squeezing the circles into tall ellipses. max-width:none is what keeps them round. Don't remove it. (Also don't set width/height:100%; bubbles.js sizes the canvas itself.) */ .bk-hero > .bk-bubbles{ position:absolute; top:0; left:0; pointer-events:none; z-index:0; max-width:none !important; margin:0 !important; } .bk-hero > :not(.bk-bubbles){ position:relative; z-index:1; } .bk-hero-logo{ margin-bottom:.2rem !important; } .bk-hero-logo img{ filter:drop-shadow(0 12px 26px rgba(0,43,92,.18)); } .bk-tagline{ font-size:clamp(2.2rem,6vw,3.4rem); color:var(--bk-navy); margin-top:.2rem; margin-bottom:.6rem; } .bk-hero .bk-lead{ margin-left:auto; margin-right:auto; } .bk-hero-serving{ margin-top:1rem; color:var(--bk-ink); font-size:.95rem; opacity:.85; } .bk-btn-ghost .wp-block-button__link{ background:transparent!important; color:var(--bk-blue)!important; border:2px solid var(--bk-blue)!important; } .bk-btn-ghost .wp-block-button__link:hover{ background:var(--bk-blue)!important; color:#fff!important; } /* 4. WHY MOBILE + VIDEO -------------------------------------- */ /* THE VIDEO IS PORTRAIT. It was filmed on a phone held upright (the source file is 1280x720 with a -90 rotation flag, i.e. really 720x1280). Forcing it into a landscape 16:9 frame cropped it to death. So: a 9:16 frame, capped narrow like a reel, centered. Don't "fix" this to 16:9. The cap also stops it overflowing the viewport on phones. */ /* The salon pair: branded trailer (outside) next to the video (inside). They're forced to the same height so it reads as one composition. */ .bk-salon{ gap:1.25rem; align-items:stretch; } .bk-salon > .wp-block-column{ display:flex; } .bk-salon .bk-trailer, .bk-salon .bk-video{ flex:1; margin:0 !important; } .bk-trailer{ position:relative; border-radius:var(--bk-radius-lg); overflow:hidden; box-shadow:var(--bk-shadow); } .bk-trailer img{ width:100%; height:100%; object-fit:cover; display:block; } .bk-media-cap{ position:absolute; left:14px; bottom:12px; margin:0; color:#fff !important; font-weight:700; font-size:.92rem; padding:.5rem .95rem; border-radius:999px; background:rgba(0,43,92,.55); backdrop-filter:blur(4px); } .bk-video{ box-shadow:var(--bk-shadow); overflow:hidden; aspect-ratio:9/16 !important; min-height:0 !important; height:auto !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; } /* On phones the pair stacks; cap the video so it isn't an endless tall reel. */ @media (max-width:781px){ .bk-salon{ gap:1rem; } .bk-salon > .wp-block-column{ display:block; } .bk-trailer{ aspect-ratio:4/3; } .bk-video{ max-width:min(300px, 78vw) !important; } } .bk-video video{ width:100%; height:100%; object-fit:cover; } /* Poster shows through when the video hasn't loaded (phones). */ .bk-video video[data-src]{ background:#0c2340 center/cover no-repeat; } .bk-video .wp-block-cover__inner-container{ align-self:flex-end; width:100%; text-align:center; padding-bottom:.4rem; } .bk-video-cap{ display:inline-block; margin:0; color:#fff; font-weight:700; font-size:.92rem; background:rgba(0,43,92,.55); backdrop-filter:blur(4px); padding:.5rem .95rem; border-radius:999px; } /* NOTE: there is deliberately NO mobile background-image hack here. The