/* Petra Power — styles for the dynamic layer. Three components, all fed by /api/content: 1. .work — the recent-work gallery, including the drag-to-compare before/after viewer 2. .stats — the counter band (numbers count up once, on scroll) 3. .avail — the live "slots left this month" callout Plus one fed by /api/instagram: 4. .ig — the "See Our Latest Work" Instagram grid Design tokens come from index.html's :root, so this file inherits the page's palette rather than restating it. Loaded after inner-page.css and before site.css, matching the existing cascade order. */ /* ============================================================ RECENT WORK ============================================================ */ .work-bg{background:var(--deep);border-top:1px solid var(--rule);} /* Asymmetric grid: the first project gets a double-width cell, so the section opens on one large image instead of a uniform tile wall. A grid of equal squares is the single most common reason a portfolio reads as a template. */ .work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-top:40px; } .work-grid>:first-child{grid-column:1 / -1;} .work-item{ position:relative; background:var(--card); overflow:hidden; /* The wide opening cell is letterboxed; the rest are closer to square. */ aspect-ratio:4 / 3; } .work-grid>:first-child.work-item{aspect-ratio:21 / 9;} .work-img{ display:block;width:100%;height:100%; object-fit:cover; /* A slow, tiny scale on hover reads as "alive" where a fast, large one reads as a stock-photo carousel. */ transition:transform 1.2s cubic-bezier(.22,1,.36,1),filter .6s ease; transform:scale(1.001); } .work-item:hover .work-img{transform:scale(1.045);} /* Caption sits in a gradient scrim rather than a solid bar, so the photo runs all the way to the bottom edge of the cell. */ .work-cap{ position:absolute;inset:auto 0 0 0; padding:56px 26px 22px; background:linear-gradient(to top,rgba(8,8,10,.92) 0%,rgba(8,8,10,.62) 45%,transparent 100%); pointer-events:none; z-index:3; } .work-service{ font-family:'DM Mono',monospace; font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--gold-lt); display:block;margin-bottom:7px; } .work-title{ font-family:'Playfair Display',serif; font-size:22px;font-weight:500;letter-spacing:.01em; color:var(--white);line-height:1.25; } .work-detail{ font-family:'DM Mono',monospace; font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--text-sub); margin-top:8px; } .work-detail span{color:var(--rule-lt);margin:0 8px;} @media(max-width:720px){ .work-grid{grid-template-columns:1fr;} .work-grid>:first-child.work-item{aspect-ratio:4 / 3;} .work-cap{padding:44px 18px 18px;} .work-title{font-size:18px;} } /* ---- DRAG-TO-COMPARE ---- Only rendered for a project that has both a before and an after photo. Both images are stacked at full size; the "before" is revealed by a clip-path driven off one custom property, so dragging costs a single compositor-friendly style change per frame and never triggers layout. */ .ba{position:relative;width:100%;height:100%;--pos:50%;touch-action:pan-y;cursor:ew-resize;user-select:none;} .ba-layer{position:absolute;inset:0;} .ba-layer img{display:block;width:100%;height:100%;object-fit:cover;} /* Clip from the right edge inward, so --pos reads as "how much of the before photo is showing" and maps directly to the handle position. */ .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:2;} .ba-after{z-index:1;} .ba-handle{ position:absolute;top:0;bottom:0;left:var(--pos); width:2px;margin-left:-1px; background:var(--gold); z-index:4; box-shadow:0 0 0 1px rgba(8,8,10,.55),0 0 22px rgba(196,163,90,.5); pointer-events:none; } /* The grip is the affordance — without something that looks grabbable, most visitors never discover the slider at all. */ .ba-grip{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); width:46px;height:46px;border-radius:50%; background:rgba(8,8,10,.82); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid var(--gold); display:flex;align-items:center;justify-content:center; gap:5px; transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s; } .ba:hover .ba-grip{transform:translate(-50%,-50%) scale(1.08);background:rgba(8,8,10,.94);} /* Two chevrons, drawn in CSS so the component carries no icon dependency. */ .ba-grip::before,.ba-grip::after{ content:'';width:6px;height:6px; border-top:1.5px solid var(--gold-lt);border-right:1.5px solid var(--gold-lt); } .ba-grip::before{transform:rotate(-135deg);} .ba-grip::after{transform:rotate(45deg);} /* Corner tags telling the visitor which half is which. They fade out while dragging so they never cover the thing being compared. */ .ba-tag{ position:absolute;top:16px; font-family:'DM Mono',monospace; font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase; padding:5px 11px; background:rgba(8,8,10,.72); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); border:1px solid rgba(196,163,90,.28); color:var(--gold-lt); z-index:5;pointer-events:none; transition:opacity .3s ease; } .ba-tag-before{left:16px;} .ba-tag-after{right:16px;color:var(--cream);border-color:rgba(250,248,244,.24);} .ba.is-dragging .ba-tag{opacity:0;} .ba.is-dragging .ba-handle{box-shadow:0 0 0 1px rgba(8,8,10,.55),0 0 34px rgba(196,163,90,.75);} /* Keyboard users get the same control: the container is a real slider, so arrow keys move the divider and screen readers announce a percentage. */ .ba:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px;} /* A compare cell keeps its own caption above the image layers. */ .work-item.has-compare .work-cap{padding-bottom:26px;} @media(prefers-reduced-motion:reduce){ .work-img,.ba-grip,.ba-tag{transition:none;} .work-item:hover .work-img{transform:none;} } /* ============================================================ COUNTER BAND ============================================================ */ .stats-bg{background:var(--black);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);} .stats-grid{ display:grid;grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); } .stat{ background:var(--black); padding:44px 26px; text-align:center; } .stat-num{ font-family:'Playfair Display',serif; font-size:clamp(38px,5vw,58px);font-weight:600;line-height:1; color:var(--white); /* Tabular figures stop the number jittering sideways while it counts up. */ font-variant-numeric:tabular-nums; display:block; } .stat-num em{font-style:normal;color:var(--gold);} .stat-label{ font-family:'DM Mono',monospace; font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-sub); margin-top:14px;display:block; } @media(max-width:820px){ .stats-grid{grid-template-columns:repeat(2,1fr);} .stat{padding:32px 18px;} } /* ============================================================ LIVE AVAILABILITY ============================================================ */ /* Sits above the estimate form. Hidden until /api/content confirms a real count for the current month — an invented number would be the exact kind of fake urgency this site's copy avoids everywhere else. */ .avail{ display:none; align-items:center;gap:14px; margin:0 auto 30px; padding:13px 22px; max-width:max-content; border:1px solid rgba(196,163,90,.3); background:rgba(196,163,90,.05); font-family:'DM Mono',monospace; font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:var(--gold-pale); } .avail.is-live{display:flex;} .avail-dot{ width:7px;height:7px;border-radius:50%; background:var(--gold); flex-shrink:0; box-shadow:0 0 0 0 rgba(196,163,90,.6); animation:availPulse 2.6s ease-out infinite; } @keyframes availPulse{ 0%{box-shadow:0 0 0 0 rgba(196,163,90,.55);} 70%{box-shadow:0 0 0 9px rgba(196,163,90,0);} 100%{box-shadow:0 0 0 0 rgba(196,163,90,0);} } .avail-count{color:var(--white);} @media(max-width:640px){ .avail{font-size:10px;padding:11px 16px;gap:10px;text-align:center;} } @media(prefers-reduced-motion:reduce){ .avail-dot{animation:none;} } /* ============================================================ INSTAGRAM FEED (Juicer embed) Juicer draws its own markup and ships its own stylesheet from their CDN, so this block is an override layer rather than a component. Every selector below is a real class from Juicer's current embed bundle ("jcr-" prefixed, all of it scoped under .juicer-feed), and each rule exists to undo one default that fights this page: light cards, rounded corners, 20px gutters, 16/9 crops and a caption block under every photo. The !importants are deliberate and not laziness. Juicer's stylesheet loads from their CDN after this file and sets several of these properties inline from the dashboard config, so ordinary specificity does not reliably win. ============================================================ */ .ig-bg{background:var(--black);border-top:1px solid var(--rule);} /* The section is revealed by initInstagram() once Juicer has actually rendered posts. Until then it stays out of the page entirely — a heading and a subheading standing over an empty band is worse than no section. */ #instagram[hidden]{display:none!important;} .juicer-feed{ width:100%!important; max-width:none!important; /* Juicer's own font stack is loaded for its captions, which are hidden here anyway. Inherit the page's instead so any text it does show matches. */ font-family:'Outfit',sans-serif!important; } /* ---- GRID ---- Juicer's default grid is one column, widened by inline styles from the dashboard's column setting. Overriding it here keeps the breakpoints in step with .reviews-grid and .work-grid rather than with Juicer's config. */ .juicer-feed .jcr-feed-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; /* 2px gutters, matching every other grid on this page. Juicer's default 20px spacing is what makes an embed read as a widget. */ gap:2px!important; } /* Six posts, and only six. The feed itself returns more, and capping in CSS rather than in the dashboard means the section stays a highlight reel even if that setting is changed later. */ .juicer-feed .jcr-post:nth-child(n+7){display:none!important;} /* Juicer's own promo tile on non-white-label plans. Not content, so not shown. */ .juicer-feed .juicer-ad,.juicer-feed .jcr-juicer-ad-logo{display:none!important;} /* ---- TILE ---- */ .juicer-feed .jcr-post-card{ background:var(--surface)!important; border:0!important; border-radius:0!important; box-shadow:none!important; overflow:hidden!important; } /* Square tiles. Juicer crops to 16/9 by default; a square grid is what reads as an Instagram feed, and fixing the ratio here means the box is reserved at its final size before any image arrives, so the section cannot shift the page. */ .juicer-feed .jcr-media-wrapper, .juicer-feed .jcr-media-wrapper--16x9, .juicer-feed .jcr-post-image{ aspect-ratio:1 / 1!important; width:100%!important; height:auto!important; margin:0!important; border-radius:0!important; overflow:hidden!important; } .juicer-feed .jcr-post-image img, .juicer-feed .jcr-media-wrapper img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; /* Same slow, small lift as .work-img. */ transition:transform 1.2s cubic-bezier(.22,1,.36,1)!important; transform:scale(1.001); } .juicer-feed .jcr-post:hover .jcr-post-image img, .juicer-feed .jcr-post:hover .jcr-media-wrapper img{transform:scale(1.045);} /* ---- CHROME OFF ---- Captions, avatars, timestamps, source badges and the actions bar. The brief for this section is a photo grid: the caption is on Instagram, one tap away, and repeating it here in Juicer's type against this page's type is what makes an embed look bolted on. */ .juicer-feed .jcr-post-content, .juicer-feed .jcr-post-header, .juicer-feed .jcr-post-author, .juicer-feed .jcr-post-author-meta, .juicer-feed .jcr-author-name, .juicer-feed .jcr-author-image, .juicer-feed .jcr-post-message, .juicer-feed .jcr-post-timestamp, .juicer-feed .jcr-post-source-icon, .juicer-feed .jcr-post-actions, .juicer-feed .jcr-post-stat, .juicer-feed .jcr-feed-filters, .juicer-feed .jcr-pagination-bar{display:none!important;} /* Juicer's hover scrim is a flat grey wash over the photo. Swapped for the same bottom-up gradient the work gallery uses, so the two sections hover alike. */ .juicer-feed .jcr-post-scrim{ background:linear-gradient(to top,rgba(8,8,10,.55) 0%,transparent 60%)!important; opacity:0!important; transition:opacity .35s ease!important; } .juicer-feed .jcr-post:hover .jcr-post-scrim{opacity:1!important;} .juicer-feed .jcr-post a:focus-visible, .juicer-feed .jcr-post-card:focus-visible{outline:2px solid var(--gold-lt)!important;outline-offset:-2px!important;} /* ---- PLAY BADGE ---- Most of this account's posts are Reels, and Juicer's video overlay is a dashboard toggle that is currently off. initInstagram() tags a post whose thumbnail comes from Juicer's video_thumbnail endpoint with .is-video, and the badge is drawn here in CSS — no asset, no