/* ============================================================================= BOOKVATIO DARK - page stylesheet for /dark-spike/ (page 54) Scoped to the dark pages only, so nothing here can reach the live paper design. The scene markup carries inline styles, so overriding it needs !important; that is a property of the source, not a shortcut. ========================================================================== */ /* Scoped to BOTH dark pages: 54 is the drawn reference at /dark-spike/, 55 is the photo variant at /dark-photo/. :is() keeps this to one token per rule. */ body:is(.page-id-54,.page-id-55,.page-id-56){ background-color:#16130f!important; /* the site-wide parity layer paints */ background-image:none!important; /* paper + grid on body; not here */ color:#f3f2f2;margin:0; font-family:'Lora',Georgia,serif; --space-6:27.6px; --color-accent:#b68235; --color-accent-400:#e1ad66; } body:is(.page-id-54,.page-id-55,.page-id-56) h1, body:is(.page-id-54,.page-id-55,.page-id-56) h2, body:is(.page-id-54,.page-id-55,.page-id-56) h3{font-family:'Cormorant Garamond',Georgia,serif} /* The source clips on BOTH html and body. Only clipping body leaves html as the scroll container, so the scenes' off-stage cards - parked out at x 4000+ while they wait to slide in - still widen the document. Measured 1577px against a 1440px viewport before this was added. */ html:has(body:is(.page-id-54,.page-id-55,.page-id-56)), body:is(.page-id-54,.page-id-55,.page-id-56){overflow-x:clip} /* Belt and braces for browsers without :has - every scrubbed scene clips its own overflow, which is where all of it comes from. */ body:is(.page-id-54,.page-id-55,.page-id-56) section[data-scene]{overflow-x:clip} /* Elementor wraps every widget in containers with kit padding and a max width. The scenes are full-bleed by design, so the wrappers get out of the way. */ body:is(.page-id-54,.page-id-55,.page-id-56) .elementor-element, body:is(.page-id-54,.page-id-55,.page-id-56) .e-con, body:is(.page-id-54,.page-id-55,.page-id-56) .elementor-widget-container{ max-width:none!important;width:100%!important;padding:0!important;margin:0!important} /* --------------------------------------------------------------------------- MOBILE: the source's own collision, fixed. In the source the sticky pane is a 100vh box with the header absolutely positioned at top:clamp(90px,13vh,150px) and the card stage centred in the same box. On a phone the eyebrow wraps to three lines and the headline to two, the header grows to ~305px tall, and the card starts at ~176px - they overlap by ~130px. Measured identically in the source file and in this port, within 5px, so it is a design defect rather than a porting error. Below 900px - the same breakpoint the engine uses to damp motion - the pane stops pretending to be a centred stage and becomes an ordinary column: header in normal flow, stage taking whatever is left. --------------------------------------------------------------------------- */ @media (max-width:900px){ body:is(.page-id-54,.page-id-55,.page-id-56) #journey > div{ justify-content:flex-start!important; padding:76px clamp(16px,5vw,24px) 56px!important} /* header block out of absolute positioning */ body:is(.page-id-54,.page-id-55,.page-id-56) #journey > div > div:nth-child(1){ position:static!important;top:auto!important;left:auto!important;right:auto!important; flex-direction:column!important;align-items:stretch!important; gap:12px!important;flex:0 0 auto!important;margin-bottom:18px!important} /* step markers: a wrapped row under the headline, not a right-hand column */ body:is(.page-id-54,.page-id-55,.page-id-56) #journey > div > div:nth-child(1) > div:nth-child(2){ flex-direction:row!important;flex-wrap:wrap!important; align-items:center!important;justify-content:flex-start!important; gap:6px!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey [data-marker]{ font-size:9px!important;padding:5px 8px!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey h2{font-size:clamp(23px,7vw,32px)!important} /* the stage takes the remaining height and centres the card inside it */ body:is(.page-id-54,.page-id-55,.page-id-56) #journey > div > div:nth-child(2){ flex:1 1 auto!important;height:auto!important;min-height:0!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey [data-step]{width:min(560px,92vw)!important} } /* Short viewports (SE-class, and landscape phones) need the card itself to give way - step 03 carries a month grid and a slot list and is the tallest. */ @media (max-width:900px) and (max-height:720px){ body:is(.page-id-54,.page-id-55,.page-id-56) #journey > div{padding-top:62px!important;padding-bottom:44px!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey [data-step]{transform-origin:center center} body:is(.page-id-54,.page-id-55,.page-id-56) #journey [data-step] > div{padding:16px!important} } /* --------------------------------------------------------------------------- NAV on narrow screens. The source's nav has no mobile treatment at all - six section links plus a CTA in one flex row, which at 390px pushed everything past the right edge and got clipped. This is a scroll-experience page, not a documentation site, so it does not earn a hamburger: the section links step aside below 900px and the wordmark and the Get Pro button - the only conversion path in the bar - stay. Get Pro points at #pricing, so the primary journey survives intact. --------------------------------------------------------------------------- */ @media (max-width:900px){ body:is(.page-id-54,.page-id-55,.page-id-56) #bv-nav-links{display:none!important} body:is(.page-id-54,.page-id-55,.page-id-56) nav{padding:14px clamp(16px,4vw,24px)!important} } /* =========================================================================== MOBILE FIXES FOR THE SOURCE'S OWN DEFECTS Measured against bookvatio-standalone.html at 390px, section by section. The hero regression was mine (the omitted layout() re-flow, now restored, back to parity at 2 elements / 28px). The three below are the source's: it breaks the same way in the original file, so these are repairs, not port corrections. Desktop is untouched in every case. =========================================================================== */ /* --- 07 Statement ----------------------------------------------------------- Three lines set white-space:nowrap at clamp(60px,15vw,240px). On a 390px screen 15vw is 58px, so the 60px FLOOR wins and "YOUR BOOKINGS." renders ~400px wide behind an 85px indent - cut off mid-word. The bleed is deliberate on desktop and nonsense at this width, so the floor comes down and the indent with it. Still bleeds a little; no longer amputated. */ @media (max-width:900px){ body:is(.page-id-54,.page-id-55,.page-id-56) section[data-screen-label="07 Statement"] > div{ font-size:clamp(30px,10.5vw,240px)!important; padding-left:clamp(14px,4vw,84px)!important; /* line-height:0.9 makes consecutive line boxes touch exactly, so the three lines start with ZERO gap between them. The engine caps parallax travel at 34% of an element's height on narrow, but two neighbours drifting toward each other still close 2x that - which is why "YOUR BOOKINGS." printed on top of "YOUR BUSINESS.". The cap bounds the drift; this gives it somewhere to happen. */ margin-bottom:38px!important} } /* --- 03 WordPress ----------------------------------------------------------- Two 3D-rotated planes sit absolutely inside a 100vh sticky pane and land on top of the headline. The engine rewrites their transform and opacity every frame, so a stylesheet only wins with !important - which it does, since those are inline non-important styles. Below 900px the planes stop being a stage and become two stacked cards, and the pane becomes an ordinary column. */ @media (max-width:900px){ body:is(.page-id-54,.page-id-55,.page-id-56) #wp > div{ align-items:flex-start!important; padding:96px clamp(16px,5vw,24px) 48px!important; flex-direction:column!important;overflow:visible!important} body:is(.page-id-54,.page-id-55,.page-id-56) #wp > div > div:nth-child(1){ position:static!important;top:auto!important;left:auto!important; margin-bottom:22px!important;pointer-events:auto!important} body:is(.page-id-54,.page-id-55,.page-id-56) #wp > div > div:nth-child(2){ width:100%!important;height:auto!important;margin-top:0!important; flex-direction:column!important;gap:16px!important} body:is(.page-id-54,.page-id-55,.page-id-56) #wp [data-wp-site], body:is(.page-id-54,.page-id-55,.page-id-56) #wp [data-wp-plug]{ position:relative!important;transform:none!important;opacity:1!important; left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; width:100%!important;max-width:420px!important;margin:0 auto!important} /* the connector line only reads between two side-by-side planes */ body:is(.page-id-54,.page-id-55,.page-id-56) #wp svg{display:none!important} } /* --- Final CTA -------------------------------------------------------------- Six absolutely positioned labels (CALENDAR, SERVICES, STAFF, ...) converge on the headline. At desktop widths they land in the margins; at 390px the margins do not exist and they settle straight over the headline and both buttons - "DOWNLOAD FREE PLUGIN" ends up underneath CUSTOMERS. They are decoration, and decoration does not get to cover the only CTA on the screen. */ @media (max-width:900px){ body:is(.page-id-54,.page-id-55,.page-id-56) #get [data-conv]{display:none!important} body:is(.page-id-54,.page-id-55,.page-id-56) #get > div{padding:0 clamp(16px,5vw,24px)!important} } /* --- 03 WordPress, second pass ----------------------------------------------- The first pass turned the pane into a column but left it `position:sticky; height:100vh` with `overflow:visible`. Stacked, its content is far taller than 100vh, so it escaped the pane and painted over the tail of the journey scene above and the top of "What it fixes" below. Measured: the only section on the page with a bleed - 6 elements outside its own box, 46px above it. The animation is already neutralised here (planes are transform:none on narrow), so the scene has nothing left to scrub. It becomes an ordinary flow section: no stick, no 340vh of scroll runway, height from its content. */ @media (max-width:900px){ body:is(.page-id-54,.page-id-55,.page-id-56) #wp{height:auto!important} body:is(.page-id-54,.page-id-55,.page-id-56) #wp > div{ position:static!important;height:auto!important;min-height:0!important} } /* --- 01 Engine, admin panel -------------------------------------------------- The panel header is one non-wrapping flex row: wordmark on the left, a three-tab group on the right. At 390px the tabs end at x453 - 63px past the screen - and the card's own overflow:hidden then amputates the status column of every booking row. Same 63px in the source file. Selectors match on inline-style substrings because the mock carries no classes at all. Normally fragile; here the markup is a frozen file in uploads/bookvatio/src/, so the handles cannot drift underneath us. */ @media (max-width:900px){ /* the panel card itself must not exceed the column it sits in */ body:is(.page-id-54,.page-id-55,.page-id-56) #bv-engine-stage [style*="box-shadow:0 60px 130px"]{ max-width:100%!important} /* header row: let the tab group drop under the wordmark */ body:is(.page-id-54,.page-id-55,.page-id-56) #bv-engine-stage [style*="justify-content:space-between"]{ flex-wrap:wrap!important;row-gap:12px!important} /* and let the tabs themselves wrap rather than push the row wide */ body:is(.page-id-54,.page-id-55,.page-id-56) #bv-engine-stage [style*="justify-content:space-between"] > div{ flex-wrap:wrap!important} } /* The booking rows are `grid-template-columns:2fr 1.4fr 1fr 1fr`. Inside a 315px card that leaves the STATUS track about 44px, so an 83px "confirmed" chip is clipped by the card's own overflow:hidden. Give status an auto track sized to its content and shrink the chip; the three text columns wrap instead. */ @media (max-width:900px){ /* Four columns do not fit a phone, and tuning the track sizes only moved the clipping around: each row is its own grid, the status chip is a direct grid item with justify-self:end, and an `auto` track still resolved to ~48px against a 63px chip. Two columns instead, letting the four cells auto-place onto two lines: Olivia Martinez Gel Manicure - E45 11 Sep - 10:00 [confirmed] All four fields survive, nothing is cut, and the chip finally has a track sized to it. Verified 320px through 430px. */ body:is(.page-id-54,.page-id-55,.page-id-56) #bv-engine-stage [style*="grid-template-columns:2fr 1.4fr 1fr 1fr"]{ grid-template-columns:1fr auto!important; column-gap:12px!important;row-gap:6px!important;align-items:center!important} /* the CLIENT/SERVICE/WHEN/STATUS header cannot label a two-line row, so it goes */ body:is(.page-id-54,.page-id-55,.page-id-56) #bv-engine-stage [style*="grid-template-columns:2fr 1.4fr 1fr 1fr"][style*="padding-bottom:12px"]{ display:none!important} body:is(.page-id-54,.page-id-55,.page-id-56) #bv-engine-stage [style*="border-radius:999px"]{ font-size:9px!important;padding:4px 9px!important;white-space:nowrap!important} /* the rows sit in 22px of side padding; "confirmed" is the longest chip and needed the last 16px of it to clear the card edge */ body:is(.page-id-54,.page-id-55,.page-id-56) #bv-engine-stage [style*="padding:20px 22px 26px"]{ padding:16px 14px 20px!important} } /* --- Final CTA: dead scroll and chip collisions ------------------------------ Measured: the section runs 3.00 viewports and the headline did not appear until p=0.6, so 1080px at 1440x900 (977px at 1719x814) scrolled past with a blank screen. The engine's fade window moved to (p-0.15)/0.35; the runway comes down here. 170vh still gives the pieces room to converge without asking anyone to scroll through a viewport of nothing first. */ /* !important because the section carries height:300vh as an inline style, and an inline declaration beats a stylesheet rule that does not say otherwise. */ body:is(.page-id-54,.page-id-55,.page-id-56) #get{height:170vh!important} /* The two centre chips sit in the same column as the headline and CTAs. On a 900px-tall window they clear it; on a shorter, wider one - 1719x814 - the CTA row drops far enough that "Confirmation" lands on the buttons. Measured overBtn:true there, false at 900px. Anchored to the pane rather than to the content, so they are nudged clear of the band the content occupies. */ /* Keyed off data-conv, NOT off the style attribute. The engine writes el.style.transform on these chips every frame, and any assignment through the CSSOM makes the browser re-serialise the whole attribute in normalised form - `left: 44%` gains a space and `[style*="left:44%"]` silently stops matching. Verified: el.matches() returned false on the live element while the same selector matched the server-rendered HTML. The style-substring selectors used elsewhere in this file are safe only because the engine never touches those elements. Rule of thumb: never key CSS off the style attribute of anything the engine mutates. */ body:is(.page-id-54,.page-id-55,.page-id-56) #get [data-conv="0,32"]{bottom:5%!important} body:is(.page-id-54,.page-id-55,.page-id-56) #get [data-conv="0,-34"]{top:13%!important} /* Four of the six chips sit in the margins either side of the content; the two centre ones share the column with the headline and the CTAs. On a 900px-tall window there is room for all six. On a short, wide one - 1719x814, a maximised browser on a 1080p screen - there is not: "Confirmation" landed on the buttons and "Bookings" on the headline, and nudging them vertically only traded one collision for the other, because the head block occupies y 100-722 of an 814px pane. Below 900px of height the two centre chips step out. The remaining four still read as a ring, and nothing crowds the only CTA on the page. */ @media (min-width:901px) and (max-height:899px){ body:is(.page-id-54,.page-id-55,.page-id-56) #get [data-conv="0,32"], body:is(.page-id-54,.page-id-55,.page-id-56) #get [data-conv="0,-34"]{display:none!important} } /* On narrow screens the chips are hidden already, which leaves 170vh of runway for a headline that is simply there. No pieces to converge means no reason to scrub: it becomes an ordinary section, same treatment as #wp. */ @media (max-width:900px){ body:is(.page-id-54,.page-id-55,.page-id-56) #get{height:auto!important} body:is(.page-id-54,.page-id-55,.page-id-56) #get > div{ position:static!important;height:auto!important;min-height:0!important; padding:clamp(96px,14vh,160px) clamp(16px,5vw,24px)!important} body:is(.page-id-54,.page-id-55,.page-id-56) #get [data-conv-head]{opacity:1!important;transform:none!important} } /* =========================================================================== PHOTO VARIANT ONLY (/dark-photo/, page 55) Sections that carry a real screenshot instead of a drawn mock. Keyed off the section id, so these rules are inert on the drawn page even though both pages load the same stylesheet. =========================================================================== */ /* Screenshot cards are far taller than drawn ones - step 03 is a 939px calendar against roughly 490px of drawn card - so centring them in the full 100vh pane ran them up under the section header. The stage reserves the header band, and fitSteps() subtracts this padding from the space it measures so the card scales to what is actually free rather than to the whole pane. */ body:is(.page-id-54,.page-id-55,.page-id-56) #journey-photo > div > div:nth-child(2){ box-sizing:border-box; padding-top:clamp(190px,27vh,300px); padding-bottom:clamp(64px,11vh,120px)} @media (max-width:900px){ body:is(.page-id-54,.page-id-55,.page-id-56) #journey-photo > div{ justify-content:flex-start!important; padding:76px clamp(16px,5vw,24px) 56px!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey-photo > div > div:nth-child(1){ position:static!important;top:auto!important;left:auto!important;right:auto!important; flex-direction:column!important;align-items:stretch!important; gap:12px!important;flex:0 0 auto!important;margin-bottom:18px!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey-photo > div > div:nth-child(1) > div:nth-child(2){ flex-direction:row!important;flex-wrap:wrap!important; align-items:center!important;justify-content:flex-start!important;gap:6px!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey-photo [data-marker]{ font-size:9px!important;padding:5px 8px!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey-photo h2{font-size:clamp(23px,7vw,32px)!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey-photo > div > div:nth-child(2){ flex:1 1 auto!important;height:auto!important;min-height:0!important; padding-top:0!important;padding-bottom:0!important} body:is(.page-id-54,.page-id-55,.page-id-56) #journey-photo [data-step]{width:min(560px,94vw)!important} } /* 01 Engine, photo variant: the real dashboard replaces the drawn panel. It is a light screen on a dark page, so it takes the same browser chrome the WordPress section uses. The drawn panel's floating annotation cards are hidden here - they were positioned against regions of a mock that no longer exists. */ body:is(.page-id-55,.page-id-56) #engine .bv-shot-frame{max-width:min(1040px,92vw);margin:0 auto} /* A screenshot dropped into an hole must FILL the box, not size itself from its own aspect ratio. The WordPress mock's slot is a fixed height:clamp(220px,34vh,340px) - 289px at 1440 - and the calendar rendered 433px tall, overflowing it, pushing "Studio Aurelia" out of a card that clips and shoving the whole mock over the section headline. A class rather than a style-substring selector: [data-wp-site] is rewritten by the engine every frame, and anything matched on its serialised style attribute would break the moment the CSSOM normalises it. */ body:is(.page-id-55,.page-id-56) .bv-fill{ width:100%!important;height:100%!important; object-fit:cover;object-position:center top} /* --- 05 Businesses: annotation cards landing on the big words ---------------- Each panel has a large display word (BEAUTY, WELLNESS, HOSPITALITY, SERVICES) under its image, and a small annotation card positioned `bottom:-30px; left:-20px` so it overhangs the image's bottom-left corner. The card is about 115px tall, so it reaches roughly 145px below the image - while the word only clears it by `margin-top:56px`. They collide, and both become hard to read. Measured in the SOURCE file as well as here, at the same four places and nearly identical overlap areas (BEAUTY 10346 vs 9870 px2, WELLNESS 17883 in both), so this is the design's own defect, not something the photo swap introduced. The overhang is a deliberate device and is kept; the word simply moves down far enough to sit clear of it. FIRST ATTEMPT WAS A NO-OP, recorded because the reasoning is the useful part: pushing the word down with margin-top did nothing. The card's offsetParent is the whole panel, which CONTAINS the word - so growing the word grows the panel, `bottom:-30px` follows it down, and the gap never changes. Measured: overlap areas identical before and after, to the pixel. So the card moves instead. Its bottom edge needs to sit 30px below the image (the overhang the design wants) rather than 30px below the panel. Measuring up from the panel's bottom edge: word height, plus its 56px top margin, minus the 30px overhang. The word's height is its font-size at line-height 1, so the whole thing is expressible exactly and stays correct at every width. Keyed off [data-mx] - a data attribute the engine reads but never writes. NOT a style substring: these cards ARE scripted, so their style attribute is re-serialised every frame and any substring match would silently stop working. */ body:is(.page-id-54,.page-id-55,.page-id-56) #verticals [data-mx]{ /* 80px, not 26px: the panel continues about 54px BELOW the word - its own bottom padding - and `bottom` is measured from there, not from the word's baseline. Measured at 1440: containing block bottom y827, word top y707, so the card needs at least 120px to clear it; 146px leaves a 26px gap. */ bottom:calc(80px + clamp(34px,4.6vw,72px))!important; /* The cards also carry left:-20px, hanging into the PREVIOUS panel - which is how BEAUTY and HOSPITALITY were still being covered after the vertical fix: not by their own card, but by their neighbour's. Pulled flush; the card still overhangs its own image's bottom-left corner, which is the device. */ left:0!important} /* The strip's first panel starts under the section headline - measured in the SOURCE too (overlap area 30760 there vs 30510 here), so it is the design's own defect. It was invisible while the slots were empty; filling them with photos made it obvious. The track drops far enough for the headline to clear. Keyed off [data-track], a data attribute the engine reads but never writes - its transform is rewritten every frame, so a style-substring match would die. */ body:is(.page-id-54,.page-id-55,.page-id-56) #verticals [data-track]{ margin-top:clamp(200px,29vh,320px)!important} /* 29vh, not 24vh: at 24vh the panels started at y246 against a headline ending at y268 - still 22px short. And it is not just the first panel: as the rail scrubs, panels 0,1,2,3 each pass beneath the headline in turn, so a partial clearance would only move the problem along the track. */ /* --- 07 Statement, desktop ----------------------------------------------------- The three lines are white-space:nowrap at clamp(60px,15vw,240px) behind staggered indents of roughly 5vw / 22vw / 14vw. The indented middle line runs past the right edge at every desktop width - measured identically in the source, so this is the design's own defect, not the port's: 1920 +181px cut 1440 +389px cut 1200 +325px 1024 +277px The mobile rule below 900px already solved this by lowering the floor; above 900px nothing did. Sizing it from the measurement rather than by eye: the middle line is the binding constraint at every width, its text is about 1500px at the current 216px font, and it sits behind a 22vw indent. Solving indent + text*k <= viewport - 40 for a 40px right gutter gives k around 0.72 at 1440, i.e. 10vw. Capped at 190px so it stops growing on very wide screens, where the fixed 420px indent cap would otherwise start to bite. The bleed is deliberate in this design and is kept - the lines still run generously wide and stay staggered. They just no longer lose their last word. */ @media (min-width:901px){ body:is(.page-id-54,.page-id-55,.page-id-56) section[data-screen-label="07 Statement"] > div{ font-size:clamp(48px,10vw,190px)!important} } /* --- 05 Businesses on a phone ------------------------------------------------- The annotation cards are sized `min(290px,60%)`, which on a 312px panel gives about 190px. That is too narrow for their content: measured 5 separate text nodes wrapping in the Beauty card, and the guest-house card's three-column check-in / check-out / guests row breaks every heading onto two lines ("Check-" / "in"). Widening the card to 88% of the panel gives roughly 275px and lets those rows sit on one line each. It still leaves the image visible around it, which is the point of the overlay. (Their left overhang was already dealt with earlier: in the SOURCE these cards hang 137px into the PREVIOUS panel at this width; `left:0` pulled them flush.) */ @media (max-width:900px){ body:is(.page-id-54,.page-id-55,.page-id-56) #verticals [data-mx]{ width:min(300px,88%)!important} } /* --- Pricing CTAs on a phone -------------------------------------------------- The two cards are flex columns with `margin-top:auto` on the CTA, which pins both buttons to the bottom so they line up when the cards are side by side and equal-height. In a single column there is no free space for `auto` to absorb, so it collapses to zero and the button sits hard against the last paragraph. Below the breakpoint it goes back to a real margin. Targeted by href, which is stable and says what it means, rather than by a style substring. */ /* NOTE: an earlier version of this fix also set margin-top:34px on the CTAs below 900px. Once the margin-bottom rule further down was added the two stacked, giving 62px on a phone against 28px on desktop - more space than desktop, which is backwards. The margin-bottom covers every width on its own, so the media query is gone rather than left to double up. */ /* `margin-top:auto` gives a floor of ZERO on whichever card is the taller one - it has no free space left to absorb. Measured on desktop: Free 0px above its button, Pro 60px. A margin under the content blocks sets the minimum without disturbing the auto that bottom-aligns the shorter card's button. */ body:is(.page-id-54,.page-id-55,.page-id-56) #pricing ul, body:is(.page-id-54,.page-id-55,.page-id-56) #pricing [style*="display:grid;gap:24px"]{ margin-bottom:28px!important}