/* ═══════════════════════════════════════════════════════════ frame-renderer.css — Canonical shared frame, mat and bevel harmjanschuurman.com | VER 9.17-v11 ────────────────────────────────────────────────────────── Loaded by both: hero/index.php (filemtime cache-bust) admin/hero-manager.html (?v=917-fix1) Do NOT duplicate these rules anywhere else. ═══════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ CANONICAL BEVEL PLANES (4-plane clip-path geometry) Added VER 9.16e-r15 — frame-renderer.js controls placement. Each plane is a trapezoid with 45° mitred corners. --bvw = bevel width (px), set by JS on the wrap --bvt-c / --bvr-c / --bvb-c / --bvl-c = face colours ════════════════════════════════════════════════════════════ */ .hero-bevel-wrap { pointer-events: none; z-index: 4; /* above .hero-card__inner (z:auto) and photo */ overflow: hidden; /* clip any rounding artifacts */ --bvw: 6px; --bvt-c: rgba(255,255,255,0.45); --bvr-c: rgba(0,0,0,0.30); --bvb-c: rgba(0,0,0,0.42); --bvl-c: rgba(255,255,255,0.22); } /* All four planes */ .hbev { position: absolute; display: block; } /* TOP PLANE: trapezoid, wide at outer edge, narrower at photo edge */ .hbev--top { top: 0; left: 0; right: 0; height: var(--bvw); background: var(--bvt-c); clip-path: polygon( 0 0, 100% 0, calc(100% - var(--bvw)) 100%, var(--bvw) 100% ); } /* BOTTOM PLANE */ .hbev--bottom { bottom: 0; left: 0; right: 0; height: var(--bvw); background: var(--bvb-c); clip-path: polygon( var(--bvw) 0, calc(100% - var(--bvw)) 0, 100% 100%, 0 100% ); } /* LEFT PLANE */ .hbev--left { top: 0; left: 0; bottom: 0; width: var(--bvw); background: var(--bvl-c); clip-path: polygon( 0 0, 100% var(--bvw), 100% calc(100% - var(--bvw)), 0 100% ); } /* RIGHT PLANE */ .hbev--right { top: 0; right: 0; bottom: 0; width: var(--bvw); background: var(--bvr-c); clip-path: polygon( 0 var(--bvw), 100% 0, 100% 100%, 0 calc(100% - var(--bvw)) ); } /* Mobile: bevel stays visible but uses absolute overlay positioning so it does not add document-flow height. Bevel wrap must be absolute inside its card. */ .hero-section[data-bp="mobile"] .hero-bevel-wrap { position: absolute; pointer-events: none; /* smaller bevel width clamped by JS */ --bvw: 3px; } .hero-section[data-bp="mobile"] .hbev { opacity: 0.7; /* subtler on mobile */ } /* Photo-opening contact line — independent of bevel-light direction. This keeps white/high-key image edges visually separated from a white mat, just like the thin contact shadow at a real passepartout cut opening. */ .hero-photo-opening { position: relative; } .hero-photo-opening::after { content: ''; position: absolute; inset: 0; z-index: 12; pointer-events: none; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(28, 28, 28, var(--opening-keyline-alpha, 0.19)), inset 0 0 3px rgba(0, 0, 0, var(--opening-keyline-soft-alpha, 0.07)); } /* ── Shadow composition via CSS variables ───────────────────── JS sets: --sh-x --sh-y --sh-blur --sh-op (cast shadow from room lighting) --fr-depth-sh (frame contact/depth shadow) CSS composes them here — neither admin nor public may write boxShadow inline. ─────────────────────────────────────────────────────────── */ .hero-card--frame-managed.hero-card--framed, .hero-card--frame-managed.hero-card--framed-black, .hero-card--frame-managed.hero-card--framed-white, .hero-card--frame-managed.hero-card--framed-wood { box-shadow: /* Cast shadow from room light */ calc(var(--sh-x, -4px)) calc(var(--sh-y, 8px)) calc(var(--sh-blur, 28px)) rgba(0,0,0, calc(var(--sh-op, 0.45))), /* Frame body depth — inset bright edge */ inset 2px 2px 4px rgba(255,255,255,0.14), /* Frame body depth — inset dark edge */ inset -2px -2px 6px rgba(0,0,0,0.40), /* Contact shadow line under frame edge */ var(--fr-depth-sh, 0 1px 3px rgba(0,0,0,0.35)); } .hero-card--frame-managed.hero-card--polaroid { box-shadow: calc(var(--sh-x, -3px)) calc(var(--sh-y, 6px)) calc(var(--sh-blur, 24px)) rgba(0,0,0, calc(var(--sh-op, 0.42))), -6px 12px 44px rgba(0,0,0,0.32); } /* ══════════════════════════════════════════════════════════════ CANONICAL FRAME APPEARANCE — overrides legacy hero.css rules This block is the single source of truth for all frame styles. Both admin and public use exactly these rules. ══════════════════════════════════════════════════════════════ */ /* Polaroid (shared with CSS var shadow) */ .hero-card--frame-managed.hero-card--polaroid { background: var(--mat-color, #f6f6f4); padding: 10px 10px 42px; } .hero-card--frame-managed.hero-card--polaroid .hero-card__caption { position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 11px; } /* All framed variants — canonical border from JS CSS vars */ .hero-card--frame-managed.hero-card--framed { border: var(--fr-width, 8px) solid var(--fr-color, #1a1612); border-radius: 0; overflow: visible; padding: 0; } /* Frame colour overrides */ .hero-card--frame-managed.hero-card--framed-black { background: #fff; } .hero-card--frame-managed.hero-card--framed-white { background: #f0ede8; } /* Wood frame: mat and frame are separated, with a softer birch texture based on the supplied light birch reference. The frame ring uses a muted photo-texture plus a gentle tone wash so it feels natural instead of rendered. */ .hero-card--frame-managed.hero-card--framed-wood { position: relative; isolation: isolate; background: linear-gradient( var(--mat-color, #f7f4ee), var(--mat-color, #f7f4ee) ) padding-box, linear-gradient( rgba(247, 241, 232, 0.42), rgba(247, 241, 232, 0.42) ) border-box, url('/assets/frame-textures/birch-light-reference.jpg') left top / 240px auto repeat border-box, linear-gradient( 180deg, #dac8ab 0%, #d5c39f 22%, #cfbc98 50%, #ddccb0 74%, #d5c19d 100% ) border-box; background-blend-mode: normal, normal, multiply, normal; } /* Hover: no box-shadow here — CSS variable rule handles it */ .hero-card--frame-managed.hero-card--framed:hover, .hero-card--frame-managed.hero-card--polaroid:hover { /* Hover shadow amplified via CSS var rule below */ --sh-op-hover: calc(var(--sh-op, 0.42) + 0.15); }